fix(textfield,menu,tag,toast,tabs,well,popover): define custom props (#3471)

* fix(popover): define --spectrum-popover-border-width in index.css
* fix(well): define --spectrum-well-border-color in index.css
* fix(tabs): define --spectrum-tabs-font-weight
* fix(toast): define default background color and divider color
* fix(tag): define undefined custom properties
* fix(menu): define menu item background colors
* fix(textfield): define undefined custom properties

Author: rise-erpelding

.changeset/ten-lizards-work.md

@@ -0,0 +1,11 @@
+---
+"@spectrum-css/textfield": patch
+"@spectrum-css/popover": patch
+"@spectrum-css/toast": patch
+"@spectrum-css/menu": patch
+"@spectrum-css/tabs": patch
+"@spectrum-css/well": patch
+"@spectrum-css/tag": patch
+---
+
+Define undefined custom properties from themes directory.

components/menu/dist/metadata.json

@@ -342,6 +342,7 @@
     "--spectrum-font-size-300",
     "--spectrum-font-size-50",
     "--spectrum-font-size-75",
+    "--spectrum-gray-1000-rgb",
     "--spectrum-gray-900",
     "--spectrum-line-height-100",
     "--spectrum-navigational-indicator-top-to-back-icon-extra-large",
@@ -366,6 +367,7 @@
     "--spectrum-text-to-visual-200",
     "--spectrum-text-to-visual-300",
     "--spectrum-text-to-visual-75",
+    "--spectrum-transparent-black-200-opacity",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-300",

components/menu/index.css

@@ -79,6 +79,10 @@
 }
 
 .spectrum-Menu {
+	--spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+	--spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+	--spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+
 	--spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
 	--spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
 

components/popover/dist/metadata.json

@@ -139,6 +139,7 @@
     "--spectrum-animation-duration-0",
     "--spectrum-animation-duration-100",
     "--spectrum-background-layer-2-color",
+    "--spectrum-border-width-100",
     "--spectrum-corner-radius-100",
     "--spectrum-drop-shadow-blur",
     "--spectrum-drop-shadow-color",

components/popover/index.css

@@ -19,6 +19,8 @@
 	--spectrum-popover-background-color: var(--spectrum-background-layer-2-color);
 	--spectrum-popover-border-color: var(--spectrum-gray-400);
 
+	--spectrum-popover-border-width: var(--spectrum-border-width-100);
+
 	/* popover inner padding */
 	--spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area);
 

components/tabs/dist/metadata.json

@@ -151,6 +151,7 @@
     "--spectrum-neutral-subdued-content-color-down",
     "--spectrum-neutral-subdued-content-color-hover",
     "--spectrum-neutral-subdued-content-color-key-focus",
+    "--spectrum-regular-font-weight",
     "--spectrum-sans-font-family-stack",
     "--spectrum-tab-item-bottom-to-text-extra-large",
     "--spectrum-tab-item-bottom-to-text-large",

components/tabs/index.css

@@ -34,6 +34,7 @@
 	--spectrum-tabs-font-style: var(--spectrum-default-font-style);
 	--spectrum-tabs-font-size: var(--spectrum-font-size-100);
 	--spectrum-tabs-line-height: var(--spectrum-line-height-100);
+	--spectrum-tabs-font-weight: var(--spectrum-regular-font-weight);
 
 	/* Focus Indicator */
 	--spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness);

components/tag/dist/metadata.json

@@ -216,6 +216,12 @@
     "--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",
@@ -225,14 +231,21 @@
     "--spectrum-component-top-to-workflow-icon-100",
     "--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",
     "--spectrum-focus-indicator-thickness",
     "--spectrum-font-size-100",
     "--spectrum-font-size-200",
     "--spectrum-font-size-75",
+    "--spectrum-gray-100",
     "--spectrum-gray-25",
+    "--spectrum-gray-50",
+    "--spectrum-gray-700",
+    "--spectrum-gray-800",
+    "--spectrum-gray-900",
     "--spectrum-line-height-100",
     "--spectrum-negative-background-color-default",
     "--spectrum-negative-background-color-down",
@@ -249,6 +262,14 @@
     "--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",
+    "--spectrum-neutral-subdued-content-color-key-focus",
     "--spectrum-regular-font-weight",
     "--spectrum-text-to-visual-100",
     "--spectrum-text-to-visual-200",

components/tag/index.css

@@ -18,6 +18,29 @@
 	--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);
+
 	/* focus ring */
 	--spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
 	--spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap);
@@ -33,6 +56,10 @@
 	--spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
 	--spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down);
 	--spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
+	--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);
 
 	/* invalid variant */
 	--spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900);
@@ -74,6 +101,8 @@
 
 	/* disabled variant content */
 	--spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color);
+	--spectrum-tag-border-color-disabled: transparent;
+	--spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color);
 
 	--spectrum-tag-height: var(--spectrum-component-height-100);
 	--spectrum-tag-font-size: var(--spectrum-font-size-100);
@@ -97,6 +126,16 @@
 	--spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start);
 	--spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end);
 	--spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end);
+
+	--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);
 }
 
 /* t-shirt sizes */

components/textfield/dist/metadata.json

@@ -226,6 +226,7 @@
   ],
   "global": [
     "--spectrum-animation-duration-100",
+    "--spectrum-border-width-100",
     "--spectrum-character-count-to-field-quiet-extra-large",
     "--spectrum-character-count-to-field-quiet-large",
     "--spectrum-character-count-to-field-quiet-medium",
@@ -290,6 +291,10 @@
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
     "--spectrum-gray-25",
+    "--spectrum-gray-500",
+    "--spectrum-gray-600",
+    "--spectrum-gray-800",
+    "--spectrum-gray-900",
     "--spectrum-help-text-to-component",
     "--spectrum-negative-border-color-default",
     "--spectrum-negative-border-color-focus",

components/textfield/index.css

@@ -20,6 +20,14 @@
 	--spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier);
 	--spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100);
 
+	--spectrum-textfield-border-color: var(--spectrum-gray-500);
+	--spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
+	--spectrum-textfield-border-color-focus: var(--spectrum-gray-800);
+	--spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900);
+	--spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
+
+	--spectrum-textfield-border-width: var(--spectrum-border-width-100);
+
 	/* default spacing */
 	--spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet);
 	--spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100);

components/toast/dist/metadata.json

@@ -90,11 +90,13 @@
     "--spectrum-informative-background-color-default",
     "--spectrum-line-height-100",
     "--spectrum-negative-background-color-default",
+    "--spectrum-neutral-subdued-background-color-default",
     "--spectrum-positive-background-color-default",
     "--spectrum-regular-font-weight",
     "--spectrum-spacing-100",
     "--spectrum-spacing-300",
     "--spectrum-text-to-visual-100",
+    "--spectrum-transparent-white-400",
     "--spectrum-white"
   ],
   "passthroughs": [],

components/toast/index.css

@@ -48,9 +48,11 @@
 	--spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
 
 	/* Color */
+	--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
 	--spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
 	--spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
 	--spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);
+	--spectrum-toast-divider-color: var(--spectrum-transparent-white-400);
 
 	--spectrum-toast-text-and-icon-color: var(--spectrum-white);
 }

components/well/dist/metadata.json

@@ -24,6 +24,7 @@
   "global": [
     "--spectrum-body-color",
     "--spectrum-border-width-100",
+    "--spectrum-gray-1000-rgb",
     "--spectrum-gray-800-rgb"
   ],
   "passthroughs": [],

components/well/index.css

@@ -13,6 +13,7 @@
 
 .spectrum-Well {
 	--spectrum-well-border-width: var(--spectrum-border-width-100);
+	--spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), .05);
 	--spectrum-well-content-color: var(--spectrum-body-color);
 	--spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02);