fix: update dependency @spectrum-css/closebutton to v6.1.0 (#5338)

* chore: update dependency @spectrum-css/closebutton to v6.1.0

* fix(close-button,styles): use latest CSS

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: [ Cassondra ] <[email protected]>
Co-authored-by: Casey Eickhoff <[email protected]>

Author: 3 people

.changeset/stale-candies-camp.md

@@ -1,4 +1,5 @@
 ---
+'@spectrum-web-components/close-button': patch
 '@spectrum-web-components/menu': patch
 '@spectrum-web-components/styles': patch
 '@spectrum-web-components/switch': patch

packages/close-button/package.json

@@ -52,7 +52,7 @@
         "@spectrum-web-components/base": "1.5.0"
     },
     "devDependencies": {
-        "@spectrum-css/closebutton": "6.0.0-s2-foundations.16"
+        "@spectrum-css/closebutton": "6.1.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/close-button/src/close-button-overrides.css

@@ -24,40 +24,9 @@ governing permissions and limitations under the License.
     --spectrum-closebutton-background-color-focus: var(
         --system-close-button-background-color-focus
     );
-    --spectrum-closebutton-icon-color-default: var(
-        --system-close-button-icon-color-default
-    );
-    --spectrum-closebutton-icon-color-hover: var(
-        --system-close-button-icon-color-hover
-    );
-    --spectrum-closebutton-icon-color-down: var(
-        --system-close-button-icon-color-down
-    );
-    --spectrum-closebutton-icon-color-focus: var(
-        --system-close-button-icon-color-focus
-    );
-    --spectrum-closebutton-icon-color-disabled: var(
-        --system-close-button-icon-color-disabled
-    );
-    --spectrum-closebutton-focus-indicator-thickness: var(
-        --system-close-button-focus-indicator-thickness
-    );
-    --spectrum-closebutton-focus-indicator-gap: var(
-        --system-close-button-focus-indicator-gap
-    );
-    --spectrum-closebutton-focus-indicator-color: var(
-        --system-close-button-focus-indicator-color
-    );
-    --spectrum-closebutton-animation-duration: var(
-        --system-close-button-animation-duration
-    );
-    --spectrum-closebutton-size: var(--system-close-button-size);
 }
 
 :host([static-color='white']) {
-    --spectrum-closebutton-static-background-color-default: var(
-        --system-close-button-static-white-static-background-color-default
-    );
     --spectrum-closebutton-static-background-color-hover: var(
         --system-close-button-static-white-static-background-color-hover
     );
@@ -67,21 +36,9 @@ governing permissions and limitations under the License.
     --spectrum-closebutton-static-background-color-focus: var(
         --system-close-button-static-white-static-background-color-focus
     );
-    --spectrum-closebutton-icon-color-default: var(
-        --system-close-button-static-white-icon-color-default
-    );
-    --spectrum-closebutton-icon-color-disabled: var(
-        --system-close-button-static-white-icon-color-disabled
-    );
-    --spectrum-closebutton-focus-indicator-color: var(
-        --system-close-button-static-white-focus-indicator-color
-    );
 }
 
 :host([static-color='black']) {
-    --spectrum-closebutton-static-background-color-default: var(
-        --system-close-button-static-black-static-background-color-default
-    );
     --spectrum-closebutton-static-background-color-hover: var(
         --system-close-button-static-black-static-background-color-hover
     );
@@ -91,29 +48,4 @@ governing permissions and limitations under the License.
     --spectrum-closebutton-static-background-color-focus: var(
         --system-close-button-static-black-static-background-color-focus
     );
-    --spectrum-closebutton-icon-color-default: var(
-        --system-close-button-static-black-icon-color-default
-    );
-    --spectrum-closebutton-icon-color-disabled: var(
-        --system-close-button-static-black-icon-color-disabled
-    );
-    --spectrum-closebutton-focus-indicator-color: var(
-        --system-close-button-static-black-focus-indicator-color
-    );
-}
-
-:host([size='s']) {
-    --spectrum-closebutton-size: var(--system-close-button-size-s-size);
-}
-
-:host {
-    --spectrum-closebutton-size: var(--system-close-button-size-m-size);
-}
-
-:host([size='l']) {
-    --spectrum-closebutton-size: var(--system-close-button-size-l-size);
-}
-
-:host([size='xl']) {
-    --spectrum-closebutton-size: var(--system-close-button-size-xl-size);
 }

packages/close-button/src/spectrum-close-button.css

@@ -82,10 +82,19 @@ governing permissions and limitations under the License.
 }
 
 :host {
+    --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default);
+    --spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
+    --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color);
+    --spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+    --spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
+    --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);
     block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size));
-    inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-size));
+    inline-size: var(--mod-closebutton-width, var(--mod-closebutton-height, var(--spectrum-closebutton-size)));
     color: inherit;
-    border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-size));
+    border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius));
     transition: border-color var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;
     margin-inline: var(--mod-closebutton-margin-inline);
     justify-content: center;
@@ -100,6 +109,41 @@ governing permissions and limitations under the License.
     position: relative;
 }
 
+:host([size='s']) {
+    --spectrum-closebutton-size: var(--spectrum-component-height-75);
+    --spectrum-closebutton-border-radius: var(--spectrum-component-height-75);
+}
+
+:host,
+:host {
+    --spectrum-closebutton-size: var(--spectrum-component-height-100);
+    --spectrum-closebutton-border-radius: var(--spectrum-component-height-100);
+}
+
+:host([size='l']) {
+    --spectrum-closebutton-size: var(--spectrum-component-height-200);
+    --spectrum-closebutton-border-radius: var(--spectrum-component-height-200);
+}
+
+:host([size='xl']) {
+    --spectrum-closebutton-size: var(--spectrum-component-height-300);
+    --spectrum-closebutton-border-radius: var(--spectrum-component-height-300);
+}
+
+:host([static-color='white']) {
+    --spectrum-closebutton-static-background-color-default: transparent;
+    --spectrum-closebutton-icon-color-default: var(--spectrum-white);
+    --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
+    --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+}
+
+:host([static-color='black']) {
+    --spectrum-closebutton-static-background-color-default: transparent;
+    --spectrum-closebutton-icon-color-default: var(--spectrum-black);
+    --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color);
+    --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+}
+
 :host:after {
     pointer-events: none;
     content: '';
@@ -175,7 +219,7 @@ governing permissions and limitations under the License.
 
     :host([static-color='black']:not([disabled]):hover),
     :host([static-color='white']:not([disabled]):hover) {
-        background-color: var(--highcontrast-closebutton-static-background-color-hover, var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover)));
+        background-color: var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover));
     }
 
     :host([static-color='black']:not([disabled]):hover) .icon,
@@ -186,7 +230,7 @@ governing permissions and limitations under the License.
 
 :host([static-color='black']:not([disabled]):is(:active, [active])),
 :host([static-color='white']:not([disabled]):is(:active, [active])) {
-    background-color: var(--highcontrast-closebutton-static-background-color-down, var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down)));
+    background-color: var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down));
 }
 
 :host([static-color='black']:not([disabled]):is(:active, [active])) .icon,
@@ -198,7 +242,7 @@ governing permissions and limitations under the License.
 :host([static-color='black']:not([disabled]):focus-visible),
 :host([static-color='white'][focused]:not([disabled])),
 :host([static-color='white']:not([disabled]):focus-visible) {
-    background-color: var(--highcontrast-closebutton-static-background-color-focus, var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus)));
+    background-color: var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus));
 }
 
 :host([static-color='black'][focused]:not([disabled])) .icon,
@@ -219,7 +263,7 @@ governing permissions and limitations under the License.
 
 :host([static-color='black'][disabled]) .icon,
 :host([static-color='white'][disabled]) .icon {
-    color: var(--highcontrast-closebutton-icon-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
+    color: var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled));
 }
 
 .icon {

tools/styles/tokens-v2/system-theme-bridge.css

@@ -498,34 +498,6 @@
     --system-close-button-background-color-hover: var(--spectrum-gray-100);
     --system-close-button-background-color-down: var(--spectrum-gray-200);
     --system-close-button-background-color-focus: var(--spectrum-gray-100);
-    --system-close-button-icon-color-default: var(
-        --spectrum-neutral-content-color-default
-    );
-    --system-close-button-icon-color-hover: var(
-        --spectrum-neutral-content-color-hover
-    );
-    --system-close-button-icon-color-down: var(
-        --spectrum-neutral-content-color-down
-    );
-    --system-close-button-icon-color-focus: var(
-        --spectrum-neutral-content-color-key-focus
-    );
-    --system-close-button-icon-color-disabled: var(
-        --spectrum-disabled-content-color
-    );
-    --system-close-button-focus-indicator-thickness: var(
-        --spectrum-focus-indicator-thickness
-    );
-    --system-close-button-focus-indicator-gap: var(
-        --spectrum-focus-indicator-gap
-    );
-    --system-close-button-focus-indicator-color: var(
-        --spectrum-focus-indicator-color
-    );
-    --system-close-button-animation-duration: var(
-        --spectrum-animation-duration-100
-    );
-    --system-close-button-static-white-static-background-color-default: transparent;
     --system-close-button-static-white-static-background-color-hover: var(
         --spectrum-transparent-white-400
     );
@@ -535,16 +507,6 @@
     --system-close-button-static-white-static-background-color-focus: var(
         --spectrum-transparent-white-400
     );
-    --system-close-button-static-white-icon-color-default: var(
-        --spectrum-white
-    );
-    --system-close-button-static-white-icon-color-disabled: var(
-        --spectrum-disabled-static-white-content-color
-    );
-    --system-close-button-static-white-focus-indicator-color: var(
-        --spectrum-static-white-focus-indicator-color
-    );
-    --system-close-button-static-black-static-background-color-default: transparent;
     --system-close-button-static-black-static-background-color-hover: var(
         --spectrum-transparent-black-400
     );
@@ -554,20 +516,6 @@
     --system-close-button-static-black-static-background-color-focus: var(
         --spectrum-transparent-black-400
     );
-    --system-close-button-static-black-icon-color-default: var(
-        --spectrum-black
-    );
-    --system-close-button-static-black-icon-color-disabled: var(
-        --spectrum-disabled-static-black-content-color
-    );
-    --system-close-button-static-black-focus-indicator-color: var(
-        --spectrum-static-black-focus-indicator-color
-    );
-    --system-close-button-size-s-size: var(--spectrum-component-height-75);
-    --system-close-button-size: var(--spectrum-component-height-100);
-    --system-close-button-size-m-size: var(--spectrum-component-height-100);
-    --system-close-button-size-l-size: var(--spectrum-component-height-200);
-    --system-close-button-size-xl-size: var(--spectrum-component-height-300);
     --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
     --system-coach-indicator-min-inline-size: calc(
         var(--spectrum-coach-indicator-ring-diameter) * 3

tools/styles/tokens/express/system-theme-bridge.css

@@ -505,34 +505,6 @@
     --system-close-button-background-color-hover: var(--spectrum-gray-300);
     --system-close-button-background-color-down: var(--spectrum-gray-400);
     --system-close-button-background-color-focus: var(--spectrum-gray-300);
-    --system-close-button-icon-color-default: var(
-        --spectrum-neutral-content-color-default
-    );
-    --system-close-button-icon-color-hover: var(
-        --spectrum-neutral-content-color-hover
-    );
-    --system-close-button-icon-color-down: var(
-        --spectrum-neutral-content-color-down
-    );
-    --system-close-button-icon-color-focus: var(
-        --spectrum-neutral-content-color-key-focus
-    );
-    --system-close-button-icon-color-disabled: var(
-        --spectrum-disabled-content-color
-    );
-    --system-close-button-focus-indicator-thickness: var(
-        --spectrum-focus-indicator-thickness
-    );
-    --system-close-button-focus-indicator-gap: var(
-        --spectrum-focus-indicator-gap
-    );
-    --system-close-button-focus-indicator-color: var(
-        --spectrum-focus-indicator-color
-    );
-    --system-close-button-animation-duration: var(
-        --spectrum-animation-duration-100
-    );
-    --system-close-button-static-white-static-background-color-default: transparent;
     --system-close-button-static-white-static-background-color-hover: var(
         --spectrum-transparent-white-300
     );
@@ -542,16 +514,6 @@
     --system-close-button-static-white-static-background-color-focus: var(
         --spectrum-transparent-white-300
     );
-    --system-close-button-static-white-icon-color-default: var(
-        --spectrum-white
-    );
-    --system-close-button-static-white-icon-color-disabled: var(
-        --spectrum-disabled-static-white-content-color
-    );
-    --system-close-button-static-white-focus-indicator-color: var(
-        --spectrum-static-white-focus-indicator-color
-    );
-    --system-close-button-static-black-static-background-color-default: transparent;
     --system-close-button-static-black-static-background-color-hover: var(
         --spectrum-transparent-black-300
     );
@@ -561,20 +523,6 @@
     --system-close-button-static-black-static-background-color-focus: var(
         --spectrum-transparent-black-300
     );
-    --system-close-button-static-black-icon-color-default: var(
-        --spectrum-black
-    );
-    --system-close-button-static-black-icon-color-disabled: var(
-        --spectrum-disabled-static-black-content-color
-    );
-    --system-close-button-static-black-focus-indicator-color: var(
-        --spectrum-static-black-focus-indicator-color
-    );
-    --system-close-button-size-s-size: var(--spectrum-component-height-75);
-    --system-close-button-size: var(--spectrum-component-height-100);
-    --system-close-button-size-m-size: var(--spectrum-component-height-100);
-    --system-close-button-size-l-size: var(--spectrum-component-height-200);
-    --system-close-button-size-xl-size: var(--spectrum-component-height-300);
     --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
     --system-coach-indicator-min-inline-size: calc(
         var(--spectrum-coach-indicator-ring-diameter) * 3