fix: full update for css packages

Author: castastrophe

packages/action-bar/package.json

@@ -65,7 +65,7 @@
         "@spectrum-web-components/popover": "1.4.0"
     },
     "devDependencies": {
-        "@spectrum-css/actionbar": "9.0.0-s2-foundations.16"
+        "@spectrum-css/actionbar": "10.1.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/action-bar/src/action-bar-overrides.css

@@ -12,62 +12,10 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
-    --spectrum-actionbar-height: var(--system-action-bar-height);
-    --spectrum-actionbar-corner-radius: var(--system-action-bar-corner-radius);
-    --spectrum-actionbar-item-counter-font-size: var(
-        --system-action-bar-item-counter-font-size
-    );
-    --spectrum-actionbar-item-counter-line-height: var(
-        --system-action-bar-item-counter-line-height
-    );
-    --spectrum-actionbar-item-counter-color: var(
-        --system-action-bar-item-counter-color
-    );
-    --spectrum-actionbar-item-counter-line-height-cjk: var(
-        --system-action-bar-item-counter-line-height-cjk
-    );
     --spectrum-actionbar-popover-background-color: var(
         --system-action-bar-popover-background-color
     );
     --spectrum-actionbar-popover-border-color: var(
         --system-action-bar-popover-border-color
     );
-    --spectrum-actionbar-emphasized-background-color: var(
-        --system-action-bar-emphasized-background-color
-    );
-    --spectrum-actionbar-emphasized-item-counter-color: var(
-        --system-action-bar-emphasized-item-counter-color
-    );
-    --spectrum-actionbar-spacing-outer-edge: var(
-        --system-action-bar-spacing-outer-edge
-    );
-    --spectrum-actionbar-spacing-close-button-top: var(
-        --system-action-bar-spacing-close-button-top
-    );
-    --spectrum-actionbar-spacing-close-button-start: var(
-        --system-action-bar-spacing-close-button-start
-    );
-    --spectrum-actionbar-spacing-close-button-end: var(
-        --system-action-bar-spacing-close-button-end
-    );
-    --spectrum-actionbar-spacing-item-counter-top: var(
-        --system-action-bar-spacing-item-counter-top
-    );
-    --spectrum-actionbar-spacing-item-counter-end: var(
-        --system-action-bar-spacing-item-counter-end
-    );
-    --spectrum-actionbar-spacing-action-group-top: var(
-        --system-action-bar-spacing-action-group-top
-    );
-    --spectrum-actionbar-spacing-action-group-end: var(
-        --system-action-bar-spacing-action-group-end
-    );
-    --spectrum-actionbar-shadow-horizontal: var(
-        --system-action-bar-shadow-horizontal
-    );
-    --spectrum-actionbar-shadow-vertical: var(
-        --system-action-bar-shadow-vertical
-    );
-    --spectrum-actionbar-shadow-blur: var(--system-action-bar-shadow-blur);
-    --spectrum-actionbar-shadow-color: var(--system-action-bar-shadow-color);
 }

packages/action-bar/src/spectrum-action-bar.css

@@ -11,6 +11,34 @@ governing permissions and limitations under the License.
 */
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+    --spectrum-actionbar-height: var(--spectrum-action-bar-height);
+    --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100);
+    --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100);
+    --spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100);
+    --spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default);
+    --spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default);
+    --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white);
+    --spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300);
+    --spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100);
+    --spectrum-actionbar-spacing-close-button-start: var(--spectrum-spacing-100);
+    --spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75);
+    --spectrum-actionbar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter);
+    --spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400);
+    --spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100);
+    --spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100);
+    --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x);
+    --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y);
+    --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur);
+    --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color);
+}
+
+:host:lang(ja),
+:host:lang(ko),
+:host:lang(zh) {
+    --spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100);
+}
+
 @media (forced-colors: active) {
     :host,
     :host([emphasized]) #popover {

packages/action-group/package.json

@@ -65,7 +65,7 @@
         "@spectrum-web-components/reactive-controllers": "1.4.0"
     },
     "devDependencies": {
-        "@spectrum-css/actiongroup": "6.0.0-s2-foundations.17"
+        "@spectrum-css/actiongroup": "6.1.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/action-menu/package.json

@@ -69,7 +69,7 @@
         "@spectrum-web-components/shared": "1.4.0"
     },
     "devDependencies": {
-        "@spectrum-css/actionmenu": "7.0.0-s2-foundations.15"
+        "@spectrum-css/actionmenu": "7.1.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/alert-banner/package.json

@@ -63,7 +63,7 @@
         "@spectrum-web-components/icons-workflow": "1.4.0"
     },
     "devDependencies": {
-        "@spectrum-css/alertbanner": "3.0.0-s2-foundations.16"
+        "@spectrum-css/alertbanner": "3.1.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/alert-banner/src/alert-banner-overrides.css

@@ -15,31 +15,4 @@ governing permissions and limitations under the License.
     --spectrum-alert-banner-neutral-background: var(
         --system-alert-banner-neutral-background
     );
-    --spectrum-alert-banner-min-height: var(--system-alert-banner-min-height);
-    --spectrum-alert-banner-max-inline-size: var(
-        --system-alert-banner-max-inline-size
-    );
-    --spectrum-alert-banner-size: var(--system-alert-banner-size);
-    --spectrum-alert-banner-font-size: var(--system-alert-banner-font-size);
-    --spectrum-alert-banner-icon-size: var(--system-alert-banner-icon-size);
-    --spectrum-alert-banner-icon-to-text: var(
-        --system-alert-banner-icon-to-text
-    );
-    --spectrum-alert-banner-start-edge: var(--system-alert-banner-start-edge);
-    --spectrum-alert-banner-text-to-button-horizontal: var(
-        --system-alert-banner-text-to-button-horizontal
-    );
-    --spectrum-alert-banner-text-to-divider: var(
-        --system-alert-banner-text-to-divider
-    );
-    --spectrum-alert-banner-top-icon: var(--system-alert-banner-top-icon);
-    --spectrum-alert-banner-top-text: var(--system-alert-banner-top-text);
-    --spectrum-alert-banner-bottom-text: var(--system-alert-banner-bottom-text);
-    --spectrum-alert-banner-informative-background: var(
-        --system-alert-banner-informative-background
-    );
-    --spectrum-alert-banner-negative-background: var(
-        --system-alert-banner-negative-background
-    );
-    --spectrum-alert-banner-font-color: var(--system-alert-banner-font-color);
 }

packages/alert-banner/src/spectrum-alert-banner.css

@@ -12,6 +12,21 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
+    --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
+    --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
+    --spectrum-alert-banner-size: auto;
+    --spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
+    --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
+    --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
+    --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300);
+    --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
+    --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300);
+    --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
+    --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text);
+    --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
+    --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default);
+    --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default);
+    --spectrum-alert-banner-font-color: var(--spectrum-white);
     --mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider));
     --mod-divider-vertical-height: auto;
     --mod-divider-vertical-align: stretch;
@@ -21,12 +36,13 @@ governing permissions and limitations under the License.
     --mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
     --mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
     --mod-closebutton-align-self: flex-start;
+    inline-size: auto;
     inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
     max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size));
     min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
     font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
     color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
-    background-color: var(--mod-alert-banner-neutral-background, var(--mod-alert-banner-neutral-background, var(--spectrum-alert-banner-neutral-background)));
+    background-color: var(--mod-alert-banner-neutral-background, var(--spectrum-alert-banner-neutral-background));
     border: 0 solid #0000;
     border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
     justify-content: space-between;

packages/avatar/package.json

@@ -62,7 +62,7 @@
         "@spectrum-web-components/shared": "1.4.0"
     },
     "devDependencies": {
-        "@spectrum-css/avatar": "8.0.0-s2-foundations.15"
+        "@spectrum-css/avatar": "9.1.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/avatar/src/avatar-overrides.css

@@ -11,65 +11,3 @@ governing permissions and limitations under the License.
 */
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host {
-    --spectrum-avatar-color-opacity: var(--system-avatar-color-opacity);
-    --spectrum-avatar-inline-size: var(--system-avatar-inline-size);
-    --spectrum-avatar-block-size: var(--system-avatar-block-size);
-    --spectrum-avatar-focus-indicator-thickness: var(
-        --system-avatar-focus-indicator-thickness
-    );
-    --spectrum-avatar-focus-indicator-gap: var(
-        --system-avatar-focus-indicator-gap
-    );
-    --spectrum-avatar-focus-indicator-color: var(
-        --system-avatar-focus-indicator-color
-    );
-    --spectrum-avatar-color-opacity-disabled: var(
-        --system-avatar-color-opacity-disabled
-    );
-}
-
-:host([size='50']) {
-    --spectrum-avatar-inline-size: var(--system-avatar-size-50-inline-size);
-    --spectrum-avatar-block-size: var(--system-avatar-size-50-block-size);
-}
-
-:host([size='75']) {
-    --spectrum-avatar-inline-size: var(--system-avatar-size-75-inline-size);
-    --spectrum-avatar-block-size: var(--system-avatar-size-75-block-size);
-}
-
-:host([size='100']) {
-    --spectrum-avatar-inline-size: var(--system-avatar-size-100-inline-size);
-    --spectrum-avatar-block-size: var(--system-avatar-size-100-block-size);
-}
-
-:host([size='200']) {
-    --spectrum-avatar-inline-size: var(--system-avatar-size-200-inline-size);
-    --spectrum-avatar-block-size: var(--system-avatar-size-200-block-size);
-}
-
-:host([size='300']) {
-    --spectrum-avatar-inline-size: var(--system-avatar-size-300-inline-size);
-    --spectrum-avatar-block-size: var(--system-avatar-size-300-block-size);
-}
-
-:host([size='400']) {
-    --spectrum-avatar-inline-size: var(--system-avatar-size-400-inline-size);
-    --spectrum-avatar-block-size: var(--system-avatar-size-400-block-size);
-}
-
-:host([size='500']) {
-    --spectrum-avatar-inline-size: var(--system-avatar-size-500-inline-size);
-    --spectrum-avatar-block-size: var(--system-avatar-size-500-block-size);
-}
-
-:host([size='600']) {
-    --spectrum-avatar-inline-size: var(--system-avatar-size-600-inline-size);
-    --spectrum-avatar-block-size: var(--system-avatar-size-600-block-size);
-}
-
-:host([size='700']) {
-    --spectrum-avatar-inline-size: var(--system-avatar-size-700-inline-size);
-    --spectrum-avatar-block-size: var(--system-avatar-size-700-block-size);
-}