Skip to content

fix(tokens): replace hardcoded colors with design tokens (compliance 0→100)#440

Merged
Shooksie merged 1 commit intomainfrom
fix/token-compliance-20260419
Apr 19, 2026
Merged

fix(tokens): replace hardcoded colors with design tokens (compliance 0→100)#440
Shooksie merged 1 commit intomainfrom
fix/token-compliance-20260419

Conversation

@Shooksie
Copy link
Copy Markdown
Contributor

Summary

Token compliance score had collapsed from 95 → 0 (847 violations). This PR fixes it to 100/100.

Root causes:

  • Ignore list gaps: stories files (271), globals.css bridge file, CLI tools, and palette components weren't excluded
  • Scan script couldn't find token definitions in src/themes/*.css or src/styles/globals.css
  • Several production block components used hardcoded Tailwind palette colors
  • A bug in StatsOverview used an incomplete --la-chart- token reference

Changes:

  • globals.css: Add --la-radius-lg, --la-color-primary, --la-color-muted, --la-color-primary-subtle token definitions
  • ActivityStream.tsx: like/publish event colors → accent/secondary tokens
  • ActivityFeed.tsx: like type color → accent tokens
  • IntegrationMarketplace.tsx: marketing/storage category badges → accent/info tokens
  • NotificationCenter.tsx: Remove hsl(var(--muted)) fallback chains → use var(--la-muted) directly
  • Gauge.tsx: Default zone colors (green/yellow/red) → var(--la-success/warning/destructive)
  • StatsOverview.tsx: Fix incomplete --la-chart- token; use a CHART_COLORS lookup array

Ignore list + scanner updates (in ao-templates):

  • Extended # repo:design-system section with 20+ legitimate exemptions (stories, tools, theme-rendering components)
  • Scan script: also check src/themes/*.css and src/styles/*.css for token definitions

Verification

  • pnpm build passes (ESM + CJS + DTS)
  • Token compliance: 100/100 (0 violations)

…0→100)

- ActivityStream, ActivityFeed: like/publish event types → accent/secondary tokens
- IntegrationMarketplace: marketing/storage category badges → accent/info tokens
- NotificationCenter: replace hsl(var(--muted)) fallbacks with var(--la-muted)
- Gauge: default zone colors → var(--la-success/warning/destructive)
- StatsOverview: fix incomplete --la-chart- token; use CHART_COLORS lookup array
- globals.css: add --la-radius-lg, --la-color-primary, --la-color-muted,
  --la-color-primary-subtle token definitions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 19, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
design-system Ready Ready Preview, Comment Apr 19, 2026 6:23pm

Request Review

@Shooksie Shooksie merged commit 815b58b into main Apr 19, 2026
4 checks passed
@Shooksie Shooksie deleted the fix/token-compliance-20260419 branch April 19, 2026 21:30
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