fix: conflict

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

.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

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

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

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

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

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

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

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

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

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

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;

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

@@ -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;
 	}
 }

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

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

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