chore: design system colour tokens, primitives & Storybook#6883
Open
talissoncosta wants to merge 16 commits intomainfrom
Open
chore: design system colour tokens, primitives & Storybook#6883talissoncosta wants to merge 16 commits intomainfrom
talissoncosta wants to merge 16 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
github-actions
bot
added
the
front-end
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6883 +/- ##
=======================================
Coverage 98.32% 98.32%
=======================================
Files 1335 1337 +2
Lines 49850 49910 +60
=======================================
+ Hits 49013 49073 +60
Misses 837 837 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
Author
|
Blocker: #6866 (Decouple Button from Redux store) should land before or alongside this PR — Button's dependency on |
This was referenced Mar 9, 2026
7 tasks
talissoncosta
force-pushed
the
chore/design-system-tokens
branch
from
42b4c1e to
87a4eae
Compare
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit in Settings → Usage.
Once credits are available, reopen this pull request to trigger a review.
Contributor
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
|
Introduce a structured colour system with primitive SCSS scales (_primitives.scss) and semantic CSS custom properties (_tokens.scss) with light/dark mode support. Align existing _variables.scss colour values to the new primitives. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Configure Storybook 8 with webpack5, SWC, SCSS support, and dark mode toggle. Add ColourPalette and SemanticTokens stories to visualise the design system. Include eslint-plugin-storybook and gitignore entries. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Run Chromatic on PRs that touch frontend files to catch visual regressions automatically. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Introduce Storybook as the frontend development hub with getting started instructions, story writing guidelines, and project structure overview. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Run Storybook automigrations and manually convert main.js to ESM (.mjs). Remove @storybook/blocks (consolidated into addon-docs), replace @storybook/addon-essentials with core equivalents, and update all Storybook packages to v10.2.17. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add manager.js with custom theme using our primitive palette colours, Flagsmith logo, and dark sidebar. Add manager-head.html to constrain logo size. Configure staticDirs to serve assets from web/. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Extend semantic token layer with surface-hover, surface-active, and hover/active states for danger, success, and warning feedback colours. Dark mode inverts to lighter steps. These are generic role-based tokens — no component-specific tokens needed. Refs #6904 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rewrite SemanticTokens story to read --color-* CSS custom properties from the DOM at render time instead of hardcoding values. Tokens are auto-discovered, grouped by prefix, and computed values update when toggling themes. Rewrite ColourPalette story to parse _primitives.scss via raw-loader at build time. Adding a new SCSS variable automatically adds a swatch. No more manual story updates when tokens or primitives change. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Fix <code> elements inheriting Storybook/Bootstrap colour overrides that made them invisible in light mode. Fix colour palette swatches wrapping to a second row by using flex layout instead of fixed widths. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Storybook 10 requires TypeScript >= 4.9 but the project uses 4.6.4. Add --legacy-peer-deps to npm ci to unblock CI until TypeScript is upgraded in a separate effort. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Revert the Storybook 8→10 upgrade and the --legacy-peer-deps CI workaround. SB10 requires TypeScript >= 4.9 but the project uses 4.6.4, causing 805 type errors on upgrade. Staying on SB8 avoids masking dependency issues with --legacy-peer-deps. The SB10 upgrade can be revisited alongside TypeScript 5.x (#6919). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Move repeated inline CSS from story files into stories/docs.scss and reusable components (DocPage, ScaleRow, TokenGroup) under stories/components/. Keeps stories focused on data logic. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove --legacy-peer-deps (unnecessary with SB8), enable draft PR gate, pin chromaui/action to v11. Add clarifying comment on no-deps useEffect in SemanticTokens story. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
talissoncosta
force-pushed
the
chore/design-system-tokens
branch
from
e3ea39b to
68f514c
Compare
- storybook: 8.6.18 → 10.3.3 - @storybook/react-webpack5: 8.6.18 → 10.3.3 - @storybook/addon-a11y: 8.6.18 → 10.3.3 - @storybook/addon-webpack5-compiler-swc: 1.0.6 → 4.0.2 - @storybook/addon-docs: added (MDX support, unbundled from essentials) - eslint-plugin-storybook: 0.12.0 → 10.3.3 - Removed @storybook/addon-essentials and @storybook/blocks (absorbed into core) The TS version blocker (4.6.4) has been resolved — TS is now 5.9.3. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- @storybook/manager-api → storybook/manager-api - @storybook/theming → storybook/theming - @storybook/react-webpack5 (types) → storybook - @storybook/blocks → @storybook/addon-docs/blocks - Remove addon-essentials from addons, add addon-docs explicitly - Silence Dart Sass slash-div deprecation in sass-loader Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Self-contained documentation folder, separate from application code. Easier to remove or extract into a dedicated design system repo later. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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
1 participant
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.
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
Contributes to #6606
Establishes the foundational colour architecture for the design system:
_primitives.scsswith full 50–950 tonal scales (Tailwind convention) for all 7 colour families. Existing hex anchors are locked — zero visual change to shipped UI._tokens.scsswith CSS custom properties organised by role (brand, surface, text, border, feedback) with light/dark mode variants. Wire intostyles.scss._variables.scssalpha values with correct primitive RGB bases._primitives.scss) and Semantic Tokens (auto-discovered from CSS custom properties).documentation/directory, separate from application code — easy to remove or extract into a dedicated design system repo later.CHROMATIC_PROJECT_TOKENsecret).How did you test this code?
npm run build-storybookbuilds without errorsENV=local npm run dev— app builds and renders identically (no visual regression)CHROMATIC_PROJECT_TOKENsecret to be added to the repo