mixtape/zero.Backoffice.UI/app/styles/Settings/_theme-light.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};
}