refactor: CSS task 11 — audit and remove 22 unused tokens
Removed: --accent-underline, --accent-hover-underline, --font-prose, --grid-gap-tight, --scrollbar-size, --width-full, --absolute-white, --task-done/wip/blocked/todo, --callout-info/warn/error/note, --session-bg, --wikilink, --redacted, --syntax-function/number/operator/tag 168 → 146 defined tokens. Build passes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
79b6b85a94
commit
5fb4b1a6cf
1 changed files with 15 additions and 51 deletions
|
|
@ -12,9 +12,8 @@
|
||||||
*
|
*
|
||||||
* This file defines only what Open Props doesn't:
|
* This file defines only what Open Props doesn't:
|
||||||
* 1. Surface / text / accent — semantic aliases (override to theme)
|
* 1. Surface / text / accent — semantic aliases (override to theme)
|
||||||
* 2. Font stack aliases — prose, heading, ui (map to OP font stacks)
|
* 2. Font stack aliases — heading, ui (map to OP font stacks)
|
||||||
* 3. Agent-native tokens — task, callout, session, wikilink, redacted
|
* 3. A handful of precise values without direct OP equivalents
|
||||||
* 4. A handful of precise values without direct OP equivalents
|
|
||||||
*
|
*
|
||||||
* To theme ASW:
|
* To theme ASW:
|
||||||
* Set --palette-hue in your own CSS to shift all color-N surfaces/text.
|
* Set --palette-hue in your own CSS to shift all color-N surfaces/text.
|
||||||
|
|
@ -75,8 +74,6 @@
|
||||||
--on-accent: var(--color-16);
|
--on-accent: var(--color-16);
|
||||||
--accent-focus: oklch(58% 0.15 var(--palette-hue) / 0.35);
|
--accent-focus: oklch(58% 0.15 var(--palette-hue) / 0.35);
|
||||||
--accent-subtle: oklch(58% 0.15 var(--palette-hue) / 0.10);
|
--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 ─────────────────
|
/* ── Links — fixed blue hue, not palette-driven ─────────────────
|
||||||
Blue is the web convention. Accent is palette-tinted UI chrome. */
|
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-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova */
|
||||||
/* --font-monospace-code: Dank Mono, Operator Mono, Inconsolata... */
|
/* --font-monospace-code: Dank Mono, Operator Mono, Inconsolata... */
|
||||||
|
|
||||||
--font-prose: var(--font-neo-grotesque);
|
|
||||||
--font-heading: var(--font-neo-grotesque);
|
--font-heading: var(--font-neo-grotesque);
|
||||||
--font-ui: var(--font-neo-grotesque);
|
--font-ui: var(--font-neo-grotesque);
|
||||||
/* --font-mono: var(--font-monospace-code) — provided directly by Open Props */
|
/* --font-mono: var(--font-monospace-code) — provided directly by Open Props */
|
||||||
|
|
@ -170,7 +166,6 @@
|
||||||
--width-prose: 65ch; /* reading-optimised line length */
|
--width-prose: 65ch; /* reading-optimised line length */
|
||||||
--width-report: 72ch; /* report/formal layout */
|
--width-report: 72ch; /* report/formal layout */
|
||||||
--width-content: var(--size-lg); /* 1024px — general content cap */
|
--width-content: var(--size-lg); /* 1024px — general content cap */
|
||||||
--width-full: var(--width-xl); /* full-width alias */
|
|
||||||
|
|
||||||
/* Container padding */
|
/* Container padding */
|
||||||
--container-padding: var(--space-4); /* inline padding at small viewports */
|
--container-padding: var(--space-4); /* inline padding at small viewports */
|
||||||
|
|
@ -182,11 +177,9 @@
|
||||||
--docs-max-width: 1400px; /* docs layout outer cap */
|
--docs-max-width: 1400px; /* docs layout outer cap */
|
||||||
--card-min-width: 280px; /* card-grid minmax floor */
|
--card-min-width: 280px; /* card-grid minmax floor */
|
||||||
--tooltip-max-width: var(--size-px-14); /* 320px */
|
--tooltip-max-width: var(--size-px-14); /* 320px */
|
||||||
--scrollbar-size: var(--border-size-3); /* 5px */
|
|
||||||
|
|
||||||
/* Grid gaps */
|
/* Grid gaps */
|
||||||
--grid-gap: var(--space-5); /* default grid gap */
|
--grid-gap: var(--space-5); /* default grid gap */
|
||||||
--grid-gap-tight: var(--space-4); /* compact grid gap */
|
|
||||||
|
|
||||||
/* ── Chart dimensions ────────────────────────────────────────────── */
|
/* ── Chart dimensions ────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
|
@ -288,26 +281,6 @@
|
||||||
--space-5a: 1.25rem; /* between --space-4 (1rem) and --space-5 (1.5rem) */
|
--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
|
SYNTAX HIGHLIGHTING TOKENS
|
||||||
Used by 02-semantic.css (PrismJS) and 07-chroma.css (Hugo Chroma).
|
Used by 02-semantic.css (PrismJS) and 07-chroma.css (Hugo Chroma).
|
||||||
|
|
@ -318,23 +291,18 @@
|
||||||
--syntax-punctuation: var(--color-9); /* same muted level */
|
--syntax-punctuation: var(--color-9); /* same muted level */
|
||||||
--syntax-string: oklch(75% 0.15 145); /* green — same as --ok */
|
--syntax-string: oklch(75% 0.15 145); /* green — same as --ok */
|
||||||
--syntax-keyword: oklch(72% 0.15 250); /* blue — close to --link-hover */
|
--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-property: oklch(65% 0.15 250); /* blue — same as --link */
|
||||||
--syntax-variable: oklch(75% 0.15 80); /* amber */
|
--syntax-variable: oklch(75% 0.15 80); /* amber */
|
||||||
--syntax-deleted: oklch(75% 0.15 25); /* red — same as --error */
|
--syntax-deleted: oklch(75% 0.15 25); /* red — same as --error */
|
||||||
--syntax-inserted: oklch(75% 0.15 145); /* green — same as --ok */
|
--syntax-inserted: oklch(75% 0.15 145); /* green — same as --ok */
|
||||||
--syntax-namespace: oklch(75% 0.15 80); /* amber */
|
--syntax-namespace: oklch(75% 0.15 80); /* amber */
|
||||||
--syntax-url: var(--link); /* urls look like links */
|
--syntax-url: var(--link); /* urls look like links */
|
||||||
--syntax-tag: oklch(75% 0.15 25); /* red for HTML tags */
|
|
||||||
|
|
||||||
/* ── Utility tokens ─────────────────────────────────────────────── */
|
/* ── Utility tokens ─────────────────────────────────────────────── */
|
||||||
|
|
||||||
--print-surface: oklch(100% 0 0); /* white for print */
|
--print-surface: oklch(100% 0 0); /* white for print */
|
||||||
--print-text: oklch(0% 0 0); /* black for print */
|
--print-text: oklch(0% 0 0); /* black for print */
|
||||||
--absolute-black: oklch(0% 0 0); /* redaction, forced contrast */
|
--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-border: var(--color-10); /* high-contrast border (one step above --border) */
|
||||||
--hc-text: var(--color-1); /* high-contrast text (brightest) */
|
--hc-text: var(--color-1); /* high-contrast text (brightest) */
|
||||||
|
|
||||||
|
|
@ -394,16 +362,12 @@
|
||||||
--syntax-punctuation: var(--color-10);
|
--syntax-punctuation: var(--color-10);
|
||||||
--syntax-string: oklch(40% 0.15 145);
|
--syntax-string: oklch(40% 0.15 145);
|
||||||
--syntax-keyword: oklch(38% 0.15 250);
|
--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-property: oklch(45% 0.15 250);
|
||||||
--syntax-variable: oklch(40% 0.15 80);
|
--syntax-variable: oklch(40% 0.15 80);
|
||||||
--syntax-deleted: oklch(40% 0.15 25);
|
--syntax-deleted: oklch(40% 0.15 25);
|
||||||
--syntax-inserted: oklch(40% 0.15 145);
|
--syntax-inserted: oklch(40% 0.15 145);
|
||||||
--syntax-namespace: oklch(40% 0.15 80);
|
--syntax-namespace: oklch(40% 0.15 80);
|
||||||
--syntax-url: var(--link);
|
--syntax-url: var(--link);
|
||||||
--syntax-tag: oklch(40% 0.15 25);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue