fix: contrast for LemonButton type=primary status=danger #27194
+10
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: 0 B Total Size: 9.44 MB ℹ️ View Unchanged
|
|
Found an example in the wild of primary/danger: 
Removing authorized urls from data-managment/ toolbar |
Twixes
reviewed
Jan 3, 2025
There was a problem hiding this comment.
I liked the reverted earlier iteration of this improvement better: https://github.com/PostHog/posthog/pull/26821/files#diff-6b9ff2616e155dbc78346bd317a521087f520ddd7766cae0750e12c073564ac5
Can we go for that style?
|
@Twixes agreed, so does @corywatilo (note the darkmode primary danger) |
📸 UI snapshots have been updated5 snapshot changes in total. 0 added, 5 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
Primary danger button has a low contrast ratio in light and is basically broken in darkmode with a yellow background.
Although our engineers don't use this variant, there are some instances in the code where it occurs, and instead of changing those files, let's just fix from here.
Changes (top right button is changing)
Before Light (foreground: #F54E00, background: #FFFFFF = 3.51:1 contrast ratio)
Before Dark (foreground: #F54E00, background: #E0A045 = 1.55:1 contrast ratio)
After Light (foreground: #111111, background: #F8D7CD = 14.02:1 contrast ratio)
After Dark (foreground: #111111, background: #F1AF9C = 10.2:1 contrast ratio)
Does this work well for both Cloud and self-hosted?
N/A
How did you test this code?
Storybook