CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Replace remaining hardcoded hex colors with color tokens #66

Merged
an.di merged 1 commits from adilallo/fix/CR-27-color-tokens into main 2026-08-17 20:33:56 +00:00
Conversation 0 Commits 1 Files Changed 13
+21 -25
an.di commented 2026-08-17 20:33:03 +00:00
Owner
Copy Link
Copy Source

Overview

Spacing, radius, and color tokens are already the dominant pattern; this replaces the leftover hardcoded hex values that map onto the existing color scale so components follow the design system instead of Figma-exported literals.

A few values stay hardcoded on purpose: third-party share-channel brand colors, and the Avatar small-size white-alpha border (no matching token).

Changes

  • Step — text-[#141414] → --color-gray-900 (exact; --color-content-default-primary is white and would invert the type)
  • FAQ Accordion section bg and Layout Accordion focus ring-offset — #141414 → --color-surface-default-secondary
  • HeaderLockup inverse description — #2d2d2d → --color-content-invert-tertiary
  • RadioButton selected hover — #333000 → --color-surface-default-brand-primary (yellow-1000)
  • LoginForm mail icon — #fefcc9 → --color-surface-inverse-brand-primary (same as the other variant, so the ternary was removed)
  • FinalReviewScreen rule card — #c9fef9 → --color-surface-invert-brand-teal
  • Stats title tones — #636363 / #e0e0e0 → --color-gray-500 / --color-gray-100 (nearest scale)
  • Book card — #171717 → --color-surface-default-secondary (#141414)
  • SectionHeader default subtitle (mobile) — #484848 → --color-gray-600
  • Share — comment that Signal / Slack / Discord / copy-link hexes are third-party brands, not DS tokens
  • Avatar — comment that border-[#FFFFFF4D] has no white-alpha token (--color-opacity-* is black-alpha)
  • Step unit test updated to assert the token class

How to Test

  1. Run npx tsc --noEmit and npx vitest run.
  2. In Storybook, spot-check:
    • Cards / Step (all sizes) — dark type on white card
    • Sections / Accordion (FAQ) — dark section background; keyboard focus ring on a row
    • Type / HeaderLockup with palette="inverse" — description color
    • Type / SectionHeader default variant — subtitle at mobile vs sm+
    • Sections / Book and Sections / Stats
    • Controls / RadioButton standard mode, selected + hover — darker yellow dot
    • Modals / Login (default and save-progress) — yellow mail icon circle
    • Modals / Share — channel circles unchanged
    • Asset / Avatar small — translucent white border unchanged
  3. In the app: /about (FAQ, Book, Stats), create-flow final review card, login modal.

Notes

  • Stats / Book / SectionHeader mobile subtitle moved 2–5 hex units onto the nearest token. Confirm in Storybook if that rounding is acceptable.
  • Blog index bg-[#F4F3F1] is still hardcoded; there is no matching token.
  • Avatar white 30% border still needs a design-token decision if we want it off hex.
  • Branch is 1 commit ahead of origin/adilallo/fix/CR-27-color-tokens and has not been pushed
## Overview Spacing, radius, and color tokens are already the dominant pattern; this replaces the leftover hardcoded hex values that map onto the existing color scale so components follow the design system instead of Figma-exported literals. A few values stay hardcoded on purpose: third-party share-channel brand colors, and the Avatar small-size white-alpha border (no matching token). ## Changes - **Step** — `text-[#141414]` → `--color-gray-900` (exact; `--color-content-default-primary` is white and would invert the type) - **FAQ Accordion** section bg and **Layout Accordion** focus ring-offset — `#141414` → `--color-surface-default-secondary` - **HeaderLockup** inverse description — `#2d2d2d` → `--color-content-invert-tertiary` - **RadioButton** selected hover — `#333000` → `--color-surface-default-brand-primary` (yellow-1000) - **LoginForm** mail icon — `#fefcc9` → `--color-surface-inverse-brand-primary` (same as the other variant, so the ternary was removed) - **FinalReviewScreen** rule card — `#c9fef9` → `--color-surface-invert-brand-teal` - **Stats** title tones — `#636363` / `#e0e0e0` → `--color-gray-500` / `--color-gray-100` (nearest scale) - **Book** card — `#171717` → `--color-surface-default-secondary` (`#141414`) - **SectionHeader** default subtitle (mobile) — `#484848` → `--color-gray-600` - **Share** — comment that Signal / Slack / Discord / copy-link hexes are third-party brands, not DS tokens - **Avatar** — comment that `border-[#FFFFFF4D]` has no white-alpha token (`--color-opacity-*` is black-alpha) - **Step** unit test updated to assert the token class ## How to Test 1. Run `npx tsc --noEmit` and `npx vitest run`. 2. In Storybook, spot-check: - **Cards / Step** (all sizes) — dark type on white card - **Sections / Accordion** (FAQ) — dark section background; keyboard focus ring on a row - **Type / HeaderLockup** with `palette="inverse"` — description color - **Type / SectionHeader** default variant — subtitle at mobile vs `sm+` - **Sections / Book** and **Sections / Stats** - **Controls / RadioButton** standard mode, selected + hover — darker yellow dot - **Modals / Login** (default and save-progress) — yellow mail icon circle - **Modals / Share** — channel circles unchanged - **Asset / Avatar** small — translucent white border unchanged 3. In the app: `/about` (FAQ, Book, Stats), create-flow final review card, login modal. ## Notes - Stats / Book / SectionHeader mobile subtitle moved 2–5 hex units onto the nearest token. Confirm in Storybook if that rounding is acceptable. - Blog index `bg-[#F4F3F1]` is still hardcoded; there is no matching token. - Avatar white 30% border still needs a design-token decision if we want it off hex. - Branch is **1 commit ahead** of `origin/adilallo/fix/CR-27-color-tokens` and has not been pushed
an.di added 1 commit 2026-08-17 20:33:03 +00:00
Replace remaining hardcoded hex colors with color tokens (CR-27) da453f6108 
Map leftover component hex values onto the existing color scale, and leave third-party share brands and the Avatar white-alpha border documented as intentional exceptions.
an.di changed title from Replace remaining hardcoded hex colors with color tokens (CR-27) to Replace remaining hardcoded hex colors with color tokens 2026-08-17 20:33:28 +00:00
an.di merged commit 1983a67ffd into main 2026-08-17 20:33:56 +00:00
an.di deleted branch adilallo/fix/CR-27-color-tokens 2026-08-17 20:33:56 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#66