fix(actionbutton,avatar,button,dialog): define missing custom properties from theme directory (#3517)

* restore missing mods and tokens
* restore missing mod and update metadata

Author: cdransf

.changeset/sixty-crabs-thank.md

@@ -0,0 +1,8 @@
+---
+"@spectrum-css/actionbutton": patch
+"@spectrum-css/avatar": patch
+"@spectrum-css/button": patch
+"@spectrum-css/dialog": patch
+---
+
+Define undefined properties from theme directory.

components/actionbutton/dist/metadata.json

@@ -23,6 +23,8 @@
     ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack:disabled",
     ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite:disabled",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-disabled:not(.is-selected)",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack .is-disabled",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
@@ -191,13 +193,11 @@
     "--spectrum-text-to-visual-75",
     "--spectrum-transparent-black-100",
     "--spectrum-transparent-black-200",
-    "--spectrum-transparent-black-400",
     "--spectrum-transparent-black-500",
     "--spectrum-transparent-black-600",
     "--spectrum-transparent-black-700",
     "--spectrum-transparent-white-100",
     "--spectrum-transparent-white-200",
-    "--spectrum-transparent-white-400",
     "--spectrum-transparent-white-500",
     "--spectrum-transparent-white-600",
     "--spectrum-transparent-white-700",

components/actionbutton/index.css

@@ -11,46 +11,6 @@
  * governing permissions and limitations under the License.
  */
 
-@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;
-		}
-
-		&.is-selected {
-			--highcontrast-actionbutton-background-color-default: Highlight;
-			--highcontrast-actionbutton-background-color-hover: Highlight;
-			--highcontrast-actionbutton-background-color-focus: Highlight;
-			--highcontrast-actionbutton-background-color-down: Highlight;
-			--highcontrast-actionbutton-background-color-disabled: ButtonFace;
-
-			--highcontrast-actionbutton-border-color-default: HighlightText;
-			--highcontrast-actionbutton-border-color-hover: HighlightText;
-			--highcontrast-actionbutton-border-color-focus: HighlightText;
-			--highcontrast-actionbutton-border-color-down: HighlightText;
-			--highcontrast-actionbutton-border-color-disabled: GrayText;
-
-			--highcontrast-actionbutton-content-color-default: HighlightText;
-			--highcontrast-actionbutton-content-color-hover: HighlightText;
-			--highcontrast-actionbutton-content-color-focus: HighlightText;
-			--highcontrast-actionbutton-content-color-down: HighlightText;
-			--highcontrast-actionbutton-content-color-disabled: GrayText;
-
-			.spectrum-ActionButton-icon,
-			.spectrum-ActionButton-hold,
-			.spectrum-ActionButton-label {
-				/* ensure custom text colors from above get applied */
-				/* it seems like this shouldn't have to be done, but colors are wrong without it */
-				forced-color-adjust: none;
-			}
-		}
-	}
-}
-
 .spectrum-ActionButton {
 	--spectrum-actionbutton-background-color-default: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-gray-50)));
 	--spectrum-actionbutton-background-color-hover: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-gray-100)));
@@ -103,17 +63,22 @@
 	}
 
 	&.spectrum-ActionButton--quiet {
+		--mod-actionbutton-border-color-default: transparent;
+
 		--mod-actionbutton-background-color-default: transparent;
 		--mod-actionbutton-background-color-hover: var(--spectrum-gray-100);
 		--mod-actionbutton-background-color-down: var(--spectrum-gray-200);
 		--mod-actionbutton-background-color-focus: var(--spectrum-gray-100);
+
+		&:disabled:not(.is-selected),
+		&.is-disabled:not(.is-selected) {
+			--mod-actionbutton-border-color-disabled: transparent;
+			--mod-actionbutton-background-color-disabled: transparent;
+		}
 	}
 
 	&.spectrum-ActionButton--staticBlack {
-		--mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500);
-		--mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600);
-		--mod-actionbutton-border-color-down: var(--spectrum-transparent-black-700);
-		--mod-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
+		--mod-actionbutton-background-color-default: transparent;
 
 		--mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500);
 		--mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600);
@@ -132,18 +97,12 @@
 		}
 
 		&.spectrum-ActionButton--quiet {
-			--mod-actionbutton-background-color-default: transparent;
-			--mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-400);
-			--mod-actionbutton-background-color-down: var(--spectrum-transparent-black-500);
-			--mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-400);
+			--mod-actionbutton-border-color-default: transparent;
 		}
 	}
 
 	&.spectrum-ActionButton--staticWhite {
-		--mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500);
-		--mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600);
-		--mod-actionbutton-border-color-down: var(--spectrum-transparent-white-700);
-		--mod-actionbutton-border-color-focus: var(--spectrum-transparent-white-600);
+		--mod-actionbutton-background-color-default: transparent;
 
 		--mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500);
 		--mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600);
@@ -162,10 +121,7 @@
 		}
 
 		&.spectrum-ActionButton--quiet {
-			--mod-actionbutton-background-color-default: transparent;
-			--mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-400);
-			--mod-actionbutton-background-color-down: var(--spectrum-transparent-white-500);
-			--mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-400);
+			--mod-actionbutton-border-color-default: transparent;
 		}
 	}
 
@@ -313,6 +269,8 @@
 	/* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */
 	-webkit-appearance: button;
 
+	border-style: solid;
+
 	transition:
 		background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
 		border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out,
@@ -464,3 +422,43 @@ a.spectrum-ActionButton {
 	/* Augment the margin correction for the icon only scenario */
 	margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
 }
+
+@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;
+		}
+
+		&.is-selected {
+			--highcontrast-actionbutton-background-color-default: Highlight;
+			--highcontrast-actionbutton-background-color-hover: Highlight;
+			--highcontrast-actionbutton-background-color-focus: Highlight;
+			--highcontrast-actionbutton-background-color-down: Highlight;
+			--highcontrast-actionbutton-background-color-disabled: ButtonFace;
+
+			--highcontrast-actionbutton-border-color-default: HighlightText;
+			--highcontrast-actionbutton-border-color-hover: HighlightText;
+			--highcontrast-actionbutton-border-color-focus: HighlightText;
+			--highcontrast-actionbutton-border-color-down: HighlightText;
+			--highcontrast-actionbutton-border-color-disabled: GrayText;
+
+			--highcontrast-actionbutton-content-color-default: HighlightText;
+			--highcontrast-actionbutton-content-color-hover: HighlightText;
+			--highcontrast-actionbutton-content-color-focus: HighlightText;
+			--highcontrast-actionbutton-content-color-down: HighlightText;
+			--highcontrast-actionbutton-content-color-disabled: GrayText;
+
+			.spectrum-ActionButton-icon,
+			.spectrum-ActionButton-hold,
+			.spectrum-ActionButton-label {
+				/* ensure custom text colors from above get applied */
+				/* it seems like this shouldn't have to be done, but colors are wrong without it */
+				forced-color-adjust: none;
+			}
+		}
+	}
+}

components/avatar/dist/metadata.json

@@ -73,8 +73,5 @@
     "--spectrum-focus-indicator-thickness"
   ],
   "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-avatar-color-opacity-disabled",
-    "--highcontrast-avatar-focus-indicator-color"
-  ]
+  "high-contrast": ["--highcontrast-avatar-focus-indicator-color"]
 }

components/avatar/index.css

@@ -140,7 +140,7 @@
 	opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity));
 
 	&.is-disabled {
-		opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)));
+		opacity: var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled));
 	}
 }
 

components/button/index.css

@@ -532,6 +532,10 @@ a.spectrum-Button {
 /* Forced colors / high contrast mode */
 @media (forced-colors: active) {
 	.spectrum-Button {
+		--highcontrast-button-border-color-default: ButtonBorder;
+		--highcontrast-button-border-color-hover: ButtonBorder;
+		--highcontrast-button-border-color-focus: ButtonBorder;
+		--highcontrast-button-border-color-down: ButtonBorder;
 		--highcontrast-button-content-color-disabled: GrayText;
 		--highcontrast-button-border-color-disabled: GrayText;
 		--highcontrast-button-background-color-disabled: ButtonFace;

components/dialog/dist/metadata.json

@@ -120,5 +120,5 @@
     "--mod-buttongroup-flex-wrap",
     "--mod-buttongroup-justify-content"
   ],
-  "high-contrast": ["--highcontrast-standard-dialog-border-color"]
+  "high-contrast": []
 }

components/dialog/index.css

@@ -414,6 +414,6 @@
 
 @media (forced-colors: active) {
 	.spectrum-Dialog {
-		border: 1px solid var(--highcontrast-standard-dialog-border-color, rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)));
+		border: 1px solid rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));
 	}
 }