@spectrum-web-components/styles 0.31.1-react.1 → 0.31.1-react.21

package/tokens/medium-vars.css

@@ -92,6 +92,10 @@
     --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-slider-control-to-field-label-small: 5px;
+    --spectrum-slider-control-to-field-label-medium: 8px;
+    --spectrum-slider-control-to-field-label-large: 11px;
+    --spectrum-slider-control-to-field-label-extra-large: 14px;
     --spectrum-picker-visual-to-disclosure-icon-small: 7px;
     --spectrum-picker-visual-to-disclosure-icon-medium: 8px;
     --spectrum-picker-visual-to-disclosure-icon-large: 9px;
@@ -117,6 +121,8 @@
     --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-contextual-help-title-size: var(--spectrum-heading-size-xs);
+    --spectrum-contextual-help-body-size: var(--spectrum-heading-size-s);
     --spectrum-breadcrumbs-height-multiline: 72px;
     --spectrum-breadcrumbs-top-to-text: 13px;
     --spectrum-breadcrumbs-top-to-text-compact: 11px;
@@ -196,6 +202,18 @@
     --spectrum-accordion-focus-indicator-gap: 0px;
     --spectrum-accordion-content-area-top-to-content: 8px;
     --spectrum-accordion-content-area-bottom-to-content: 16px;
+    --spectrum-color-handle-size: 16px;
+    --spectrum-color-handle-size-key-focus: 32px;
+    --spectrum-side-navigation-width: 192px;
+    --spectrum-side-navigation-minimum-width: 160px;
+    --spectrum-side-navigation-maximum-width: 240px;
+    --spectrum-side-navigation-second-level-edge-to-text: 24px;
+    --spectrum-side-navigation-third-level-edge-to-text: 36px;
+    --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px;
+    --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px;
+    --spectrum-side-navigation-item-to-item: 4px;
+    --spectrum-side-navigation-item-to-header: 16px;
+    --spectrum-tray-top-to-content-area: 4px;
     --spectrum-workflow-icon-size-50: 14px;
     --spectrum-workflow-icon-size-75: 16px;
     --spectrum-workflow-icon-size-100: 18px;

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

@@ -28,4 +28,9 @@
     --spectrum-menu-item-background-color-key-focus: var(
         --spectrum-transparent-white-200
     );
+
+    /* Drop Zone background color rgb */
+    --spectrum-drop-zone-background-color-rgb: var(
+        --spectrum-blue-900-rgb
+    ); /* var(--spectrum-accent-color-900);*/
 }

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

@@ -28,4 +28,9 @@
     --spectrum-menu-item-background-color-key-focus: var(
         --spectrum-transparent-white-200
     );
+
+    /* Drop Zone background color rgb */
+    --spectrum-drop-zone-background-color-rgb: var(
+        --spectrum-blue-900-rgb
+    ); /* var(--spectrum-accent-color-900);*/
 }

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

@@ -27,9 +27,6 @@
     --spectrum-colorwheel-colorarea-container-size: 182px;
 
     --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;

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

@@ -28,4 +28,9 @@
     --spectrum-menu-item-background-color-key-focus: var(
         --spectrum-transparent-black-200
     );
+
+    /* Drop Zone background color rgb */
+    --spectrum-drop-zone-background-color-rgb: var(
+        --spectrum-blue-800-rgb
+    ); /* var(--spectrum-accent-color-800);*/
 }

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

@@ -27,9 +27,6 @@
     --spectrum-colorwheel-colorarea-container-size: 144px;
 
     --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;

package/tokens/spectrum/global-vars.css

@@ -22,22 +22,10 @@ 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);
@@ -1284,12 +1272,49 @@ governing permissions and limitations under the License.
     --system-spectrum-picker-background-color-key-focus: var(
         --spectrum-gray-200
     );
-    --system-spectrum-picker-border-color-default: var(--spectrum-gray-400);
+    --system-spectrum-picker-border-color-default: var(--spectrum-gray-500);
     --system-spectrum-picker-border-color-default-open: var(
-        --spectrum-gray-400
+        --spectrum-gray-500
+    );
+    --system-spectrum-picker-border-color-hover: var(--spectrum-gray-600);
+    --system-spectrum-picker-border-color-hover-open: var(--spectrum-gray-600);
+    --system-spectrum-picker-border-color-active: var(--spectrum-gray-700);
+    --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-600);
+}
+
+:host,
+:root {
+    --system-spectrum-slider-track-color: var(--spectrum-gray-300);
+    --system-spectrum-slider-track-fill-color: var(--spectrum-gray-700);
+    --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
+    --system-spectrum-slider-ramp-track-color-disabled: var(
+        --spectrum-gray-200
+    );
+    --system-spectrum-slider-handle-background-color: transparent;
+    --system-spectrum-slider-handle-background-color-disabled: transparent;
+    --system-spectrum-slider-ramp-handle-background-color: var(
+        --spectrum-gray-100
     );
-    --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-slider-ticks-handle-background-color: var(
+        --spectrum-gray-100
+    );
+    --system-spectrum-slider-handle-border-color: var(--spectrum-gray-700);
+    --system-spectrum-slider-handle-disabled-background-color: var(
+        --spectrum-gray-100
+    );
+    --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
+    --system-spectrum-slider-handle-border-color-hover: var(
+        --spectrum-gray-800
+    );
+    --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
+    --system-spectrum-slider-handle-border-color-key-focus: var(
+        --spectrum-gray-800
+    );
+    --system-spectrum-slider-handle-focus-ring-color-key-focus: var(
+        --spectrum-focus-indicator-color
+    );
+}
+:host,
+:root {
+    --system-spectrum-popover-border-width: var(--spectrum-border-width-100);
 }

package/tokens/spectrum/large-vars.css

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