From 522a3ce0ed159f4dc39fff3c3c6b298dddf5f26b Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 31 May 2022 19:08:39 +0200 Subject: [PATCH 1/5] Add segmentedControl colors --- data/colors/vars/component_dark.ts | 17 ++++++++++++++++- data/colors/vars/component_light.ts | 17 ++++++++++++++++- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/data/colors/vars/component_dark.ts b/data/colors/vars/component_dark.ts index 4184aa585..3d5e5fe28 100644 --- a/data/colors/vars/component_dark.ts +++ b/data/colors/vars/component_dark.ts @@ -186,5 +186,20 @@ export default { bg: get('scale.blue.5'), disabledBg: get('scale.gray.5'), } - } + }, + + segmentedControl: { + bg: get('scale.gray.8'), + hoverBg: get('scale.gray.6'), + + active: { + bg: get('scale.gray.7'), + border: get('scale.gray.6'), + }, + + pressed: { + bg: get('scale.gray.6'), + border: get('scale.gray.4'), + }, + }, } diff --git a/data/colors/vars/component_light.ts b/data/colors/vars/component_light.ts index da5440dae..b11bbc52c 100644 --- a/data/colors/vars/component_light.ts +++ b/data/colors/vars/component_light.ts @@ -187,5 +187,20 @@ export default { bg: get('scale.blue.5'), disabledBg: get('scale.gray.5'), } - } + }, + + segmentedControl: { + bg: get('scale.gray.1'), + hoverBg: get('neutral.muted'), + + active: { + bg: alpha(get('scale.gray.3'), 0.4), + border: get('scale.gray.3'), + }, + + pressed: { + bg: get('canvas.subtle'), + border: get('scale.gray.4'), + }, + }, } From a92fcb63f499e4708502c55d294f05ca38a72051 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 1 Jun 2022 02:13:06 +0900 Subject: [PATCH 2/5] Create clever-waves-think.md --- .changeset/clever-waves-think.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/clever-waves-think.md diff --git a/.changeset/clever-waves-think.md b/.changeset/clever-waves-think.md new file mode 100644 index 000000000..a2fde2b2f --- /dev/null +++ b/.changeset/clever-waves-think.md @@ -0,0 +1,5 @@ +--- +"@primer/primitives": minor +--- + +Add SegmentedControl colors From 9678391a9787170ccb206c5fedd847d133958ad2 Mon Sep 17 00:00:00 2001 From: simurai Date: Sat, 4 Jun 2022 17:12:30 +0200 Subject: [PATCH 3/5] Update SegmentedControl colors based on feedback --- data/colors/vars/component_dark.ts | 20 ++++++++++++-------- data/colors/vars/component_light.ts | 20 ++++++++++++-------- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/data/colors/vars/component_dark.ts b/data/colors/vars/component_dark.ts index 3d5e5fe28..5cd9fd1b4 100644 --- a/data/colors/vars/component_dark.ts +++ b/data/colors/vars/component_dark.ts @@ -190,16 +190,20 @@ export default { segmentedControl: { bg: get('scale.gray.8'), - hoverBg: get('scale.gray.6'), - active: { - bg: get('scale.gray.7'), - border: get('scale.gray.6'), - }, + button: { + hover: { + bg: get('scale.gray.6'), + }, + + active: { + bg: get('scale.gray.7'), + border: get('scale.gray.6'), + }, - pressed: { - bg: get('scale.gray.6'), - border: get('scale.gray.4'), + selected: { + border: get('scale.gray.4'), + }, }, }, } diff --git a/data/colors/vars/component_light.ts b/data/colors/vars/component_light.ts index b11bbc52c..1bf4f2d46 100644 --- a/data/colors/vars/component_light.ts +++ b/data/colors/vars/component_light.ts @@ -191,16 +191,20 @@ export default { segmentedControl: { bg: get('scale.gray.1'), - hoverBg: get('neutral.muted'), - active: { - bg: alpha(get('scale.gray.3'), 0.4), - border: get('scale.gray.3'), - }, + button: { + hover: { + bg: alpha(get('scale.gray.3'), 0.2), + }, + + active: { + bg: alpha(get('scale.gray.3'), 0.4), + border: get('scale.gray.3'), + }, - pressed: { - bg: get('canvas.subtle'), - border: get('scale.gray.4'), + selected: { + border: get('scale.gray.4'), + }, }, }, } From e0a47a9fd5d74cc29bba27c88af55008b2e6bf6c Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 20 Jul 2022 17:18:53 +0900 Subject: [PATCH 4/5] Remove border again --- data/colors/vars/component_dark.ts | 1 - data/colors/vars/component_light.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/data/colors/vars/component_dark.ts b/data/colors/vars/component_dark.ts index 5cd9fd1b4..a225a1b13 100644 --- a/data/colors/vars/component_dark.ts +++ b/data/colors/vars/component_dark.ts @@ -198,7 +198,6 @@ export default { active: { bg: get('scale.gray.7'), - border: get('scale.gray.6'), }, selected: { diff --git a/data/colors/vars/component_light.ts b/data/colors/vars/component_light.ts index 1bf4f2d46..1e81e6f1b 100644 --- a/data/colors/vars/component_light.ts +++ b/data/colors/vars/component_light.ts @@ -199,7 +199,6 @@ export default { active: { bg: alpha(get('scale.gray.3'), 0.4), - border: get('scale.gray.3'), }, selected: { From 953c6e6bd30ffe059bdfac0f60244667326f4cc6 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 20 Jul 2022 17:19:56 +0900 Subject: [PATCH 5/5] Bump selected border --- data/colors/vars/component_light.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/colors/vars/component_light.ts b/data/colors/vars/component_light.ts index 1e81e6f1b..1baec5d72 100644 --- a/data/colors/vars/component_light.ts +++ b/data/colors/vars/component_light.ts @@ -202,7 +202,7 @@ export default { }, selected: { - border: get('scale.gray.4'), + border: get('scale.gray.5'), }, }, },