Skip to content

Commit a74476c

Browse files
cdransfcdransf
authored
fix(*): define missing custom properties from theme directory (#3476)
* fix(*): define missing custom properties from theme directory * fix(*): restore missing mods and tokens * fix(*): restore missing mod and update metadata * fix(*): restore missing mods and update metadata * fix(*): restore basebutton import * chore(*): update metadata This reverts commit 3d489fe. * fix(*): restore actionbutton staticwhite background color * chore(*): update metadata * fix(*): restore missing custom property for actionbutton * fix(*): actionbutton emphasized + static conflict * fix(*): actionbutton restore missing mods * fix(*): actionbutton clean up mods; fix missing states * fix(*): actionbutton restore focus indicator mods * fix(*): update metadata * fix(*): quiet button background * chore(*): update metadata * chore(*): restore missing file
1 parent be892d9 commit a74476c

File tree

12 files changed

+184
-99
lines changed

12 files changed

+184
-99
lines changed

‎.changeset/sixty-crabs-thank.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@spectrum-css/infieldbutton": patch
3+
"@spectrum-css/actionbutton": patch
4+
"@spectrum-css/clearbutton": patch
5+
"@spectrum-css/avatar": patch
6+
"@spectrum-css/button": patch
7+
"@spectrum-css/dialog": patch
8+
---
9+
10+
Define undefined properties from theme directory.

‎components/actionbutton/index.css‎

Lines changed: 115 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -11,46 +11,6 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14-
@media (forced-colors: active) {
15-
.spectrum-ActionButton {
16-
/* force a more visible focus indicator color */
17-
--highcontrast-actionbutton-focus-indicator-color: ButtonText;
18-
19-
&::after {
20-
/* make sure focus indicator renders */
21-
forced-color-adjust: none;
22-
}
23-
24-
&.is-selected {
25-
--highcontrast-actionbutton-background-color-default: Highlight;
26-
--highcontrast-actionbutton-background-color-hover: Highlight;
27-
--highcontrast-actionbutton-background-color-focus: Highlight;
28-
--highcontrast-actionbutton-background-color-down: Highlight;
29-
--highcontrast-actionbutton-background-color-disabled: ButtonFace;
30-
31-
--highcontrast-actionbutton-border-color-default: HighlightText;
32-
--highcontrast-actionbutton-border-color-hover: HighlightText;
33-
--highcontrast-actionbutton-border-color-focus: HighlightText;
34-
--highcontrast-actionbutton-border-color-down: HighlightText;
35-
--highcontrast-actionbutton-border-color-disabled: GrayText;
36-
37-
--highcontrast-actionbutton-content-color-default: HighlightText;
38-
--highcontrast-actionbutton-content-color-hover: HighlightText;
39-
--highcontrast-actionbutton-content-color-focus: HighlightText;
40-
--highcontrast-actionbutton-content-color-down: HighlightText;
41-
--highcontrast-actionbutton-content-color-disabled: GrayText;
42-
43-
.spectrum-ActionButton-icon,
44-
.spectrum-ActionButton-hold,
45-
.spectrum-ActionButton-label {
46-
/* ensure custom text colors from above get applied */
47-
/* it seems like this shouldn't have to be done, but colors are wrong without it */
48-
forced-color-adjust: none;
49-
}
50-
}
51-
}
52-
}
53-
5414
.spectrum-ActionButton {
5515
--spectrum-actionbutton-background-color-default: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-gray-50)));
5616
--spectrum-actionbutton-background-color-hover: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-gray-100)));
@@ -69,7 +29,9 @@
6929
--spectrum-actionbutton-border-color-focus: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-gray-500)));
7030
--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
7131

72-
--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50);
32+
--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-25);
33+
--spectrum-actionbutton-content-color-disabled: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color));
34+
--spectrum-actionbutton-background-color-disabled: var(--mod-disabled-background-color, var(--spectrum-disabled-background-color));
7335

7436
--spectrum-actionbutton-animation-duration: var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100));
7537
--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-medium));
@@ -101,69 +63,109 @@
10163
}
10264

10365
&.spectrum-ActionButton--quiet {
66+
--mod-actionbutton-border-color-default: transparent;
67+
10468
--mod-actionbutton-background-color-default: transparent;
10569
--mod-actionbutton-background-color-hover: var(--spectrum-gray-100);
10670
--mod-actionbutton-background-color-down: var(--spectrum-gray-200);
10771
--mod-actionbutton-background-color-focus: var(--spectrum-gray-100);
72+
73+
&:disabled:not(.is-selected),
74+
&.is-disabled:not(.is-selected) {
75+
--mod-actionbutton-border-color-disabled: transparent;
76+
--mod-actionbutton-background-color-disabled: transparent;
77+
}
10878
}
10979

11080
&.spectrum-ActionButton--staticBlack {
81+
--mod-actionbutton-background-color-default: transparent;
82+
11183
--mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500);
11284
--mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600);
11385
--mod-actionbutton-border-color-down: var(--spectrum-transparent-black-700);
11486
--mod-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
87+
88+
--mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
11589

11690
--spectrum-actionbutton-background-color-disabled: transparent;
11791
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200);
92+
93+
&:disabled,
94+
.is-disabled {
95+
--mod-disabled-content-color: var(--spectrum-transparent-black-500);
96+
--mod-actionbutton-border-color-disabled: var(--spectrum-transparent-black-500);
97+
}
11898

119-
&,
12099
&.spectrum-ActionButton--quiet {
121-
--mod-actionbutton-background-color-default: transparent;
122-
--mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-400);
123-
--mod-actionbutton-background-color-down: var(--spectrum-transparent-black-500);
124-
--mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-400);
100+
--mod-actionbutton-border-color-default: transparent;
125101
}
126102
}
127103

128104
&.spectrum-ActionButton--staticWhite {
105+
--mod-actionbutton-background-color-default: transparent;
106+
129107
--mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500);
130108
--mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600);
131109
--mod-actionbutton-border-color-down: var(--spectrum-transparent-white-700);
132110
--mod-actionbutton-border-color-focus: var(--spectrum-transparent-white-600);
111+
112+
--mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
133113

134114
--spectrum-actionbutton-background-color-disabled: transparent;
135115
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200);
116+
117+
&:disabled,
118+
.is-disabled {
119+
--mod-disabled-content-color: var(--spectrum-transparent-white-500);
120+
--mod-actionbutton-border-color-disabled: var(--spectrum-transparent-white-500);
121+
}
136122

137-
&,
138123
&.spectrum-ActionButton--quiet {
139-
--mod-actionbutton-background-color-default: transparent;
140-
--mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-400);
141-
--mod-actionbutton-background-color-down: var(--spectrum-transparent-white-500);
142-
--mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-400);
124+
--mod-actionbutton-border-color-default: transparent;
143125
}
144126
}
145127

146128
&.is-selected {
147-
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
148-
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
149-
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
150-
--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus));
151-
152-
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-25));
153-
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-25));
154-
--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-25));
155-
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-25));
156-
157-
&.spectrum-ActionButton--emphasized {
158-
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default));
159-
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover));
160-
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down));
161-
--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus));
162-
163-
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white));
164-
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white));
165-
--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white));
166-
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white));
129+
--mod-actionbutton-background-color-default: var(--spectrum-actionbutton-background-color-selected);
130+
--mod-actionbutton-background-color-hover: var(--spectrum-actionbutton-background-color-selected-hover);
131+
--mod-actionbutton-background-color-down: var(--spectrum-actionbutton-background-color-selected-down);
132+
--mod-actionbutton-background-color-focus: var(--spectrum-actionbutton-background-color-selected-focus);
133+
--mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled);
134+
135+
--mod-actionbutton-border-color-default: transparent;
136+
--mod-actionbutton-border-color-hover: transparent;
137+
--mod-actionbutton-border-color-down: transparent;
138+
--mod-actionbutton-border-color-focus: transparent;
139+
--mod-actionbutton-border-color-disabled: transparent;
140+
141+
--mod-actionbutton-content-color-default: var(--spectrum-actionbutton-content-color-selected);
142+
--mod-actionbutton-content-color-hover: var(--spectrum-actionbutton-content-color-selected);
143+
--mod-actionbutton-content-color-down: var(--spectrum-actionbutton-content-color-selected);
144+
--mod-actionbutton-content-color-focus: var(--spectrum-actionbutton-content-color-selected);
145+
146+
&.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) {
147+
--mod-actionbutton-background-color-default: var(--spectrum-accent-background-color-default);
148+
--mod-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover);
149+
--mod-actionbutton-background-color-down: var(--spectrum-accent-background-color-down);
150+
--mod-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus);
151+
152+
--mod-actionbutton-content-color-default: var(--spectrum-white);
153+
--mod-actionbutton-content-color-hover: var(--spectrum-white);
154+
--mod-actionbutton-content-color-down: var(--spectrum-white);
155+
--mod-actionbutton-content-color-focus: var(--spectrum-white);
156+
}
157+
158+
&:disabled,
159+
.is-disabled {
160+
&.spectrum-ActionButton--staticBlack {
161+
--mod-disabled-content-color: var(--spectrum-transparent-black-500);
162+
--mod-disabled-background-color: var(--spectrum-transparent-black-100);
163+
}
164+
165+
&.spectrum-ActionButton--staticWhite {
166+
--mod-disabled-content-color: var(--spectrum-transparent-white-500);
167+
--mod-disabled-background-color: var(--spectrum-transparent-white-100);
168+
}
167169
}
168170
}
169171
}
@@ -266,6 +268,8 @@
266268

267269
/* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */
268270
-webkit-appearance: button;
271+
272+
border-style: solid;
269273

270274
transition:
271275
background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
@@ -410,3 +414,43 @@ a.spectrum-ActionButton {
410414
/* Augment the margin correction for the icon only scenario */
411415
margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
412416
}
417+
418+
@media (forced-colors: active) {
419+
.spectrum-ActionButton {
420+
/* force a more visible focus indicator color */
421+
--highcontrast-actionbutton-focus-indicator-color: ButtonText;
422+
423+
&::after {
424+
/* make sure focus indicator renders */
425+
forced-color-adjust: none;
426+
}
427+
428+
&.is-selected {
429+
--highcontrast-actionbutton-background-color-default: Highlight;
430+
--highcontrast-actionbutton-background-color-hover: Highlight;
431+
--highcontrast-actionbutton-background-color-focus: Highlight;
432+
--highcontrast-actionbutton-background-color-down: Highlight;
433+
--highcontrast-actionbutton-background-color-disabled: ButtonFace;
434+
435+
--highcontrast-actionbutton-border-color-default: HighlightText;
436+
--highcontrast-actionbutton-border-color-hover: HighlightText;
437+
--highcontrast-actionbutton-border-color-focus: HighlightText;
438+
--highcontrast-actionbutton-border-color-down: HighlightText;
439+
--highcontrast-actionbutton-border-color-disabled: GrayText;
440+
441+
--highcontrast-actionbutton-content-color-default: HighlightText;
442+
--highcontrast-actionbutton-content-color-hover: HighlightText;
443+
--highcontrast-actionbutton-content-color-focus: HighlightText;
444+
--highcontrast-actionbutton-content-color-down: HighlightText;
445+
--highcontrast-actionbutton-content-color-disabled: GrayText;
446+
447+
.spectrum-ActionButton-icon,
448+
.spectrum-ActionButton-hold,
449+
.spectrum-ActionButton-label {
450+
/* ensure custom text colors from above get applied */
451+
/* it seems like this shouldn't have to be done, but colors are wrong without it */
452+
forced-color-adjust: none;
453+
}
454+
}
455+
}
456+
}

‎components/actionbutton/metadata/metadata.json‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,25 @@
1414
".spectrum-ActionButton-label:empty",
1515
".spectrum-ActionButton.is-disabled",
1616
".spectrum-ActionButton.is-selected",
17+
".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticBlack",
18+
".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticWhite",
1719
".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold",
1820
".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon",
1921
".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
20-
".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
22+
".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)",
23+
".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack:disabled",
24+
".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite:disabled",
2125
".spectrum-ActionButton.spectrum-ActionButton--quiet",
26+
".spectrum-ActionButton.spectrum-ActionButton--quiet.is-disabled:not(.is-selected)",
27+
".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
2228
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
29+
".spectrum-ActionButton.spectrum-ActionButton--staticBlack .is-disabled",
2330
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
31+
".spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled",
2432
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
33+
".spectrum-ActionButton.spectrum-ActionButton--staticWhite .is-disabled",
2534
".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
35+
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled",
2636
".spectrum-ActionButton::-moz-focus-inner",
2737
".spectrum-ActionButton:active",
2838
".spectrum-ActionButton:after",
@@ -38,18 +48,10 @@
3848
"modifiers": [
3949
"--mod-actionbutton-animation-duration",
4050
"--mod-actionbutton-background-color-default",
41-
"--mod-actionbutton-background-color-default-selected",
42-
"--mod-actionbutton-background-color-default-selected-emphasized",
4351
"--mod-actionbutton-background-color-disabled",
4452
"--mod-actionbutton-background-color-down",
45-
"--mod-actionbutton-background-color-down-selected",
46-
"--mod-actionbutton-background-color-down-selected-emphasized",
4753
"--mod-actionbutton-background-color-focus",
48-
"--mod-actionbutton-background-color-focus-selected",
49-
"--mod-actionbutton-background-color-focus-selected-emphasized",
5054
"--mod-actionbutton-background-color-hover",
51-
"--mod-actionbutton-background-color-hover-selected",
52-
"--mod-actionbutton-background-color-hover-selected-emphasized",
5355
"--mod-actionbutton-border-color-default",
5456
"--mod-actionbutton-border-color-disabled",
5557
"--mod-actionbutton-border-color-down",
@@ -58,18 +60,10 @@
5860
"--mod-actionbutton-border-radius",
5961
"--mod-actionbutton-border-width",
6062
"--mod-actionbutton-content-color-default",
61-
"--mod-actionbutton-content-color-default-selected",
62-
"--mod-actionbutton-content-color-default-selected-emphasized",
6363
"--mod-actionbutton-content-color-disabled",
6464
"--mod-actionbutton-content-color-down",
65-
"--mod-actionbutton-content-color-down-selected",
66-
"--mod-actionbutton-content-color-down-selected-emphasized",
6765
"--mod-actionbutton-content-color-focus",
68-
"--mod-actionbutton-content-color-focus-selected",
69-
"--mod-actionbutton-content-color-focus-selected-emphasized",
7066
"--mod-actionbutton-content-color-hover",
71-
"--mod-actionbutton-content-color-hover-selected",
72-
"--mod-actionbutton-content-color-hover-selected-emphasized",
7367
"--mod-actionbutton-edge-to-hold-icon",
7468
"--mod-actionbutton-edge-to-text",
7569
"--mod-actionbutton-edge-to-visual",
@@ -83,7 +77,9 @@
8377
"--mod-actionbutton-icon-size",
8478
"--mod-actionbutton-label-color",
8579
"--mod-actionbutton-min-width",
86-
"--mod-actionbutton-text-to-visual"
80+
"--mod-actionbutton-text-to-visual",
81+
"--mod-disabled-background-color",
82+
"--mod-disabled-content-color"
8783
],
8884
"component": [
8985
"--spectrum-action-button-edge-to-hold-icon-extra-large",
@@ -161,7 +157,9 @@
161157
"--spectrum-corner-radius-medium-size-large",
162158
"--spectrum-corner-radius-medium-size-medium",
163159
"--spectrum-corner-radius-medium-size-small",
160+
"--spectrum-disabled-background-color",
164161
"--spectrum-disabled-border-color",
162+
"--spectrum-disabled-content-color",
165163
"--spectrum-focus-indicator-color",
166164
"--spectrum-focus-indicator-gap",
167165
"--spectrum-focus-indicator-thickness",
@@ -188,19 +186,20 @@
188186
"--spectrum-neutral-content-color-hover",
189187
"--spectrum-neutral-content-color-key-focus",
190188
"--spectrum-sans-font-family-stack",
189+
"--spectrum-static-black-focus-indicator-color",
190+
"--spectrum-static-white-focus-indicator-color",
191191
"--spectrum-text-to-visual-100",
192192
"--spectrum-text-to-visual-200",
193193
"--spectrum-text-to-visual-300",
194194
"--spectrum-text-to-visual-50",
195195
"--spectrum-text-to-visual-75",
196196
"--spectrum-transparent-black-100",
197197
"--spectrum-transparent-black-200",
198-
"--spectrum-transparent-black-400",
199198
"--spectrum-transparent-black-500",
200199
"--spectrum-transparent-black-600",
201200
"--spectrum-transparent-black-700",
201+
"--spectrum-transparent-white-100",
202202
"--spectrum-transparent-white-200",
203-
"--spectrum-transparent-white-400",
204203
"--spectrum-transparent-white-500",
205204
"--spectrum-transparent-white-600",
206205
"--spectrum-transparent-white-700",

‎components/avatar/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@
140140
opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity));
141141

142142
&.is-disabled {
143-
opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)));
143+
opacity: var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled));
144144
}
145145
}
146146

‎components/avatar/metadata/metadata.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,5 @@
7373
"--spectrum-focus-indicator-thickness"
7474
],
7575
"passthroughs": [],
76-
"high-contrast": [
77-
"--highcontrast-avatar-color-opacity-disabled",
78-
"--highcontrast-avatar-focus-indicator-color"
79-
]
76+
"high-contrast": ["--highcontrast-avatar-focus-indicator-color"]
8077
}

0 commit comments

Comments
 (0)