Skip to content
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

Jump to bottom

Add colors for reaction button pattern #849

Merged
merged 3 commits into from
Mar 29, 2024
Merged

Add colors for reaction button pattern #849

merged 3 commits into from
Mar 29, 2024

Conversation

langermank
Copy link
Contributor

Pattern tokens for this friendly guy:

reaction button

Uses default button colors for rest, but when the button is selected it needs both selected and a selected hover state. I'm also adding foreground colors to ensure proper contrast.

@langermank langermank requested review from a team as code owners March 29, 2024 00:13
@langermank langermank requested review from simurai and pksjce March 29, 2024 00:13
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Mar 29, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 51e4e3c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/primitives Patch

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Mar 29, 2024 •
edited
Loading

Variables changed 
No variables changed

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Mar 29, 2024 •
edited
Loading

Design Token Diff

/css/functional/themes/dark-colorblind.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css	2024-03-29 17:16:48.101331417 +0000
@@ -269,6 +269,10 @@
 --buttonCounter-danger-fgColor-rest: #db6d28;
 --buttonCounter-danger-fgColor-hover: #ffffff;
 --buttonCounter-danger-fgColor-disabled: #db6d2880;
+  --reactionButton-selected-bgColor-rest: #388bfd33;
+  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
+  --reactionButton-selected-fgColor-rest: #4493f8;
+  --reactionButton-selected-fgColor-hover: #79c0ff;
 --focus-outlineColor: #1f6feb;
 --menu-bgColor-active: #161b22;
 --overlay-bgColor: #161b22;
@@ -776,6 +780,10 @@
   --buttonCounter-danger-fgColor-rest: #db6d28;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #db6d2880;
+    --reactionButton-selected-bgColor-rest: #388bfd33;
+    --reactionButton-selected-bgColor-hover: #3a8cfd5c;
+    --reactionButton-selected-fgColor-rest: #4493f8;
+    --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;

/css/functional/themes/dark-dimmed.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css	2024-03-29 17:16:47.217325026 +0000
@@ -269,6 +269,10 @@
 --buttonCounter-danger-fgColor-rest: #e5534b;
 --buttonCounter-danger-fgColor-hover: #cdd9e5;
 --buttonCounter-danger-fgColor-disabled: #e5534b80;
+  --reactionButton-selected-bgColor-rest: #4184e433;
+  --reactionButton-selected-bgColor-hover: #4285e55c;
+  --reactionButton-selected-fgColor-rest: #478be6;
+  --reactionButton-selected-fgColor-hover: #6cb6ff;
 --focus-outlineColor: #316dca;
 --menu-bgColor-active: #2d333b;
 --overlay-bgColor: #2d333b;
@@ -776,6 +780,10 @@
   --buttonCounter-danger-fgColor-rest: #e5534b;
   --buttonCounter-danger-fgColor-hover: #cdd9e5;
   --buttonCounter-danger-fgColor-disabled: #e5534b80;
+    --reactionButton-selected-bgColor-rest: #4184e433;
+    --reactionButton-selected-bgColor-hover: #4285e55c;
+    --reactionButton-selected-fgColor-rest: #478be6;
+    --reactionButton-selected-fgColor-hover: #6cb6ff;
   --focus-outlineColor: #316dca;
   --menu-bgColor-active: #2d333b;
   --overlay-bgColor: #2d333b;

/css/functional/themes/dark-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css	2024-03-29 17:16:48.557334714 +0000
@@ -269,6 +269,10 @@
 --buttonCounter-danger-fgColor-rest: #ff8080;
 --buttonCounter-danger-fgColor-hover: #ffffff;
 --buttonCounter-danger-fgColor-disabled: #ff808080;
+  --reactionButton-selected-bgColor-rest: #5cacff33;
+  --reactionButton-selected-bgColor-hover: #5dadff5c;
+  --reactionButton-selected-fgColor-rest: #60aeff;
+  --reactionButton-selected-fgColor-hover: #91cbff;
 --focus-outlineColor: #409eff;
 --menu-bgColor-active: #272b33;
 --overlay-bgColor: #272b33;
@@ -776,6 +780,10 @@
   --buttonCounter-danger-fgColor-rest: #ff8080;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #ff808080;
+    --reactionButton-selected-bgColor-rest: #5cacff33;
+    --reactionButton-selected-bgColor-hover: #5dadff5c;
+    --reactionButton-selected-fgColor-rest: #60aeff;
+    --reactionButton-selected-fgColor-hover: #91cbff;
   --focus-outlineColor: #409eff;
   --menu-bgColor-active: #272b33;
   --overlay-bgColor: #272b33;

/css/functional/themes/dark-tritanopia.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css	2024-03-29 17:16:47.657328206 +0000
@@ -269,6 +269,10 @@
 --buttonCounter-danger-fgColor-rest: #f85149;
 --buttonCounter-danger-fgColor-hover: #ffffff;
 --buttonCounter-danger-fgColor-disabled: #f8514980;
+  --reactionButton-selected-bgColor-rest: #388bfd33;
+  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
+  --reactionButton-selected-fgColor-rest: #4493f8;
+  --reactionButton-selected-fgColor-hover: #79c0ff;
 --focus-outlineColor: #1f6feb;
 --menu-bgColor-active: #161b22;
 --overlay-bgColor: #161b22;
@@ -776,6 +780,10 @@
   --buttonCounter-danger-fgColor-rest: #f85149;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #f8514980;
+    --reactionButton-selected-bgColor-rest: #388bfd33;
+    --reactionButton-selected-bgColor-hover: #3a8cfd5c;
+    --reactionButton-selected-fgColor-rest: #4493f8;
+    --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;

/css/functional/themes/dark.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2024-03-29 17:16:46.753321670 +0000
@@ -269,6 +269,10 @@
 --buttonCounter-danger-fgColor-rest: #f85149;
 --buttonCounter-danger-fgColor-hover: #ffffff;
 --buttonCounter-danger-fgColor-disabled: #f8514980;
+  --reactionButton-selected-bgColor-rest: #388bfd33;
+  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
+  --reactionButton-selected-fgColor-rest: #4493f8;
+  --reactionButton-selected-fgColor-hover: #79c0ff;
 --focus-outlineColor: #1f6feb;
 --menu-bgColor-active: #161b22;
 --overlay-bgColor: #161b22;
@@ -776,6 +780,10 @@
   --buttonCounter-danger-fgColor-rest: #f85149;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #f8514980;
+    --reactionButton-selected-bgColor-rest: #388bfd33;
+    --reactionButton-selected-bgColor-hover: #3a8cfd5c;
+    --reactionButton-selected-fgColor-rest: #4493f8;
+    --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;

/css/functional/themes/light-colorblind.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2024-03-29 17:16:45.709314122 +0000
@@ -269,6 +269,10 @@
 --buttonCounter-danger-fgColor-rest: #c21c2c;
 --buttonCounter-danger-fgColor-hover: #ffffff;
 --buttonCounter-danger-fgColor-disabled: #be4e0280;
+  --reactionButton-selected-bgColor-rest: #ddf4ff;
+  --reactionButton-selected-bgColor-hover: #caecff;
+  --reactionButton-selected-fgColor-rest: #0969da;
+  --reactionButton-selected-fgColor-hover: #0550ae;
 --focus-outlineColor: #0969da;
 --focus-outline: #0969da solid 2px;
 --menu-bgColor-active: #ffffff00;
@@ -776,6 +780,10 @@
   --buttonCounter-danger-fgColor-rest: #c21c2c;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #be4e0280;
+    --reactionButton-selected-bgColor-rest: #ddf4ff;
+    --reactionButton-selected-bgColor-hover: #caecff;
+    --reactionButton-selected-fgColor-rest: #0969da;
+    --reactionButton-selected-fgColor-hover: #0550ae;
   --focus-outlineColor: #0969da;
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;

/css/functional/themes/light-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css	2024-03-29 17:16:46.173317476 +0000
@@ -269,6 +269,10 @@
 --buttonCounter-danger-fgColor-rest: #980e1e;
 --buttonCounter-danger-fgColor-hover: #ffffff;
 --buttonCounter-danger-fgColor-disabled: #8a071e80;
+  --reactionButton-selected-bgColor-rest: #dff7ff;
+  --reactionButton-selected-bgColor-hover: #c7e9ff;
+  --reactionButton-selected-fgColor-rest: #023b95;
+  --reactionButton-selected-fgColor-hover: #023b95;
 --focus-outlineColor: #0349b4;
 --focus-outline: #0349b4 solid 2px;
 --menu-bgColor-active: #ffffff00;
@@ -776,6 +780,10 @@
   --buttonCounter-danger-fgColor-rest: #980e1e;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #8a071e80;
+    --reactionButton-selected-bgColor-rest: #dff7ff;
+    --reactionButton-selected-bgColor-hover: #c7e9ff;
+    --reactionButton-selected-fgColor-rest: #023b95;
+    --reactionButton-selected-fgColor-hover: #023b95;
   --focus-outlineColor: #0349b4;
   --focus-outline: #0349b4 solid 2px;
   --menu-bgColor-active: #ffffff00;

/css/functional/themes/light-tritanopia.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2024-03-29 17:16:45.253310824 +0000
@@ -269,6 +269,10 @@
 --buttonCounter-danger-fgColor-rest: #c21c2c;
 --buttonCounter-danger-fgColor-hover: #ffffff;
 --buttonCounter-danger-fgColor-disabled: #d1242f80;
+  --reactionButton-selected-bgColor-rest: #ddf4ff;
+  --reactionButton-selected-bgColor-hover: #caecff;
+  --reactionButton-selected-fgColor-rest: #0969da;
+  --reactionButton-selected-fgColor-hover: #0550ae;
 --focus-outlineColor: #0969da;
 --focus-outline: #0969da solid 2px;
 --menu-bgColor-active: #ffffff00;
@@ -776,6 +780,10 @@
   --buttonCounter-danger-fgColor-rest: #c21c2c;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #d1242f80;
+    --reactionButton-selected-bgColor-rest: #ddf4ff;
+    --reactionButton-selected-bgColor-hover: #caecff;
+    --reactionButton-selected-fgColor-rest: #0969da;
+    --reactionButton-selected-fgColor-hover: #0550ae;
   --focus-outlineColor: #0969da;
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;

/css/functional/themes/light.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2024-03-29 17:16:44.765307297 +0000
@@ -269,6 +269,10 @@
 --buttonCounter-danger-fgColor-rest: #c21c2c;
 --buttonCounter-danger-fgColor-hover: #ffffff;
 --buttonCounter-danger-fgColor-disabled: #d1242f80;
+  --reactionButton-selected-bgColor-rest: #ddf4ff;
+  --reactionButton-selected-bgColor-hover: #caecff;
+  --reactionButton-selected-fgColor-rest: #0969da;
+  --reactionButton-selected-fgColor-hover: #0550ae;
 --focus-outlineColor: #0969da;
 --focus-outline: #0969da solid 2px;
 --menu-bgColor-active: #ffffff00;
@@ -776,6 +780,10 @@
   --buttonCounter-danger-fgColor-rest: #c21c2c;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #d1242f80;
+    --reactionButton-selected-bgColor-rest: #ddf4ff;
+    --reactionButton-selected-bgColor-hover: #caecff;
+    --reactionButton-selected-fgColor-rest: #0969da;
+    --reactionButton-selected-fgColor-hover: #0550ae;
   --focus-outlineColor: #0969da;
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;

@github-actions github-actions bot temporarily deployed to storybook-preview March 29, 2024 00:16 Inactive
@langermank langermank added the update snapshots Update visual regression test snapshots label Mar 29, 2024
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Mar 29, 2024
@primer primer bot temporarily deployed to github-pages March 29, 2024 17:17 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview March 29, 2024 17:18 Inactive
@langermank langermank merged commit ba6a5a8 into main Mar 29, 2024
26 checks passed
@langermank langermank deleted the reaction-button-colors branch March 29, 2024 17:26
@primer primer bot mentioned this pull request Mar 29, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@simurai simurai Awaiting requested review from simurai simurai is a code owner automatically assigned from primer/css-reviewers

@pksjce pksjce Awaiting requested review from pksjce pksjce is a code owner automatically assigned from primer/engineer-reviewers

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@langermank