chore: fix a few minor duplicate properties

castastrophe · castastrophe · commit b3ad96a310a1 · 2025-02-11T13:08:05.000-05:00
diff --git a/.github/workflows/vrt.yml b/.github/workflows/vrt.yml
@@ -4,6 +4,7 @@ on:
     push:
       branches:
         - main
+        - spectrum-two
         - "!changeset-release/**"
         - "!dependabot/**"
     workflow_dispatch:
diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json
@@ -228,7 +228,6 @@
     "--highcontrast-actionbutton-content-color-disabled",
     "--highcontrast-actionbutton-content-color-down",
     "--highcontrast-actionbutton-content-color-focus",
-    "--highcontrast-actionbutton-content-color-hover",
-    "--highcontrast-actionbutton-focus-indicator-color"
+    "--highcontrast-actionbutton-content-color-hover"
   ]
 }
diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
@@ -425,9 +425,6 @@ a.spectrum-ActionButton {
 
 @media (forced-colors: active) {
 	.spectrum-ActionButton {
-		/* force a more visible focus indicator color */
-		--highcontrast-actionbutton-focus-indicator-color: ButtonText;
-
 		&::after {
 			/* make sure focus indicator renders */
 			forced-color-adjust: none;
diff --git a/components/checkbox/index.css b/components/checkbox/index.css
@@ -17,13 +17,7 @@
  */
 
 .spectrum-Checkbox {
-	--spectrum-checkbox-control-color-default: var(--spectrum-gray-600);
-	--spectrum-checkbox-control-color-hover: var(--spectrum-gray-700);
-	--spectrum-checkbox-control-color-down: var(--spectrum-gray-800);
-	--spectrum-checkbox-control-color-focus: var(--spectrum-gray-700);
-
-	--spectrum-checkbox-checkmark-color: var(--spectrum-gray-50);
-	--spectrum-checkbox-control-corner-radius: 2px;
+	--spectrum-checkbox-checkmark-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-gray-50)));
 
 	/* Color */
 	--spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default);
@@ -201,7 +195,7 @@
 		.spectrum-Checkbox-input:checked {
 			&:disabled + .spectrum-Checkbox-box::before {
 				border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));
-				background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)));
+				background-color: var(--spectrum-checkbox-checkmark-color);
 			}
 
 			&:disabled ~ .spectrum-Checkbox-label {
@@ -422,7 +416,7 @@
 	&:checked + .spectrum-Checkbox-box {
 		&::before {
 			border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));
-			background-color: var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color));
+			background-color: var(--spectrum-checkbox-checkmark-color);
 			border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width));
 		}
 
@@ -520,7 +514,7 @@
 .spectrum-Checkbox {
 	.spectrum-Checkbox-checkmark,
 	.spectrum-Checkbox-partialCheckmark {
-		color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)));
+		color: var(--spectrum-checkbox-checkmark-color);
 		opacity: 0;
 		transform: scale(0);
 
@@ -541,7 +535,7 @@
 		&::before {
 			border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled)));
 
-			background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)));
+			background-color: var(--spectrum-checkbox-checkmark-color);
 		}
 	}
 
diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css
@@ -12,11 +12,6 @@
 */
 
 .spectrum-ClearButton {
-	--spectrum-clear-button-background-color: transparent;
-	--spectrum-clear-button-background-color-hover: transparent;
-	--spectrum-clear-button-background-color-down: transparent;
-	--spectrum-clear-button-background-color-key-focus: transparent;
-
 	--spectrum-clear-button-height: var(--spectrum-component-height-100);
 	--spectrum-clear-button-width: var(--spectrum-component-height-100);
 	--spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
@@ -26,16 +21,16 @@
 	--spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
 	--spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
 
-	block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
-	inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
-	border-radius: 100%;
-
-	background-color: var(--mod-clear-button-background-color, transparent);
-	margin: 0;
-	padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding));
+	--spectrum-clear-button-background-color: transparent;
+	--spectrum-clear-button-background-color-hover: transparent;
+	--spectrum-clear-button-background-color-down: transparent;
+	--spectrum-clear-button-background-color-key-focus: transparent;
 
-	border: none;
-	color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color));
+	&.spectrum-ClearButton--staticWhite {
+		--spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400);
+		--spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500);
+		--spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400);
+	}
 
 	&.spectrum-ClearButton--sizeS {
 		--spectrum-clear-button-height: var(--spectrum-component-height-75);
@@ -80,6 +75,19 @@
 		--mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color);
 		--mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
 	}
+}
+
+.spectrum-ClearButton {
+	block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
+	inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
+	border-radius: 100%;
+
+	background-color: var(--mod-clear-button-background-color, transparent);
+	margin: 0;
+	padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding));
+
+	border: none;
+	color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color));
 
 	&:not(:disabled) {
 		cursor: pointer;
diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json
@@ -8,10 +8,7 @@
     ".spectrum-CoachIndicator-ring:nth-child(3)",
     ".spectrum-CoachIndicator.spectrum-CoachIndicator--quiet",
     ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack",
-    ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite",
-    "0%",
-    "50%",
-    "to"
+    ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite"
   ],
   "modifiers": [
     "--mod-coach-animation-indicator-ring-center-delay-multiple",
diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json
@@ -43,7 +43,6 @@
     "--spectrum-animation-duration-500",
     "--spectrum-animation-ease-in",
     "--spectrum-animation-ease-out",
-    "--spectrum-background-layer-2-color",
     "--spectrum-corner-radius-extra-large-default",
     "--spectrum-dialog-confirm-entry-animation-distance",
     "--spectrum-gray-75",
diff --git a/components/modal/index.css b/components/modal/index.css
@@ -12,8 +12,6 @@
  */
 
 .spectrum-Modal {
-	--spectrum-modal-background-color: var(--spectrum-background-layer-2-color);
-
 	--spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500));
 	--spectrum-modal-confirm-entry-animation-delay: var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200));
 
diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json
@@ -114,7 +114,6 @@
     "--spectrum-component-height-75",
     "--spectrum-corner-radius-100",
     "--spectrum-corner-radius-200",
-    "--spectrum-corner-radius-75",
     "--spectrum-default-font-style",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-content-color",
diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css
@@ -12,17 +12,6 @@
  */
 
 .spectrum-PickerButton {
-	--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-border-color: none;
-	--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75);
-	--spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200);
-	--spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75);
-	--spectrum-picker-button-border-width: 0px;
-
 	/* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */
 	--spectrum-picker-button-padding: 4px;
 
diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json
@@ -26,9 +26,7 @@
     ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage",
     ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track",
     ".spectrum-ProgressBar-track",
-    "0%",
-    "[dir=\"rtl\"] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill",
-    "to"
+    "[dir=\"rtl\"] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill"
   ],
   "modifiers": [
     "--mod-progressbar-animation-duration-indeterminate",
diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json
@@ -21,7 +21,6 @@
   ],
   "component": [
     "--spectrum-progress-circle-fill-border-color",
-    "--spectrum-progress-circle-fill-border-color-over-background",
     "--spectrum-progress-circle-size",
     "--spectrum-progress-circle-size-large",
     "--spectrum-progress-circle-size-medium",
@@ -30,18 +29,15 @@
     "--spectrum-progress-circle-thickness-large",
     "--spectrum-progress-circle-thickness-medium",
     "--spectrum-progress-circle-thickness-small",
-    "--spectrum-progress-circle-track-border-color",
-    "--spectrum-progress-circle-track-border-color-over-background"
+    "--spectrum-progress-circle-track-border-color"
   ],
   "global": [
     "--spectrum-accent-content-color-default",
     "--spectrum-static-black-track-color",
     "--spectrum-static-black-track-indicator-color",
     "--spectrum-static-white-track-color",
     "--spectrum-static-white-track-indicator-color",
-    "--spectrum-track-color",
-    "--spectrum-transparent-white-1000",
-    "--spectrum-transparent-white-400"
+    "--spectrum-track-color"
   ],
   "passthroughs": [],
   "high-contrast": [
diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css
@@ -16,9 +16,6 @@ governing permissions and limitations under the License.
 	/* circle unfilled border color */
 	--spectrum-progress-circle-track-border-color: var(--spectrum-track-color);
 
-	--spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400);
-	--spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000);
-
 	/* circle progress fill border color */
 	--spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default);
 
diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json
@@ -12,7 +12,6 @@
     ".spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
     ".spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
     ".spectrum-Radio--sizeL",
-    ".spectrum-Radio--sizeM",
     ".spectrum-Radio--sizeS",
     ".spectrum-Radio--sizeXL",
     ".spectrum-Radio-button",
diff --git a/components/radio/index.css b/components/radio/index.css
@@ -18,12 +18,6 @@
  */
 
 .spectrum-Radio {
-	/* 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);
-
 	--spectrum-radio-button-background-color: var(--spectrum-gray-50);
 
 	/* state colors for all themes */
@@ -64,16 +58,6 @@
 	/* animation all themes */
 	--spectrum-radio-animation-duration: var(--spectrum-animation-duration-100);
 
-	/* CJK language support all themes */
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		--spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
-	}
-}
-
-.spectrum-Radio,
-.spectrum-Radio--sizeM {
 	--spectrum-radio-height: var(--spectrum-component-height-100);
 	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
 
@@ -83,6 +67,13 @@
 	--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
 
 	--spectrum-radio-font-size: var(--spectrum-font-size-100);
+
+	/* CJK language support all themes */
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
+	}
 }
 
 .spectrum-Radio--sizeS {
diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json
@@ -217,12 +217,6 @@
     "--spectrum-border-width-100",
     "--spectrum-clearbutton-fill-background-color",
     "--spectrum-clearbutton-fill-size",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-75",
-    "--spectrum-component-edge-to-visual-100",
-    "--spectrum-component-edge-to-visual-200",
-    "--spectrum-component-edge-to-visual-75",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-75",
@@ -233,7 +227,6 @@
     "--spectrum-component-top-to-workflow-icon-200",
     "--spectrum-component-top-to-workflow-icon-75",
     "--spectrum-corner-radius-100",
-    "--spectrum-disabled-background-color",
     "--spectrum-disabled-content-color",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
@@ -263,10 +256,6 @@
     "--spectrum-neutral-background-color-selected-down",
     "--spectrum-neutral-background-color-selected-hover",
     "--spectrum-neutral-background-color-selected-key-focus",
-    "--spectrum-neutral-subdued-background-color-default",
-    "--spectrum-neutral-subdued-background-color-down",
-    "--spectrum-neutral-subdued-background-color-hover",
-    "--spectrum-neutral-subdued-background-color-key-focus",
     "--spectrum-neutral-subdued-content-color-default",
     "--spectrum-neutral-subdued-content-color-down",
     "--spectrum-neutral-subdued-content-color-hover",
diff --git a/components/tag/index.css b/components/tag/index.css
@@ -12,52 +12,36 @@
  */
 
 .spectrum-Tag {
+	/* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */
+	--spectrum-avatar-opacity-disabled: 0.3;
+
+	--spectrum-tag-animation-duration: var(--spectrum-animation-duration-100);
+	--spectrum-tag-border-width: var(--spectrum-border-width-100);
+
+	/* background color */
 	--spectrum-tag-background-color: var(--spectrum-gray-50);
 	--spectrum-tag-background-color-hover: var(--spectrum-gray-50);
 	--spectrum-tag-background-color-active: var(--spectrum-gray-100);
 	--spectrum-tag-background-color-focus: var(--spectrum-gray-50);
 
+	/* border radius */
 	--spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100);
 	--spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100);
 	--spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100);
 
+	/* border color */
 	--spectrum-tag-border-color: var(--spectrum-gray-700);
 	--spectrum-tag-border-color-hover: var(--spectrum-gray-800);
 	--spectrum-tag-border-color-active: var(--spectrum-gray-900);
 	--spectrum-tag-border-color-focus: var(--spectrum-gray-800);
 
+	/* content color */
 	--spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default);
 	--spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
 	--spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down);
 	--spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
 	--spectrum-tag-content-color-selected: var(--spectrum-gray-25);
 
-	--spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default);
-	--spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
-	--spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down);
-	--spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-
-	/* disabled variant */
-	--spectrum-tag-border-color-disabled: transparent;
-	--spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color);
-
-	/* tokens based on theme and t-shirt size */
-	--spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
-	--spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
-	--spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75);
-	--spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
-	--spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100);
-	--spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100);
-	--spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
-	--spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200);
-	--spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
-
-	/* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */
-	--spectrum-avatar-opacity-disabled: 0.3;
-
-	--spectrum-tag-animation-duration: var(--spectrum-animation-duration-100);
-	--spectrum-tag-border-width: var(--spectrum-border-width-100);
-
 	/* focus ring */
 	--spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
 	--spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap);
diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json
diff --git a/components/textfield/index.css b/components/textfield/index.css

Original file line number	Diff line number	Diff line change
`@@ -228,7 +228,6 @@`
`228`	`228`	`"--highcontrast-actionbutton-content-color-disabled",`
`229`	`229`	`"--highcontrast-actionbutton-content-color-down",`
`230`	`230`	`"--highcontrast-actionbutton-content-color-focus",`
`231`		`- "--highcontrast-actionbutton-content-color-hover",`
`232`		`- "--highcontrast-actionbutton-focus-indicator-color"`
	`231`	`+ "--highcontrast-actionbutton-content-color-hover"`
`233`	`232`	`]`
`234`	`233`	`}`