@spectrum-web-components/styles 0.23.3-overlay.8 → 0.23.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/styles",
-    "version": "0.23.3-overlay.8+eef228d8d",
+    "version": "0.23.3",
     "publishConfig": {
         "access": "public"
     },
@@ -105,7 +105,7 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.7.5-overlay.236+eef228d8d"
+        "@spectrum-web-components/base": "^0.7.5"
     },
     "devDependencies": {
         "@spectrum-css/commons": "^4.0.2",
@@ -119,5 +119,5 @@
         "./**/*.css"
     ],
     "style": "all-medium-lightest.css",
-    "gitHead": "eef228d8defcf04fe32713c7232fd0873828752b"
+    "gitHead": "fe316a3ee9fc753f0de98aece11e04227df73ab7"
 }

package/tokens/express/custom-large-vars.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 Adobe. All rights reserved.
+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

package/tokens/express/custom-medium-vars.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 Adobe. All rights reserved.
+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

package/tokens/express/custom-vars.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 Adobe. All rights reserved.
+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
@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host, :root {
-  --system: express;
+:host,
+:root {
+    --system: express;
 }

package/tokens/express/global-vars.css

@@ -22,10 +22,22 @@ governing permissions and limitations under the License.
     --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);

package/tokens/express/large-vars.css

@@ -66,6 +66,8 @@ governing permissions and limitations under the License.
     --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;

package/tokens/express/medium-vars.css

@@ -66,6 +66,8 @@ governing permissions and limitations under the License.
     --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;

package/tokens/global-vars.css

@@ -111,6 +111,8 @@ governing permissions and limitations under the License.
     --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color);
     --spectrum-drop-zone-background-color-opacity: 0.1;
     --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-white: rgb(255, 255, 255);
     --spectrum-transparent-white-100: rgba(255, 255, 255, 0);
     --spectrum-transparent-white-200: rgba(255, 255, 255, 0.1);
@@ -155,7 +157,7 @@ governing permissions and limitations under the License.
     --spectrum-text-field-minimum-width-multiplier: 1.5;
     --spectrum-combo-box-minimum-width-multiplier: 2.5;
     --spectrum-combo-box-quiet-minimum-width-multiplier: 2;
-    --spectrum-combo-box-visual-to-field-button-quiet: 0;
+    --spectrum-combo-box-visual-to-field-button-quiet: 0px;
     --spectrum-alert-dialog-minimum-width: 288px;
     --spectrum-alert-dialog-maximum-width: 480px;
     --spectrum-contextual-help-minimum-width: 268px;
@@ -168,7 +170,6 @@ governing permissions and limitations under the License.
     --spectrum-color-area-border-width: var(--spectrum-border-width-100);
     --spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100);
     --spectrum-color-wheel-color-area-margin: 12px;
-    --spectrum-color-slider-minimum-length: 200px;
     --spectrum-color-slider-border-width: 1px;
     --spectrum-color-slider-border-rounding: 4px;
     --spectrum-floating-action-button-drop-shadow-blur: 12px;
@@ -193,6 +194,8 @@ governing permissions and limitations under the License.
     --spectrum-drop-zone-body-size: var(
         --spectrum-illustrated-message-body-size
     );
+    --spectrum-color-handle-border-width: var(--spectrum-border-width-200);
+    --spectrum-color-handle-inner-border-width: 1px;
     --spectrum-android-elevation: 2dp;
     --spectrum-spacing-50: 2px;
     --spectrum-spacing-75: 4px;

package/tokens/large-vars.css

@@ -87,6 +87,10 @@ governing permissions and limitations under the License.
     --spectrum-menu-item-top-to-disclosure-icon-medium: 13px;
     --spectrum-menu-item-top-to-disclosure-icon-large: 17px;
     --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px;
+    --spectrum-menu-item-top-to-selected-icon-small: 9px;
+    --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-picker-visual-to-disclosure-icon-small: 9px;
     --spectrum-picker-visual-to-disclosure-icon-medium: 10px;
     --spectrum-picker-visual-to-disclosure-icon-large: 11px;
@@ -150,11 +154,50 @@ governing permissions and limitations under the License.
     --spectrum-color-wheel-width: 240px;
     --spectrum-color-wheel-minimum-width: 219px;
     --spectrum-color-slider-length: 240px;
+    --spectrum-color-slider-minimum-length: 100px;
     --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s);
     --spectrum-illustrated-message-cjk-title-size: var(
         --spectrum-heading-cjk-size-s
     );
     --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs);
+    --spectrum-coach-mark-minimum-width: 208px;
+    --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300);
+    --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px;
+    --spectrum-coach-mark-media-minimum-height: 121px;
+    --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs);
+    --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs);
+    --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs);
+    --spectrum-accordion-top-to-text-compact-small: 2px;
+    --spectrum-accordion-top-to-text-regular-small: 7px;
+    --spectrum-accordion-small-top-to-text-spacious: 12px;
+    --spectrum-accordion-top-to-text-compact-medium: 4px;
+    --spectrum-accordion-top-to-text-regular-medium: 9px;
+    --spectrum-accordion-top-to-text-spacious-medium: 14px;
+    --spectrum-accordion-top-to-text-compact-large: 7px;
+    --spectrum-accordion-top-to-text-regular-large: 12px;
+    --spectrum-accordion-top-to-text-spacious-large: 14px;
+    --spectrum-accordion-top-to-text-compact-extra-large: 7px;
+    --spectrum-accordion-top-to-text-regular-extra-large: 12px;
+    --spectrum-accordion-top-to-text-spacious-extra-large: 14px;
+    --spectrum-accordion-bottom-to-text-compact-small: 4px;
+    --spectrum-accordion-bottom-to-text-regular-small: 9px;
+    --spectrum-accordion-bottom-to-text-spacious-small: 14px;
+    --spectrum-accordion-bottom-to-text-compact-medium: 8px;
+    --spectrum-accordion-bottom-to-text-regular-medium: 13px;
+    --spectrum-accordion-bottom-to-text-spacious-medium: 18px;
+    --spectrum-accordion-bottom-to-text-compact-large: 9px;
+    --spectrum-accordion-bottom-to-text-regular-large: 14px;
+    --spectrum-accordion-bottom-to-text-spacious-large: 19px;
+    --spectrum-accordion-bottom-to-text-compact-extra-large: 10px;
+    --spectrum-accordion-bottom-to-text-regular-extra-large: 15px;
+    --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px;
+    --spectrum-accordion-minimum-width: 250px;
+    --spectrum-accordion-disclosure-indicator-to-text: 0px;
+    --spectrum-accordion-edge-to-disclosure-indicator: 0px;
+    --spectrum-accordion-edge-to-text: 0px;
+    --spectrum-accordion-focus-indicator-gap: 0px;
+    --spectrum-accordion-content-area-top-to-content: 10px;
+    --spectrum-accordion-content-area-bottom-to-content: 20px;
     --spectrum-workflow-icon-size-50: 18px;
     --spectrum-workflow-icon-size-75: 20px;
     --spectrum-workflow-icon-size-100: 22px;
@@ -174,6 +217,8 @@ governing permissions and limitations under the License.
     --spectrum-component-height-100: 40px;
     --spectrum-component-height-200: 50px;
     --spectrum-component-height-300: 60px;
+    --spectrum-component-height-400: 70px;
+    --spectrum-component-height-500: 80px;
     --spectrum-component-pill-edge-to-visual-75: 13px;
     --spectrum-component-pill-edge-to-visual-100: 17px;
     --spectrum-component-pill-edge-to-visual-200: 22px;

package/tokens/medium-vars.css

@@ -87,6 +87,10 @@ governing permissions and limitations under the License.
     --spectrum-menu-item-top-to-disclosure-icon-medium: 11px;
     --spectrum-menu-item-top-to-disclosure-icon-large: 14px;
     --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px;
+    --spectrum-menu-item-top-to-selected-icon-small: 7px;
+    --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-picker-visual-to-disclosure-icon-small: 7px;
     --spectrum-picker-visual-to-disclosure-icon-medium: 8px;
     --spectrum-picker-visual-to-disclosure-icon-large: 9px;
@@ -150,11 +154,47 @@ governing permissions and limitations under the License.
     --spectrum-color-wheel-width: 192px;
     --spectrum-color-wheel-minimum-width: 175px;
     --spectrum-color-slider-length: 192px;
+    --spectrum-color-slider-minimum-length: 80px;
     --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m);
     --spectrum-illustrated-message-cjk-title-size: var(
         --spectrum-heading-cjk-size-m
     );
     --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s);
+    --spectrum-coach-mark-minimum-width: 296px;
+    --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400);
+    --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px;
+    --spectrum-coach-mark-media-minimum-height: 166px;
+    --spectrum-accordion-top-to-text-compact-small: 2px;
+    --spectrum-accordion-top-to-text-regular-small: 5px;
+    --spectrum-accordion-small-top-to-text-spacious: 9px;
+    --spectrum-accordion-top-to-text-compact-medium: 4px;
+    --spectrum-accordion-top-to-text-regular-medium: 8px;
+    --spectrum-accordion-top-to-text-spacious-medium: 12px;
+    --spectrum-accordion-top-to-text-compact-large: 4px;
+    --spectrum-accordion-top-to-text-regular-large: 9px;
+    --spectrum-accordion-top-to-text-spacious-large: 12px;
+    --spectrum-accordion-top-to-text-compact-extra-large: 5px;
+    --spectrum-accordion-top-to-text-regular-extra-large: 9px;
+    --spectrum-accordion-top-to-text-spacious-extra-large: 13px;
+    --spectrum-accordion-bottom-to-text-compact-small: 2px;
+    --spectrum-accordion-bottom-to-text-regular-small: 7px;
+    --spectrum-accordion-bottom-to-text-spacious-small: 11px;
+    --spectrum-accordion-bottom-to-text-compact-medium: 5px;
+    --spectrum-accordion-bottom-to-text-regular-medium: 9px;
+    --spectrum-accordion-bottom-to-text-spacious-medium: 13px;
+    --spectrum-accordion-bottom-to-text-compact-large: 8px;
+    --spectrum-accordion-bottom-to-text-regular-large: 11px;
+    --spectrum-accordion-bottom-to-text-spacious-large: 16px;
+    --spectrum-accordion-bottom-to-text-compact-extra-large: 8px;
+    --spectrum-accordion-bottom-to-text-regular-extra-large: 12px;
+    --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px;
+    --spectrum-accordion-minimum-width: 200px;
+    --spectrum-accordion-disclosure-indicator-to-text: 0px;
+    --spectrum-accordion-edge-to-disclosure-indicator: 0px;
+    --spectrum-accordion-edge-to-text: 0px;
+    --spectrum-accordion-focus-indicator-gap: 0px;
+    --spectrum-accordion-content-area-top-to-content: 8px;
+    --spectrum-accordion-content-area-bottom-to-content: 16px;
     --spectrum-workflow-icon-size-50: 14px;
     --spectrum-workflow-icon-size-75: 16px;
     --spectrum-workflow-icon-size-100: 18px;
@@ -174,6 +214,8 @@ governing permissions and limitations under the License.
     --spectrum-component-height-100: 32px;
     --spectrum-component-height-200: 40px;
     --spectrum-component-height-300: 48px;
+    --spectrum-component-height-400: 56px;
+    --spectrum-component-height-500: 64px;
     --spectrum-component-pill-edge-to-visual-75: 10px;
     --spectrum-component-pill-edge-to-visual-100: 14px;
     --spectrum-component-pill-edge-to-visual-200: 18px;

package/tokens/spectrum/custom-large-vars.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 Adobe. All rights reserved.
+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
@@ -44,4 +44,6 @@ governing permissions and limitations under the License.
     --spectrum-menu-item-checkmark-width-medium: 14px;
     --spectrum-menu-item-checkmark-width-large: 16px;
     --spectrum-menu-item-checkmark-width-extra-large: 16px;
+
+    --spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
 }

package/tokens/spectrum/custom-medium-vars.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 Adobe. All rights reserved.
+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
@@ -44,4 +44,6 @@ governing permissions and limitations under the License.
     --spectrum-menu-item-checkmark-width-medium: 10px;
     --spectrum-menu-item-checkmark-width-large: 12px;
     --spectrum-menu-item-checkmark-width-extra-large: 14px;
+
+    --spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
 }

package/tokens/spectrum/custom-vars.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 Adobe. All rights reserved.
+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

package/tokens/spectrum/global-vars.css

@@ -22,12 +22,22 @@ 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);

package/tokens/spectrum/large-vars.css

@@ -56,6 +56,8 @@ 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;

package/tokens/spectrum/medium-vars.css

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