Skip to content

Commit 8d65de0

Browse files
rise-erpeldingcastastrophe
rise-erpelding
authored and
castastrophe
committed
fix(calendar,dial,pickerbutton,progressbar,radio,stepper): unused custom properties (#3487)
* fix(pickerbutton): add missing custom properties * fix(radio): add missing custom props * fix(calendar): add missing custom properties * fix(stepper): define unused custom props * fix(progressbar): remove unused custom properties; change background-color to background see #2929; fix static color * fix(dial): remove unused custom properties; add undefined custom properties
1 parent 5fb2198 commit 8d65de0

File tree

12 files changed

+151
-70
lines changed

12 files changed

+151
-70
lines changed

‎.changeset/wicked-dragons-cheer.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
"@spectrum-css/pickerbutton": patch
3+
"@spectrum-css/progressbar": patch
4+
"@spectrum-css/calendar": patch
5+
"@spectrum-css/stepper": patch
6+
"@spectrum-css/radio": patch
7+
"@spectrum-css/dial": patch
8+
---
9+
10+
Fixes to align `spectrum-two` with `s2-foundations-redux`/`main`, mostly defining unused custom properties, but addresses any other lint warnings or inconsistencies noted in the following components:
11+
12+
**Calendar**: Defines 1 previously undefined custom property to align with `main` and `s2-foundations-redux`
13+
**Dial**: Defines 6 previously undefined custom properties, removes 3 unused custom properties
14+
**Pickerbutton**: Defines 9 previously undefined custom properties to align with `main` and `s2-foundations-redux`
15+
**Progressbar**: Removes 3 unused custom properties, reverts background-color to background to accommodate gradients
16+
**Radio**: Defines 4 previously undefined custom properties to align with `main` and `s2-foundations-redux`
17+
**Stepper**: moves high contrast block further down to align with other components' CSS structure, defines multiple undefined custom properties, adds disable-next-line comment to suppress no-unused-custom-properties warning

‎components/calendar/dist/metadata.json

+1
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,7 @@
166166
"--spectrum-font-size-100",
167167
"--spectrum-font-size-300",
168168
"--spectrum-font-size-50",
169+
"--spectrum-gray-100-rgb",
169170
"--spectrum-gray-800",
170171
"--spectrum-logical-rotation",
171172
"--spectrum-neutral-content-color-default",

‎components/calendar/index.css

+1
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
--spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent);
4747
--spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)));
4848
--spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
49+
--spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4);
4950
--spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)));
5051
--spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)));
5152
--spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)));

‎components/dial/dist/metadata.json

+2-4
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,7 @@
7575
"component": [
7676
"--spectrum-dial-background-color-default",
7777
"--spectrum-dial-border-color",
78-
"--spectrum-dial-border-color-disabled",
7978
"--spectrum-dial-border-color-hover",
80-
"--spectrum-dial-border-color-key-focus",
8179
"--spectrum-dial-border-radius",
8280
"--spectrum-dial-container-width",
8381
"--spectrum-dial-controls-margin",
@@ -88,7 +86,6 @@
8886
"--spectrum-dial-handle-inline-margin",
8987
"--spectrum-dial-handle-marker-border-radius",
9088
"--spectrum-dial-handle-marker-color",
91-
"--spectrum-dial-handle-marker-color-disabled",
9289
"--spectrum-dial-handle-marker-color-hover",
9390
"--spectrum-dial-handle-marker-color-key-focus",
9491
"--spectrum-dial-handle-marker-color-mouse-focus",
@@ -111,11 +108,12 @@
111108
"global": [
112109
"--spectrum-border-width-200",
113110
"--spectrum-font-size-75",
114-
"--spectrum-gray-200",
115111
"--spectrum-gray-25",
112+
"--spectrum-gray-400",
116113
"--spectrum-gray-600",
117114
"--spectrum-gray-700",
118115
"--spectrum-gray-75",
116+
"--spectrum-gray-800",
119117
"--spectrum-line-height-200"
120118
],
121119
"passthroughs": [],

‎components/dial/index.css

+9-4
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,21 @@
1414
.spectrum-Dial {
1515
--spectrum-dial-background-color-default: var(--spectrum-gray-75);
1616

17-
--spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-200);
18-
--spectrum-dial-border-color-disabled: var(--spectrum-gray-200);
19-
2017
--spectrum-dial-handle-marker-color: var(--spectrum-gray-700);
2118
--spectrum-dial-border-color: var(--spectrum-gray-700);
2219

20+
--spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800);
21+
--spectrum-dial-border-color-hover: var(--spectrum-gray-800);
22+
23+
--spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700);
24+
2325
--spectrum-dial-min-max-tick-color: var(--spectrum-gray-600);
2426

2527
--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25);
26-
--spectrum-dial-border-color-key-focus: var(--spectrum-gray-25);
28+
29+
--spectrum-dial-label-text-color: var(--spectrum-gray-700);
30+
--spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700);
31+
--spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400);
2732

2833
--spectrum-dial-container-width: 48px;
2934

‎components/pickerbutton/dist/metadata.json

+5
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,12 @@
107107
"global": [
108108
"--spectrum-animation-duration-100",
109109
"--spectrum-body-sans-serif-font-weight",
110+
"--spectrum-border-width-100",
110111
"--spectrum-component-height-100",
111112
"--spectrum-component-height-200",
112113
"--spectrum-component-height-300",
113114
"--spectrum-component-height-75",
115+
"--spectrum-corner-radius-100",
114116
"--spectrum-corner-radius-200",
115117
"--spectrum-default-font-style",
116118
"--spectrum-disabled-background-color",
@@ -123,6 +125,9 @@
123125
"--spectrum-font-size-200",
124126
"--spectrum-font-size-300",
125127
"--spectrum-font-size-75",
128+
"--spectrum-gray-100",
129+
"--spectrum-gray-200",
130+
"--spectrum-gray-50",
126131
"--spectrum-in-field-button-edge-to-fill",
127132
"--spectrum-neutral-content-color-default",
128133
"--spectrum-neutral-content-color-down",

‎components/pickerbutton/index.css

+9
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,17 @@
3535
--spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight);
3636
--spectrum-picker-button-font-size: var(--spectrum-font-size-100);
3737

38+
--spectrum-picker-button-border-color: inherit;
39+
--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100);
40+
--spectrum-picker-button-border-radius-rounded-sided: 0;
41+
--spectrum-picker-button-border-radius-sided: 0;
42+
--spectrum-picker-button-border-width: var(--spectrum-border-width-100);
3843
--spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
3944

45+
--spectrum-picker-button-background-color: var(--spectrum-gray-50);
46+
--spectrum-picker-button-background-color-hover: var(--spectrum-gray-100);
47+
--spectrum-picker-button-background-color-down: var(--spectrum-gray-200);
48+
--spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100);
4049
--spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
4150

4251
&:hover {

‎components/progressbar/index.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -133,14 +133,14 @@
133133
block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
134134
border-radius: var(--spectrum-progressbar-corner-radius);
135135

136-
background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
136+
background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
137137
}
138138

139139
.spectrum-ProgressBar-fill {
140140
border: none;
141141
block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
142142
transition: width 1s;
143-
background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
143+
background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
144144
}
145145
}
146146

@@ -183,7 +183,7 @@
183183
.spectrum-ProgressBar--staticWhite {
184184
.spectrum-ProgressBar-fill {
185185
color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
186-
background-color: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)));
186+
background: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)));
187187
}
188188

189189
.spectrum-ProgressBar-label,
@@ -192,7 +192,7 @@
192192
}
193193

194194
.spectrum-ProgressBar-track {
195-
background-color: var(--spectrum-progressbar-track-color-white);
195+
background: var(--spectrum-progressbar-track-color-white);
196196
}
197197
}
198198

‎components/radio/dist/metadata.json

+3
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,9 @@
149149
"--spectrum-font-size-300",
150150
"--spectrum-font-size-75",
151151
"--spectrum-gray-50",
152+
"--spectrum-gray-600",
153+
"--spectrum-gray-700",
154+
"--spectrum-gray-800",
152155
"--spectrum-line-height-100",
153156
"--spectrum-neutral-background-color-selected-default",
154157
"--spectrum-neutral-background-color-selected-down",

‎components/radio/index.css

+6
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,12 @@
5353
--spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
5454
--spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
5555

56+
/* unchecked selection indicator */
57+
--spectrum-radio-button-border-color-default: var(--spectrum-gray-600);
58+
--spectrum-radio-button-border-color-hover: var(--spectrum-gray-700);
59+
--spectrum-radio-button-border-color-down: var(--spectrum-gray-800);
60+
--spectrum-radio-button-border-color-focus: var(--spectrum-gray-700);
61+
5662
/* checked selection indicator */
5763
--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
5864
--spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);

‎components/stepper/dist/metadata.json

+7
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@
111111
],
112112
"global": [
113113
"--spectrum-animation-duration-100",
114+
"--spectrum-border-width-100",
114115
"--spectrum-component-height-100",
115116
"--spectrum-component-height-200",
116117
"--spectrum-component-height-300",
@@ -120,6 +121,12 @@
120121
"--spectrum-focus-indicator-color",
121122
"--spectrum-focus-indicator-gap",
122123
"--spectrum-focus-indicator-thickness",
124+
"--spectrum-gray-25",
125+
"--spectrum-gray-50",
126+
"--spectrum-gray-500",
127+
"--spectrum-gray-600",
128+
"--spectrum-gray-800",
129+
"--spectrum-gray-900",
123130
"--spectrum-in-field-button-width-stacked-extra-large",
124131
"--spectrum-in-field-button-width-stacked-large",
125132
"--spectrum-in-field-button-width-stacked-medium",

‎components/stepper/index.css

+87-58
Original file line numberDiff line numberDiff line change
@@ -11,66 +11,14 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14-
/* --- High contrast settings --- */
15-
@media (forced-colors: active) {
16-
.spectrum-Stepper {
17-
--highcontrast-stepper-border-color: CanvasText;
18-
--highcontrast-stepper-border-color-hover: Highlight;
19-
--highcontrast-stepper-border-color-focus: Highlight;
20-
--highcontrast-stepper-border-color-focus-hover: Highlight;
21-
--highcontrast-stepper-border-color-keyboard-focus: CanvasText;
22-
--highcontrast-stepper-focus-indicator-color: Highlight;
23-
24-
&.is-invalid {
25-
--highcontrast-stepper-border-color: Highlight;
26-
--highcontrast-stepper-border-color-hover: Highlight;
27-
--highcontrast-stepper-border-color-focus: Highlight;
28-
--highcontrast-stepper-border-color-focus-hover: Highlight;
29-
--highcontrast-stepper-border-color-keyboard-focus: Highlight;
30-
}
31-
32-
&.is-disabled {
33-
--highcontrast-stepper-border-color: GrayText;
34-
--highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
35-
}
36-
37-
&:not(.is-disabled) {
38-
&:hover {
39-
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover);
40-
}
41-
42-
&.is-focused,
43-
&:focus {
44-
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus);
45-
46-
&:hover {
47-
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover);
48-
}
49-
}
50-
51-
&.is-keyboardFocused,
52-
&:focus-visible {
53-
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus);
54-
}
55-
}
56-
}
57-
58-
/* @passthrough start */
59-
.spectrum-Stepper-input {
60-
--highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color);
61-
}
62-
/* @passthrough end */
63-
64-
/* @passthrough start */
65-
.spectrum-Stepper-button {
66-
--highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color);
67-
--highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color);
68-
}
69-
/* @passthrough end */
70-
}
71-
7214
/* --- Component-level definitions --- */
7315
.spectrum-Stepper {
16+
--spectrum-stepper-border-width: var(--spectrum-border-width-100);
17+
--spectrum-stepper-border-color-default: var(--spectrum-gray-500);
18+
--spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
19+
--spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
20+
--spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800);
21+
--spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
7422
--spectrum-stepper-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-default)));
7523
--spectrum-stepper-border-radius: var(--mod-stepper-border-radius, var(--spectrum-corner-radius-100));
7624

@@ -83,6 +31,26 @@
8331
--spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium));
8432
--spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100));
8533

34+
--spectrum-stepper-buttons-border-style: none;
35+
--spectrum-stepper-buttons-border-width: 0;
36+
--spectrum-stepper-buttons-border-color: var(--spectrum-gray-500);
37+
--spectrum-stepper-buttons-background-color: var(--spectrum-gray-25);
38+
--spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
39+
--spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
40+
--spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900);
41+
42+
--spectrum-stepper-button-border-width: var(--spectrum-border-width-100);
43+
44+
/** Invalid **/
45+
--spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default);
46+
--spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus);
47+
--spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover);
48+
--spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
49+
50+
/** Disabled **/
51+
--spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100);
52+
--spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
53+
8654
&.spectrum-Stepper--sizeS {
8755
--spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-small));
8856
--spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-75));
@@ -131,6 +99,9 @@
13199
}
132100

133101
&.spectrum-Stepper--quiet {
102+
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used by --mod-infield-button-inner-edge-to-fill and --mod-infield-button-edge-to-fill */
103+
--spectrum-stepper-button-edge-to-fill: 0;
104+
134105
--mod-stepper-buttons-background-color: transparent;
135106

136107
/* quiet hover */
@@ -151,6 +122,64 @@
151122
}
152123
}
153124

125+
/* --- High contrast settings --- */
126+
@media (forced-colors: active) {
127+
.spectrum-Stepper {
128+
--highcontrast-stepper-border-color: CanvasText;
129+
--highcontrast-stepper-border-color-hover: Highlight;
130+
--highcontrast-stepper-border-color-focus: Highlight;
131+
--highcontrast-stepper-border-color-focus-hover: Highlight;
132+
--highcontrast-stepper-border-color-keyboard-focus: CanvasText;
133+
--highcontrast-stepper-focus-indicator-color: Highlight;
134+
135+
&.is-invalid {
136+
--highcontrast-stepper-border-color: Highlight;
137+
--highcontrast-stepper-border-color-hover: Highlight;
138+
--highcontrast-stepper-border-color-focus: Highlight;
139+
--highcontrast-stepper-border-color-focus-hover: Highlight;
140+
--highcontrast-stepper-border-color-keyboard-focus: Highlight;
141+
}
142+
143+
&.is-disabled {
144+
--highcontrast-stepper-border-color: GrayText;
145+
--highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
146+
}
147+
148+
&:not(.is-disabled) {
149+
&:hover {
150+
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover);
151+
}
152+
153+
&.is-focused,
154+
&:focus {
155+
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus);
156+
157+
&:hover {
158+
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover);
159+
}
160+
}
161+
162+
&.is-keyboardFocused,
163+
&:focus-visible {
164+
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus);
165+
}
166+
}
167+
}
168+
169+
/* @passthrough start */
170+
.spectrum-Stepper-input {
171+
--highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color);
172+
}
173+
/* @passthrough end */
174+
175+
/* @passthrough start */
176+
.spectrum-Stepper-button {
177+
--highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color);
178+
--highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color);
179+
}
180+
/* @passthrough end */
181+
}
182+
154183
/* --- Component-level passthroughs for nested components --- */
155184
/* @passthrough start -- MODS for sub components */
156185
.spectrum-Stepper {

0 commit comments

Comments
 (0)