feat(ui): consolidate grid-control colors into the --pretable-* theme contract#170
Merged
Conversation
Move the 11 grid-control colors grid.css depends on out of the undocumented --pt-color-* namespace (defined only in the Alpenglow tokens.css, unreachable by the documented theme+grid.css recipe) into the --pretable-* theme contract, theme-derived. Fixes a real contract bug (documented recipe → undefined checkbox/selection/resize/reorder colors) and grows the contract 24→34. Guards via contract.test.ts (token list + both-theme var-resolution + no-pt-color check). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
4-task plan: define 10 derived grid-control tokens in both themes + extend contract TOKENS (T1); repoint grid.css via s/--pt-color-/--pretable-/ + both-theme resolution guard + no-pt-color guard (T2); delete dead tokens from tokens.css (T3); document in token-reference.mdx (T4). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Defines 10 grid-control tokens (checkbox/selection/resize/reorder) in both themes, derived from each theme's accent/bg/rule so they recolor coherently and adapt to dark mode. Extends contract.test.ts so every theme must define them.
Renames the 16 var(--pt-color-*) refs to --pretable-* (focus-ring dedupes onto the existing --pretable-focus-ring). Adds a guard that grid.css references no --pt-color-*, and verifies grid.css's --pretable-* deps resolve under BOTH themes (was excel-only) — proving the documented recipe yields a fully-themed grid.
The grid-control --pt-color-* (checkbox/selection/resize/reorder/focus-ring) now live in the --pretable-* theme contract; remove their now-unreferenced declarations from the Alpenglow palette file. Non-grid --pt-color-* (e.g. warning) are untouched.
…ference Replaces fabricated per-theme hex (old M3 purple seed) with the real derivation expressions, fixes the CSS-only count (22→32), and lists --pretable-bg-header in the derives-from note. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
Contributor
Vercel preview readyPreview: https://pretable-fq16fchl6-cacheplane.vercel.app Updated automatically by the |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Moves the 11 grid-control colors that
grid.cssdepends on out of the undocumented--pt-color-*namespace into the documented--pretable-*theme contract, so the documented consumer recipe (theme.css+grid.css) yields a fully-themed grid.The bug this fixes:
grid.cssconsumed 11--pt-color-*tokens (checkbox ×4, selection overlay, focus-ring, resize ×2, reorder ×3) that are defined only intokens.css(the Alpenglow website palette) — not in any theme file, not in the documented contract, and not imported by the documented recipe. A consumer following the recipe got an unstyled checkbox, no selection background, an invisible resize handle, and a broken reorder ghost. The bench was already running those controls on undefined values; only the website worked, by accident, because it also importstokens.css.Changes
--pretable-*tokens added to each theme (material.css,excel.css), derived from each theme's existing accent/rule/bg tokens so they auto-adapt (incl. Material dark).--pt-color-focus-ring→ reuse existing--pretable-focus-ring.grid.css: all 16var(--pt-color-*)references repointed to--pretable-*;@layer pretable { :where(…) }structure preserved.tokens.css: removed the 12 now-dead grid-control--pt-color-*declarations (Alpenglow palette +--pt-color-warningleft intact).Testing
contract.test.ts:TOKENSextended 24→34; grid.css var-resolution test now runs against both themes; new guard assertsgrid.cssreferences no--pt-color-*.@pretable/ui18/18, website docs 21/21 green locally.api:checkunaffected).Spec:
docs/superpowers/specs/2026-06-07-grid-token-consolidation-design.mdPlan:
docs/superpowers/plans/2026-06-07-grid-token-consolidation.md🤖 Generated with Claude Code