Skip to content

Commit b914d81

Browse files
rise-erpeldingcastastrophe
rise-erpelding
authored and
castastrophe
committed
fix(textfield,menu,tag,toast,tabs,well,popover): define custom props (#3471)
* fix(popover): define --spectrum-popover-border-width in index.css * fix(well): define --spectrum-well-border-color in index.css * fix(tabs): define --spectrum-tabs-font-weight * fix(toast): define default background color and divider color * fix(tag): define undefined custom properties * fix(menu): define menu item background colors * fix(textfield): define undefined custom properties
1 parent 8b6b1cc commit b914d81

File tree

15 files changed

+101
-0
lines changed

15 files changed

+101
-0
lines changed

‎.changeset/ten-lizards-work.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@spectrum-css/textfield": patch
3+
"@spectrum-css/popover": patch
4+
"@spectrum-css/toast": patch
5+
"@spectrum-css/menu": patch
6+
"@spectrum-css/tabs": patch
7+
"@spectrum-css/well": patch
8+
"@spectrum-css/tag": patch
9+
---
10+
11+
Define undefined custom properties from themes directory.

‎components/menu/dist/metadata.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -342,6 +342,7 @@
342342
"--spectrum-font-size-300",
343343
"--spectrum-font-size-50",
344344
"--spectrum-font-size-75",
345+
"--spectrum-gray-1000-rgb",
345346
"--spectrum-gray-900",
346347
"--spectrum-line-height-100",
347348
"--spectrum-navigational-indicator-top-to-back-icon-extra-large",
@@ -366,6 +367,7 @@
366367
"--spectrum-text-to-visual-200",
367368
"--spectrum-text-to-visual-300",
368369
"--spectrum-text-to-visual-75",
370+
"--spectrum-transparent-black-200-opacity",
369371
"--spectrum-workflow-icon-size-100",
370372
"--spectrum-workflow-icon-size-200",
371373
"--spectrum-workflow-icon-size-300",

‎components/menu/index.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@
7979
}
8080

8181
.spectrum-Menu {
82+
--spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
83+
--spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
84+
--spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
85+
8286
--spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
8387
--spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
8488

‎components/popover/dist/metadata.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@
139139
"--spectrum-animation-duration-0",
140140
"--spectrum-animation-duration-100",
141141
"--spectrum-background-layer-2-color",
142+
"--spectrum-border-width-100",
142143
"--spectrum-corner-radius-100",
143144
"--spectrum-drop-shadow-blur",
144145
"--spectrum-drop-shadow-color",

‎components/popover/index.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
--spectrum-popover-background-color: var(--spectrum-background-layer-2-color);
2020
--spectrum-popover-border-color: var(--spectrum-gray-400);
2121

22+
--spectrum-popover-border-width: var(--spectrum-border-width-100);
23+
2224
/* popover inner padding */
2325
--spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area);
2426

‎components/tabs/dist/metadata.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@
151151
"--spectrum-neutral-subdued-content-color-down",
152152
"--spectrum-neutral-subdued-content-color-hover",
153153
"--spectrum-neutral-subdued-content-color-key-focus",
154+
"--spectrum-regular-font-weight",
154155
"--spectrum-sans-font-family-stack",
155156
"--spectrum-tab-item-bottom-to-text-extra-large",
156157
"--spectrum-tab-item-bottom-to-text-large",

‎components/tabs/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
--spectrum-tabs-font-style: var(--spectrum-default-font-style);
3535
--spectrum-tabs-font-size: var(--spectrum-font-size-100);
3636
--spectrum-tabs-line-height: var(--spectrum-line-height-100);
37+
--spectrum-tabs-font-weight: var(--spectrum-regular-font-weight);
3738

3839
/* Focus Indicator */
3940
--spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness);

‎components/tag/dist/metadata.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,12 @@
216216
"--spectrum-border-width-100",
217217
"--spectrum-clearbutton-fill-background-color",
218218
"--spectrum-clearbutton-fill-size",
219+
"--spectrum-component-edge-to-text-100",
220+
"--spectrum-component-edge-to-text-200",
221+
"--spectrum-component-edge-to-text-75",
222+
"--spectrum-component-edge-to-visual-100",
223+
"--spectrum-component-edge-to-visual-200",
224+
"--spectrum-component-edge-to-visual-75",
219225
"--spectrum-component-height-100",
220226
"--spectrum-component-height-200",
221227
"--spectrum-component-height-75",
@@ -225,14 +231,21 @@
225231
"--spectrum-component-top-to-workflow-icon-100",
226232
"--spectrum-component-top-to-workflow-icon-200",
227233
"--spectrum-component-top-to-workflow-icon-75",
234+
"--spectrum-corner-radius-100",
235+
"--spectrum-disabled-background-color",
228236
"--spectrum-disabled-content-color",
229237
"--spectrum-focus-indicator-color",
230238
"--spectrum-focus-indicator-gap",
231239
"--spectrum-focus-indicator-thickness",
232240
"--spectrum-font-size-100",
233241
"--spectrum-font-size-200",
234242
"--spectrum-font-size-75",
243+
"--spectrum-gray-100",
235244
"--spectrum-gray-25",
245+
"--spectrum-gray-50",
246+
"--spectrum-gray-700",
247+
"--spectrum-gray-800",
248+
"--spectrum-gray-900",
236249
"--spectrum-line-height-100",
237250
"--spectrum-negative-background-color-default",
238251
"--spectrum-negative-background-color-down",
@@ -249,6 +262,14 @@
249262
"--spectrum-neutral-background-color-selected-down",
250263
"--spectrum-neutral-background-color-selected-hover",
251264
"--spectrum-neutral-background-color-selected-key-focus",
265+
"--spectrum-neutral-subdued-background-color-default",
266+
"--spectrum-neutral-subdued-background-color-down",
267+
"--spectrum-neutral-subdued-background-color-hover",
268+
"--spectrum-neutral-subdued-background-color-key-focus",
269+
"--spectrum-neutral-subdued-content-color-default",
270+
"--spectrum-neutral-subdued-content-color-down",
271+
"--spectrum-neutral-subdued-content-color-hover",
272+
"--spectrum-neutral-subdued-content-color-key-focus",
252273
"--spectrum-regular-font-weight",
253274
"--spectrum-text-to-visual-100",
254275
"--spectrum-text-to-visual-200",

‎components/tag/index.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,29 @@
1818
--spectrum-tag-animation-duration: var(--spectrum-animation-duration-100);
1919
--spectrum-tag-border-width: var(--spectrum-border-width-100);
2020

21+
/* background color */
22+
--spectrum-tag-background-color: var(--spectrum-gray-50);
23+
--spectrum-tag-background-color-hover: var(--spectrum-gray-50);
24+
--spectrum-tag-background-color-active: var(--spectrum-gray-100);
25+
--spectrum-tag-background-color-focus: var(--spectrum-gray-50);
26+
27+
/* border radius */
28+
--spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100);
29+
--spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100);
30+
--spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100);
31+
32+
/* border color */
33+
--spectrum-tag-border-color: var(--spectrum-gray-700);
34+
--spectrum-tag-border-color-hover: var(--spectrum-gray-800);
35+
--spectrum-tag-border-color-active: var(--spectrum-gray-900);
36+
--spectrum-tag-border-color-focus: var(--spectrum-gray-800);
37+
38+
/* content color */
39+
--spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default);
40+
--spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
41+
--spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down);
42+
--spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
43+
2144
/* focus ring */
2245
--spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
2346
--spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap);
@@ -33,6 +56,10 @@
3356
--spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
3457
--spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down);
3558
--spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
59+
--spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default);
60+
--spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
61+
--spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down);
62+
--spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
3663

3764
/* invalid variant */
3865
--spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900);
@@ -74,6 +101,8 @@
74101

75102
/* disabled variant content */
76103
--spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color);
104+
--spectrum-tag-border-color-disabled: transparent;
105+
--spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color);
77106

78107
--spectrum-tag-height: var(--spectrum-component-height-100);
79108
--spectrum-tag-font-size: var(--spectrum-font-size-100);
@@ -97,6 +126,16 @@
97126
--spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start);
98127
--spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end);
99128
--spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end);
129+
130+
--spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
131+
--spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
132+
--spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75);
133+
--spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
134+
--spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100);
135+
--spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100);
136+
--spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
137+
--spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200);
138+
--spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
100139
}
101140

102141
/* t-shirt sizes */

‎components/textfield/dist/metadata.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,7 @@
226226
],
227227
"global": [
228228
"--spectrum-animation-duration-100",
229+
"--spectrum-border-width-100",
229230
"--spectrum-character-count-to-field-quiet-extra-large",
230231
"--spectrum-character-count-to-field-quiet-large",
231232
"--spectrum-character-count-to-field-quiet-medium",
@@ -290,6 +291,10 @@
290291
"--spectrum-font-size-300",
291292
"--spectrum-font-size-75",
292293
"--spectrum-gray-25",
294+
"--spectrum-gray-500",
295+
"--spectrum-gray-600",
296+
"--spectrum-gray-800",
297+
"--spectrum-gray-900",
293298
"--spectrum-help-text-to-component",
294299
"--spectrum-negative-border-color-default",
295300
"--spectrum-negative-border-color-focus",

‎components/textfield/index.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,14 @@
2020
--spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier);
2121
--spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100);
2222

23+
--spectrum-textfield-border-color: var(--spectrum-gray-500);
24+
--spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
25+
--spectrum-textfield-border-color-focus: var(--spectrum-gray-800);
26+
--spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900);
27+
--spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
28+
29+
--spectrum-textfield-border-width: var(--spectrum-border-width-100);
30+
2331
/* default spacing */
2432
--spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet);
2533
--spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100);

‎components/toast/dist/metadata.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,13 @@
9090
"--spectrum-informative-background-color-default",
9191
"--spectrum-line-height-100",
9292
"--spectrum-negative-background-color-default",
93+
"--spectrum-neutral-subdued-background-color-default",
9394
"--spectrum-positive-background-color-default",
9495
"--spectrum-regular-font-weight",
9596
"--spectrum-spacing-100",
9697
"--spectrum-spacing-300",
9798
"--spectrum-text-to-visual-100",
99+
"--spectrum-transparent-white-400",
98100
"--spectrum-white"
99101
],
100102
"passthroughs": [],

‎components/toast/index.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,11 @@
4848
--spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
4949

5050
/* Color */
51+
--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
5152
--spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
5253
--spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
5354
--spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);
55+
--spectrum-toast-divider-color: var(--spectrum-transparent-white-400);
5456

5557
--spectrum-toast-text-and-icon-color: var(--spectrum-white);
5658
}

‎components/well/dist/metadata.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"global": [
2525
"--spectrum-body-color",
2626
"--spectrum-border-width-100",
27+
"--spectrum-gray-1000-rgb",
2728
"--spectrum-gray-800-rgb"
2829
],
2930
"passthroughs": [],

‎components/well/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
.spectrum-Well {
1515
--spectrum-well-border-width: var(--spectrum-border-width-100);
16+
--spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), .05);
1617
--spectrum-well-content-color: var(--spectrum-body-color);
1718
--spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02);
1819

0 commit comments

Comments
 (0)