Skip to content

Commit 113664d

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 04778ae commit 113664d

File tree

12 files changed

+86
-75
lines changed

12 files changed

+86
-75
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/actionbutton/dist/metadata.json

Lines changed: 21 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,7 @@
1717
".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold",
1818
".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon",
1919
".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
20-
<<<<<<< HEAD
21-
".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)",
22-
=======
23-
".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
24-
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
20+
".spectrum-ActionButton.is-selected.spectrum-ActionButton--quiet",
2521
".spectrum-ActionButton.spectrum-ActionButton--quiet",
2622
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
2723
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
@@ -43,17 +39,13 @@
4339
"--mod-actionbutton-animation-duration",
4440
"--mod-actionbutton-background-color-default",
4541
"--mod-actionbutton-background-color-default-selected",
46-
"--mod-actionbutton-background-color-default-selected-emphasized",
4742
"--mod-actionbutton-background-color-disabled",
4843
"--mod-actionbutton-background-color-down",
4944
"--mod-actionbutton-background-color-down-selected",
50-
"--mod-actionbutton-background-color-down-selected-emphasized",
5145
"--mod-actionbutton-background-color-focus",
5246
"--mod-actionbutton-background-color-focus-selected",
53-
"--mod-actionbutton-background-color-focus-selected-emphasized",
5447
"--mod-actionbutton-background-color-hover",
5548
"--mod-actionbutton-background-color-hover-selected",
56-
"--mod-actionbutton-background-color-hover-selected-emphasized",
5749
"--mod-actionbutton-border-color-default",
5850
"--mod-actionbutton-border-color-disabled",
5951
"--mod-actionbutton-border-color-down",
@@ -63,26 +55,20 @@
6355
"--mod-actionbutton-border-width",
6456
"--mod-actionbutton-content-color-default",
6557
"--mod-actionbutton-content-color-default-selected",
66-
"--mod-actionbutton-content-color-default-selected-emphasized",
6758
"--mod-actionbutton-content-color-disabled",
6859
"--mod-actionbutton-content-color-down",
6960
"--mod-actionbutton-content-color-down-selected",
70-
"--mod-actionbutton-content-color-down-selected-emphasized",
7161
"--mod-actionbutton-content-color-focus",
7262
"--mod-actionbutton-content-color-focus-selected",
73-
"--mod-actionbutton-content-color-focus-selected-emphasized",
7463
"--mod-actionbutton-content-color-hover",
7564
"--mod-actionbutton-content-color-hover-selected",
76-
"--mod-actionbutton-content-color-hover-selected-emphasized",
7765
"--mod-actionbutton-edge-to-hold-icon",
7866
"--mod-actionbutton-edge-to-text",
7967
"--mod-actionbutton-edge-to-visual",
8068
"--mod-actionbutton-edge-to-visual-only",
8169
"--mod-actionbutton-focus-indicator-border-radius",
8270
"--mod-actionbutton-focus-indicator-color",
8371
"--mod-actionbutton-focus-indicator-gap",
84-
"--mod-actionbutton-focus-indicator-thickness",
85-
"--mod-actionbutton-font-size",
8672
"--mod-actionbutton-height",
8773
"--mod-actionbutton-icon-size",
8874
"--mod-actionbutton-label-color",
@@ -96,7 +82,7 @@
9682
"--spectrum-action-button-edge-to-hold-icon-large",
9783
"--spectrum-action-button-edge-to-hold-icon-medium",
9884
"--spectrum-action-button-edge-to-hold-icon-small",
99-
"--spectrum-actionbutton-background-color",
85+
"--spectrum-actionbutton-animation-duration",
10086
"--spectrum-actionbutton-background-color-default",
10187
"--spectrum-actionbutton-background-color-disabled",
10288
"--spectrum-actionbutton-background-color-down",
@@ -107,52 +93,34 @@
10793
"--spectrum-actionbutton-background-color-selected-down",
10894
"--spectrum-actionbutton-background-color-selected-focus",
10995
"--spectrum-actionbutton-background-color-selected-hover",
110-
<<<<<<< HEAD
111-
"--spectrum-actionbutton-border-color",
112-
=======
113-
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
11496
"--spectrum-actionbutton-border-color-default",
11597
"--spectrum-actionbutton-border-color-disabled",
11698
"--spectrum-actionbutton-border-color-down",
11799
"--spectrum-actionbutton-border-color-focus",
118100
"--spectrum-actionbutton-border-color-hover",
119101
"--spectrum-actionbutton-border-radius",
120102
"--spectrum-actionbutton-border-width",
121-
<<<<<<< HEAD
122-
"--spectrum-actionbutton-content-color",
123-
=======
124103
"--spectrum-actionbutton-content-color-default",
125104
"--spectrum-actionbutton-content-color-disabled",
126105
"--spectrum-actionbutton-content-color-down",
127106
"--spectrum-actionbutton-content-color-focus",
128107
"--spectrum-actionbutton-content-color-hover",
129-
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
130108
"--spectrum-actionbutton-content-color-selected",
131109
"--spectrum-actionbutton-edge-to-hold-icon",
132110
"--spectrum-actionbutton-edge-to-text",
133111
"--spectrum-actionbutton-edge-to-visual",
134112
"--spectrum-actionbutton-edge-to-visual-only",
113+
"--spectrum-actionbutton-focus-indicator-border-radius",
135114
"--spectrum-actionbutton-focus-indicator-color",
136115
"--spectrum-actionbutton-focus-indicator-gap",
137116
"--spectrum-actionbutton-focus-indicator-thickness",
138117
"--spectrum-actionbutton-font-size",
139118
"--spectrum-actionbutton-height",
140119
"--spectrum-actionbutton-icon-size",
141-
"--spectrum-actionbutton-sized-edge-to-hold-icon",
142-
"--spectrum-actionbutton-sized-edge-to-text",
143-
"--spectrum-actionbutton-sized-edge-to-visual",
144-
"--spectrum-actionbutton-sized-edge-to-visual-only",
145-
"--spectrum-actionbutton-sized-font-size",
146-
"--spectrum-actionbutton-sized-height",
147-
"--spectrum-actionbutton-sized-icon-size",
148-
"--spectrum-actionbutton-sized-text-to-visual",
120+
"--spectrum-actionbutton-min-width",
149121
"--spectrum-actionbutton-text-to-visual"
150122
],
151123
"global": [
152-
"--spectrum-accent-background-color-default",
153-
"--spectrum-accent-background-color-down",
154-
"--spectrum-accent-background-color-hover",
155-
"--spectrum-accent-background-color-key-focus",
156124
"--spectrum-animation-duration-100",
157125
"--spectrum-black",
158126
"--spectrum-border-width-100",
@@ -176,22 +144,14 @@
176144
"--spectrum-component-height-300",
177145
"--spectrum-component-height-50",
178146
"--spectrum-component-height-75",
179-
<<<<<<< HEAD
180-
"--spectrum-corner-radius-100",
181-
"--spectrum-disabled-border-color",
182-
"--spectrum-disabled-content-color",
183-
"--spectrum-disabled-static-black-border-color",
184-
"--spectrum-disabled-static-black-content-color",
185-
"--spectrum-disabled-static-white-border-color",
186-
"--spectrum-disabled-static-white-content-color",
187-
=======
188147
"--spectrum-corner-radius-medium-size-extra-large",
189148
"--spectrum-corner-radius-medium-size-extra-small",
190149
"--spectrum-corner-radius-medium-size-large",
191150
"--spectrum-corner-radius-medium-size-medium",
192151
"--spectrum-corner-radius-medium-size-small",
193152
"--spectrum-disabled-border-color",
194-
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
153+
"--spectrum-disabled-static-black-border-color",
154+
"--spectrum-disabled-static-black-content-color",
195155
"--spectrum-focus-indicator-color",
196156
"--spectrum-focus-indicator-gap",
197157
"--spectrum-focus-indicator-thickness",
@@ -202,10 +162,6 @@
202162
"--spectrum-font-size-75",
203163
"--spectrum-gray-100",
204164
"--spectrum-gray-200",
205-
<<<<<<< HEAD
206-
=======
207-
"--spectrum-gray-25",
208-
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
209165
"--spectrum-gray-400",
210166
"--spectrum-gray-50",
211167
"--spectrum-gray-500",
@@ -222,7 +178,6 @@
222178
"--spectrum-neutral-content-color-key-focus",
223179
"--spectrum-sans-font-family-stack",
224180
"--spectrum-static-black-focus-indicator-color",
225-
"--spectrum-static-white-focus-indicator-color",
226181
"--spectrum-text-to-visual-100",
227182
"--spectrum-text-to-visual-200",
228183
"--spectrum-text-to-visual-300",
@@ -234,21 +189,13 @@
234189
"--spectrum-transparent-black-500",
235190
"--spectrum-transparent-black-600",
236191
"--spectrum-transparent-black-700",
237-
<<<<<<< HEAD
238192
"--spectrum-transparent-black-800",
239193
"--spectrum-transparent-black-900",
240-
=======
241-
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
242194
"--spectrum-transparent-white-200",
243195
"--spectrum-transparent-white-400",
244196
"--spectrum-transparent-white-500",
245197
"--spectrum-transparent-white-600",
246198
"--spectrum-transparent-white-700",
247-
<<<<<<< HEAD
248-
"--spectrum-transparent-white-800",
249-
"--spectrum-transparent-white-900",
250-
=======
251-
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
252199
"--spectrum-white",
253200
"--spectrum-workflow-icon-size-100",
254201
"--spectrum-workflow-icon-size-200",
@@ -262,9 +209,21 @@
262209
"--mod-button-line-height"
263210
],
264211
"high-contrast": [
265-
"--highcontrast-actionbutton-background-color",
266-
"--highcontrast-actionbutton-border-color",
267-
"--highcontrast-actionbutton-content-color",
212+
"--highcontrast-actionbutton-background-color-default",
213+
"--highcontrast-actionbutton-background-color-disabled",
214+
"--highcontrast-actionbutton-background-color-down",
215+
"--highcontrast-actionbutton-background-color-focus",
216+
"--highcontrast-actionbutton-background-color-hover",
217+
"--highcontrast-actionbutton-border-color-default",
218+
"--highcontrast-actionbutton-border-color-disabled",
219+
"--highcontrast-actionbutton-border-color-down",
220+
"--highcontrast-actionbutton-border-color-focus",
221+
"--highcontrast-actionbutton-border-color-hover",
222+
"--highcontrast-actionbutton-content-color-default",
223+
"--highcontrast-actionbutton-content-color-disabled",
224+
"--highcontrast-actionbutton-content-color-down",
225+
"--highcontrast-actionbutton-content-color-focus",
226+
"--highcontrast-actionbutton-content-color-hover",
268227
"--highcontrast-actionbutton-focus-indicator-color"
269228
]
270229
}

‎components/actionbutton/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,7 @@
181181
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-400);
182182
}
183183
}
184+
}
184185

185186
.spectrum-ActionButton--sizeXS {
186187
--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-extra-small));

‎components/menu/dist/metadata.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,6 @@
338338
"--spectrum-component-top-to-text-200",
339339
"--spectrum-component-top-to-text-300",
340340
"--spectrum-component-top-to-text-75",
341-
"--spectrum-corner-radius-100",
342341
"--spectrum-disabled-content-color",
343342
"--spectrum-divider-thickness-medium",
344343
"--spectrum-divider-thickness-small",

‎components/menu/index.css

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,6 @@
8383
--spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
8484
--spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
8585

86-
--spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100);
87-
88-
/* Focus state styling */
89-
--spectrum-menu-item-focus-indicator-shadow: none;
90-
--spectrum-menu-item-focus-indicator-offset: var(--spectrum-spacing-50);
91-
--spectrum-menu-item-spacing-multiplier: 1;
92-
--spectrum-menu-item-focus-indicator-outline-style: solid;
93-
9486
--spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
9587
--spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
9688

‎components/popover/index.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
--spectrum-popover-background-color: var(--spectrum-background-layer-2-color);
2323
--spectrum-popover-border-color: var(--spectrum-gray-400);
2424

25+
--spectrum-popover-border-width: var(--spectrum-border-width-100);
26+
2527
/* popover inner padding */
2628
--spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area);
2729

‎components/tabs/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
--spectrum-tabs-font-style: var(--spectrum-default-font-style);
3838
--spectrum-tabs-font-size: var(--spectrum-font-size-100);
3939
--spectrum-tabs-line-height: var(--spectrum-line-height-100);
40+
--spectrum-tabs-font-weight: var(--spectrum-regular-font-weight);
4041

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

‎components/tag/dist/metadata.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
".spectrum-Tag .spectrum-Tag-itemIcon",
99
".spectrum-Tag .spectrum-Tag-itemLabel",
1010
".spectrum-Tag--sizeL",
11-
".spectrum-Tag--sizeM",
1211
".spectrum-Tag--sizeS",
1312
".spectrum-Tag.is-disabled",
1413
".spectrum-Tag.is-disabled .spectrum-Avatar",

‎components/tag/index.css

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,29 @@
5858
--spectrum-tag-animation-duration: var(--spectrum-animation-duration-100);
5959
--spectrum-tag-border-width: var(--spectrum-border-width-100);
6060

61+
/* background color */
62+
--spectrum-tag-background-color: var(--spectrum-gray-50);
63+
--spectrum-tag-background-color-hover: var(--spectrum-gray-50);
64+
--spectrum-tag-background-color-active: var(--spectrum-gray-100);
65+
--spectrum-tag-background-color-focus: var(--spectrum-gray-50);
66+
67+
/* border radius */
68+
--spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100);
69+
--spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100);
70+
--spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100);
71+
72+
/* border color */
73+
--spectrum-tag-border-color: var(--spectrum-gray-700);
74+
--spectrum-tag-border-color-hover: var(--spectrum-gray-800);
75+
--spectrum-tag-border-color-active: var(--spectrum-gray-900);
76+
--spectrum-tag-border-color-focus: var(--spectrum-gray-800);
77+
78+
/* content color */
79+
--spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default);
80+
--spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
81+
--spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down);
82+
--spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
83+
6184
/* focus ring */
6285
--spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
6386
--spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap);
@@ -71,6 +94,10 @@
7194
--spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
7295
--spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down);
7396
--spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
97+
--spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default);
98+
--spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
99+
--spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down);
100+
--spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
74101

75102
/* invalid variant */
76103
--spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900);
@@ -112,10 +139,9 @@
112139

113140
/* disabled variant content */
114141
--spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color);
115-
}
142+
--spectrum-tag-border-color-disabled: transparent;
143+
--spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color);
116144

117-
.spectrum-Tag,
118-
.spectrum-Tag--sizeM {
119145
--spectrum-tag-height: var(--spectrum-component-height-100);
120146
--spectrum-tag-font-size: var(--spectrum-font-size-100);
121147
--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100);
@@ -138,6 +164,16 @@
138164
--spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start);
139165
--spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end);
140166
--spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end);
167+
168+
--spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
169+
--spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
170+
--spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75);
171+
--spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
172+
--spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100);
173+
--spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100);
174+
--spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
175+
--spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200);
176+
--spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
141177
}
142178

143179
/* t-shirt sizes */

‎components/textfield/index.css

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

40+
--spectrum-textfield-border-color: var(--spectrum-gray-500);
41+
--spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
42+
--spectrum-textfield-border-color-focus: var(--spectrum-gray-800);
43+
--spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900);
44+
--spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
45+
46+
--spectrum-textfield-border-width: var(--spectrum-border-width-100);
47+
4048
/* default spacing */
4149
--spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet);
4250
--spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100);

‎components/toast/index.css

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

5353
/* Color */
54+
--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
5455
--spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
5556
--spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
5657
--spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);
58+
--spectrum-toast-divider-color: var(--spectrum-transparent-white-400);
5759

5860
--spectrum-toast-text-and-icon-color: var(--spectrum-white);
5961
}

‎components/well/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
--spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05);
1616

1717
--spectrum-well-border-width: var(--spectrum-border-width-100);
18+
--spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), .05);
1819
--spectrum-well-content-color: var(--spectrum-body-color);
1920
--spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02);
2021

0 commit comments

Comments
 (0)