wj-elements/dist/dark.css

WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.

/*
[ Dark Mode ]
*/

:host,
.wje-theme-dark,
.dark {
    color-scheme: dark;

    --wje-font-family:
        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
        'Droid Sans', 'Helvetica Neue', sans-serif;
    --wje-font-family-secondary:
        'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
        'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --wje-force-mac-font-family:
        -apple-system, BlinkMacSystemFont, 'Inter UI', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
        'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

    --wje-border-size: 0px;
    --wje-border-style: solid;

    --wje-backdrop: rgb(0, 0, 0);
    --wje-backdrop-opacity: 0.3;

    /*COLORS*/
    --wje-color: var(--wje-color-contrast-11);
    --wje-color-dark: hsl(0, 0%, 29%);
    --wje-color-light: hsl(0 0% 95%);
    --wje-background: var(--wje-color-contrast-2);
    --wje-border-color: var(--wje-color-contrast-4);

    --wje-card-background: var(--wje-color-contrast-3);
    --wje-card-color: var(--wje-color-white) !important;

    --wje-color-primary: var(--wje-color-primary-1);
    --wje-color-complete: var(--wje-color-complete-1);
    --wje-color-success: var(--wje-color-success-1);
    --wje-color-warning: var(--wje-color-warning-1);
    --wje-color-danger: var(--wje-color-danger-1);
    --wje-color-info: var(--wje-color-info-1);
    --wje-color-menu: hsl(220, 15%, 15%);
    --wje-color-contrast: hsl(210, 11%, 15%);

    --wje-color-white: #fff;
    --wje-color-black: #000;

    /* Primary */
    --wje-color-primary-1: hsla(254, 50%, 21%, 1);
    --wje-color-primary-2: hsla(254, 52%, 24%, 1);
    --wje-color-primary-3: hsla(254, 52%, 35%, 1);
    --wje-color-primary-4: hsla(254, 54%, 39%, 1);
    --wje-color-primary-5: hsla(254, 54%, 47%, 1);
    --wje-color-primary-6: hsla(254, 54%, 53%, 1);
    --wje-color-primary-7: hsla(254, 54%, 57%, 1);
    --wje-color-primary-8: hsla(254, 68%, 66%, 1);
    --wje-color-primary-9: hsla(254, 88%, 78%, 1);
    --wje-color-primary-10: hsla(254, 70%, 81%, 1);
    --wje-color-primary-11: hsla(254, 69%, 88%, 1);

    /* Complete */
    --wje-color-complete-1: hsla(211, 91%, 16%, 1);
    --wje-color-complete-2: hsla(211, 91%, 23%, 1);
    --wje-color-complete-3: hsla(211, 91%, 31%, 1);
    --wje-color-complete-4: hsla(211, 93%, 35%, 1);
    --wje-color-complete-5: hsla(211, 93%, 39%, 1);
    --wje-color-complete-6: hsla(211, 93%, 44%, 1);
    --wje-color-complete-7: hsla(211, 93%, 49%, 1);
    --wje-color-complete-8: hsla(211, 93%, 55%, 1);
    --wje-color-complete-9: hsla(211, 100%, 75%, 1);
    --wje-color-complete-10: hsla(211, 100%, 81%, 1);
    --wje-color-complete-11: hsla(211, 93%, 85%, 1);

    /* Success */
    --wje-color-success-1: hsla(158, 93%, 13%, 1);
    --wje-color-success-2: hsla(158, 94%, 16%, 1);
    --wje-color-success-3: hsla(158, 95%, 19%, 1);
    --wje-color-success-4: hsla(158, 96%, 22%, 1);
    --wje-color-success-5: hsla(158, 96%, 24%, 1);
    --wje-color-success-6: hsla(158, 95%, 27%, 1);
    --wje-color-success-7: hsla(158, 96%, 31%, 1);
    --wje-color-success-8: hsla(158, 96%, 35%, 1);
    --wje-color-success-9: hsla(158, 86%, 48%, 1);
    --wje-color-success-10: hsla(158, 78%, 62%, 1);
    --wje-color-success-11: hsla(158, 80%, 75%, 1);

    /* Warning */
    --wje-color-warning-1: hsla(47, 75%, 19%, 1);
    --wje-color-warning-2: hsla(47, 75%, 23%, 1);
    --wje-color-warning-3: hsla(47, 75%, 27%, 1);
    --wje-color-warning-4: hsla(47, 74%, 31%, 1);
    --wje-color-warning-5: hsla(47, 78%, 37%, 1);
    --wje-color-warning-6: hsla(47, 78%, 41%, 1);
    --wje-color-warning-7: hsla(47, 78%, 45%, 1);
    --wje-color-warning-8: hsla(47, 80%, 52%, 1);
    --wje-color-warning-9: hsla(47, 80%, 67%, 1);
    --wje-color-warning-10: hsla(47, 90%, 74%, 1);
    --wje-color-warning-11: hsla(47, 90%, 80%, 1);

    /* Danger */
    --wje-color-danger-1: hsla(3, 82%, 17%, 1);
    --wje-color-danger-2: hsla(3, 82%, 19%, 1);
    --wje-color-danger-3: hsla(3, 83%, 28%, 1);
    --wje-color-danger-4: hsla(3, 83%, 32%, 1);
    --wje-color-danger-5: hsla(3, 83%, 36%, 1);
    --wje-color-danger-6: hsla(3, 83%, 40%, 1);
    --wje-color-danger-7: hsla(3, 82%, 44%, 1);
    --wje-color-danger-8: hsla(3, 72%, 58%, 1);
    --wje-color-danger-9: hsla(3, 80%, 70%, 1);
    --wje-color-danger-10: hsla(3, 80%, 76%, 1);
    --wje-color-danger-11: hsla(4, 80%, 82%, 1);

    /* Info */
    --wje-color-info-1: hsla(207, 36%, 16%, 1);
    --wje-color-info-2: hsla(207, 16%, 27%, 1);
    --wje-color-info-3: hsla(207, 20%, 35%, 1);
    --wje-color-info-4: hsla(210, 7%, 45%, 1);
    --wje-color-info-5: hsla(208, 6%, 55%, 1);
    --wje-color-info-6: hsla(203, 6%, 62%, 1);
    --wje-color-info-7: hsla(213, 6%, 69%, 1);
    --wje-color-info-8: hsla(203, 5%, 71%, 1);
    --wje-color-info-9: hsla(210, 7%, 78%, 1);
    --wje-color-info-10: hsla(204, 6%, 85%, 1);
    --wje-color-info-11: hsla(210, 5%, 92%, 1);

    /* Contrast */
    --wje-color-contrast-0: hsla(240, 3%, 13%, 1);
    --wje-color-contrast-1: hsla(240, 6%, 10%, 1);
    --wje-color-contrast-2: hsla(0, 0%, 0%, 1);
    --wje-color-contrast-3: hsla(240, 5%, 30%, 1);
    --wje-color-contrast-4: hsla(240, 5%, 41%, 1);
    --wje-color-contrast-5: hsla(240, 4%, 58%, 1);
    --wje-color-contrast-6: hsla(240, 5%, 75%, 1);
    --wje-color-contrast-7: hsla(240, 5%, 84%, 1);
    --wje-color-contrast-8: hsla(240, 6%, 90%, 1);
    --wje-color-contrast-9: hsla(240, 5%, 96%, 1);
    --wje-color-contrast-10: hsla(0, 0%, 98%, 1);
    --wje-color-contrast-11: hsla(0, 0%, 100%, 1);

    /*
   [ Elements ]
   */

    /* Avatar */
    --wje-avatar-color: var(--wje-color-contrast-11);
    --wje-avatar-background-color: var(--wje-color-contrast-3);

    /* Breadcrumb */
    --wje-breadcrumb-a: var(--wje-color-contrast-8);
    --wje-breadcrumb-a-hover: var(--wje-color-contrast-6);

    /* Button */
    --wje-button-border-color: var(--wje-color-contrast-1);

    /* Divider */
    --wje-divider-border-color: var(--wje-border-color);

    /* File Upload - Item */
    --wje-file-upload-item-border-width: 1px;
    --wje-file-upload-item-border-style: solid;
    --wje-file-upload-item-border-color: var(--wje-border-color);

    /* Input */
    --wje-input-background-color: var(--wje-color-contrast-0);
    --wje-input-color: var(--wje-color);
    --wje-input-color-invalid: var(--wje-color-danger-9);
    --wje-input-border-color: var(--wje-border-color);
    --wje-input-border-color-focus: var(--wje-color-primary);

    /* Item */
    --wje-item-color: var(--wje-color);
    --wje-item-border-color: var(--wje-border-color);
    --wje-item-background: transparent;
    --wje-item-background-hover: var(--wje-color-contrast-3);

    /* Level - Indicator */
    --wje-level-indicator-color: var(--wje-color-contrast-4);
    --wje-level-indicator-color-active: var(--wje-color-contrast-6);

    /* List */
    --wje-list-background: var(--wje-background);

    /* Menu */
    --wje-menu-background: var(--wje-background);
    --wje-menu-border-color: var(--wje-border-color);

    /* Menu - Item */
    --wje-menu-item-color: var(--wje-color);
    --wje-menu-item-background: transparent;
    --wje-menu-item-color-hover: var(--wje-color-contrast-8);
    --wje-menu-item-background-hover: var(--wje-border-color);
    --wje-menu-item-color-focus: var(--wje-color-contrast-8);
    --wje-menu-item-background-focus: var(--wje-border-color);
    --wje-menu-item-color-active: var(--wje-color-contrast-8);
    --wje-menu-item-background-active: var(--wje-border-color);

    /* Option */
    --wje-option-highlighted: var(--wje-color-contrast-3);

    /* Orgchart - Item */
    --wje-orgchart-item-background: var(--wje-color-contrast-0);

    --wje-orgchart-item-highlight-background: var(--wje-color-complete-2);
    --wje-orgchart-item-boss-background: var(--wje-color-complete-2);
    --wje-orgchart-item-hover-background: var(--wje-color-contrast-3);

    --wje-orgchart-item-highlight-border: 1px solid var(--wje-color-complete-3);
    --wje-orgchart-item-boss-border: 1px solid var(--wje-border-color);
    --wje-orgchart-item-hover-border: 1px solid var(--wje-color-danger-3);

    /* Rate */
    --wje-rate-color: var(--wje-color-contrast-11);
    --wje-rate-selected-color: var(--wje-color-danger-6);

    /* Select */
    --wje-select-border-color: var(--wje-border-color);
    --wje-select-options-border-color: var(--wje-border-color);
    --wje-select-background: var(--wje-color-contrast-0);
    --wje-select-color: var(--wje-color);

    /* Tab */
    --wje-tab-color-active: var(--wje-color-primary-11);
    --wje-tab-color-hover: var(--wje-color-primary-1);

    /* Textarea */
    --wje-textarea-background-color: var(--wje-background);
    --wje-textarea-color: var(--wje-color);
    --wje-textarea-color-invalid: var(--wje-color-danger-1);
    --wje-textarea-border-color: var(--wje-border-color);
    --wje-textarea-border-color-focus: var(--wje-color-primary-1);

    /* Tooltip */
    --wje-tooltip-arrow-color: var(--wje-color-contrast-4);
    --wje-tooltip-background: var(--wje-color-contrast-4);
    --wje-tooltip-color: var(--wje-color-contrast-11);
}