Skip to content

fix(components): [DSYS-139] improve dark mode Alert warning colors #1910

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

Merged
cmwinters merged 2 commits into from
Jun 2, 2026
+10 −3
Merged

fix(components): [DSYS-139] improve dark mode Alert warning colors #1910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5d5a8cb
fix(components): improve dark mode Alert warning colors
cmwinters Jun 2, 2026
832835c
chore: remove PR screenshots from repo
cmwinters Jun 2, 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
5 changes: 5 additions & 0 deletions .changeset/alert-dark-warning-colors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@launchpad-ui/components': patch
---

Adjust dark mode Alert warning variant colors to read more yellow/gold and distinguish from error. Use theme-aware `--alert-color-icon-warning` token for the warning icon fill.
8 changes: 5 additions & 3 deletions packages/components/src/styles/Alert.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
--alert-color-bg-success: var(--lp-color-green-0);
--alert-color-border-warning: #fad88f;
--alert-color-bg-warning: #fdfae4;
--alert-color-icon-warning: var(--lp-color-brand-orange-base);
Copy link
Copy Markdown

@cursor cursor Bot Jun 2, 2026

Choose a reason for hiding this comment

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

Light mode warning icon color unintentionally changed

Medium Severity

The warning icon fill changed from #e65d00 (dark burnt orange, rgb(230, 93, 0)) to var(--lp-color-brand-orange-base) (rgb(255, 157, 41), a much lighter golden orange) in both light and dark mode. The PR intends to fix only dark mode colors, and the test plan item "Confirm light mode warning appearance is unchanged" is explicitly unchecked. The light-mode --alert-color-icon-warning definition could use the original #e65d00 (or an equivalent token) to preserve light-mode appearance, while only the dark-mode block uses the new value.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 5d5a8cb. Configure here.

Copy link
Copy Markdown
Contributor Author

@cmwinters cmwinters Jun 2, 2026

Choose a reason for hiding this comment

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

I think this is fine, it looks better:

CleanShot 2026-06-01 at 17 33 36@2x

Copy link
Copy Markdown

@cursor cursor Bot Jun 2, 2026

Choose a reason for hiding this comment

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

Primitive token used instead of semantic alias for icon

Low Severity

--alert-color-icon-warning uses the primitive token var(--lp-color-brand-orange-base), while the other alert icon variants use semantic aliases (--lp-color-fill-feedback-error, --lp-color-fill-feedback-info, --lp-color-fill-feedback-success). No --lp-color-fill-feedback-warning semantic alias exists in packages/tokens. Primitives carry no intent and bypass theming — the right fix per the design token rules is to add the missing alias in the tokens package and reference it here.

Additional Locations (1)
Fix in Cursor Fix in Web

Triggered by project rule: Bugbot Instructions — launchpad-ui

Reviewed by Cursor Bugbot for commit 5d5a8cb. Configure here.

Copy link
Copy Markdown
Contributor Author

@cmwinters cmwinters Jun 2, 2026

Choose a reason for hiding this comment

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

This is just a local fix for the Alert component. Will follow up to add a global --lp-color-fill-feedback-warning token per https://launchdarkly.atlassian.net/browse/DSYS-148?atlOrigin=eyJpIjoiMmIwMWViNTRjYWVlNDM2NGFkOGQ5OWViZTU1NTU3YTUiLCJwIjoiaiJ9

}
[data-theme='dark'] {
--alert-color-border-neutral: var(--lp-color-gray-800);
Expand All @@ -21,8 +22,9 @@
--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;
--alert-color-border-warning: #946020;
--alert-color-bg-warning: #34260e;
--alert-color-icon-warning: var(--lp-color-brand-orange-base);
}

/* Shared styles for both the block and inline variants */
Expand All @@ -46,7 +48,7 @@
}

&.warning .icon {
fill: #e65d00;
fill: var(--alert-color-icon-warning);
}
}

Expand Down
Loading