feat(ui): token layer + rename to STANDARDS (slice #01)#442
Conversation
|
Important Review skippedToo many files! This PR contains 157 files, which is 7 over the limit of 150. ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (157)
You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Code Review
This pull request executes a comprehensive migration of design tokens across the codebase to align with PawWork standards, replacing upstream opencode naming conventions. Key changes include the introduction of a custom git merge driver to protect forked UI paths, updated theme definitions for light and dark modes, and a new parity test to ensure consistency between CSS and JSON theme sources. Feedback was provided regarding a hardcoded absolute path in the token renaming script, which should be replaced with a portable workspace root discovery mechanism.
…ssue #440) Slice #1 of eleven. Establishes the semantic token foundation for all subsequent PawWork UI component slices (#2–#11). This is a permanent carve-out from upstream opencode — see AGENTS.md §Upstream Sync and .gitattributes. ## What changed - theme.css: full rewrite against PawWork STANDARDS (warm neutrals, brand orange #ff5910, 13px dense, system-font). Three-selector structure: :root (light) → [data-color-scheme="dark"] (authoritative dark) → @media mirror Fixes a latent upstream bug: @media-only meant the Settings toggle had no effect. - pawwork.json: rewritten to STANDARDS values with new token names. - colors.txt → tailwind/colors.css: 104 tokens (incl. legacy compat aliases); regenerated Tailwind --color-* bridge via script/tailwind.ts. - 50+ token renames across 144 component files in packages/ui/src and packages/app/src. - HTML entry files (app/index.html, desktop-electron renderer/*.html): updated to var(--bg-base) and synced theme-color meta. Now in .gitattributes carve-out. - UNREGULATED section in theme.css: holds legacy compat aliases (button-brand-*, icon-success-base, icon-info-base, icon-on-interactive-base, surface-base-active) so existing component consumers stay styled without entering STANDARDS managed set. - .gitattributes: added merge=pawwork-keep-ours driver entries for packages/ui/** and key packages/app paths. Driver must be registered per-clone: git config merge.pawwork-keep-ours.driver "true" Verify before upstream sync: bash packages/ui/script/verify-merge-driver.sh ## Tests added - packages/ui/test/theme-parity.test.ts (128 assertions, 0 fail): light root ↔ pawwork.json light.overrides, dark block ↔ dark.overrides, dark completeness (SAME_IN_DARK set), @media mirror exact-match, and two runtime-critical non-regulated token assertions (--text-mix-blend-mode: plus-lighter). - packages/ui/test/undefined-tokens.test.ts: Scans every var(--xxx) in theme.css, Tailwind bridge, and HTML entry files; asserts each resolves to a definition. ## Deferred to slice #2 - colors.txt ↔ colors.css generation consistency test (manual regen + review for now) - TSX/class utility audit (old token utility names, misspelled utilities) - --surface-base-active classification (state token vs. compat bridge) - Legacy runtime token deprecation checklist ## Key decisions for future agents 1. [data-color-scheme="dark"] is authoritative. @media block is mirror-only (first-paint). Both must stay in sync — theme-parity.test.ts enforces this. 2. UNREGULATED section in theme.css is intentional scope. Tokens there are consumed by components but not STANDARDS-managed. Do not promote to regulated without adding to pawwork.json and updating the parity test. 3. The merge driver only fires on two-sided conflicts. One-sided upstream changes still clean-merge. Always review upstream-sync PR diffs for carve-out paths. 4. colors.css is a generated file (do not hand-edit). Regen: bun run script/tailwind.ts.
8abc50f to
273586e
Compare
Summary
Why
PawWork's UI must permanently diverge from upstream opencode's cool-gray / Catppuccin token system. This slice establishes the token foundation that all subsequent component slices (#2–#11) will build on.
Related Issue
Refs #440 (umbrella). This PR is slice #1 of eleven.
Human Review Status
Pending. A human should make the final merge decision after reviewing the final diff and verification evidence.
Review Focus
undefined-tokens.test.tsscan verifies no regulatedvar(--xxx)is left dangling.[data-color-scheme="dark"]is authoritative;@mediablock is mirror-only — confirmtheme-parity.test.tsenforces exact value sync..gitattributescarve-out: three HTML entry files newly added — confirm merge driver covers all intended paths.Changed-file boundary check
All modified files are within the permanent carve-out paths declared in AGENTS.md and enforced in `.gitattributes`:
No `packages/opencode/**` or other out-of-scope paths were touched.
Merge driver setup
The `.gitattributes` carve-out uses a named driver that must be registered once per clone:
```bash
git config merge.pawwork-keep-ours.driver "true"
```
Verify before any upstream sync:
```bash
bash packages/ui/script/verify-merge-driver.sh
```
Without the driver, git falls back to three-way merge on the carve-out paths. The attribute entry is inert without registration.
How To Verify
```text
typecheck (packages/ui): tsgo --noEmit → 0 errors
typecheck (packages/app): tsgo -b → 0 errors
parity test: bun --cwd packages/ui run test test/theme-parity.test.ts
128 pass, 0 fail
Covers: light root, dark [data-color-scheme="dark"] overrides, dark completeness
(all light regulated tokens must have dark override or be in SAME_IN_DARK),
@media mirror exact-match against attribute dark block, extra/missing key
detection, value normalization, parser unit fixtures (extractBlock/parseDeclarations/normalize)
undefined-token scan: bun --cwd packages/ui run test test/undefined-tokens.test.ts
2 pass, 0 fail
Scans all CSS/TS/TSX var(--xxx) for regulated prefixes; asserts each resolves
to theme.css or known-gap allowlist (pierre diffs API, @property-registered lengths)
merge driver verify: bash packages/ui/script/verify-merge-driver.sh
✓ merge driver 'pawwork-keep-ours' is registered (driver = 'true')
note: session-diff.test.ts 2 failures are pre-existing; not caused by this PR
(session-diff.ts/test.ts untouched, confirmed via git diff)
```
Screenshots
Light mode
Dark mode
Token rename key mappings
Old name → New name (abbreviated):
Legacy compat aliases (kept for existing consumers, UNREGULATED):
Known issues (scoped to later slices)
Risk Notes
This PR combines four categories of change with different risk profiles:
Component-local tokens (`shell-`, `diffs-`, `tool-motion-`, `h-`, `kb-*`, `radius-xs`) were intentionally left untouched. Unregulated tokens (avatar 12, markdown 14, syntax 19, agent-icon 4, surface-diff-hidden 5) preserved at original values.
Checklist