@spectrum-web-components/styles 0.23.3 → 0.24.1-overlay.10

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

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-.spectrum--express:host,
+:host,
 :root {
     /* */
 }

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

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-.spectrum--express:host,
+:host,
 :root {
     /* */
 }

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

@@ -1,19 +1,23 @@
-/*
-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 */
+/*!
+ * 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.
+ */
 
 :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';
+
+    /* 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;
 }

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

@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-.spectrum--express.spectrum--light {
+:host,
+:root {
     /* */
 }

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

@@ -1,19 +1,23 @@
-/*
-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 */
+/*!
+ * 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.
+ */
 
 :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';
+
+    /* 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;
 }

package/tokens/express/custom-vars.css

@@ -1,16 +1,15 @@
-/*
-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 */
+/*!
+ * 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.
+ */
 
 :host,
 :root {

package/tokens/global-vars.css

@@ -1,14 +1,15 @@
-/*
-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.
+ */
 
 :host,
 :root {
@@ -113,26 +114,114 @@ governing permissions and limitations under the License.
     --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);
-    --spectrum-transparent-white-300: rgba(255, 255, 255, 0.25);
-    --spectrum-transparent-white-400: rgba(255, 255, 255, 0.4);
-    --spectrum-transparent-white-500: rgba(255, 255, 255, 0.55);
-    --spectrum-transparent-white-600: rgba(255, 255, 255, 0.7);
-    --spectrum-transparent-white-700: rgba(255, 255, 255, 0.8);
-    --spectrum-transparent-white-800: rgba(255, 255, 255, 0.9);
-    --spectrum-transparent-white-900: rgb(255, 255, 255);
-    --spectrum-black: rgb(0, 0, 0);
-    --spectrum-transparent-black-100: rgba(0, 0, 0, 0);
-    --spectrum-transparent-black-200: rgba(0, 0, 0, 0.1);
-    --spectrum-transparent-black-300: rgba(0, 0, 0, 0.25);
-    --spectrum-transparent-black-400: rgba(0, 0, 0, 0.4);
-    --spectrum-transparent-black-500: rgba(0, 0, 0, 0.55);
-    --spectrum-transparent-black-600: rgba(0, 0, 0, 0.7);
-    --spectrum-transparent-black-700: rgba(0, 0, 0, 0.8);
-    --spectrum-transparent-black-800: rgba(0, 0, 0, 0.9);
-    --spectrum-transparent-black-900: rgb(0, 0, 0);
+    --spectrum-white-rgb: 255, 255, 255;
+    --spectrum-white: rgba(var(--spectrum-white-rgb));
+    --spectrum-transparent-white-100-rgb: 255, 255, 255;
+    --spectrum-transparent-white-100-opacity: 0;
+    --spectrum-transparent-white-100: rgba(
+        var(--spectrum-transparent-white-100-rgb),
+        var(--spectrum-transparent-white-100-opacity)
+    );
+    --spectrum-transparent-white-200-rgb: 255, 255, 255;
+    --spectrum-transparent-white-200-opacity: 0.1;
+    --spectrum-transparent-white-200: rgba(
+        var(--spectrum-transparent-white-200-rgb),
+        var(--spectrum-transparent-white-200-opacity)
+    );
+    --spectrum-transparent-white-300-rgb: 255, 255, 255;
+    --spectrum-transparent-white-300-opacity: 0.25;
+    --spectrum-transparent-white-300: rgba(
+        var(--spectrum-transparent-white-300-rgb),
+        var(--spectrum-transparent-white-300-opacity)
+    );
+    --spectrum-transparent-white-400-rgb: 255, 255, 255;
+    --spectrum-transparent-white-400-opacity: 0.4;
+    --spectrum-transparent-white-400: rgba(
+        var(--spectrum-transparent-white-400-rgb),
+        var(--spectrum-transparent-white-400-opacity)
+    );
+    --spectrum-transparent-white-500-rgb: 255, 255, 255;
+    --spectrum-transparent-white-500-opacity: 0.55;
+    --spectrum-transparent-white-500: rgba(
+        var(--spectrum-transparent-white-500-rgb),
+        var(--spectrum-transparent-white-500-opacity)
+    );
+    --spectrum-transparent-white-600-rgb: 255, 255, 255;
+    --spectrum-transparent-white-600-opacity: 0.7;
+    --spectrum-transparent-white-600: rgba(
+        var(--spectrum-transparent-white-600-rgb),
+        var(--spectrum-transparent-white-600-opacity)
+    );
+    --spectrum-transparent-white-700-rgb: 255, 255, 255;
+    --spectrum-transparent-white-700-opacity: 0.8;
+    --spectrum-transparent-white-700: rgba(
+        var(--spectrum-transparent-white-700-rgb),
+        var(--spectrum-transparent-white-700-opacity)
+    );
+    --spectrum-transparent-white-800-rgb: 255, 255, 255;
+    --spectrum-transparent-white-800-opacity: 0.9;
+    --spectrum-transparent-white-800: rgba(
+        var(--spectrum-transparent-white-800-rgb),
+        var(--spectrum-transparent-white-800-opacity)
+    );
+    --spectrum-transparent-white-900-rgb: 255, 255, 255;
+    --spectrum-transparent-white-900: rgba(
+        var(--spectrum-transparent-white-900-rgb)
+    );
+    --spectrum-black-rgb: 0, 0, 0;
+    --spectrum-black: rgba(var(--spectrum-black-rgb));
+    --spectrum-transparent-black-100-rgb: 0, 0, 0;
+    --spectrum-transparent-black-100-opacity: 0;
+    --spectrum-transparent-black-100: rgba(
+        var(--spectrum-transparent-black-100-rgb),
+        var(--spectrum-transparent-black-100-opacity)
+    );
+    --spectrum-transparent-black-200-rgb: 0, 0, 0;
+    --spectrum-transparent-black-200-opacity: 0.1;
+    --spectrum-transparent-black-200: rgba(
+        var(--spectrum-transparent-black-200-rgb),
+        var(--spectrum-transparent-black-200-opacity)
+    );
+    --spectrum-transparent-black-300-rgb: 0, 0, 0;
+    --spectrum-transparent-black-300-opacity: 0.25;
+    --spectrum-transparent-black-300: rgba(
+        var(--spectrum-transparent-black-300-rgb),
+        var(--spectrum-transparent-black-300-opacity)
+    );
+    --spectrum-transparent-black-400-rgb: 0, 0, 0;
+    --spectrum-transparent-black-400-opacity: 0.4;
+    --spectrum-transparent-black-400: rgba(
+        var(--spectrum-transparent-black-400-rgb),
+        var(--spectrum-transparent-black-400-opacity)
+    );
+    --spectrum-transparent-black-500-rgb: 0, 0, 0;
+    --spectrum-transparent-black-500-opacity: 0.55;
+    --spectrum-transparent-black-500: rgba(
+        var(--spectrum-transparent-black-500-rgb),
+        var(--spectrum-transparent-black-500-opacity)
+    );
+    --spectrum-transparent-black-600-rgb: 0, 0, 0;
+    --spectrum-transparent-black-600-opacity: 0.7;
+    --spectrum-transparent-black-600: rgba(
+        var(--spectrum-transparent-black-600-rgb),
+        var(--spectrum-transparent-black-600-opacity)
+    );
+    --spectrum-transparent-black-700-rgb: 0, 0, 0;
+    --spectrum-transparent-black-700-opacity: 0.8;
+    --spectrum-transparent-black-700: rgba(
+        var(--spectrum-transparent-black-700-rgb),
+        var(--spectrum-transparent-black-700-opacity)
+    );
+    --spectrum-transparent-black-800-rgb: 0, 0, 0;
+    --spectrum-transparent-black-800-opacity: 0.9;
+    --spectrum-transparent-black-800: rgba(
+        var(--spectrum-transparent-black-800-rgb),
+        var(--spectrum-transparent-black-800-opacity)
+    );
+    --spectrum-transparent-black-900-rgb: 0, 0, 0;
+    --spectrum-transparent-black-900: rgba(
+        var(--spectrum-transparent-black-900-rgb)
+    );
     --spectrum-radio-button-selection-indicator: 4px;
     --spectrum-field-label-to-component: 0px;
     --spectrum-help-text-to-component: 0px;
@@ -154,6 +243,7 @@ governing permissions and limitations under the License.
     --spectrum-popover-tip-height: 8px;
     --spectrum-menu-item-label-to-description: 1px;
     --spectrum-picker-minimum-width-multiplier: 2;
+    --spectrum-picker-end-edge-to-disclousure-icon-quiet: 0px;
     --spectrum-text-field-minimum-width-multiplier: 1.5;
     --spectrum-combo-box-minimum-width-multiplier: 2.5;
     --spectrum-combo-box-quiet-minimum-width-multiplier: 2;
@@ -167,6 +257,15 @@ governing permissions and limitations under the License.
     --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px;
     --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px;
     --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px;
+    --spectrum-alert-banner-to-top-workflow-icon: var(
+        --spectrum-alert-banner-top-to-workflow-icon
+    );
+    --spectrum-alert-banner-to-top-text: var(
+        --spectrum-alert-banner-top-to-text
+    );
+    --spectrum-alert-banner-to-bottom-text: var(
+        --spectrum-alert-banner-bottom-to-text
+    );
     --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;
@@ -280,12 +379,12 @@ governing permissions and limitations under the License.
     --spectrum-sans-serif-font-family: Adobe Clean;
     --spectrum-serif-font-family: Adobe Clean Serif;
     --spectrum-cjk-font-family: Adobe Clean Han;
-    --spectrum-light-font-weight: light;
-    --spectrum-regular-font-weight: regular;
-    --spectrum-medium-font-weight: medium;
-    --spectrum-bold-font-weight: bold;
-    --spectrum-extra-bold-font-weight: extra-bold;
-    --spectrum-black-font-weight: black;
+    --spectrum-light-font-weight: 300;
+    --spectrum-regular-font-weight: 400;
+    --spectrum-medium-font-weight: 500;
+    --spectrum-bold-font-weight: 700;
+    --spectrum-extra-bold-font-weight: 800;
+    --spectrum-black-font-weight: 900;
     --spectrum-italic-font-style: italic;
     --spectrum-default-font-style: normal;
     --spectrum-line-height-100: 1.3;

package/tokens/large-vars.css

@@ -1,14 +1,15 @@
-/*
-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.
+ */
 
 :host,
 :root {
@@ -142,9 +143,9 @@ governing permissions and limitations under the License.
     --spectrum-avatar-size-700: 50px;
     --spectrum-alert-banner-minimum-height: 64px;
     --spectrum-alert-banner-width: 680px;
-    --spectrum-alert-banner-to-top-workflow-icon: 21px;
-    --spectrum-alert-banner-to-top-text: 21px;
-    --spectrum-alert-banner-to-bottom-text: 22px;
+    --spectrum-alert-banner-top-to-workflow-icon: 21px;
+    --spectrum-alert-banner-top-to-text: 21px;
+    --spectrum-alert-banner-bottom-to-text: 22px;
     --spectrum-rating-indicator-width: 22px;
     --spectrum-rating-indicator-to-icon: 5px;
     --spectrum-color-area-width: 240px;
@@ -269,6 +270,14 @@ governing permissions and limitations under the License.
     --spectrum-field-edge-to-disclosure-icon-100: 13px;
     --spectrum-field-edge-to-disclosure-icon-200: 17px;
     --spectrum-field-edge-to-disclosure-icon-300: 22px;
+    --spectrum-field-end-edge-to-disclosure-icon-75: 9px;
+    --spectrum-field-end-edge-to-disclosure-icon-100: 13px;
+    --spectrum-field-end-edge-to-disclosure-icon-200: 17px;
+    --spectrum-field-end-edge-to-disclosure-icon-300: 22px;
+    --spectrum-field-top-to-disclosure-icon-75: 9px;
+    --spectrum-field-top-to-disclosure-icon-100: 13px;
+    --spectrum-field-top-to-disclosure-icon-200: 17px;
+    --spectrum-field-top-to-disclosure-icon-300: 22px;
     --spectrum-field-top-to-alert-icon-small: 5px;
     --spectrum-field-top-to-alert-icon-medium: 9px;
     --spectrum-field-top-to-alert-icon-large: 13px;