soapbox/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 {
  // Primary variables
  --brand-color: hsl(var(--brand-color_hsl));
  --accent-color: hsl(var(--accent-color_hsl));
  --primary-text-color: hsl(var(--primary-text-color_hsl));
  --background-color: hsl(var(--background-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);
  --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: hsla(var(--primary-text-color_hsl), 0.6);
  --warning-color--faint: hsla(var(--warning-color_hsl), 0.5);
}

.theme-mode-light {
  // Primary variables
  --foreground-color: #fff;
  --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%;
  --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%)
  );
}

.theme-mode-dark {
  // Primary variables
  --foreground-color: #222;
  --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%;
  --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%)
  );
}