Fix chart axis colours for dark mode#7087
Draft
talissoncosta wants to merge 11 commits intochore/design-system-tokensfrom
Draft
Fix chart axis colours for dark mode#7087talissoncosta wants to merge 11 commits intochore/design-system-tokensfrom
talissoncosta wants to merge 11 commits intochore/design-system-tokensfrom
Conversation
Single source of truth: common/theme/tokens.json defines all 109 design tokens (41 colour + 68 non-colour) with values, dark mode overrides, and usage descriptions. Codegen script (scripts/generate-tokens.mjs) generates: - common/theme/tokens.ts — TypeScript exports - web/styles/_tokens.scss — CSS custom properties (:root + .dark) - documentation/TokenReference.generated.stories.tsx — flat JSX for MCP Token categories: - Colour: surface, text, border, icon (with light/dark variants) - Spacing: Tailwind naming convention (--space-1 = 4px, --space-4 = 16px) - Border radius: none through full (8 values) - Typography: headings h1-h6, body, caption, label, font weights - Elevation: 4 shadow levels with dark mode overrides - Motion: 3 durations + 3 easing curves Primitive colour palette (_primitives.scss) provides 7 families (slate, purple, red, green, gold, blue, orange) with 50-950 scales. lint-staged auto-runs codegen when tokens.json is committed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Set up Storybook 10 with webpack5, SWC compiler, and a11y addon. Chromatic CI workflow captures visual regression on every PR. Storybook UI respects OS colour scheme preference (light/dark). Chromatic modes capture every component story in both themes. Components with stories: - Banner — 4 variants (success, warning, danger, info) with CTA - Button — 7 themes, 4 sizes, disabled states, icon variants - Switch — on, off, disabled, controlled - Skeleton — text, badge, circle variants - SettingRow — pattern component using React 19 useId() - Icons — categorised searchable catalogue of all 61 icons New components: - Banner — variant-driven alert with semantic colour tokens - SettingRow — accessible settings toggle with ARIA labels - Skeleton — loading placeholder with reduced motion support - RequireFeatureOwnershipSetting — project setting (#4432) Shared Storybook utilities: - DocPage, ScaleRow, Swatch, TokenGroup helper components - docs.scss dogfooding 79 token references (spacing, colour, font, radius, motion) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Visual stories for each token category: - Palette — primitive colour scales (auto-generated from _primitives.scss) - Semantic Colour Tokens — runtime CSS var reading with theme toggle - Tag & Project Colours — categorical swatches - Spacing, Border Radius, Elevation, Motion — import from tokens.ts Token Reference (MCP) — auto-generated flat JSX with all 109 tokens inlined for Storybook MCP consumption by AI agents. All documentation stories have Chromatic snapshots disabled. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Introduction — welcome page with getting started guide - Decision Framework — where does a new colour go? + how to create a semantic token (HTML tables for MDX3 compat) - Token Maintenance — codegen workflow, adding/modifying/removing tokens - Typography — token reference for --font-* tokens (audit findings moved to Notion/Slides, issue #7077 for future components) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add _token-utilities.scss with utility classes consuming the design tokens for colours, borders, icons, radius, shadows, font weights, and transitions. These fill the gap Bootstrap doesn't cover — semantic surface colours, icon colours, border radius tokens, etc. Remove spacing tokens entirely — Bootstrap handles spacing via its existing utility classes. This avoids two competing sources of truth for the same concern. - Create web/styles/_token-utilities.scss (no !important, no spacing) - Remove space key from tokens.json - Update generate-tokens.mjs to skip spacing generation - Delete SpacingTokens.stories.tsx - Regenerate _tokens.scss, tokens.ts, and MCP reference story - Update TokenMaintenance.mdx and docs.scss Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add utility class generation to the codegen pipeline. When tokens.json changes, the pre-commit hook now generates _token-utilities.scss alongside _tokens.scss, tokens.ts, and the MCP reference story. Adding a new token to tokens.json automatically creates its utility class — no manual SCSS to write. - Add generateUtilities() to generate-tokens.mjs - Update lint-staged to auto-stage _token-utilities.scss - Update TokenMaintenance.mdx to document the 4-file pipeline Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace hardcoded hex colours in Recharts components with resolved semantic design tokens via useChartTheme hook. Fixes chart axis labels, grid lines, tick fills, and tooltip text being invisible or low contrast in dark mode. Also updates recharts tooltip SCSS to use CSS custom properties instead of .dark class overrides. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove experiment-specific winnerColour, rename variantColours to palette. Consumers pick from semantic colours directly (e.g. lineSuccess for winner). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Extract the duplicated tooltip pattern (colour swatch + readable text) into a reusable ChartTooltip component. Add CSS classes for tooltip swatch and Recharts default tooltip dark mode styling using semantic tokens. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Tooltip styling is now handled entirely via CSS classes targeting .recharts-tooltip and .recharts-default-tooltip, so the JS-resolved tooltip colour is no longer needed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace duplicated inline RechartsTooltip components in OrganisationUsage and SingleSDKLabelsChart, and replace Recharts default tooltips in FeatureAnalytics, UsageTrendsChart, and ExperimentResultsTab with the shared ChartTooltip. This gives all charts a consistent swatch + readable text tooltip pattern that works in both light and dark mode. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
bot
added
the
front-end
talissoncosta
force-pushed
the
chore/design-system-tokens
branch
3 times, most recently
from
c33def5 to
33e4dee
Compare
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
Closes #6889
Replace hardcoded hex colours in all Recharts chart components with semantic design tokens that adapt to light and dark mode.
What was done
useChartThemehook — resolves CSS custom property tokens (--color-text-*,--color-border-*) into values Recharts can use in SVGfill/strokeprops. Exposespalettearray for data series colouring.ChartTooltipcomponent — shared tooltip with colour swatch + readable text, replacing 2 duplicated inlineRechartsTooltipcomponents and 3 Recharts default tooltips..recharts-tooltip,.recharts-default-tooltip, and.recharts-tooltip-swatchclasses using CSS custom properties instead of.darkclass overrides.OrganisationUsage.container.tsx— tokens for grid, axis, ticks; shared tooltipSingleSDKLabelsChart.tsx— same; removed duplicate tooltipUsageTrendsChart.tsx— tokens for ticks and line strokes (info/success/warning)ExperimentResultsTab.tsx— tokens for all chart elements; variant colours frompaletteFeatureAnalytics.tsx— tokens for ticks, axis, tooltipBefore / After
#EFF1F4--color-border-default#656D7B/#1A2634--color-text-secondary#EFF1F4/#656D7B--color-border-default#0AADDF,#27AB95,#FF9F43--color-text-info/success/warning--color-surface-default--color-text-secondaryHow did you test this code?
ENV=local npm run dev🤖 Generated with Claude Code