@spectrum-web-components/styles 0.23.0 → 0.23.2

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;