Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
lucuma-css.lucuma-ui-variables-light.scss Maven / Gradle / Ivy
//=================
// LIGHT THEME VARS
//=================
@mixin colors-light {
--color-text-base-h: 0;
--color-text-base-s: 0%;
--color-text-base-l: 0%;
--color-text-base-a: 0.86;
--color-text-base-hsla: var(--color-text-base-h), var(--color-text-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%)
);
--gray: gray;
--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));
}
@mixin named-colors-light {
--focus-inner-color: hsla(240, 72%, 42%, 1);
--focus-outer-color: hsla(200, 72%, 83%, 0.75);
--hover-background-color: @lightGrey;
--dragging-background-color: @grey;
// Colors from semantic ui
--text-color: rgba(0, 0, 0, 0.87);
--dark-text-color: rgba(0, 0, 0, 0.85);
--text-alt: rgba(0, 0, 0, 0.8);
--link-color: blue;
--control-background-color: gray;
--negative-text-color: @negativeTextColor;
--negative-background-color: @negativeBackgroundColor;
--negative-icon-color: @negativeBackgroundColor;
--warning-text-color: hsl(0, 0%, 100%);
--warning-background-color: hsl(35, 95%, 50%);
--error-background-color: hsl(0, 100%, 50%);
// TODO Update these colors for light
--under-tab-background-color: white;
--under-tab-background-focus-color: gray;
--under-tab-border-color: black;
--under-tab-background-active-color: gray;
--under-tab-background-focus-active-color: gray;
--explore-accent-color: hsl(41, 89.5%, 51.4%);
--explore-selected-box-color: slateblue;
--sidetab-background: @lightGrey;
--explore-group-hover: @lightGrey;
--explore-group-dragging: @grey;
--main-header-color: var(--negative-text-color);
--main-header-background-color: black;
--scrollbar-background: lighten(@lightGrey, 5%);
--scrollbar-background-thumb: darken(@lightGrey, 15%);
--scrollbar-background-thumb-hover: darken(@lightGrey, 20%);
--hud-color: hsla(
var(--color-text-base-h),
var(--color-text-base-s),
calc(var(--color-text-base-l) - 25%),
0.9
);
--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-50);
--tooltip-border-width: 1px;
--tooltip-z-index: 150;
--tooltip-font-size: 8px;
--help-background-color: white;
}
@mixin site-light {
--site-page-background: hsl(0, 0%, 100%);
--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-base);
--site-border-color: rgba(34, 36, 38, 0.15);
--site-solid-border-color: hsl(240, 1%, 83%);
--site-input-placeholder-focus-color: var(--color-text-light-45);
--site-input-placeholder-color: var(--color-text-light-55);
--site-input-highlight-color: var(--site-text-color);
--site-disabled-opacity: 0.45;
--site-input-highlight-background: rgba(100, 100, 100, 0.4);
--site-highlight-background: hsl(214, 100%, 70%);
--checkbox-toggle-checked-background: green;
}
@mixin datepicker-light {
--date-picker-header-background-color: hsl(0, 0%, 94.1%);
--date-picker-background-color: hsl(0, 0%, 100%);
--date-picker-border-color: hsl(0, 0%, 68.2%);
--date-picker-highlighted-color: hsl(125, 58.4%, 52%);
--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: hsl(0, 0%, 0%);
--date-picker-header-color: hsl(0, 0%, 0%);
--date-picker-selected-color: hsl(206, 66.7%, 38.8%);
--date-picker-selected-color-darken-5: hsl(206, 66.7%, 33.8%);
--date-picker-selected-color-lighten-5: hsl(206, 66.7%, 43.8%);
--date-picker-keyboard-selected-background-color: var(--date-picker-selected-color-lighten-5);
--date-picker-keyboard-selected-color: hsl(0, 0%, 100%);
}
@mixin form-light {
--input-color: var(--color-text-base);
--form-input-color: var(--input-color);
--form-input-focus-color: var(--input-color);
--form-input-background: @white;
--form-input-focus-border-color: hsl(204, 53%, 69%);
--form-input-focus-box-shadow: none;
--form-prompt-text-color: var(--negative-text-color);
--form-prompt-background: var(--negative-background-color);
}
@mixin button-light {
@textColor: rgba(0, 0, 0, 0.6);
@activeColor: #216ba5;
@tertiaryTextColor: rgba(0, 0, 0, 0.6);
@tertiaryHoverColor: lighten(fadein(@tertiaryTextColor, 100%), 20%);
@tertiaryActiveColor: lighten(@tertiaryHoverColor, 20%);
--button-hover-background-color: hsl(220, 2.9%, 79.8%);
--button-basic-hover-background-color: hsl(0, 0%, 100%);
--button-background-color: hsl(210, 3%, 88%);
--button-background-color-semi: hsla(210, 3%, 88%, 75%);
--button-text-color: @textColor;
--button-active-color: @activeColor;
--button-tertiary-text-color: @textColor;
--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-light {
--label-background-color: hsl(0, 0%, 91%);
--label-inverted-background-color: darken(#e8e8e8, 20%);
--label-ribbon-shadow-color: rgba(0, 0, 0, 0.15);
}
@mixin tile-light {
--tile-background: @lightGrey;
--tile-title-background: darken(@lightGrey, 10%);
--tile-title-color: var(--color-text-base);
--tile-resize-handle-brightness: 0;
}
@mixin obs-badge-light {
--obs-badge-color: var(--site-text-color);
--obs-badge-background: darken(@lightGrey, 20%);
--obs-selected-badge-background: darken(@lightGrey, 10%);
}
@mixin menu-light {
--menu-background: hsl(0, 0%, 100%);
--menu-pressed-item-background: @subtleTransparentBlack;
--menu-pagination-active-background: @transparentBlack;
--menu-hover-item-background: @subtleTransparentBlack;
--menu-secondary-hover-item-background: var(--tile-title-background);
--menu-secondary-hover-item-color: var(--input-color);
--menu-tabular-active-background: none @white;
}
@mixin segment-light {
// FIXME it isn't clear which is a segment default background
--segment-background: @white;
--segment-stacked-page-background: @subtleTransparentBlack;
}
@mixin progress-light {
--progress-background: @strongTransparentBlack;
}
@mixin popup-light {
--popup-background: @white;
--popup-arrow-background: var(--popup-background);
--popup-arrow-color: var(--site-solid-border-color);
}
@mixin dropdown-light {
--dropdown-selection-background: var(--control-background-color);
--dropdown-selection-visible-color: @hoveredTextColor;
--dropdown-item-color: var(--site-input-color);
}
@mixin checkbox-light {
--checkbox-background: @white;
--checkbox-focus-background: @white;
--checkbox-active-background: @white;
--checkbox-active-focus-background: @white;
--checkbox-active-focus-check-color: @gray-base;
--checkbox-hover-color: gray;
--checkbox-active-color: var(--form-input-color);
--checkbox-border-color: @solidBorderColor;
}
@mixin table-light {
--table-background: @white;
--table-striped-background: rgba(0, 0, 50, 0.02);
--table-active-background-hover: hsl(0, 0%, 94%);
--table-header-background: @offWhite;
--table-footer-background: @offWhite;
--table-selectable-background: @transparentBlack;
--table-selectable-color: var(--text-color);
--table-selected-background: @lightGrey;
}
@mixin modal-light {
--modal-background: @white;
--modal-header-background: @white;
--modal-action-background: @offWhite;
}
@mixin dimmer-light {
--dimmer-background-color: rgba(0, 0, 0, 0.15);
}
@mixin header-light {
--header-block-background: @gray-light;
}
@mixin plot-light {
--plot-background-color: white;
--plot-text-color: var(--text-color);
--plot-text-color-hover: var(--color-text-light-45);
--plot-text-color-disabled: hsl(0, 0%, 80%);
--plot-grid-color: hsl(0, 0%, 90%);
--plot-tooltip-background-color: hsl(0, 0%, 97%);
--plot-plot-band-night-color: hsl(0, 0%, 0%);
--plot-plot-band-night-opacity: 0.05;
--plot-plot-band-exclude-window-color: hsl(0, 93%, 48%);
--plot-plot-band-exclude-window-opacity: 0.2;
}
.light-theme {
// Values here come from the default SUI theme
// COLORS
@include colors-light;
@include named-colors-light;
@include site-light;
@include button-light;
@include label-light;
@include tile-light;
@include obs-badge-light;
@include form-light;
@include menu-light;
@include segment-light;
@include progress-light;
@include popup-light;
@include dropdown-light;
@include checkbox-light;
@include table-light;
@include modal-light;
@include dimmer-light;
@include header-light;
@include plot-light;
@include datepicker-light;
}
