lila/ui/lib/css/theme/_theme.default.scss

@import 'gen/mix';
@import '../abstract/patron-colors';

@function clear($color, $weight: 20%) {
  @return mix(#fff, $color, $weight);
}

@function dim($color, $weight: 20%) {
  @return mix(#000, $color, $weight);
}

$site-hue: 37;

// top level $c-variables must be valid css format (rgba, hsla, hex) to be mixable by ui/build

$c-bg: hsl(37, 7%, 14%); // $c-bg-high
$c-bg-page: hsl(37, 10%, 8%);
$c-bg-low: hsl(37, 7%, 22%);
$c-bg-zebra: hsl(37, 5%, 19%);
$c-bg-zebra2: hsl(37, 5%, 24%);
$c-bg-popup: hsl(37, 7%, 22%);
$c-bg-opaque: hsla(37, 7%, 14%);
$c-body-gradient: hsl(37, 12%, 16%);
$c-border: hsl(0, 0%, 25%);
$c-font: hsl(0, 0%, 73%);
$c-font-dim: hsl(0, 0%, 58%);
$c-primary: hsl(209, 79%, 56%);
$c-secondary: hsl(88, 62%, 37%);
$c-good: hsl(88, 62%, 37%);
$c-accent: hsl(22, 100%, 42%);
$c-bad: hsl(0, 60%, 50%);
$c-brag: hsl(37, 74%, 43%);
$c-clas: rgb(88, 28, 135);
$c-shade: hsl(0, 0%, 30%);
$c-inaccuracy: hsl(202, 78%, 62%);
$c-mistake: hsl(41, 100%, 45%);
$c-blunder: hsl(0, 69%, 60%);
$c-brilliant: hsl(129, 71%, 45%);
$c-interesting: hsl(307, 80%, 70%);
$c-future: hsl(274, 48%, 60%);
$c-paper: hsl(60, 56%, 91%);
$c-dark: #333;
$c-dimmer: #000;
$c-clearer: #fff;
$c-mv-branch-white: #fff;
$c-mv-branch-black: #000;
$patron-colors: $patron-colors-dark;

// shared-color-defs lists theme colors that share definitions. the assigned values usually depend on
// sass variables from the including scope and can differ between themes.

@mixin shared-color-defs {
  --c-bg: #{$c-bg};
  --c-bg-box: #{$c-bg};
  --c-bg-high: #{$c-bg};
  --c-bg-low: #{$c-bg-low};
  --c-bg-page: #{$c-bg-page};
  --c-bg-zebra: #{$c-bg-zebra};
  --c-bg-zebra2: #{$c-bg-zebra2};
  --c-bg-popup: #{$c-bg-popup};
  --c-bg-header-dropdown: #{$c-bg-popup};
  --c-bg-input: #{change-color($c-bg-page, $lightness: 13%)};
  --c-bg-variation: #{hsl($site-hue, 5%, 15%)};
  --c-bg-opaque: #{$c-bg-opaque};
  --c-header-dropdown: #{$c-font};
  --c-body-gradient: #{$c-body-gradient};
  --c-font: #{$c-font};
  --c-shade: #{$c-shade};
  --c-dark: #{$c-dark};
  --c-dimmer: #{$c-dimmer};
  --c-clearer: #{$c-clearer};
  --c-page-input: #{$c-bg};
  --c-page-mask: hsla(0, 0%, 0%, 0.6);
  --c-metal-top: #{hsl($site-hue, 7%, 22%)};
  --c-metal-bottom: #{hsl($site-hue, 5%, 19%)};
  --c-metal-top-hover: #{hsl($site-hue, 7%, 25%)};
  --c-metal-bottom-hover: #{hsl($site-hue, 5%, 22%)};
  --c-font-dim: #{$c-font-dim};
  --c-font-dimmer: #{change-color($c-font, $lightness: 42%)};
  --c-font-clear: #{change-color($c-font, $lightness: 80%)};
  --c-font-clearer: #{change-color($c-font, $lightness: 89%)};
  --c-font-page: var(--c-font-dim);
  --c-font-shadow: hsla(0, 0%, 17%, 0.66);
  --c-primary-dim: #{dim($c-primary, 15%)};
  --c-link-hover: #{clear(saturate($c-primary, 100%), 25%)};
  --c-chat-host-bg: rgba(78, 122, 29, 0.4);
  --c-chat-mention-bg: rgba(59, 92, 22, 0.4);
  --c-fancy: hsl(294, 62%, 48%);
  --c-border: #{$c-border};
  --c-border-page: hsl(0, 0%, 22%);
  --c-border-tour: #{mix(hsl(0, 0%, 22%), $c-bg-page, 50)};
  --c-border-light: hsl(0, 0%, 40%);
  --c-primary: #{$c-primary};
  --c-primary-clear: #{clear($c-primary)};
  --c-secondary: #{$c-secondary};
  --c-secondary-dim: #{dim($c-secondary, 20%)};
  --c-secondary-dimmer: #{dim($c-secondary, 40%)};
  --c-accent: #{$c-accent};
  --c-link: #{$c-primary};
  --c-link-dim: var(--c-primary-dim);
  --c-link-clear: var(--c-primary-clear);
  --c-over: #fff;
  --c-brag: #{$c-brag};
  --c-contours: #{mix($c-brag, $c-shade, 80%)};
  --c-accent-dim: #{dim($c-accent)};
  --c-accent-faint: hsla(22, 100%, 42%, 0.4);
  --c-accent-clear: #{dim($c-accent)};
  --c-dasher: #{$c-secondary};
  --c-bot: var(--c-fancy);
  --c-good: #{$c-secondary};
  --c-warn: #{$c-brag};
  --c-bad: #{$c-bad};
  --c-error: #{$c-bad};
  --c-live: #{$c-bad};
  --c-dasher-light: #{mix($c-secondary, $c-bg-low, 40%)};
  --c-racer-boost: #{adjust-color($c-brag, $saturation: 50%, $lightness: 70%)};
  --c-marathon: #{adjust-color($c-primary, $hue: -190deg, $saturation: -70%)};
  --c-tutor-bg: #{desaturate(mix($c-secondary, $c-bg, 80%), 10%)};
  --c-inaccuracy: #{$c-inaccuracy};
  --c-mistake: #{$c-mistake};
  --c-blunder: #{$c-blunder};
  --c-good-move: #{$c-secondary};
  --c-brilliant: #{$c-brilliant};
  --c-interesting: #{$c-interesting};
  --c-mv-branch-white: #{$c-mv-branch-white};
  --c-mv-branch-black: #{$c-mv-branch-black};
  --c-pool-button: #{hsla($site-hue, 7%, 19%, 66%)};
  --c-paper: #{$c-paper};
  --c-paco1: #{map-get($patron-colors, 1)};
  --c-paco2: #{map-get($patron-colors, 2)};
  --c-paco3: #{map-get($patron-colors, 3)};
  --c-paco4: #{map-get($patron-colors, 4)};
  --c-paco5: #{map-get($patron-colors, 5)};
  --c-paco6: #{map-get($patron-colors, 6)};
  --c-paco7: #{map-get($patron-colors, 7)};
  --c-paco8: #{map-get($patron-colors, 8)};
  --c-paco9: #{map-get($patron-colors, 9)};
  --c-paco10: #{map-get($patron-colors, 10)};
}