diff --git a/src/layers/01-tokens.css b/src/layers/01-tokens.css index 035004d..c682ba5 100644 --- a/src/layers/01-tokens.css +++ b/src/layers/01-tokens.css @@ -12,9 +12,8 @@ * * 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 + * 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. @@ -73,10 +72,8 @@ --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); + --accent-focus: oklch(58% 0.15 var(--palette-hue) / 0.35); + --accent-subtle: oklch(58% 0.15 var(--palette-hue) / 0.10); /* ── Links — fixed blue hue, not palette-driven ───────────────── Blue is the web convention. Accent is palette-tinted UI chrome. */ @@ -104,7 +101,6 @@ /* --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 */ @@ -170,7 +166,6 @@ --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 */ @@ -182,11 +177,9 @@ --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 */ + --grid-gap: var(--space-5); /* default grid gap */ /* ── Chart dimensions ────────────────────────────────────────────── */ @@ -288,53 +281,28 @@ --space-5a: 1.25rem; /* between --space-4 (1rem) and --space-5 (1.5rem) */ - /* ══════════════════════════════════════════════════════════════════ - 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 */ + --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-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 */ - --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) */ @@ -394,16 +362,12 @@ --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); } }