Skip to content

Commit 8812a1a

Browse files
cdransfcdransf
committed
chore(stylelint): addresses remaining stylelint violations
1 parent 588eebf commit 8812a1a

File tree

31 files changed

+57
-74
lines changed

31 files changed

+57
-74
lines changed

‎.changeset/clever-otters-mix.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
"@spectrum-css/infieldbutton": minor
3+
"@spectrum-css/logicbutton": minor
4+
"@spectrum-css/progressbar": minor
5+
"@spectrum-css/colorwheel": minor
6+
"@spectrum-css/assetcard": minor
7+
"@spectrum-css/colorarea": minor
8+
"@spectrum-css/calendar": minor
9+
"@spectrum-css/checkbox": minor
10+
"@spectrum-css/underlay": minor
11+
"@spectrum-css/stepper": minor
12+
"@spectrum-css/button": minor
13+
"@spectrum-css/modal": minor
14+
"@spectrum-css/radio": minor
15+
"@spectrum-css/table": minor
16+
"@spectrum-css/card": minor
17+
"@spectrum-css/site": minor
18+
"@spectrum-css/tokens": minor
19+
---
20+
21+
This resolves our remaining stylelint issues around undefined tokens, rule order, unused values and color syntax.
22+
23+
- Updates invalid color syntax from `rgba(N, N, N, N)` to `rgba(N N N / N)`.
24+
- In cases of duplicate properties, preserves the property that would be applied given current code structure.
25+
- Updates misnamed tokens to use valid tokens (`table/index.css`).

‎components/assetcard/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@
272272

273273
border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius));
274274

275-
box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0, 0, 0, 15%);
275+
box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0 0 0 / 15%);
276276

277277
color: var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color)));
278278
font-weight: var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight));

‎components/assetcard/themes/express.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515

1616
@container (--system: express) {
1717
.spectrum-AssetCard {
18-
--spectrum-assetcard-overlay-background-color: rgba(109, 115, 246, 20%);
18+
--spectrum-assetcard-overlay-background-color: rgba(109 115 246 / 20%);
1919
}
2020
}

‎components/assetcard/themes/spectrum.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@
1313

1414
@container (--system: spectrum) {
1515
.spectrum-AssetCard {
16-
--spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%);
16+
--spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);
1717
}
1818
}

‎components/calendar/index.css

-2
Original file line numberDiff line numberDiff line change
@@ -411,7 +411,6 @@
411411
@media (forced-colors: active) {
412412
.spectrum-Calendar-prevMonth,
413413
.spectrum-Calendar-nextMonth {
414-
--highcontrast-calendar-button-icon-color-disabled: GrayText;
415414
--highcontrast-calendar-button-icon-color: ButtonText;
416415
}
417416

@@ -427,7 +426,6 @@
427426
--highcontrast-calendar-day-text-color-disabled: GrayText;
428427
--highcontrast-calendar-day-text-color-hover: ButtonText;
429428
--highcontrast-calendar-day-text-color-key-focus: ButtonText;
430-
--highcontrast-calendar-day-text-color-selected-hover: HighlightText;
431429
--highcontrast-calendar-day-text-color-selected: HighlightText;
432430
--highcontrast-calendar-day-title-text-color: CanvasText;
433431
--highcontrast-calendar-day-today-background-color-selected-hover: Highlight;

‎components/calendar/metadata/metadata.json

-2
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,6 @@
170170
"passthroughs": [],
171171
"high-contrast": [
172172
"--highcontrast-calendar-button-icon-color",
173-
"--highcontrast-calendar-button-icon-color-disabled",
174173
"--highcontrast-calendar-day-background-color-cap-selected",
175174
"--highcontrast-calendar-day-background-color-down",
176175
"--highcontrast-calendar-day-background-color-hover",
@@ -183,7 +182,6 @@
183182
"--highcontrast-calendar-day-text-color-hover",
184183
"--highcontrast-calendar-day-text-color-key-focus",
185184
"--highcontrast-calendar-day-text-color-selected",
186-
"--highcontrast-calendar-day-text-color-selected-hover",
187185
"--highcontrast-calendar-day-title-text-color",
188186
"--highcontrast-calendar-day-today-background-color-selected-hover",
189187
"--highcontrast-calendar-day-today-border-color",

‎components/card/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156
}
157157

158158
&.is-drop-target {
159-
--mod-card-background-color: var(--spectrum-card-background-color-quiet, var(--spectrum-background-base-color));
159+
--mod-card-background-color: var(--spectrum-background-base-color);
160160

161161
border-color: var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)));
162162
box-shadow: 0 0 0 1px var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)));

‎components/card/metadata/metadata.json

-1
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,6 @@
148148
"--spectrum-card-actions-size",
149149
"--spectrum-card-actions-spacing",
150150
"--spectrum-card-background-color",
151-
"--spectrum-card-background-color-quiet",
152151
"--spectrum-card-body-font-color",
153152
"--spectrum-card-body-font-family",
154153
"--spectrum-card-body-font-size",

‎components/checkbox/index.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,8 @@
462462
}
463463

464464
.spectrum-Checkbox-box {
465+
--spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)));
466+
465467
display: flex;
466468
align-items: center;
467469
justify-content: center;
@@ -472,7 +474,6 @@
472474
block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size));
473475

474476
/* Fix vertical alignment when not wrapping since we're flex-start */
475-
--spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)));
476477
margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0;
477478

478479
flex-grow: 0;

‎components/colorarea/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
*/
1313
.spectrum-ColorArea {
1414
--spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
15-
--spectrum-colorarea-border-color: rgba(0, 0, 0, 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
15+
--spectrum-colorarea-border-color: rgba(0 0 0 / 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
1616
--spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
1717
--spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
1818
--spectrum-colorarea-height: var(--spectrum-color-area-height);

‎components/colorwheel/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124

125125
.spectrum-ColorWheel-wheel {
126126
position: absolute;
127-
background: conic-gradient(from 90deg, red, rgb(255, 128, 0), rgb(255, 255, 0), rgb(128, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128), red);
127+
background: conic-gradient(from 90deg, red, rgb(255 128 0), rgb(255 255 0), rgb(128 255 0), rgb(0 255 0), rgb(0 255 128), rgb(0 255 255), rgb(0 128 255), rgb(0 0 255), rgb(128 0 255), rgb(255 0 255), rgb(255 0 128), red);
128128
inset-block: var(--spectrum-colorwheel-border-width);
129129
inset-inline: var(--spectrum-colorwheel-border-width);
130130
clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path)));

‎components/infieldbutton/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@
202202
align-items: center;
203203
justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content));
204204

205-
transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out;
205+
transition: border-color var(--spectrum-animation-duration-100) ease-in-out;
206206
}
207207

208208
/* Stacked in-field buttons */

‎components/infieldbutton/metadata/metadata.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@
129129
"--spectrum-infield-button-width"
130130
],
131131
"global": [
132+
"--spectrum-animation-duration-100",
132133
"--spectrum-border-width-100",
133134
"--spectrum-component-height-100",
134135
"--spectrum-component-height-200",
@@ -138,7 +139,6 @@
138139
"--spectrum-corner-radius-75",
139140
"--spectrum-disabled-background-color",
140141
"--spectrum-disabled-content-color",
141-
"--spectrum-global-animation-duration-100",
142142
"--spectrum-gray-200",
143143
"--spectrum-gray-300",
144144
"--spectrum-gray-400",

‎components/logicbutton/index.css

+11-11
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,17 @@
107107
}
108108

109109
.spectrum-LogicButton {
110+
--highcontrast-logic-button-and-background-color: ButtonFace;
111+
--highcontrast-logic-button-and-background-color-hover: ButtonFace;
112+
--highcontrast-logic-button-and-border-color: ButtonText;
113+
--highcontrast-logic-button-and-border-color-hover: Highlight;
114+
--highcontrast-logic-button-and-text-color: ButtonText;
115+
--highcontrast-logic-button-or-background-color: ButtonFace;
116+
--highcontrast-logic-button-or-background-color-hover: ButtonFace;
117+
--highcontrast-logic-button-or-border-color: ButtonText;
118+
--highcontrast-logic-button-or-border-color-hover: Highlight;
119+
--highcontrast-logic-button-or-text-color: ButtonText;
120+
110121
forced-color-adjust: none;
111122

112123
&:disabled,
@@ -118,16 +129,5 @@
118129
--highcontrast-logic-button-or-border-color: GrayText;
119130
--highcontrast-logic-button-or-text-color: GrayText;
120131
}
121-
122-
--highcontrast-logic-button-and-background-color: ButtonFace;
123-
--highcontrast-logic-button-and-background-color-hover: ButtonFace;
124-
--highcontrast-logic-button-and-border-color: ButtonText;
125-
--highcontrast-logic-button-and-border-color-hover: Highlight;
126-
--highcontrast-logic-button-and-text-color: ButtonText;
127-
--highcontrast-logic-button-or-background-color: ButtonFace;
128-
--highcontrast-logic-button-or-background-color-hover: ButtonFace;
129-
--highcontrast-logic-button-or-border-color: ButtonText;
130-
--highcontrast-logic-button-or-border-color-hover: Highlight;
131-
--highcontrast-logic-button-or-text-color: ButtonText;
132132
}
133133
}

‎components/modal/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
@extend %spectrum-overlay;
7575

7676
/* Start offset by the animation distance */
77-
transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-modal-confirm-entry-animation-distance)));
77+
transform: translateY(var(--mod-modal-confirm-entry-animation-distance));
7878

7979
/* Appear above underlay */
8080
z-index: 2;

‎components/modal/metadata/metadata.json

-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
"--spectrum-modal-background-color",
3131
"--spectrum-modal-confirm-border-radius",
3232
"--spectrum-modal-confirm-entry-animation-delay",
33-
"--spectrum-modal-confirm-entry-animation-distance",
3433
"--spectrum-modal-confirm-entry-animation-duration",
3534
"--spectrum-modal-confirm-exit-animation-delay",
3635
"--spectrum-modal-confirm-exit-animation-duration",

‎components/progressbar/index.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -269,9 +269,10 @@
269269

270270
@media (forced-colors: active) {
271271
.spectrum-ProgressBar-track {
272-
forced-color-adjust: none;
273272
--highcontrast-progressbar-fill-color: ButtonText;
274273
--highcontrast-progressbar-track-color: ButtonFace;
274+
275275
border: 1px solid ButtonText;
276+
forced-color-adjust: none;
276277
}
277278
}

‎components/radio/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
5050
--spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
5151
--spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
52-
--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
52+
--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
5353

5454
/* spacing all themes */
5555
--spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);

‎components/radio/metadata/metadata.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -159,8 +159,8 @@
159159
"--spectrum-line-height-100",
160160
"--spectrum-neutral-background-color-selected-default",
161161
"--spectrum-neutral-background-color-selected-down",
162-
"--spectrum-neutral-background-color-selected-focus",
163162
"--spectrum-neutral-background-color-selected-hover",
163+
"--spectrum-neutral-background-color-selected-key-focus",
164164
"--spectrum-neutral-content-color-default",
165165
"--spectrum-neutral-content-color-down",
166166
"--spectrum-neutral-content-color-hover",

‎components/site/component.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118

119119
.spectrum-CSSComponent-resource--adobe,
120120
.spectrum-CSSComponent-resources a[href*="spectrum.adobe.com"] .spectrum-Card-preview {
121-
color: rgb(250, 15, 0);
121+
color: rgb(250 15 0);
122122
background-color: var(--spectrum-gray-100);
123123
}
124124

@@ -130,7 +130,7 @@
130130

131131
.spectrum-CSSComponent-resource--npm,
132132
.spectrum-CSSComponent-resources a[href*="npmjs.com"] .spectrum-Card-preview {
133-
background-color: rgba(203, 56, 55, 10%);
133+
background-color: rgba(203 56 55 / 10%);
134134
}
135135

136136
.spectrum-CSSComponent-cardImage {

‎components/site/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333

3434
background-color: var(--spectrum-gray-75);
3535
background-clip: padding-box;
36-
border-block: 2px solid rgba(0, 0, 0, 0%);
36+
border-block: 2px solid rgba(0 0 0 / 0%);
3737
border-radius: 8px;
3838
}
3939

‎components/stepper/index.css

-6
Original file line numberDiff line numberDiff line change
@@ -293,10 +293,6 @@
293293
--highcontrast-stepper-border-color-focus: Highlight;
294294
--highcontrast-stepper-border-color-focus-hover: Highlight;
295295
--highcontrast-stepper-border-color-keyboard-focus: CanvasText;
296-
--highcontrast-stepper-button-background-color-default: Canvas;
297-
--highcontrast-stepper-button-background-color-hover: Canvas;
298-
--highcontrast-stepper-button-background-color-focus: Canvas;
299-
--highcontrast-stepper-button-background-color-keyboard-focus: Canvas;
300296
--highcontrast-stepper-focus-indicator-color: Highlight;
301297

302298
&.is-invalid {
@@ -305,12 +301,10 @@
305301
--highcontrast-stepper-border-color-focus: Highlight;
306302
--highcontrast-stepper-border-color-focus-hover: Highlight;
307303
--highcontrast-stepper-border-color-keyboard-focus: Highlight;
308-
--highcontrast-infield-button-border-color: Highlight;
309304
}
310305

311306
&.is-disabled {
312307
--highcontrast-stepper-border-color: GrayText;
313-
--highcontrast-infield-button-border-color: GrayText;
314308
--highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
315309
}
316310
}

‎components/stepper/metadata/metadata.json

+1-9
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,6 @@
132132
"--spectrum-component-height-300",
133133
"--spectrum-component-height-75",
134134
"--spectrum-corner-radius-100",
135-
"--spectrum-disabled-background-color",
136135
"--spectrum-disabled-border-color",
137136
"--spectrum-focus-indicator-color",
138137
"--spectrum-focus-indicator-gap",
@@ -178,9 +177,7 @@
178177
"--system-spectrum-stepper-buttons-border-color-hover",
179178
"--system-spectrum-stepper-buttons-border-color-keyboard-focus",
180179
"--system-spectrum-stepper-buttons-border-style",
181-
"--system-spectrum-stepper-buttons-border-width",
182-
"--system-spectrum-stepper-disabled-buttons-background-color",
183-
"--system-spectrum-stepper-disabled-buttons-border-width"
180+
"--system-spectrum-stepper-buttons-border-width"
184181
],
185182
"passthroughs": [
186183
"--mod-infield-button-border-block-end-width",
@@ -197,16 +194,11 @@
197194
"--mod-textfield-icon-spacing-inline-start-invalid"
198195
],
199196
"high-contrast": [
200-
"--highcontrast-infield-button-border-color",
201197
"--highcontrast-stepper-border-color",
202198
"--highcontrast-stepper-border-color-focus",
203199
"--highcontrast-stepper-border-color-focus-hover",
204200
"--highcontrast-stepper-border-color-hover",
205201
"--highcontrast-stepper-border-color-keyboard-focus",
206-
"--highcontrast-stepper-button-background-color-default",
207-
"--highcontrast-stepper-button-background-color-focus",
208-
"--highcontrast-stepper-button-background-color-hover",
209-
"--highcontrast-stepper-button-background-color-keyboard-focus",
210202
"--highcontrast-stepper-buttons-background-color",
211203
"--highcontrast-stepper-buttons-border-width",
212204
"--highcontrast-stepper-focus-indicator-color"

‎components/stepper/themes/express.css

-5
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,5 @@
4141

4242
--spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400);
4343
--spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300);
44-
45-
&.is-disabled {
46-
--spectrum-stepper-buttons-background-color: var(--spectrum-disabled-background-color);
47-
--spectrum-stepper-buttons-border-width: 0;
48-
}
4944
}
5045
}

‎components/table/index.css

+2-4
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@
6666
--spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
6767
--spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
6868
--spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down);
69-
--spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus);
70-
--spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover);
69+
--spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
70+
--spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover);
7171
--spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
7272

7373
/* Row Selection */
@@ -351,12 +351,10 @@
351351

352352
--highcontrast-table-selected-row-background-color: Highlight;
353353
--highcontrast-table-selected-row-text-color: HighlightText;
354-
--highcontrast-table-selected-row-text-color-default: HighlightText;
355354

356355
@supports (color: SelectedItem) {
357356
--highcontrast-table-selected-row-background-color: SelectedItem;
358357
--highcontrast-table-selected-row-text-color: SelectedItemText;
359-
--highcontrast-table-selected-row-text-color-default: SelectedItemText;
360358
}
361359

362360
--highcontrast-table-selected-row-background-color-focus: Highlight;

‎components/table/metadata/metadata.json

-3
Original file line numberDiff line numberDiff line change
@@ -415,10 +415,8 @@
415415
"--spectrum-neutral-content-color-default",
416416
"--spectrum-neutral-subdued-content-color-default",
417417
"--spectrum-neutral-subdued-content-color-down",
418-
"--spectrum-neutral-subdued-content-color-focus",
419418
"--spectrum-neutral-subdued-content-color-hover",
420419
"--spectrum-neutral-subdued-content-color-key-focus",
421-
"--spectrum-neutral-subdued-content-focus-hover",
422420
"--spectrum-regular-font-weight",
423421
"--spectrum-sans-font-family-stack",
424422
"--spectrum-spacing-300",
@@ -452,7 +450,6 @@
452450
"--highcontrast-table-selected-row-background-color",
453451
"--highcontrast-table-selected-row-background-color-focus",
454452
"--highcontrast-table-selected-row-text-color",
455-
"--highcontrast-table-selected-row-text-color-default",
456453
"--highcontrast-table-selected-row-text-color-focus",
457454
"--highcontrast-table-transition-duration"
458455
]

‎components/underlay/index.css

-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
--spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0);
1818
--spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in);
1919
--spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out);
20-
--spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100);
2120
--spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600);
2221
--spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300);
2322
--spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200);

0 commit comments

Comments
 (0)