From c4e24e885d8d17e6dfef4631af12261601142247 Mon Sep 17 00:00:00 2001 From: AstroHan Date: Thu, 27 Aug 2026 19:02:44 +0800 Subject: [PATCH] chore(desktop): drop tokens nothing reads MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Twenty-four custom properties in `maka-tokens.css` have no `var()` consumer anywhere — not in renderer CSS, not in `@maka/ui`, not in stories, and not in Astryx, which reads a handful of Maka properties through its own theme bridge and is checked separately here. A token nobody reads still has to be kept consistent with the palette, the theme blocks, and every audit that walks the file, so it costs maintenance and returns nothing. Removed: the checked-control colors (`--control`, `--control-foreground`), four unread wash tiers, `--border-width-accent`, `--foreground-alpha-10`, `--space-0`, `--opacity-pending`, `--ease-in-out-strong`, `--maka-text-display-2`, and `--h-control-xl` / `--h-control-2xl`, whose own comment recorded that nothing reads them. Three groups are more than single tokens: - The `--elevation-*` tier was three aliases of `--shadow-*` with one consumer between them. The tier goes and `settings/form.css` names `--shadow-med` directly, which is the value it already resolved to. - The icon scale mirrored `ICON_SIZE` in `@maka/ui`'s `icons.tsx` by its own admission. `ICON_SIZE` has 209 consumers and the CSS mirror had two; the two CSS-clamped rungs stay and the rest go, including `--icon-size`, an alias marked "deprecated, one release", and `--icon-chrome`, whose only reader was that alias. - The z-index ladder kept four rungs no layer sits on. Reserving unused floors invites the next reader to pick by name rather than by stacking, so the ladder now lists what exists: sticky, titlebar, tooltip, overlay, plus the two micro tiers. Four comments that named a deleted token as live are corrected with it. `--foreground-8` is deliberately kept beside `--foreground-alpha-*`: the first mixes into the background and is opaque, the second is a real alpha channel, and the file already records why the two cannot substitute for each other. Generated-by: Claude Code --- apps/desktop/src/renderer/maka-tokens.css | 89 +++---------------- .../src/renderer/styles/settings/form.css | 2 +- 2 files changed, 13 insertions(+), 78 deletions(-) diff --git a/apps/desktop/src/renderer/maka-tokens.css b/apps/desktop/src/renderer/maka-tokens.css index 6780d4319f..b66497d71c 100644 --- a/apps/desktop/src/renderer/maka-tokens.css +++ b/apps/desktop/src/renderer/maka-tokens.css @@ -165,22 +165,10 @@ (connected/ok semantics); running/focus-ring/nav-active/selection follow --accent, while link text follows the solid tier below. */ --accent: oklch(0.70 0.135 250); - /* Checked controls (--control) use a slightly deeper blue (L0.65, one step - below the accent) so the near-white glyph clears WCAG 1.4.11 non-text - contrast 3:1 (3.09:1); the logo L0.70 only reaches 2.55:1. */ - /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding - blue h250 — palettes only override the base tokens, so literals here - kept the send button, onboarding CTA and every checked control blue - after a palette switch (same bug --brand-deep already had and fixed). - Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning; - min(c, …) keeps the default palette byte-identical while following - low-chroma palettes down. */ - --control: oklch(from var(--accent) 0.65 min(c, 0.135) h); - --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h); /* The SOLID accent tier: a filled accent surface that carries TEXT, and - accent-colored text/icons on a plain surface. --action (L0.85 chip) and - --control (L0.65, tuned for WCAG 1.4.11 non-text 3:1) are both too light - to clear 1.4.3's 4.5:1 for text, so neither can back a solid button label. + accent-colored text/icons on a plain surface. --action (L0.85 chip) is too + light to clear 1.4.3's 4.5:1 for text, so it cannot back a solid button + label. L0.52 is the lowest lightness that clears 4.5:1 against white for EVERY palette (weakest is tokyo-night at 4.78:1); chroma and hue follow --accent so palettes still read as themselves. This is the token the Astryx bridge @@ -219,8 +207,7 @@ different families — no longer the near-identical ambers they once were. */ --warning: oklch(0.50 0.18 55); - /* Legacy brand affordance for a few emphasized surfaces. New checked - control states use --control instead. + /* Legacy brand affordance for a few emphasized surfaces. PR-THEME-APPLY-AND-DONE-POLISH-0 (WAWQAQ msg `dec85e5b`): was a static "Solarpunk deep" green, which made palette switching invisible on the Done CTA and made every palette read as olive-green. */ @@ -280,11 +267,8 @@ --warning-wash: oklch(from var(--warning) l c h / 0.08); --warning-wash-border: oklch(from var(--warning) l c h / 0.24); --destructive-wash: oklch(from var(--destructive) l c h / 0.08); - --destructive-wash-border: oklch(from var(--destructive) l c h / 0.24); --info-wash: oklch(from var(--info) l c h / 0.08); --info-wash-border: oklch(from var(--info) l c h / 0.24); - --destructive-wash-strong: oklch(from var(--destructive) l c h / 0.12); - --destructive-wash-strong-border: oklch(from var(--destructive) l c h / 0.40); /* === foreground solid mix scale === foreground-N = N% of foreground interpolated INTO background. @@ -342,7 +326,6 @@ with no governance benefit. */ --border-width-hairline: 1px; --border-width-thick: 2px; - --border-width-accent: 3px; --muted: oklch(from var(--foreground) l c h / 0.05); /* Ink ladder (visual system 2.0, T1): three tiers about 2x apart, all above 4.5:1. Measured against --surface-raised, light reads 19.1 / 9.8 / 4.8. @@ -363,10 +346,9 @@ (NOT the solid --foreground-N tints, which mix with --background and would change rendering — the ring would thicken, the wash would stop tracking the backdrop). The file-attachment card uses these for its bg - (0.06), icon-tile (0.10), and inset ring (0.12); other components at + (0.06) and inset ring (0.12); other components at the same density can reuse the tier instead of a fresh alpha. */ --foreground-alpha-6: oklch(from var(--foreground) l c h / 0.06); - --foreground-alpha-10: oklch(from var(--foreground) l c h / 0.10); --foreground-alpha-12: oklch(from var(--foreground) l c h / 0.12); /* Visual System 2.0 (T2/T3). Added so the three sites that were borrowing `--border-strong` as a strong neutral TINT can say what they mean: a @@ -398,22 +380,6 @@ it. Nothing in the app reads a `--color-*` compatibility name any more. Do NOT add new --color-* names. */ - /* === elevation (visual system 2.0, T1) ============================= - Product names for the theme's shadow scale, so the right answer is - findable. The generated theme ships --shadow-low/med/high and product CSS - had used them exactly once, reaching instead for hand-rolled shadows — - a scale nobody can name is a scale nobody uses. - - Three names, three jobs: `raised` for a card lifting off its plate, - `overlay` for anything in a portal, `drag` for something under the - cursor. In-flow elements do not cast shadows; that rule is unchanged, - this only gives the legitimate path a name. - - Consumers move in T2-T4 — T1 does not touch product CSS. */ - --elevation-raised: var(--shadow-low); - --elevation-overlay: var(--shadow-med); - --elevation-drag: var(--shadow-high); - /* === shadow recipes === Flat elevation uses a foreground-derived 1px ring in both themes. @@ -436,13 +402,9 @@ oklch(from var(--foreground) l c h / 0.06) 0 0 0 1px; /* === z-index scale (semantic) === */ - --z-base: 0; --z-sticky: 20; --z-titlebar: 40; - --z-panel: 50; - --z-dropdown: 100; --z-tooltip: 150; - --z-modal: 200; --z-overlay: 300; /* PR-FE-BUG-HUNT-9 (kenji audit reminder 9, finding #4): named micro-z tokens for the two raw z-index sites styles.css used to @@ -737,7 +699,6 @@ so the scale governs padding/margin/gap only (not width/height/ inset/grid), per the adversarial review in #430. */ --spacing: 4px; /* base step — the single ruler */ - --space-0: 0; --space-0-5: calc(var(--spacing) * 0.5); /* 2px */ --space-1: calc(var(--spacing) * 1); /* 4px */ --space-1-5: calc(var(--spacing) * 1.5); /* 6px */ @@ -752,20 +713,16 @@ --space-12: calc(var(--spacing) * 12); /* 48px */ --space-16: calc(var(--spacing) * 16); /* 64px */ - /* Five-rung icon scale, mirroring ICON_SIZE in @maka/ui's icons.tsx — - these tokens exist for the CSS-clamped sites; pick by the role the - glyph plays, not by eye. */ + /* ICON_SIZE in @maka/ui's icons.tsx is the icon scale; components pass it as + a prop. These two rungs exist only for the sites that size a glyph from + CSS — add a rung here when a CSS site needs one, not to mirror the TS. */ --icon-meta: 13px; --icon-control: 14px; - --icon-chrome: 16px; - --icon-empty: 20px; - --icon-plate: 28px; - --icon-size: var(--icon-chrome); /* deprecated alias, one release */ /* === motion === Custom easing curves per emil-design-eng — the built-in CSS easings are too weak to feel intentional. Use --ease-out-strong for - feedback/state changes and --ease-in-out-strong for on-screen movement. + feedback/state changes. PR-MOTION-TOKEN-CONVERGE-0 (kenji's category 4, 2026-06-24): duration scale paired with the easing scale. The values come from @@ -789,7 +746,6 @@ (styles/chat-message.css does this for the tool detail row). Copy the neighbour, or use this scale — never split the difference by hand. */ --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1); - --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-linear: linear; --duration-quick: 120ms; @@ -808,7 +764,6 @@ PR-OPACITY-CONVERGE-0 (issue #520 PR2). */ --opacity-disabled: 0.5; /* disabled controls / strongly dimmed text */ --opacity-muted: 0.65; /* secondary text / icons / muted affordances */ - --opacity-pending: 0.8; /* pending / active / in-progress states */ --opacity-overlay: 0.04; /* body::after subtle overlay (light) */ /* === focus-ring recipe === @@ -926,14 +881,6 @@ sidebar nav row, session row, settings nav row, select, first-run stepper item */ - /* #1879: this tier used to name "first-run checklist row" as a consumer. - Nothing in the renderer reads it — that row is the stepper item above, and - measured, its floor is 29px, so it takes `lg`. A tier documenting a - consumer it does not have is the same defect as an exemption documenting a - rule it does not govern; the tier stays (Astryx defines it and a prominent - button is a real future need) but it is honest about having no reader. */ - --h-control-xl: var(--size-element-lg); /* 36px — no consumer today */ - --h-control-2xl: var(--space-10); /* 40px — toolbar, large touch target */ /* === content measure (#520 PR4 item 16) ================================ The chat content max-width — the column the conversation, tool output, @@ -1004,23 +951,12 @@ --accent: oklch(0.74 0.15 250); /* Dark mode keeps the same pale-blue CTA chip + deep-blue text as light - mode, so the "light, fresh button" reads consistently across themes; - --control uses the same L0.65 blue as light so the white glyph clears - WCAG 1.4.11 non-text contrast 3:1 (3.09:1) in both themes. */ - /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding - blue h250 — palettes only override the base tokens, so literals here - kept the send button, onboarding CTA and every checked control blue - after a palette switch (same bug --brand-deep already had and fixed). - Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning; - min(c, …) keeps the default palette byte-identical while following - low-chroma palettes down. */ - --control: oklch(from var(--accent) 0.65 min(c, 0.135) h); - --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h); + mode, so the "light, fresh button" reads consistently across themes. */ /* Dark mode inverts the solid tier: the fill goes LIGHT and carries dark ink, matching Astryx's own --color-on-accent (light-dark(#fff, #171717)). L0.76 clears 4.5:1 against that ink for every palette (weakest is coral - at 7.16:1). See the light-mode note above for why --action/--control - cannot serve this role. */ + at 7.16:1). See the light-mode note above for why --action cannot serve + this role. */ --accent-solid: oklch(from var(--accent) 0.76 c h); --accent-wash: oklch(from var(--accent) 0.28 min(c, 0.05) h); --link: var(--accent-solid); @@ -1422,7 +1358,6 @@ --maka-text-heading-4: var(--text-heading-4-weight) var(--text-heading-4-size)/var(--text-heading-4-leading) var(--maka-font-family); --maka-text-heading-5: var(--text-heading-5-weight) var(--text-heading-5-size)/var(--text-heading-5-leading) var(--maka-font-family); --maka-text-display-1: var(--text-display-1-weight) var(--text-display-1-size)/var(--text-display-1-leading) var(--maka-font-family); - --maka-text-display-2: var(--text-display-2-weight) var(--text-display-2-size)/var(--text-display-2-leading) var(--maka-font-family); --maka-text-display-3: var(--text-display-3-weight) var(--text-display-3-size)/var(--text-display-3-leading) var(--maka-font-family); --maka-text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-leading) var(--font-family-code); } diff --git a/apps/desktop/src/renderer/styles/settings/form.css b/apps/desktop/src/renderer/styles/settings/form.css index a1d481a5c8..e69b63430d 100644 --- a/apps/desktop/src/renderer/styles/settings/form.css +++ b/apps/desktop/src/renderer/styles/settings/form.css @@ -54,7 +54,7 @@ border: var(--border-width-hairline) solid var(--border-soft); border-radius: var(--radius-modal); background: var(--surface-overlay); - box-shadow: var(--elevation-overlay); + box-shadow: var(--shadow-med); opacity: 1; }