@spectrum-web-components/styles 1.12.0-testing.20260223092154 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,310 @@
1
+ /**
2
+ * Copyright 2026 Adobe. All rights reserved.
3
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
+ * you may not use this file except in compliance with the License. You may obtain a copy
5
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
6
+ *
7
+ * Unless required by applicable law or agreed to in writing, software distributed under
8
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
+ * OF ANY KIND, either express or implied. See the License for the specific language
10
+ * governing permissions and limitations under the License.
11
+ */
12
+
13
+ /* Links as buttons do not support:
14
+ * - selected
15
+ * - disabled
16
+ * - hold affordance
17
+ */
18
+
19
+ /* Base defaults and host layout */
20
+ .spectrum-ActionButton,
21
+ ::slotted(.spectrum-ActionButton) {
22
+ --spectrum-actionbutton-background-color-default: var(--system-action-button-background-color-default);
23
+ --spectrum-actionbutton-background-color-hover: var(--system-action-button-background-color-hover);
24
+ --spectrum-actionbutton-background-color-down: var(--system-action-button-background-color-down);
25
+ --spectrum-actionbutton-background-color-focus: var(--system-action-button-background-color-focus);
26
+ --spectrum-actionbutton-border-color-default: var(--system-action-button-border-color-default);
27
+ --spectrum-actionbutton-border-color-hover: var(--system-action-button-border-color-hover);
28
+ --spectrum-actionbutton-border-color-down: var(--system-action-button-border-color-down);
29
+ --spectrum-actionbutton-border-color-focus: var(--system-action-button-border-color-focus);
30
+ --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-m-border-radius-default);
31
+ --spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
32
+ --spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default)));
33
+ --spectrum-actionbutton-content-color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default)));
34
+ --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default));
35
+ --spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100));
36
+ --spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
37
+ --spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
38
+ --spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color)));
39
+ --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100);
40
+ --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100);
41
+ --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100);
42
+ --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100);
43
+ --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
44
+ --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100);
45
+ --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
46
+ --spectrum-actionbutton-height: var(--mod-actionbutton-height, var(--spectrum-actionbutton-sized-height));
47
+ --spectrum-actionbutton-icon-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-sized-icon-size));
48
+ --spectrum-actionbutton-font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-sized-font-size));
49
+ --spectrum-actionbutton-text-to-visual: var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-sized-text-to-visual));
50
+ --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-actionbutton-sized-edge-to-visual) - var(--spectrum-actionbutton-border-width)));
51
+ --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-actionbutton-sized-edge-to-text) - var(--spectrum-actionbutton-border-width)));
52
+ --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-actionbutton-sized-edge-to-visual-only) - var(--spectrum-actionbutton-border-width)));
53
+
54
+ -webkit-font-smoothing: antialiased;
55
+ -moz-osx-font-smoothing: grayscale;
56
+ box-sizing: border-box;
57
+ display: inline-flex;
58
+ position: relative;
59
+ gap: calc(var(--spectrum-actionbutton-text-to-visual) + var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only));
60
+ align-items: center;
61
+ justify-content: center;
62
+ min-inline-size: var(--mod-actionbutton-min-width, calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size)));
63
+ block-size: var(--spectrum-actionbutton-height);
64
+ padding-inline: var(--spectrum-actionbutton-edge-to-text);
65
+ margin: 0;
66
+ font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
67
+ font-size: var(--spectrum-actionbutton-font-size);
68
+ line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
69
+ vertical-align: top;
70
+ color: var(--spectrum-actionbutton-content-color);
71
+ text-transform: none;
72
+ -webkit-text-decoration: none;
73
+ text-decoration: none;
74
+ background-color: var(--spectrum-actionbutton-background-color);
75
+ border-color: var(--spectrum-actionbutton-border-color);
76
+ border-style: solid;
77
+ border-width: var(--spectrum-actionbutton-border-width);
78
+ border-radius: var(--spectrum-actionbutton-border-radius);
79
+ overflow: visible;
80
+ -webkit-appearance: button;
81
+ cursor: pointer;
82
+ -webkit-user-select: none;
83
+ user-select: none;
84
+ transition:
85
+ background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
86
+ border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
87
+ color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
88
+ box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
89
+ }
90
+
91
+ /* Size variants */
92
+ .spectrum-ActionButton--sizeXS,
93
+ ::slotted(.spectrum-ActionButton--sizeXS) {
94
+ --spectrum-actionbutton-sized-height: var(--spectrum-component-height-50);
95
+ --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-50);
96
+ --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-50);
97
+ --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-50);
98
+ --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-50);
99
+ --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-50);
100
+ --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-50);
101
+ --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width));
102
+ --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-xs-border-radius-default);
103
+
104
+ min-width: var(--spectrum-actionbutton-height, 0);
105
+ }
106
+
107
+ .spectrum-ActionButton--sizeS,
108
+ ::slotted(.spectrum-ActionButton--sizeS) {
109
+ --spectrum-actionbutton-sized-height: var(--spectrum-component-height-75);
110
+ --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-75);
111
+ --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-75);
112
+ --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-75);
113
+ --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
114
+ --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-75);
115
+ --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-75);
116
+ --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width));
117
+ --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-s-border-radius-default);
118
+ }
119
+
120
+ .spectrum-ActionButton--sizeM,
121
+ ::slotted(.spectrum-ActionButton--sizeM) {
122
+ --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width));
123
+ }
124
+
125
+ .spectrum-ActionButton--sizeL,
126
+ ::slotted(.spectrum-ActionButton--sizeL) {
127
+ --spectrum-actionbutton-sized-height: var(--spectrum-component-height-200);
128
+ --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-200);
129
+ --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-200);
130
+ --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-200);
131
+ --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
132
+ --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-200);
133
+ --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-200);
134
+ --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width));
135
+ --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-l-border-radius-default);
136
+ }
137
+
138
+ .spectrum-ActionButton--sizeXL,
139
+ ::slotted(.spectrum-ActionButton--sizeXL) {
140
+ --spectrum-actionbutton-sized-height: var(--spectrum-component-height-300);
141
+ --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-300);
142
+ --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-300);
143
+ --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-300);
144
+ --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
145
+ --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-300);
146
+ --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-300);
147
+ --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width));
148
+ --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-xl-border-radius-default);
149
+ }
150
+
151
+ /* Variant tokens */
152
+ .spectrum-ActionButton--quiet,
153
+ ::slotted(.spectrum-ActionButton--quiet) {
154
+ --spectrum-actionbutton-border-color: transparent;
155
+ --spectrum-actionbutton-background-color-default: var(--system-action-button-quiet-background-color-default);
156
+ --spectrum-actionbutton-background-color-hover: var(--system-action-button-quiet-background-color-hover);
157
+ --spectrum-actionbutton-background-color-down: var(--system-action-button-quiet-background-color-down);
158
+ --spectrum-actionbutton-background-color-focus: var(--system-action-button-quiet-background-color-focus);
159
+ }
160
+
161
+ .spectrum-ActionButton--staticBlack,
162
+ ::slotted(.spectrum-ActionButton--staticBlack) {
163
+ --mod-actionbutton-content-color-default: var(--spectrum-actionbutton-static-black-content-color-default, var(--spectrum-black));
164
+ --mod-actionbutton-content-color-hover: var(--spectrum-actionbutton-static-black-content-color-hover, var(--spectrum-black));
165
+ --mod-actionbutton-content-color-down: var(--spectrum-actionbutton-static-black-content-color-down, var(--spectrum-black));
166
+ --mod-actionbutton-content-color-focus: var(--spectrum-actionbutton-static-black-content-color-focus, var(--spectrum-black));
167
+ --mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
168
+ --spectrum-actionbutton-border-color-default: var(--system-action-button-static-black-border-color-default);
169
+ --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-black-border-color-hover);
170
+ --spectrum-actionbutton-border-color-down: var(--system-action-button-static-black-border-color-down);
171
+ --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-black-border-color-focus);
172
+ --spectrum-actionbutton-background-color-default: var(--system-action-button-static-black-background-color-default);
173
+ --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-black-background-color-hover);
174
+ --spectrum-actionbutton-background-color-down: var(--system-action-button-static-black-background-color-down);
175
+ --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-black-background-color-focus);
176
+ --spectrum-actionbutton-static-black-content-color-default: var(--system-action-button-static-black-content-color-default);
177
+ --spectrum-actionbutton-static-black-content-color-hover: var(--system-action-button-static-black-content-color-hover);
178
+ --spectrum-actionbutton-static-black-content-color-down: var(--system-action-button-static-black-content-color-down);
179
+ --spectrum-actionbutton-static-black-content-color-focus: var(--system-action-button-static-black-content-color-focus);
180
+ }
181
+
182
+ .spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet,
183
+ ::slotted(.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet) {
184
+ --spectrum-actionbutton-background-color-default: var(--system-action-button-static-black-quiet-background-color-default);
185
+ --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-black-quiet-background-color-hover);
186
+ --spectrum-actionbutton-background-color-down: var(--system-action-button-static-black-quiet-background-color-down);
187
+ --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-black-quiet-background-color-focus);
188
+ }
189
+
190
+ .spectrum-ActionButton--staticWhite,
191
+ ::slotted(.spectrum-ActionButton--staticWhite) {
192
+ --mod-actionbutton-content-color-default: var(--spectrum-actionbutton-static-white-content-color-default, var(--spectrum-white));
193
+ --mod-actionbutton-content-color-hover: var(--spectrum-actionbutton-static-white-content-color-hover, var(--spectrum-white));
194
+ --mod-actionbutton-content-color-down: var(--spectrum-actionbutton-static-white-content-color-down, var(--spectrum-white));
195
+ --mod-actionbutton-content-color-focus: var(--spectrum-actionbutton-static-white-content-color-focus, var(--spectrum-white));
196
+ --mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
197
+ --spectrum-actionbutton-border-color-default: var(--system-action-button-static-white-border-color-default);
198
+ --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-white-border-color-hover);
199
+ --spectrum-actionbutton-border-color-down: var(--system-action-button-static-white-border-color-down);
200
+ --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-white-border-color-focus);
201
+ --spectrum-actionbutton-background-color-default: var(--system-action-button-static-white-background-color-default);
202
+ --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-white-background-color-hover);
203
+ --spectrum-actionbutton-background-color-down: var(--system-action-button-static-white-background-color-down);
204
+ --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-white-background-color-focus);
205
+ --spectrum-actionbutton-static-white-content-color-default: var(--system-action-button-static-white-content-color-default);
206
+ --spectrum-actionbutton-static-white-content-color-hover: var(--system-action-button-static-white-content-color-hover);
207
+ --spectrum-actionbutton-static-white-content-color-down: var(--system-action-button-static-white-content-color-down);
208
+ --spectrum-actionbutton-static-white-content-color-focus: var(--system-action-button-static-white-content-color-focus);
209
+ }
210
+
211
+ .spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet,
212
+ ::slotted(.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet) {
213
+ --spectrum-actionbutton-background-color-default: var(--system-action-button-static-white-quiet-background-color-default);
214
+ --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-white-quiet-background-color-hover);
215
+ --spectrum-actionbutton-background-color-down: var(--system-action-button-static-white-quiet-background-color-down);
216
+ --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-white-quiet-background-color-focus);
217
+ }
218
+
219
+ /* Interactive state tokens */
220
+
221
+ @media (hover: hover) {
222
+ .spectrum-ActionButton:hover,
223
+ ::slotted(.spectrum-ActionButton:hover) {
224
+ --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover));
225
+ --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover));
226
+ --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-hover, var(--spectrum-neutral-content-color-hover));
227
+ }
228
+ }
229
+
230
+ .spectrum-ActionButton:focus-visible,
231
+ ::slotted(.spectrum-ActionButton:focus-visible) {
232
+ --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus));
233
+ --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus));
234
+ --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-focus, var(--spectrum-neutral-content-color-key-focus));
235
+
236
+ box-shadow: none;
237
+ outline: none;
238
+ }
239
+
240
+ .spectrum-ActionButton:active,
241
+ ::slotted(.spectrum-ActionButton:active) {
242
+ --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down));
243
+ --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down));
244
+ --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-down, var(--spectrum-neutral-content-color-down));
245
+ }
246
+
247
+ /* Directionality and structural elements */
248
+ .spectrum-ActionButton:dir(rtl),
249
+ ::slotted(.spectrum-ActionButton:dir(rtl)) {
250
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
251
+ }
252
+
253
+ .spectrum-ActionButton:focus,
254
+ ::slotted(.spectrum-ActionButton:focus) {
255
+ outline: none;
256
+ }
257
+
258
+ .spectrum-ActionButton::after {
259
+ position: absolute;
260
+ inset: 0;
261
+ margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1);
262
+ border-radius: var(--mod-actionbutton-focus-indicator-border-radius, calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)));
263
+ pointer-events: none;
264
+ content: "";
265
+ transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
266
+ }
267
+
268
+ .spectrum-ActionButton:focus-visible::after {
269
+ box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--spectrum-actionbutton-focus-indicator-color);
270
+ }
271
+
272
+ .spectrum-ActionButton :is([slot="icon"], svg, img) {
273
+ flex-shrink: 0;
274
+ inline-size: var(--spectrum-actionbutton-icon-size);
275
+ block-size: var(--spectrum-actionbutton-icon-size);
276
+ max-block-size: 100%;
277
+ margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual) - var(--spectrum-actionbutton-edge-to-text));
278
+ margin-inline-end: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
279
+ color: inherit;
280
+ }
281
+
282
+ .spectrum-ActionButton--iconOnly :is([slot="icon"], svg, img) {
283
+ margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
284
+ }
285
+
286
+ .spectrum-ActionButton-label {
287
+ flex-grow: var(--spectrum-actionbutton-label-flex-grow);
288
+ place-self: center;
289
+ font-size: var(--spectrum-actionbutton-font-size);
290
+ line-height: var(--spectrum-actionbutton-height);
291
+ color: var(--mod-actionbutton-label-color, inherit);
292
+ text-align: var(--spectrum-actionbutton-label-text-align);
293
+ white-space: nowrap;
294
+ overflow: hidden;
295
+ text-overflow: ellipsis;
296
+ pointer-events: none !important;
297
+ }
298
+
299
+ /* Forced colors */
300
+ @media (forced-colors: active) {
301
+ .spectrum-ActionButton,
302
+ ::slotted(.spectrum-ActionButton) {
303
+ --highcontrast-actionbutton-focus-indicator-color: ButtonText;
304
+ --highcontrast-actionbutton-content-color: ButtonText;
305
+ }
306
+
307
+ .spectrum-ActionButton::after {
308
+ forced-color-adjust: none;
309
+ }
310
+ }