lucuma-css.lucuma-ui-variables-dark.scss Maven / Gradle / Ivy
//=================
// DARK THEME VARS
//=================
@mixin colors-dark {
// Split color in HSL to easily do variations
// https://blog.jim-nielsen.com/2020/sass-color-functions-in-css/
--color-background-base-h: 0;
--color-background-base-s: 0%;
--color-background-base-l: 7.06%;
--color-background-base-hsl: var(--color-background-base-h), var(--color-background-base-s),
var(--color-background-base-l);
--color-background: hsl(var(--color-background-base-hsl));
// Variations of the background color
// Light shades
--color-background-light-3: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 3%)
);
--color-background-light-3-a: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 3%),
0.7
);
--color-background-light-5: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 5%)
);
--color-background-light-6: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 6%)
);
--color-background-light-8: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 8%)
);
--color-background-light-10: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 10%)
);
--color-background-light-12: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 12%)
);
--color-background-light-15: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 15%)
);
--color-background-light-20: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 20%)
);
--color-background-light-25: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 25%)
);
--color-background-light-45: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 45%)
);
--color-background-light-50: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 50%)
);
--color-background-light-75: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) + 75%)
);
// Dark shades
--color-background-dark-5: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) - 5%)
);
--color-background-dark-10: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) - 10%)
);
// text color
--color-text-base-h: 0;
--color-text-base-s: 0%;
--color-text-base-l: 100%;
--color-text-base-a: 0.87;
--color-text-base-hsla: var(--color-background-base-h), var(--color-background-base-s),
var(--color-text-base-l), var(--color-text-base-a);
--color-text-base: hsla(var(--color-text-base-hsla));
// Light shades
--color-text-light-45: hsl(
var(--color-text-base-h),
var(--color-text-base-s),
calc(var(--color-text-base-l) - 45%)
);
--color-text-light-55: hsl(
var(--color-text-base-h),
var(--color-text-base-s),
calc(var(--color-text-base-l) - 55%)
);
--color-text-light-75: hsl(
var(--color-text-base-h),
var(--color-text-base-s),
calc(var(--color-text-base-l) - 75%)
);
--color-text-full: hsl(
var(--color-text-base-h),
var(--color-text-base-s),
var(--color-text-base-l),
1
);
--color-text-alt-hsla: var(--color-background-base-h), var(--color-background-base-s),
var(--color-text-base-l), 1;
--color-text-alt: hsla(var(--color-text-alt-hsla));
// dark shades
--color-text-dark-8-hsla: var(--color-text-base-h), var(--color-text-base-s),
calc(var(--color-text-base-l) - 8%), calc(var(--color-text-base-a) - 0.1);
--color-text-dark-8: hsla(var(--color-text-dark-8-hsla));
--color-text-dark-10-hsla: var(--color-text-base-h), var(--color-text-base-s),
calc(var(--color-text-base-l) - 10%), calc(var(--color-text-base-a) - 0.3);
--color-text-dark-10: hsla(var(--color-text-dark-10-hsla));
--gray-h: 210;
--gray-s: 5.7%;
--gray-l: 34.1%;
--gray-a: 1;
--gray-hsla: var(--gray-h), var(--gray-s), var(--gray-l), var(--gray-a);
--gray: hsla(var(--gray-hsla));
// dark grays
--gray-dark-5: hsla(var(--gray-h), var(--gray-s), calc(var(--gray-l) - 5%), var(--gray-a));
--gray-dark-10: hsla(var(--gray-h), var(--gray-s), calc(var(--gray-l) - 10%), var(--gray-a));
--gray-dark-h: 210;
--gray-dark-s: 7.9%;
--gray-dark-l: 24.7%;
--gray-dark-a: 1;
--gray-dark-hsla: var(--gray-dark-h), var(--gray-dark-s), var(--gray-dark-l), var(--gray-dark-a);
--gray-dark: hsla(var(--gray-dark-hsla));
--gray-dark-semi-hsla: var(--gray-dark-h), var(--gray-dark-s), var(--gray-dark-l), 75%;
--gray-dark-semi: hsla(var(--gray-dark-semi-hsla));
--negative-color: hsla(2, 81.2%, 64.5%, 80%);
}
@mixin named-colors-dark {
--focus-inner-color: hsla(230, 52%, 42%, 1);
--focus-outer-color: hsla(220, 72%, 73%, 0.85);
--hover-background-color: hsla(260, 72%, 10%, 0.85);
--dragging-background-color: hsla(259, 39%, 24%, 0.85);
--text-color: var(--color-text-base);
--dark-text-color: rgba(255, 255, 255, 0.85);
--text-alt: var(--color-text-alt);
--link-color: lightblue;
--control-background-color: var(--color-background-light-20);
--negative-text-color: var(--color-text-full);
--negative-background-color: hsl(349, 100%, 34.5%);
--negative-icon-color: var(--negative-color);
--warning-text-color: hsl(0, 0%, 100%);
--warning-background-color: hsl(35, 75.3%, 49.8%);
--error-background-color: hsl(0, 100%, 50%);
--explore-accent-color: hsla(120, 73.4%, 74.9%, 80%);
--accent-color: hsla(120, 73.4%, 74.9%, 80%);
--explore-accent-color-darken-5: hsla(120, 73.4%, 69.9%, 80%);
--explore-accent-color-lighten-5: hsla(120, 73.4%, 79.9%, 80%);
--explore-selected-box-color: yellow;
--under-tab-background-color: var(--color-background-light-10);
--under-tab-background-focus-color: var(--color-background-light-6);
--under-tab-border-color: var(--gray-dark-10);
--under-tab-background-active-color: var(--color-background-light-20);
--under-tab-background-focus-active-color: var(--color-background-light-15);
--sidetab-background: var(--color-background-light-5);
--explore-group-hover: var(--hover-background-color);
--explore-group-dragging: var(--dragging-background-color);
--main-header-color: var(--text-color);
--main-header-background-color: var(--color-background);
--checkbox-toggle-checked-background: var(--explore-accent-color);
--scrollbar-background: var(--color-background-light-15);
--scrollbar-background-thumb: var(--color-background-light-5);
--scrollbar-background-thumb-hover: var(--color-background-light-3);
--hud-color: hsla(
var(--color-text-base-h),
var(--color-text-base-s),
calc(var(--color-text-base-l) - 25%),
0.9
);
--hud-stripe-color: hsla(
var(--color-text-base-h),
var(--color-text-base-s),
calc(var(--color-text-base-l) - 25%),
0.01
);
--hud-background-color: hsla(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) - 5%),
0.7
);
// AGS colors
--ags-icon-color: hsla(60, 100%, 50%, 80%);
--ags-fast-guide-speed-color: hsl(120deg 100% 25.1%);
--ags-medium-guide-speed-color: hsl(51, 100%, 50%);
--ags-slow-guide-speed-color: hsl(33, 100%, 50%);
// Tooltip colors
--tooltip-background-color: var(--color-background-light-3);
--tooltip-viz-background-color: var(--color-background-light-3-a);
--tooltip-border-color: var(--color-background-light-50);
--tooltip-viz-text-color: var(--color-background-light-75);
--tooltip-border-width: 1px;
--tooltip-z-index: 150;
--tooltip-font-size: 8px;
--help-background-color: white;
}
@mixin site-dark {
--site-page-background: var(--color-background);
--site-text-color: var(--text-color);
--site-dark-text-color: var(--dark-text-color);
--site-hovered-text-color: var(--text-alt);
--site-link-color: var(--link-color);
--site-input-color: var(--color-text-dark-8);
--site-border-color: var(--gray);
--site-solid-border-color: var(--color-background-light-50);
--site-input-placeholder-focus-color: var(--color-text-light-45);
--site-input-placeholder-color: var(--color-text-light-55);
--site-input-highlight-color: var(--color-text-full);
--site-disabled-opacity: 0.65;
--site-input-highlight-background: hsl(211, 31%, 48%);
--site-highlight-background: hsl(211, 31%, 48%);
}
@mixin datepicker-dark {
--date-picker-background-color: var(--color-background-light-10);
--date-picker-header-background-color: var(--color-background-light-20);
--date-picker-border-color: var(--color-background-light-50);
--date-picker-highlighted-color: hsl(125, 58.4%, 99%);
--date-picker-highlighted-color-darken-5: hsl(125, 58.4%, 47%);
--date-picker-muted-color: hsl(0, 0%, 80%);
--date-picker-muted-color-lighten-10: hsl(0, 0%, 90%);
--date-picker-muted-color-darken-10: hsl(0, 0%, 70%);
--date-picker-muted-color-darken-15: hsl(0, 0%, 65%);
--date-picker-text-color: var(--dark-text-color);
--date-picker-header-color: var(--text-color);
--date-picker-selected-color: var(--color-background);
--date-picker-selected-color-darken-5: var(--color-background-dark-5);
--date-picker-selected-color-lighten-5: var(--color-background-light-5);
--date-picker-selected-color-lighten-10: var(--color-background-light-10);
--date-picker-selected-color-lighten-45: var(--color-background-light-45);
--date-picker-keyboard-selected-background-color: var(--color-background-light-6);
--date-picker-keyboard-selected-color: var(--text-color);
}
@mixin form-dark {
--input-color: var(--color-text-full);
--form-input-color: var(--site-input-color);
--form-input-focus-color: var(--color-text-base);
--form-input-background: var(--control-background-color);
--form-input-focus-border-color: transparent;
--form-input-focus-box-shadow: 0 0 0 0.1rem var(--focus-inner-color),
0 0 0 0.2rem var(--focus-outer-color);
--form-prompt-text-color: var(--negative-text-color);
--form-prompt-background: var(--negative-background-color);
}
@mixin button-dark {
@activeColor: hsl(206, 66.7%, 38.8%);
@tertiaryTextColor: rgba(0, 0, 0, 0.6);
@tertiaryHoverColor: lighten(fadein(@tertiaryTextColor, 100%), 20%);
@tertiaryActiveColor: lighten(@tertiaryHoverColor, 20%);
--button-hover-background-color: lighten(@color-gray-dark, 5%);
--button-hover-border-color: lighten(@color-gray-dark, 25%);
--button-basic-hover-background-color: lighten(@color-gray-dark, 10%);
--button-background-color: var(--gray-dark);
--button-background-color-semi: var(--gray-dark-semi);
--button-text-color: var(--text-color);
--button-active-color: @activeColor;
--button-tertiary-text-color: var(--button-text-color);
--button-tertiary-line-color: lighten(@tertiaryTextColor, 20%);
--button-tertiary-hover-color: @tertiaryHoverColor;
--button-tertiary-hover-line-color: lighten(@tertiaryHoverColor, 20%);
--button-tertiary-focus-color: @tertiaryHoverColor;
--button-tertiary-focus-line-color: lighten(@tertiaryHoverColor, 20%);
--button-tertiary-active-color: @tertiaryActiveColor;
--button-tertiary-active-line-color: lighten(@tertiaryActiveColor, 20%);
}
@mixin label-dark {
--label-background-color: var(--gray-dark);
--label-inverted-background-color: darken(@color-gray-dark, 20%);
--label-ribbon-shadow-color: var(--gray-dark);
}
@mixin tile-dark {
--tile-background: var(--color-background-light-8);
--tile-title-background: var(--color-background-light-12);
--tile-title-color: var(--color-text-full);
--tile-resize-handle-brightness: 2;
}
@mixin obs-badge-dark {
--obs-badge-color: var(--text-color);
--obs-badge-background: var(--color-background-light-8);
--obs-selected-badge-background: var(--color-background-light-20);
}
@mixin menu-dark {
--menu-background: var(--gray-dark);
--menu-pressed-item-background: darken(@color-gray-dark, 8%);
--menu-pagination-active-background: darken(@color-gray-dark, 10%);
--menu-hover-item-background: var(--color-background-light-10);
--menu-secondary-hover-item-background: darken(@color-gray-darker, 5%);
--menu-secondary-hover-item-color: darken(@color-gray-darker, 5%);
--menu-tabular-active-background: var(--color-background-light-10);
}
@mixin segment-dark {
--segment-background: var(--color-background-light-5);
--segment-stacked-page-background: var(--color-background-light-10);
}
@mixin progress-dark {
--progress-background: var(--color-background-dark-5);
}
@mixin popup-dark {
--popup-background: var(--color-background-light-3);
--popup-arrow-background: var(--color-background-light-3);
--popup-arrow-color: var(--gray-dark-10);
}
@mixin dropdown-dark {
--dropdown-selection-background: var(--control-background-color);
--dropdown-selection-visible-color: @gray-darker;
--dropdown-item-color: var(--site-input-color);
}
@mixin checkbox-dark {
--checkbox-background: var(--control-background-color);
--checkbox-focus-background: @gray-dark;
--checkbox-active-background: var(--control-background-color);
--checkbox-active-focus-background: var(--control-background-color);
--checkbox-active-focus-check-color: @selectedTextColor;
--checkbox-border-color: var(--site-border-color);
--checkbox-active-color: var(--form-input-color);
--checkbox-hover-color: var(--input-color);
}
@mixin table-dark {
--table-background: var(--color-background-light-3);
--table-striped-background: var(--color-background-light-8);
--table-active-background-hover: var(--color-background-light-15);
--table-header-background: var(--color-background-light-15);
--table-footer-background: var(--color-background-light-15);
--table-selectable-color: var(--site-hovered-text-color);
--table-selectable-background: var(--color-background-light-12);
--table-selected-background: var(--color-background-light-25);
}
@mixin modal-dark {
--modal-background: var(--color-background-light-10);
--modal-header-background: var(--color-background-light-10);
--modal-action-background: var(--color-background-light-12);
}
@mixin dimmer-dark {
--dimmer-background-color: rgba(0, 0, 0, 0.85);
}
@mixin header-dark {
--header-block-background: var(--color-background-light-10);
}
@mixin plot-dark {
--plot-background-color: black;
--plot-text-color: var(--text-color);
--plot-text-color-hover: var(--text-alt);
--plot-text-color-disabled: hsl(0, 0%, 53%);
--plot-grid-color: hsl(0, 0%, 16%);
--plot-tooltip-background-color: hsl(0, 0%, 7%);
--plot-plot-band-night-color: hsl(0, 0%, 100%);
--plot-plot-band-night-opacity: 0.1;
--plot-plot-band-exclude-window-color: hsl(0, 93%, 48%);
--plot-plot-band-exclude-window-opacity: 0.25;
}
@mixin custom-dark {
--active-row-background: var(--orange-900);
--disabled-row-background: var(--bluegray-800);
--disabled-row-color: var(--bluegray-300);
--negative-row-background: var(--red-900);
--negative-row-color: var(--red-100);
--muted-color: var(--gray-300);
}
.dark-theme {
// Values defined based on slate theme
// COLORS
@include colors-dark;
@include named-colors-dark;
@include site-dark;
@include button-dark;
@include label-dark;
@include tile-dark;
@include obs-badge-dark;
@include form-dark;
@include menu-dark;
@include segment-dark;
@include progress-dark;
@include popup-dark;
@include dropdown-dark;
@include checkbox-dark;
@include table-dark;
@include modal-dark;
@include dimmer-dark;
@include header-dark;
@include plot-dark;
@include datepicker-dark;
@include custom-dark;
}
© 2015 - 2025 Weber Informatics LLC | Privacy Policy