From ab2028af3bbcd2316b0da8a5d53c996477c7ab5b Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Mon, 6 Jan 2025 11:45:21 -0500 Subject: [PATCH] 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. --- .changeset/healthy-zebras-unite.md | 9 +++++++++ components/assetcard/index.css | 5 ++++- components/assetcard/metadata/metadata.json | 6 +++++- components/colorwheel/index.css | 1 + components/colorwheel/metadata/metadata.json | 3 ++- components/combobox/index.css | 21 ++++++++------------ components/combobox/metadata/metadata.json | 4 ++++ components/search/index.css | 11 ++++++++++ components/search/metadata/metadata.json | 9 +++++++++ components/treeview/index.css | 3 +++ components/treeview/metadata/metadata.json | 1 + 11 files changed, 57 insertions(+), 16 deletions(-) create mode 100644 .changeset/healthy-zebras-unite.md diff --git a/.changeset/healthy-zebras-unite.md b/.changeset/healthy-zebras-unite.md new file mode 100644 index 0000000000..dc90d1b9b1 --- /dev/null +++ b/.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. diff --git a/components/assetcard/index.css b/components/assetcard/index.css index b4019a006e..61ce2cb0e0 100644 --- a/components/assetcard/index.css +++ b/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); diff --git a/components/assetcard/metadata/metadata.json b/components/assetcard/metadata/metadata.json index 6ac86fbf6d..59eacc85a2 100644 --- a/components/assetcard/metadata/metadata.json +++ b/components/assetcard/metadata/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": [], diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index f2c46e65c5..5565fe9d88 100644 --- a/components/colorwheel/index.css +++ b/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)); diff --git a/components/colorwheel/metadata/metadata.json b/components/colorwheel/metadata/metadata.json index 019173bc24..07c9f09723 100644 --- a/components/colorwheel/metadata/metadata.json +++ b/components/colorwheel/metadata/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": [ diff --git a/components/combobox/index.css b/components/combobox/index.css index f06081b717..c96fb576eb 100644 --- a/components/combobox/index.css +++ b/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 { diff --git a/components/combobox/metadata/metadata.json b/components/combobox/metadata/metadata.json index 9e0b467d34..ffb9fd0036 100644 --- a/components/combobox/metadata/metadata.json +++ b/components/combobox/metadata/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", diff --git a/components/search/index.css b/components/search/index.css index c8ccba1c80..9550e136cc 100644 --- a/components/search/index.css +++ b/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) { diff --git a/components/search/metadata/metadata.json b/components/search/metadata/metadata.json index 1b29b3e2e8..b8215b90a5 100644 --- a/components/search/metadata/metadata.json +++ b/components/search/metadata/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", diff --git a/components/treeview/index.css b/components/treeview/index.css index 66cb0d9306..7f47ddbbc4 100644 --- a/components/treeview/index.css +++ b/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))); diff --git a/components/treeview/metadata/metadata.json b/components/treeview/metadata/metadata.json index 235caaba64..7456a1853f 100644 --- a/components/treeview/metadata/metadata.json +++ b/components/treeview/metadata/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",