feat: bug fixes for reducing theming variables

Author: castastrophe

components/calendar/dist/metadata.json

@@ -6,7 +6,6 @@
     ".spectrum-Calendar-body",
     ".spectrum-Calendar-date",
     ".spectrum-Calendar-date.is-disabled",
-    ".spectrum-Calendar-date.is-disabled.is-range-selection",
     ".spectrum-Calendar-date.is-disabled.is-selected",
     ".spectrum-Calendar-date.is-focused",
     ".spectrum-Calendar-date.is-focused.is-range-selection",
@@ -32,7 +31,6 @@
     ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end",
     ".spectrum-Calendar-date.is-range-selection.is-selection-start:after",
     ".spectrum-Calendar-date.is-range-selection.is-selection-start:before",
-    ".spectrum-Calendar-date.is-range-selection.is-today",
     ".spectrum-Calendar-date.is-range-selection:hover",
     ".spectrum-Calendar-date.is-selected",
     ".spectrum-Calendar-date.is-selected:hover:not(.is-selection-end, .is-selection-start)",
@@ -185,32 +183,20 @@
     "--mod-actionbutton-min-width"
   ],
   "high-contrast": [
-    "--highcontrast-calendar-button-icon-color",
     "--highcontrast-calendar-day-background-cap-selected",
-    "--highcontrast-calendar-day-background-color-cap-selected",
-    "--highcontrast-calendar-day-background-color-down",
-    "--highcontrast-calendar-day-background-color-hover",
-    "--highcontrast-calendar-day-background-color-key-focus",
-    "--highcontrast-calendar-day-background-color-selected",
-    "--highcontrast-calendar-day-background-color-selected-hover",
     "--highcontrast-calendar-day-background-down",
     "--highcontrast-calendar-day-background-focus",
     "--highcontrast-calendar-day-background-hover",
     "--highcontrast-calendar-day-background-selected",
     "--highcontrast-calendar-day-background-selected-hover",
     "--highcontrast-calendar-day-border-color-focus",
-    "--highcontrast-calendar-day-border-color-key-focus",
     "--highcontrast-calendar-day-text-color-cap-selected",
-    "--highcontrast-calendar-day-text-color-disabled",
     "--highcontrast-calendar-day-text-color-hover",
     "--highcontrast-calendar-day-text-color-key-focus",
     "--highcontrast-calendar-day-text-color-selected",
     "--highcontrast-calendar-day-title-text-color",
-    "--highcontrast-calendar-day-today-background-color-selected-hover",
     "--highcontrast-calendar-day-today-background-selected-hover",
     "--highcontrast-calendar-day-today-border-color",
-    "--highcontrast-calendar-day-today-border-color-disabled",
-    "--highcontrast-calendar-day-today-text-color",
-    "--highcontrast-calendar-day-today-text-color-disabled"
+    "--highcontrast-calendar-day-today-text-color"
   ]
 }

components/calendar/index.css

@@ -13,59 +13,6 @@
 
 @import "./themes/spectrum-two.css";
 
-@media (forced-colors: active) {
-	.spectrum-Calendar-prevMonth,
-	.spectrum-Calendar-nextMonth {
-		--highcontrast-calendar-button-icon-color: ButtonText;
-	}
-
-	.spectrum-Calendar-date {
-		--highcontrast-calendar-day-background-color-cap-selected: Highlight;
-		--highcontrast-calendar-day-background-color-down: ButtonFace;
-		--highcontrast-calendar-day-background-color-hover: Transparent;
-		--highcontrast-calendar-day-background-color-key-focus: ButtonFace;
-		--highcontrast-calendar-day-background-color-selected-hover: Transparent;
-		--highcontrast-calendar-day-background-color-selected: Highlight;
-		--highcontrast-calendar-day-border-color-key-focus: ButtonText;
-		--highcontrast-calendar-day-text-color-cap-selected: HighlightText;
-		--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: HighlightText;
-		--highcontrast-calendar-day-title-text-color: CanvasText;
-		--highcontrast-calendar-day-today-background-color-selected-hover: Highlight;
-		--highcontrast-calendar-day-today-border-color-disabled: GrayText;
-		--highcontrast-calendar-day-today-border-color: ButtonText;
-		--highcontrast-calendar-day-today-text-color-disabled: GrayText;
-		--highcontrast-calendar-day-today-text-color: ButtonText;
-
-		forced-color-adjust: none;
-
-		&.is-range-selection {
-			&.is-today {
-				color: HighlightText;
-			}
-
-			&.is-selection-start::after,
-			&.is-selection-end::after {
-				content: none;
-			}
-		}
-
-		&.is-disabled {
-			&.is-range-selection {
-				background: Highlight;
-				color: HighlightText;
-			}
-
-			&.is-selected {
-				background: Highlight;
-				color: HighlightText;
-			}
-		}
-	}
-}
-
 .spectrum-Calendar {
 	--spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100));
 	--spectrum-calendar-day-height: var(--mod-calendar-day-height, var(--spectrum-component-height-100));

components/progressbar/index.css

@@ -98,7 +98,21 @@
 	&:lang(ko) {
 		--mod-progressbar-line-height: var(--spectrum-progressbar-line-height-cjk);
 	}
+}
+
+@media (forced-colors: active) {
+	.spectrum-ProgressBar {
+		--highcontrast-progressbar-fill-color: ButtonText;
+		--highcontrast-progressbar-track-color: ButtonFace;
+	}
+
+	.spectrum-ProgressBar-track {
+		forced-color-adjust: none;
+		border: 1px solid ButtonText;
+	}
+}
 
+.spectrum-ProgressBar {
 	position: relative;
 	display: inline-flex;
 	flex-flow: row wrap;
@@ -191,18 +205,6 @@
 	}
 }
 
-@media (forced-colors: active) {
-	.spectrum-ProgressBar {
-		--highcontrast-progressbar-fill-color: ButtonText;
-		--highcontrast-progressbar-track-color: ButtonFace;
-	}
-
-	.spectrum-ProgressBar-track {
-		forced-color-adjust: none;
-		border: 1px solid ButtonText;
-	}
-}
-
 @keyframes indeterminate-loop {
 	from {
 		transform: translate(calc(-1 * var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-fill-size-indeterminate)));

components/stepper/index.css

@@ -90,12 +90,6 @@
 		--spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-75));
 	}
 
-	&,
-	&.spectrum-Stepper--sizeM {
-		--spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium);
-		--spectrum-stepper-height: var(--spectrum-component-height-100);
-	}
-
 	&.spectrum-Stepper--sizeL {
 		--spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-large));
 		--spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-200));
@@ -321,13 +315,12 @@
 	transition: border-color var(--spectrum-stepper-animation-duration) ease-in-out;
 }
 
-/* stylelint-disable selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */
+/* stylelint-disable-next-line selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */
 .spectrum-Stepper.hide-stepper .spectrum-Stepper-input {
 	border-start-end-radius: var(--spectrum-stepper-border-radius);
 	border-end-end-radius: var(--spectrum-stepper-border-radius);
 	border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
 }
-/* stylelint-enable selector-class-pattern */
 
 /* --- Quiet variant styles --- */
 .spectrum-Stepper--quiet {

components/stepper/stories/template.js

@@ -52,6 +52,7 @@ export const Template = ({
 				"is-keyboardFocused": isKeyboardFocused,
 				"is-invalid": isInvalid,
 				"is-disabled": isDisabled,
+				"hide-stepper": hideStepper,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			id=${ifDefined(id)}

components/stepper/themes/express.css

@@ -37,7 +37,6 @@
 
 		/** Invalid **/
 		--spectrum-stepper-border-color-invalid: transparent;
-		--spectrum-stepper-border-color-hover-invalid: transparent;
 		--spectrum-stepper-border-color-focus-invalid: transparent;
 		--spectrum-stepper-border-color-focus-hover-invalid: transparent;
 		--spectrum-stepper-border-color-keyboard-focus-invalid: transparent;