mathew/frontend/app/assets/css/_tokens.scss

@use 'sass:list';

// ---------- Theme tokens ----------
// [data-theme] swaps the surfaces, [data-accent] the accents (no attribute
// = violet, the defaults below). Reading-surface sizes live here too: the
// sidebar's width feeds the book layer's left inset (see _book.scss).
:root {
  color-scheme: light;
  --bg: #f7f8fb;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef1f7;
  --border: #e2e6ef;
  --border-strong: #cfd5e3;
  --text: #1b2130;
  --muted: #5b6478;
  --faint: #8a93a8;
  --accent: #4f5fe8;
  --accent-strong: #3d4dd6;
  --accent-2: #0ea5c9;
  --danger: #d1344b;
  --success: #189a5c;
  --code-bg: #f4f6fa;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);
  --shadow-lg: 0 4px 12px rgb(16 24 40 / 8%), 0 16px 40px -12px rgb(16 24 40 / 18%);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

  // math callout boxes — ```theorem, ```example, … (see utils/markdown.ts):
  // each kind keeps one hue day and night, so the colour always means the same
  --box-example: #16a34a;
  --box-theorem: #d1344b;
  --box-corollary: #d97706;
  --box-definition: #2563eb;
  --box-proof: #64748b;
  --box-proposition: #7c3aed;
  --box-lemma: #0d9488;

  // code token colors (light)
  --tok-key: #8250df;
  --tok-str: #0a3069;
  --tok-com: #6e7781;
  --tok-num: #0550ae;
  --tok-fn: #6639ba;
  --tok-built: #953800;
  --tok-lit: #cf222e;
  --tok-meta: #7d4e00;

  // the reader's book (see _book.scss)
  --sidebar-w: 232px;
  --spine-w: 34px;
  // how wide a page of the book is allowed to get: past this the desk shows
  // beside the paper rather than the page stretching on and on. The one page
  // of a book with nothing else in it is exempt (see .book-pane:only-child).
  --pane-max-w: 60rem;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0a0c12;
  --bg-elev: #10131c;
  --surface: #141826;
  --surface-2: #1a2030;
  --border: #232a3c;
  --border-strong: #313a52;
  --text: #e7eaf3;
  --muted: #99a1b5;
  --faint: #6b7488;
  --accent: #7c8cff;
  --accent-strong: #99a5ff;
  --accent-2: #38d3ee;
  --danger: #f47085;
  --success: #3fce8b;
  --code-bg: #0c0f16;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-lg: 0 4px 16px rgb(0 0 0 / 40%), 0 24px 48px -16px rgb(0 0 0 / 55%);

  // math callout boxes (dark)
  --box-example: #4ade80;
  --box-theorem: #f47085;
  --box-corollary: #fbbf24;
  --box-definition: #60a5fa;
  --box-proof: #94a3b8;
  --box-proposition: #a78bfa;
  --box-lemma: #2dd4bf;

  // code token colors (dark)
  --tok-key: #c792ea;
  --tok-str: #9ece6a;
  --tok-com: #565f89;
  --tok-num: #ff9e64;
  --tok-fn: #7aa2f7;
  --tok-built: #2ac3de;
  --tok-lit: #ff757f;
  --tok-meta: #e0af68;
}

// ---------- Accent colors ----------
// [data-accent] on <html> swaps the accent tokens (accent, accent-strong,
// accent-2). Every colour needs a light and a dark variant — the paired
// [data-theme='dark'] selector outranks the plain one, so it follows it.
$accents: (
  'purple': ((#7c3aed, #6d28d9, #c026d3), (#a78bfa, #c4b5fd, #e879f9)),
  'ocean': ((#2563eb, #1d4ed8, #06b6d4), (#60a5fa, #93c5fd, #22d3ee)),
  'teal': ((#0d9488, #0f766e, #10b981), (#2dd4bf, #5eead4, #34d399)),
  'forest': ((#16a34a, #15803d, #84cc16), (#4ade80, #86efac, #a3e635)),
  'amber': ((#d97706, #b45309, #f97316), (#fbbf24, #fcd34d, #fb923c)),
  'rose': ((#e11d48, #be123c, #ec4899), (#fb7185, #fda4af, #f472b6)),
  'slate': ((#334155, #1e293b, #64748b), (#94a3b8, #cbd5e1, #7b8aa1)),
);

@each $name, $pair in $accents {
  $light: list.nth($pair, 1);
  $dark: list.nth($pair, 2);

  :root[data-accent='#{$name}'] {
    --accent: #{list.nth($light, 1)};
    --accent-strong: #{list.nth($light, 2)};
    --accent-2: #{list.nth($light, 3)};
  }

  :root[data-theme='dark'][data-accent='#{$name}'] {
    --accent: #{list.nth($dark, 1)};
    --accent-strong: #{list.nth($dark, 2)};
    --accent-2: #{list.nth($dark, 3)};
  }
}

// the desk is the page itself: no sidebar width to stand aside for
@media (max-width: 900px) {
  :root { --sidebar-w: 0px; --spine-w: 30px; }
}