fix(stylelint): addresses remaining stylelint violations (#3359)

cdransf · web-flow · commit c8194b0a5b6e · 2025-01-22T10:46:46.000-05:00
diff --git a/.changeset/clever-otters-mix.md b/.changeset/clever-otters-mix.md
@@ -0,0 +1,25 @@
+---
+"@spectrum-css/infieldbutton": minor
+"@spectrum-css/logicbutton": minor
+"@spectrum-css/progressbar": minor
+"@spectrum-css/colorwheel": minor
+"@spectrum-css/assetcard": minor
+"@spectrum-css/colorarea": minor
+"@spectrum-css/calendar": minor
+"@spectrum-css/checkbox": minor
+"@spectrum-css/underlay": minor
+"@spectrum-css/stepper": minor
+"@spectrum-css/button": minor
+"@spectrum-css/modal": minor
+"@spectrum-css/radio": minor
+"@spectrum-css/table": minor
+"@spectrum-css/card": minor
+"@spectrum-css/site": minor
+"@spectrum-css/tokens": minor
+---
+
+This resolves our remaining stylelint issues around undefined tokens, rule order, unused values and color syntax.
+
+- Updates invalid color syntax from `rgba(N, N, N, N)` to `rgba(N N N / N)`.
+- In cases of duplicate properties, preserves the property that would be applied given current code structure.
+- Updates misnamed tokens to use valid tokens (`table/index.css`).
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -86,7 +86,7 @@ jobs:
                   filter_mode: diff_context
                 #   stylelint_input: "components/*/index.css components/*/themes/*.css"
                   stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}"
-                  stylelint_config: stylelint.config.js
+                  stylelint_config: "${{ github.workspace }}/stylelint.config.js"
 
             - name: Run eslint on packages and stories
               uses: reviewdog/action-eslint@v1.31.0
diff --git a/components/assetcard/index.css b/components/assetcard/index.css
@@ -272,7 +272,7 @@
 
 	border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius));
 
-	box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0, 0, 0, 15%);
+	box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0 0 0 / 15%);
 
 	color: var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color)));
 	font-weight: var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight));
diff --git a/components/assetcard/themes/express.css b/components/assetcard/themes/express.css
@@ -15,6 +15,6 @@
 
 @container (--system: express) {
 	.spectrum-AssetCard {
-		--spectrum-assetcard-overlay-background-color: rgba(109, 115, 246, 20%);
+		--spectrum-assetcard-overlay-background-color: rgba(109 115 246 / 20%);
 	}
 }
diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css
@@ -13,6 +13,6 @@
 
 @container (--system: spectrum) {
 	.spectrum-AssetCard {
-		--spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%);
+		--spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);
 	}
 }
diff --git a/components/calendar/index.css b/components/calendar/index.css
@@ -413,7 +413,6 @@
 @media (forced-colors: active) {
 	.spectrum-Calendar-prevMonth,
 	.spectrum-Calendar-nextMonth {
-		--highcontrast-calendar-button-icon-color-disabled: GrayText;
 		--highcontrast-calendar-button-icon-color: ButtonText;
 	}
 
@@ -429,7 +428,6 @@
 		--highcontrast-calendar-day-text-color-disabled: GrayText;
 		--highcontrast-calendar-day-text-color-hover: ButtonText;
 		--highcontrast-calendar-day-text-color-key-focus: ButtonText;
-		--highcontrast-calendar-day-text-color-selected-hover: HighlightText;
 		--highcontrast-calendar-day-text-color-selected: HighlightText;
 		--highcontrast-calendar-day-title-text-color: CanvasText;
 		--highcontrast-calendar-day-today-background-color-selected-hover: Highlight;
diff --git a/components/calendar/metadata/metadata.json b/components/calendar/metadata/metadata.json
@@ -170,7 +170,6 @@
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-calendar-button-icon-color",
-    "--highcontrast-calendar-button-icon-color-disabled",
     "--highcontrast-calendar-day-background-color-cap-selected",
     "--highcontrast-calendar-day-background-color-down",
     "--highcontrast-calendar-day-background-color-hover",
@@ -183,7 +182,6 @@
     "--highcontrast-calendar-day-text-color-hover",
     "--highcontrast-calendar-day-text-color-key-focus",
     "--highcontrast-calendar-day-text-color-selected",
-    "--highcontrast-calendar-day-text-color-selected-hover",
     "--highcontrast-calendar-day-title-text-color",
     "--highcontrast-calendar-day-today-background-color-selected-hover",
     "--highcontrast-calendar-day-today-border-color",
diff --git a/components/card/index.css b/components/card/index.css
@@ -158,7 +158,7 @@
 	}
 
 	&.is-drop-target {
-		--mod-card-background-color: var(--spectrum-card-background-color-quiet, var(--spectrum-background-base-color));
+		--mod-card-background-color: var(--spectrum-background-base-color);
 
 		border-color: var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)));
 		box-shadow: 0 0 0 1px var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)));
diff --git a/components/card/metadata/metadata.json b/components/card/metadata/metadata.json
@@ -148,7 +148,6 @@
     "--spectrum-card-actions-size",
     "--spectrum-card-actions-spacing",
     "--spectrum-card-background-color",
-    "--spectrum-card-background-color-quiet",
     "--spectrum-card-body-font-color",
     "--spectrum-card-body-font-family",
     "--spectrum-card-body-font-size",
diff --git a/components/checkbox/index.css b/components/checkbox/index.css
@@ -442,6 +442,8 @@
 }
 
 .spectrum-Checkbox-box {
+	--spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)));
+
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -452,7 +454,6 @@
 	block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size));
 
 	/* Fix vertical alignment when not wrapping since we're flex-start */
-	--spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)));
 	margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0;
 
 	flex-grow: 0;
diff --git a/components/colorarea/index.css b/components/colorarea/index.css
@@ -15,7 +15,7 @@
 
 .spectrum-ColorArea {
 	--spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
-	--spectrum-colorarea-border-color: rgb(0 0 0 / 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
+	--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 */
 	--spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
 	--spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
 	--spectrum-colorarea-height: var(--spectrum-color-area-height);
diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css
@@ -202,7 +202,7 @@
 	align-items: center;
 	justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content));
 
-	transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out;
+	transition: border-color var(--spectrum-animation-duration-100) ease-in-out;
 }
 
 /* Stacked in-field buttons */
diff --git a/components/infieldbutton/metadata/metadata.json b/components/infieldbutton/metadata/metadata.json
@@ -129,6 +129,7 @@
     "--spectrum-infield-button-width"
   ],
   "global": [
+    "--spectrum-animation-duration-100",
     "--spectrum-border-width-100",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
@@ -138,7 +139,6 @@
     "--spectrum-corner-radius-75",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-content-color",
-    "--spectrum-global-animation-duration-100",
     "--spectrum-gray-200",
     "--spectrum-gray-300",
     "--spectrum-gray-400",
diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css
@@ -108,7 +108,6 @@
 	}
 
 	.spectrum-LogicButton {
-
 		--highcontrast-logic-button-and-background-color: ButtonFace;
 		--highcontrast-logic-button-and-background-color-hover: ButtonFace;
 		--highcontrast-logic-button-and-border-color: ButtonText;
@@ -119,6 +118,7 @@
 		--highcontrast-logic-button-or-border-color: ButtonText;
 		--highcontrast-logic-button-or-border-color-hover: Highlight;
 		--highcontrast-logic-button-or-text-color: ButtonText;
+
 		forced-color-adjust: none;
 
 		&:disabled,
diff --git a/components/modal/index.css b/components/modal/index.css
@@ -75,7 +75,7 @@
 	@extend %spectrum-overlay;
 
 	/* Start offset by the animation distance */
-	transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-modal-confirm-entry-animation-distance)));
+	transform: translateY(var(--mod-modal-confirm-entry-animation-distance));
 
 	/* Appear above underlay */
 	z-index: 2;
diff --git a/components/modal/metadata/metadata.json b/components/modal/metadata/metadata.json
@@ -30,7 +30,6 @@
     "--spectrum-modal-background-color",
     "--spectrum-modal-confirm-border-radius",
     "--spectrum-modal-confirm-entry-animation-delay",
-    "--spectrum-modal-confirm-entry-animation-distance",
     "--spectrum-modal-confirm-entry-animation-duration",
     "--spectrum-modal-confirm-exit-animation-delay",
     "--spectrum-modal-confirm-exit-animation-duration",
diff --git a/components/progressbar/index.css b/components/progressbar/index.css
@@ -273,7 +273,7 @@
 	.spectrum-ProgressBar-track {
 		--highcontrast-progressbar-fill-color: ButtonText;
 		--highcontrast-progressbar-track-color: ButtonFace;
-		forced-color-adjust: none;
 		border: 1px solid ButtonText;
+		forced-color-adjust: none;
 	}
 }
diff --git a/components/radio/index.css b/components/radio/index.css
@@ -49,7 +49,7 @@
 	--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
 	--spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
 	--spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
-	--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
+	--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
 
 	/* spacing all themes */
 	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
diff --git a/components/radio/metadata/metadata.json b/components/radio/metadata/metadata.json
@@ -158,8 +158,8 @@
     "--spectrum-line-height-100",
     "--spectrum-neutral-background-color-selected-default",
     "--spectrum-neutral-background-color-selected-down",
-    "--spectrum-neutral-background-color-selected-focus",
     "--spectrum-neutral-background-color-selected-hover",
+    "--spectrum-neutral-background-color-selected-key-focus",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",
diff --git a/components/stepper/index.css b/components/stepper/index.css
@@ -89,10 +89,6 @@
 	}
 }
 
-.x {
-	border-radius: var(--spectrum-stepper-button-border-radius-reset);
-}
-
 .spectrum-Stepper {
 	position: relative;
 	display: inline-flex;
@@ -173,6 +169,13 @@
 }
 
 /*** Quiet ***/
+
+/* stylelint-disable-next-line selector-class-pattern -- .hide-stepper class is deprecated for S2 */
+.spectrum-Stepper.spectrum-Stepper--quiet.hide-stepper .spectrum-Stepper-input {
+	border-inline-end-width: 0;
+	border-end-end-radius: 0;
+}
+
 .spectrum-Stepper.spectrum-Stepper--quiet {
 	--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
 
@@ -182,11 +185,6 @@
 	border-end-start-radius: 0;
 	border-end-end-radius: 0;
 
-	&.hide-stepper .spectrum-Stepper-input {
-		border-inline-end-width: 0;
-		border-end-end-radius: 0;
-	}
-
 	&::after {
 		content: "";
 		position: absolute;
@@ -279,7 +277,7 @@
 	transition: border-color var(--mod-stepper-animation-duration, var(--spectrum-stepper-animation-duration)) ease-in-out;
 }
 
-/* hide-stepper */
+/* stylelint-disable-next-line selector-class-pattern -- .hide-stepper class is deprecated for S2 */
 .spectrum-Stepper.hide-stepper .spectrum-Stepper-input {
 	border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
 	border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
@@ -293,10 +291,6 @@
 		--highcontrast-stepper-border-color-focus: Highlight;
 		--highcontrast-stepper-border-color-focus-hover: Highlight;
 		--highcontrast-stepper-border-color-keyboard-focus: CanvasText;
-		--highcontrast-stepper-button-background-color-default: Canvas;
-		--highcontrast-stepper-button-background-color-hover: Canvas;
-		--highcontrast-stepper-button-background-color-focus: Canvas;
-		--highcontrast-stepper-button-background-color-keyboard-focus: Canvas;
 		--highcontrast-stepper-focus-indicator-color: Highlight;
 
 		&.is-invalid {
@@ -305,12 +299,10 @@
 			--highcontrast-stepper-border-color-focus: Highlight;
 			--highcontrast-stepper-border-color-focus-hover: Highlight;
 			--highcontrast-stepper-border-color-keyboard-focus: Highlight;
-			--highcontrast-infield-button-border-color: Highlight;
 		}
 
 		&.is-disabled {
 			--highcontrast-stepper-border-color: GrayText;
-			--highcontrast-infield-button-border-color: GrayText;
 			--highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
 		}
 	}
diff --git a/components/stepper/metadata/metadata.json b/components/stepper/metadata/metadata.json
@@ -56,8 +56,7 @@
     ".spectrum-Stepper:focus:not(.is-disabled) .spectrum-Stepper-input",
     ".spectrum-Stepper:hover:not(.is-disabled) .spectrum-Stepper-buttons",
     ".spectrum-Stepper:hover:not(.is-disabled) .spectrum-Stepper-input",
-    ".spectrum-Stepper:hover:not(.is-invalid)",
-    ".x"
+    ".spectrum-Stepper:hover:not(.is-invalid)"
   ],
   "modifiers": [
     "--mod-stepper-animation-duration",
@@ -197,16 +196,11 @@
     "--mod-textfield-icon-spacing-inline-start-invalid"
   ],
   "high-contrast": [
-    "--highcontrast-infield-button-border-color",
     "--highcontrast-stepper-border-color",
     "--highcontrast-stepper-border-color-focus",
     "--highcontrast-stepper-border-color-focus-hover",
     "--highcontrast-stepper-border-color-hover",
     "--highcontrast-stepper-border-color-keyboard-focus",
-    "--highcontrast-stepper-button-background-color-default",
-    "--highcontrast-stepper-button-background-color-focus",
-    "--highcontrast-stepper-button-background-color-hover",
-    "--highcontrast-stepper-button-background-color-keyboard-focus",
     "--highcontrast-stepper-buttons-background-color",
     "--highcontrast-stepper-buttons-border-width",
     "--highcontrast-stepper-focus-indicator-color"
diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css
@@ -39,5 +39,10 @@
 
 		--spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300);
 		--spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200);
+
+		&.is-disabled {
+			--spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
+			--spectrum-stepper-buttons-border-width: 0;
+		}
 	}
 }
diff --git a/components/table/index.css b/components/table/index.css
@@ -68,8 +68,8 @@
 	--spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
 	--spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
 	--spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down);
-	--spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus);
-	--spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover);
+	--spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+	--spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover);
 	--spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
 
 	/* Row Selection */
@@ -353,12 +353,10 @@
 
 		--highcontrast-table-selected-row-background-color: Highlight;
 		--highcontrast-table-selected-row-text-color: HighlightText;
-		--highcontrast-table-selected-row-text-color-default: HighlightText;
 
 		@supports (color: SelectedItem) {
 			--highcontrast-table-selected-row-background-color: SelectedItem;
 			--highcontrast-table-selected-row-text-color: SelectedItemText;
-			--highcontrast-table-selected-row-text-color-default: SelectedItemText;
 		}
 
 		--highcontrast-table-selected-row-background-color-focus: Highlight;
diff --git a/components/table/metadata/metadata.json b/components/table/metadata/metadata.json
@@ -415,10 +415,8 @@
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-subdued-content-color-default",
     "--spectrum-neutral-subdued-content-color-down",
-    "--spectrum-neutral-subdued-content-color-focus",
     "--spectrum-neutral-subdued-content-color-hover",
     "--spectrum-neutral-subdued-content-color-key-focus",
-    "--spectrum-neutral-subdued-content-focus-hover",
     "--spectrum-regular-font-weight",
     "--spectrum-sans-font-family-stack",
     "--spectrum-spacing-300",
@@ -452,7 +450,6 @@
     "--highcontrast-table-selected-row-background-color",
     "--highcontrast-table-selected-row-background-color-focus",
     "--highcontrast-table-selected-row-text-color",
-    "--highcontrast-table-selected-row-text-color-default",
     "--highcontrast-table-selected-row-text-color-focus",
     "--highcontrast-table-transition-duration"
   ]
diff --git a/components/tooltip/index.css b/components/tooltip/index.css
@@ -77,11 +77,12 @@
 	}
 
 	.spectrum-Tooltip-tip {
-		forced-color-adjust: none;
 		--highcontrast-tooltip-background-color-default: CanvasText;
 		--highcontrast-tooltip-background-color-informative: CanvasText;
 		--highcontrast-tooltip-background-color-positive: CanvasText;
 		--highcontrast-tooltip-background-color-negative: CanvasText;
+
+		forced-color-adjust: none;
 	}
 }
 
diff --git a/components/underlay/index.css b/components/underlay/index.css
@@ -18,7 +18,6 @@
 	--spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0);
 	--spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in);
 	--spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out);
-	--spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100);
 	--spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600);
 	--spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300);
 	--spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200);
diff --git a/stylelint.config.js b/stylelint.config.js

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,6 @@`
`15`	`15`
`16`	`16`	`@container (--system: express) {`
`17`	`17`	`.spectrum-AssetCard {`
`18`		`- --spectrum-assetcard-overlay-background-color: rgba(109, 115, 246, 20%);`
	`18`	`+ --spectrum-assetcard-overlay-background-color: rgba(109 115 246 / 20%);`
`19`	`19`	`}`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,6 @@`
`13`	`13`
`14`	`14`	`@container (--system: spectrum) {`
`15`	`15`	`.spectrum-AssetCard {`
`16`		`- --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%);`
	`16`	`+ --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);`
`17`	`17`	`}`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -158,7 +158,7 @@`
`158`	`158`	`}`
`159`	`159`
`160`	`160`	`&.is-drop-target {`
`161`		`- --mod-card-background-color: var(--spectrum-card-background-color-quiet, var(--spectrum-background-base-color));`
	`161`	`+ --mod-card-background-color: var(--spectrum-background-base-color);`
`162`	`162`
`163`	`163`	`border-color: var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)));`
`164`	`164`	`box-shadow: 0 0 0 1px var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)));`