Fix chart axis colours for dark mode#7087
Draft
talissoncosta wants to merge 7 commits intochore/design-system-tokensfrom
Draft
Fix chart axis colours for dark mode#7087talissoncosta wants to merge 7 commits intochore/design-system-tokensfrom
talissoncosta wants to merge 7 commits intochore/design-system-tokensfrom
Conversation
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
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