@spectrum-web-components/styles 0.22.3-react.75 → 0.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/styles",
-    "version": "0.22.3-react.75+9897d0a1c",
+    "version": "0.23.1",
     "publishConfig": {
         "access": "public"
     },
@@ -105,7 +105,7 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.7.5-react.75+9897d0a1c"
+        "@spectrum-web-components/base": "^0.7.4"
     },
     "devDependencies": {
         "@spectrum-css/commons": "^4.0.2",
@@ -119,5 +119,5 @@
         "./**/*.css"
     ],
     "style": "all-medium-lightest.css",
-    "gitHead": "9897d0a1c48b8cee4e5a19c58acfdec2c1dc0623"
+    "gitHead": "5e11d828243bb3ff572c25b33a8d58844a89f524"
 }

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

@@ -0,0 +1,17 @@
+/*
+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,
+:root {
+    /* */
+}

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

@@ -0,0 +1,17 @@
+/*
+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,
+:root {
+    /* */
+}

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

@@ -12,6 +12,8 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host, :root {
-  /*  */
+:host,
+: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';
 }

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

@@ -0,0 +1,16 @@
+/*
+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 {
+    /* */
+}

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

@@ -12,6 +12,8 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host, :root {
-  /*  */
+:host,
+: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';
 }

package/tokens/express/global-vars.css

@@ -24,6 +24,8 @@ governing permissions and limitations under the License.
     );
     --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-border-width-100: 2px;
     --spectrum-accent-color-100: var(--spectrum-indigo-100);
     --spectrum-accent-color-200: var(--spectrum-indigo-200);
@@ -1250,7 +1252,6 @@ governing permissions and limitations under the License.
 
 :host,
 :root {
-    --system-spectrum-picker-border-size: none;
     --system-spectrum-picker-background-color-default: var(--spectrum-gray-200);
     --system-spectrum-picker-background-color-default-open: var(
         --spectrum-gray-300
@@ -1263,12 +1264,10 @@ governing permissions and limitations under the License.
     --system-spectrum-picker-background-color-key-focus: var(
         --spectrum-gray-300
     );
-    --system-spectrum-picker-border-color-default: var(--spectrum-gray-400);
-    --system-spectrum-picker-border-color-default-open: var(
-        --spectrum-gray-400
-    );
-    --system-spectrum-picker-border-color-hover: var(--spectrum-gray-500);
-    --system-spectrum-picker-border-color-hover-open: var(--spectrum-gray-500);
-    --system-spectrum-picker-border-color-active: var(--spectrum-gray-600);
-    --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-500);
+    --system-spectrum-picker-border-color-default: transparent;
+    --system-spectrum-picker-border-color-default-open: transparent;
+    --system-spectrum-picker-border-color-hover: transparent;
+    --system-spectrum-picker-border-color-hover-open: transparent;
+    --system-spectrum-picker-border-color-active: transparent;
+    --system-spectrum-picker-border-color-key-focus: transparent;
 }

package/tokens/express/large-vars.css

@@ -64,6 +64,8 @@ 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-corner-radius-75: 4px;
     --spectrum-corner-radius-100: 8px;
     --spectrum-corner-radius-200: 16px;

package/tokens/express/medium-vars.css

@@ -66,8 +66,6 @@ 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-loupe-bottom-to-color-handle: 6px;
-    --spectrum-color-loupe-inner-border-width: 3px;
     --spectrum-corner-radius-75: 3px;
     --spectrum-corner-radius-100: 6px;
     --spectrum-corner-radius-200: 12px;

package/tokens/global-vars.css

@@ -108,6 +108,9 @@ governing permissions and limitations under the License.
     --spectrum-color-loupe-outer-border: var(--spectrum-white);
     --spectrum-card-selection-background-color: var(--spectrum-gray-100);
     --spectrum-card-selection-background-color-opacity: 0.95;
+    --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-white: rgb(255, 255, 255);
     --spectrum-transparent-white-100: rgba(255, 255, 255, 0);
     --spectrum-transparent-white-200: rgba(255, 255, 255, 0.1);
@@ -175,6 +178,21 @@ governing permissions and limitations under the License.
     --spectrum-card-minimum-width: 100px;
     --spectrum-card-preview-minimum-height: 130px;
     --spectrum-card-selection-background-size: 40px;
+    --spectrum-drop-zone-width: 428px;
+    --spectrum-drop-zone-content-maximum-width: var(
+        --spectrum-illustrated-message-maximum-width
+    );
+    --spectrum-drop-zone-border-dash-length: 8px;
+    --spectrum-drop-zone-border-dash-gap: 4px;
+    --spectrum-drop-zone-title-size: var(
+        --spectrum-illustrated-message-title-size
+    );
+    --spectrum-drop-zone-cjk-title-size: var(
+        --spectrum-illustrated-message-cjk-title-size
+    );
+    --spectrum-drop-zone-body-size: var(
+        --spectrum-illustrated-message-body-size
+    );
     --spectrum-android-elevation: 2dp;
     --spectrum-spacing-50: 2px;
     --spectrum-spacing-75: 4px;
@@ -486,6 +504,7 @@ governing permissions and limitations under the License.
     --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100);
     --spectrum-heading-margin-top-multiplier: 0.88888889;
     --spectrum-heading-margin-bottom-multiplier: 0.25;
+    --spectrum-heading-color: var(--spectrum-gray-900);
     --spectrum-body-sans-serif-font-family: var(
         --spectrum-sans-serif-font-family
     );
@@ -553,6 +572,7 @@ governing permissions and limitations under the License.
     --spectrum-body-line-height: var(--spectrum-line-height-200);
     --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200);
     --spectrum-body-margin-multiplier: 0.75;
+    --spectrum-body-color: var(--spectrum-gray-800);
     --spectrum-detail-sans-serif-font-family: var(
         --spectrum-sans-serif-font-family
     );
@@ -691,6 +711,9 @@ governing permissions and limitations under the License.
     --spectrum-detail-margin-top-multiplier: 0.88888889;
     --spectrum-detail-margin-bottom-multiplier: 0.25;
     --spectrum-detail-letter-spacing: 0.06em;
+    --spectrum-detail-sans-serif-text-transform: uppercase;
+    --spectrum-detail-serif-text-transform: uppercase;
+    --spectrum-detail-color: var(--spectrum-gray-900);
     --spectrum-code-font-family: Source Code Pro;
     --spectrum-code-cjk-font-family: var(--spectrum-code-font-family);
     --spectrum-code-font-weight: var(--spectrum-regular-font-weight);
@@ -728,4 +751,5 @@ governing permissions and limitations under the License.
     --spectrum-code-size-xs: var(--spectrum-font-size-75);
     --spectrum-code-line-height: var(--spectrum-line-height-200);
     --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200);
+    --spectrum-code-color: var(--spectrum-gray-800);
 }

package/tokens/large-vars.css

@@ -109,6 +109,8 @@ governing permissions and limitations under the License.
     --spectrum-thumbnail-size-800: 55px;
     --spectrum-thumbnail-size-900: 62px;
     --spectrum-thumbnail-size-1000: 70px;
+    --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-breadcrumbs-height-multiline: 84px;
     --spectrum-breadcrumbs-top-to-text: 17px;
@@ -145,7 +147,8 @@ governing permissions and limitations under the License.
     --spectrum-color-area-minimum-width: 80px;
     --spectrum-color-area-height: 240px;
     --spectrum-color-area-minimum-height: 80px;
-    --spectrum-color-wheel-minimum-width: 240px;
+    --spectrum-color-wheel-width: 240px;
+    --spectrum-color-wheel-minimum-width: 219px;
     --spectrum-color-slider-length: 240px;
     --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s);
     --spectrum-illustrated-message-cjk-title-size: var(

package/tokens/medium-vars.css

@@ -109,6 +109,8 @@ governing permissions and limitations under the License.
     --spectrum-thumbnail-size-800: 44px;
     --spectrum-thumbnail-size-900: 50px;
     --spectrum-thumbnail-size-1000: 56px;
+    --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-breadcrumbs-height-multiline: 72px;
     --spectrum-breadcrumbs-top-to-text: 13px;
@@ -145,7 +147,8 @@ governing permissions and limitations under the License.
     --spectrum-color-area-minimum-width: 64px;
     --spectrum-color-area-height: 192px;
     --spectrum-color-area-minimum-height: 64px;
-    --spectrum-color-wheel-minimum-width: 192px;
+    --spectrum-color-wheel-width: 192px;
+    --spectrum-color-wheel-minimum-width: 175px;
     --spectrum-color-slider-length: 192px;
     --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m);
     --spectrum-illustrated-message-cjk-title-size: var(

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

@@ -0,0 +1,31 @@
+/*
+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 */
+
+:host,
+:root {
+    --spectrum-menu-item-background-color-default: rgba(
+        255,
+        255,
+        255,
+        0
+    ); /* --spectrum-gray-900 */
+    --spectrum-menu-item-background-color-hover: var(
+        --spectrum-transparent-white-200
+    );
+    --spectrum-menu-item-background-color-down: var(
+        --spectrum-transparent-white-200
+    );
+    --spectrum-menu-item-background-color-key-focus: var(
+        --spectrum-transparent-white-200
+    );
+}

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

@@ -0,0 +1,31 @@
+/*
+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 */
+
+:host,
+:root {
+    --spectrum-menu-item-background-color-default: rgba(
+        255,
+        255,
+        255,
+        0
+    ); /* --spectrum-gray-900 */
+    --spectrum-menu-item-background-color-hover: var(
+        --spectrum-transparent-white-200
+    );
+    --spectrum-menu-item-background-color-down: var(
+        --spectrum-transparent-white-200
+    );
+    --spectrum-menu-item-background-color-key-focus: var(
+        --spectrum-transparent-white-200
+    );
+}

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

@@ -22,4 +22,26 @@ governing permissions and limitations under the License.
 
     --spectrum-slider-tick-mark-height: 13px;
     --spectrum-slider-ramp-track-height: 20px;
+
+    --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 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';
+    --spectrum-colorwheel-colorarea-container-size: 182px;
+
+    /* TODO: --spectrum-color-handle-size will need to be removed here once it's defined in @adobe/spectrum-tokens */
+    --spectrum-color-handle-size: 20px;
+
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
+
+    --spectrum-menu-item-checkmark-height-small: 12px;
+    --spectrum-menu-item-checkmark-height-medium: 14px;
+    --spectrum-menu-item-checkmark-height-large: 16px;
+    --spectrum-menu-item-checkmark-height-extra-large: 16px;
+
+    --spectrum-menu-item-checkmark-width-small: 12px;
+    --spectrum-menu-item-checkmark-width-medium: 14px;
+    --spectrum-menu-item-checkmark-width-large: 16px;
+    --spectrum-menu-item-checkmark-width-extra-large: 16px;
 }

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

@@ -0,0 +1,30 @@
+/*
+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--light {
+    --spectrum-menu-item-background-color-default: rgba(
+        0,
+        0,
+        0,
+        0
+    ); /* --spectrum-gray-900 */
+    --spectrum-menu-item-background-color-hover: var(
+        --spectrum-transparent-black-200
+    );
+    --spectrum-menu-item-background-color-down: var(
+        --spectrum-transparent-black-200
+    );
+    --spectrum-menu-item-background-color-key-focus: var(
+        --spectrum-transparent-black-200
+    );
+}

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

@@ -22,4 +22,26 @@ governing permissions and limitations under the License.
 
     --spectrum-slider-tick-mark-height: 10px;
     --spectrum-slider-ramp-track-height: 16px;
+
+    --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 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';
+    --spectrum-colorwheel-colorarea-container-size: 144px;
+
+    /* TODO: --spectrum-color-handle-size will need to be removed here once it's defined in @adobe/spectrum-tokens */
+    --spectrum-color-handle-size: 16px;
+
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
+    --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
+
+    --spectrum-menu-item-checkmark-height-small: 10px;
+    --spectrum-menu-item-checkmark-height-medium: 10px;
+    --spectrum-menu-item-checkmark-height-large: 12px;
+    --spectrum-menu-item-checkmark-height-extra-large: 14px;
+
+    --spectrum-menu-item-checkmark-width-small: 10px;
+    --spectrum-menu-item-checkmark-width-medium: 10px;
+    --spectrum-menu-item-checkmark-width-large: 12px;
+    --spectrum-menu-item-checkmark-width-extra-large: 14px;
 }

package/tokens/spectrum/global-vars.css

@@ -24,6 +24,10 @@ governing permissions and limitations under the License.
     );
     --spectrum-slider-track-thickness: 2px;
     --spectrum-slider-handle-gap: 4px;
+    --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-border-width-100: 1px;
     --spectrum-accent-color-100: var(--spectrum-blue-100);
     --spectrum-accent-color-200: var(--spectrum-blue-200);
@@ -1258,7 +1262,6 @@ governing permissions and limitations under the License.
 
 :host,
 :root {
-    --system-spectrum-picker-border-size: var(--spectrum-border-width-100);
     --system-spectrum-picker-background-color-default: var(--spectrum-gray-75);
     --system-spectrum-picker-background-color-default-open: var(
         --spectrum-gray-200

package/tokens/spectrum/medium-vars.css

@@ -56,10 +56,6 @@ 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-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-corner-radius-75: 2px;
     --spectrum-corner-radius-100: 4px;
     --spectrum-corner-radius-200: 8px;