Skip to content

Fix dead token classes from shadcn compat cleanup#1975

Merged
kmcginnes merged 1 commit into
mainfrom
fix-dead-token-classes
Jul 18, 2026
Merged

Fix dead token classes from shadcn compat cleanup#1975
kmcginnes merged 1 commit into
mainfrom
fix-dead-token-classes

Conversation

@kmcginnes

Copy link
Copy Markdown
Collaborator

Description

Fixes real visual bugs found during the cohesive review of the design system effort:

  • Alert.tsxbg-card text-card-foreground referenced tokens that were never defined; default Alert rendered without background/text color. Now bg-background text-foreground.
  • SidebarTabs, Checkbox, Details (4 sites) — focus-visible:ring-ring-3 referenced a nonexistent ring color token (broken shadcn leftover). Now focus-visible:ring-primary.
  • EmptyState.tsx — Glow shadows hardcoded hsl(205,95%,71%,70%) and rgba(255,144,119,0.7) instead of tracking the palette. Now shadow-brand-300/70 and shadow-red-300/70.
  • CodeEditor.tsx — Monaco theme used Tailwind v3-era gray hexes that no longer match the zinc-based scale. Updated to current gray token values with comments.

Also updates the /react-guidelines skill's Tailwind section to reference design.md instead of the deleted tailwind.config.ts.

Validation

  • pnpm checks passes
  • pnpm test passes (2178 tests)

Related Issues

Check List

  • I confirm that my contribution is made under the terms of the Apache 2.0 license.
  • I have verified pnpm checks passes with no errors.
  • I have verified pnpm test passes with no failures.
  • I have covered new added functionality with unit tests if necessary.
  • I have updated documentation if necessary.

- Alert default variant used bg-card/text-card-foreground, tokens that
  were never defined — the classes compiled to nothing and the default
  Alert rendered without background or text color. Now uses
  bg-background/text-foreground.
- Four components used focus-visible:ring-ring-3, referencing a
  nonexistent ring color token. Now focus-visible:ring-primary,
  consistent with other focus rings.
- EmptyState glow shadows hardcoded hsl/rgba approximations of
  brand-300/red-300; now use shadow-brand-300/70 and shadow-red-300/70
  so they track the palette.
- CodeEditor Monaco theme hexes updated from Tailwind v3-era grays to
  the current zinc-based gray token values, with comments tying them
  to the design system.
@kmcginnes
kmcginnes marked this pull request as ready for review July 18, 2026 00:32
@kmcginnes
kmcginnes merged commit f067337 into main Jul 18, 2026
6 checks passed
@kmcginnes
kmcginnes deleted the fix-dead-token-classes branch July 18, 2026 00:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant