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/index.css

@@ -20,6 +20,8 @@
 
 	/* 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-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);
@@ -40,6 +42,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/index.css

@@ -27,6 +27,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/index.css

@@ -49,6 +49,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);

components/search/index.css

@@ -49,6 +49,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);
@@ -67,6 +69,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);
 
@@ -118,18 +126,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/index.css

@@ -56,6 +56,35 @@
 	--spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100);
 	--spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100);
 
+	--spectrum-treeview-item-border-size: var(--mod-treeview-item-border-size, var(--spectrum-border-width-200));
+	--spectrum-treeview-item-border-size-selected: var(--mod-treeview-item-border-size-selected, 1px);
+	--spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius, 0px);
+
+	--spectrum-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-blue-800)));
+	--spectrum-treeview-item-border-color-focus: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-blue-700)));
+
+	--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)));
+	--spectrum-treeview-item-icon-color-focus: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-gray-900)));
+	--spectrum-treeview-item-icon-color-selected: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-gray-900)));
+	--spectrum-treeview-item-icon-color-disabled: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color)));
+
+	--spectrum-treeview-item-text-color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-neutral-content-color-default)));
+	--spectrum-treeview-item-text-color-selected: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-gray-900)));
+	--spectrum-treeview-item-text-color-disabled: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-gray-500)));
+	--spectrum-treeview-item-text-color-focus: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-gray-900)));
+	--spectrum-treeview-item-text-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-gray-900)));
+
+	--spectrum-treeview-indicator-animation-duration: var(--mod-treeview-indicator-animation-duration, var(--spectrum-animation-duration-100));
+
+	--spectrum-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-sized-min-block-size));
+
 	--spectrum-treeview-font-size: var(--mod-treeview-font-size, var(--spectrum-font-size-100));
 
 	--spectrum-treeview-item-sized-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-100));