Skip to content

Commit b01e816

Browse files
rise-erpeldingrise-erpelding
authored
fix(button): adjust s2 static colors [SWC-496] (#3613)
This PR includes changes to: - Static white primary button (outline variant), static white secondary button (fill variant), static black primary button (outline variant), static black secondary button (fill variant) - Static white secondary button (outline variant) and static black secondary button (outline variant) border and background colors - Static white primary button (fill variant) and static black primary button (fill variant) background colors
1 parent dd9f170 commit b01e816

File tree

3 files changed

+80
-69
lines changed

3 files changed

+80
-69
lines changed

‎.changeset/kind-mails-collect.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/button": patch
3+
---
4+
5+
Adjust static white and static black button colors to match S2 design spec.

‎components/button/dist/metadata.json

+12-10
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
".spectrum-Button.spectrum-Button--staticBlack",
4040
".spectrum-Button.spectrum-Button--staticBlack.is-selected",
4141
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline",
42+
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary",
4243
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary)",
4344
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet",
4445
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary",
@@ -271,19 +272,18 @@
271272
"--spectrum-text-to-visual-200",
272273
"--spectrum-text-to-visual-300",
273274
"--spectrum-text-to-visual-75",
274-
"--spectrum-transparent-black-1000",
275+
"--spectrum-transparent-black-100",
276+
"--spectrum-transparent-black-200",
277+
"--spectrum-transparent-black-25",
275278
"--spectrum-transparent-black-300",
276279
"--spectrum-transparent-black-400",
277-
"--spectrum-transparent-black-500",
278-
"--spectrum-transparent-black-600",
279-
"--spectrum-transparent-black-700",
280280
"--spectrum-transparent-black-800",
281281
"--spectrum-transparent-black-900",
282-
"--spectrum-transparent-white-1000",
282+
"--spectrum-transparent-white-100",
283+
"--spectrum-transparent-white-200",
284+
"--spectrum-transparent-white-25",
283285
"--spectrum-transparent-white-300",
284286
"--spectrum-transparent-white-400",
285-
"--spectrum-transparent-white-500",
286-
"--spectrum-transparent-white-600",
287287
"--spectrum-transparent-white-800",
288288
"--spectrum-transparent-white-900",
289289
"--spectrum-white",
@@ -330,6 +330,7 @@
330330
"--system-button-static-black-content-color-down",
331331
"--system-button-static-black-content-color-focus",
332332
"--system-button-static-black-content-color-hover",
333+
"--system-button-static-black-outline-not-secondary-background-color-default",
333334
"--system-button-static-black-outline-not-secondary-background-color-down",
334335
"--system-button-static-black-outline-not-secondary-background-color-focus",
335336
"--system-button-static-black-outline-not-secondary-background-color-hover",
@@ -341,6 +342,9 @@
341342
"--system-button-static-black-outline-not-secondary-content-color-down",
342343
"--system-button-static-black-outline-not-secondary-content-color-focus",
343344
"--system-button-static-black-outline-not-secondary-content-color-hover",
345+
"--system-button-static-black-outline-secondary-background-color-down",
346+
"--system-button-static-black-outline-secondary-background-color-focus",
347+
"--system-button-static-black-outline-secondary-background-color-hover",
344348
"--system-button-static-black-secondary-background-color-default",
345349
"--system-button-static-black-secondary-background-color-down",
346350
"--system-button-static-black-secondary-background-color-focus",
@@ -349,9 +353,6 @@
349353
"--system-button-static-black-secondary-content-color-down",
350354
"--system-button-static-black-secondary-content-color-focus",
351355
"--system-button-static-black-secondary-content-color-hover",
352-
"--system-button-static-black-secondary-outline-background-color-down",
353-
"--system-button-static-black-secondary-outline-background-color-focus",
354-
"--system-button-static-black-secondary-outline-background-color-hover",
355356
"--system-button-static-black-secondary-outline-border-color-default",
356357
"--system-button-static-black-secondary-outline-border-color-down",
357358
"--system-button-static-black-secondary-outline-border-color-focus",
@@ -364,6 +365,7 @@
364365
"--system-button-static-white-content-color-down",
365366
"--system-button-static-white-content-color-focus",
366367
"--system-button-static-white-content-color-hover",
368+
"--system-button-static-white-outline-not-secondary-background-color-default",
367369
"--system-button-static-white-outline-not-secondary-background-color-down",
368370
"--system-button-static-white-outline-not-secondary-background-color-focus",
369371
"--system-button-static-white-outline-not-secondary-background-color-hover",

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

+63-59
Original file line numberDiff line numberDiff line change
@@ -66,110 +66,114 @@
6666

6767
/* static white: double the selector, double the fun (specificity...) */
6868
&.spectrum-Button--staticWhite {
69-
--mod-button-background-color-default: var(--spectrum-transparent-white-900);
70-
--mod-button-background-color-hover: var(--spectrum-transparent-white-1000);
71-
--mod-button-background-color-down: var(--spectrum-transparent-white-1000);
72-
--mod-button-background-color-focus: var(--spectrum-transparent-white-1000);
69+
--mod-button-background-color-default: var(--spectrum-transparent-white-800);
70+
--mod-button-background-color-hover: var(--spectrum-transparent-white-900);
71+
--mod-button-background-color-down: var(--spectrum-transparent-white-900);
72+
--mod-button-background-color-focus: var(--spectrum-transparent-white-900);
7373

7474
--mod-button-content-color-default: var(--spectrum-black);
7575
--mod-button-content-color-hover: var(--spectrum-black);
7676
--mod-button-content-color-down: var(--spectrum-black);
7777
--mod-button-content-color-focus: var(--spectrum-black);
7878

7979
&.spectrum-Button--secondary {
80-
--mod-button-background-color-default: var(--spectrum-transparent-white-300);
81-
--mod-button-background-color-hover: var(--spectrum-transparent-white-400);
82-
--mod-button-background-color-down: var(--spectrum-transparent-white-500);
83-
--mod-button-background-color-focus: var(--spectrum-transparent-white-400);
80+
--mod-button-background-color-default: var(--spectrum-transparent-white-100);
81+
--mod-button-background-color-hover: var(--spectrum-transparent-white-200);
82+
--mod-button-background-color-down: var(--spectrum-transparent-white-200);
83+
--mod-button-background-color-focus: var(--spectrum-transparent-white-200);
8484

85-
--mod-button-content-color-default: var(--spectrum-white);
86-
--mod-button-content-color-hover: var(--spectrum-white);
87-
--mod-button-content-color-down: var(--spectrum-white);
88-
--mod-button-content-color-focus: var(--spectrum-white);
85+
--mod-button-content-color-default: var(--spectrum-transparent-white-800);
86+
--mod-button-content-color-hover: var(--spectrum-transparent-white-900);
87+
--mod-button-content-color-down: var(--spectrum-transparent-white-900);
88+
--mod-button-content-color-focus: var(--spectrum-transparent-white-900);
8989

9090
&.spectrum-Button--outline {
91-
--mod-button-border-color-default: var(--spectrum-transparent-white-400);
92-
--mod-button-border-color-hover: var(--spectrum-transparent-white-500);
93-
--mod-button-border-color-down: var(--spectrum-transparent-white-600);
94-
--mod-button-border-color-focus: var(--spectrum-transparent-white-500);
91+
--mod-button-border-color-default: var(--spectrum-transparent-white-300);
92+
--mod-button-border-color-hover: var(--spectrum-transparent-white-400);
93+
--mod-button-border-color-down: var(--spectrum-transparent-white-400);
94+
--mod-button-border-color-focus: var(--spectrum-transparent-white-400);
9595
}
9696
}
9797

9898
&.spectrum-Button--outline {
9999
&:not(.spectrum-Button--secondary) {
100-
--mod-button-background-color-hover: var(--spectrum-transparent-white-400);
101-
--mod-button-background-color-down: var(--spectrum-transparent-white-500);
102-
--mod-button-background-color-focus: var(--spectrum-transparent-white-400);
100+
--mod-button-background-color-default: var(--spectrum-transparent-white-25);
101+
--mod-button-background-color-hover: var(--spectrum-transparent-white-100);
102+
--mod-button-background-color-down: var(--spectrum-transparent-white-100);
103+
--mod-button-background-color-focus: var(--spectrum-transparent-white-100);
103104

104-
--mod-button-content-color-default: var(--spectrum-white);
105-
--mod-button-content-color-hover: var(--spectrum-white);
106-
--mod-button-content-color-down: var(--spectrum-white);
107-
--mod-button-content-color-focus: var(--spectrum-white);
105+
--mod-button-content-color-default: var(--spectrum-transparent-white-800);
106+
--mod-button-content-color-hover: var(--spectrum-transparent-white-900);
107+
--mod-button-content-color-down: var(--spectrum-transparent-white-900);
108+
--mod-button-content-color-focus: var(--spectrum-transparent-white-900);
108109

109110
--mod-button-border-color-default: var(--spectrum-transparent-white-800);
110-
--mod-button-border-color-hover: var(--spectrum-transparent-white-1000);
111-
--mod-button-border-color-down: var(--spectrum-transparent-white-1000);
112-
--mod-button-border-color-focus: var(--spectrum-transparent-white-1000);
111+
--mod-button-border-color-hover: var(--spectrum-transparent-white-900);
112+
--mod-button-border-color-down: var(--spectrum-transparent-white-900);
113+
--mod-button-border-color-focus: var(--spectrum-transparent-white-900);
113114
}
114115

115116
&.spectrum-Button--secondary {
116-
--mod-button-background-color-hover: var(--spectrum-transparent-white-400);
117-
--mod-button-background-color-down: var(--spectrum-transparent-white-500);
118-
--mod-button-background-color-focus: var(--spectrum-transparent-white-400);
117+
--mod-button-background-color-hover: var(--spectrum-transparent-white-100);
118+
--mod-button-background-color-down: var(--spectrum-transparent-white-100);
119+
--mod-button-background-color-focus: var(--spectrum-transparent-white-100);
119120
}
120121
}
121122
}
122123

123124
/* static black */
124125
&.spectrum-Button--staticBlack {
125-
--mod-button-background-color-default: var(--spectrum-transparent-black-900);
126-
--mod-button-background-color-hover: var(--spectrum-transparent-black-1000);
127-
--mod-button-background-color-down: var(--spectrum-transparent-black-1000);
128-
--mod-button-background-color-focus: var(--spectrum-transparent-black-1000);
126+
--mod-button-background-color-default: var(--spectrum-transparent-black-800);
127+
--mod-button-background-color-hover: var(--spectrum-transparent-black-900);
128+
--mod-button-background-color-down: var(--spectrum-transparent-black-900);
129+
--mod-button-background-color-focus: var(--spectrum-transparent-black-900);
129130

130131
--mod-button-content-color-default: var(--spectrum-white);
131132
--mod-button-content-color-hover: var(--spectrum-white);
132133
--mod-button-content-color-down: var(--spectrum-white);
133134
--mod-button-content-color-focus: var(--spectrum-white);
134135

135136
&.spectrum-Button--secondary {
136-
--mod-button-background-color-default: var(--spectrum-transparent-black-300);
137-
--mod-button-background-color-hover: var(--spectrum-transparent-black-400);
138-
--mod-button-background-color-down: var(--spectrum-transparent-black-500);
139-
--mod-button-background-color-focus: var(--spectrum-transparent-black-400);
137+
--mod-button-background-color-default: var(--spectrum-transparent-black-100);
138+
--mod-button-background-color-hover: var(--spectrum-transparent-black-200);
139+
--mod-button-background-color-down: var(--spectrum-transparent-black-200);
140+
--mod-button-background-color-focus: var(--spectrum-transparent-black-200);
140141

141-
--mod-button-content-color-default: var(--spectrum-black);
142-
--mod-button-content-color-hover: var(--spectrum-black);
143-
--mod-button-content-color-down: var(--spectrum-black);
144-
--mod-button-content-color-focus: var(--spectrum-black);
142+
--mod-button-content-color-default: var(--spectrum-transparent-black-800);
143+
--mod-button-content-color-hover: var(--spectrum-transparent-black-900);
144+
--mod-button-content-color-down: var(--spectrum-transparent-black-900);
145+
--mod-button-content-color-focus: var(--spectrum-transparent-black-900);
145146

146147
&.spectrum-Button--outline {
147-
--mod-button-background-color-hover: var(--spectrum-transparent-black-400);
148-
--mod-button-background-color-down: var(--spectrum-transparent-black-500);
149-
--mod-button-background-color-focus: var(--spectrum-transparent-black-400);
150-
151-
--mod-button-border-color-default: var(--spectrum-transparent-black-400);
152-
--mod-button-border-color-hover: var(--spectrum-transparent-black-500);
153-
--mod-button-border-color-down: var(--spectrum-transparent-black-600);
154-
--mod-button-border-color-focus: var(--spectrum-transparent-black-500);
148+
--mod-button-border-color-default: var(--spectrum-transparent-black-300);
149+
--mod-button-border-color-hover: var(--spectrum-transparent-black-400);
150+
--mod-button-border-color-down: var(--spectrum-transparent-black-400);
151+
--mod-button-border-color-focus: var(--spectrum-transparent-black-400);
155152
}
156153
}
157154

158155
&.spectrum-Button--outline {
159156
&:not(.spectrum-Button--secondary) {
160-
--mod-button-background-color-hover: var(--spectrum-transparent-black-400);
161-
--mod-button-background-color-down: var(--spectrum-transparent-black-500);
162-
--mod-button-background-color-focus: var(--spectrum-transparent-black-400);
157+
--mod-button-background-color-default: var(--spectrum-transparent-black-25);
158+
--mod-button-background-color-hover: var(--spectrum-transparent-black-100);
159+
--mod-button-background-color-down: var(--spectrum-transparent-black-100);
160+
--mod-button-background-color-focus: var(--spectrum-transparent-black-100);
163161

164-
--mod-button-content-color-default: var(--spectrum-black);
165-
--mod-button-content-color-hover: var(--spectrum-black);
166-
--mod-button-content-color-down: var(--spectrum-black);
167-
--mod-button-content-color-focus: var(--spectrum-black);
162+
--mod-button-content-color-default: var(--spectrum-transparent-black-800);
163+
--mod-button-content-color-hover: var(--spectrum-transparent-black-900);
164+
--mod-button-content-color-down: var(--spectrum-transparent-black-900);
165+
--mod-button-content-color-focus: var(--spectrum-transparent-black-900);
168166

169167
--mod-button-border-color-default: var(--spectrum-transparent-black-800);
170-
--mod-button-border-color-hover: var(--spectrum-transparent-black-600);
171-
--mod-button-border-color-down: var(--spectrum-transparent-black-700);
172-
--mod-button-border-color-focus: var(--spectrum-transparent-black-600);
168+
--mod-button-border-color-hover: var(--spectrum-transparent-black-900);
169+
--mod-button-border-color-down: var(--spectrum-transparent-black-900);
170+
--mod-button-border-color-focus: var(--spectrum-transparent-black-900);
171+
}
172+
173+
&.spectrum-Button--secondary {
174+
--mod-button-background-color-hover: var(--spectrum-transparent-black-100);
175+
--mod-button-background-color-down: var(--spectrum-transparent-black-100);
176+
--mod-button-background-color-focus: var(--spectrum-transparent-black-100);
173177
}
174178
}
175179
}

0 commit comments

Comments
 (0)