/* * The palettes. One block per theme, and the system-dark block that the bare * root becomes when the operating system asks for dark and nobody has chosen. * * Split out of tokens.css when it passed eleven hundred lines: everything * that is a *decision about the base* — scale, space, corners, faces, motion — * stays there, and everything that is *a theme's answer to it* is here. Loaded * immediately after tokens.css in both hosts, which is the only ordering that * matters: a palette overrides the root, and must come after it. * * Every block sets the same tokens. A block that sets one the others do not * is a theme that looks right in one place and falls through to the root in * another; ThemeListTests reads this file to know which themes exist. * * The rules that give a theme structure — ruled's lines, ledger's columns, * graph's transparent panels — are in css/chrome/finish.css, keyed on * [data-theme], and are deliberately last in the cascade. */ /* ---- dark, by system preference ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { /* Exactly "system": no theme chosen. It used to name the light themes it had to avoid, which meant every theme added afterwards was silently overridden the moment the reader's OS was dark. */ color-scheme: dark; --bg: oklch(0.158 0.023 265); --surface-2: oklch(0.203 0.027 265); --surface-3: oklch(0.244 0.031 265); --surface-hover: oklch(0.266 0.031 265); --ink: oklch(0.945 0.008 265); --ink-muted: oklch(0.745 0.019 265); --ink-faint: oklch(0.625 0.017 265); --border: oklch(0.312 0.027 265); --border-strong: oklch(0.425 0.031 265); --border-subtle: oklch(0.256 0.023 265); /* The dark default keeps its chrome quiet too. */ --chrome: oklch(0.203 0.027 265); --chrome-raised: oklch(0.244 0.031 265); --chrome-line: oklch(0.312 0.027 265); --chrome-ink: oklch(0.945 0.008 265); --chrome-muted: oklch(0.745 0.019 265); --mark: oklch(0.312 0.027 265); --rule-head: oklch(0.620 0.150 24); /* oxblood */ --texture: none; --signal: var(--primary); --primary: oklch(0.77 0.14 var(--accent-hue)); --primary-hover: oklch(0.82 0.14 var(--accent-hue)); --primary-soft: oklch(0.28 0.055 var(--accent-hue)); --on-primary: oklch(0.16 0.03 var(--accent-hue)); --focus-ring: oklch(0.82 0.14 var(--accent-hue)); --recording: oklch(0.70 0.19 25); --danger: oklch(0.72 0.17 27); --danger-soft: oklch(0.28 0.065 27); --on-danger: oklch(0.16 0.03 27); --warning: oklch(0.79 0.13 75); --success: oklch(0.75 0.13 150); --info: oklch(0.74 0.11 250); --shadow-sm: 0 1px 2px oklch(0.05 0.03 265 / 0.45), 0 2px 8px oklch(0.05 0.03 265 / 0.35); --shadow-md: 0 4px 12px oklch(0.05 0.03 265 / 0.55), 0 16px 32px oklch(0.05 0.03 265 / 0.40); --scrim: oklch(0.06 0.03 265 / 0.66); } } /* ---- dark, chosen. Wins over a system that says light. ---- Indigo rather than black: this palette was "midnight", which absorbed the neutral dark on the way from twelve themes to eight. Pure black beside a bright editor is a harder edge than most eyes want at night; a little chroma in the surface softens it without lifting the overall level. */ :root[data-theme="dark"], [data-theme-preview="dark"] { color-scheme: dark; --bg: oklch(0.158 0.023 265); --surface-2: oklch(0.203 0.027 265); --surface-3: oklch(0.244 0.031 265); --surface-hover: oklch(0.266 0.031 265); --ink: oklch(0.945 0.008 265); --ink-muted: oklch(0.745 0.019 265); --ink-faint: oklch(0.625 0.017 265); --border: oklch(0.312 0.027 265); --border-strong: oklch(0.425 0.031 265); --border-subtle: oklch(0.256 0.023 265); /* The cloth darkens a little at night; it does not become a different book. Most of what changes in dark mode is the page inside it. */ --chrome: oklch(0.203 0.027 265); --chrome-raised: oklch(0.244 0.031 265); --chrome-line: oklch(0.312 0.027 265); --chrome-ink: oklch(0.945 0.008 265); --chrome-muted: oklch(0.745 0.019 265); --mark: oklch(0.312 0.027 265); --rule-head: oklch(0.620 0.150 24); /* oxblood */ --texture: none; --signal: var(--primary); --primary: oklch(0.77 0.14 var(--accent-hue)); --primary-hover: oklch(0.82 0.14 var(--accent-hue)); --primary-soft: oklch(0.28 0.055 var(--accent-hue)); --on-primary: oklch(0.16 0.03 var(--accent-hue)); --focus-ring: oklch(0.82 0.14 var(--accent-hue)); --recording: oklch(0.70 0.19 25); --danger: oklch(0.72 0.17 27); --danger-soft: oklch(0.28 0.065 27); --on-danger: oklch(0.16 0.03 27); --warning: oklch(0.79 0.13 75); --success: oklch(0.75 0.13 150); --info: oklch(0.74 0.11 250); --shadow-sm: 0 1px 2px oklch(0.05 0.03 265 / 0.45), 0 2px 8px oklch(0.05 0.03 265 / 0.35); --shadow-md: 0 4px 12px oklch(0.05 0.03 265 / 0.55), 0 16px 32px oklch(0.05 0.03 265 / 0.40); --scrim: oklch(0.06 0.03 265 / 0.66); } /* ---- catalogue ---- A card drawer. Manila chrome, buff cards, a red ruling and tabs that carry a notebook's own colour. The one warm theme here and the only place the warmth is earned: an index card genuinely is buff. What keeps it off the warm-cream-and-terracotta look every generated page has worn for two years is that the red is a *ruling* — one pixel at the head of a card and under a heading, never a fill. The structural rules for that live in app.css and read --rule-head, which is red in every theme now and was red only here for a long time. Folio and cloth were shades of this and are folded in: folio's deeper red is the rule, cloth's gold is the brass accent. */ :root[data-theme="catalogue"], [data-theme-preview="catalogue"] { color-scheme: light; --bg: oklch(0.957 0.018 84); --surface-2: oklch(0.926 0.024 80); --surface-3: oklch(0.898 0.028 78); --surface-hover: oklch(0.912 0.026 79); --ink: oklch(0.238 0.028 58); --ink-muted: oklch(0.452 0.028 52); --ink-faint: oklch(0.582 0.026 50); --border: oklch(0.858 0.028 76); --border-strong: oklch(0.752 0.034 74); --border-subtle: oklch(0.902 0.022 78); --chrome: oklch(0.878 0.034 80); --chrome-raised: oklch(0.918 0.028 80); --chrome-line: oklch(0.788 0.038 76); --chrome-ink: oklch(0.252 0.028 56); --chrome-muted: oklch(0.472 0.030 52); --mark: oklch(0.548 0.152 32); --rule-head: oklch(0.480 0.130 20); /* folio's deeper red */ /* No button opinion, deliberately. A quiet near-black fill was tried and it disappeared into the near-black app bar, which is where New note lives; the accent is the only colour here that reads against both the dark chrome and the light page. */ --texture: none; --btn-bg-hover: oklch(0.405 0.086 152); --btn-ink: oklch(0.972 0.014 90); --radius-control: 4px; --texture: none; --signal: var(--primary); --primary: oklch(0.50 0.13 var(--accent-hue)); --primary-hover: oklch(0.45 0.13 var(--accent-hue)); --primary-soft: oklch(0.90 0.035 var(--accent-hue)); --on-primary: oklch(0.98 0.01 90); --focus-ring: oklch(0.50 0.13 var(--accent-hue)); --recording: oklch(0.55 0.20 25); --danger: oklch(0.52 0.19 27); --danger-soft: oklch(0.91 0.04 27); --on-danger: oklch(0.98 0.01 90); --warning: oklch(0.55 0.13 75); --success: oklch(0.52 0.13 150); --info: oklch(0.52 0.12 240); --shadow-sm: 0 1px 2px oklch(0.30 0.05 60 / 0.10), 0 2px 8px oklch(0.30 0.05 60 / 0.08); --shadow-md: 0 4px 12px oklch(0.30 0.05 60 / 0.14), 0 16px 32px oklch(0.30 0.05 60 / 0.10); --scrim: oklch(0.28 0.05 60 / 0.48); } /* ---- catalogue at night ---- Walnut rather than manila. The cards darken with the drawer; what does not change is that the ruling is still the only red on the screen. */ :root[data-theme="catalogue-night"], [data-theme-preview="catalogue-night"] { color-scheme: dark; --bg: oklch(0.202 0.017 62); --surface-2: oklch(0.242 0.020 58); --surface-3: oklch(0.282 0.023 56); --surface-hover: oklch(0.300 0.023 56); --ink: oklch(0.930 0.014 78); --ink-muted: oklch(0.748 0.022 66); --ink-faint: oklch(0.628 0.020 62); --border: oklch(0.336 0.022 58); --border-strong: oklch(0.448 0.026 56); --border-subtle: oklch(0.286 0.018 58); --chrome: oklch(0.246 0.021 58); --chrome-raised: oklch(0.292 0.024 56); --chrome-line: oklch(0.352 0.026 56); --chrome-ink: oklch(0.928 0.014 78); --chrome-muted: oklch(0.742 0.022 66); --mark: oklch(0.628 0.140 32); --rule-head: oklch(0.628 0.140 32); /* the drawer's red, lifted for the night */ --texture: none; --signal: var(--primary); --primary: oklch(0.76 0.14 var(--accent-hue)); --primary-hover: oklch(0.81 0.14 var(--accent-hue)); --primary-soft: oklch(0.30 0.05 var(--accent-hue)); --on-primary: oklch(0.17 0.02 var(--accent-hue)); --focus-ring: oklch(0.81 0.14 var(--accent-hue)); --recording: oklch(0.70 0.19 25); --danger: oklch(0.72 0.17 27); --danger-soft: oklch(0.30 0.06 27); --on-danger: oklch(0.17 0.02 27); --warning: oklch(0.80 0.13 75); --success: oklch(0.76 0.13 150); --info: oklch(0.74 0.11 240); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40), 0 2px 8px oklch(0 0 0 / 0.32); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.50), 0 16px 32px oklch(0 0 0 / 0.38); --scrim: oklch(0 0 0 / 0.62); } /* ---- ruled ---- The exercise book. A true off-white page — not cream, which is the warm default every product reaches for the moment somebody says paper — carrying feint blue-grey rules at a fixed rhythm and one red margin down the writing edge. The margin uses an inline offset, so it is on the left in English and on the right in Arabic without a second rule. The texture is the character here, which is also the risk: a background you cannot switch off shows in every gap between every block. It is quiet enough to sit under a list and stop being noticed. */ :root[data-theme="ruled"], [data-theme-preview="ruled"] { color-scheme: light; --bg: oklch(0.993 0 0); --surface-2: oklch(0.971 0.004 255); --surface-3: oklch(0.949 0.006 255); --surface-hover: oklch(0.960 0.006 255); --ink: oklch(0.205 0.012 265); --ink-muted: oklch(0.455 0.014 262); --ink-faint: oklch(0.592 0.012 260); --border: oklch(0.898 0.008 255); --border-strong: oklch(0.800 0.011 255); --border-subtle: oklch(0.944 0.006 255); --chrome: oklch(0.971 0.004 255); --chrome-raised: oklch(0.949 0.006 255); --chrome-line: oklch(0.898 0.008 255); --chrome-ink: oklch(0.205 0.012 265); --chrome-muted: oklch(0.455 0.014 262); --mark: oklch(0.585 0.155 22); --rule-head: oklch(0.585 0.155 22); /* catalogue red */ /* No ruling on the page itself. It used to run behind everything — the empty half of the dashboard, the margins beside a note, under buttons and panels — and the one comment anyone left on this theme was that it was too much for the eye. They were right. A notebook has lines because you write on them; a screen with lines under its buttons is graph paper. The ruling is drawn by the surfaces that carry writing — the editor, the checklist, the list of notes — each at its own 28px and anchored to itself, so nothing is ever out of phase with the page behind it. Which is the second thing the page ruling was doing wrong: it and the note's own lines were the same period a few pixels apart, and the eye reads that as a fault before it reads it as a style. */ --texture: none; /* The ruling colour, shared by every surface that draws it. Fainter than a border on purpose. It was oklch 0.902, darker than --border-subtle and a hair off --border itself, so a decorative line weighed exactly as much as a structural one and the eye could not tell the edge of a panel from the paper it sat on. Real ruling is the lightest thing on the page. 28px is the period everywhere it is used and the line height of the text that sits on it; the two numbers are the whole effect. */ --rule: oklch(0.940 0.018 252); --signal: var(--primary); --primary: oklch(0.5 0.13 var(--accent-hue)); --primary-hover: oklch(0.45 0.13 var(--accent-hue)); --primary-soft: oklch(0.94 0.035 var(--accent-hue)); --on-primary: oklch(1 0 0); --focus-ring: oklch(0.5 0.13 var(--accent-hue)); --recording: oklch(0.55 0.20 25); --danger: oklch(0.52 0.18 27); --danger-soft: oklch(0.92 0.035 27); --on-danger: oklch(1 0 0); --warning: oklch(0.55 0.13 75); --success: oklch(0.52 0.13 150); --info: oklch(0.52 0.12 240); --shadow-sm: 0 1px 2px oklch(0.25 0.02 260 / 0.07), 0 2px 8px oklch(0.25 0.02 260 / 0.06); --shadow-md: 0 4px 12px oklch(0.25 0.02 260 / 0.11), 0 16px 32px oklch(0.25 0.02 260 / 0.08); --scrim: oklch(0.20 0.02 260 / 0.45); } /* ---------------------------------------------------------- Ruled at night Ruled is the default theme and had no dark counterpart, so anybody who works at night had to leave the app's own look to get one. Not an inversion of it. Ruled paper in the dark is not white paper with the lightness flipped: the ground is a deep blue-black rather than a neutral one, because the ruling is blue and a neutral ground makes it read as grey; the ruling itself is lifted well clear of the background, because a line that is a faint tint of the page disappears entirely once a screen is dimmed, which is when this theme is being used; and the red keeps its chroma but gains lightness, since the same red that reads as ink on paper reads as dried blood on black. The period is 28px here as everywhere else. That number is the line height of the text that sits on it and the two are one decision. */ :root[data-theme="ruled-night"], [data-theme-preview="ruled-night"] { color-scheme: dark; --bg: oklch(0.168 0.012 262); --surface-2: oklch(0.206 0.014 262); --surface-3: oklch(0.244 0.016 262); --surface-hover: oklch(0.228 0.015 262); --ink: oklch(0.936 0.006 262); --ink-muted: oklch(0.735 0.014 262); --ink-faint: oklch(0.605 0.014 262); --border: oklch(0.290 0.018 262); --border-strong: oklch(0.395 0.022 262); --border-subtle: oklch(0.232 0.015 262); --chrome: oklch(0.206 0.014 262); --chrome-raised: oklch(0.244 0.016 262); --chrome-line: oklch(0.290 0.018 262); --chrome-ink: oklch(0.936 0.006 262); --chrome-muted: oklch(0.735 0.014 262); --mark: oklch(0.640 0.152 24); --rule-head: oklch(0.640 0.152 24); /* catalogue red, lifted for the night */ /* None, for the reason given on the light theme. */ --texture: none; /* Lifted further off the ground than the light theme's rule is, in proportion — a dark screen is usually a dimmed screen, and the first thing a dimmed screen loses is a low-contrast hairline. But no longer above --border: it was 0.330 against a border of 0.290, so the ruling was the strongest line on the screen and every panel edge was lost in it. */ --rule: oklch(0.262 0.030 254); --signal: var(--primary); --primary: oklch(0.72 0.13 var(--accent-hue)); --primary-hover: oklch(0.77 0.13 var(--accent-hue)); --primary-soft: oklch(0.28 0.05 var(--accent-hue)); --on-primary: oklch(0.16 0.02 var(--accent-hue)); --focus-ring: oklch(0.72 0.13 var(--accent-hue)); --recording: oklch(0.68 0.19 25); --danger: oklch(0.67 0.17 27); --danger-soft: oklch(0.28 0.06 27); --on-danger: oklch(0.16 0.02 27); --warning: oklch(0.75 0.13 75); --success: oklch(0.72 0.13 150); --info: oklch(0.70 0.12 240); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.38), 0 2px 8px oklch(0 0 0 / 0.32); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.48), 0 16px 32px oklch(0 0 0 / 0.36); --scrim: oklch(0 0 0 / 0.62); } /* ---- graph ---- The engineer's graph pad. Cool grey-blue throughout, a 22px grid instead of ruling, and one teal signal colour used only where something is live or found. The most modern of the six and the least sentimental about paper. It reads technical, which suits a transcript and suits a shopping list rather less. That is the trade it makes. */ :root[data-theme="graph"], [data-theme-preview="graph"] { color-scheme: light; --bg: oklch(0.965 0.007 240); /* Translucent, which no other theme's surfaces are. On a pad the grid is the page: a panel that fills itself with a flat colour cuts a hole in the paper, and a page full of holes is what the boxes looked like. At this alpha the ruling runs under a panel the way it runs under anything else drawn on the sheet, and the tint is still enough to tell a panel from the ground. */ --surface-2: oklch(0.941 0.010 240 / 0.62); --surface-3: oklch(0.916 0.013 238 / 0.70); --surface-hover: oklch(0.929 0.012 239 / 0.80); --ink: oklch(0.205 0.018 250); --ink-muted: oklch(0.448 0.019 245); --ink-faint: oklch(0.578 0.016 243); --border: oklch(0.872 0.014 240); --border-strong: oklch(0.770 0.019 240); --border-subtle: oklch(0.918 0.010 240); --chrome: oklch(0.941 0.010 240); --chrome-raised: oklch(0.916 0.013 238); --chrome-line: oklch(0.858 0.016 240); --chrome-ink: oklch(0.205 0.018 250); --chrome-muted: oklch(0.448 0.019 245); /* A hairline, not the signal colour. --mark is read by the rule at the head of a card and under a section heading; on a pad the only lines are the grid, and a teal bar across it is Catalogue's ruling wearing Graph's colour. The teal is kept for --signal, which is used where something is live or found and nowhere else. */ --mark: oklch(0.886 0.014 240); --rule-head: oklch(0.520 0.120 240); /* the grid's blue, dark enough to be a line */ --signal: oklch(0.520 0.098 218); /* Square, and filled with the signal rather than the accent: an engineer's pad is precise, and the one coloured thing on it should be the thing that is live. */ --radius-sm: 1px; --radius-control: 2px; --radius-panel: 0; --btn-bg: var(--signal); --btn-bg-hover: oklch(0.455 0.098 218); --btn-ink: oklch(0.985 0.005 218); --texture: repeating-linear-gradient(to right, oklch(0.886 0.014 240) 0 1px, transparent 1px 22px), repeating-linear-gradient(to bottom, oklch(0.886 0.014 240) 0 1px, transparent 1px 22px); --primary: oklch(0.5 0.13 var(--accent-hue)); --primary-hover: oklch(0.45 0.13 var(--accent-hue)); --primary-soft: oklch(0.94 0.035 var(--accent-hue)); --on-primary: oklch(1 0 0); --focus-ring: oklch(0.5 0.13 var(--accent-hue)); --recording: oklch(0.55 0.20 25); --danger: oklch(0.52 0.18 27); --danger-soft: oklch(0.92 0.035 27); --on-danger: oklch(1 0 0); --warning: oklch(0.55 0.13 75); --success: oklch(0.52 0.13 150); --info: oklch(0.52 0.12 240); --shadow-sm: 0 1px 2px oklch(0.25 0.02 260 / 0.07), 0 2px 8px oklch(0.25 0.02 260 / 0.06); --shadow-md: 0 4px 12px oklch(0.25 0.02 260 / 0.11), 0 16px 32px oklch(0.25 0.02 260 / 0.08); --scrim: oklch(0.20 0.02 240 / 0.45); } /* ---- paper ---- The plain light, and the one the bare :root now carries too: "light" was this without the warmth, and the warmth is the brand's, so it absorbed it. Warm and slightly yellowed, the way a page under a lamp is. For people who write for an hour at a time. The blue comes out of the surface, not out of the text, so contrast is unchanged: ink on bg here is 12.9:1. */ :root[data-theme="paper"], [data-theme-preview="paper"] { color-scheme: light; --bg: oklch(0.977 0.011 85); --surface-2: oklch(0.956 0.015 85); --surface-3: oklch(0.934 0.019 84); --surface-hover: oklch(0.945 0.017 84); --ink: oklch(0.255 0.020 62); --ink-muted: oklch(0.455 0.021 70); --ink-faint: oklch(0.585 0.018 72); --border: oklch(0.884 0.017 80); --border-strong: oklch(0.785 0.021 78); --border-subtle: oklch(0.926 0.013 82); --chrome: oklch(0.956 0.015 85); --chrome-raised: oklch(0.934 0.019 84); --chrome-line: oklch(0.884 0.017 80); --chrome-ink: oklch(0.255 0.020 62); --chrome-muted: oklch(0.455 0.021 70); --mark: oklch(0.884 0.017 80); --rule-head: oklch(0.585 0.155 22); /* catalogue red */ --texture: none; --signal: var(--primary); --primary: oklch(0.50 0.13 var(--accent-hue)); --primary-hover: oklch(0.45 0.13 var(--accent-hue)); --primary-soft: oklch(0.93 0.035 var(--accent-hue)); --on-primary: oklch(1 0 0); --focus-ring: oklch(0.50 0.13 var(--accent-hue)); --recording: oklch(0.56 0.20 25); --danger: oklch(0.53 0.19 27); --danger-soft: oklch(0.94 0.035 27); --on-danger: oklch(1 0 0); --warning: oklch(0.56 0.13 75); --success: oklch(0.53 0.13 150); --info: oklch(0.53 0.12 240); --shadow-sm: 0 1px 2px oklch(0.30 0.04 70 / 0.08), 0 2px 8px oklch(0.30 0.04 70 / 0.07); --shadow-md: 0 4px 12px oklch(0.30 0.04 70 / 0.12), 0 16px 32px oklch(0.30 0.04 70 / 0.09); --scrim: oklch(0.28 0.04 70 / 0.45); } /* ---- contrast ---- For anyone who cannot read the others. Text is black on white, every border is drawn rather than implied, and the accent is darkened until white on it clears AAA rather than AA. Nothing here is decorative. */ :root[data-theme="contrast"], [data-theme-preview="contrast"] { color-scheme: light; --bg: oklch(1 0 0); --surface-2: oklch(1 0 0); --surface-3: oklch(0.955 0 0); --surface-hover: oklch(0.905 0 0); --ink: oklch(0 0 0); --ink-muted: oklch(0.30 0 0); --ink-faint: oklch(0.37 0 0); --border: oklch(0.36 0 0); --border-strong: oklch(0 0 0); --border-subtle: oklch(0.56 0 0); /* Contrast keeps its own inks; the chrome is simply its surface, and the mark is its border — this theme draws no decorative lines. */ --chrome: oklch(1 0 0); --chrome-raised: oklch(1 0 0); --chrome-line: oklch(0.36 0 0); --chrome-ink: oklch(0 0 0); --chrome-muted: oklch(0.30 0 0); --mark: oklch(0.36 0 0); --rule-head: oklch(0.420 0.160 25); /* deep red: 7:1 on white and still the red line, not a black one */ --texture: none; --signal: var(--primary); --primary: oklch(0.40 0.15 var(--accent-hue)); --primary-hover: oklch(0.31 0.15 var(--accent-hue)); --primary-soft: oklch(0.92 0.045 var(--accent-hue)); --on-primary: oklch(1 0 0); --focus-ring: oklch(0 0 0); --recording: oklch(0.44 0.21 27); --danger: oklch(0.42 0.20 27); --danger-soft: oklch(0.93 0.045 27); --on-danger: oklch(1 0 0); --warning: oklch(0.42 0.14 70); --success: oklch(0.40 0.14 150); --info: oklch(0.40 0.14 250); /* A ring rather than a blur: a shadow you cannot see is not elevation. */ --shadow-sm: 0 0 0 1px oklch(0 0 0 / 0.30); --shadow-md: 0 0 0 2px oklch(0 0 0 / 0.45); --scrim: oklch(0 0 0 / 0.62); } /* ---- ledger ---- An accountant's book. Green-grey paper, a cold near-black ink, and the two things a ledger has that a notebook does not: vertical rules at the margins, and numbers that sit in columns. The green is the colour of the stock, not of anything drawn on it, which is why it is this quiet. */ :root[data-theme="ledger"], [data-theme-preview="ledger"] { color-scheme: light; --bg: oklch(0.965 0.012 140); --surface-2: oklch(0.945 0.015 140); --surface-3: oklch(0.922 0.018 140); --surface-hover: oklch(0.935 0.016 140); --ink: oklch(0.220 0.020 160); --ink-muted: oklch(0.440 0.020 160); --ink-faint: oklch(0.570 0.018 160); --border: oklch(0.870 0.020 140); --border-strong: oklch(0.770 0.025 140); --border-subtle: oklch(0.915 0.015 140); --chrome: oklch(0.945 0.015 140); --chrome-raised: oklch(0.922 0.018 140); --chrome-line: oklch(0.870 0.020 140); --chrome-ink: oklch(0.220 0.020 160); --chrome-muted: oklch(0.440 0.020 160); --mark: oklch(0.870 0.020 140); --rule-head: oklch(0.420 0.120 150); /* a bookkeeper's green: a colour, and a line */ --texture: none; --signal: var(--primary); /* The column rules. Drawn by finish.css on the surfaces that carry writing and rows, the way ruled draws its lines: on the thing, never on the page. */ --rule: oklch(0.850 0.030 140); --primary: oklch(0.48 0.12 var(--accent-hue)); --primary-hover: oklch(0.43 0.12 var(--accent-hue)); --primary-soft: oklch(0.92 0.035 var(--accent-hue)); --on-primary: oklch(1 0 0); --focus-ring: oklch(0.48 0.12 var(--accent-hue)); --recording: oklch(0.56 0.20 25); --danger: oklch(0.53 0.19 27); --danger-soft: oklch(0.93 0.035 27); --on-danger: oklch(1 0 0); --warning: oklch(0.56 0.13 75); --success: oklch(0.50 0.13 150); --info: oklch(0.53 0.12 240); --shadow-sm: 0 1px 2px oklch(0.25 0.03 150 / 0.08), 0 2px 8px oklch(0.25 0.03 150 / 0.07); --shadow-md: 0 4px 12px oklch(0.25 0.03 150 / 0.12), 0 16px 32px oklch(0.25 0.03 150 / 0.09); --scrim: oklch(0.22 0.03 150 / 0.45); } /* ---- typewriter ---- Cream stock, letterpress-dark ink, and the writing set in the mono face — only the writing; the chrome around it stays in the body face, because the costume is the page and not the desk. Square as a carriage: the one theme that takes every corner to zero, and the reason --radius-card is a token. */ :root[data-theme="typewriter"], [data-theme-preview="typewriter"] { color-scheme: light; --bg: oklch(0.975 0.014 90); --surface-2: oklch(0.955 0.016 90); --surface-3: oklch(0.935 0.018 88); --surface-hover: oklch(0.945 0.017 88); --ink: oklch(0.180 0.010 60); --ink-muted: oklch(0.420 0.016 65); --ink-faint: oklch(0.560 0.015 70); --border: oklch(0.870 0.020 85); --border-strong: oklch(0.760 0.024 82); --border-subtle: oklch(0.920 0.014 88); --chrome: oklch(0.955 0.016 90); --chrome-raised: oklch(0.935 0.018 88); --chrome-line: oklch(0.870 0.020 85); --chrome-ink: oklch(0.180 0.010 60); --chrome-muted: oklch(0.420 0.016 65); --mark: oklch(0.870 0.020 85); --rule-head: oklch(0.440 0.130 25); /* the red half of a two-tone ribbon, a year on */ --texture: none; --signal: var(--primary); --radius-sm: 0px; --radius-control: 2px; --radius-panel: 0px; --radius-card: 0px; --primary: oklch(0.48 0.12 var(--accent-hue)); --primary-hover: oklch(0.43 0.12 var(--accent-hue)); --primary-soft: oklch(0.93 0.035 var(--accent-hue)); --on-primary: oklch(1 0 0); --focus-ring: oklch(0.48 0.12 var(--accent-hue)); --recording: oklch(0.56 0.20 25); --danger: oklch(0.53 0.19 27); --danger-soft: oklch(0.94 0.035 27); --on-danger: oklch(1 0 0); --warning: oklch(0.56 0.13 75); --success: oklch(0.53 0.13 150); --info: oklch(0.53 0.12 240); --shadow-sm: 0 1px 2px oklch(0.25 0.03 70 / 0.10), 0 2px 8px oklch(0.25 0.03 70 / 0.08); --shadow-md: 0 4px 12px oklch(0.25 0.03 70 / 0.14), 0 16px 32px oklch(0.25 0.03 70 / 0.10); --scrim: oklch(0.22 0.03 70 / 0.48); } /* ---- blueprint ---- Graph, at night, with a name people know: white lines on cyan, and the one coloured thing on the sheet is the orange pencil the engineer marked it up with, which is the head rule. The surfaces are translucent for the same reason graph's are — a panel that fills itself flat cuts a hole in the sheet — and the structural rules graph has in app.css apply here too. */ :root[data-theme="blueprint"], [data-theme-preview="blueprint"] { color-scheme: dark; --bg: oklch(0.320 0.090 240); --surface-2: oklch(0.380 0.085 240 / 0.62); --surface-3: oklch(0.420 0.080 240 / 0.70); --surface-hover: oklch(0.400 0.085 240 / 0.80); --ink: oklch(0.970 0.010 240); --ink-muted: oklch(0.860 0.020 240); --ink-faint: oklch(0.760 0.030 240); --border: oklch(0.970 0.010 240 / 0.28); --border-strong: oklch(0.970 0.010 240 / 0.45); --border-subtle: oklch(0.970 0.010 240 / 0.16); --chrome: oklch(0.290 0.090 240); --chrome-raised: oklch(0.340 0.088 240); --chrome-line: oklch(0.970 0.010 240 / 0.28); --chrome-ink: oklch(0.970 0.010 240); --chrome-muted: oklch(0.860 0.020 240); --mark: oklch(0.970 0.010 240 / 0.25); --rule-head: oklch(0.800 0.140 60); /* the orange pencil */ --signal: oklch(0.880 0.120 80); --radius-sm: 1px; --radius-control: 2px; --radius-panel: 0; --btn-bg: var(--ink); --btn-bg-hover: oklch(0.90 0.02 240); --btn-ink: var(--bg); --texture: repeating-linear-gradient(to right, oklch(1 0 0 / 0.10) 0 1px, transparent 1px 22px), repeating-linear-gradient(to bottom, oklch(1 0 0 / 0.10) 0 1px, transparent 1px 22px); --primary: oklch(0.80 0.12 var(--accent-hue)); --primary-hover: oklch(0.85 0.12 var(--accent-hue)); --primary-soft: oklch(0.42 0.07 var(--accent-hue)); --on-primary: oklch(0.20 0.05 var(--accent-hue)); --focus-ring: oklch(0.85 0.12 var(--accent-hue)); --recording: oklch(0.72 0.19 25); --danger: oklch(0.75 0.16 27); --danger-soft: oklch(0.40 0.08 27); --on-danger: oklch(0.16 0.03 27); --warning: oklch(0.82 0.13 80); --success: oklch(0.78 0.13 150); --info: oklch(0.80 0.10 220); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35), 0 2px 8px oklch(0 0 0 / 0.30); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.45), 0 16px 32px oklch(0 0 0 / 0.35); --scrim: oklch(0.10 0.05 240 / 0.62); } /* ---- slate ---- The neutral dark the app did not have: a cold ground, a warm ink, and the red line. Distinct from catalogue at night, which is warm all through, and from ruled at night, which is lined, by being neither. */ :root[data-theme="slate"], [data-theme-preview="slate"] { color-scheme: dark; --bg: oklch(0.170 0.008 250); --surface-2: oklch(0.210 0.010 250); --surface-3: oklch(0.250 0.012 250); --surface-hover: oklch(0.270 0.012 250); --ink: oklch(0.940 0.006 80); --ink-muted: oklch(0.740 0.010 80); --ink-faint: oklch(0.620 0.010 80); --border: oklch(0.320 0.012 250); --border-strong: oklch(0.430 0.014 250); --border-subtle: oklch(0.260 0.010 250); --chrome: oklch(0.210 0.010 250); --chrome-raised: oklch(0.250 0.012 250); --chrome-line: oklch(0.320 0.012 250); --chrome-ink: oklch(0.940 0.006 80); --chrome-muted: oklch(0.740 0.010 80); --mark: oklch(0.320 0.012 250); --rule-head: oklch(0.620 0.150 24); /* oxblood */ --texture: none; --signal: var(--primary); --primary: oklch(0.77 0.14 var(--accent-hue)); --primary-hover: oklch(0.82 0.14 var(--accent-hue)); --primary-soft: oklch(0.28 0.055 var(--accent-hue)); --on-primary: oklch(0.16 0.03 var(--accent-hue)); --focus-ring: oklch(0.82 0.14 var(--accent-hue)); --recording: oklch(0.70 0.19 25); --danger: oklch(0.72 0.17 27); --danger-soft: oklch(0.28 0.065 27); --on-danger: oklch(0.16 0.03 27); --warning: oklch(0.79 0.13 75); --success: oklch(0.75 0.13 150); --info: oklch(0.74 0.11 250); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40), 0 2px 8px oklch(0 0 0 / 0.32); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.50), 0 16px 32px oklch(0 0 0 / 0.38); --scrim: oklch(0 0 0 / 0.64); }