feat: Test new color tokens

[nhironaka]

Summary

Screenshots (if appropriate):

Testing approaches

---

Note

Medium Risk
Broad, cross-cutting updates to core design tokens and theme generation may cause widespread visual regressions and token resolution issues across components, especially in dark mode.

Overview
Introduces a new semantic color token system built on OKLCH primitives (neutral, action, positive, negative, warning, info), plus mapping files (color-primitives-map.*.json) to keep legacy gray/blue/red/etc. names as aliases.

Updates the Style Dictionary build to preprocess OKLCH values into hex (convert-oklch), adjusts token sources/exclusions, enables verbose logging, and refreshes token snapshots/tests accordingly.

Migrates several component styles (Button, Alert, Switch, Tooltip, Modal, Navigation, etc.) from old gray/blue/purple/white token usage and temporary alert aliases to the new semantic/neutral/action tokens, which will change visual colors in both default and dark themes.

^{Reviewed by Cursor Bugbot for commit c664c42. Bugbot is set up for automated code reviews on this repo. Configure here.}

---

[changeset-bot]

⚠️ No Changeset found

Latest commit: c664c42

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[pkg-pr-new]

yarn add https://pkg.pr.new/@launchpad-ui/components@1887.tgz

yarn add https://pkg.pr.new/@launchpad-ui/icons@1887.tgz

yarn add https://pkg.pr.new/@launchpad-ui/tokens@1887.tgz

commit: c664c42

[cursor]

Modal dark theme background is near-white instead of dark

High Severity

The dark theme modal background changed from var(--lp-color-gray-950) (very dark, #181A1F) to var(--lp-color-neutral-800), which in dark mode resolves to oklch(0.956...) (near-white). This makes the modal content area appear almost white against the dark UI. The tooltip component correctly uses var(--lp-color-neutral-0) for its dark theme background (which is dark in dark mode), suggesting the modal should also use neutral-0 or a similarly low-numbered neutral token.

 

^{Reviewed by Cursor Bugbot for commit 4dd8162. Configure here.}

[cursor]

Badge icon fill is theme-variable on constant backgrounds

Medium Severity

The .yellow, .green, .gradient7 badge icon fill changed from theme-constant var(--lp-color-black-700) (always rgba(7,8,12,0.7)) to theme-variable var(--lp-color-neutral-700). In dark mode, neutral-700 resolves to a light color (oklch L=0.89), reducing contrast against the theme-constant brand backgrounds. The comment on lines 100–101 states "brand backgrounds are theme-constant; icon fill must be too" — the first group correctly uses a hardcoded rgb() value, but this group does not.

 

^{Reviewed by Cursor Bugbot for commit 2ff6c80. Configure here.}

[devin-ai-integration]

Devin Review found 6 new potential issues.

View 15 additional findings in Devin Review.

[devin-ai-integration]

🔴 Modal dark-mode background is near-white due to inverted neutral scale

In [data-theme='dark'], --lp-component-modal-color-bg-content is set to var(--lp-color-neutral-800). However, the new dark primitive scale inverts lightness: neutral-800 in dark mode is oklch(0.956 0.004 247.788) ≈ near-white (packages/tokens/tokens/color-primitives.dark.json:35-37). This means the modal dialog will have a near-white background in dark mode, completely breaking the dark theme. The old code used var(--lp-color-gray-950) which was always #181A1F (dark). The correct dark-mode token should be var(--lp-color-neutral-0) (which is oklch(0.218) = near-black in dark mode) or a semantic token like var(--lp-color-bg-ui-primary).

Suggested change

	--lp-component-modal-color-bg-content: var(--lp-color-neutral-800);
	--lp-component-modal-color-bg-content: var(--lp-color-neutral-0);

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

🔴 Button dark-mode flair backgrounds are near-white due to inverted info scale

In the [data-theme='dark'] block, all flair background tokens reference var(--lp-color-info-800) (e.g., --lp-color-bg-interactive-secondary-flair-base, --lp-color-bg-interactive-tertiary-flair-*). In dark mode, info-800 = oklch(0.96 0.026 316.814) ≈ near-white (packages/tokens/__tests__/__snapshots__/tokens.spec.ts.snap:74). The old code used var(--lp-color-purple-950) = #2E004D (dark purple) and var(--lp-color-purple-900) = #3C0262 (dark purple). Flair buttons in dark mode will now have near-white backgrounds instead of dark purple, completely breaking their appearance. These should use low-numbered info tokens (e.g., info-50, info-25) that are dark in dark mode.

Prompt for agents

The flair button dark-mode overrides in the [data-theme='dark'] block (lines 40-55) use high-numbered info tokens (info-600, info-700, info-800) which resolve to LIGHT values in dark mode because the new primitive scales invert lightness. In the dark theme: info-800 = oklch(0.96) ≈ near-white, info-700 = oklch(0.896) ≈ light. The old values were dark purples (purple-950 = #2E004D, purple-900 = #3C0262, etc.). These need to be replaced with low-numbered info/neutral tokens that remain dark in dark mode. For backgrounds, consider info-25 or info-50 (dark in dark mode). For borders, consider info-200 or info-300 (medium-dark in dark mode). The exact values should be validated against the design spec for dark-mode flair buttons.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

🔴 BadgeIcon yellow/green icon fill uses theme-dependent token on theme-constant background

The .yellow, .green, .gradient7 icon fill was changed from var(--lp-color-black-700) (theme-constant rgba(7,8,12,0.7)) to var(--lp-color-neutral-700) (theme-dependent). The backgrounds use theme-constant brand colors (e.g., --lp-color-brand-yellow-base at BadgeIcon.module.css:53). In dark mode, neutral-700 = oklch(0.89) ≈ light gray, producing a light icon on a bright yellow/green background with poor contrast. The adjacent code block for .blue/.purple/etc. correctly uses a hardcoded rgb(255 255 255 / 0.9) with the comment "brand backgrounds are theme-constant; icon fill must be too" — the same principle should apply here.

Suggested change

	fill: var(--lp-color-neutral-700);
	fill: rgb(7 8 12 / 0.7);

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 20 additional findings in Devin Review.

[devin-ai-integration]

🟡 Non-existent source file path in modes StyleDictionary config

The modes StyleDictionary instance at packages/tokens/src/build.ts:278 includes 'tokens/color-primitives-map.json' in its source array, but this file does not exist — only color-primitives-map.default.json and color-primitives-map.dark.json exist. The glob patterns tokens/*.${light}.json and tokens/*.${dark}.json already match these map files, so the non-existent path is redundant and likely a typo. Depending on how Style Dictionary handles non-existent literal paths, this could either fail silently or cause a build error for the Figma dark theme output.

Suggested change

	source: [`tokens/*.${light}.json`, `tokens/*.${dark}.json`, 'tokens/color-primitives-map.json'],
	source: [`tokens/*.${light}.json`, `tokens/*.${dark}.json`],

---

Was this helpful? React with 👍 or 👎 to provide feedback.