Conversation
|
nhironaka
force-pushed
the
nhironaka/new_color_tokens
branch
from
e286ca8 to
e332956
Compare
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
nhironaka
force-pushed
the
nhironaka/new_color_tokens
branch
from
e332956 to
72c583a
Compare
commit: |
| "black": { | ||
| "0": { "$value": "{color.neutral.0}" }, | ||
| "50": { "$value": "{color.neutral.50}" }, | ||
| "100": { "$value": "{color.neutral.100}" }, | ||
| "200": { "$value": "{color.neutral.200}" }, | ||
| "300": { "$value": "{color.neutral.300}" }, | ||
| "400": { "$value": "{color.neutral.400}" }, | ||
| "500": { "$value": "{color.neutral.500}" }, | ||
| "600": { "$value": "{color.neutral.600}" }, | ||
| "700": { "$value": "{color.neutral.700}" }, | ||
| "800": { "$value": "{color.neutral.800}" }, | ||
| "900": { "$value": "{color.neutral.800}" }, | ||
| "950": { "$value": "{color.neutral.800}" } |
There was a problem hiding this comment.
🔴 Mapping color.black.* to opaque color.neutral.* destroys shadow transparency
The color.black tokens were originally semi-transparent colors (e.g., black.0 = #07080C0D at ~5% opacity, black.50 = #07080C1A at ~10% opacity — see packages/tokens/old_tokens/color-primitives.default.json:201-237). The new color-primitives-map.json maps all black.* entries to {color.neutral.*}, which are fully opaque colors (neutral.0 = oklch(1 0 103.861) is pure white, neutral.50 = oklch(0.97 ...) is opaque near-white).
This breaks the shadow alias tokens that still reference color.black.*:
- Default theme (
color-aliases.default.json:278):color.shadow.ui.primary={color.black.50}→ now resolves to opaque near-white instead of 10% opacity near-black - Default theme (
color-aliases.default.json:281):color.shadow.ui.secondary={color.black.0}→ now resolves to pure white instead of 5% opacity near-black - Dark theme (
color-aliases.dark.json:164,167): similarly broken withcolor.black.200andcolor.black.100
These shadow colors are consumed by the new packages/tokens/tokens/shadow.json for all shadow definitions, meaning every shadow in the design system will be visually broken.
Prompt for agents
The black token mapping in color-primitives-map.json maps all black.* entries to color.neutral.* entries, but the old black tokens were semi-transparent colors (e.g. black.0 was #07080C0D which is near-black at 5% opacity). The neutral tokens are fully opaque, so this mapping completely changes the semantics.
The shadow alias tokens in color-aliases.default.json (lines 278, 281) and color-aliases.dark.json (lines 164, 167) still reference color.black.* for shadow colors. With the current mapping, shadows resolve to opaque light grays or whites instead of semi-transparent blacks.
Two possible fixes:
1. Either update the black mappings in color-primitives-map.json to preserve the original semi-transparent hex values (e.g. black.0 should remain #07080C0D, black.50 should remain #07080C1A, etc.) instead of pointing to neutral tokens.
2. Or update the shadow alias tokens in both color-aliases.default.json and color-aliases.dark.json to use the correct new values directly rather than going through the broken color.black mapping.
Was this helpful? React with 👍 or 👎 to provide feedback.
| "white": { | ||
| "0": { "$value": "{color.neutral.0}" }, | ||
| "50": { "$value": "{color.neutral.50}" }, | ||
| "100": { "$value": "{color.neutral.100}" }, | ||
| "200": { "$value": "{color.neutral.200}" }, | ||
| "300": { "$value": "{color.neutral.300}" }, | ||
| "400": { "$value": "{color.neutral.400}" }, | ||
| "500": { "$value": "{color.neutral.500}" }, | ||
| "600": { "$value": "{color.neutral.600}" }, | ||
| "700": { "$value": "{color.neutral.700}" }, | ||
| "800": { "$value": "{color.neutral.800}" }, | ||
| "900": { "$value": "{color.neutral.800}" }, | ||
| "950": { "$value": "{color.neutral.800}" } |
There was a problem hiding this comment.
🔴 Mapping color.white.* to opaque color.neutral.* breaks gradient transparency overlay
Same root cause as the black mapping issue. The old white tokens were semi-transparent whites (e.g., white.50 = #FFFFFF1A at ~10% opacity — see packages/tokens/old_tokens/color-primitives.default.json:239-275). The map now sends white.* to {color.neutral.*}, which are fully opaque.
This breaks packages/tokens/tokens/gradient.json:11 which uses {color.white.50} as a semi-transparent overlay in the yellow-blue-pale gradient. Instead of a 10%-opacity white overlay revealing the gradient underneath, it will now be an opaque near-white that completely hides the gradient.
Prompt for agents
The white token mapping in color-primitives-map.json maps all white.* entries to color.neutral.* entries, but the old white tokens were semi-transparent colors (e.g. white.50 was #FFFFFF1A which is white at 10% opacity). The neutral tokens are fully opaque.
The gradient token in gradient.json line 11 uses {color.white.50} as a semi-transparent overlay in the yellow-blue-pale gradient. With the new mapping, this overlay becomes opaque, completely obscuring the gradient underneath.
Either preserve the original semi-transparent hex values for white entries in the mapping (e.g. white.50 should remain #FFFFFF1A) or update gradient.json to use the correct semi-transparent value directly.
Was this helpful? React with 👍 or 👎 to provide feedback.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 3 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 72c583a. Configure here.
|
|
||
|
|
||
|
|
||
| ELIFECYCLE Command failed with exit code 130. |
There was a problem hiding this comment.
Build failure output file accidentally committed
Medium Severity
output.txt at the repo root is a local build failure log that was accidentally committed. It contains a developer-specific local path (/Users/nhironaka/code/launchdarkly/launchpad-ui) and shows the @launchpad-ui/tokens:build target failing with exit code 130. This file isn't in .gitignore and doesn't belong in the repository.
Reviewed by Cursor Bugbot for commit 72c583a. Configure here.
| "800": { "$value": "{color.neutral.800}" }, | ||
| "900": { "$value": "{color.neutral.800}" }, | ||
| "950": { "$value": "{color.neutral.800}" } | ||
| }, |
There was a problem hiding this comment.
Black-to-neutral mapping breaks semi-transparent shadow colors
High Severity
The color.black.* tokens were semi-transparent dark overlays (e.g., color.black.50 was #07080C1A at ~10% opacity). The color-primitives-map.json maps black to {color.neutral.*}, which are fully opaque solid colors. Shadow alias tokens (shadow.ui.primary and shadow.ui.secondary) in both theme files still reference {color.black.*}, so they now resolve to opaque light/dark colors instead of semi-transparent overlays. This will completely break shadow rendering.
Additional Locations (2)
Reviewed by Cursor Bugbot for commit 72c583a. Configure here.
| "800": { "$value": "{color.neutral.800}" }, | ||
| "900": { "$value": "{color.neutral.800}" }, | ||
| "950": { "$value": "{color.neutral.800}" } | ||
| }, |
There was a problem hiding this comment.
White-to-neutral mapping breaks semi-transparent gradient overlay
Medium Severity
The color.white.* tokens were semi-transparent white overlays (e.g., color.white.50 was #FFFFFF1A at ~10% opacity). The map redirects white to {color.neutral.*}, which are fully opaque. gradient.json still references {color.white.50} in the yellow-blue-pale gradient, so the overlay layer will change from a barely-visible wash to an opaque near-white, dramatically altering the gradient appearance.
Reviewed by Cursor Bugbot for commit 72c583a. Configure here.
1 participant
Summary
Screenshots (if appropriate):
Testing approaches
Note
Medium Risk
Large update to design tokens that changes color primitives/aliases and adds new shadow tokens, which can cause widespread visual regressions in consuming components. Build input filtering/mapping changes could also affect generated CSS/JS/figma outputs if token references resolve differently.
Overview
Updates the token system to a new semantic color model:
color-primitives.*.jsonnow definesneutral/action/positive/negative/warning/infoscales (inoklch(...)), andcolor-aliases.*.jsonis rewired to reference these semantic scales instead of legacygray/blue/red/...primitives.Adds a compatibility layer via
tokens/color-primitives-map.jsonso legacy primitive names (e.g.gray,blue) can continue resolving, and adjusts Style Dictionary builds (src/build.ts,src/themes.ts) to include this map, exclude certain dark token sources from the main build, and emit verbose build logs.Introduces new token artifacts:
tokens/shadow.json(shadow elevations),tokens/color-tokens.json(flattened export of the new palettes), plus anold_tokens/snapshot of the previous color token JSON and a checked-inoutput.txtbuild log.Reviewed by Cursor Bugbot for commit 72c583a. Bugbot is set up for automated code reviews on this repo. Configure here.