From 10cafaa0923619b2bbb372e593c6e2eaa536bdf3 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 3 Jan 2025 09:35:33 -0500 Subject: [PATCH 1/6] fix(search): restore missing custom properties Restore missing properties from foundations, most of which were flagged by the linter. --- components/search/index.css | 11 +++++++++++ components/search/metadata/metadata.json | 9 +++++++++ 2 files changed, 20 insertions(+) diff --git a/components/search/index.css b/components/search/index.css index c8ccba1c80d..9550e136cc5 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 1b29b3e2e84..b8215b90a5b 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", From d51dfc1c1264d1bf43d51073da716826875eb8c7 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 3 Jan 2025 10:10:55 -0500 Subject: [PATCH 2/6] fix(colorwheel): restore missing custom properties Restore missing properties from foundations that were flagged by the linter. --- components/colorwheel/index.css | 1 + components/colorwheel/metadata/metadata.json | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index f2c46e65c58..5565fe9d88c 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 019173bc243..07c9f09723f 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": [ From da51817b777a1489eb041cdfbae35dabfe73cfeb Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 3 Jan 2025 10:18:43 -0500 Subject: [PATCH 3/6] fix(assetcard): restore missing custom properties Restore missing properties from foundations that were flagged by the linter. --- components/assetcard/index.css | 5 ++++- components/assetcard/metadata/metadata.json | 6 +++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/components/assetcard/index.css b/components/assetcard/index.css index b4019a006e9..61ce2cb0e03 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 6ac86fbf6d4..59eacc85a26 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": [], From c8cded2a39016ec94959de9bdd8443cea32896aa Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 3 Jan 2025 10:39:11 -0500 Subject: [PATCH 4/6] fix(treeview): restore missing custom properties Restore missing properties from foundations that were flagged by the linter. --- components/treeview/index.css | 3 +++ components/treeview/metadata/metadata.json | 1 + 2 files changed, 4 insertions(+) diff --git a/components/treeview/index.css b/components/treeview/index.css index 66cb0d9306e..7f47ddbbc4d 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 235caaba64d..7456a1853f8 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", From 733175e7fdc8fe30d981bad0957965d5b0f304c4 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 3 Jan 2025 10:59:39 -0500 Subject: [PATCH 5/6] 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. --- components/combobox/index.css | 21 ++++++++------------- components/combobox/metadata/metadata.json | 4 ++++ 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/components/combobox/index.css b/components/combobox/index.css index f06081b717e..c96fb576eb5 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 9e0b467d34b..ffb9fd0036b 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", From d8f691da1f97ce94afc97e721a881a0b57e7f370 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 3 Jan 2025 14:00:22 -0500 Subject: [PATCH 6/6] chore: add changeset for linter fixes --- .changeset/healthy-zebras-unite.md | 9 +++++++++ 1 file changed, 9 insertions(+) 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 00000000000..dc90d1b9b1e --- /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.