Skip to content

Commit d687176

Browse files
castastrophecastastrophe
committed
chore: working through static color specificity
1 parent d214ec4 commit d687176

File tree

3 files changed

+59
-59
lines changed

3 files changed

+59
-59
lines changed

‎components/actionbutton/dist/metadata.json

+10-4
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold",
1818
".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon",
1919
".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
20-
".spectrum-ActionButton.spectrum-ActionButton--emphasized",
20+
".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)",
2121
".spectrum-ActionButton.spectrum-ActionButton--quiet",
2222
".spectrum-ActionButton.spectrum-ActionButton--sizeL",
2323
".spectrum-ActionButton.spectrum-ActionButton--sizeS",
@@ -54,6 +54,7 @@
5454
"--mod-actionbutton-background-color-hover",
5555
"--mod-actionbutton-background-color-hover-selected",
5656
"--mod-actionbutton-background-color-hover-selected-emphasized",
57+
"--mod-actionbutton-background-color-selected-disabled",
5758
"--mod-actionbutton-border-color-default",
5859
"--mod-actionbutton-border-color-disabled",
5960
"--mod-actionbutton-border-color-down",
@@ -112,9 +113,7 @@
112113
"--spectrum-action-button-edge-to-hold-icon-large",
113114
"--spectrum-action-button-edge-to-hold-icon-medium",
114115
"--spectrum-action-button-edge-to-hold-icon-small",
115-
"--spectrum-actionbutton-background-color",
116116
"--spectrum-actionbutton-background-color-default",
117-
"--spectrum-actionbutton-background-color-default-selected",
118117
"--spectrum-actionbutton-background-color-disabled",
119118
"--spectrum-actionbutton-background-color-down",
120119
"--spectrum-actionbutton-background-color-down-selected",
@@ -136,7 +135,6 @@
136135
"--spectrum-actionbutton-border-radius",
137136
"--spectrum-actionbutton-border-radius-default",
138137
"--spectrum-actionbutton-border-width",
139-
"--spectrum-actionbutton-content-color",
140138
"--spectrum-actionbutton-content-color-disabled",
141139
"--spectrum-actionbutton-content-color-selected",
142140
"--spectrum-actionbutton-edge-to-hold-icon",
@@ -272,8 +270,12 @@
272270
"--system-action-button-static-black-background-color-default",
273271
"--system-action-button-static-black-background-color-disabled",
274272
"--system-action-button-static-black-background-color-down",
273+
"--system-action-button-static-black-background-color-down-selected",
275274
"--system-action-button-static-black-background-color-focus",
275+
"--system-action-button-static-black-background-color-focus-selected",
276276
"--system-action-button-static-black-background-color-hover",
277+
"--system-action-button-static-black-background-color-hover-selected",
278+
"--system-action-button-static-black-background-color-selected",
277279
"--system-action-button-static-black-background-color-selected-disabled",
278280
"--system-action-button-static-black-border-color-default",
279281
"--system-action-button-static-black-border-color-disabled",
@@ -288,8 +290,12 @@
288290
"--system-action-button-static-white-background-color-default",
289291
"--system-action-button-static-white-background-color-disabled",
290292
"--system-action-button-static-white-background-color-down",
293+
"--system-action-button-static-white-background-color-down-selected",
291294
"--system-action-button-static-white-background-color-focus",
295+
"--system-action-button-static-white-background-color-focus-selected",
292296
"--system-action-button-static-white-background-color-hover",
297+
"--system-action-button-static-white-background-color-hover-selected",
298+
"--system-action-button-static-white-background-color-selected",
293299
"--system-action-button-static-white-background-color-selected-disabled",
294300
"--system-action-button-static-white-border-color-default",
295301
"--system-action-button-static-white-border-color-disabled",

‎components/actionbutton/index.css

+35-49
Original file line numberDiff line numberDiff line change
@@ -58,18 +58,6 @@
5858
--spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100);
5959
--spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
6060

61-
--spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
62-
--spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default)));
63-
--spectrum-actionbutton-content-color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default)));
64-
--spectrum-actionbutton-content-color-disabled: var(--mod-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color));
65-
66-
--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default));
67-
--spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100));
68-
69-
--spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
70-
--spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
71-
--spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color)));
72-
7361
&:dir(rtl) {
7462
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
7563
}
@@ -79,11 +67,6 @@
7967
}
8068

8169
&.spectrum-ActionButton--staticBlack {
82-
--spectrum-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-800);
83-
--spectrum-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900);
84-
--spectrum-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900);
85-
--spectrum-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900);
86-
8770
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
8871
--mod-actionbutton-content-color-default: var(--mod-actionbutton-static-black-content-color, var(--spectrum-black));
8972
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-black-content-color-hover, var(--spectrum-black));
@@ -100,12 +83,6 @@
10083
}
10184

10285
&.spectrum-ActionButton--staticWhite {
103-
/* background color _not_ selected is coming from the system theme layer */
104-
--spectrum-actionbutton-background-color-default-selected: var(--spectrum-transparent-white-800);
105-
--spectrum-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-900);
106-
--spectrum-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900);
107-
--spectrum-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900);
108-
10986
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
11087
--mod-actionbutton-content-color-default: var(--mod-actionbutton-static-white-content-color, var(--spectrum-white));
11188
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-white-content-color-hover, var(--spectrum-white));
@@ -122,7 +99,7 @@
12299
}
123100

124101
/* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes; must list after static variants */
125-
&.spectrum-ActionButton--emphasized {
102+
&.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) {
126103
--mod-actionbutton-background-color-default-selected: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default));
127104
--mod-actionbutton-background-color-hover-selected: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover));
128105
--mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down));
@@ -134,27 +111,6 @@
134111
--mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white));
135112
}
136113

137-
&.is-selected {
138-
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
139-
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-actionbutton-background-color-selected));
140-
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-actionbutton-background-color-selected-hover));
141-
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-actionbutton-background-color-selected-down));
142-
--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-actionbutton-background-color-selected-focus));
143-
--mod-actionbutton-background-color-disabled: var(--mod-actionbutton-background-color-selected-disabled, var(--spectrum-actionbutton-background-color-selected-disabled));
144-
145-
/* @deprecated --mod-actionbutton-static-content-color in favor of the more specific, state-based alternatives */
146-
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--mod-actionbutton-static-content-color, var(--spectrum-actionbutton-content-color-selected)));
147-
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--mod-actionbutton-static-content-color, var(--spectrum-actionbutton-content-color-selected)));
148-
--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--mod-actionbutton-static-content-color, var(--spectrum-actionbutton-content-color-selected)));
149-
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--mod-actionbutton-static-content-color, var(--spectrum-actionbutton-content-color-selected)));
150-
151-
--spectrum-actionbutton-border-color-default: transparent;
152-
--spectrum-actionbutton-border-color-hover: transparent;
153-
--spectrum-actionbutton-border-color-down: transparent;
154-
--spectrum-actionbutton-border-color-focus: transparent;
155-
--spectrum-actionbutton-border-color-disabled: transparent;
156-
}
157-
158114
&:hover {
159115
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
160116
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover));
@@ -181,7 +137,28 @@
181137
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
182138
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled));
183139
--mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled));
184-
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled));
140+
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color)));
141+
}
142+
143+
&.is-selected {
144+
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
145+
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-actionbutton-background-color-selected));
146+
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-actionbutton-background-color-selected-hover));
147+
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-actionbutton-background-color-selected-down));
148+
--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-actionbutton-background-color-selected-focus));
149+
--mod-actionbutton-background-color-disabled: var(--mod-actionbutton-background-color-selected-disabled, var(--spectrum-actionbutton-background-color-selected-disabled));
150+
151+
/* @deprecated --mod-actionbutton-static-content-color in favor of the more specific, state-based alternatives */
152+
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--mod-actionbutton-static-content-color, var(--spectrum-actionbutton-content-color-selected)));
153+
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--mod-actionbutton-static-content-color, var(--spectrum-actionbutton-content-color-selected)));
154+
--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--mod-actionbutton-static-content-color, var(--spectrum-actionbutton-content-color-selected)));
155+
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--mod-actionbutton-static-content-color, var(--spectrum-actionbutton-content-color-selected)));
156+
157+
--spectrum-actionbutton-border-color-default: transparent;
158+
--spectrum-actionbutton-border-color-hover: transparent;
159+
--spectrum-actionbutton-border-color-down: transparent;
160+
--spectrum-actionbutton-border-color-focus: transparent;
161+
--spectrum-actionbutton-border-color-disabled: transparent;
185162
}
186163
}
187164

@@ -230,6 +207,15 @@
230207
}
231208

232209
.spectrum-ActionButton {
210+
--spectrum-actionbutton-content-color-disabled: var(--mod-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color));
211+
212+
--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default));
213+
--spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100));
214+
215+
--spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
216+
--spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
217+
--spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color)));
218+
233219
/* Variables leveraging t-shirt sizing */
234220
--spectrum-actionbutton-height: var(--mod-actionbutton-height, var(--spectrum-actionbutton-sized-height));
235221
--spectrum-actionbutton-icon-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-sized-icon-size));
@@ -256,9 +242,9 @@
256242
/* Start with text-only padding */
257243
padding-inline: var(--spectrum-actionbutton-edge-to-text);
258244

259-
background-color: var(--spectrum-actionbutton-background-color);
260-
border-color: var(--spectrum-actionbutton-border-color);
261-
color: var(--spectrum-actionbutton-content-color);
245+
background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
246+
border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default)));
247+
color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default)));
262248

263249
transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
264250

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

+14-6
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,17 @@
6666
--spectrum-actionbutton-border-color-focus: transparent;
6767
--spectrum-actionbutton-border-color-disabled: transparent;
6868

69-
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
70-
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color);
71-
7269
--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100);
7370
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200);
7471
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200);
7572
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200);
73+
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
74+
75+
--spectrum-actionbutton-background-color-selected: var(--spectrum-transparent-black-800);
76+
--spectrum-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900);
77+
--spectrum-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900);
78+
--spectrum-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900);
79+
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color);
7680

7781
&.spectrum-ActionButton--quiet {
7882
--spectrum-actionbutton-background-color-default: transparent;
@@ -90,13 +94,17 @@
9094
--spectrum-actionbutton-border-color-focus: transparent;
9195
--spectrum-actionbutton-border-color-disabled: transparent;
9296

93-
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
94-
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color);
95-
9697
--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100);
9798
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200);
9899
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200);
99100
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200);
101+
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
102+
103+
--spectrum-actionbutton-background-color-selected: var(--spectrum-transparent-white-800);
104+
--spectrum-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-900);
105+
--spectrum-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900);
106+
--spectrum-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900);
107+
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color);
100108

101109
&.spectrum-ActionButton--quiet {
102110
--spectrum-actionbutton-background-color-default: transparent;

0 commit comments

Comments
 (0)