/* dotcom — Design Tokens Color palette: Neutral dark — achromatic greys + blue/green accents, all OKLCH. Original palette: #111111 bg · #d4d4d4 fg · #6cb6ff blue · #4ec94e green. Dark mode is default. Light mode via :root.light on . */ /* ───────────────────────────────────────────────────────── RAW PALETTE Achromatic neutrals + two accent hues. Use semantic aliases below in components, not these directly. ───────────────────────────────────────────────────────── */ :root { /* Neutrals (dark-first) */ --n-950: oklch(0.1 0 0); /* #111111 — page background */ --n-900: oklch(0.14 0 0); /* #1a1a1a — elevated surface */ --n-800: oklch(0.2 0 0); /* #282828 — deep surface / code bg */ --n-700: oklch(0.287 0 0); /* #404040 — default border */ --n-600: oklch(0.365 0 0); /* #525252 — strong border */ --n-500: oklch(0.534 0 0); /* #808080 — muted text */ --n-400: oklch(0.636 0 0); /* #999999 — subtle text */ --n-200: oklch(0.85 0 0); /* #d4d4d4 — body text */ --n-100: oklch(0.921 0 0); /* #e8e8e8 — headings */ /* Accents — all L=0.760, same perceived brightness, different hues */ --blue: oklch(0.76 0.13 240); /* #6cb6ff lineage — primary accent, links */ --green: oklch(0.76 0.17 142); /* #4ec94e lineage — secondary accent, blockquotes */ --orange: oklch(0.76 0.175 39); /* PlanetScale orange lineage — labels, highlights */ } /* Light palette — reversed neutral stack */ :root.light { --n-950: oklch(0.972 0 0); --n-900: oklch(0.943 0 0); --n-800: oklch(0.906 0 0); --n-700: oklch(0.824 0 0); --n-600: oklch(0.745 0 0); --n-500: oklch(0.636 0 0); --n-400: oklch(0.534 0 0); --n-200: oklch(0.2 0 0); --n-100: oklch(0.1 0 0); /* Accents go dark on light bg — need L < 0.45 for adequate contrast */ --blue: oklch(0.44 0.16 240); --green: oklch(0.42 0.185 142); --orange: oklch(0.48 0.195 39); } /* ───────────────────────────────────────────────────────── SEMANTIC TOKENS Wire palette → intent. Use these in components. ───────────────────────────────────────────────────────── */ :root { color-scheme: dark; /* Surfaces */ --bg-page: var(--n-950); --bg-elevated: var(--n-900); --bg-deep: var(--n-800); --bg-hover: var(--n-800); --bg-tag: var(--n-800); --bg-code: var(--n-800); /* inline code bg — n-800 keeps it distinct from n-950 page bg */ /* Borders */ --border-default: var(--n-700); --border-strong: var(--n-600); --border-accent: var(--blue); /* Typography */ --text-body: var(--n-200); --text-heading: var(--n-100); --text-muted: var(--n-500); --text-subtle: var(--n-400); --text-link: var(--blue); --text-link-hover: var(--n-100); /* Accent */ --color-accent: var(--blue); --color-accent-hover: var(--n-100); --color-accent-bg: var(--n-800); --color-accent-green: var(--green); --color-accent-orange: var(--orange); /* Focus */ --focus-ring: var(--blue); /* Syntax palette — referenced by Shiki theme config */ --syntax-bg: var(--n-950); --syntax-fg: var(--n-200); --syntax-blue: var(--blue); --syntax-green: var(--green); --syntax-yellow: oklch(0.86 0.14 85); --syntax-orange: oklch(0.76 0.15 50); --syntax-red: oklch(0.68 0.19 25); --syntax-purple: oklch(0.72 0.145 310); --syntax-aqua: oklch(0.8 0.095 195); --syntax-grey: var(--n-500); } :root.light { color-scheme: light; /* Inline code + tag chips: a flat neutral grey read as clashing against the saturated accent text on a light bg. Tint the chip bg toward the accent hue instead — same idea as the syntax accents above, just at very low chroma/high L so it stays a background, not a foreground. */ --bg-tag: oklch(0.9 0.03 240); --bg-code: oklch(0.9 0.03 240); /* Syntax accents not covered by blue/green/orange above — same treatment: dark on light bg, ~6:1 contrast against --bg-elevated (matches --blue/ --green/--orange above). Computed by scripts/build-theme.mjs into design/shiki-theme-light.json — keep both in sync if these change. */ --syntax-yellow: oklch(0.46 0.14 85); --syntax-orange: oklch(0.46 0.15 50); --syntax-red: oklch(0.48 0.19 25); --syntax-purple: oklch(0.46 0.145 310); --syntax-aqua: oklch(0.44 0.095 195); /* Comments: intentionally lower contrast (de-emphasized), same ratio as dark mode's #808080-on-#1a1a1a */ --syntax-grey: oklch(0.55 0 0); }