Skip to content

feat: Test new color tokens #1887

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nhironaka wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: Test new color tokens #1887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f4671eb
update with new tokens
nhironaka Apr 28, 2026
3be47fe
update *.module.css
nhironaka Apr 28, 2026
c664c42
update tokens
nhironaka Apr 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 49 additions & 47 deletions packages/button/src/styles/Button.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,66 +7,68 @@
--lp-component-button-color-bg-destructive-active: var(
--lp-color-bg-interactive-destructive-active
);
--lp-color-border-interactive-primary-flair-base: var(--lp-color-purple-500);
--lp-color-border-interactive-primary-flair-hover: var(--lp-color-purple-600);
--lp-color-border-interactive-primary-flair-focus: var(--lp-color-purple-800);
--lp-color-border-interactive-primary-flair-active: var(--lp-color-purple-800);
--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-purple-100);
--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-purple-300);
--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-purple-400);
--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-purple-400);
--lp-color-border-interactive-secondary-flair-base: var(--lp-color-purple-600);
--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-purple-700);
--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-purple-800);
--lp-color-border-interactive-secondary-flair-active: var(--lp-color-purple-800);
--lp-color-text-interactive-flair-base: var(--lp-color-purple-700);
--lp-color-text-interactive-flair-hover: var(--lp-color-purple-800);
--lp-color-text-interactive-flair-focus: var(--lp-color-purple-900);
--lp-color-text-interactive-flair-active: var(--lp-color-purple-900);
--lp-color-border-interactive-primary-flair-base: var(--lp-color-info-500);
--lp-color-border-interactive-primary-flair-hover: var(--lp-color-info-600);
--lp-color-border-interactive-primary-flair-focus: var(--lp-color-info-800);
--lp-color-border-interactive-primary-flair-active: var(--lp-color-info-800);
--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-info-100);
--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-info-300);
--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-info-400);
--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-info-400);
--lp-color-border-interactive-secondary-flair-base: var(--lp-color-info-600);
--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-info-700);
--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-info-800);
--lp-color-border-interactive-secondary-flair-active: var(--lp-color-info-800);
--lp-color-text-interactive-flair-base: var(--lp-color-info-700);
--lp-color-text-interactive-flair-hover: var(--lp-color-info-800);
--lp-color-text-interactive-flair-focus: var(--lp-color-info-800);
--lp-color-text-interactive-flair-active: var(--lp-color-info-800);
--lp-color-bg-interactive-tertiary-flair-base: transparent;
--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-purple-100);
--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-purple-300);
--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-purple-300);
--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-info-100);
--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-info-300);
--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-info-300);
}

[data-theme='dark'] {
--lp-component-button-color-bg-default: transparent;
--lp-component-button-color-border-destructive: var(--lp-color-red-600);
--lp-component-button-color-bg-destructive-hover: var(--lp-color-red-900);
--lp-component-button-color-bg-destructive-focus: var(--lp-color-red-900);
--lp-component-button-color-bg-destructive-active: var(--lp-color-red-900);
--lp-color-border-interactive-primary-flair-base: var(--lp-color-purple-600);
--lp-color-border-interactive-primary-flair-hover: var(--lp-color-purple-700);
--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-purple-950);
--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-purple-900);
--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-purple-950);
--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-purple-950);
--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-purple-500);
--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-purple-700);
--lp-color-border-interactive-secondary-flair-active: var(--lp-color-purple-700);
--lp-color-text-interactive-flair-base: var(--lp-color-purple-400);
--lp-color-text-interactive-flair-hover: var(--lp-color-purple-400);
--lp-color-text-interactive-flair-focus: var(--lp-color-purple-400);
--lp-color-text-interactive-flair-active: var(--lp-color-purple-400);
--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-purple-900);
--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-purple-950);
--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-purple-950);
--lp-component-button-color-border-destructive: var(--lp-color-border-interactive-destructive);
--lp-component-button-color-bg-destructive-hover: var(--lp-color-bg-interactive-destructive-hover);
--lp-component-button-color-bg-destructive-focus: var(--lp-color-bg-interactive-destructive-focus);
--lp-component-button-color-bg-destructive-active: var(
--lp-color-bg-interactive-destructive-active
);
--lp-color-border-interactive-primary-flair-base: var(--lp-color-info-600);
--lp-color-border-interactive-primary-flair-hover: var(--lp-color-info-700);
--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-info-800);
--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-info-800);
--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-info-800);
--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-info-800);
--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-info-500);
--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-info-700);
--lp-color-border-interactive-secondary-flair-active: var(--lp-color-info-700);
--lp-color-text-interactive-flair-base: var(--lp-color-info-400);
--lp-color-text-interactive-flair-hover: var(--lp-color-info-400);
--lp-color-text-interactive-flair-focus: var(--lp-color-info-400);
--lp-color-text-interactive-flair-active: var(--lp-color-info-400);
--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-info-800);
--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-info-800);
--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-info-800);
Comment on lines +42 to +55
Copy link
Copy Markdown
Contributor

@devin-ai-integration devin-ai-integration Bot Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔴 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.
Open in Devin Review

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

}

.Button,
.ButtonGroup {
/* Remaining Legacy Tokens */
--Button-border-default: 1px solid transparent;
--Button-box-shadow-default-active: none;
--Button-color-boxShadow-1-default-active: var(--lp-color-white-950);
--Button-color-boxShadow-1-default-active: var(--lp-color-neutral-0);
--Button-color-boxShadow-2-default-active: hsl(231.5 100% 62.5% / 0.1);
--Button-color-boxShadow-1-default-withIcon-focus: var(--lp-color-shadow-interactive-focus);
--Button-color-boxShadow-2-default-withIcon-focus: hsl(231.5 100% 62.5% / 0.1);
--Button-box-shadow-withIcon-focus: 0 0 0 1px
var(--Button-color-boxShadow-1-default-withIcon-focus), 0 0 0 4px
var(--Button-color-boxShadow-2-default-withIcon-focus);
--Button-color-text-destructive-focus: var(--lp-color-white-950);
--Button-color-background-disabled-withIcon: var(--lp-color-white-950);
--Button-color-text-destructive-focus: var(--lp-color-neutral-0);
--Button-color-background-disabled-withIcon: var(--lp-color-neutral-0);
--Button-color-border-disabled-withIcon: transparent;

/* End Remaining Legacy Tokens */
Expand Down Expand Up @@ -204,8 +206,8 @@
--Button-icon-color-fill-disabled-active: var(--lp-color-text-interactive-disabled);

/* SEARCH BAR CLEAR BUTTON ICON */
--Button-icon-clear-color-fill: var(--lp-color-blue-700);
--Button-icon-clear-color-text: var(--lp-color-blue-700);
--Button-icon-clear-color-fill: var(--lp-color-action-700);
--Button-icon-clear-color-text: var(--lp-color-action-700);

/* ------- PRIMARY FLAIR ------- */
--Button-color-border-primary-flair: var(--lp-color-border-interactive-primary-flair-base);
Expand Down Expand Up @@ -447,7 +449,7 @@

.Button.Button--close {
background-color: transparent;
fill: var(--lp-color-gray-700);
fill: var(--lp-color-neutral-700);
color: var(--lp-color-text-ui-primary-base);
}

Expand All @@ -472,9 +474,9 @@
.Button.Button--close:active {
background-color: hsl(0 0% 12.9% / 0.7);
box-shadow:
0 0 0 1px var(--lp-color-gray-950),
0 0 0 1px var(--lp-color-neutral-800),
0 0 0 4px hsl(0 0% 12.9% / 0.1);
color: var(--lp-color-white-950);
color: var(--lp-color-fill-interactive-primary);
}

/* ------- DESTRUCTIVE ------- */
Expand Down
47 changes: 10 additions & 37 deletions packages/components/src/styles/Alert.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,3 @@
/* Temporary color aliases for Alerts. This block should be removed when the new color system is implemented. */
:root,
[data-theme='default'] {
--alert-color-border-neutral: var(--lp-color-gray-200);
--alert-color-bg-neutral: var(--lp-color-gray-0);
--alert-color-border-error: var(--lp-color-red-200);
--alert-color-bg-error: var(--lp-color-red-0);
--alert-color-border-info: var(--lp-color-blue-200);
--alert-color-bg-info: var(--lp-color-blue-0);
--alert-color-border-success: var(--lp-color-green-200);
--alert-color-bg-success: var(--lp-color-green-0);
--alert-color-border-warning: #fad88f;
--alert-color-bg-warning: #fdfae4;
}
[data-theme='dark'] {
--alert-color-border-neutral: var(--lp-color-gray-800);
--alert-color-bg-neutral: var(--lp-color-gray-900);
--alert-color-border-error: var(--lp-color-red-700);
--alert-color-bg-error: #391620;
--alert-color-border-info: var(--lp-color-blue-700);
--alert-color-bg-info: #192142;
--alert-color-border-success: var(--lp-color-green-700);
--alert-color-bg-success: #14260d;
--alert-color-border-warning: #932c00;
--alert-color-bg-warning: #3c170c;
}

/* Shared styles for both the block and inline variants */
.base {
display: flex;
Expand Down Expand Up @@ -54,30 +27,30 @@
.default {
/* Add a base layer of padding on the Alert itself. This is just enough to create some breathing room in case any buttons are present. */
padding: var(--lp-spacing-300) var(--lp-spacing-300) var(--lp-spacing-300) var(--lp-spacing-500);
background-color: var(--alert-color-bg-neutral);
border: 1px solid var(--alert-color-border-neutral);
background-color: var(--lp-color-bg-ui-primary);
border: 1px solid var(--lp-color-border-ui-primary);
position: relative;
min-height: var(--lp-size-48);

/* Status borders and background colors */
&.error {
border-color: var(--alert-color-border-error);
background-color: var(--alert-color-bg-error);
border-color: var(--lp-color-negative-300);
background-color: var(--lp-color-bg-feedback-error);
}

&.info {
border-color: var(--alert-color-border-info);
background-color: var(--alert-color-bg-info);
border-color: var(--lp-color-action-300);
background-color: var(--lp-color-bg-feedback-info);
}

&.success {
border-color: var(--alert-color-border-success);
background-color: var(--alert-color-bg-success);
border-color: var(--lp-color-positive-300);
background-color: var(--lp-color-bg-feedback-success);
}

&.warning {
border-color: var(--alert-color-border-warning);
background-color: var(--alert-color-bg-warning);
border-color: var(--lp-color-warning-300);
background-color: var(--lp-color-warning-50);
}

& .icon {
Expand Down
7 changes: 4 additions & 3 deletions packages/components/src/styles/Avatar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
}

.blue {
background-color: var(--lp-color-blue-600);
background-color: var(--lp-color-brand-blue-base);
}

.pink {
Expand All @@ -40,11 +40,12 @@
}

.purple {
background-color: var(--lp-color-purple-600);
background-color: var(--lp-color-brand-purple-base);
}

.text {
fill: var(--lp-color-white-950);
/* brand backgrounds are theme-constant; text must be too */
fill: white;
text-anchor: middle;
dominant-baseline: central;
}
2 changes: 1 addition & 1 deletion packages/components/src/styles/Code.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
border-radius: var(--lp-border-radius-regular);
color: var(--lp-color-text-code-string);
width: fit-content;
background-color: var(--lp-color-bg-ui-tertiary);
background-color: var(--lp-color-bg-ui-secondary);
padding: var(--lp-spacing-100) var(--lp-spacing-200);
display: inline-flex;
border: none;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/styles/Modal.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@
inset: 0;
width: 100vw;
height: var(--visual-viewport-height);
background: var(--lp-color-black-500);
background: rgb(7 8 12 / 0.5);
backdrop-filter: blur(1px);
display: flex;
align-items: center;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/styles/ProgressBar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
}

.spinner {
--fill-color: var(--lp-color-gray-500);
--fill-color: var(--lp-color-neutral-500);
display: inline-flex;
}

Expand All @@ -27,7 +27,7 @@
}

.outerCircle {
stroke: var(--lp-color-white-100);
stroke: rgb(255 255 255 / 0.15);
}

.innerCircle {
Expand Down
35 changes: 22 additions & 13 deletions packages/components/src/styles/Switch.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,18 @@
:root,
[data-theme='default'] {
--switch-handle-shadow: 0 0 1px 0 rgb(33 33 33 / 0.75), 0 0 2px 0 rgb(33 33 33 / 0.75), 0 0 1px 0
rgb(33 33 33 / 0.35);
--switch-handle-shadow-selected: 0 0 1px 0 rgb(0 117 66 / 0.75), 0 0 2px 0 rgb(0 117 66 / 0.06), 0
0 1px 0 rgb(0 117 66 / 0.35);
}

[data-theme='dark'] {
--switch-handle-shadow: 0 0 1px 0 rgb(0 0 0 / 0.5), 0 0 2px 0 rgb(0 0 0 / 0.4), 0 0 1px 0
rgb(0 0 0 / 0.25);
--switch-handle-shadow-selected: 0 0 1px 0 rgb(0 0 0 / 0.4), 0 0 2px 0 rgb(0 0 0 / 0.2), 0 0 1px 0
rgb(0 0 0 / 0.15);
}

.switch {
composes: interactive from './base.module.css';
display: flex;
Expand Down Expand Up @@ -26,14 +41,11 @@

.handle {
display: block;
background-color: var(--lp-color-white-950);
background-color: var(--lp-color-fill-interactive-primary);
width: var(--lp-size-16);
height: var(--lp-size-16);
border-radius: var(--lp-border-radius-large);
box-shadow:
0 0 1px 0 rgb(33 33 33 / 0.75),
0 0 2px 0 rgb(33 33 33 / 0.75),
0 0 1px 0 rgb(33 33 33 / 0.35);
box-shadow: var(--switch-handle-shadow);
transition: transform var(--lp-duration-200) ease-in-out;
transform: translateX(0%);
z-index: 1;
Expand All @@ -48,28 +60,25 @@

.switch[data-focus-visible] {
& .track {
outline: 2px solid var(--lp-color-shadow-interactive-focus);
outline: 2px solid var(--lp-color-border-interactive-focus);
outline-offset: -2px;
z-index: 1;
}
}

.switch[data-selected] {
& .track {
background-color: var(--lp-color-green-500);
border: 1px solid var(--lp-color-green-600);
background-color: var(--lp-color-positive-500);
border: 1px solid var(--lp-color-positive-600);
}

& .handle {
transform: translateX(calc(100% + var(--lp-spacing-400)));
box-shadow:
0 0 1px 0 rgb(0 117 66 / 0.75),
0 0 2px 0 rgb(0 117 66 / 0.06),
0 0 1px 0 rgb(0 117 66 / 0.35);
box-shadow: var(--switch-handle-shadow-selected);
}

& .label {
color: var(--lp-color-white-950);
color: var(--lp-color-text-interactive-primary-base);
left: var(--lp-spacing-300);
text-shadow: 0 0 1px rgb(40 40 40 / 0.7);
}
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/styles/Tooltip.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@
}

& kbd {
color: var(--lp-color-gray-100);
background-color: var(--lp-color-gray-900);
border: 1px solid var(--lp-color-gray-700);
box-shadow: inset 0 -1px 0 var(--lp-color-gray-700);
color: var(--lp-color-neutral-100);
background-color: var(--lp-color-neutral-800);
border: 1px solid var(--lp-color-neutral-700);
box-shadow: inset 0 -1px 0 var(--lp-color-neutral-700);
}
}
2 changes: 1 addition & 1 deletion packages/drawer/src/styles/Drawer.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
}

.content section + section {
border-top: 1px dotted var(--lp-color-gray-100);
border-top: 1px dotted var(--lp-color-neutral-100);
}

.closeButton {
Expand Down
4 changes: 2 additions & 2 deletions packages/filter/src/styles/Filter.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
[data-theme='default'] {
--lp-component-filter-color-bg-clearable: rgb(0 0 0 / 0.15);
--lp-component-filter-color-bg-clearable-focus: rgb(0 0 0 / 0.2);
--lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-800);
--lp-component-filter-color-border-clearable-focus: var(--lp-color-neutral-800);
}

[data-theme='dark'] {
--lp-component-filter-color-bg-clearable: rgb(248 248 248 / 0.15);
--lp-component-filter-color-bg-clearable-focus: rgb(248 248 248 / 0.2);
--lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-500);
--lp-component-filter-color-border-clearable-focus: var(--lp-color-neutral-500);
}

.filter {
Expand Down
Loading
Loading