bigbuffet-rw/app/styles/themes.scss

/*
# CSS VARIABLE NAMING CONVENTIONS

Primary variables are fully-formed CSS properties.
Form: --{primary-name}
Examples:
  --brand-color
  --accent-color
  --primary-text-color

Meta-variables are combined to make primary variables.
Form: --{primary-name}_{property}
Examples:
  --brand-color_h   (int, hue)
  --brand-color_s   (percent, saturation)
  --brand-color_l   (percent, lightness)
  --brand-color_hsl (csv of the 3 variables above)

Modifiers are variations of primary variables made by modifying their meta-values.
Form: --{primary-name}--{modifier}
Examples:
  --brand-color--faint
  --brand-color--hicontrast
  --primary-text-color--faint
*/

body,
.site-preview {
  // Tailwind color variables
  --color-gray-50: 249 250 251;
  --color-gray-100: 243 244 246;
  --color-gray-200: 229 231 235;
  --color-gray-300: 209 213 219;
  --color-gray-400: 156 163 175;
  --color-gray-500: 107 114 128;
  --color-gray-600: 75 85 99;
  --color-gray-700: 55 65 81;
  --color-gray-800: 31 41 55;
  --color-gray-900: 17 24 39;
  --color-primary-50: 238 242 255;
  --color-primary-100: 224 231 255;
  --color-primary-200: 199 210 254;
  --color-primary-300: 165 180 252;
  --color-primary-400: 129 140 248;
  --color-primary-500: 99 102 241;
  --color-primary-600: 84 72 238;
  --color-primary-700: 67 56 202;
  --color-primary-800: 55 48 163;
  --color-primary-900: 49 46 129;
  --color-success-50: 240 253 244;
  --color-success-100: 220 252 231;
  --color-success-200: 187 247 208;
  --color-success-300: 134 239 172;
  --color-success-400: 74 222 128;
  --color-success-500: 34 197 94;
  --color-success-600: 22 163 74;
  --color-success-700: 21 128 61;
  --color-success-800: 22 101 52;
  --color-success-900: 20 83 45;
  --color-danger-50: 254 242 242;
  --color-danger-100: 254 226 226;
  --color-danger-200: 254 202 202;
  --color-danger-300: 252 165 165;
  --color-danger-400: 248 113 113;
  --color-danger-500: 239 68 68;
  --color-danger-600: 220 38 38;
  --color-danger-700: 185 28 28;
  --color-danger-800: 153 27 27;
  --color-danger-900: 127 29 29;
  --color-accent-300: 255 95 135;
  --color-accent-500: 255 71 117;

  // Primary variables
  --brand-color: hsl(var(--brand-color_hsl));
  --accent-color: hsl(var(--accent-color_hsl));
  --primary-text-color: var(--gray-900);
  --background-color: hsl(var(--background-color_hsl));
  --foreground-color: hsl(var(--foreground-color_hsl));
  --warning-color: hsla(var(--warning-color_hsl));

  // Meta-variables
  --brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l);
  --accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
  --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
  --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
  --foreground-color_hsl: var(--foreground-color_h), var(--foreground-color_s), var(--foreground-color_l);
  --warning-color_hsl: var(--warning-color_h), var(--warning-color_s), var(--warning-color_l);
  --accent-color_h: calc(var(--brand-color_h) - 15);
  --accent-color_s: 86%;
  --accent-color_l: 44%;

  // Modifiers
  --brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
  --brand-color--med: hsla(var(--brand-color_hsl), 0.2);
  --accent-color--faint: hsla(var(--accent-color_hsl), 0.15);
  --accent-color--med: hsla(var(--accent-color_hsl), 0.25);
  --accent-color--bright: hsl(
    var(--accent-color_h),
    var(--accent-color_s),
    calc(var(--accent-color_l) + 3%)
  );
  --primary-text-color--faint: var(--gray-400);
  --warning-color--faint: hsla(var(--warning-color_hsl), 0.5);

  // Colors
  --gray-900: #08051b;
  // --gray-800: #1d1932;
  --gray-700: #37344c;
  --gray-500: #656175;
  --gray-400: #868393;
  --gray-300: #c9c8cc;
  --gray-50: #f9f8fc;
  --white: #fff;
  --dark-blue: #1d1953;
  --electric-blue: #5448ee;
  --electric-blue-contrast: #e8e7fd;
  --sea-blue: #2feecc;

  // Sizes
  --border-radius-base: 4px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;

  // Forms
  --input-height: 30px;
  --input-border-color: #d1d5db;

  // Typography
  --font-sans: 'Inter', arial, sans-serif;
  --font-weight-heading: 700;
  --font-weight-body: 400;
}

.theme-mode-light {
  // Primary variables
  --highlight-text-color: hsl(
    var(--brand-color_h),
    var(--brand-color_s),
    calc(var(--brand-color_l) - 8%)
  );
  --vignette-color: transparent;

  // Meta-variables
  --primary-text-color_h: 0;
  --primary-text-color_s: 0%;
  --primary-text-color_l: 0%;
  --background-color_h: 0;
  --background-color_s: 0%;
  --background-color_l: 94.9%;
  --foreground-color_h: 0;
  --foreground-color_s: 0%;
  --foreground-color_l: 100%;
  --warning-color_h: 0;
  --warning-color_s: 100%;
  --warning-color_l: 66%;

  // Modifiers
  --brand-color--hicontrast: hsl(
    var(--brand-color_h),
    var(--brand-color_s),
    calc(var(--brand-color_l) - 5%)
  );
  --warning-color--hicontrast: hsl(
    var(--warning-color_h),
    var(--warning-color_s),
    calc(var(--warning-color_l) - 12%)
  );
}

.theme-mode-dark {
  // Primary variables
  --highlight-text-color: hsl(
    var(--brand-color_h),
    var(--brand-color_s),
    calc(var(--brand-color_l) + 8%)
  );
  --vignette-color: #000;

  // Meta-variables
  --primary-text-color_h: 0;
  --primary-text-color_s: 0%;
  --primary-text-color_l: 100%;
  --background-color_h: 0;
  --background-color_s: 0%;
  --background-color_l: 20%;
  --foreground-color_h: 0;
  --foreground-color_s: 0%;
  --foreground-color_l: 13%;
  --warning-color_h: 0;
  --warning-color_s: 100%;
  --warning-color_l: 66%;

  // Modifiers
  --brand-color--hicontrast: hsl(
    var(--brand-color_h),
    var(--brand-color_s),
    calc(var(--brand-color_l) + 12%)
  );
  --warning-color--hicontrast: hsl(
    var(--warning-color_h),
    var(--warning-color_s),
    calc(var(--warning-color_l) + 12%)
  );
}