trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
asw/src/layers/01-tokens.css
Ludo 6d654e884b
feat: oklch color system, hamburger nav, theme toggle, footer, CSS fixes 
Color system:
- Replace all --color-N references in dark mode with oklch()
- Fine-grained surface steps (12%→15%→18%→21%→22%)
- Smooth text gradient (92%→78%→62%→48%)
- Heading hierarchy (95%→65%)
- All palette-driven via --palette-hue and --palette-chroma

Navigation:
- Hamburger menu for mobile (data-nav-toggle + JS)
- Theme toggle button (sun/moon, localStorage persistence)
- data-theme="light|dark" override on <html>
- Cleaned nav CSS, removed old dropdown conflicts

Footer:
- Three-column nav grid (Framework, Resources, Project)
- Branding header + tagline
- Proper semantic structure (header + 3 nav + p)

Fixes:
- Sidebar: compact spacing, --sidebar-link-max token
- TOC: compact, scroll spy with IntersectionObserver
- Prev/next: inline arrows, data-role="prev-next" restored
- Section dividers scoped to article/main only
- Grid columns use tokens not hardcoded values

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-11 20:43:56 +02:00

455 lines
22 KiB
CSS
Raw Blame History

/**
* 01-asw.css
* ASW semantic layer — builds on Open Props
*
* Open Props (imported in main.css) provides the base scales:
* --color-1…16 (oklch, palette-hue-tinted — the primary color scale)
* --gray-0…15, --green-0…12, --blue-0…12, --red-0…12, --yellow-0…12
* --size-1…15, --font-size-0…8, --font-weight-1…9
* --font-lineheight-0…5, --radius-1…6, --shadow-1…6
* --ease-1…5, --ease-spring-1…5, --ease-bounce-1…5
* --gradient-1…30, --animation-*, @keyframes
*
* This file defines only what Open Props doesn't:
* 1. Surface / text / accent — semantic aliases (override to theme)
* 2. Font stack aliases — heading, ui (map to OP font stacks)
* 3. A handful of precise values without direct OP equivalents
*
* To theme ASW:
* Set --palette-hue in your own CSS to shift all color-N surfaces/text.
* Override semantic aliases at :root for finer control.
*
* Lineage: absorbed patterns from Pico CSS, Open Props, Charts.css.
*/
/* ── Project-specific custom media (complement Open Props) ──────────
Open Props doesn't define every breakpoint the layout needs.
These are resolved by PostCSS at build time alongside OP tokens.
─────────────────────────────────────────────────────────────────── */
@custom-media --docs-toc-hidden (width < 1100px); /* docs layout: 3→2 col */
@custom-media --nav-compact (width < 991px); /* nav: allow link wrap */
/* ══════════════════════════════════════════════════════════════════
DARK THEME (default)
Using Open Props oklch --color-N 16-step palette.
Set --palette-hue to tint all surfaces and text. Example:
Trentuna: --palette-hue: 45 (warm amber tint)
vigilio-garden: --palette-hue: 150 (subtle green tint)
══════════════════════════════════════════════════════════════════ */
/* What I think should go to palettes - @vigilio */
:root {
/* ── Palette controls ───────────────────────────────────────────────
--color-1 (lightest) through --color-16 (darkest) follow this hue.
Change --palette-hue to retheme all surfaces and text in one place.
─────────────────────────────────────────────────────────────────── */
--palette-hue: 250; /* blue-violet default */
--palette-chroma: 0.15;
/* ── Surfaces — oklch for fine-grained dark steps ────────────── */
/* Open Props' 16-step scale is too coarse in the dark end.
We use oklch directly with palette-hue for precise control. */
--surface: oklch(12% 0.02 var(--palette-hue));
--surface-1: oklch(15% 0.02 var(--palette-hue));
--surface-2: oklch(18% 0.02 var(--palette-hue));
--surface-3: oklch(21% 0.02 var(--palette-hue));
--surface-card: var(--surface-1);
--surface-hover: oklch(22% 0.03 var(--palette-hue));
/* ── Text — smooth gradient from bright to muted ────────────── */
--text: oklch(92% 0.02 var(--palette-hue));
--text-2: oklch(78% 0.03 var(--palette-hue));
--text-3: oklch(62% 0.03 var(--palette-hue));
--text-dim: oklch(48% 0.03 var(--palette-hue));
/* ── Accent — peak chroma, palette-driven ─────────────────────── */
--accent: oklch(65% var(--palette-chroma) var(--palette-hue));
--accent-hover: oklch(72% var(--palette-chroma) var(--palette-hue));
--on-accent: oklch(5% 0.02 var(--palette-hue));
--accent-focus: oklch(65% var(--palette-chroma) var(--palette-hue) / 0.35);
--accent-subtle: oklch(65% var(--palette-chroma) var(--palette-hue) / 0.10);
/* ── Links — fixed blue hue, not palette-driven ─────────────────
Blue is the web convention. Accent is palette-tinted UI chrome. */
--link: oklch(65% 0.15 250);
--link-hover: oklch(72% 0.15 250);
--link-underline: oklch(65% 0.08 250);
--link-hover-underline: oklch(72% 0.10 250);
--link-focus: oklch(65% 0.06 250);
/* Secondary accents — fixed hues, not palette-driven */
--accent-blue: oklch(65% 0.15 250);
--accent-red: oklch(65% 0.18 25);
--accent-orange: oklch(75% 0.15 80);
/* ── Border — subtle steps between surfaces ────────────────────── */
--border: oklch(25% 0.03 var(--palette-hue));
--border-subtle: oklch(20% 0.02 var(--palette-hue));
--border-width: 1px;
--outline-width: 2px;
/* ── Font stacks ───────────────────────────────────────────────── */
/* Open Props named stacks — no web font loading required. */
/* --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova */
/* --font-monospace-code: Dank Mono, Operator Mono, Inconsolata... */
--font-heading: var(--font-neo-grotesque);
--font-ui: var(--font-neo-grotesque);
/* --font-mono: var(--font-monospace-code) — provided directly by Open Props */
/* ── Typography scale ─────────────────────────────────────────── */
/* Open Props provides: --font-size-0 (.75rem) through --font-size-8 (3.5rem) */
/* We define only the one gap: 0.875rem has no OP equivalent */
--text-xs: var(--font-size-0); /* 0.75rem — badges, fine print */
--text-sm: 0.875rem; /* 0.875rem — metadata, captions (no OP match) */
--text-base: var(--font-size-1); /* 1rem — body */
--text-2xl: var(--font-size-4); /* 1.5rem — subheadings */
--text-3xl: var(--font-size-5); /* 2rem — section headings */
/* ── Heading scale ─────────────────────────────────────────────── */
--h1-size: 1.875rem;
--h2-size: 1.5rem;
--h3-size: 1.25rem;
--h4-size: 1.0625rem;
--h5-size: 0.9375rem;
--h6-size: 0.8125rem;
--h1-weight: var(--font-weight-4); /* 400 */
--h2-weight: var(--font-weight-4);
--h3-weight: var(--font-weight-4);
--h4-weight: var(--font-weight-5); /* 500 */
--h5-weight: var(--font-weight-6); /* 600 */
--h6-weight: var(--font-weight-6);
--h1-color: oklch(95% 0.02 var(--palette-hue));
--h2-color: oklch(90% 0.02 var(--palette-hue));
--h3-color: oklch(85% 0.03 var(--palette-hue));
--h4-color: oklch(78% 0.03 var(--palette-hue));
--h5-color: oklch(72% 0.03 var(--palette-hue));
--h6-color: oklch(65% 0.03 var(--palette-hue));
/* ── Spacing aliases ─────────────────────────────────────────────
Open Props sizes: --size-1 (.25rem), --size-2 (.5rem), --size-3 (1rem),
--size-5 (1.5rem), --size-7 (2rem), --size-9 (4rem)
We alias these with semantic names AND define --space-3 (0.75rem gap)
──────────────────────────────────────────────────────────────── */
--space-1: var(--size-1); /* 0.25rem */
--space-2: var(--size-2); /* 0.50rem */
--space-3: 0.75rem; /* 0.75rem — no OP equivalent */
--space-4: var(--size-3); /* 1.00rem */
--space-5: var(--size-5); /* 1.50rem */
--space-6: var(--size-7); /* 2.00rem */
--space-8: var(--size-9); /* 4.00rem */
/* ── Layout tokens ────────────────────────────────────────────────── */
/* All layout decisions live here. 08-layout.css only uses var(--*). */
/* Container breakpoints (responsive max-widths for body > landmarks) */
--width-sm: 510px;
--width-md: 700px;
--width-lg: 950px;
--width-xl: 1200px;
--width-2xl: 1450px;
/* Content widths */
--width-prose: 65ch; /* reading-optimised line length */
--width-report: 72ch; /* report/formal layout */
--width-content: var(--size-lg); /* 1024px — general content cap */
/* Container padding */
--container-padding: var(--space-4); /* inline padding at small viewports */
/* Structural dimensions */
--sidebar-link-max: var(--size-12); /* max-width for sidebar nav links */
--sidebar-min: 10rem; /* docs sidebar column min */
--sidebar-max: 14rem; /* docs sidebar column max */
--toc-min: 10rem; /* docs TOC column min */
--toc-max: 13rem; /* docs TOC column max */
--nav-height: 60px; /* sticky nav offset */
--docs-max-width: 1400px; /* docs layout outer cap */
--card-min-width: 280px; /* card-grid minmax floor */
--tooltip-max-width: var(--size-px-14); /* 320px */
/* Grid gaps */
--grid-gap: var(--space-5); /* default grid gap */
/* ── Chart dimensions ────────────────────────────────────────────── */
--chart-radial-size: var(--size-px-11); /* 120px — radial gauge cell */
--chart-radial-inset: 18px; /* donut-hole inset — no OP equivalent */
/* ── Diff viewer tokens ──────────────────────────────────────────── */
--diff-add-bg: color-mix(in oklch, var(--ok) 10%, transparent);
--diff-remove-bg: color-mix(in oklch, var(--error) 10%, transparent);
--diff-remove-text: oklch(88% 0.06 25);
--diff-hunk-bg: color-mix(in oklch, var(--info) 7%, transparent);
/* ── AI-disclosure border tokens ────────────────────────────────── */
--ai-generated-border: color-mix(in oklch, var(--ok) 25%, transparent);
--ai-assisted-border: color-mix(in oklch, var(--info) 20%, transparent);
--ai-mixed-border: color-mix(in oklch, var(--warn) 30%, transparent);
/* ── Rhythm ─────────────────────────────────────────────────────── */
--type-space: var(--space-4); /* paragraph / element spacing */
--type-space-top: var(--space-5); /* heading top margin after content */
--leading: 1.6;
--leading-tight: var(--font-lineheight-1); /* 1.25 */
/* ── Radius ─────────────────────────────────────────────────────── */
/* Open Props: --radius-1 (2px), --radius-2 (5px), --radius-3 (1rem) */
--radius-sm: var(--radius-1); /* 2px */
--radius-md: 4px; /* between OP radius-1 and radius-2 */
/* ── Easing ─────────────────────────────────────────────────────── */
/* Open Props provides rich curves — we alias the most-used ones */
--ease: var(--duration-moderate-1) var(--ease-3); /* 180ms — hover, focus, colour */
--ease-fast: var(--duration-quick-1) var(--ease-2); /* 80ms — instant feedback */
--spinner-duration: var(--duration-gentle-1); /* 320ms — spinner rotation cycle */
/* ── Inline element tokens ─────────────────────────────────────── */
--selection: oklch(65% 0.08 250 / 0.30);
--mark-bg: oklch(45% 0.10 80 / 0.40);
--mark-color: var(--accent-orange);
--kbd-bg: var(--text);
--kbd-color: var(--surface);
--code-color: var(--text-2);
--table-stripe: oklch(8% 0.01 var(--palette-hue) / 0.50);
/* ── Form tokens ─────────────────────────────────────────────────── */
--input-bg: var(--surface-1);
--input-border: var(--border);
--input-active-bg: var(--surface);
--input-selected: color-mix(in oklch, var(--accent) 20%, transparent);
--input-px: var(--space-4);
--input-py: var(--space-3);
--disabled-opacity: 0.5;
/* ── State colors — fixed hues, harmonized oklch ─────────────────── */
--ok: oklch(75% 0.15 145); /* green */
--warn: oklch(75% 0.15 80); /* amber */
--error: oklch(75% 0.15 25); /* red */
--info: oklch(75% 0.15 250); /* blue */
--blocked: oklch(48% 0.03 var(--palette-hue));
--error-active: oklch(65% 0.18 25);
--error-focus: oklch(65% 0.06 25);
/* ── Component tokens ─────────────────────────────────────────────── */
--track-bg: var(--surface-2); /* progress / meter background */
--modal-overlay: oklch(5% 0.01 var(--palette-hue) / 0.80);
--modal-backdrop: blur(0.375rem);
--accordion-active: var(--accent-hover);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 115, 115)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
/* Font weights */
--weight-light: var(--font-weight-2);
--weight-normal: var(--font-weight-4);
--weight-medium: var(--font-weight-5);
--weight-semibold: var(--font-weight-6);
--weight-bold: var(--font-weight-7);
/* Shadows */
--shadow-dropdown: var(--shadow-2);
--shadow-modal: var(--shadow-4);
/* Focus ring */
--focus-ring-width: var(--border-size-2);
--border-width-thick: var(--border-size-3);
/* Dropdown */
--dropdown-min-width: var(--size-px-12);
/* Gap in spacing scale */
--space-5a: 1.25rem; /* between --space-4 (1rem) and --space-5 (1.5rem) */
/* ══════════════════════════════════════════════════════════════════
SYNTAX HIGHLIGHTING TOKENS
Used by 02-semantic.css (PrismJS) and 07-chroma.css (Hugo Chroma).
Hues are FIXED (like state colors) — not palette-driven.
══════════════════════════════════════════════════════════════════ */
--syntax-comment: oklch(48% 0.03 var(--palette-hue)); /* same as --text-dim */
--syntax-punctuation: oklch(48% 0.03 var(--palette-hue)); /* same muted level */
--syntax-string: oklch(75% 0.15 145); /* green — same as --ok */
--syntax-keyword: oklch(72% 0.15 250); /* blue — close to --link-hover */
--syntax-property: oklch(65% 0.15 250); /* blue — same as --link */
--syntax-variable: oklch(75% 0.15 80); /* amber */
--syntax-deleted: oklch(75% 0.15 25); /* red — same as --error */
--syntax-inserted: oklch(75% 0.15 145); /* green — same as --ok */
--syntax-namespace: oklch(75% 0.15 80); /* amber */
--syntax-url: var(--link); /* urls look like links */
/* ── Utility tokens ─────────────────────────────────────────────── */
--print-surface: oklch(100% 0 0); /* white for print */
--print-text: oklch(0% 0 0); /* black for print */
--absolute-black: oklch(0% 0 0); /* redaction, forced contrast */
--hc-border: var(--color-10); /* high-contrast border (one step above --border) */
--hc-text: var(--color-1); /* high-contrast text (brightest) */
}
/* ══════════════════════════════════════════════════════════════════
LIGHT MODE — override semantic aliases only
══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
:root {
color-scheme: light;
--surface: var(--color-1); /* 98% */
--surface-1: var(--color-2); /* 97% */
--surface-2: var(--color-3); /* 93% */
--surface-card: var(--color-1);
--surface-hover: var(--color-2);
--text: var(--color-14); /* 20% */
--text-2: var(--color-12); /* 35% */
--text-3: var(--color-10); /* 49% */
--text-dim: var(--color-8); /* 58% */
--accent: var(--color-9); /* 53% — slightly darker for contrast on light */
--accent-hover: var(--color-10);
--on-accent: var(--color-1);
--border: var(--color-4); /* 84% */
--border-subtle: var(--color-3); /* 93% */
--link: oklch(45% 0.15 250);
--link-hover: oklch(38% 0.15 250);
--link-underline: oklch(45% 0.08 250);
--link-hover-underline: oklch(38% 0.10 250);
--link-focus: oklch(45% 0.06 250);
--h1-color: var(--color-16);
--h2-color: var(--color-15);
--h3-color: var(--color-14);
--h4-color: var(--color-13);
--h5-color: var(--color-12);
--h6-color: var(--color-11);
--ok: oklch(40% 0.15 145);
--warn: oklch(40% 0.15 80);
--error: oklch(40% 0.15 25);
--info: oklch(40% 0.15 250);
--mark-bg: oklch(92% 0.08 80);
--mark-color: var(--color-15);
--selection: oklch(80% 0.06 250);
/* Syntax — darker shades for light backgrounds */
--syntax-comment: var(--color-8);
--syntax-punctuation: var(--color-10);
--syntax-string: oklch(40% 0.15 145);
--syntax-keyword: oklch(38% 0.15 250);
--syntax-property: oklch(45% 0.15 250);
--syntax-variable: oklch(40% 0.15 80);
--syntax-deleted: oklch(40% 0.15 25);
--syntax-inserted: oklch(40% 0.15 145);
--syntax-namespace: oklch(40% 0.15 80);
--syntax-url: var(--link);
}
}
/* ══════════════════════════════════════════════════════════════════
MANUAL THEME OVERRIDE — data-theme attribute on <html>
Mirrors the prefers-color-scheme block above.
Set by the theme toggle button + persisted in localStorage.
══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
color-scheme: light;
--surface: var(--color-1);
--surface-1: var(--color-2);
--surface-2: var(--color-3);
--surface-card: var(--color-1);
--surface-hover: var(--color-2);
--text: var(--color-14);
--text-2: var(--color-12);
--text-3: var(--color-10);
--text-dim: var(--color-8);
--accent: var(--color-9);
--accent-hover: var(--color-10);
--on-accent: var(--color-1);
--border: var(--color-4);
--border-subtle: var(--color-3);
--link: oklch(45% 0.15 250);
--link-hover: oklch(38% 0.15 250);
--link-underline: oklch(45% 0.08 250);
--link-hover-underline: oklch(38% 0.10 250);
--link-focus: oklch(45% 0.06 250);
--h1-color: var(--color-16);
--h2-color: var(--color-15);
--h3-color: var(--color-14);
--h4-color: var(--color-13);
--h5-color: var(--color-12);
--h6-color: var(--color-11);
--ok: oklch(40% 0.15 145);
--warn: oklch(40% 0.15 80);
--error: oklch(40% 0.15 25);
--info: oklch(40% 0.15 250);
--mark-bg: oklch(92% 0.08 80);
--mark-color: var(--color-15);
--selection: oklch(80% 0.06 250);
--syntax-comment: var(--color-8);
--syntax-punctuation: var(--color-10);
--syntax-string: oklch(40% 0.15 145);
--syntax-keyword: oklch(38% 0.15 250);
--syntax-property: oklch(45% 0.15 250);
--syntax-variable: oklch(40% 0.15 80);
--syntax-deleted: oklch(40% 0.15 25);
--syntax-inserted: oklch(40% 0.15 145);
--syntax-namespace: oklch(40% 0.15 80);
--syntax-url: var(--link);
}
/* Force dark when OS is light but user chose dark */
:root[data-theme="dark"] {
color-scheme: dark;
}
/* ══════════════════════════════════════════════════════════════════
RESPONSIVE FONT SCALING
Subtle upscaling at large viewports — all rem values follow.
══════════════════════════════════════════════════════════════════ */
@media (--lg-n-above) { html { font-size: 103%; } }
@media (--xl-n-above) { html { font-size: 106%; } }
@media (--xxl-n-above) { html { font-size: 109%; } }
Reference in a new issue View git blame Copy permalink