feat(progressbar): s2 migration (#2659)

Author: Melissa Thompson

.changeset/proud-jokes-rule.md

@@ -0,0 +1,7 @@
+---
+"@spectrum-css/progressbar": major
+---
+
+feat(progressbar): S2 migration
+
+Progress bar now uses Spectrum 2 tokens and specifications. This migration includes updated colors, font sizes, and spacing. No mods were harmed in the migration of this component (all `--mod` properties remain the same).

components/meter/dist/metadata.json

@@ -27,7 +27,9 @@
     "--spectrum-font-size-75",
     "--spectrum-negative-visual-color",
     "--spectrum-notice-visual-color",
-    "--spectrum-positive-visual-color"
+    "--spectrum-positive-visual-color",
+    "--spectrum-progressbar-size-2400",
+    "--spectrum-progressbar-size-2500"
   ],
   "system-theme": [],
   "passthroughs": [

components/meter/index.css

@@ -19,12 +19,14 @@
 
 	&,
 	&.spectrum-Meter--sizeS {
+		--mod-progressbar-size-default: var(--spectrum-progressbar-size-2400);
 		--mod-progressbar-thickness: var(--spectrum-meter-thickness-small);
 		--mod-progressbar-font-size: var(--spectrum-font-size-75);
 		--mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
 	}
 
 	&.spectrum-Meter--sizeL {
+		--mod-progressbar-size-default: var(--spectrum-progressbar-size-2500);
 		--mod-progressbar-thickness: var(--spectrum-meter-thickness-large);
 		--mod-progressbar-font-size: var(--spectrum-font-size-100);
 		--mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200);

components/progressbar/dist/metadata.json

@@ -2,25 +2,32 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-ProgressBar",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-fill",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-label",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ja)",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ko)",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(zh)",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-percentage",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ja)",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ko)",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(zh)",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-track",
     ".spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill",
+    ".spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl)",
+    ".spectrum-ProgressBar--sideLabel",
     ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label",
     ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage",
     ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track",
     ".spectrum-ProgressBar--sizeL",
     ".spectrum-ProgressBar--sizeS",
     ".spectrum-ProgressBar--sizeXL",
-    ".spectrum-ProgressBar-fill",
-    ".spectrum-ProgressBar-label",
-    ".spectrum-ProgressBar-percentage",
+    ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill",
+    ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label",
+    ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage",
+    ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track",
     ".spectrum-ProgressBar-track",
-    ".spectrum-ProgressBar.spectrum-ProgressBar--sideLabel",
-    ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite",
-    ".spectrum-ProgressBar:dir(rtl)",
-    ".spectrum-ProgressBar:lang(ja)",
-    ".spectrum-ProgressBar:lang(ko)",
-    ".spectrum-ProgressBar:lang(zh)",
     "0%",
-    "[dir=\"rtl\"] .spectrum-ProgressBar",
+    "[dir=\"rtl\"] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill",
     "to"
   ],
   "modifiers": [
@@ -41,7 +48,8 @@
     "--mod-progressbar-spacing-top-to-text",
     "--mod-progressbar-text-color",
     "--mod-progressbar-thickness",
-    "--mod-progressbar-track-color"
+    "--mod-progressbar-track-color",
+    "--mod-spacing-progressbar-label-to-text"
   ],
   "component": [
     "--spectrum-progress-bar-maximum-width",
@@ -53,11 +61,7 @@
     "--spectrum-progressbar-animation-duration-indeterminate",
     "--spectrum-progressbar-animation-ease-in-out-indeterminate",
     "--spectrum-progressbar-corner-radius",
-    "--spectrum-progressbar-dir-indeterminate-multiplier",
     "--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",
@@ -70,60 +74,42 @@
     "--spectrum-progressbar-size-2500",
     "--spectrum-progressbar-size-2800",
     "--spectrum-progressbar-size-default",
-    "--spectrum-progressbar-sized-font-size",
-    "--spectrum-progressbar-sized-size-default",
-    "--spectrum-progressbar-sized-spacing-top-to-text",
-    "--spectrum-progressbar-sized-thickness",
     "--spectrum-progressbar-spacing-label-to-progressbar",
     "--spectrum-progressbar-spacing-label-to-text",
     "--spectrum-progressbar-spacing-top-to-text",
-    "--spectrum-progressbar-static-white-track-color",
     "--spectrum-progressbar-text-color",
     "--spectrum-progressbar-thickness",
     "--spectrum-progressbar-track-color",
-    "--spectrum-progressbar-track-color-default",
     "--spectrum-progressbar-track-color-white"
   ],
   "global": [
-    "--spectrum-accent-color-900",
+    "--spectrum-accent-content-color-default",
     "--spectrum-animation-duration-2000",
     "--spectrum-animation-ease-in-out",
     "--spectrum-cjk-line-height-100",
-    "--spectrum-component-top-to-text",
     "--spectrum-component-top-to-text-100",
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
     "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-full",
     "--spectrum-font-size-100",
     "--spectrum-font-size-200",
+    "--spectrum-font-size-300",
     "--spectrum-font-size-75",
-    "--spectrum-gray-200",
+    "--spectrum-gray-300",
     "--spectrum-line-height-100",
-    "--spectrum-meter-default-width",
-    "--spectrum-meter-inline-size",
-    "--spectrum-meter-max-width",
-    "--spectrum-meter-maximum-width",
-    "--spectrum-meter-min-width",
-    "--spectrum-meter-minimum-width",
-    "--spectrum-meter-thickness-l",
-    "--spectrum-meter-thickness-large",
-    "--spectrum-meter-thickness-s",
-    "--spectrum-meter-thickness-small",
-    "--spectrum-meter-top-to-text",
-    "--spectrum-negative-visual-color",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-notice-visual-color",
-    "--spectrum-positive-visual-color",
+    "--spectrum-neutral-subdued-content-color-default",
     "--spectrum-spacing-200",
     "--spectrum-spacing-75",
     "--spectrum-transparent-white-300",
-    "--spectrum-white"
+    "--spectrum-transparent-white-700",
+    "--spectrum-transparent-white-900"
   ],
   "system-theme": [],
-  "passthroughs": ["--mod-fieldlabel-font-size"],
+  "passthroughs": [],
   "high-contrast": [
     "--highcontrast-progressbar-fill-color",
+    "--highcontrast-progressbar-fill-color-white",
     "--highcontrast-progressbar-track-color"
   ]
 }