feat: migration of tokens to spectrum 2

Expanding the existing themes system to support the new S2 mappings.

---
Co-authored-by: castastrophe <[email protected]>
Co-authored-by: Patrick Fulton <[email protected]>
Co-authored-by: Cory Dransfeldt <[email protected]>
Co-authored-by: Aziz Ramos <[email protected]>
Co-authored-by: Josh Winn <[email protected]>
Co-authored-by: Rise Erpelding <[email protected]>
Co-authored-by: Marissa Huysentruyt <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: TarunAdobe <[email protected]>
Co-authored-by: Dragan Eror<[email protected]>

Author: 9 people

components/calendar/dist/metadata.json

@@ -6,6 +6,7 @@
     ".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",
@@ -31,6 +32,7 @@
     ".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)",
@@ -183,20 +185,32 @@
     "--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-text-color"
+    "--highcontrast-calendar-day-today-border-color-disabled",
+    "--highcontrast-calendar-day-today-text-color",
+    "--highcontrast-calendar-day-today-text-color-disabled"
   ]
 }

components/calendar/index.css

@@ -13,6 +13,59 @@
 
 @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/combobox/themes/spectrum.css

@@ -27,3 +27,5 @@
 		--spectrum-combobox-border-color-disabled: transparent;
 	}
 }
+
+@import "./spectrum-two.css";

components/progressbar/index.css

@@ -98,21 +98,7 @@
 	&: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;
@@ -205,6 +191,18 @@
 	}
 }
 
+@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,6 +90,12 @@
 		--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));
@@ -315,12 +321,13 @@
 	transition: border-color var(--spectrum-stepper-animation-duration) ease-in-out;
 }
 
-/* stylelint-disable-next-line selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */
+/* stylelint-disable 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 {