feat(tokens): redesign color palette scales (QCDL-29) - #81
Merged
Conversation
Expands and rebalances purple/gray/blue/green/yellow/red scales in tokens.css with fuller step ranges (e.g. purple 50-950, gray 50-900), updates Colors.stories.tsx to mirror every token 1:1, and normalizes a stray hex case mismatch in tailwind.config.ts / ContextMenu stories. Note: this changes the hex value of several pre-existing steps (not just additive new ones), which is a visual breaking change for any consumer already using the affected Tailwind classes. Flagging for the release: no automatic semver bump is enforced by CI (publish.yml takes the version straight from the GitHub Release tag), so please consider at least a MINOR bump when cutting the release. Known contrast regressions introduced by the new values (WCAG AA, computed from the actual token hex pairs): - Badge color="purple" (bg-purple-300 + text-purple-800): 8.28:1 -> 4.03:1 (fails AA) - Snackbar severity="success" (white text on bg-green-600): 4.66:1 -> 3.30:1 (fails AA) Pre-existing, not introduced here: Snackbar severity="warning" already failed AA before this change (1.73:1) and still does (2.94:1).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Fernando Jesus (fernandorjesus)
marked this pull request as ready for review
July 17, 2026 15:16
Fernando Jesus (fernandorjesus)
requested review from
Igor Salviatto (igorsalbr) and
Mateus Veloso (mateusveloso)
and removed request for
a team
July 17, 2026 15:16
Cristiano Júnior (cristiano-lastro)
approved these changes
Jul 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
purple/gray/blue/green/yellow/redcolor scales insrc/styles/tokens.csswith fuller step ranges (e.g.purple-50throughpurple-950,gray-50throughgray-900).Colors.stories.tsxto mirror every token 1:1 (verified with a diff betweentokens.css--color-*vars and the story'scssVarreferences — zero missing, zero stale).tailwind.config.tsandContextMenu.stories.tsx(#49317A→#49317a, same value).This is not purely additive — several pre-existing steps changed hex value, not just new steps being added (e.g.
purple-500#9664fa→#7e56c9,gray-900#323232→#1a1a2e,blue-600#0068b3→#1d6bb5). Onlypurple-800/900/600,white, andblackkept their values. ~59 of ~90 components insrc/components/uiuse at least one class whose hex changed — this affects the visual appearance of already-published components in every consumer app (casa-da-lais,casa-da-lais-atendente,chat-module) without any prop/API change.Versioning:
publish.ymltakes the published version straight from the GitHub Release tag, not frompackage.json— there's no automatic semver enforcement. Please consider at least a MINOR bump when cutting the release, given the visual impact.Contrast findings (WCAG AA, computed from real token hex pairs used in source)
Badgecolor="purple"(bg-purple-300+text-purple-800): 8.28:1 → 4.03:1 — now fails AA (4.5:1 needed for normal text). Regression introduced by this change.Snackbarseverity="success"(white text onbg-green-600): 4.66:1 → 3.30:1 — now fails AA. Regression introduced by this change.Snackbarseverity="warning"already failed AA before (1.73:1) and still does (2.94:1).Alert/Toaster/Badgesuccess/info/warning/danger with-50bg +-800text) remain comfortable (6.6–8.2:1).No automated test/CI covers color contrast in this repo (no
jest-axe, no Storybookaddon-a11y), so these were computed manually via the WCAG relative-luminance formula, not caught by the pre-PR gate.Test plan
pnpm run type-check— cleanpnpm test— 81 suites / 2324 tests passedpnpm run build— succeedspnpm biome ci .— clean (1 pre-existing informational file-size notice onMenu.test.tsx, unrelated)purple-300/green-600to restore AA contrast forBadgepurple andSnackbarsuccess, or accept as a known tradeoff of the new palette