chore: design system colour tokens, primitives & Storybook#6883
Open
talissoncosta wants to merge 46 commits intomainfrom
Open
chore: design system colour tokens, primitives & Storybook#6883talissoncosta wants to merge 46 commits intomainfrom
talissoncosta wants to merge 46 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.33% 98.33%
=======================================
Files 1337 1337
Lines 50010 50010
=======================================
Hits 49178 49178
Misses 832 832 ☔ 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
Add webpack.DefinePlugin with E2E: false to Storybook config. The Switch component references a global E2E variable (set in polyfil.js at runtime) which is undefined in Storybook's context. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Interactive default story and states overview (off, on, disabled). Uses the real Switch component from the codebase. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Reusable composition of Switch + title + description, matching the existing Setting.tsx layout. Uses semantic tokens for colours, BEM for styling. Developers import it without worrying about spacing, colours, or dark mode. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Stories for the SettingRow component under Patterns/Setting: - Default (interactive playground) - Prevent flag defaults (existing setting) - Require feature ownership (proposed #4432) - Settings group (multiple settings stacked) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Connect Switch to title/description via aria-labelledby and aria-describedby. Uses useRef with module counter instead of useId() (React 18+). TODO to replace after React 19 migration. Also spreads HTMLAttributes for data-test and other HTML props. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Move description below the switch+title row (matches old Setting) - Bump description font-size to 14px (matches fs-small) - Add header wrapper for switch + title alignment Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add project setting toggle using the new SettingRow pattern component. When enabled, users must assign at least one owner when creating a feature flag. - Add require_feature_owners to Project type and UpdateProjectBody - Create RequireFeatureOwnershipSetting using SettingRow - Add to Additional Settings section Note: backend field does not exist yet — frontend is ready for when the API adds the require_feature_owners field to the Project model. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Generic Skeleton component wrapping the existing .skeleton CSS classes. Three variants: text (default), badge (pill), circle (avatar/icon). Stories include: - Interactive playground with controls - All variants with descriptions - When to use / when not to use guidance - Composition examples (feature row, settings section) - Dark mode and prefers-reduced-motion notes Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add docs-theme.scss with overrides for Storybook's built-in docs renderer which doesn't respond to our theme toggle. Covers: Light mode: - Fix invisible inline code text colour Dark mode: - Page background and text colour - Headings, paragraphs, list items - Inline code and fenced code blocks with dark backgrounds - Table rows, headers, and alternating row backgrounds - Copy button in code blocks - Horizontal rules and borders Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Separate docs page explaining what skeletons are, when to use them, how the shimmer animation works (dark mode, reduced motion), variant reference table, composition examples, and best practices. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dark mode is verified by toggling the theme in the toolbar — a dedicated story for it is unnecessary. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…, and proposed components Three stories under Design System/Typography: - Current scale: headings, body sizes, and font weights with usage counts - Known issues: h5 overuse (64x), 49 inline font sizes, no weight tokens, fragmented naming - Proposed components: <Heading> and <Text> with size/weight/colour props and polymorphic `as` prop for semantic HTML This is documentation only — no new components or code changes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…dard size issue - Add 'Non-standard sizes' to known issues (11px, 13px are off-grid) - Add proposed base-4 type scale table (12, 14, 16, 18, 24, 30) aligned with industry standards (shadcn, Radix, Atlassian, Carbon) - Update <Text> component proposal to use 12px/14px instead of 13px - Each proposed token maps to what it replaces Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Four pages under Presentation/ section in Storybook sidebar: 1. Audit Findings — P0/P1/P2 breakdown, findings tables, momentum 2. Competitor Comparison — LaunchDarkly/PostHog/Unleash side-by-side 3. Roadmap — committed work, timeline, future direction 4. The Ask — what we need, definition of success, punchline These are presentation-specific and should be removed before merging. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Three stories introducing the team to Chromatic and MCP: - What is Chromatic: publishing, visual regression, review workflow - What is Storybook MCP: how AI reads component metadata, what it sees - What this enables: before/after table, virtuous cycle diagram, setup Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Two stories addressing expected pushback: - Maintenance model: who does what, when, and what doesn't change - Common questions: 6 FAQ cards covering slowdown concerns, adoption, over-engineering, bottleneck prevention, backend engineer experience, and the cost of inaction Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Four benefits that come automatically with every story: - Visual regression testing (Chromatic) - Accessibility audit (axe-core via a11y addon) - Living documentation - AI context via MCP Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Move the four free benefits (visual regression, a11y audit, living docs, AI context via MCP) from the Maintenance story into its own sidebar item for easier navigation during the presentation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…arison - Reframe 'Competitor Comparison' as 'Industry Validation' with 'Where we already are' section showing Flagsmith's progress - Reorder: Chromatic & MCP moves before Roadmap and The Ask so the live demo lands right after explaining MCP - New flow: Audit → Validation → Chromatic/MCP → DEMO → Roadmap → Ask → FAQ Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Storybook forces rendering in isolation — if a component can't render without the full app, it's too coupled. We already found this with Setting, Tabs, and CategoricalPalette which imported the Redux store transitively and couldn't render in Storybook. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Changed '5 purples' to '5 different shades of our brand purple scattered across the codebase' for clarity. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- P0: 3 parallel theming mechanisms (.dark, getDarkMode, data-bs-theme) that semantic tokens will unify - P1: 280+ hardcoded hex values in TSX not tied to any token - New Accessibility section: secondary text below WCAG AA, no a11y CI Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…y-changed Explain that Chromatic only runs on frontend changes (CI path filters) and skips unchanged stories (--only-changed flag) to minimise snapshot consumption. 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