Fix semantic contrast and Storybook Canvas themes

[zacjones93]

What changed

• raises shared primary and destructive semantic token pairs above 4.5:1 in light and dark themes
• makes Tailwind dark:* utilities follow the apps' .dark class contract
• propagates Canvas toolbar theme state to the Storybook iframe root/body so portalled overlays inherit the selected theme without leaking into Docs chrome
• adds a deterministic Playwright/axe audit that discovers all Canvas stories from index.json, runs light and dark against opposite OS preferences, exercises Dialog, Sheet, DropdownMenu, Popover, Select, and Tooltip states, and verifies Docs isolation
• documents the broad Start/Crew/shared-package token audit and intentional state-matched foreground exceptions in LAT

Contrast ratios

• light primary: 4.729326:1
• dark primary: 5.538282:1
• light destructive: 4.619454:1
• dark destructive: 5.251364:1

Validation

• @repo/ui: 25 tests passed; typecheck, build, check, and lint passed
• Start and Crew typechecks passed
• full pre-push lint/typecheck passed (9 lint tasks, 12 typecheck tasks)
• static Storybook build passed with 15 Canvas stories
• generated CSS: 243 class-dark selectors and zero prefers-color-scheme: dark blocks
• Playwright/axe: all 15 stories x 2 themes passed under opposite OS preferences with zero color-contrast violations; portal token inheritance and Docs isolation passed
• UI inventory is current
• lat check passed
• git diff --check passed

Known environment blockers

• Start and Crew app builds stop before compilation because ignored .alchemy/local/wrangler.jsonc files are absent in this fresh worktree. No Alchemy deployment state was generated.

• main
  • feat(ui): consolidate Storybook and shared UI library #615
    • feat(ui): add shared package foundation #616
      • feat(ui): extract shared form and overlay primitives #617
        • Fix semantic contrast and Storybook Canvas themes 👈
          • UI library: add exhaustive page coverage contract #619
            • UI Library Stack 06 — Public Entry Browser Evidence #620
              • Fix dark button hover contrast #621
                • Extract shared feedback and navigation primitives #622
                  • UI Library Stack 08 — Docs and Auxiliary App Evidence #623
                  • feat(ui): add auth entry composition #624
                  • docs(ui): capture protected athlete coverage #625
                  • fix(settings): render profile email outside form field #626
                  • fix(settings): render athlete stats outside form fields #627
                  • fix(series): render movement collection heading #628
                  • feat(ui): add field composition primitives #629
                  • docs(ui): capture Crew organizer coverage #630
                  • refactor(settings): adopt shared field composition #631
                  • fix(crew): contain mobile route layouts #632
                  • fix(judges): compose rotation collection field group #633
                  • docs(ui): capture Crew admin coverage #634
                  • fix(scaling): compose levels field groups #635
                  • fix(registration): compose option field groups #636
                  • feat(ui): add empty state composition #637
                  • fix(crew): align token route accessibility #639
                  • docs(ui): capture Crew token and series coverage #638
                  • fix(start): correct organizer panel semantics #640
                  • refactor(ui): adapt organizer empty states #641
                  • fix(start): stabilize admin sidebar hydration #642
                  • fix(start): add admin dashboard heading hierarchy #643
                  • fix(start): correct demo competition semantics #644
                  • docs(ui): capture Start admin coverage #645
                  • refactor(ui): compose organizer empty states directly #646
                  • feat(ui): add metric composition #647
                  • refactor(crew): adopt shared Metric summaries #648
                  • refactor(ui): compose Crew preview metrics #649

---

Summary by cubic

Fixes semantic contrast and Storybook Canvas theming so components meet WCAG AA and portalled overlays inherit the selected theme without affecting Docs.

• Bug Fixes

  • Raised primary and destructive token contrast to meet 4.5:1 in light and dark.
  • Aligned Tailwind dark:* to the app .dark class (not the OS preference).
  • Propagated Canvas toolbar theme to the iframe html/body; Docs chrome stays isolated.

• New Features

  • Added a deterministic Playwright + axe audit that reads index.json, runs light/dark with opposite OS prefs, exercises Dialog, Sheet, DropdownMenu, Popover, Select, and Tooltip, and verifies Docs isolation.
  • Added a static Vite preview for Storybook and a test:storybook-contrast script.
  • Documented the token audit and intentional foreground exceptions in LAT.
  • Added @axe-core/playwright for contrast checks.

^{Written for commit b76ab29. Summary will update on new commits.}

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 0e996c7b-f914-4a75-84ed-749b33fba85a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/ui-semantic-contrast

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[zacjones93]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[zacjones93]

LGTM — no blockers found in an independent review of the exact stacked range 31ed97c7c453a861176921da695cca69c5f7e782..b76ab29b6d2f0bcef6180ccac8a7868d65569d79.

Evidence:

• Independently recomputed WCAG ratios from the committed HSL tokens: filled primary is 4.729326:1 light / 5.538282:1 dark; filled destructive is 4.619454:1 light / 5.251364:1 dark. Standalone primary is 4.943692:1 light / 5.538282:1 dark, standalone destructive is 4.828839:1 light / 5.251364:1 dark, and accent foreground/fill is 16.037370:1 light / 14.510631:1 dark.
• Direct Start/Crew/shared-package source audit matches LAT exactly: 267 bg-primary, 82 text-primary-foreground, 265 standalone text-primary, 94 bg-destructive, 24 text-destructive-foreground, and 1,039 dark: occurrences. Every foreground occurrence has a same-line semantic/state-matched fill; the solid-fill exceptions without foreground tokens are non-text progress bars, rulers, loading indicators, and status dots. The documented bg-black→dark:bg-primary, group-hover, and destructive-hover exceptions are paired correctly.
• Production CSS proof: Storybook and Start emit 243 :where(.dark,.dark *) variant selectors; Crew emits 161 based on its source inventory. All three emit zero prefers-color-scheme: dark blocks, and the light/dark primary tokens are present in both app CSS outputs. CI’s real build (wodsmith-start) and build (crew) jobs both pass.
• Storybook preview synchronizes Canvas theme state to html, body, and #storybook-root, skips Docs, and restores each target’s prior class state during effect cleanup. The runtime audit confirms the selected class wins against the opposite emulated OS preference and that Docs chrome stays light-class isolated.
• Static Storybook built successfully with 15 discovered Canvas stories. Playwright/axe passed all 15 × 2 theme states, exercises Dialog, Sheet, Select, DropdownMenu, and Popover as body portals plus the wrapper Tooltip, validates semantic/computed token inheritance, reports zero contrast violations, and passes Docs isolation. The harness is serialized (workers: 1, fullyParallel: false), fixed-port, sorted-index, and deterministic.
• Scope is narrow: exactly 8 files / 351 additions / 14 deletions, with no route, domain, or production component churn. Dependency change is only @axe-core/playwright; the lockfile adds its 4.12.1 binding to existing playwright-core@1.60.0, with no React/runtime changes. The app resolves one React/ReactDOM pair at 19.2.3.
• Local validation: @repo/ui 25/25 tests plus typecheck/build/Biome pass; Start 2,906/2,906 tests, typecheck, and UI inventory pass; Crew typecheck passes; lat check and git diff --check pass. The local Start/Crew production build commands stop before compilation only because their ignored .alchemy/local/wrangler.jsonc files are absent; the corresponding GitHub build jobs pass, so this is environment configuration rather than a code failure.
• Live state at head b76ab29b6: all 14 reported checks pass, including both app builds/lints/typechecks, Start tests, Crew demo E2E, both E2E shards, merge reports, Git Town, and GitGuardian. PR is draft but MERGEABLE with merge state CLEAN; no review submissions or inline review threads are present.
• lat check passes, generated Storybook/test output is ignored, and the final worktree is clean with no nonignored untracked files.

Same-account approval fallback: leaving this top-level LGTM/no-blockers comment instead of an approval review.