Vigilio Desto
8ea2358412
New tokens: --width-prose (65ch), --width-report (72ch), --container-padding, --grid-gap, --grid-gap-tight. Layout layer no longer picks values — edit 01-asw.css to change any layout dimension.
391 lines
20 KiB
CSS
391 lines
20 KiB
CSS
/**
|
|
* 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 — prose, heading, ui (map to OP font stacks)
|
|
* 3. Agent-native tokens — task, callout, session, wikilink, redacted
|
|
* 4. 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)
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
: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 — dark end of the 16-step scale ─────────────────── */
|
|
|
|
--surface: var(--color-16); /* ~10% lightness */
|
|
--surface-1: var(--color-15); /* ~16% */
|
|
--surface-2: var(--color-14); /* ~20% */
|
|
--surface-card: var(--surface-1);
|
|
--surface-hover: var(--surface-2);
|
|
|
|
/* ── Text — light end of the scale ────────────────────────────── */
|
|
|
|
--text: var(--color-3); /* 93% lightness */
|
|
--text-2: var(--color-5); /* 80% */
|
|
--text-3: var(--color-7); /* 66% */
|
|
--text-dim: var(--color-9); /* 53% */
|
|
|
|
/* ── Accent — peak chroma step, palette-driven ─────────────────── */
|
|
|
|
--accent: var(--color-8); /* 58%, peak chroma */
|
|
--accent-hover: var(--color-7); /* 66% */
|
|
--on-accent: var(--color-16);
|
|
--accent-focus: oklch(58% 0.15 var(--palette-hue) / 0.35);
|
|
--accent-subtle: oklch(58% 0.15 var(--palette-hue) / 0.10);
|
|
--accent-underline: oklch(58% 0.15 var(--palette-hue) / 0.45);
|
|
--accent-hover-underline: oklch(66% 0.15 var(--palette-hue) / 0.55);
|
|
|
|
/* ── 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); /* matches --link */
|
|
--accent-red: oklch(65% 0.18 25); /* matches --error */
|
|
--accent-orange: oklch(75% 0.15 80); /* matches --warn */
|
|
|
|
/* ── Border ────────────────────────────────────────────────────── */
|
|
|
|
--border: var(--color-14); /* ~20% lightness */
|
|
--border-subtle: var(--color-15); /* ~16% lightness */
|
|
--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-prose: var(--font-neo-grotesque);
|
|
--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: var(--color-2);
|
|
--h2-color: var(--color-3);
|
|
--h3-color: var(--color-3);
|
|
--h4-color: var(--color-5);
|
|
--h5-color: var(--color-5);
|
|
--h6-color: var(--color-7);
|
|
|
|
/* ── 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 */
|
|
--width-full: var(--width-xl); /* full-width alias */
|
|
|
|
/* Container padding */
|
|
--container-padding: var(--space-4); /* inline padding at small viewports */
|
|
|
|
/* Structural dimensions */
|
|
--sidebar-width: 220px; /* docs sidebar column */
|
|
--toc-width: 200px; /* docs TOC column */
|
|
--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 */
|
|
--scrollbar-size: var(--border-size-3); /* 5px */
|
|
|
|
/* Grid gaps */
|
|
--grid-gap: var(--space-5); /* default grid gap */
|
|
--grid-gap-tight: var(--space-4); /* compact 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: color-mix(in oklch, var(--color-15) 50%, transparent);
|
|
|
|
/* ── 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: var(--color-9);
|
|
|
|
--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: color-mix(in oklch, var(--color-16) 80%, transparent);
|
|
--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");
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
AGENT-NATIVE TOKENS
|
|
These are ASW's actual contribution — concepts no other framework has.
|
|
Propose additions to Open Props: data-task, data-callout, data-session.
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
--task-done: var(--ok);
|
|
--task-blocked: var(--error);
|
|
--task-wip: var(--warn);
|
|
--task-todo: var(--color-9);
|
|
|
|
--callout-info: var(--info);
|
|
--callout-warn: var(--warn);
|
|
--callout-error: var(--error);
|
|
--callout-note: var(--color-9);
|
|
|
|
--session-bg: var(--surface-1);
|
|
--wikilink: var(--link);
|
|
--redacted: var(--color-11);
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
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: var(--color-9); /* muted — same as --text-dim */
|
|
--syntax-punctuation: var(--color-9); /* 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-function: oklch(75% 0.15 250); /* blue — close to --info */
|
|
--syntax-number: oklch(75% 0.15 80); /* amber — same as --warn */
|
|
--syntax-operator: var(--color-5); /* text-2 level */
|
|
--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 */
|
|
--syntax-tag: oklch(75% 0.15 25); /* red for HTML tags */
|
|
|
|
/* ── 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 */
|
|
--absolute-white: oklch(100% 0 0); /* 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-function: oklch(40% 0.15 250);
|
|
--syntax-number: oklch(40% 0.15 80);
|
|
--syntax-operator: var(--color-11);
|
|
--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);
|
|
--syntax-tag: oklch(40% 0.15 25);
|
|
}
|
|
}
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
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%; } }
|