Skip to content

Commit 53516a6

Browse files
castastrophecastastrophe
committed
feat: bug fixes for reducing theming variables
1 parent 0d80bad commit 53516a6

File tree

44 files changed

+1446
-1556
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1446
-1556
lines changed

‎components/actionbutton/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@
248248

249249
position: relative;
250250

251-
min-inline-size: var(--mod-actionbutton-min-width, calc((var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-border-width)) * 2 + var(--spectrum-actionbutton-icon-size)));
251+
min-inline-size: var(--mod-actionbutton-min-width, calc(var(--spectrum-actionbutton-edge-to-visual-only) * 2 + var(--spectrum-actionbutton-icon-size)));
252252
block-size: var(--spectrum-actionbutton-height);
253253

254254
border-radius: var(--spectrum-actionbutton-border-radius);

‎components/actiongroup/index.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
z-index: 0;
7373

7474
&:first-child {
75-
/* Action button passthrough styling */
75+
/* @passthrough -- Action button styling */
7676
--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
7777

7878
border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -81,15 +81,15 @@
8181
}
8282

8383
& + .spectrum-ActionGroup-item {
84-
/* Action button passthrough styling */
84+
/* @passthrough -- Action button styling */
8585
--mod-actionbutton-focus-indicator-border-radius: 0px;
8686

8787
margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
8888
margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
8989
}
9090

9191
&:last-child {
92-
/* Action button passthrough styling */
92+
/* @passthrough -- Action button styling */
9393
--mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px;
9494

9595
border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -124,7 +124,7 @@
124124
border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
125125

126126
&:first-child {
127-
/* Action button passthrough styling */
127+
/* @passthrough -- Action button styling */
128128
--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px;
129129

130130
border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -142,7 +142,7 @@
142142
}
143143

144144
&:last-child {
145-
/* Action button passthrough styling */
145+
/* @passthrough -- Action button styling */
146146
--mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
147147

148148
border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));

‎components/button/index.css

Lines changed: 336 additions & 371 deletions
Large diffs are not rendered by default.

‎components/button/metadata/metadata.json

Lines changed: 32 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -35,21 +35,25 @@
3535
".spectrum-Button.spectrum-Button--quiet",
3636
".spectrum-Button.spectrum-Button--secondary",
3737
".spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline",
38+
".spectrum-Button.spectrum-Button--secondary:not(.spectrum-Button--outline)",
3839
".spectrum-Button.spectrum-Button--staticBlack",
3940
".spectrum-Button.spectrum-Button--staticBlack.is-selected",
4041
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline",
41-
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--primary",
42+
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary)",
4243
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet",
4344
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary",
4445
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline",
46+
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary:not(.spectrum-Button--outline)",
4547
".spectrum-Button.spectrum-Button--staticWhite",
4648
".spectrum-Button.spectrum-Button--staticWhite.is-selected",
49+
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--accent",
4750
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline",
4851
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary",
49-
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--primary",
52+
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary)",
5053
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet",
5154
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary",
5255
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline",
56+
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary:not(.spectrum-Button--outline)",
5357
".spectrum-Button::-moz-focus-inner",
5458
".spectrum-Button:active",
5559
".spectrum-Button:after",
@@ -90,7 +94,6 @@
9094
"--mod-button-edge-to-visual",
9195
"--mod-button-edge-to-visual-only",
9296
"--mod-button-focus-indicator-gap",
93-
"--mod-button-focus-ring-border-radius",
9497
"--mod-button-focus-ring-color",
9598
"--mod-button-focus-ring-gap",
9699
"--mod-button-focus-ring-thickness",
@@ -144,7 +147,6 @@
144147
"--spectrum-button-edge-to-visual",
145148
"--spectrum-button-edge-to-visual-only",
146149
"--spectrum-button-focus-indicator-color",
147-
"--spectrum-button-focus-ring-border-radius",
148150
"--spectrum-button-focus-ring-gap",
149151
"--spectrum-button-focus-ring-thickness",
150152
"--spectrum-button-font-size",
@@ -298,17 +300,13 @@
298300
"--system-button-border-color-down",
299301
"--system-button-border-color-focus",
300302
"--system-button-border-color-hover",
301-
"--system-button-primary-content-color-default",
302-
"--system-button-primary-content-color-down",
303-
"--system-button-primary-content-color-focus",
304-
"--system-button-primary-content-color-hover",
305303
"--system-button-primary-outline-background-color-down",
306304
"--system-button-primary-outline-background-color-focus",
307305
"--system-button-primary-outline-background-color-hover",
308306
"--system-button-secondary-background-color-default",
309-
"--system-button-secondary-background-color-down",
310-
"--system-button-secondary-background-color-focus",
311-
"--system-button-secondary-background-color-hover",
307+
"--system-button-secondary-not-outline-background-color-down",
308+
"--system-button-secondary-not-outline-background-color-focus",
309+
"--system-button-secondary-not-outline-background-color-hover",
312310
"--system-button-secondary-outline-background-color-down",
313311
"--system-button-secondary-outline-background-color-focus",
314312
"--system-button-secondary-outline-background-color-hover",
@@ -325,25 +323,17 @@
325323
"--system-button-static-black-content-color-down",
326324
"--system-button-static-black-content-color-focus",
327325
"--system-button-static-black-content-color-hover",
328-
"--system-button-static-black-outline-background-color-down",
329-
"--system-button-static-black-outline-background-color-focus",
330-
"--system-button-static-black-outline-background-color-hover",
331-
"--system-button-static-black-outline-border-color-default",
332-
"--system-button-static-black-outline-border-color-down",
333-
"--system-button-static-black-outline-border-color-focus",
334-
"--system-button-static-black-outline-border-color-hover",
335-
"--system-button-static-black-outline-content-color-default",
336-
"--system-button-static-black-outline-content-color-down",
337-
"--system-button-static-black-outline-content-color-focus",
338-
"--system-button-static-black-outline-content-color-hover",
339-
"--system-button-static-black-primary-background-color-default",
340-
"--system-button-static-black-primary-background-color-down",
341-
"--system-button-static-black-primary-background-color-focus",
342-
"--system-button-static-black-primary-background-color-hover",
343-
"--system-button-static-black-primary-content-color-default",
344-
"--system-button-static-black-primary-content-color-down",
345-
"--system-button-static-black-primary-content-color-focus",
346-
"--system-button-static-black-primary-content-color-hover",
326+
"--system-button-static-black-outline-not-secondary-background-color-down",
327+
"--system-button-static-black-outline-not-secondary-background-color-focus",
328+
"--system-button-static-black-outline-not-secondary-background-color-hover",
329+
"--system-button-static-black-outline-not-secondary-border-color-default",
330+
"--system-button-static-black-outline-not-secondary-border-color-down",
331+
"--system-button-static-black-outline-not-secondary-border-color-focus",
332+
"--system-button-static-black-outline-not-secondary-border-color-hover",
333+
"--system-button-static-black-outline-not-secondary-content-color-default",
334+
"--system-button-static-black-outline-not-secondary-content-color-down",
335+
"--system-button-static-black-outline-not-secondary-content-color-focus",
336+
"--system-button-static-black-outline-not-secondary-content-color-hover",
347337
"--system-button-static-black-secondary-background-color-default",
348338
"--system-button-static-black-secondary-background-color-down",
349339
"--system-button-static-black-secondary-background-color-focus",
@@ -359,14 +349,6 @@
359349
"--system-button-static-black-secondary-outline-border-color-down",
360350
"--system-button-static-black-secondary-outline-border-color-focus",
361351
"--system-button-static-black-secondary-outline-border-color-hover",
362-
"--system-button-static-black-selected-background-color-default",
363-
"--system-button-static-black-selected-background-color-down",
364-
"--system-button-static-black-selected-background-color-focus",
365-
"--system-button-static-black-selected-background-color-hover",
366-
"--system-button-static-black-selected-content-color-default",
367-
"--system-button-static-black-selected-content-color-down",
368-
"--system-button-static-black-selected-content-color-focus",
369-
"--system-button-static-black-selected-content-color-hover",
370352
"--system-button-static-white-background-color-default",
371353
"--system-button-static-white-background-color-down",
372354
"--system-button-static-white-background-color-focus",
@@ -375,28 +357,20 @@
375357
"--system-button-static-white-content-color-down",
376358
"--system-button-static-white-content-color-focus",
377359
"--system-button-static-white-content-color-hover",
378-
"--system-button-static-white-outline-background-color-down",
379-
"--system-button-static-white-outline-background-color-focus",
380-
"--system-button-static-white-outline-background-color-hover",
381-
"--system-button-static-white-outline-border-color-default",
382-
"--system-button-static-white-outline-border-color-down",
383-
"--system-button-static-white-outline-border-color-focus",
384-
"--system-button-static-white-outline-border-color-hover",
385-
"--system-button-static-white-outline-content-color-default",
386-
"--system-button-static-white-outline-content-color-down",
387-
"--system-button-static-white-outline-content-color-focus",
388-
"--system-button-static-white-outline-content-color-hover",
360+
"--system-button-static-white-outline-not-secondary-background-color-down",
361+
"--system-button-static-white-outline-not-secondary-background-color-focus",
362+
"--system-button-static-white-outline-not-secondary-background-color-hover",
363+
"--system-button-static-white-outline-not-secondary-border-color-default",
364+
"--system-button-static-white-outline-not-secondary-border-color-down",
365+
"--system-button-static-white-outline-not-secondary-border-color-focus",
366+
"--system-button-static-white-outline-not-secondary-border-color-hover",
367+
"--system-button-static-white-outline-not-secondary-content-color-default",
368+
"--system-button-static-white-outline-not-secondary-content-color-down",
369+
"--system-button-static-white-outline-not-secondary-content-color-focus",
370+
"--system-button-static-white-outline-not-secondary-content-color-hover",
389371
"--system-button-static-white-outline-secondary-background-color-down",
390372
"--system-button-static-white-outline-secondary-background-color-focus",
391373
"--system-button-static-white-outline-secondary-background-color-hover",
392-
"--system-button-static-white-primary-background-color-default",
393-
"--system-button-static-white-primary-background-color-down",
394-
"--system-button-static-white-primary-background-color-focus",
395-
"--system-button-static-white-primary-background-color-hover",
396-
"--system-button-static-white-primary-content-color-default",
397-
"--system-button-static-white-primary-content-color-down",
398-
"--system-button-static-white-primary-content-color-focus",
399-
"--system-button-static-white-primary-content-color-hover",
400374
"--system-button-static-white-secondary-background-color-default",
401375
"--system-button-static-white-secondary-background-color-down",
402376
"--system-button-static-white-secondary-background-color-focus",
@@ -408,15 +382,7 @@
408382
"--system-button-static-white-secondary-outline-border-color-default",
409383
"--system-button-static-white-secondary-outline-border-color-down",
410384
"--system-button-static-white-secondary-outline-border-color-focus",
411-
"--system-button-static-white-secondary-outline-border-color-hover",
412-
"--system-button-static-white-selected-background-color-default",
413-
"--system-button-static-white-selected-background-color-down",
414-
"--system-button-static-white-selected-background-color-focus",
415-
"--system-button-static-white-selected-background-color-hover",
416-
"--system-button-static-white-selected-content-color-default",
417-
"--system-button-static-white-selected-content-color-down",
418-
"--system-button-static-white-selected-content-color-focus",
419-
"--system-button-static-white-selected-content-color-hover"
385+
"--system-button-static-white-secondary-outline-border-color-hover"
420386
],
421387
"passthroughs": [
422388
"--mod-progress-circle-position",

‎components/button/metadata/mods.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
| `--mod-button-edge-to-visual` |
2626
| `--mod-button-edge-to-visual-only` |
2727
| `--mod-button-focus-indicator-gap` |
28-
| `--mod-button-focus-ring-border-radius` |
2928
| `--mod-button-focus-ring-color` |
3029
| `--mod-button-focus-ring-gap` |
3130
| `--mod-button-focus-ring-thickness` |

‎components/button/themes/express.css

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,24 @@
1717

1818
@container style(--system: express) {
1919
.spectrum-Button {
20-
--spectrum-button-background-color-default: var(--spectrum-gray-200);
21-
--spectrum-button-background-color-hover: var(--spectrum-gray-300);
22-
--spectrum-button-background-color-down: var(--spectrum-gray-400);
23-
--spectrum-button-background-color-focus: var(--spectrum-gray-300);
20+
--mod-button-background-color-default: var(--spectrum-gray-200);
21+
--mod-button-background-color-hover: var(--spectrum-gray-300);
22+
--mod-button-background-color-down: var(--spectrum-gray-400);
23+
--mod-button-background-color-focus: var(--spectrum-gray-300);
2424

25-
--spectrum-button-border-color-default: transparent;
26-
--spectrum-button-border-color-hover: transparent;
27-
--spectrum-button-border-color-down: transparent;
28-
--spectrum-button-border-color-focus: transparent;
25+
--mod-button-border-color-default: transparent;
26+
--mod-button-border-color-hover: transparent;
27+
--mod-button-border-color-down: transparent;
28+
--mod-button-border-color-focus: transparent;
2929

30-
--spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
31-
--spectrum-button-border-color-disabled: transparent;
30+
--mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
31+
--mod-button-border-color-disabled: transparent;
3232

3333
&.is-selected {
34-
--spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default);
35-
--spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
36-
--spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down);
37-
--spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
34+
--mod-button-background-color-default: var(--spectrum-neutral-background-color-default);
35+
--mod-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
36+
--mod-button-background-color-down: var(--spectrum-neutral-background-color-down);
37+
--mod-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
3838
}
3939
}
4040
}

0 commit comments

Comments
 (0)