132 lines
4.0 KiB
SCSS
132 lines
4.0 KiB
SCSS
|
|
:root, .theme-light
|
|
{
|
|
// accent colors
|
|
$color-primary: #22272e; //#f9c202; //#0d83f0; #22272e
|
|
$color-primary-fg: #fff;
|
|
$color-primary-low: #{rgba(#22272e, 0.2)};
|
|
$color-secondary: #aaa;
|
|
$color-secondary-fg: #222;
|
|
$color-tertiary: #c4e4de;
|
|
$color-tertiary-fg: #2c3036;
|
|
|
|
// foreground colors
|
|
$color-fg: #2c3036;
|
|
$color-fg-shade-1: #85888c; // dim
|
|
$color-fg-shade-2: #a8acb0; // dim-two
|
|
$color-fg-shade-3: #c8cbcf;
|
|
|
|
// background colors
|
|
$color-bg: #f2f2f4; // rgba(245, 247, 250)
|
|
$color-bg-shade-0: #f8f8fa;
|
|
$color-bg-shade-1: #fff; // bright
|
|
$color-bg-shade-2: #f8f8fa; // dim
|
|
$color-bg-shade-3: #f5f5f7; // bright-two
|
|
$color-bg-shade-4: #efeff1; // bright-three
|
|
$color-bg-shade-5: #eaecef;
|
|
$color-bg-shade-6: #d2d2d7;
|
|
$color-bg-shade-7: #87878a;
|
|
|
|
|
|
// misc colors
|
|
$color-overlay-shade: rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
// ----------------------------------------------------------------------------------
|
|
|
|
--color-accent: #{$color-primary};
|
|
--color-accent-fg: #{$color-primary-fg};
|
|
|
|
// accent colors
|
|
--color-primary: #{$color-primary};
|
|
--color-primary-low: #{$color-primary-low};
|
|
--color-primary-text: #{$color-primary-fg};
|
|
--color-secondary: #{$color-secondary};
|
|
--color-secondary-text: #{$color-secondary-fg};
|
|
--color-tertiary: #{$color-tertiary};
|
|
--color-tertiary-text: #{$color-tertiary-fg};
|
|
|
|
// generic shades
|
|
// (try to avoid them)
|
|
--color-bg: #{$color-bg};
|
|
--color-bg-shade-1: #{$color-bg-shade-1};
|
|
--color-bg-shade-2: #{$color-bg-shade-2};
|
|
--color-bg-shade-3: #{$color-bg-shade-3};
|
|
--color-bg-shade-4: #{$color-bg-shade-4};
|
|
--color-bg-shade-5: #{$color-bg-shade-5};
|
|
|
|
// texts
|
|
--color-text: #{$color-fg};
|
|
--color-text-dim: #{$color-fg-shade-1};
|
|
--color-text-dim-one: #{$color-fg-shade-2};
|
|
|
|
// page background
|
|
--color-page: #{$color-bg};
|
|
|
|
// boxes
|
|
--color-box: #{$color-bg-shade-1};
|
|
--color-box-light: #{$color-bg-shade-2};
|
|
--color-box-nested: #{$color-bg-shade-2};
|
|
|
|
// buttons
|
|
--color-button: #{$color-primary};
|
|
--color-button-text: #{$color-primary-fg};
|
|
--color-button-light: #{$color-bg-shade-3};
|
|
--color-button-light-onbg: #{$color-bg-shade-1};
|
|
--color-button-focus-outline: 1px dotted #{$color-bg-shade-7};
|
|
|
|
// forms
|
|
--color-input: #{$color-bg-shade-0};
|
|
--color-input-border: 1px solid transparent;
|
|
--color-input-placeholder: #{$color-fg-shade-1};
|
|
--color-check: #{$color-bg-shade-3};
|
|
--color-checked: #{$color-primary};
|
|
--color-checked-fg: #{$color-primary-fg};
|
|
--color-toggle: #{$color-bg-shade-3};
|
|
--color-toggle-fg: #{$color-fg};
|
|
--color-toggled: #{$color-primary};
|
|
--color-toggled-fg: #{$color-primary-fg};
|
|
--color-input-focus-bg: #{$color-bg-shade-1};
|
|
--color-input-focus-border: 1px solid #{$color-bg-shade-5};
|
|
--color-input-focus-shadow: 0 0 0 4px #{$color-bg-shade-2};
|
|
|
|
// lines
|
|
--color-line: #{$color-bg-shade-3};
|
|
--color-line-onbg: #{$color-bg-shade-4};
|
|
--color-line-dashed: #{$color-bg-shade-5};
|
|
--color-line-dashed-onbg: #{$color-bg-shade-6};
|
|
|
|
// trees
|
|
--color-tree: #{$color-bg-shade-1};
|
|
--color-tree-selected: #{$color-bg-shade-0};
|
|
--color-tree-selected-line: #{$color-primary};
|
|
|
|
// dropdowns
|
|
--color-dropdown: #{$color-bg-shade-1};
|
|
--color-dropdown-line: #{$color-bg-shade-3};
|
|
--color-dropdown-border: #{$color-bg-shade-4};
|
|
--color-dropdown-selected: #{$color-bg-shade-2};
|
|
|
|
// overlays
|
|
--color-overlay-shade: #{$color-overlay-shade};
|
|
--color-overlay: #{$color-bg-shade-1};
|
|
--color-overlay-editor: #{$color-bg};
|
|
--color-overlay-footer: #{$color-bg-shade-2};
|
|
|
|
// tables
|
|
--color-table: #{$color-bg-shade-1};
|
|
--color-table-line-horizontal: #{$color-bg-shade-3};
|
|
--color-table-line-vertical: transparent; //#{$color-bg-shade-3};
|
|
--color-table-head: #{$color-bg-shade-2};
|
|
--color-table-hover: #{$color-bg-shade-2};
|
|
--color-table-highlight: #{$color-bg-shade-3};
|
|
|
|
// pattern
|
|
--color-pattern-transparent-a: #{$color-bg-shade-2};
|
|
--color-pattern-transparent-b: #{$color-bg-shade-5};
|
|
|
|
// misc
|
|
--color-required-marker: var(--color-accent);
|
|
--color-synchronized: #{$color-secondary};
|
|
}
|