chore(styles): use latest Spectrum CSS dependencies

tools/styles/package.json

@@ -107,11 +107,11 @@
         "@spectrum-web-components/base": "^0.31.0"
     },
     "devDependencies": {
-        "@spectrum-css/commons": "^4.0.2",
+        "@spectrum-css/commons": "^7.0.6",
         "@spectrum-css/expressvars": "^3.0.5",
-        "@spectrum-css/tokens": "^8.1.1",
-        "@spectrum-css/typography": "^5.0.9",
-        "@spectrum-css/vars": "^8.0.5"
+        "@spectrum-css/tokens": "^10.0.0",
+        "@spectrum-css/typography": "^5.0.17",
+        "@spectrum-css/vars": "^9.0.5"
     },
     "customElements": "custom-elements.json",
     "sideEffects": [

tools/styles/spectrum-core-global.css

@@ -1832,6 +1832,12 @@ governing permissions and limitations under the License.
     --spectrum-alias-ui-icon-asterisk-size-100: var(
         --spectrum-global-dimension-size-100
     );
+    --spectrum-alias-transparent-blue-background-color-hover: rgba(
+        0,
+        87,
+        190,
+        0.15
+    );
     --spectrum-alias-transparent-blue-background-color-down: rgba(
         0,
         72,

tools/styles/tokens/express/custom-dark-vars.css

@@ -1,17 +1,20 @@
-/*
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
+/*!
+ * Copyright 2023 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 
-/* This file contains overrides and additions to core tokens */
-
-.spectrum--express:host,
+:host,
 :root {
-    /* */
+    /* Drop Zone background color rgb */
+    --spectrum-drop-zone-background-color-rgb: var(
+        --spectrum-indigo-900-rgb
+    ); /* var(--spectrum-accent-color-900);*/
 }

tools/styles/tokens/express/custom-darkest-vars.css

@@ -1,17 +1,20 @@
-/*
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
+/*!
+ * Copyright 2023 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 
-/* This file contains overrides and additions to core tokens */
-
-.spectrum--express:host,
+:host,
 :root {
-    /* */
+    /* Drop Zone background color rgb */
+    --spectrum-drop-zone-background-color-rgb: var(
+        --spectrum-indigo-900-rgb
+    ); /* var(--spectrum-accent-color-900);*/
 }

tools/styles/tokens/express/custom-large-vars.css

@@ -15,9 +15,4 @@
 :root {
     --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0';
     --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0';
-
-    /* TODO: Remove once new tokens for colorhandle and colorloupe are released */
-    --spectrum-color-handle-outer-border-width: 1px;
-    --spectrum-color-handle-size-interim: 20px;
-    --spectrum-color-handle-size-key-focus-interim: 40px;
 }

tools/styles/tokens/express/custom-light-vars.css

@@ -1,16 +1,20 @@
-/*
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
+/*!
+ * Copyright 2023 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 
-/* This file contains overrides and additions to core tokens */
-
-.spectrum--express.spectrum--light {
-    /* */
+:host,
+:root {
+    /* Drop Zone background color rgb */
+    --spectrum-drop-zone-background-color-rgb: var(
+        --spectrum-indigo-800-rgb
+    ); /* var(--spectrum-accent-color-800);*/
 }

tools/styles/tokens/express/custom-medium-vars.css

@@ -15,9 +15,4 @@
 :root {
     --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0';
     --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0';
-
-    /* TODO: Remove once new tokens for colorhandle and colorloupe are released */
-    --spectrum-color-handle-outer-border-width: 1px;
-    --spectrum-color-handle-size-interim: 16px;
-    --spectrum-color-handle-size-key-focus-interim: 32px;
 }

tools/styles/tokens/express/global-vars.css

@@ -10,22 +10,11 @@
     --spectrum-neutral-background-color-selected-key-focus: var(
         --spectrum-gray-900
     );
-    --spectrum-color-handle-inner-border-opacity: 0.15;
     --spectrum-color-handle-drop-shadow-color: var(
         --spectrum-drop-shadow-color
     );
     --spectrum-slider-track-thickness: 4px;
     --spectrum-slider-handle-gap: 0px;
-    --spectrum-color-loupe-bottom-to-color-handle: 6px;
-    --spectrum-color-loupe-inner-border-width: 3px;
-    --spectrum-color-handle-outer-border-width: 0px;
-    --spectrum-color-handle-drop-shadow-x: var(--spectrum-drop-shadow-x);
-    --spectrum-color-handle-drop-shadow-y: var(
-        --spectrum-color-loupe-drop-shadow-y
-    );
-    --spectrum-color-handle-drop-shadow-blur: var(
-        --spectrum-color-loupe-drop-shadow-blur
-    );
     --spectrum-border-width-100: 2px;
     --spectrum-accent-color-100: var(--spectrum-indigo-100);
     --spectrum-accent-color-200: var(--spectrum-indigo-200);

tools/styles/tokens/express/large-vars.css

@@ -64,10 +64,6 @@ governing permissions and limitations under the License.
     --spectrum-slider-bottom-to-handle-medium: 8px;
     --spectrum-slider-bottom-to-handle-large: 12px;
     --spectrum-slider-bottom-to-handle-extra-large: 15px;
-    --spectrum-color-loupe-height: 50px;
-    --spectrum-color-loupe-width: 40px;
-    --spectrum-color-handle-size: 24px;
-    --spectrum-color-handle-size-key-focus: 48px;
     --spectrum-corner-radius-75: 4px;
     --spectrum-corner-radius-100: 8px;
     --spectrum-corner-radius-200: 16px;

tools/styles/tokens/express/medium-vars.css

@@ -64,10 +64,6 @@ governing permissions and limitations under the License.
     --spectrum-slider-bottom-to-handle-medium: 6px;
     --spectrum-slider-bottom-to-handle-large: 9px;
     --spectrum-slider-bottom-to-handle-extra-large: 12px;
-    --spectrum-color-loupe-height: 40px;
-    --spectrum-color-loupe-width: 32px;
-    --spectrum-color-handle-size: 20px;
-    --spectrum-color-handle-size-key-focus: 40px;
     --spectrum-corner-radius-75: 3px;
     --spectrum-corner-radius-100: 6px;
     --spectrum-corner-radius-200: 12px;

tools/styles/tokens/global-vars.css

@@ -114,6 +114,13 @@
     --spectrum-drop-zone-background-color-opacity-filled: 0.3;
     --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600);
     --spectrum-color-handle-inner-border-color: var(--spectrum-black);
+    --spectrum-color-handle-inner-border-opacity: 0.42;
+    --spectrum-color-handle-outer-border-opacity: var(
+        --spectrum-color-handle-inner-border-opacity
+    );
+    --spectrum-floating-action-button-shadow-color: var(
+        --spectrum-transparent-black-300
+    );
     --spectrum-white-rgb: 255, 255, 255;
     --spectrum-white: rgba(var(--spectrum-white-rgb));
     --spectrum-transparent-white-100-rgb: 255, 255, 255;
@@ -272,9 +279,14 @@
     --spectrum-color-slider-border-width: 1px;
     --spectrum-color-slider-border-rounding: 4px;
     --spectrum-floating-action-button-drop-shadow-blur: 12px;
+    --spectrum-floating-action-button-drop-shadow-y: 4px;
     --spectrum-illustrated-message-maximum-width: 380px;
     --spectrum-search-field-minimum-width-multiplier: 3;
+    --spectrum-color-loupe-height: 64px;
+    --spectrum-color-loupe-width: 48px;
+    --spectrum-color-loupe-bottom-to-color-handle: 12px;
     --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200);
+    --spectrum-color-loupe-inner-border-width: 1px;
     --spectrum-card-minimum-width: 100px;
     --spectrum-card-preview-minimum-height: 130px;
     --spectrum-card-selection-background-size: 40px;
@@ -295,6 +307,10 @@
     );
     --spectrum-color-handle-border-width: var(--spectrum-border-width-200);
     --spectrum-color-handle-inner-border-width: 1px;
+    --spectrum-color-handle-outer-border-width: 1px;
+    --spectrum-color-handle-drop-shadow-x: 0;
+    --spectrum-color-handle-drop-shadow-y: 0;
+    --spectrum-color-handle-drop-shadow-blur: 0;
     --spectrum-android-elevation: 2dp;
     --spectrum-spacing-50: 2px;
     --spectrum-spacing-75: 4px;

tools/styles/tokens/large-vars.css

@@ -92,6 +92,10 @@
     --spectrum-menu-item-top-to-selected-icon-medium: 13px;
     --spectrum-menu-item-top-to-selected-icon-large: 17px;
     --spectrum-menu-item-top-to-selected-icon-extra-large: 22px;
+    --spectrum-slider-control-to-field-label-small: 6px;
+    --spectrum-slider-control-to-field-label-medium: 10px;
+    --spectrum-slider-control-to-field-label-large: 14px;
+    --spectrum-slider-control-to-field-label-extra-large: 17px;
     --spectrum-picker-visual-to-disclosure-icon-small: 9px;
     --spectrum-picker-visual-to-disclosure-icon-medium: 10px;
     --spectrum-picker-visual-to-disclosure-icon-large: 11px;
@@ -117,6 +121,8 @@
     --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs);
     --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs);
     --spectrum-opacity-checkerboard-square-size: 10px;
+    --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs);
+    --spectrum-contextual-help-body-size: var(--spectrum-heading-size-xs);
     --spectrum-breadcrumbs-height-multiline: 84px;
     --spectrum-breadcrumbs-top-to-text: 17px;
     --spectrum-breadcrumbs-top-to-text-compact: 16px;
@@ -199,6 +205,18 @@
     --spectrum-accordion-focus-indicator-gap: 0px;
     --spectrum-accordion-content-area-top-to-content: 10px;
     --spectrum-accordion-content-area-bottom-to-content: 20px;
+    --spectrum-color-handle-size: 20px;
+    --spectrum-color-handle-size-key-focus: 40px;
+    --spectrum-side-navigation-width: 240px;
+    --spectrum-side-navigation-minimum-width: 200px;
+    --spectrum-side-navigation-maximum-width: 300px;
+    --spectrum-side-navigation-second-level-edge-to-text: 30px;
+    --spectrum-side-navigation-third-level-edge-to-text: 45px;
+    --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px;
+    --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px;
+    --spectrum-side-navigation-item-to-item: 5px;
+    --spectrum-side-navigation-item-to-header: 20px;
+    --spectrum-tray-top-to-content-area: 5px;
     --spectrum-workflow-icon-size-50: 18px;
     --spectrum-workflow-icon-size-75: 20px;
     --spectrum-workflow-icon-size-100: 22px;

tools/styles/tokens/medium-vars.css

@@ -92,6 +92,10 @@
     --spectrum-menu-item-top-to-selected-icon-medium: 11px;
     --spectrum-menu-item-top-to-selected-icon-large: 14px;
     --spectrum-menu-item-top-to-selected-icon-extra-large: 17px;
+    --spectrum-slider-control-to-field-label-small: 5px;
+    --spectrum-slider-control-to-field-label-medium: 8px;
+    --spectrum-slider-control-to-field-label-large: 11px;
+    --spectrum-slider-control-to-field-label-extra-large: 14px;
     --spectrum-picker-visual-to-disclosure-icon-small: 7px;
     --spectrum-picker-visual-to-disclosure-icon-medium: 8px;
     --spectrum-picker-visual-to-disclosure-icon-large: 9px;
@@ -117,6 +121,8 @@
     --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s);
     --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s);
     --spectrum-opacity-checkerboard-square-size: 8px;
+    --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs);
+    --spectrum-contextual-help-body-size: var(--spectrum-heading-size-s);
     --spectrum-breadcrumbs-height-multiline: 72px;
     --spectrum-breadcrumbs-top-to-text: 13px;
     --spectrum-breadcrumbs-top-to-text-compact: 11px;
@@ -196,6 +202,18 @@
     --spectrum-accordion-focus-indicator-gap: 0px;
     --spectrum-accordion-content-area-top-to-content: 8px;
     --spectrum-accordion-content-area-bottom-to-content: 16px;
+    --spectrum-color-handle-size: 16px;
+    --spectrum-color-handle-size-key-focus: 32px;
+    --spectrum-side-navigation-width: 192px;
+    --spectrum-side-navigation-minimum-width: 160px;
+    --spectrum-side-navigation-maximum-width: 240px;
+    --spectrum-side-navigation-second-level-edge-to-text: 24px;
+    --spectrum-side-navigation-third-level-edge-to-text: 36px;
+    --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px;
+    --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px;
+    --spectrum-side-navigation-item-to-item: 4px;
+    --spectrum-side-navigation-item-to-header: 16px;
+    --spectrum-tray-top-to-content-area: 4px;
     --spectrum-workflow-icon-size-50: 14px;
     --spectrum-workflow-icon-size-75: 16px;
     --spectrum-workflow-icon-size-100: 18px;

tools/styles/tokens/spectrum/custom-dark-vars.css

@@ -28,4 +28,9 @@
     --spectrum-menu-item-background-color-key-focus: var(
         --spectrum-transparent-white-200
     );
+
+    /* Drop Zone background color rgb */
+    --spectrum-drop-zone-background-color-rgb: var(
+        --spectrum-blue-900-rgb
+    ); /* var(--spectrum-accent-color-900);*/
 }

tools/styles/tokens/spectrum/custom-darkest-vars.css

@@ -28,4 +28,9 @@
     --spectrum-menu-item-background-color-key-focus: var(
         --spectrum-transparent-white-200
     );
+
+    /* Drop Zone background color rgb */
+    --spectrum-drop-zone-background-color-rgb: var(
+        --spectrum-blue-900-rgb
+    ); /* var(--spectrum-accent-color-900);*/
 }

tools/styles/tokens/spectrum/custom-large-vars.css

@@ -27,9 +27,6 @@
     --spectrum-colorwheel-colorarea-container-size: 182px;
 
     --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
-    /* TODO: Remove once new tokens for colorhandle and colorloupe are released */
-    --spectrum-color-handle-size-interim: 20px;
-    --spectrum-color-handle-size-key-focus-interim: 40px;
 
     --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
     --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;

tools/styles/tokens/spectrum/custom-light-vars.css

@@ -28,4 +28,9 @@
     --spectrum-menu-item-background-color-key-focus: var(
         --spectrum-transparent-black-200
     );
+
+    /* Drop Zone background color rgb */
+    --spectrum-drop-zone-background-color-rgb: var(
+        --spectrum-blue-800-rgb
+    ); /* var(--spectrum-accent-color-800);*/
 }

tools/styles/tokens/spectrum/custom-medium-vars.css

@@ -27,9 +27,6 @@
     --spectrum-colorwheel-colorarea-container-size: 144px;
 
     --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
-    /* TODO: Remove once new tokens for colorhandle and colorloupe are released */
-    --spectrum-color-handle-size-interim: 16px;
-    --spectrum-color-handle-size-key-focus-interim: 32px;
 
     --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
     --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;

tools/styles/tokens/spectrum/global-vars.css

@@ -22,22 +22,10 @@ governing permissions and limitations under the License.
     --spectrum-neutral-background-color-selected-key-focus: var(
         --spectrum-gray-800
     );
-    --spectrum-color-handle-inner-border-opacity: 0.42;
     --spectrum-color-handle-outer-border-color: var(--spectrum-black);
-    --spectrum-color-handle-outer-border-opacity: var(
-        --spectrum-color-handle-inner-border-opacity
-    );
     --spectrum-slider-track-thickness: 2px;
     --spectrum-slider-handle-gap: 4px;
     --spectrum-picker-border-width: var(--spectrum-border-width-100);
-    --spectrum-color-loupe-height: 64px;
-    --spectrum-color-loupe-width: 48px;
-    --spectrum-color-loupe-bottom-to-color-handle: 12px;
-    --spectrum-color-loupe-inner-border-width: var(--spectrum-border-width-200);
-    --spectrum-color-handle-outer-border-width: 1px;
-    --spectrum-color-handle-drop-shadow-x: 0;
-    --spectrum-color-handle-drop-shadow-y: 0;
-    --spectrum-color-handle-drop-shadow-blur: 0;
     --spectrum-border-width-100: 1px;
     --spectrum-accent-color-100: var(--spectrum-blue-100);
     --spectrum-accent-color-200: var(--spectrum-blue-200);

tools/styles/tokens/spectrum/large-vars.css

@@ -56,8 +56,6 @@ governing permissions and limitations under the License.
     --spectrum-slider-bottom-to-handle-medium: 10px;
     --spectrum-slider-bottom-to-handle-large: 14px;
     --spectrum-slider-bottom-to-handle-extra-large: 17px;
-    --spectrum-color-handle-size: 20px;
-    --spectrum-color-handle-size-key-focus: 40px;
     --spectrum-corner-radius-75: 2px;
     --spectrum-corner-radius-100: 5px;
     --spectrum-corner-radius-200: 10px;