chore(stylelint): addresses remaining stylelint violations

.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`).

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));

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%);
 	}
 }

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%);
 	}
 }

components/calendar/index.css

@@ -411,7 +411,6 @@
 @media (forced-colors: active) {
 	.spectrum-Calendar-prevMonth,
 	.spectrum-Calendar-nextMonth {
-		--highcontrast-calendar-button-icon-color-disabled: GrayText;
 		--highcontrast-calendar-button-icon-color: ButtonText;
 	}
 
@@ -427,7 +426,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;

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",

components/card/index.css

@@ -156,7 +156,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)));

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",

components/checkbox/index.css

@@ -462,6 +462,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;
@@ -472,7 +474,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;

components/colorarea/index.css

@@ -12,7 +12,7 @@
  */
 .spectrum-ColorArea {
 	--spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
-	--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-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);

components/colorwheel/index.css

@@ -124,7 +124,7 @@
 
 .spectrum-ColorWheel-wheel {
 	position: absolute;
-	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);
+	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);
 	inset-block: var(--spectrum-colorwheel-border-width);
 	inset-inline: var(--spectrum-colorwheel-border-width);
 	clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path)));

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 */

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",

components/logicbutton/index.css

@@ -107,6 +107,17 @@
 	}
 
 	.spectrum-LogicButton {
+		--highcontrast-logic-button-and-background-color: ButtonFace;
+		--highcontrast-logic-button-and-background-color-hover: ButtonFace;
+		--highcontrast-logic-button-and-border-color: ButtonText;
+		--highcontrast-logic-button-and-border-color-hover: Highlight;
+		--highcontrast-logic-button-and-text-color: ButtonText;
+		--highcontrast-logic-button-or-background-color: ButtonFace;
+		--highcontrast-logic-button-or-background-color-hover: ButtonFace;
+		--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,
@@ -118,16 +129,5 @@
 			--highcontrast-logic-button-or-border-color: GrayText;
 			--highcontrast-logic-button-or-text-color: GrayText;
 		}
-
-		--highcontrast-logic-button-and-background-color: ButtonFace;
-		--highcontrast-logic-button-and-background-color-hover: ButtonFace;
-		--highcontrast-logic-button-and-border-color: ButtonText;
-		--highcontrast-logic-button-and-border-color-hover: Highlight;
-		--highcontrast-logic-button-and-text-color: ButtonText;
-		--highcontrast-logic-button-or-background-color: ButtonFace;
-		--highcontrast-logic-button-or-background-color-hover: ButtonFace;
-		--highcontrast-logic-button-or-border-color: ButtonText;
-		--highcontrast-logic-button-or-border-color-hover: Highlight;
-		--highcontrast-logic-button-or-text-color: ButtonText;
 	}
 }

components/modal/index.css

@@ -74,7 +74,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;

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",

components/progressbar/index.css

@@ -269,9 +269,10 @@
 
 @media (forced-colors: active) {
 	.spectrum-ProgressBar-track {
-		forced-color-adjust: none;
 		--highcontrast-progressbar-fill-color: ButtonText;
 		--highcontrast-progressbar-track-color: ButtonFace;
+
 		border: 1px solid ButtonText;
+		forced-color-adjust: none;
 	}
 }

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);

components/radio/metadata/metadata.json

@@ -159,8 +159,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",

components/site/component.css

@@ -118,7 +118,7 @@
 
 .spectrum-CSSComponent-resource--adobe,
 .spectrum-CSSComponent-resources a[href*="spectrum.adobe.com"] .spectrum-Card-preview {
-	color: rgb(250, 15, 0);
+	color: rgb(250 15 0);
 	background-color: var(--spectrum-gray-100);
 }
 
@@ -130,7 +130,7 @@
 
 .spectrum-CSSComponent-resource--npm,
 .spectrum-CSSComponent-resources a[href*="npmjs.com"] .spectrum-Card-preview {
-	background-color: rgba(203, 56, 55, 10%);
+	background-color: rgba(203 56 55 / 10%);
 }
 
 .spectrum-CSSComponent-cardImage {

components/site/index.css

@@ -33,7 +33,7 @@
 
 		background-color: var(--spectrum-gray-75);
 		background-clip: padding-box;
-		border-block: 2px solid rgba(0, 0, 0, 0%);
+		border-block: 2px solid rgba(0 0 0 / 0%);
 		border-radius: 8px;
 	}
 

components/stepper/index.css

@@ -293,10 +293,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 +301,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));
 		}
 	}

components/stepper/metadata/metadata.json

@@ -132,7 +132,6 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
     "--spectrum-corner-radius-100",
-    "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
@@ -178,9 +177,7 @@
     "--system-spectrum-stepper-buttons-border-color-hover",
     "--system-spectrum-stepper-buttons-border-color-keyboard-focus",
     "--system-spectrum-stepper-buttons-border-style",
-    "--system-spectrum-stepper-buttons-border-width",
-    "--system-spectrum-stepper-disabled-buttons-background-color",
-    "--system-spectrum-stepper-disabled-buttons-border-width"
+    "--system-spectrum-stepper-buttons-border-width"
   ],
   "passthroughs": [
     "--mod-infield-button-border-block-end-width",
@@ -197,16 +194,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"

components/stepper/themes/express.css

@@ -41,10 +41,5 @@
 
 		--spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400);
 		--spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300);
-
-		&.is-disabled {
-			--spectrum-stepper-buttons-background-color: var(--spectrum-disabled-background-color);
-			--spectrum-stepper-buttons-border-width: 0;
-		}
 	}
 }

components/table/index.css

@@ -66,8 +66,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 */
@@ -351,12 +351,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;

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"
   ]

components/underlay/index.css

@@ -17,7 +17,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);