Add SegmentedControl colors by simurai · Pull Request #329 · primer/primitives

simurai · 2022-05-31T17:12:46Z

This adds a few colors for the SegmentedControl component.

Light default	Dark default

Will be used for:

changeset-bot · 2022-05-31T17:12:48Z

🦋 Changeset detected

Latest commit: 953c6e6

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	Minor

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 · 2022-05-31T17:13:06Z

Variables changed

--- base/dist/scss/colors/_dark.scss	2022-07-20 08:27:16.979139848 +0000+++ dist/scss/colors/_dark.scss	2022-07-20 08:27:03.810871120 +0000@@ -280,2 +280,6 @@
--color-switch-knob-checked-disabled-bg: #484f58;
+ --color-segmented-control-bg: #161b22;+ --color-segmented-control-button-hover-bg: #30363d;+ --color-segmented-control-button-active-bg: #21262d;+ --color-segmented-control-button-selected-border: #6e7681;
--color-fg-default: #c9d1d9;
--- base/dist/scss/colors/_dark_colorblind.scss	2022-07-20 08:27:16.999140075 +0000+++ dist/scss/colors/_dark_colorblind.scss	2022-07-20 08:27:03.834871645 +0000@@ -280,2 +280,6 @@
--color-switch-knob-checked-disabled-bg: #484f58;
+ --color-segmented-control-bg: #161b22;+ --color-segmented-control-button-hover-bg: #30363d;+ --color-segmented-control-button-active-bg: #21262d;+ --color-segmented-control-button-selected-border: #6e7681;
--color-fg-default: #c9d1d9;
--- base/dist/scss/colors/_dark_dimmed.scss	2022-07-20 08:27:16.987139939 +0000+++ dist/scss/colors/_dark_dimmed.scss	2022-07-20 08:27:03.818871295 +0000@@ -280,2 +280,6 @@
--color-switch-knob-checked-disabled-bg: #545d68;
+ --color-segmented-control-bg: #2d333b;+ --color-segmented-control-button-hover-bg: #444c56;+ --color-segmented-control-button-active-bg: #373e47;+ --color-segmented-control-button-selected-border: #636e7b;
--color-fg-default: #adbac7;
--- base/dist/scss/colors/_dark_high_contrast.scss	2022-07-20 08:27:16.995140030 +0000+++ dist/scss/colors/_dark_high_contrast.scss	2022-07-20 08:27:03.822871382 +0000@@ -280,2 +280,6 @@
--color-switch-knob-checked-disabled-bg: #7a828e;
+ --color-segmented-control-bg: #272b33;+ --color-segmented-control-button-hover-bg: #525964;+ --color-segmented-control-button-active-bg: #272b33;+ --color-segmented-control-button-selected-border: #9ea7b3;
--color-fg-default: #f0f3f6;
--- base/dist/scss/colors/_dark_tritanopia.scss	2022-07-20 08:27:17.007140166 +0000+++ dist/scss/colors/_dark_tritanopia.scss	2022-07-20 08:27:03.838871732 +0000@@ -280,2 +280,6 @@
--color-switch-knob-checked-disabled-bg: #484f58;
+ --color-segmented-control-bg: #161b22;+ --color-segmented-control-button-hover-bg: #30363d;+ --color-segmented-control-button-active-bg: #21262d;+ --color-segmented-control-button-selected-border: #6e7681;
--color-fg-default: #c9d1d9;
--- base/dist/scss/colors/_light.scss	2022-07-20 08:27:16.939139393 +0000+++ dist/scss/colors/_light.scss	2022-07-20 08:27:03.774870333 +0000@@ -280,2 +280,6 @@
--color-switch-knob-checked-disabled-bg: #6e7781;
+ --color-segmented-control-bg: #eaeef2;+ --color-segmented-control-button-hover-bg: rgba(175,184,193,0.2);+ --color-segmented-control-button-active-bg: rgba(175,184,193,0.4);+ --color-segmented-control-button-selected-border: #6e7781;
--color-fg-default: #24292f;
--- base/dist/scss/colors/_light_colorblind.scss	2022-07-20 08:27:16.963139666 +0000+++ dist/scss/colors/_light_colorblind.scss	2022-07-20 08:27:03.794870770 +0000@@ -280,2 +280,6 @@
--color-switch-knob-checked-disabled-bg: #6e7781;
+ --color-segmented-control-bg: #eaeef2;+ --color-segmented-control-button-hover-bg: rgba(175,184,193,0.2);+ --color-segmented-control-button-active-bg: rgba(175,184,193,0.4);+ --color-segmented-control-button-selected-border: #6e7781;
--color-fg-default: #24292f;
--- base/dist/scss/colors/_light_high_contrast.scss	2022-07-20 08:27:16.951139530 +0000+++ dist/scss/colors/_light_high_contrast.scss	2022-07-20 08:27:03.786870595 +0000@@ -280,2 +280,6 @@
--color-switch-knob-checked-disabled-bg: #66707B;
+ --color-segmented-control-bg: #E7ECF0;+ --color-segmented-control-button-hover-bg: rgba(172,182,192,0.2);+ --color-segmented-control-button-active-bg: rgba(172,182,192,0.4);+ --color-segmented-control-button-selected-border: #66707B;
--color-fg-default: #0E1116;
--- base/dist/scss/colors/_light_tritanopia.scss	2022-07-20 08:27:16.971139757 +0000+++ dist/scss/colors/_light_tritanopia.scss	2022-07-20 08:27:03.802870945 +0000@@ -280,2 +280,6 @@
--color-switch-knob-checked-disabled-bg: #6e7781;
+ --color-segmented-control-bg: #eaeef2;+ --color-segmented-control-button-hover-bg: rgba(175,184,193,0.2);+ --color-segmented-control-button-active-bg: rgba(175,184,193,0.4);+ --color-segmented-control-button-selected-border: #6e7781;
--color-fg-default: #24292f;

mperrotti · 2022-06-02T14:28:01Z

+
+ segmentedControl: {
+ bg: get('scale.gray.1'),
+ hoverBg: get('neutral.muted'),


As I've been working on the React implementation of segmented controls (PR), I changed the design to make the :hover and :active states lighter.
I haven't solved the design for all color modes yet, but here's what I have so far: https://github.com/primer/react/pull/2108/files#diff-feb85d0e75c6e6596e095632632ccc668254e56b60a7bffb4189736358e96222R40-R46

Currently this PR is using:
hover: alpha(get('scale.gray.3'), 0.2)
active: alpha(get('scale.gray.3'), 0.4) which is double of hover.
It should already be lighter than in Figma and keeps it in the same tone (gray hue) as neutral.muted
:hover :active
Also, I added a border for :active to give it some sort of "inset" look when pressed.

I kept the colors, but now it uses an "inset style":

mperrotti · 2022-06-07T20:14:49Z

@simurai - I'm going to collaborate with @vdepizzol and @langermank to come up with system-level color tokens that can be used for the segmented control. I'll keep you updated on our progress.

mperrotti · 2022-07-18T23:27:55Z

It looks like it's going to be a while before we have the colors in the new primitives workflow (see the new Spacing and size and Typography tokens)

simurai · 2022-07-20T08:32:50Z

@mperrotti It looks like it's going to be a while before we have the colors in the new primitives workflow

So do you mean we should go ahead and merge this PR and try to replace these SegmentedControl colors some time later?

mperrotti · 2022-07-20T16:52:04Z

@simurai - yup, exactly

Add segmentedControl colors
522a3ce

Create clever-waves-think.md
a92fcb6

simurai mentioned this pull request May 31, 2022
SegmentedControl primer/css#2083
Merged
10 tasks

simurai temporarily deployed to github-pages May 31, 2022 17:15 Inactive

simurai mentioned this pull request Jun 2, 2022
Basic SegmentedControl functionality primer/react#2108
Merged
6 tasks

simurai marked this pull request as ready for review June 2, 2022 10:05

simurai requested a review from a team as a code owner June 2, 2022 10:05

simurai requested review from a team, jonrohan and mperrotti June 2, 2022 10:05

simurai commented Jun 2, 2022
View reviewed changes

Comment threaddata/colors/vars/component_dark.ts Outdated

mperrotti reviewed Jun 2, 2022
View reviewed changes

Update SegmentedControl colors based on feedback
9678391

simurai temporarily deployed to github-pages June 4, 2022 15:15 Inactive

jonrohan approved these changes Jun 23, 2022
View reviewed changes

mperrotti approved these changes Jul 18, 2022
View reviewed changes

mperrotti reviewed Jul 19, 2022
View reviewed changes

Comment threaddata/colors/vars/component_light.ts Outdated

simurai added 2 commits July 20, 2022 17:18

Remove border again
e0a47a9

Bump selected border
953c6e6

simurai temporarily deployed to github-pages July 20, 2022 08:29 Inactive

simurai merged commit 607cc75 into mainJul 20, 2022

simurai deleted the segmented-control branch July 20, 2022 23:49

primer-css mentioned this pull request Jul 20, 2022
Release Tracking #339
Merged

mperrotti mentioned this pull request Jul 25, 2022
Use SegmentedControl component primitives primer/react#2186
Merged
5 tasks

Navigation Menu

Uh oh!

Add SegmentedControl colors - #329

Add SegmentedControl colors#329
simurai merged 5 commits into
mainfrom
segmented-control

simurai commented May 31, 2022•
edited
Loading

Uh oh!

changeset-botBot commented May 31, 2022•
edited
Loading

Uh oh!

github-actionsBot commented May 31, 2022•
edited
Loading

Uh oh!

Uh oh!

mperrottiJun 2, 2022

Uh oh!

simuraiJun 4, 2022

Uh oh!

simuraiJul 20, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mperrotti commented Jun 7, 2022

Uh oh!

mperrotti commented Jul 18, 2022

Uh oh!

Uh oh!

simurai commented Jul 20, 2022

Uh oh!

mperrotti commented Jul 20, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

simurai commented May 31, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-botBot commented May 31, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actionsBot commented May 31, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mperrottiJun 2, 2022

Choose a reason for hiding this comment

Uh oh!

simuraiJun 4, 2022

Choose a reason for hiding this comment

Uh oh!

simuraiJul 20, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mperrotti commented Jun 7, 2022

Uh oh!

mperrotti commented Jul 18, 2022

Uh oh!

Uh oh!

simurai commented Jul 20, 2022

Uh oh!

mperrotti commented Jul 20, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

simurai commented May 31, 2022•
edited
Loading

changeset-botBot commented May 31, 2022•
edited
Loading

github-actionsBot commented May 31, 2022•
edited
Loading