fix: restore undefined custom properties [part 4] (#3473)

* fix(search): restore missing custom properties
* fix(colorwheel): restore missing custom properties
* fix(assetcard): restore missing custom properties
* fix(treeview): restore missing custom properties

Restore missing properties from foundations that were flagged
by the linter.

* fix(combobox): restore missing custom properties

Restore missing properties from foundations that were flagged
by the linter. Also removes a group of duplicate custom property
definitions that were flagged.

Author: jawinn

.changeset/healthy-zebras-unite.md

@@ -0,0 +1,9 @@
+---
+"@spectrum-css/colorwheel": patch
+"@spectrum-css/assetcard": patch
+"@spectrum-css/combobox": patch
+"@spectrum-css/treeview": patch
+"@spectrum-css/search": patch
+---
+
+Restores missing custom properties that were flagged by the linter. The missing properties were copied from the spectrum two theme files in the foundations branch. This clears up all linter errors and warnings for these components.

components/assetcard/dist/metadata.json

@@ -123,6 +123,8 @@
     "--spectrum-assetcard-header-content-text-color",
     "--spectrum-assetcard-header-margin-block-start",
     "--spectrum-assetcard-overlay-background-color",
+    "--spectrum-assetcard-overlay-background-color-opacity",
+    "--spectrum-assetcard-overlay-background-color-rgb",
     "--spectrum-assetcard-selectionindicator-background-color-default",
     "--spectrum-assetcard-selectionindicator-background-color-ordered",
     "--spectrum-assetcard-selectionindicator-blur",
@@ -157,10 +159,11 @@
     "--spectrum-default-font-style",
     "--spectrum-focus-indicator-thickness",
     "--spectrum-font-size-400",
-    "--spectrum-gray-100",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
     "--spectrum-gray-700",
+    "--spectrum-gray-75",
+    "--spectrum-gray-75-rgb",
     "--spectrum-gray-900",
     "--spectrum-heading-cjk-font-style",
     "--spectrum-heading-cjk-font-weight",
@@ -172,6 +175,7 @@
     "--spectrum-sans-font-family-stack",
     "--spectrum-spacing-300",
     "--spectrum-spacing-75",
+    "--spectrum-transparent-black-300",
     "--spectrum-white"
   ],
   "passthroughs": [],

components/assetcard/index.css

@@ -15,7 +15,8 @@
 .spectrum-AssetCard {
 	/* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */
 	--spectrum-assetcard-asset-size: 224px;
-	--spectrum-assetcard-background-color: var(--spectrum-gray-100);
+	--spectrum-assetcard-background-color: var(--spectrum-gray-75);
+	--spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);
 	--spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100);
 	--spectrum-assetcard-asset-container-border-size: 1px;
 	--spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300);
@@ -36,6 +37,8 @@
 	--spectrum-assetcard-selectionindicator-color: var(--spectrum-white);
 	--spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400);
+	--spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9);
+	--spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300);
 
 	/* title */
 	--spectrum-assetcard-title-text-color: var(--spectrum-gray-900);

components/colorwheel/dist/metadata.json

@@ -47,7 +47,8 @@
   "global": [
     "--spectrum-border-width-100",
     "--spectrum-color-control-track-width",
-    "--spectrum-disabled-background-color"
+    "--spectrum-disabled-background-color",
+    "--spectrum-transparent-black-300"
   ],
   "passthroughs": [],
   "high-contrast": [

components/colorwheel/index.css

@@ -25,6 +25,7 @@
 	--spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width));
 	--spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width));
 	--spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color));
+	--spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300);
 
 	--spectrum-colorwheel-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100));
 	--spectrum-colorwheel-track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width));

components/combobox/dist/metadata.json

@@ -230,8 +230,12 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
+    "--spectrum-gray-25",
     "--spectrum-gray-50",
     "--spectrum-gray-500",
+    "--spectrum-gray-600",
+    "--spectrum-gray-800",
+    "--spectrum-gray-900",
     "--spectrum-line-height-100",
     "--spectrum-negative-border-color-default",
     "--spectrum-negative-border-color-focus",

components/combobox/index.css

@@ -40,6 +40,14 @@
 	--spectrum-combobox-font-style: var(--spectrum-default-font-style);
 	--spectrum-combobox-line-height: var(--spectrum-line-height-100);
 
+	--spectrum-combobox-background-color-disabled: var(--spectrum-gray-25);
+
+	--spectrum-combobox-border-color-default: var(--spectrum-gray-500);
+	--spectrum-combobox-border-color-hover: var(--spectrum-gray-600);
+	--spectrum-combobox-border-color-focus: var(--spectrum-gray-800);
+	--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900);
+	--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800);
+
 	--spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default);
 	--spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
 	--spectrum-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus);
@@ -96,19 +104,6 @@
 	--spectrum-combobox-readonly-background-color-disabled: var(--spectrum-disabled-background-color);
 	--spectrum-combobox-readonly-text-color-disabled: var(--spectrum-disabled-content-color);
 	--spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color);
-
-	--spectrum-combobox-block-size: var(--spectrum-component-height-100);
-	--spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100);
-	--spectrum-combobox-font-size: var(--spectrum-font-size-100);
-
-	--spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium);
-	--spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium);
-	--spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium);
-	--spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium);
-	--spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100);
-	--spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100);
-	--spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100);
-	--spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100);
 }
 
 .spectrum-Combobox--sizeS {

components/search/dist/metadata.json

@@ -103,11 +103,16 @@
   "global": [
     "--spectrum-border-width-100",
     "--spectrum-component-bottom-to-text-100",
+    "--spectrum-component-edge-to-visual-100",
+    "--spectrum-component-edge-to-visual-200",
+    "--spectrum-component-edge-to-visual-300",
+    "--spectrum-component-edge-to-visual-75",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
     "--spectrum-component-top-to-text-100",
+    "--spectrum-corner-radius-100",
     "--spectrum-default-font-style",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
@@ -118,6 +123,10 @@
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
     "--spectrum-gray-25",
+    "--spectrum-gray-500",
+    "--spectrum-gray-600",
+    "--spectrum-gray-800",
+    "--spectrum-gray-900",
     "--spectrum-help-text-to-component",
     "--spectrum-line-height-100",
     "--spectrum-neutral-content-color-default",

components/search/index.css

@@ -23,6 +23,8 @@
 	--spectrum-search-to-help-text: var(--spectrum-help-text-to-component);
 	--spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100);
 	--spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+	--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+	--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
 
 	/* Focus Indicator */
 	--spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
@@ -41,6 +43,12 @@
 	--spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
 	--spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
 
+	--spectrum-search-border-color-default: var(--spectrum-gray-500);
+	--spectrum-search-border-color-hover: var(--spectrum-gray-600);
+	--spectrum-search-border-color-focus: var(--spectrum-gray-800);
+	--spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
+	--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
+
 	/* Background and Border */
 	--spectrum-search-border-width: var(--spectrum-border-width-100);
 	--spectrum-search-background-color: var(--spectrum-gray-25);
@@ -93,18 +101,21 @@
 	--spectrum-search-block-size: var(--spectrum-component-height-75);
 	--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75);
 	--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75);
+	--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
 }
 
 .spectrum-Search--sizeL {
 	--spectrum-search-block-size: var(--spectrum-component-height-200);
 	--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200);
 	--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200);
+	--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
 }
 
 .spectrum-Search--sizeXL {
 	--spectrum-search-block-size: var(--spectrum-component-height-300);
 	--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300);
 	--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300);
+	--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
 }
 
 @media (forced-colors: active) {

components/treeview/dist/metadata.json

@@ -157,6 +157,7 @@
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
+    "--spectrum-gray-100",
     "--spectrum-gray-500",
     "--spectrum-gray-700",
     "--spectrum-gray-900",

components/treeview/index.css

@@ -66,6 +66,9 @@
 
 	--spectrum-treeview-item-border-color-quiet-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent));
 
+	--spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100);
+	--spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100);
+
 	--spectrum-treeview-item-icon-gap: var(--mod-treeview-item-icon-gap, var(--spectrum-text-to-visual-75));
 	--spectrum-treeview-item-icon-color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-gray-700)));
 	--spectrum-treeview-item-icon-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-gray-900)));