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

package/tokens/medium-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: 40px;
     --spectrum-alert-banner-minimum-height: 48px;
     --spectrum-alert-banner-width: 832px;
-    --spectrum-alert-banner-to-top-workflow-icon: 15px;
-    --spectrum-alert-banner-to-top-text: 14px;
-    --spectrum-alert-banner-to-bottom-text: 17px;
+    --spectrum-alert-banner-top-to-workflow-icon: 15px;
+    --spectrum-alert-banner-top-to-text: 14px;
+    --spectrum-alert-banner-bottom-to-text: 17px;
     --spectrum-rating-indicator-width: 18px;
     --spectrum-rating-indicator-to-icon: 4px;
     --spectrum-color-area-width: 192px;
@@ -266,6 +267,14 @@ governing permissions and limitations under the License.
     --spectrum-field-edge-to-disclosure-icon-100: 11px;
     --spectrum-field-edge-to-disclosure-icon-200: 14px;
     --spectrum-field-edge-to-disclosure-icon-300: 17px;
+    --spectrum-field-end-edge-to-disclosure-icon-75: 7px;
+    --spectrum-field-end-edge-to-disclosure-icon-100: 11px;
+    --spectrum-field-end-edge-to-disclosure-icon-200: 14px;
+    --spectrum-field-end-edge-to-disclosure-icon-300: 17px;
+    --spectrum-field-top-to-disclosure-icon-75: 7px;
+    --spectrum-field-top-to-disclosure-icon-100: 11px;
+    --spectrum-field-top-to-disclosure-icon-200: 14px;
+    --spectrum-field-top-to-disclosure-icon-300: 17px;
     --spectrum-field-top-to-alert-icon-small: 4px;
     --spectrum-field-top-to-alert-icon-medium: 7px;
     --spectrum-field-top-to-alert-icon-large: 10px;

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

@@ -1,23 +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-menu-item-background-color-default-rgb: 255, 255, 255;
+    --spectrum-menu-item-background-color-default-opacity: 0;
     --spectrum-menu-item-background-color-default: rgba(
-        255,
-        255,
-        255,
-        0
+        var(--spectrum-menu-item-background-color-default-rgb),
+        var(--spectrum-menu-item-background-color-default-opacity)
     ); /* --spectrum-gray-900 */
     --spectrum-menu-item-background-color-hover: var(
         --spectrum-transparent-white-200

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

@@ -1,23 +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-menu-item-background-color-default-rgb: 255, 255, 255;
+    --spectrum-menu-item-background-color-default-opacity: 0;
     --spectrum-menu-item-background-color-default: rgba(
-        255,
-        255,
-        255,
-        0
+        var(--spectrum-menu-item-background-color-default-rgb),
+        var(--spectrum-menu-item-background-color-default-opacity)
     ); /* --spectrum-gray-900 */
     --spectrum-menu-item-background-color-hover: var(
         --spectrum-transparent-white-200

package/tokens/spectrum/custom-large-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 {
@@ -27,8 +26,10 @@ governing permissions and limitations under the License.
     --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-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;
@@ -46,4 +47,13 @@ governing permissions and limitations under the License.
     --spectrum-menu-item-checkmark-width-extra-large: 16px;
 
     --spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
+
+    --spectrum-button-top-to-text-small: 6px;
+    --spectrum-button-bottom-to-text-small: 5px;
+    --spectrum-button-top-to-text-medium: 9px;
+    --spectrum-button-bottom-to-text-medium: 10px;
+    --spectrum-button-top-to-text-large: 12px;
+    --spectrum-button-bottom-to-text-large: 13px;
+    --spectrum-button-top-to-text-extra-large: 16px;
+    --spectrum-button-bottom-to-text-extra-large: 17px;
 }

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

@@ -1,22 +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.
-*/
+/*!
+ * 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 {
+:host,
+:root {
+    --spectrum-menu-item-background-color-default-rgb: 0, 0, 0;
+    --spectrum-menu-item-background-color-default-opacity: 0;
     --spectrum-menu-item-background-color-default: rgba(
-        0,
-        0,
-        0,
-        0
+        var(--spectrum-menu-item-background-color-default-rgb),
+        var(--spectrum-menu-item-background-color-default-opacity)
     ); /* --spectrum-gray-900 */
     --spectrum-menu-item-background-color-hover: var(
         --spectrum-transparent-black-200

package/tokens/spectrum/custom-medium-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 {
@@ -27,8 +26,10 @@ governing permissions and limitations under the License.
     --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-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;
@@ -46,4 +47,13 @@ governing permissions and limitations under the License.
     --spectrum-menu-item-checkmark-width-extra-large: 14px;
 
     --spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
+
+    --spectrum-button-top-to-text-small: 5px;
+    --spectrum-button-bottom-to-text-small: 4px;
+    --spectrum-button-top-to-text-medium: 7px;
+    --spectrum-button-bottom-to-text-medium: 8px;
+    --spectrum-button-top-to-text-large: 10px;
+    --spectrum-button-bottom-to-text-large: 10px;
+    --spectrum-button-top-to-text-extra-large: 13px;
+    --spectrum-button-bottom-to-text-extra-large: 13px;
 }

package/tokens/spectrum/custom-vars.css

@@ -1,23 +1,19 @@
-/*
-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
+/*!
+ * 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.
+ */
 
-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 {
     --system: spectrum;
-}
-
-:host,
-:root {
     --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
     --spectrum-animation-duration-0: 0ms;
     --spectrum-animation-duration-100: 130ms;
@@ -53,6 +49,12 @@ governing permissions and limitations under the License.
         adobe-clean-han-japanese, sans-serif;
 
     /* static white / black background color for docs containers */
-    --spectrum-docs-static-white-background-color: rgb(15, 121, 125);
-    --spectrum-docs-static-black-background-color: rgb(206, 247, 243);
+    --spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
+    --spectrum-docs-static-white-background-color: rgba(
+        var(--spectrum-docs-static-white-background-color-rgb)
+    );
+    --spectrum-docs-static-black-background-color-rgb: 206, 247, 243;
+    --spectrum-docs-static-black-background-color: rgba(
+        var(--spectrum-docs-static-black-background-color-rgb)
+    );
 }