Improved button states for light HC #276
Merged
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
Adjusted default, hover, selected, focused and disabled states for all buttons. I might need to give it a second pass after testing live version. Also counters haven’t been updated yet.
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/primer/primitives/89w9vWwuypozGShdTfjFsWCRWRYF |
Variables changed--- base/dist/scss/colors/_light_high_contrast.scss 2021-11-23 12:51:10.750643450 +0000
+++ dist/scss/colors/_light_high_contrast.scss 2021-11-23 12:50:57.178604507 +0000
@@ -18,4 +18,4 @@
--color-diff-blob-selected-line-highlight-mix-blend-mode: multiply;
- --color-diffstat-deletion-border: rgba(1,4,9,0.9);
- --color-diffstat-addition-border: rgba(1,4,9,0.9);
+ --color-diffstat-deletion-border: rgba(1,4,9,0.8);
+ --color-diffstat-addition-border: rgba(1,4,9,0.8);
--color-diffstat-addition-bg: #117f32;
@@ -154,3 +154,3 @@
--color-avatar-bg: #ffffff;
- --color-avatar-border: rgba(1,4,9,0.9);
+ --color-avatar-border: rgba(1,4,9,0.8);
--color-avatar-stack-fade: #ACB6C0;
@@ -190,13 +190,13 @@
--color-btn-text: #24292F;
- --color-btn-bg: #FFFFFF;
- --color-btn-border: rgba(1,4,9,0.9);
+ --color-btn-bg: #E7ECF0;
+ --color-btn-border: rgba(1,4,9,0.8);
--color-btn-shadow: 0 1px 0 rgba(1,4,9,0.04);
--color-btn-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
- --color-btn-hover-bg: #f3f4f6;
- --color-btn-hover-border: rgba(1,4,9,0.9);
- --color-btn-active-bg: hsla(220,14%,93%,1);
- --color-btn-active-border: rgba(1,4,9,0.9);
- --color-btn-selected-bg: hsla(220,14%,94%,1);
- --color-btn-focus-bg: #FFFFFF;
- --color-btn-focus-border: rgba(1,4,9,0.9);
+ --color-btn-hover-bg: #CED5DC;
+ --color-btn-hover-border: rgba(1,4,9,0.8);
+ --color-btn-active-bg: #ACB6C0;
+ --color-btn-active-border: rgba(1,4,9,0.8);
+ --color-btn-selected-bg: #ACB6C0;
+ --color-btn-focus-bg: #CED5DC;
+ --color-btn-focus-border: rgba(1,4,9,0.8);
--color-btn-focus-shadow: 0 0 0 3px rgba(3,73,180,0.3);
@@ -206,9 +206,9 @@
--color-btn-primary-text: #ffffff;
- --color-btn-primary-bg: #117f32;
- --color-btn-primary-border: rgba(1,4,9,0.9);
+ --color-btn-primary-bg: #055d20;
+ --color-btn-primary-border: #013d14;
--color-btn-primary-shadow: 0 1px 0 rgba(1,4,9,0.1);
--color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
- --color-btn-primary-hover-bg: #2c974b;
- --color-btn-primary-hover-border: rgba(1,4,9,0.9);
- --color-btn-primary-selected-bg: hsla(137,55%,36%,1);
+ --color-btn-primary-hover-bg: #024c1a;
+ --color-btn-primary-hover-border: #013d14;
+ --color-btn-primary-selected-bg: hsla(139,95%,13%,1);
--color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0,35,11,0.2);
@@ -216,12 +216,12 @@
--color-btn-primary-disabled-bg: #94d3a2;
- --color-btn-primary-disabled-border: rgba(1,4,9,0.9);
- --color-btn-primary-focus-bg: #117f32;
- --color-btn-primary-focus-border: rgba(1,4,9,0.9);
- --color-btn-primary-focus-shadow: 0 0 0 3px rgba(17,127,50,0.4);
+ --color-btn-primary-disabled-border: rgba(1,4,9,0.8);
+ --color-btn-primary-focus-bg: #013d14;
+ --color-btn-primary-focus-border: #013d14;
+ --color-btn-primary-focus-shadow: 0 0 0 3px rgba(1,61,20,0.4);
--color-btn-primary-icon: rgba(255,255,255,0.8);
--color-btn-primary-counter-bg: rgba(255,255,255,0.2);
- --color-btn-outline-text: #0349b4;
+ --color-btn-outline-text: #023b95;
--color-btn-outline-hover-text: #ffffff;
--color-btn-outline-hover-bg: #0349b4;
- --color-btn-outline-hover-border: rgba(1,4,9,0.9);
+ --color-btn-outline-hover-border: #022f7a;
--color-btn-outline-hover-shadow: 0 1px 0 rgba(1,4,9,0.1);
@@ -230,15 +230,15 @@
--color-btn-outline-selected-text: #ffffff;
- --color-btn-outline-selected-bg: hsla(216,97%,33%,1);
- --color-btn-outline-selected-border: rgba(1,4,9,0.9);
+ --color-btn-outline-selected-bg: #022f7a;
+ --color-btn-outline-selected-border: #022f7a;
--color-btn-outline-selected-shadow: inset 0 1px 0 rgba(2,26,74,0.2);
--color-btn-outline-disabled-text: rgba(3,73,180,0.5);
- --color-btn-outline-disabled-bg: #FFFFFF;
+ --color-btn-outline-disabled-bg: #E7ECF0;
--color-btn-outline-disabled-counter-bg: rgba(3,73,180,0.05);
- --color-btn-outline-focus-border: rgba(1,4,9,0.9);
+ --color-btn-outline-focus-border: #022f7a;
--color-btn-outline-focus-shadow: 0 0 0 3px rgba(2,59,149,0.4);
--color-btn-outline-counter-bg: rgba(3,73,180,0.1);
- --color-btn-danger-text: #a0111f;
+ --color-btn-danger-text: #86061d;
--color-btn-danger-hover-text: #ffffff;
- --color-btn-danger-hover-bg: #86061d;
- --color-btn-danger-hover-border: rgba(1,4,9,0.9);
+ --color-btn-danger-hover-bg: #a0111f;
+ --color-btn-danger-hover-border: #6e011a;
--color-btn-danger-hover-shadow: 0 1px 0 rgba(1,4,9,0.1);
@@ -247,12 +247,12 @@
--color-btn-danger-selected-text: #ffffff;
- --color-btn-danger-selected-bg: hsla(354,81%,32%,1);
- --color-btn-danger-selected-border: rgba(1,4,9,0.9);
+ --color-btn-danger-selected-bg: #6e011a;
+ --color-btn-danger-selected-border: #6e011a;
--color-btn-danger-selected-shadow: inset 0 1px 0 rgba(67,0,17,0.2);
--color-btn-danger-disabled-text: rgba(160,17,31,0.5);
- --color-btn-danger-disabled-bg: #FFFFFF;
+ --color-btn-danger-disabled-bg: #E7ECF0;
--color-btn-danger-disabled-counter-bg: rgba(160,17,31,0.05);
- --color-btn-danger-focus-border: rgba(1,4,9,0.9);
+ --color-btn-danger-focus-border: #6e011a;
--color-btn-danger-focus-shadow: 0 0 0 3px rgba(134,6,29,0.4);
--color-btn-danger-counter-bg: rgba(160,17,31,0.1);
- --color-btn-danger-icon: #a0111f;
+ --color-btn-danger-icon: #86061d;
--color-btn-danger-hover-icon: #ffffff;
@@ -260,3 +260,3 @@
--color-underlinenav-border-hover: rgba(172,182,192,0.2);
- --color-action-list-item-inline-divider: rgba(36,41,47,0.48);
+ --color-action-list-item-inline-divider: rgba(48,54,61,0.48);
--color-action-list-item-default-hover-bg: rgba(206,213,220,0.32);
@@ -275,5 +275,5 @@
--color-canvas-subtle: #E7ECF0;
- --color-border-default: #24292F;
+ --color-border-default: #30363D;
--color-border-muted: #88929D;
- --color-border-subtle: rgba(1,4,9,0.9);
+ --color-border-subtle: rgba(1,4,9,0.8);
--color-shadow-small: 0 1px 0 rgba(1,4,9,0.04); |
🦋 Changeset detectedLatest commit: d28c82e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
This change was lost when resolving a merge conflict
simurai
previously requested changes
Nov 23, 2021
There was a problem hiding this comment.
There seems to be the following error:
> The following variables are missing in one or more modes:
* Variable color-btn-danger-focus-bg is missing in modes: light, light_colorblind, dark, dark_dimmed, dark_high_contrast, dark_colorblind
* Variable color-btn-outline-focus-bg is missing in modes: light, light_colorblind, dark, dark_dimmed, dark_high_contrast, dark_colorblind
I think if we wanted to add an exception for Light HC to change the background color when focused, we would have to also add a variable to component_light + component_dark. For example the color-btn-danger-focus-bg would need to exist as focusBg above focusBorder.
Buuuut.. there is currently another PR primer/css#1744 in Primer CSS that changes all the focus styles. Buttons will have a 2px outline with a 2px gap:
Once that shipped, we can probably remove some focus variables from Primer Primitives that are not needed anymore. /cc @langermank
So for this PR, maybe we can hold off adding new focus related variables? Basically delete these two lines:
Would that temporarily still look ok?
Just saw it this morning and I agree, let’s remove and benefit from the new styles 🙂 Also I think for the beta it will be ok. |
This changes was proposed here #276 (review)
Merged
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.
Changes
I might need to give it a second pass after testing live version. Also counters haven’t been updated yet.