Skip to content

Commit d8953bd

Browse files
castastrophecastastrophe
committed
fix(actionbutton): reduce mod interception
1 parent 415952b commit d8953bd

File tree

6 files changed

+110
-74
lines changed

6 files changed

+110
-74
lines changed

‎.changeset/silly-cobras-behave.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@spectrum-css/actionbutton": patch
3+
---
4+
5+
This update aims to simplify `--mod-` access by ensuring local variants and states aren't hooking into those custom properties for overrides. This updates all local variants and states to override the `--spectrum-actionbutton-` properties instead and adjusts the specificity to ensure no regressions in rendered results.
6+
7+
Other changes of note:
8+
9+
- Removes the `.spectrum-ActionButton--sizeM` as unnecessary and duplicate as these styles are applied in the base class.
10+
- Reduces the use of the `:not()` pseudo-class in theme overrides as these selectors are more complex to remap for web component projects.

‎components/actionbutton/dist/metadata.json

+20-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"selectors": [
44
".spectrum-ActionButton",
55
".spectrum-ActionButton--sizeL",
6-
".spectrum-ActionButton--sizeM",
76
".spectrum-ActionButton--sizeS",
87
".spectrum-ActionButton--sizeXL",
98
".spectrum-ActionButton--sizeXS",
@@ -18,10 +17,9 @@
1817
".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold",
1918
".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon",
2019
".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
21-
".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)",
20+
".spectrum-ActionButton.spectrum-ActionButton--emphasized",
2221
".spectrum-ActionButton.spectrum-ActionButton--quiet",
2322
".spectrum-ActionButton.spectrum-ActionButton--sizeL",
24-
".spectrum-ActionButton.spectrum-ActionButton--sizeM",
2523
".spectrum-ActionButton.spectrum-ActionButton--sizeS",
2624
".spectrum-ActionButton.spectrum-ActionButton--sizeXL",
2725
".spectrum-ActionButton.spectrum-ActionButton--sizeXS",
@@ -89,7 +87,19 @@
8987
"--mod-actionbutton-icon-size",
9088
"--mod-actionbutton-label-color",
9189
"--mod-actionbutton-min-width",
92-
"--mod-actionbutton-static-content-color",
90+
"--mod-actionbutton-static-black-content-color",
91+
"--mod-actionbutton-static-black-content-color-down",
92+
"--mod-actionbutton-static-black-content-color-down-selected",
93+
"--mod-actionbutton-static-black-content-color-focus",
94+
"--mod-actionbutton-static-black-content-color-focus-selected",
95+
"--mod-actionbutton-static-black-content-color-hover",
96+
"--mod-actionbutton-static-black-content-color-hover-selected",
97+
"--mod-actionbutton-static-black-content-color-selected",
98+
"--mod-actionbutton-static-white-content-color",
99+
"--mod-actionbutton-static-white-content-color-down",
100+
"--mod-actionbutton-static-white-content-color-focus",
101+
"--mod-actionbutton-static-white-content-color-hover",
102+
"--mod-actionbutton-static-white-content-color-selected",
93103
"--mod-actionbutton-text-to-visual",
94104
"--mod-animation-duration-100",
95105
"--mod-line-height-100",
@@ -103,10 +113,14 @@
103113
"--spectrum-action-button-edge-to-hold-icon-small",
104114
"--spectrum-actionbutton-background-color",
105115
"--spectrum-actionbutton-background-color-default",
116+
"--spectrum-actionbutton-background-color-default-selected",
106117
"--spectrum-actionbutton-background-color-disabled",
107118
"--spectrum-actionbutton-background-color-down",
119+
"--spectrum-actionbutton-background-color-down-selected",
108120
"--spectrum-actionbutton-background-color-focus",
121+
"--spectrum-actionbutton-background-color-focus-selected",
109122
"--spectrum-actionbutton-background-color-hover",
123+
"--spectrum-actionbutton-background-color-hover-selected",
110124
"--spectrum-actionbutton-background-color-selected",
111125
"--spectrum-actionbutton-background-color-selected-disabled",
112126
"--spectrum-actionbutton-background-color-selected-down",
@@ -122,6 +136,7 @@
122136
"--spectrum-actionbutton-border-radius-default",
123137
"--spectrum-actionbutton-border-width",
124138
"--spectrum-actionbutton-content-color",
139+
"--spectrum-actionbutton-content-color-disabled",
125140
"--spectrum-actionbutton-content-color-selected",
126141
"--spectrum-actionbutton-edge-to-hold-icon",
127142
"--spectrum-actionbutton-edge-to-text",
@@ -241,6 +256,7 @@
241256
"--system-action-button-border-color-down",
242257
"--system-action-button-border-color-focus",
243258
"--system-action-button-border-color-hover",
259+
"--system-action-button-border-radius-default",
244260
"--system-action-button-content-color-selected",
245261
"--system-action-button-quiet-background-color-default",
246262
"--system-action-button-quiet-background-color-disabled",
@@ -249,7 +265,6 @@
249265
"--system-action-button-quiet-background-color-hover",
250266
"--system-action-button-quiet-background-color-selected-disabled",
251267
"--system-action-button-size-l-border-radius-default",
252-
"--system-action-button-size-m-border-radius-default",
253268
"--system-action-button-size-s-border-radius-default",
254269
"--system-action-button-size-xl-border-radius-default",
255270
"--system-action-button-size-xs-border-radius-default",

‎components/actionbutton/index.css

+69-63
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,19 @@
4949
}
5050

5151
.spectrum-ActionButton {
52+
--spectrum-actionbutton-sized-height: var(--spectrum-component-height-100);
53+
--spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100);
54+
--spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100);
55+
--spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100);
56+
--spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
57+
--spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
58+
--spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100);
59+
--spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
60+
5261
--spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
5362
--spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default)));
5463
--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));
5565

5666
--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default));
5767
--spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100));
@@ -68,8 +78,51 @@
6878
--spectrum-actionbutton-border-color: transparent;
6979
}
7080

71-
/* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes */
72-
&.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) {
81+
&.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+
87+
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
88+
--mod-actionbutton-content-color-default: var(--mod-actionbutton-static-black-content-color, var(--spectrum-black));
89+
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-black-content-color-hover, var(--spectrum-black));
90+
--mod-actionbutton-content-color-down: var(--mod-actionbutton-static-black-content-color-down, var(--spectrum-black));
91+
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-black-content-color-focus, var(--spectrum-black));
92+
93+
--mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-black-content-color-selected, var(--spectrum-white));
94+
--mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-black-content-color-hover-selected, var(--spectrum-white));
95+
--mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-black-content-color-down-selected, var(--spectrum-white));
96+
--mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-black-content-color-focus-selected, var(--spectrum-white));
97+
98+
--spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
99+
--spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
100+
}
101+
102+
&.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+
109+
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
110+
--mod-actionbutton-content-color-default: var(--mod-actionbutton-static-white-content-color, var(--spectrum-white));
111+
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-white-content-color-hover, var(--spectrum-white));
112+
--mod-actionbutton-content-color-down: var(--mod-actionbutton-static-white-content-color-down, var(--spectrum-white));
113+
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-white-content-color-focus, var(--spectrum-white));
114+
115+
--mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-white-content-color-selected, var(--spectrum-black));
116+
--mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-white-content-color-selected, var(--spectrum-black));
117+
--mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-white-content-color-selected, var(--spectrum-black));
118+
--mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-white-content-color-selected, var(--spectrum-black));
119+
120+
--spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
121+
--spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
122+
}
123+
124+
/* 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 {
73126
--mod-actionbutton-background-color-default-selected: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default));
74127
--mod-actionbutton-background-color-hover-selected: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover));
75128
--mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down));
@@ -81,104 +134,57 @@
81134
--mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white));
82135
}
83136

84-
&.spectrum-ActionButton--staticBlack {
85-
--mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-800);
86-
--mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900);
87-
--mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900);
88-
--mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900);
89-
90-
--mod-actionbutton-content-color-default: var(--spectrum-black);
91-
--mod-actionbutton-content-color-hover: var(--spectrum-black);
92-
--mod-actionbutton-content-color-down: var(--spectrum-black);
93-
--mod-actionbutton-content-color-focus: var(--spectrum-black);
94-
--mod-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
95-
96-
--mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
97-
--mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
98-
--mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
99-
--mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
100-
101-
--mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
102-
}
103-
104-
&.spectrum-ActionButton--staticWhite {
105-
/* background color _not_ selected is coming from the system theme layer */
106-
--mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-white-800);
107-
--mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-900);
108-
--mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900);
109-
--mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900);
110-
111-
--mod-actionbutton-content-color-default: var(--spectrum-white);
112-
--mod-actionbutton-content-color-hover: var(--spectrum-white);
113-
--mod-actionbutton-content-color-down: var(--spectrum-white);
114-
--mod-actionbutton-content-color-focus: var(--spectrum-white);
115-
--mod-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
116-
117-
--mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
118-
--mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
119-
--mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
120-
--mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
121-
122-
--mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
123-
}
124-
125137
&.is-selected {
138+
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
126139
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-actionbutton-background-color-selected));
127140
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-actionbutton-background-color-selected-hover));
128141
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-actionbutton-background-color-selected-down));
129142
--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-actionbutton-background-color-selected-focus));
130-
--mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled);
131-
132-
--mod-actionbutton-border-color-default: transparent;
133-
--mod-actionbutton-border-color-hover: transparent;
134-
--mod-actionbutton-border-color-down: transparent;
135-
--mod-actionbutton-border-color-focus: transparent;
136-
--mod-actionbutton-border-color-disabled: transparent;
137143

138144
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-actionbutton-content-color-selected));
139145
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-actionbutton-content-color-selected));
140146
--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-actionbutton-content-color-selected));
141147
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-actionbutton-content-color-selected));
148+
149+
--spectrum-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled);
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;
142156
}
143157

144158
&:hover {
159+
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
145160
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover));
146161
--mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover));
147162
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-hover, var(--spectrum-neutral-content-color-hover));
148163
}
149164

150165
&:focus-visible {
166+
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
151167
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus));
152168
--mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus));
153169
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-focus, var(--spectrum-neutral-content-color-key-focus));
154170
}
155171

156172
&:active {
173+
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
157174
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down));
158175
--mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down));
159176
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-down, var(--spectrum-neutral-content-color-down));
160177
}
161178

162179
&:disabled,
163180
&.is-disabled {
181+
/* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */
164182
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled));
165183
--mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled));
166-
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color));
184+
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled));
167185
}
168186
}
169187

170-
.spectrum-ActionButton,
171-
.spectrum-ActionButton--sizeM {
172-
--spectrum-actionbutton-sized-height: var(--spectrum-component-height-100);
173-
--spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100);
174-
--spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100);
175-
--spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100);
176-
--spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
177-
--spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
178-
--spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100);
179-
--spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
180-
}
181-
182188
.spectrum-ActionButton--sizeXS {
183189
--spectrum-actionbutton-sized-height: var(--spectrum-component-height-50);
184190
--spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-50);

0 commit comments

Comments
 (0)