ui-lit/theme/dark.js

UI Elements on LIT

import { scrollbarCSSVarNames } from './../styles/scrollbar';
import { css } from 'lit';
import { rangeCSSNames as range } from '../range/style';
import { buttonCSSVarsNames as button } from '../button/styles';
import { tabsCSSVarNames as tabs } from '../tabs/styles';
import { selectCSSVarNames as select } from '../select/styles';
import { spinnerCSSVarsNames as spinner } from '../spinner/styles';
import { tableCSSVarsNames as table } from '../table/styles';
import { checkboxCSSVarsNames as checkbox } from '../checkbox/styles';
import { inputCSSVarNames as input } from '../styles/input';
import { dialogCSSVarNames as dialog } from '../dialog/styles';
import { paginationCSSVarsNames as pagination } from '../pagination/style';
import { dividerCSSVarsNames as divider } from '../divider/styles';
import { noteCSSVarsNames as note } from '../note/styles';
import { circleCSSVarsNames as circle } from './../circlepercent/styles';
import { iconCSSVarNames as icon } from './../icon/styles';
import { menuCSSVarsNames } from './../menu/styles';
import { textCSSVarsNames as text } from './../text/styles';
import { linkCSSVarsNames as link } from './../link/styles';
import { tooltipCSSVarsNames as tooltip } from './../tooltip/styles';
import { panelCSSVarsNames as panel } from './../panel/styles';
import { rangeCSSNames as sidebar } from '../sidebar/style';
export const darkStyles = css `
        :host([theme = "dark"]){
            color: var(--primary--650);
            background-color: var(--primary-1300);

            ${text.colorAttention}: hsl(38, calc(90% + var(--s) * 0.2), calc(55% + var(--l) * 0.1));
            ${text.colorDanger}: var(--negative-0);
            ${text.colorSuccess}: var(--positive-0);
            ${text.colorAccented}: var(--positive-0);

            ${icon.color}: var(--primary--650);
            ${icon.positiveColor}: var(--positive-0);
            ${icon.negativeColor}: var(--negative-0);

            ${circle.color}: var(--primary--100);

            ${link.color}: var(--primary--100);
            ${link.colorHover}: var(--primary--300);


            ${divider.color}: var(--primary-800);

            ${scrollbarCSSVarNames.thumb}: var(--primary-1000);
            ${scrollbarCSSVarNames.track}: var(--primary-1500);

            ${note.color}: var(--primary--600);
            ${note.background}: var(--primary-200);
            ${note.border}: 1px solid var(--primary-100);
            ${note.shadow}: 1px 1px 3px var(--primary-1450);


            ${note.errorColor}: var(--negative--600);
            ${note.errorBackground}: var(--negative-200);
            ${note.errorBorder}: 1px solid var(--negative-100);
            ${note.errorShadow}: 1px 1px 3px var(--negative-1450);


            ${tooltip.color}: var(--primary--600);
            ${tooltip.background}: var(--primary-300);
            ${tooltip.shadow}: 2px 2px 3px var(--primary-700);

            ${panel.color}: var(--primary--200);
            ${panel.background}: var(--primary-1200);
            ${panel.border}: 1px solid var(--primary-300);;

            ${panel.dangerColor}: var(--negative--200);
            ${panel.dangerBackground}: var(--negative-1200);
            ${panel.dangerBorder}: 1px solid var(--negative-300);

            ${panel.successColor}: var(--positive--200);
            ${panel.successBackground}: var(--positive-1200);
            ${panel.successBorder}: 1px solid var(--positive-300);

    
            ${button.color}: var(--primary--600);
            ${button.background}: initial;
            ${button.backgroundHover}: var(--primary-1200);
            ${button.ripple}: var(--primary-900);
            ${button.backgroundFocus}: var(--primary-300);
            ${button.border}: 1px solid var(--primary-900);
            ${button.outlineFocus}: 1px solid var(--primary-700);


            ${button.switchColor}: var(--primary--600);
            ${button.switchOnColor}: var(--primary--600);
            ${button.switchOnBackground}: var(--primary-400);

            ${button.switchOutlineFocus}: 1px solid var(--primary-700);
            ${button.switchOnOutlineFocus}: 1px solid var(--primary-700);

            
            ${button.primaryColor}: var(--primary--650);
            ${button.primaryBackground}: var(--primary-300);
            ${button.primaryBackgroundHover}: var(--primary-500);
            ${button.primaryRipple}: var(--primary-100);
            ${button.primaryBorder}: 1px solid var(--primary-500);
            ${button.primaryOutlineFocus}: 1px solid var(--primary-300);

            ${button.successColor}: var(--positive--650);
            ${button.successBackground}: var(--positive-300);
            ${button.successBackgroundHover}: var(--positive-500);
            ${button.successRipple}: var(--positive-100);
            ${button.successBorder}: 1px solid var(--positive-200);

            ${button.dangerColor}: var(--negative--650);
            ${button.dangerBackground}: var(--negative-300);
            ${button.dangerBackgroundHover}: var(--negative-500);
            ${button.dangerRipple}: var(--negative-100);
            ${button.dangerBorder}: 1px solid var(--negative-200);


            ${range.outlineFocus}: 1px dashed var(--primary-200);
            ${range.filled}: var(--primary-300);
            ${range.filledHover}: var(--primary-0);

            ${range.trackBackground}: var(--primary-1100);
            ${range.trackBackgroundHover}: var(--primary-900);
            ${range.trackOutline}: 1px solid var(--primary-1050);

            ${range.thumbBackground}: var(--primary-1200);
            ${range.thumbBackgroundHover}: var(--primary-800);
            ${range.thumbBackgroundPressed}: var(${range.filledHover});
            ${range.thumbOutline}: 2px solid var(--primary--600);
            ${range.thumbShadow}: 1px 1px 8px var(--primary-1450);
            ${range.pointBackground}: var(--primary-1300);
            
            
            ${tabs.color}: var(--primary-100);
            ${tabs.indicator}: var(--primary-100);
            ${tabs.colorDefault}: #777;
            ${tabs.outline}: 1px dashed  var(--primary-100);
            ${tabs.background}: transparent;
            ${tabs.backgroundHover}: var(--primary-1200);
            ${tabs.ripple}: var(--primary-1000);
            

            ${menuCSSVarsNames.color}: var(--primary--650);
            ${menuCSSVarsNames.background}: var(--primary-1200);
            ${menuCSSVarsNames.backgroundHover}: var(--primary-1000);
            ${menuCSSVarsNames.ripple}: var(--primary-800);


            ${select.color}: var(--primary--650);
            ${select.background}: initial;
            ${select.backgroundHover}: var(--primary-1200);
            ${select.ripple}: var(--primary-900);
            ${select.outlineFocus}: 1px solid var(--primary-700);
            
            ${select.border}: 1px solid var(--primary-900);
            ${select.circleColor}: var(--primary-500);
            ${select.optionColor}:  var(--primary--700);
            ${select.optionBackground}: var(--primary-1200);
            ${select.optionBackgroundHover}: var(--primary-1100);
            ${select.optionRipple}: var(--primary-800);
            ${select.listboxBorder}: 1px solid var(--primary-900);
            ${select.listboxShadow}: var(--primary-1100);

            ${select.fullscreenColor}: var(--primary--700);
            ${select.fullscreenBackground}: var(--primary-800);
            ${select.fullscreenOverlayBackground}: var(--primary-op-08-1500);
            ${select.fullscreenShadow}: var(--primary-1300);


            ${spinner.color}: var(--primary-500);
            ${spinner.background}: var(--primary-1400);
            

            ${table.rowSelected}: var(--primary-1150);
            ${table.rowHover}: var(--primary-1250);
            ${table.headerBackground}: var(--primary-1150);

            ${table.headerIconColor}: #777;
            ${table.headerIconColorHover}: var(--primary--500);
            ${table.headerIconColorSelected}: var(--primary-0);
            ${table.headerIconBackgroundHover}: var(--primary-1250);

            ${table.headerFilterContentBackground}: var(--primary-1200);
            ${table.headerFilterContentShadow}: var(--primary-1400);

            ${pagination.backgroundSelected}: var(--primary-1000);
            
            
            ${checkbox.border}: 2px solid var(--primary-800);
            ${checkbox.checkmarkColor}: var(--primary--650);
            ${checkbox.background}: var(--primary-1300);
            ${checkbox.shadowHover}: 0 0 5px var(--primary-800);
            ${checkbox.switcherControlBackground}: var(--primary--700);
            ${checkbox.switcherControlShadow}: 1px 1px 5px var(--primary-1300);
            
            
            ${input.color}: var(--primary--650);
            ${input.background}: var(--primary-1350);
            ${input.border}: 1px solid var(--primary-900);
            ${input.outlineFocus}: 1px solid var(--primary-700);


            ${dialog.headerColor}: var(--primary--650);
            ${dialog.headerBackgroundColor}: var(--primary-1400);
            ${dialog.backgroundColor}: var(--primary-1300);
            ${dialog.color}: var(--primary--650);
            ${dialog.overlapBackground}: var(--primary-op-08-1500);
            ${dialog.boxshadow}: var(--primary-1200);


            ${sidebar.color}: var(--primary--600);
            ${sidebar.background}: var(--primary-1400);
            ${sidebar.backgroundHover}: var(--primary-1200);
            ${sidebar.ripple}: var(--primary-900);
            ${sidebar.backgroundFocus}: var(--primary-300);
            ${sidebar.outlineFocus}: 1px solid var(--primary-700);
            ${sidebar.border}: 1px solid var(--primary-900);
            ${sidebar.circle}: var(--primary-500);
        }
    `;