fix(*): define missing custom properties from theme directory

adobe · Jan 3, 2025 · d72049e · d72049e
1 parent 9d7f088
commit d72049e
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 67 deletions.
diff --git a/.changeset/sixty-crabs-thank.md b/.changeset/sixty-crabs-thank.md
@@ -0,0 +1,10 @@
+---
+"@spectrum-css/infieldbutton": patch
+"@spectrum-css/actionbutton": patch
+"@spectrum-css/clearbutton": patch
+"@spectrum-css/avatar": patch
+"@spectrum-css/button": patch
+"@spectrum-css/dialog": patch
+---
+
+Define undefined properties from theme directory.
diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
@@ -11,65 +11,18 @@
  * 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)));
 	--spectrum-actionbutton-background-color-down: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-gray-200)));
 	--spectrum-actionbutton-background-color-focus: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-gray-100)));
-	--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100);
-
-	--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
-	--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
-	--spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
-	--spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
 
 	--spectrum-actionbutton-border-color-default: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-gray-400)));
 	--spectrum-actionbutton-border-color-hover: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-gray-500)));
 	--spectrum-actionbutton-border-color-down: var(--highcontrast-actionbutton-border-color-down, var(--mod-actionbutton-border-color-down, var(--spectrum-gray-600)));
 	--spectrum-actionbutton-border-color-focus: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-gray-500)));
 	--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
-
-	--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50);
+	--spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
 
 	--spectrum-actionbutton-animation-duration: var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100));
 	--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-medium));
@@ -114,7 +67,6 @@
 		--mod-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
 
 		--spectrum-actionbutton-background-color-disabled: transparent;
-		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200);
 
 		&,
 		&.spectrum-ActionButton--quiet {
@@ -132,7 +84,6 @@
 		--mod-actionbutton-border-color-focus: var(--spectrum-transparent-white-600);
 
 		--spectrum-actionbutton-background-color-disabled: transparent;
-		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200);
 
 		&,
 		&.spectrum-ActionButton--quiet {
@@ -410,3 +361,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;
+			}
+		}
+	}
+}
diff --git a/components/actionbutton/metadata/metadata.json b/components/actionbutton/metadata/metadata.json
@@ -97,11 +97,6 @@
     "--spectrum-actionbutton-background-color-down",
     "--spectrum-actionbutton-background-color-focus",
     "--spectrum-actionbutton-background-color-hover",
-    "--spectrum-actionbutton-background-color-selected",
-    "--spectrum-actionbutton-background-color-selected-disabled",
-    "--spectrum-actionbutton-background-color-selected-down",
-    "--spectrum-actionbutton-background-color-selected-focus",
-    "--spectrum-actionbutton-background-color-selected-hover",
     "--spectrum-actionbutton-border-color-default",
     "--spectrum-actionbutton-border-color-disabled",
     "--spectrum-actionbutton-border-color-down",
@@ -114,7 +109,6 @@
     "--spectrum-actionbutton-content-color-down",
     "--spectrum-actionbutton-content-color-focus",
     "--spectrum-actionbutton-content-color-hover",
-    "--spectrum-actionbutton-content-color-selected",
     "--spectrum-actionbutton-edge-to-hold-icon",
     "--spectrum-actionbutton-edge-to-text",
     "--spectrum-actionbutton-edge-to-visual",
@@ -162,6 +156,7 @@
     "--spectrum-corner-radius-medium-size-medium",
     "--spectrum-corner-radius-medium-size-small",
     "--spectrum-disabled-border-color",
+    "--spectrum-disabled-content-color",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
@@ -193,13 +188,10 @@
     "--spectrum-text-to-visual-300",
     "--spectrum-text-to-visual-50",
     "--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-200",
     "--spectrum-transparent-white-400",
     "--spectrum-transparent-white-500",
     "--spectrum-transparent-white-600",

diff --git a/components/avatar/index.css b/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));
 	}
 }
 

diff --git a/components/avatar/metadata/metadata.json b/components/avatar/metadata/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"]
 }
diff --git a/components/button/index.css b/components/button/index.css
@@ -495,6 +495,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;

diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css
@@ -1,4 +1,3 @@
-
 /*!
 * Copyright 2024 Adobe. All rights reserved.
 *
@@ -22,6 +21,11 @@
 	--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);
 
+	--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;
+
 	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%;

diff --git a/components/dialog/index.css b/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));
 	}
 }
diff --git a/components/dialog/metadata/metadata.json b/components/dialog/metadata/metadata.json
@@ -120,5 +120,5 @@
     "--mod-buttongroup-flex-wrap",
     "--mod-buttongroup-justify-content"
   ],
-  "high-contrast": ["--highcontrast-standard-dialog-border-color"]
+  "high-contrast": []
 }
diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css
@@ -31,6 +31,20 @@
 
 	--spectrum-infield-button-fill-justify-content: center;
 
+	--spectrum-infield-button-border-width: var(--spectrum-border-width-100);
+	--spectrum-infield-button-border-color: inherit;
+
+	--spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100);
+	--spectrum-infield-button-border-radius-reset: 0;
+
+	--spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset);
+	--spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset);
+
+	--spectrum-infield-button-background-color: var(--spectrum-gray-50);
+	--spectrum-infield-button-background-color-hover: var(--spectrum-gray-100);
+	--spectrum-infield-button-background-color-down: var(--spectrum-gray-200);
+	--spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-100);
+
 	&:disabled {
 		--mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color));
 		--mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));

diff --git a/components/infieldbutton/metadata/metadata.json b/components/infieldbutton/metadata/metadata.json
@@ -122,12 +122,17 @@
   ],
   "global": [
     "--spectrum-animation-duration-100",
+    "--spectrum-border-width-100",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
+    "--spectrum-corner-radius-100",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-content-color",
+    "--spectrum-gray-100",
+    "--spectrum-gray-200",
+    "--spectrum-gray-50",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",