@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.
Files changed (18) hide show
  1. package/global-action-button.css +310 -0
  2. package/global-button.css +468 -0
  3. package/global-elements.css +14 -0
  4. package/global-elements.d.ts +13 -0
  5. package/global-elements.dev.js +4 -0
  6. package/global-elements.dev.js.map +7 -0
  7. package/global-elements.js +2 -0
  8. package/global-elements.js.map +7 -0
  9. package/package.json +8 -2
  10. package/src/global-elements.css +14 -0
  11. package/src/global-elements.css.d.ts +2 -0
  12. package/src/global-elements.css.dev.js +7 -0
  13. package/src/global-elements.css.dev.js.map +7 -0
  14. package/src/global-elements.css.js +4 -0
  15. package/src/global-elements.css.js.map +7 -0
  16. package/tokens/express/system-theme-bridge.css +22 -11
  17. package/tokens/spectrum/system-theme-bridge.css +22 -11
  18. package/tokens-v2/system-theme-bridge.css +33 -14
package/global-button.css ADDED
@@ -0,0 +1,468 @@
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
+ * - progress circle
17
+ * - no-wrap
18
+ */
19
+
20
+ .spectrum-Button,
21
+ ::slotted(.spectrum-Button) {
22
+ --spectrum-button-sized-height: var(--spectrum-component-height-100);
23
+ --spectrum-button-sized-font-size: var(--spectrum-font-size-100);
24
+ --spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width));
25
+ --spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100);
26
+ --spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width));
27
+ --spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-100);
28
+ --spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-medium);
29
+ --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-medium);
30
+ --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
31
+ --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100);
32
+ --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
33
+ --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
34
+ --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
35
+ --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
36
+ --spectrum-button-height: var(--mod-button-height, var(--spectrum-button-sized-height));
37
+ --spectrum-button-min-width: var(--mod-button-min-width, calc(var(--spectrum-button-height) * var(--spectrum-button-minimum-width-multiplier)));
38
+ --spectrum-button-line-height: var(--mod-button-line-height, 1.2);
39
+ --spectrum-button-font-size: var(--mod-button-font-size, var(--spectrum-button-sized-font-size));
40
+ --spectrum-button-padding-label-to-icon: var(--mod-button-padding-label-to-icon, var(--spectrum-button-sized-padding-label-to-icon));
41
+ --spectrum-button-edge-to-visual: var(--mod-button-edge-to-visual, var(--spectrum-button-sized-edge-to-visual));
42
+ --spectrum-button-edge-to-visual-only: var(--mod-button-edge-to-visual-only, var(--spectrum-button-sized-edge-to-visual-only));
43
+ --spectrum-button-edge-to-text: var(--mod-button-edge-to-text, var(--spectrum-button-sized-edge-to-text));
44
+ --spectrum-button-top-to-text: var(--mod-button-top-to-text, var(--spectrum-button-sized-top-to-text));
45
+ --spectrum-button-bottom-to-text: var(--mod-button-bottom-to-text, var(--spectrum-button-sized-bottom-to-text));
46
+ --spectrum-button-top-to-icon: var(--mod-button-top-to-icon, var(--spectrum-button-sized-top-to-icon));
47
+ --spectrum-button-focus-ring-thickness: var(--mod-button-focus-ring-thickness, var(--spectrum-focus-indicator-thickness));
48
+ --spectrum-button-focus-indicator-color: var(--mod-button-focus-ring-color, var(--spectrum-focus-indicator-color));
49
+ --spectrum-button-animation-duration: var(--mod-button-animation-duration, var(--spectrum-animation-duration-100));
50
+ --spectrum-button-border-width: var(--mod-button-border-width, var(--spectrum-border-width-200));
51
+ --spectrum-button-focus-ring-gap: var(--mod-focus-indicator-gap, var(--mod-button-focus-ring-gap, var(--spectrum-focus-indicator-gap)));
52
+ --spectrum-button-border-radius: var(--mod-button-border-radius, calc(var(--spectrum-button-height) / 2));
53
+ --spectrum-icon-size: var(--spectrum-workflow-icon-size-100);
54
+ --spectrum-button-background-color-default: var(--system-button-background-color-default);
55
+ --spectrum-button-background-color-hover: var(--system-button-background-color-hover);
56
+ --spectrum-button-background-color-down: var(--system-button-background-color-down);
57
+ --spectrum-button-background-color-focus: var(--system-button-background-color-focus);
58
+ --spectrum-button-border-color-default: var(--system-button-border-color-default);
59
+ --spectrum-button-border-color-hover: var(--system-button-border-color-hover);
60
+ --spectrum-button-border-color-down: var(--system-button-border-color-down);
61
+ --spectrum-button-border-color-focus: var(--system-button-border-color-focus);
62
+ --spectrum-button-background-color-disabled: var(--system-button-background-color-disabled);
63
+ --spectrum-button-border-color-disabled: var(--system-button-border-color-disabled);
64
+
65
+ -webkit-font-smoothing: antialiased;
66
+ -moz-osx-font-smoothing: grayscale;
67
+ box-sizing: border-box;
68
+ display: inline-flex;
69
+ position: relative;
70
+ gap: var(--spectrum-button-padding-label-to-icon);
71
+ align-items: center;
72
+ align-self: start;
73
+ justify-content: center;
74
+ min-inline-size: var(--spectrum-button-min-width);
75
+ max-inline-size: var(--mod-button-max-inline-size, none);
76
+ min-block-size: var(--spectrum-button-height);
77
+ padding-block: 0;
78
+ padding-block-start: calc(var(--spectrum-button-top-to-text) - var(--spectrum-button-border-width));
79
+ padding-block-end: calc(var(--spectrum-button-bottom-to-text) - var(--spectrum-button-border-width));
80
+ padding-inline: var(--spectrum-button-edge-to-text);
81
+ margin: 0;
82
+ margin-block: var(--mod-button-margin-block);
83
+ margin-inline-start: var(--mod-button-margin-left);
84
+ margin-inline-end: var(--mod-button-margin-right);
85
+ font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
86
+ font-size: var(--spectrum-button-font-size);
87
+ font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight));
88
+ line-height: var(--spectrum-button-line-height);
89
+ vertical-align: top;
90
+ color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default, inherit)));
91
+ text-align: var(--mod-button-text-align, center);
92
+ text-transform: none;
93
+ text-decoration: none;
94
+ background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)));
95
+ border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));
96
+ border-style: solid;
97
+ border-width: var(--spectrum-button-border-width);
98
+ border-radius: var(--spectrum-button-border-radius);
99
+ overflow: visible;
100
+ appearance: auto;
101
+ cursor: pointer;
102
+ user-select: none;
103
+ transition:
104
+ outline var(--spectrum-button-animation-duration, 0.13s) linear,
105
+ border var(--spectrum-button-animation-duration, 0.13s) linear,
106
+ color var(--spectrum-button-animation-duration, 0.13s) linear,
107
+ background-color var(--spectrum-button-animation-duration, 0.13s) linear;
108
+ }
109
+
110
+ .spectrum-Button:focus-visible,
111
+ ::slotted(.spectrum-Button:focus-visible) {
112
+ color: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus)));
113
+ background-color: var(--highcontrast-button-background-color-focus, var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus)));
114
+ outline: var(--spectrum-button-focus-ring-thickness) solid var(--spectrum-button-focus-indicator-color);
115
+ outline-offset: var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
116
+ }
117
+
118
+ .spectrum-Button:active,
119
+ ::slotted(.spectrum-Button:active) {
120
+ color: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-button-content-color-down)));
121
+ background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down)));
122
+ border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down)));
123
+ box-shadow: none;
124
+ }
125
+
126
+ @media (hover: hover) {
127
+ .spectrum-Button:hover,
128
+ ::slotted(.spectrum-Button:hover) {
129
+ color: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover)));
130
+ background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover)));
131
+ border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover)));
132
+ box-shadow: none;
133
+ }
134
+ }
135
+
136
+ .spectrum-Button--iconOnly,
137
+ ::slotted(.spectrum-Button--iconOnly) {
138
+ min-inline-size: unset;
139
+ padding: calc(var(--spectrum-button-edge-to-visual-only) - var(--spectrum-button-border-width));
140
+ border-radius: 50%;
141
+ }
142
+
143
+ /* NOTE: compound selectors for ::slotted() are disallowed by CSS spec */
144
+ .spectrum-Button :is([slot="icon"], svg, img) {
145
+ --spectrum-icon-size: inherit;
146
+
147
+ flex-shrink: 0;
148
+ align-self: flex-start;
149
+ inline-size: var(--spectrum-icon-size, var(--spectrum-workflow-icon-size-100));
150
+ block-size: var(--spectrum-icon-size, var(--spectrum-workflow-icon-size-100));
151
+ color: inherit;
152
+ fill: currentcolor;
153
+ }
154
+
155
+ .spectrum-Button:not(.spectrum-Button--iconOnly) :is([slot="icon"], svg, img) {
156
+ /* When icon size exceeds button's line-height, add negative margin to prevent icon size increasing height */
157
+ margin-block: calc((var(--spectrum-icon-block-size) - 1lh) / 2 * -1);
158
+ margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)));
159
+ }
160
+
161
+ .spectrum-Button--sizeS,
162
+ ::slotted(.spectrum-Button--sizeS) {
163
+ --spectrum-button-sized-height: var(--spectrum-component-height-75);
164
+ --spectrum-button-sized-font-size: var(--spectrum-font-size-75);
165
+ --spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width));
166
+ --spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75);
167
+ --spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width));
168
+ --spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-75);
169
+ --spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-small);
170
+ --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-small);
171
+ --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75);
172
+ --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75);
173
+ --spectrum-icon-size: var(--spectrum-workflow-icon-size-75);
174
+ }
175
+
176
+ .spectrum-Button--sizeL,
177
+ ::slotted(.spectrum-Button--sizeL) {
178
+ --spectrum-button-sized-height: var(--spectrum-component-height-200);
179
+ --spectrum-button-sized-font-size: var(--spectrum-font-size-200);
180
+ --spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width));
181
+ --spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200);
182
+ --spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width));
183
+ --spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-200);
184
+ --spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-large);
185
+ --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-large);
186
+ --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200);
187
+ --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200);
188
+ --spectrum-icon-size: var(--spectrum-workflow-icon-size-200);
189
+ }
190
+
191
+ .spectrum-Button--sizeXL,
192
+ ::slotted(.spectrum-Button--sizeXL) {
193
+ --spectrum-button-sized-height: var(--spectrum-component-height-300);
194
+ --spectrum-button-sized-font-size: var(--spectrum-font-size-300);
195
+ --spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width));
196
+ --spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300);
197
+ --spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width));
198
+ --spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-300);
199
+ --spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-extra-large);
200
+ --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large);
201
+ --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300);
202
+ --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300);
203
+ --spectrum-icon-size: var(--spectrum-workflow-icon-size-300);
204
+ }
205
+
206
+ .spectrum-Button--accent,
207
+ ::slotted(.spectrum-Button--accent) {
208
+ --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default);
209
+ --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover);
210
+ --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down);
211
+ --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
212
+ --spectrum-button-border-color-default: transparent;
213
+ --spectrum-button-border-color-hover: transparent;
214
+ --spectrum-button-border-color-down: transparent;
215
+ --spectrum-button-border-color-focus: transparent;
216
+ --spectrum-button-content-color-default: var(--spectrum-white);
217
+ --spectrum-button-content-color-hover: var(--spectrum-white);
218
+ --spectrum-button-content-color-down: var(--spectrum-white);
219
+ --spectrum-button-content-color-focus: var(--spectrum-white);
220
+ }
221
+
222
+ .spectrum-Button--accent.spectrum-Button--outline,
223
+ ::slotted(.spectrum-Button--accent.spectrum-Button--outline) {
224
+ --spectrum-button-background-color-hover: var(--spectrum-accent-color-200);
225
+ --spectrum-button-background-color-down: var(--spectrum-accent-color-300);
226
+ --spectrum-button-background-color-focus: var(--spectrum-accent-color-200);
227
+ --spectrum-button-border-color-default: var(--spectrum-accent-color-900);
228
+ --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000);
229
+ --spectrum-button-border-color-down: var(--spectrum-accent-color-1100);
230
+ --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000);
231
+ --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default);
232
+ --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover);
233
+ --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down);
234
+ --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus);
235
+ }
236
+
237
+ .spectrum-Button--negative,
238
+ ::slotted(.spectrum-Button--negative) {
239
+ --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default);
240
+ --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover);
241
+ --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down);
242
+ --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus);
243
+ --spectrum-button-border-color-default: transparent;
244
+ --spectrum-button-border-color-hover: transparent;
245
+ --spectrum-button-border-color-down: transparent;
246
+ --spectrum-button-border-color-focus: transparent;
247
+ --spectrum-button-content-color-default: var(--spectrum-white);
248
+ --spectrum-button-content-color-hover: var(--spectrum-white);
249
+ --spectrum-button-content-color-down: var(--spectrum-white);
250
+ --spectrum-button-content-color-focus: var(--spectrum-white);
251
+ }
252
+
253
+ .spectrum-Button--negative.spectrum-Button--outline,
254
+ ::slotted(.spectrum-Button--negative.spectrum-Button--outline) {
255
+ --spectrum-button-background-color-hover: var(--spectrum-negative-color-200);
256
+ --spectrum-button-background-color-down: var(--spectrum-negative-color-300);
257
+ --spectrum-button-background-color-focus: var(--spectrum-negative-color-200);
258
+ --spectrum-button-border-color-default: var(--spectrum-negative-color-900);
259
+ --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000);
260
+ --spectrum-button-border-color-down: var(--spectrum-negative-color-1100);
261
+ --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000);
262
+ --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default);
263
+ --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover);
264
+ --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down);
265
+ --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus);
266
+ }
267
+
268
+ .spectrum-Button--primary,
269
+ ::slotted(.spectrum-Button--primary) {
270
+ --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default);
271
+ --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
272
+ --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down);
273
+ --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
274
+ --spectrum-button-border-color-default: transparent;
275
+ --spectrum-button-border-color-hover: transparent;
276
+ --spectrum-button-border-color-down: transparent;
277
+ --spectrum-button-border-color-focus: transparent;
278
+ --spectrum-button-content-color-default: var(--system-button-primary-content-color-default);
279
+ --spectrum-button-content-color-hover: var(--system-button-primary-content-color-hover);
280
+ --spectrum-button-content-color-down: var(--system-button-primary-content-color-down);
281
+ --spectrum-button-content-color-focus: var(--system-button-primary-content-color-focus);
282
+ }
283
+
284
+ .spectrum-Button--primary.spectrum-Button--outline,
285
+ ::slotted(.spectrum-Button--primary.spectrum-Button--outline) {
286
+ --spectrum-button-border-color-default: var(--spectrum-gray-800);
287
+ --spectrum-button-border-color-hover: var(--spectrum-gray-900);
288
+ --spectrum-button-border-color-down: var(--spectrum-gray-900);
289
+ --spectrum-button-border-color-focus: var(--spectrum-gray-900);
290
+ --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
291
+ --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
292
+ --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
293
+ --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
294
+ --spectrum-button-background-color-hover: var(--system-button-primary-outline-background-color-hover);
295
+ --spectrum-button-background-color-down: var(--system-button-primary-outline-background-color-down);
296
+ --spectrum-button-background-color-focus: var(--system-button-primary-outline-background-color-focus);
297
+ }
298
+
299
+ .spectrum-Button--secondary,
300
+ ::slotted(.spectrum-Button--secondary) {
301
+ --spectrum-button-border-color-default: transparent;
302
+ --spectrum-button-border-color-hover: transparent;
303
+ --spectrum-button-border-color-down: transparent;
304
+ --spectrum-button-border-color-focus: transparent;
305
+ --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
306
+ --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
307
+ --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
308
+ --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
309
+ --spectrum-button-background-color-default: var(--system-button-secondary-background-color-default);
310
+ --spectrum-button-background-color-hover: var(--system-button-secondary-background-color-hover);
311
+ --spectrum-button-background-color-down: var(--system-button-secondary-background-color-down);
312
+ --spectrum-button-background-color-focus: var(--system-button-secondary-background-color-focus);
313
+ }
314
+
315
+ .spectrum-Button--secondary.spectrum-Button--outline,
316
+ ::slotted(.spectrum-Button--secondary.spectrum-Button--outline) {
317
+ --spectrum-button-border-color-hover: var(--spectrum-gray-400);
318
+ --spectrum-button-border-color-focus: var(--spectrum-gray-400);
319
+ --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
320
+ --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
321
+ --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
322
+ --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
323
+ --spectrum-button-background-color-hover: var(--system-button-secondary-outline-background-color-hover);
324
+ --spectrum-button-background-color-down: var(--system-button-secondary-outline-background-color-down);
325
+ --spectrum-button-background-color-focus: var(--system-button-secondary-outline-background-color-focus);
326
+ --spectrum-button-border-color-default: var(--system-button-secondary-outline-border-color-default);
327
+ --spectrum-button-border-color-down: var(--system-button-secondary-outline-border-color-down);
328
+ }
329
+
330
+ .spectrum-Button--outline,
331
+ ::slotted(.spectrum-Button--outline),
332
+ .spectrum-Button--quiet,
333
+ ::slotted(.spectrum-Button--quiet) {
334
+ --spectrum-button-background-color-default: transparent;
335
+ }
336
+
337
+ .spectrum-Button--quiet,
338
+ ::slotted(.spectrum-Button--quiet) {
339
+ --spectrum-button-background-color-hover: var(--spectrum-gray-200);
340
+ --spectrum-button-background-color-down: var(--spectrum-gray-300);
341
+ --spectrum-button-background-color-focus: var(--spectrum-gray-200);
342
+ }
343
+
344
+ .spectrum-Button--staticWhite,
345
+ ::slotted(.spectrum-Button--staticWhite) {
346
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
347
+ --spectrum-button-background-color-default: var(--system-button-static-white-background-color-default);
348
+ --spectrum-button-background-color-hover: var(--system-button-static-white-background-color-hover);
349
+ --spectrum-button-background-color-down: var(--system-button-static-white-background-color-down);
350
+ --spectrum-button-background-color-focus: var(--system-button-static-white-background-color-focus);
351
+ --spectrum-button-content-color-default: var(--system-button-static-white-content-color-default);
352
+ --spectrum-button-content-color-hover: var(--system-button-static-white-content-color-hover);
353
+ --spectrum-button-content-color-down: var(--system-button-static-white-content-color-down);
354
+ --spectrum-button-content-color-focus: var(--system-button-static-white-content-color-focus);
355
+ }
356
+
357
+ .spectrum-Button--staticWhite.spectrum-Button--outline,
358
+ ::slotted(.spectrum-Button--staticWhite.spectrum-Button--outline) {
359
+ --spectrum-button-background-color-default: var(--system-button-static-white-outline-background-color-default);
360
+ --spectrum-button-background-color-hover: var(--system-button-static-white-outline-background-color-hover);
361
+ --spectrum-button-background-color-down: var(--system-button-static-white-outline-background-color-down);
362
+ --spectrum-button-background-color-focus: var(--system-button-static-white-outline-background-color-focus);
363
+ --spectrum-button-content-color-default: var(--system-button-static-white-outline-content-color-default);
364
+ --spectrum-button-content-color-hover: var(--system-button-static-white-outline-content-color-hover);
365
+ --spectrum-button-content-color-down: var(--system-button-static-white-outline-content-color-down);
366
+ --spectrum-button-content-color-focus: var(--system-button-static-white-outline-content-color-focus);
367
+ --spectrum-button-border-color-default: var(--system-button-static-white-outline-border-color-default);
368
+ --spectrum-button-border-color-hover: var(--system-button-static-white-outline-border-color-hover);
369
+ --spectrum-button-border-color-down: var(--system-button-static-white-outline-border-color-down);
370
+ --spectrum-button-border-color-focus: var(--system-button-static-white-outline-border-color-focus);
371
+ }
372
+
373
+ .spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline,
374
+ ::slotted(.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline) {
375
+ --spectrum-button-border-color-default: var(--system-button-static-white-secondary-outline-border-color-default);
376
+ --spectrum-button-border-color-hover: var(--system-button-static-white-secondary-outline-border-color-hover);
377
+ --spectrum-button-border-color-down: var(--system-button-static-white-secondary-outline-border-color-down);
378
+ --spectrum-button-border-color-focus: var(--system-button-static-white-secondary-outline-border-color-focus);
379
+ --spectrum-button-background-color-default: transparent;
380
+ --spectrum-button-background-color-hover: var(--system-button-static-white-secondary-outline-background-color-hover);
381
+ --spectrum-button-background-color-down: var(--system-button-static-white-secondary-outline-background-color-down);
382
+ --spectrum-button-background-color-focus: var(--system-button-static-white-secondary-outline-background-color-focus);
383
+ }
384
+
385
+ .spectrum-Button--staticBlack,
386
+ ::slotted(.spectrum-Button--staticBlack) {
387
+ --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color));
388
+ --spectrum-button-background-color-default: var(--system-button-static-black-background-color-default);
389
+ --spectrum-button-background-color-hover: var(--system-button-static-black-background-color-hover);
390
+ --spectrum-button-background-color-down: var(--system-button-static-black-background-color-down);
391
+ --spectrum-button-background-color-focus: var(--system-button-static-black-background-color-focus);
392
+ --spectrum-button-content-color-default: var(--system-button-static-black-content-color-default);
393
+ --spectrum-button-content-color-hover: var(--system-button-static-black-content-color-hover);
394
+ --spectrum-button-content-color-down: var(--system-button-static-black-content-color-down);
395
+ --spectrum-button-content-color-focus: var(--system-button-static-black-content-color-focus);
396
+ }
397
+
398
+ .spectrum-Button--staticBlack.spectrum-Button--outline,
399
+ ::slotted(.spectrum-Button--staticBlack.spectrum-Button--outline) {
400
+ --spectrum-button-background-color-default: var(--system-button-static-black-outline-background-color-default);
401
+ --spectrum-button-background-color-hover: var(--system-button-static-black-outline-background-color-hover);
402
+ --spectrum-button-background-color-down: var(--system-button-static-black-outline-background-color-down);
403
+ --spectrum-button-background-color-focus: var(--system-button-static-black-outline-background-color-focus);
404
+ --spectrum-button-content-color-default: var(--system-button-static-black-outline-content-color-default);
405
+ --spectrum-button-content-color-hover: var(--system-button-static-black-outline-content-color-hover);
406
+ --spectrum-button-content-color-down: var(--system-button-static-black-outline-content-color-down);
407
+ --spectrum-button-content-color-focus: var(--system-button-static-black-outline-content-color-focus);
408
+ --spectrum-button-border-color-default: var(--system-button-static-black-outline-border-color-default);
409
+ --spectrum-button-border-color-hover: var(--system-button-static-black-outline-border-color-hover);
410
+ --spectrum-button-border-color-down: var(--system-button-static-black-outline-border-color-down);
411
+ --spectrum-button-border-color-focus: var(--system-button-static-black-outline-border-color-focus);
412
+ }
413
+
414
+ .spectrum-Button--staticBlack.spectrum-Button--secondary,
415
+ ::slotted(.spectrum-Button--staticBlack.spectrum-Button--secondary) {
416
+ --spectrum-button-background-color-default: var(--system-button-static-black-secondary-background-color-default);
417
+ --spectrum-button-background-color-hover: var(--system-button-static-black-secondary-background-color-hover);
418
+ --spectrum-button-background-color-down: var(--system-button-static-black-secondary-background-color-down);
419
+ --spectrum-button-background-color-focus: var(--system-button-static-black-secondary-background-color-focus);
420
+ --spectrum-button-content-color-default: var(--system-button-static-black-secondary-content-color-default);
421
+ --spectrum-button-content-color-hover: var(--system-button-static-black-secondary-content-color-hover);
422
+ --spectrum-button-content-color-down: var(--system-button-static-black-secondary-content-color-down);
423
+ --spectrum-button-content-color-focus: var(--system-button-static-black-secondary-content-color-focus);
424
+ }
425
+
426
+ .spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline,
427
+ ::slotted(.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline) {
428
+ --spectrum-button-border-color-default: var(--system-button-static-black-secondary-outline-border-color-default);
429
+ --spectrum-button-border-color-hover: var(--system-button-static-black-secondary-outline-border-color-hover);
430
+ --spectrum-button-border-color-down: var(--system-button-static-black-secondary-outline-border-color-down);
431
+ --spectrum-button-border-color-focus: var(--system-button-static-black-secondary-outline-border-color-focus);
432
+ --spectrum-button-background-color-default: transparent;
433
+ --spectrum-button-background-color-hover: var(--system-button-static-black-secondary-outline-background-color-hover);
434
+ --spectrum-button-background-color-down: var(--system-button-static-black-secondary-outline-background-color-down);
435
+ --spectrum-button-background-color-focus: var(--system-button-static-black-secondary-outline-background-color-focus);
436
+ }
437
+
438
+ .spectrum-Button--quiet,
439
+ ::slotted(.spectrum-Button--quiet),
440
+ .spectrum-Button--staticWhite,
441
+ ::slotted(.spectrum-Button--staticWhite),
442
+ .spectrum-Button--staticBlack,
443
+ ::slotted(.spectrum-Button--staticBlack) {
444
+ --spectrum-button-border-color-default: transparent;
445
+ --spectrum-button-border-color-hover: transparent;
446
+ --spectrum-button-border-color-down: transparent;
447
+ --spectrum-button-border-color-focus: transparent;
448
+ }
449
+
450
+ .spectrum-Button--staticWhite.spectrum-Button--secondary,
451
+ ::slotted(.spectrum-Button--staticWhite.spectrum-Button--secondary),
452
+ .spectrum-Button--staticBlack.spectrum-Button--secondary,
453
+ ::slotted(.spectrum-Button--staticBlack.spectrum-Button--secondary) {
454
+ --spectrum-button-border-color-default: transparent;
455
+ --spectrum-button-border-color-hover: transparent;
456
+ --spectrum-button-border-color-down: transparent;
457
+ --spectrum-button-border-color-focus: transparent;
458
+ }
459
+
460
+ .spectrum-Button--staticWhite.spectrum-Button--quiet,
461
+ ::slotted(.spectrum-Button--staticWhite.spectrum-Button--quiet),
462
+ .spectrum-Button--staticBlack.spectrum-Button--quiet,
463
+ ::slotted(.spectrum-Button--staticBlack.spectrum-Button--quiet) {
464
+ --spectrum-button-border-color-default: transparent;
465
+ --spectrum-button-border-color-hover: transparent;
466
+ --spectrum-button-border-color-down: transparent;
467
+ --spectrum-button-border-color-focus: transparent;
468
+ }
package/global-elements.css ADDED
@@ -0,0 +1,14 @@
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
+ @import url("./global-button.css");
14
+ @import url("./global-action-button.css");
package/global-elements.d.ts ADDED
@@ -0,0 +1,13 @@
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
+ import globalElementsStyles from './src/global-elements.css.js';
13
+ export default globalElementsStyles;
package/global-elements.dev.js ADDED
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ import globalElementsStyles from "./src/global-elements.css.js";
3
+ export default globalElementsStyles;
4
+ //# sourceMappingURL=global-elements.dev.js.map
package/global-elements.dev.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["global-elements.ts"],
4
+ "sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport globalElementsStyles from './src/global-elements.css.js';\n\nexport default globalElementsStyles;\n"],
5
+ "mappings": ";AAYA,OAAO,0BAA0B;AAEjC,eAAe;",
6
+ "names": []
7
+ }
package/global-elements.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";import e from"./src/global-elements.css.js";export default e;
2
+ //# sourceMappingURL=global-elements.js.map
package/global-elements.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["global-elements.ts"],
4
+ "sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport globalElementsStyles from './src/global-elements.css.js';\n\nexport default globalElementsStyles;\n"],
5
+ "mappings": "aAYA,OAAOA,MAA0B,+BAEjC,eAAeA",
6
+ "names": ["globalElementsStyles"]
7
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "1.12.0-testing.20260223092154",
3
+ "version": "1.12.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Adobe",
@@ -44,6 +44,12 @@
44
44
  "./express/theme-darkest.css": "./express/theme-darkest.css",
45
45
  "./express/theme-light.css": "./express/theme-light.css",
46
46
  "./express/theme-lightest.css": "./express/theme-lightest.css",
47
+ "./global-button.css": "./global-button.css",
48
+ "./global-elements.css": "./global-elements.css",
49
+ "./global-elements.js": {
50
+ "development": "./global-elements.dev.js",
51
+ "default": "./global-elements.js"
52
+ },
47
53
  "./heading.js": {
48
54
  "development": "./heading.dev.js",
49
55
  "default": "./heading.js"
@@ -109,7 +115,7 @@
109
115
  "./**/*.css"
110
116
  ],
111
117
  "dependencies": {
112
- "@spectrum-web-components/base": "1.12.0-testing.20260223092154",
118
+ "@spectrum-web-components/base": "1.12.0",
113
119
  "lit": "^2.5.0 || ^3.1.3"
114
120
  },
115
121
  "keywords": [
package/src/global-elements.css ADDED
@@ -0,0 +1,14 @@
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
+ @import url("./../global-button.css");
14
+ @import url("./../global-action-button.css");
package/src/global-elements.css.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const styles: import("lit").CSSResult;
2
+ export default styles;