fix(calendar,dial,pickerbutton,progressbar,radio,stepper): unused cus…

…tom properties (#3487)

* 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

.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

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

components/calendar/metadata/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",

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;
 

components/dial/metadata/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": [],

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 {

components/pickerbutton/metadata/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",

components/progressbar/index.css

@@ -49,9 +49,6 @@
 	--spectrum-progressbar-text-color: var(--spectrum-neutral-subdued-content-color-default);
 	--spectrum-progressbar-track-color: var(--spectrum-gray-300);
 	--spectrum-progressbar-fill-color: var(--spectrum-accent-content-color-default);
-	--spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color);
-	--spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color);
-	--spectrum-progressbar-fill-color-negative: var(--spectrum-negative-visual-color);
 	--spectrum-progressbar-label-and-value-white: var(--spectrum-transparent-white-700);
 	--spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300);
 	--spectrum-progressbar-fill-color-white: var(--spectrum-transparent-white-900);
@@ -136,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)));
 	}
 }
 
@@ -186,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,
@@ -195,7 +192,7 @@
 	}
 
 	.spectrum-ProgressBar-track {
-		background-color: var(--spectrum-progressbar-track-color-white);
+		background: var(--spectrum-progressbar-track-color-white);
 	}
 }
 

components/progressbar/metadata/metadata.json

@@ -62,9 +62,6 @@
     "--spectrum-progressbar-animation-ease-in-out-indeterminate",
     "--spectrum-progressbar-corner-radius",
     "--spectrum-progressbar-fill-color",
-    "--spectrum-progressbar-fill-color-negative",
-    "--spectrum-progressbar-fill-color-notice",
-    "--spectrum-progressbar-fill-color-positive",
     "--spectrum-progressbar-fill-color-white",
     "--spectrum-progressbar-fill-size-indeterminate",
     "--spectrum-progressbar-font-size",
@@ -101,10 +98,7 @@
     "--spectrum-font-size-75",
     "--spectrum-gray-300",
     "--spectrum-line-height-100",
-    "--spectrum-negative-visual-color",
     "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-notice-visual-color",
-    "--spectrum-positive-visual-color",
     "--spectrum-spacing-200",
     "--spectrum-spacing-75",
     "--spectrum-transparent-white-300",

components/progressbar/stories/template.js

@@ -12,7 +12,7 @@ export const Template = ({
 	rootClass = "spectrum-ProgressBar",
 	customClasses = [],
 	labelPosition,
-	isStaticWhite,
+	staticColor,
 	customWidth,
 	isIndeterminate = false,
 	label,

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

components/radio/metadata/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",