trentuna/asw
8
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions
asw/assets/css/layers/01-tokens.css
Vigilio Desto 5a8c39c3a0
fix: remap gray-13/14/15 to Open Props range (0-12) 
ASW tokens referenced --gray-13, --gray-14, --gray-15 which don't
exist in Open Props (stops at --gray-12). All text and surface
colors resolved to nothing — invisible text in light mode.

Remap: 13→10, 14→11, 15→12.
2026-04-10 17:57:09 +02:00

343 lines
18 KiB
CSS
Raw Blame History

/**
* 01-tokens.css
* ASW semantic layer — builds on Open Props
*
* Open Props (imported below) provides the base scales:
* --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:
* Override semantic aliases at :root in your own CSS.
* Use Open Props base tokens (--gray-*, --green-*, --size-*) as values.
*
* 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 gray scale — perceptually uniform steps.
Set --gray-hue to tint all surfaces. Example:
Trentuna: --gray-hue: 45 (warm amber tint)
vigilio-garden: --gray-hue: 150 (subtle green tint)
══════════════════════════════════════════════════════════════════ */
:root {
/* ── Surfaces ──────────────────────────────────────────────────── */
--surface: var(--gray-12); /* deepest background (oklch 10%) */
--surface-1: var(--gray-11); /* cards, sidebars (oklch 18%) */
--surface-2: var(--gray-10); /* hover, raised elements (oklch 25%) */
--surface-card: var(--surface-1);
--surface-hover: var(--surface-2);
/* ── Text ──────────────────────────────────────────────────────── */
--text: var(--gray-1); /* primary (95% lightness) */
--text-2: var(--gray-3); /* secondary (80%) */
--text-3: var(--gray-5); /* muted (68%) */
--text-dim: var(--gray-7); /* dim (58%) */
/* ── Accent ────────────────────────────────────────────────────── */
--accent: var(--green-5);
--accent-hover: var(--green-4);
--on-accent: var(--gray-12);
--accent-focus: color-mix(in oklch, var(--green-5) 35%, transparent);
--accent-subtle: color-mix(in oklch, var(--green-5) 10%, transparent);
--accent-underline: color-mix(in oklch, var(--green-5) 45%, transparent);
--accent-hover-underline: color-mix(in oklch, var(--green-5) 55%, transparent);
/* ── Links ─────────────────────────────────────────────────────── */
/* Blue — web convention. Accent (green) reserved for UI chrome. */
--link: var(--blue-5); /* #339af0 */
--link-hover: var(--blue-4); /* #4dabf7 */
--link-underline: color-mix(in oklch, var(--blue-5) 40%, transparent);
--link-hover-underline: color-mix(in oklch, var(--blue-5) 55%, transparent);
--link-focus: color-mix(in oklch, var(--blue-5) 35%, transparent);
/* Secondary accents — reachable as named aliases */
--accent-blue: var(--blue-5);
--accent-red: var(--red-7);
--accent-orange: var(--yellow-6);
/* ── Border ────────────────────────────────────────────────────── */
--border: var(--gray-11); /* 37% lightness — visible against 10% bg */
--border-subtle: var(--gray-12); /* 31% lightness — very subtle */
--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(--text);
--h2-color: var(--text);
--h3-color: var(--text);
--h4-color: var(--text-2);
--h5-color: var(--text-2);
--h6-color: var(--text-3);
/* ── 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 */
/* ── Width tokens ───────────────────────────────────────────────── */
--width-prose: var(--size-content-3); /* 60ch — Open Props reading width */
--width-content: var(--size-lg); /* 1024px — Open Props content width */
--width-full: var(--width-xl); /* alias → --width-xl */
/* ── Layout breakpoints ──────────────────────────────────────────── */
/* These don't map exactly to Open Props --size-* — defined explicitly */
--width-sm: 510px;
--width-md: 700px;
--width-lg: 950px;
--width-xl: 1200px;
--width-2xl: 1450px;
/* ── Structural component dimensions ─────────────────────────────── */
--sidebar-width: 220px; /* docs sidebar column */
--toc-width: 200px; /* docs TOC column */
--nav-height: 60px; /* sticky nav offset for calc() */
--docs-max-width: 1400px; /* docs layout outer cap */
--card-min-width: 280px; /* card-grid minmax floor */
--tooltip-max-width: var(--size-px-14); /* 320px — tooltip overflow cap */
--scrollbar-size: var(--border-size-3); /* 5px — thin webkit scrollbar thumb */
/* ── 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(--green-5) 10%, transparent);
--diff-remove-bg: color-mix(in oklch, var(--red-7) 10%, transparent);
--diff-remove-text: var(--red-2);
--diff-hunk-bg: color-mix(in oklch, var(--blue-4) 7%, transparent);
/* ── AI-disclosure border tokens ────────────────────────────────── */
--ai-generated-border: color-mix(in oklch, var(--green-5) 25%, transparent);
--ai-assisted-border: color-mix(in oklch, var(--blue-4) 20%, transparent);
--ai-mixed-border: color-mix(in oklch, var(--yellow-6) 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: color-mix(in oklch, var(--blue-4) 25%, transparent);
--mark-bg: color-mix(in oklch, var(--yellow-6) 20%, transparent);
--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(--gray-11) 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(--green-5) 20%, transparent);
--input-px: var(--space-4);
--input-py: var(--space-3);
--disabled-opacity: 0.5;
/* ── State colors ─────────────────────────────────────────────────── */
--ok: var(--green-5);
--warn: var(--yellow-5);
--error: var(--red-7);
--info: var(--blue-5);
--blocked: var(--gray-5);
--error-active: var(--red-9);
--error-focus: color-mix(in oklch, var(--red-7) 38%, transparent);
/* ── Component tokens ─────────────────────────────────────────────── */
--track-bg: var(--surface-2); /* progress / meter background */
--modal-overlay: color-mix(in oklch, var(--gray-12) 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(--green-5);
--task-blocked: var(--red-5);
--task-wip: var(--yellow-5);
--task-todo: var(--gray-5);
--callout-info: var(--blue-5);
--callout-warn: var(--yellow-5);
--callout-error: var(--red-5);
--callout-note: var(--gray-5);
--session-bg: var(--surface-1);
--wikilink: var(--blue-4);
--redacted: var(--gray-8);
}
/* ══════════════════════════════════════════════════════════════════
LIGHT MODE — override semantic aliases only
══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
:root {
color-scheme: light;
--surface: var(--gray-0); /* 99% lightness */
--surface-1: var(--gray-1); /* 95% */
--surface-2: var(--gray-2); /* 88% */
--surface-card: var(--gray-0);
--surface-hover: var(--gray-1);
--text: var(--gray-11); /* 18% — dark but not pure black */
--text-2: var(--gray-11); /* 37% */
--text-3: var(--gray-8); /* 53% */
--text-dim: var(--gray-6); /* 63% */
--accent: var(--green-8);
--accent-hover: var(--green-9);
--on-accent: var(--gray-0);
--accent-focus: color-mix(in oklch, var(--green-8) 35%, transparent);
--accent-subtle: color-mix(in oklch, var(--green-8) 10%, transparent);
--border: var(--gray-3); /* 80% — visible on near-white */
--border-subtle: var(--gray-2); /* 88% — very subtle */
--link: var(--blue-8); /* #1971c2 */
--link-hover: var(--blue-7); /* #1c7ed6 */
--link-underline: color-mix(in oklch, var(--blue-8) 40%, transparent);
--link-hover-underline: color-mix(in oklch, var(--blue-8) 55%, transparent);
--link-focus: color-mix(in oklch, var(--blue-8) 35%, transparent);
--h1-color: var(--gray-12);
--h2-color: var(--gray-11);
--h3-color: var(--gray-10);
--h4-color: var(--gray-12);
--h5-color: var(--gray-11);
--h6-color: var(--gray-10);
--mark-bg: color-mix(in oklch, var(--yellow-6) 15%, var(--surface));
--mark-color: var(--gray-12);
--selection: color-mix(in oklch, var(--blue-8) 20%, transparent);
--code-color: var(--text-3);
--table-stripe: color-mix(in oklch, var(--gray-8) 4%, transparent);
--input-bg: var(--gray-0);
--input-border: var(--gray-4);
--input-active-bg: var(--gray-0);
--input-selected: var(--gray-2);
--track-bg: var(--gray-3);
--modal-overlay: color-mix(in oklch, var(--gray-2) 75%, transparent);
--error: oklch(50% 0.17 20);
--error-active: oklch(44% 0.18 20);
--session-bg: var(--surface-1);
}
}
/* ══════════════════════════════════════════════════════════════════
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