Skip to content

Commit d2272ea

Browse files
rise-erpeldingcastastrophe
rise-erpelding
authored and
castastrophe
committed
fix(button): adjust s2 static colors [SWC-496] (#3613)
1 parent c351c45 commit d2272ea

File tree

14 files changed

+114
-106
lines changed

14 files changed

+114
-106
lines changed

‎.changeset/kind-mails-collect.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
"@spectrum-css/button": patch
3+
---
4+
5+
Adjusts static color buttons to more closely resemble the S2 specifications. There are no expected changes to non-static button variants in S2, and no expected changes to other themes.
6+
7+
This PR includes changes to:
8+
9+
- Static white primary button (outline variant), static white secondary button (fill variant), static black primary button (outline variant), static black secondary button (fill variant)
10+
- Static white secondary button (outline variant) and static black secondary button (outline variant) border and background colors
11+
- Static color buttons' content color
12+
- Static white primary button (fill variant) and static black primary button (fill variant) background colors

‎components/alertbanner/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
}
5050
},
5151
"devDependencies": {
52-
"@spectrum-css/button": "14.1.2",
52+
"@spectrum-css/button": "14.1.3",
5353
"@spectrum-css/closebutton": "6.1.0",
5454
"@spectrum-css/divider": "5.1.0",
5555
"@spectrum-css/icon": "9.1.0",

‎components/button/CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# Change log
22

3+
## 14.1.3
4+
5+
### Patch Changes
6+
7+
📝 [#3613](https://github.com/adobe/spectrum-css/pull/3613) [`b01e816`](https://github.com/adobe/spectrum-css/commit/b01e8160c1cb48992a3643931f85ebc604246542) Thanks [@rise-erpelding](https://github.com/rise-erpelding)!
8+
9+
Adjust static white and static black button colors to match S2 design specification.
10+
311
## 14.1.2
412

513
### Patch Changes

‎components/button/dist/metadata.json‎

Lines changed: 12 additions & 10 deletions
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‎

Lines changed: 63 additions & 59 deletions
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
}

‎components/buttongroup/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
}
3838
},
3939
"devDependencies": {
40-
"@spectrum-css/button": "14.1.2",
40+
"@spectrum-css/button": "14.1.3",
4141
"@spectrum-css/tokens": "16.0.1"
4242
},
4343
"keywords": [

‎components/coachmark/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
"devDependencies": {
6060
"@spectrum-css/actionbutton": "7.1.2",
6161
"@spectrum-css/actionmenu": "7.1.1",
62-
"@spectrum-css/button": "14.1.2",
62+
"@spectrum-css/button": "14.1.3",
6363
"@spectrum-css/buttongroup": "9.1.0",
6464
"@spectrum-css/menu": "9.1.1",
6565
"@spectrum-css/popover": "8.2.0",

‎components/inlinealert/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
}
4242
},
4343
"devDependencies": {
44-
"@spectrum-css/button": "14.1.2",
44+
"@spectrum-css/button": "14.1.3",
4545
"@spectrum-css/icon": "9.1.0",
4646
"@spectrum-css/tokens": "16.0.1"
4747
},

‎components/pagination/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
},
5151
"devDependencies": {
5252
"@spectrum-css/actionbutton": "7.1.2",
53-
"@spectrum-css/button": "14.1.2",
53+
"@spectrum-css/button": "14.1.3",
5454
"@spectrum-css/icon": "9.1.0",
5555
"@spectrum-css/textfield": "8.1.1",
5656
"@spectrum-css/tokens": "16.0.1"

‎components/table/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
}
5050
},
5151
"devDependencies": {
52-
"@spectrum-css/button": "14.1.2",
52+
"@spectrum-css/button": "14.1.3",
5353
"@spectrum-css/checkbox": "10.1.1",
5454
"@spectrum-css/icon": "9.1.0",
5555
"@spectrum-css/thumbnail": "8.1.0",

0 commit comments

Comments
 (0)