113 lines
3.4 KiB
SCSS
113 lines
3.4 KiB
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);
|
|
|
|
// 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%);
|
|
|
|
// 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; }
|
|
}
|