chore(devex): remove text-3000 color, replace with text-primary #31391
Conversation
📸 UI snapshots have been updated35 snapshot changes in total. 0 added, 35 modified, 0 deleted:
Triggered by this commit. |
There was a problem hiding this comment.
PR Summary
This PR replaces instances of text-3000 color variable with text-primary across the codebase to improve color contrast and accessibility by reducing the number of color variables used.
- Removes deprecated color variables (
text-3000-light,text-3000-dark,muted-3000-light) fromtailwind.config.jsandvars.scss - Updates text color in navigation components (TopBar, KeyboardShortcut, Navigation) to use
--text-primaryfor better contrast - Modifies Lemon UI components (LemonButton, LemonInput, LemonTag, etc.) to use standardized
text-primarycolor variable - Changes text color in data visualization components (FunnelBarHorizontal, RetentionTable, HeatMapCell) to ensure proper contrast based on background saturation
- Updates toolbar and modal components to use consistent
text-primarycolor for better accessibility
62 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile
| @@ -37,7 +37,7 @@ export const ActionResult = ({ result, focused }: SearchResultProps): JSX.Elemen | |||
| > | |||
| <div className="px-2 py-3 w-full gap-y-0.5 flex items-center"> | |||
| <result.icon className="text-muted-3000" /> | |||
There was a problem hiding this comment.
style: text-muted-3000 class is still being used here while other -3000 classes are being replaced. Consider if this should also be updated for consistency
| color: #fff; | ||
| background-color: var(--text-3000); | ||
| background-color: var(--text-primary); |
There was a problem hiding this comment.
style: The white text color is hardcoded to #fff rather than using a CSS variable. Consider using var(--text-inverted) for consistency with the design system.
| @@ -942,7 +939,6 @@ | |||
| --color-graph-crosshair: var(--primitive-neutral-cool-650); | |||
|
|
|||
| // Deprecated colors (Dark mode) | |||
| --text-3000: var(--text-3000-dark); | |||
| --text-secondary-3000: var(--text-secondary-3000-dark); | |||
There was a problem hiding this comment.
logic: This line references a removed variable --text-3000-dark which will cause undefined variable errors
📸 UI snapshots have been updated6 snapshot changes in total. 0 added, 6 modified, 0 deleted:
Triggered by this commit. |
|
Size Change: -64 B (0%) Total Size: 13.6 MB ℹ️ View Unchanged
|
Problem
Part of the "reduce colors" initiative, which moves the needle to a more controlled color space (better contrast, aka a11y)
Changes
Replace all instances of the classes/vars
text-3000withtext-primarywhere applicable.How did you test this code?
Storybook, tested components that changes