fix(calendar,dial,pickerbutton,progressbar,radio,stepper): unused custom properties (#3487)

rise-erpelding · castastrophe · commit 46ae6870881d · 2025-01-16T22:43:11.000-05:00
* 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
diff --git a/.changeset/wicked-dragons-cheer.md b/.changeset/wicked-dragons-cheer.md
@@ -0,0 +1,17 @@
+---
+"@spectrum-css/pickerbutton": patch
+"@spectrum-css/progressbar": patch
+"@spectrum-css/calendar": patch
+"@spectrum-css/stepper": patch
+"@spectrum-css/radio": patch
+"@spectrum-css/dial": patch
+---
+
+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:
+
+**Calendar**: Defines 1 previously undefined custom property to align with `main` and `s2-foundations-redux`
+**Dial**: Defines 6 previously undefined custom properties, removes 3 unused custom properties
+**Pickerbutton**: Defines 9 previously undefined custom properties to align with `main` and `s2-foundations-redux`
+**Progressbar**: Removes 3 unused custom properties, reverts background-color to background to accommodate gradients
+**Radio**: Defines 4 previously undefined custom properties to align with `main` and `s2-foundations-redux`
+**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
diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json
@@ -166,6 +166,7 @@
     "--spectrum-font-size-100",
     "--spectrum-font-size-300",
     "--spectrum-font-size-50",
+    "--spectrum-gray-100-rgb",
     "--spectrum-gray-800",
     "--spectrum-logical-rotation",
     "--spectrum-neutral-content-color-default",
diff --git a/components/calendar/index.css b/components/calendar/index.css
@@ -46,6 +46,7 @@
 	--spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent);
 	--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)));
 	--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)));
+	--spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4);
 	--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)));
 	--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)));
 	--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)));
diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json
@@ -75,9 +75,7 @@
   "component": [
     "--spectrum-dial-background-color-default",
     "--spectrum-dial-border-color",
-    "--spectrum-dial-border-color-disabled",
     "--spectrum-dial-border-color-hover",
-    "--spectrum-dial-border-color-key-focus",
     "--spectrum-dial-border-radius",
     "--spectrum-dial-container-width",
     "--spectrum-dial-controls-margin",
@@ -88,7 +86,6 @@
     "--spectrum-dial-handle-inline-margin",
     "--spectrum-dial-handle-marker-border-radius",
     "--spectrum-dial-handle-marker-color",
-    "--spectrum-dial-handle-marker-color-disabled",
     "--spectrum-dial-handle-marker-color-hover",
     "--spectrum-dial-handle-marker-color-key-focus",
     "--spectrum-dial-handle-marker-color-mouse-focus",
@@ -111,11 +108,12 @@
   "global": [
     "--spectrum-border-width-200",
     "--spectrum-font-size-75",
-    "--spectrum-gray-200",
     "--spectrum-gray-25",
+    "--spectrum-gray-400",
     "--spectrum-gray-600",
     "--spectrum-gray-700",
     "--spectrum-gray-75",
+    "--spectrum-gray-800",
     "--spectrum-line-height-200"
   ],
   "passthroughs": [],
diff --git a/components/dial/index.css b/components/dial/index.css
@@ -14,16 +14,21 @@
 .spectrum-Dial {
 	--spectrum-dial-background-color-default: var(--spectrum-gray-75);
 
-	--spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-200);
-	--spectrum-dial-border-color-disabled: var(--spectrum-gray-200);
-
 	--spectrum-dial-handle-marker-color: var(--spectrum-gray-700);
 	--spectrum-dial-border-color: var(--spectrum-gray-700);
 
+	--spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800);
+	--spectrum-dial-border-color-hover: var(--spectrum-gray-800);
+
+	--spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700);
+
 	--spectrum-dial-min-max-tick-color: var(--spectrum-gray-600);
 
 	--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25);
-	--spectrum-dial-border-color-key-focus: var(--spectrum-gray-25);
+
+	--spectrum-dial-label-text-color: var(--spectrum-gray-700);
+	--spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700);
+	--spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400);
 
 	--spectrum-dial-container-width: 48px;
 
diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json
@@ -107,10 +107,12 @@
   "global": [
     "--spectrum-animation-duration-100",
     "--spectrum-body-sans-serif-font-weight",
+    "--spectrum-border-width-100",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
+    "--spectrum-corner-radius-100",
     "--spectrum-corner-radius-200",
     "--spectrum-default-font-style",
     "--spectrum-disabled-background-color",
@@ -123,6 +125,9 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
+    "--spectrum-gray-100",
+    "--spectrum-gray-200",
+    "--spectrum-gray-50",
     "--spectrum-in-field-button-edge-to-fill",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css
@@ -35,8 +35,17 @@
 	--spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight);
 	--spectrum-picker-button-font-size: var(--spectrum-font-size-100);
 
+	--spectrum-picker-button-border-color: inherit;
+	--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100);
+	--spectrum-picker-button-border-radius-rounded-sided: 0;
+	--spectrum-picker-button-border-radius-sided: 0;
+	--spectrum-picker-button-border-width: var(--spectrum-border-width-100);
 	--spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
 
+	--spectrum-picker-button-background-color: var(--spectrum-gray-50);
+	--spectrum-picker-button-background-color-hover: var(--spectrum-gray-100);
+	--spectrum-picker-button-background-color-down: var(--spectrum-gray-200);
+	--spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100);
 	--spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
 
 	&:hover {
diff --git a/components/progressbar/index.css b/components/progressbar/index.css
@@ -133,14 +133,14 @@
 		block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
 		border-radius: var(--spectrum-progressbar-corner-radius);
 
-		background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
+		background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
 	}
 
 	.spectrum-ProgressBar-fill {
 		border: none;
 		block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
 		transition: width 1s;
-		background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
+		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
 	}
 }
 
@@ -183,7 +183,7 @@
 .spectrum-ProgressBar--staticWhite {
 	.spectrum-ProgressBar-fill {
 		color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
-		background-color: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)));
+		background: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)));
 	}
 
 	.spectrum-ProgressBar-label,
@@ -192,7 +192,7 @@
 	}
 
 	.spectrum-ProgressBar-track {
-		background-color: var(--spectrum-progressbar-track-color-white);
+		background: var(--spectrum-progressbar-track-color-white);
 	}
 }
 
diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json
@@ -149,6 +149,9 @@
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
     "--spectrum-gray-50",
+    "--spectrum-gray-600",
+    "--spectrum-gray-700",
+    "--spectrum-gray-800",
     "--spectrum-line-height-100",
     "--spectrum-neutral-background-color-selected-default",
     "--spectrum-neutral-background-color-selected-down",
diff --git a/components/radio/index.css b/components/radio/index.css
@@ -53,6 +53,12 @@
 	--spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
 	--spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
 
+	/* unchecked selection indicator */
+	--spectrum-radio-button-border-color-default: var(--spectrum-gray-600);
+	--spectrum-radio-button-border-color-hover: var(--spectrum-gray-700);
+	--spectrum-radio-button-border-color-down: var(--spectrum-gray-800);
+	--spectrum-radio-button-border-color-focus: var(--spectrum-gray-700);
+
 	/* checked selection indicator */
 	--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);
diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json
@@ -111,6 +111,7 @@
   ],
   "global": [
     "--spectrum-animation-duration-100",
+    "--spectrum-border-width-100",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
@@ -120,6 +121,12 @@
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
+    "--spectrum-gray-25",
+    "--spectrum-gray-50",
+    "--spectrum-gray-500",
+    "--spectrum-gray-600",
+    "--spectrum-gray-800",
+    "--spectrum-gray-900",
     "--spectrum-in-field-button-width-stacked-extra-large",
     "--spectrum-in-field-button-width-stacked-large",
     "--spectrum-in-field-button-width-stacked-medium",
diff --git a/components/stepper/index.css b/components/stepper/index.css
@@ -11,66 +11,14 @@
  * governing permissions and limitations under the License.
  */
 
-/* --- High contrast settings --- */
-@media (forced-colors: active) {
-	.spectrum-Stepper {
-		--highcontrast-stepper-border-color: CanvasText;
-		--highcontrast-stepper-border-color-hover: Highlight;
-		--highcontrast-stepper-border-color-focus: Highlight;
-		--highcontrast-stepper-border-color-focus-hover: Highlight;
-		--highcontrast-stepper-border-color-keyboard-focus: CanvasText;
-		--highcontrast-stepper-focus-indicator-color: Highlight;
-
-		&.is-invalid {
-			--highcontrast-stepper-border-color: Highlight;
-			--highcontrast-stepper-border-color-hover: Highlight;
-			--highcontrast-stepper-border-color-focus: Highlight;
-			--highcontrast-stepper-border-color-focus-hover: Highlight;
-			--highcontrast-stepper-border-color-keyboard-focus: Highlight;
-		}
-
-		&.is-disabled {
-			--highcontrast-stepper-border-color: GrayText;
-			--highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
-		}
-
-		&:not(.is-disabled) {
-			&:hover {
-				--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover);
-			}
-
-			&.is-focused,
-			&:focus {
-				--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus);
-
-				&:hover {
-					--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover);
-				}
-			}
-
-			&.is-keyboardFocused,
-			&:focus-visible {
-				--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus);
-			}
-		}
-	}
-
-	/* @passthrough start */
-	.spectrum-Stepper-input {
-		--highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color);
-	}
-	/* @passthrough end */
-
-	/* @passthrough start */
-	.spectrum-Stepper-button {
-		--highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color);
-		--highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color);
-	}
-	/* @passthrough end */
-}
-
 /* --- Component-level definitions --- */
 .spectrum-Stepper {
+	--spectrum-stepper-border-width: var(--spectrum-border-width-100);
+	--spectrum-stepper-border-color-default: var(--spectrum-gray-500);
+	--spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
+	--spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
+	--spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800);
+	--spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
 	--spectrum-stepper-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-default)));
 	--spectrum-stepper-border-radius: var(--mod-stepper-border-radius, var(--spectrum-corner-radius-100));
 
@@ -83,6 +31,26 @@
 	--spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium));
 	--spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100));
 
+	--spectrum-stepper-buttons-border-style: none;
+	--spectrum-stepper-buttons-border-width: 0;
+	--spectrum-stepper-buttons-border-color: var(--spectrum-gray-500);
+	--spectrum-stepper-buttons-background-color: var(--spectrum-gray-25);
+	--spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
+	--spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
+	--spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900);
+
+	--spectrum-stepper-button-border-width: var(--spectrum-border-width-100);
+
+	/** Invalid **/
+	--spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default);
+	--spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus);
+	--spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover);
+	--spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
+
+	/** Disabled **/
+	--spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100);
+	--spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
+
 	&.spectrum-Stepper--sizeS {
 		--spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-small));
 		--spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-75));
@@ -131,6 +99,9 @@
 	}
 
 	&.spectrum-Stepper--quiet {
+		/* 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 */
+		--spectrum-stepper-button-edge-to-fill: 0;
+
 		--mod-stepper-buttons-background-color: transparent;
 
 		/* quiet hover */
@@ -151,6 +122,64 @@
 	}
 }
 
+/* --- High contrast settings --- */
+@media (forced-colors: active) {
+	.spectrum-Stepper {
+		--highcontrast-stepper-border-color: CanvasText;
+		--highcontrast-stepper-border-color-hover: Highlight;
+		--highcontrast-stepper-border-color-focus: Highlight;
+		--highcontrast-stepper-border-color-focus-hover: Highlight;
+		--highcontrast-stepper-border-color-keyboard-focus: CanvasText;
+		--highcontrast-stepper-focus-indicator-color: Highlight;
+
+		&.is-invalid {
+			--highcontrast-stepper-border-color: Highlight;
+			--highcontrast-stepper-border-color-hover: Highlight;
+			--highcontrast-stepper-border-color-focus: Highlight;
+			--highcontrast-stepper-border-color-focus-hover: Highlight;
+			--highcontrast-stepper-border-color-keyboard-focus: Highlight;
+		}
+
+		&.is-disabled {
+			--highcontrast-stepper-border-color: GrayText;
+			--highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+		}
+
+		&:not(.is-disabled) {
+			&:hover {
+				--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover);
+			}
+
+			&.is-focused,
+			&:focus {
+				--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus);
+
+				&:hover {
+					--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover);
+				}
+			}
+
+			&.is-keyboardFocused,
+			&:focus-visible {
+				--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus);
+			}
+		}
+	}
+
+	/* @passthrough start */
+	.spectrum-Stepper-input {
+		--highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color);
+	}
+	/* @passthrough end */
+
+	/* @passthrough start */
+	.spectrum-Stepper-button {
+		--highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color);
+		--highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color);
+	}
+	/* @passthrough end */
+}
+
 /* --- Component-level passthroughs for nested components --- */
 /* @passthrough start -- MODS for sub components */
 .spectrum-Stepper {

Original file line number	Diff line number	Diff line change
`@@ -133,14 +133,14 @@`
`133`	`133`	`block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));`
`134`	`134`	`border-radius: var(--spectrum-progressbar-corner-radius);`
`135`	`135`
`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)));`
`137`	`137`	`}`
`138`	`138`
`139`	`139`	`.spectrum-ProgressBar-fill {`
`140`	`140`	`border: none;`
`141`	`141`	`block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));`
`142`	`142`	`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)));`
`144`	`144`	`}`
`145`	`145`	`}`
`146`	`146`
`@@ -183,7 +183,7 @@`
`183`	`183`	`.spectrum-ProgressBar--staticWhite {`
`184`	`184`	`.spectrum-ProgressBar-fill {`
`185`	`185`	`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)));`
`187`	`187`	`}`
`188`	`188`
`189`	`189`	`.spectrum-ProgressBar-label,`
`@@ -192,7 +192,7 @@`
`192`	`192`	`}`
`193`	`193`
`194`	`194`	`.spectrum-ProgressBar-track {`
`195`		`- background-color: var(--spectrum-progressbar-track-color-white);`
	`195`	`+ background: var(--spectrum-progressbar-track-color-white);`
`196`	`196`	`}`
`197`	`197`	`}`
`198`	`198`