Skip to content

Commit 3ec3b46

Browse files
jawinnjawinn
authored
feat(actionbutton): use s2 colors in spectrum-two theme (#3606)
* feat(actionbutton): use closer to s2 colors in spectrum-two theme Requested colors update for action button, aligning the colors closer to the S2 design, post-foundations. In the foundations spectrum-two theme: - Removes the border - Changes the default background colors to match s2 specs - Updates the background colors used for static black and static white SWC-497 * fix(actionbutton): fix high contrast styles for selected disabled The selected + disabled button was not showing up as the disabled colors in high contrast mode. Fixed by adjusting the source order slightly in the high contrast media query so disabled is after selected and takes precedence.
1 parent 8637d39 commit 3ec3b46

File tree

5 files changed

+83
-55
lines changed

5 files changed

+83
-55
lines changed

‎.changeset/tall-pens-lay.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@spectrum-css/actionbutton": patch
3+
---
4+
5+
This updates the colors used in action button for the spectrum two theme, so they are closer
6+
aligned with the spectrum 2 spec, per the request in SWC-597. This removes the border by making
7+
it transparent and updates the background color tokens that are used.
8+
9+
This also includes a forced-colors/high contrast mode fix for the selected + disabled state. This
10+
now shows the disabled colors.

‎components/actionbutton/dist/metadata.json‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -176,13 +176,10 @@
176176
"--spectrum-corner-radius-medium-size-medium",
177177
"--spectrum-corner-radius-medium-size-small",
178178
"--spectrum-disabled-background-color",
179-
"--spectrum-disabled-border-color",
180179
"--spectrum-disabled-content-color",
181180
"--spectrum-disabled-static-black-background-color",
182-
"--spectrum-disabled-static-black-border-color",
183181
"--spectrum-disabled-static-black-content-color",
184182
"--spectrum-disabled-static-white-background-color",
185-
"--spectrum-disabled-static-white-border-color",
186183
"--spectrum-disabled-static-white-content-color",
187184
"--spectrum-focus-indicator-color",
188185
"--spectrum-focus-indicator-gap",
@@ -194,10 +191,7 @@
194191
"--spectrum-font-size-75",
195192
"--spectrum-gray-100",
196193
"--spectrum-gray-200",
197-
"--spectrum-gray-400",
198194
"--spectrum-gray-50",
199-
"--spectrum-gray-500",
200-
"--spectrum-gray-600",
201195
"--spectrum-line-height-100",
202196
"--spectrum-logical-rotation",
203197
"--spectrum-neutral-background-color-selected-default",
@@ -216,16 +210,12 @@
216210
"--spectrum-text-to-visual-300",
217211
"--spectrum-text-to-visual-50",
218212
"--spectrum-text-to-visual-75",
219-
"--spectrum-transparent-black-400",
220-
"--spectrum-transparent-black-500",
221-
"--spectrum-transparent-black-600",
222-
"--spectrum-transparent-black-700",
213+
"--spectrum-transparent-black-100",
214+
"--spectrum-transparent-black-200",
223215
"--spectrum-transparent-black-800",
224216
"--spectrum-transparent-black-900",
225-
"--spectrum-transparent-white-400",
226-
"--spectrum-transparent-white-500",
227-
"--spectrum-transparent-white-600",
228-
"--spectrum-transparent-white-700",
217+
"--spectrum-transparent-white-100",
218+
"--spectrum-transparent-white-200",
229219
"--spectrum-transparent-white-800",
230220
"--spectrum-transparent-white-900",
231221
"--spectrum-white",
@@ -269,6 +259,7 @@
269259
"--system-action-button-static-black-background-color-hover",
270260
"--system-action-button-static-black-background-color-selected-disabled",
271261
"--system-action-button-static-black-border-color-default",
262+
"--system-action-button-static-black-border-color-disabled",
272263
"--system-action-button-static-black-border-color-down",
273264
"--system-action-button-static-black-border-color-focus",
274265
"--system-action-button-static-black-border-color-hover",
@@ -284,6 +275,7 @@
284275
"--system-action-button-static-white-background-color-hover",
285276
"--system-action-button-static-white-background-color-selected-disabled",
286277
"--system-action-button-static-white-border-color-default",
278+
"--system-action-button-static-white-border-color-disabled",
287279
"--system-action-button-static-white-border-color-down",
288280
"--system-action-button-static-white-border-color-focus",
289281
"--system-action-button-static-white-border-color-hover",

‎components/actionbutton/index.css‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,6 @@
2525
forced-color-adjust: none;
2626
}
2727

28-
&:disabled,
29-
&.is-disabled {
30-
--highcontrast-actionbutton-content-color: GrayText;
31-
--highcontrast-actionbutton-border-color: GrayText;
32-
--highcontrast-actionbutton-background-color: ButtonFace;
33-
}
34-
3528
&.is-selected {
3629
--highcontrast-actionbutton-background-color: Highlight;
3730
--highcontrast-actionbutton-border-color: HighlightText;
@@ -45,6 +38,13 @@
4538
forced-color-adjust: none;
4639
}
4740
}
41+
42+
&:disabled,
43+
&.is-disabled {
44+
--highcontrast-actionbutton-content-color: GrayText;
45+
--highcontrast-actionbutton-border-color: GrayText;
46+
--highcontrast-actionbutton-background-color: ButtonFace;
47+
}
4848
}
4949
}
5050

@@ -87,9 +87,6 @@
8787
--mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900);
8888
--mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900);
8989

90-
/* border color _not_ disabled is coming from the system theme layer */
91-
--mod-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
92-
9390
--mod-actionbutton-content-color-default: var(--spectrum-black);
9491
--mod-actionbutton-content-color-hover: var(--spectrum-black);
9592
--mod-actionbutton-content-color-down: var(--spectrum-black);
@@ -111,9 +108,6 @@
111108
--mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900);
112109
--mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900);
113110

114-
/* border color _not_ disabled is coming from the system theme layer */
115-
--mod-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
116-
117111
--mod-actionbutton-content-color-default: var(--spectrum-white);
118112
--mod-actionbutton-content-color-hover: var(--spectrum-white);
119113
--mod-actionbutton-content-color-down: var(--spectrum-white);

‎components/actionbutton/themes/spectrum-two.css‎

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,22 @@
1313

1414
@container style(--system: spectrum) {
1515
.spectrum-ActionButton {
16-
--spectrum-actionbutton-background-color-default: var(--spectrum-gray-50);
17-
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
16+
--spectrum-actionbutton-background-color-default: var(--spectrum-gray-100);
17+
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
1818
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
19-
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
19+
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
2020
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
2121

2222
--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
2323
--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
2424
--spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
2525
--spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
2626

27-
--spectrum-actionbutton-border-color-default: var(--spectrum-gray-400);
28-
--spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
29-
--spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
30-
--spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
31-
--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
27+
--spectrum-actionbutton-border-color-default: transparent;
28+
--spectrum-actionbutton-border-color-hover: transparent;
29+
--spectrum-actionbutton-border-color-down: transparent;
30+
--spectrum-actionbutton-border-color-focus: transparent;
31+
--spectrum-actionbutton-border-color-disabled: transparent;
3232

3333
--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50);
3434

@@ -54,47 +54,57 @@
5454

5555
&.spectrum-ActionButton--quiet {
5656
--spectrum-actionbutton-background-color-default: transparent;
57-
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
57+
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
5858
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
59-
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
59+
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
6060
--spectrum-actionbutton-background-color-disabled: transparent;
6161
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color);
6262
}
6363

6464
&.spectrum-ActionButton--staticBlack {
65-
--spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-500);
66-
--spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-600);
67-
--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-700);
68-
--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
65+
--spectrum-actionbutton-border-color-default: transparent;
66+
--spectrum-actionbutton-border-color-hover: transparent;
67+
--spectrum-actionbutton-border-color-down: transparent;
68+
--spectrum-actionbutton-border-color-focus: transparent;
69+
--spectrum-actionbutton-border-color-disabled: transparent;
6970

7071
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
7172
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color);
7273

73-
&,
74+
--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100);
75+
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200);
76+
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200);
77+
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200);
78+
7479
&.spectrum-ActionButton--quiet {
7580
--spectrum-actionbutton-background-color-default: transparent;
76-
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-400);
77-
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-500);
78-
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-400);
81+
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200);
82+
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200);
83+
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200);
7984
--spectrum-actionbutton-background-color-disabled: transparent;
8085
}
8186
}
8287

8388
&.spectrum-ActionButton--staticWhite {
84-
--spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-500);
85-
--spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-600);
86-
--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-700);
87-
--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-600);
89+
--spectrum-actionbutton-border-color-default: transparent;
90+
--spectrum-actionbutton-border-color-hover: transparent;
91+
--spectrum-actionbutton-border-color-down: transparent;
92+
--spectrum-actionbutton-border-color-focus: transparent;
93+
--spectrum-actionbutton-border-color-disabled: transparent;
8894

8995
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
9096
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color);
9197

92-
&,
98+
--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100);
99+
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200);
100+
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200);
101+
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200);
102+
93103
&.spectrum-ActionButton--quiet {
94104
--spectrum-actionbutton-background-color-default: transparent;
95-
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-400);
96-
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-500);
97-
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-400);
105+
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200);
106+
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200);
107+
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200);
98108
--spectrum-actionbutton-background-color-disabled: transparent;
99109
}
100110
}

‎components/actionbutton/themes/spectrum.css‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@
2424
--spectrum-actionbutton-background-color-disabled: transparent;
2525
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color);
2626

27+
--spectrum-actionbutton-border-color-default: var(--spectrum-gray-400);
28+
--spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
29+
--spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
30+
--spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
31+
--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
32+
2733
--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-75);
2834

2935
&.spectrum-ActionButton--sizeXS,
@@ -45,12 +51,20 @@
4551
--spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500);
4652
--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600);
4753
--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500);
54+
--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
55+
56+
--spectrum-actionbutton-background-color-default: transparent;
57+
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
58+
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
59+
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
60+
--spectrum-actionbutton-background-color-disabled: transparent;
4861

49-
&,
5062
&.spectrum-ActionButton--quiet {
63+
--spectrum-actionbutton-background-color-default: transparent;
5164
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
5265
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
5366
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
67+
--spectrum-actionbutton-background-color-disabled: transparent;
5468
}
5569
}
5670

@@ -59,12 +73,20 @@
5973
--spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500);
6074
--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600);
6175
--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500);
76+
--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
77+
78+
--spectrum-actionbutton-background-color-default: transparent;
79+
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
80+
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
81+
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
82+
--spectrum-actionbutton-background-color-disabled: transparent;
6283

63-
&,
6484
&.spectrum-ActionButton--quiet {
85+
--spectrum-actionbutton-background-color-default: transparent;
6586
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
6687
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
6788
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
89+
--spectrum-actionbutton-background-color-disabled: transparent;
6890
}
6991
}
7092
}

0 commit comments

Comments
 (0)