@spectrum-web-components/styles 0.37.0 → 0.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/styles",
-    "version": "0.37.0",
+    "version": "0.39.0",
     "publishConfig": {
         "access": "public"
     },
@@ -104,13 +104,13 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.37.0"
+        "@spectrum-web-components/base": "^0.39.0"
     },
     "devDependencies": {
-        "@spectrum-css/commons": "^7.0.8",
+        "@spectrum-css/commons": "^8.0.0",
         "@spectrum-css/expressvars": "^3.0.9",
-        "@spectrum-css/tokens": "^11.2.0",
-        "@spectrum-css/typography": "^5.0.32",
+        "@spectrum-css/tokens": "^11.3.4",
+        "@spectrum-css/typography": "^5.0.40",
         "@spectrum-css/vars": "^9.0.8"
     },
     "customElements": "custom-elements.json",
@@ -118,5 +118,5 @@
         "./**/*.css"
     ],
     "style": "all-medium-lightest.css",
-    "gitHead": "d771f62f0d8063070af43283bb0fd5e3400bad06"
+    "gitHead": "2acc8390ef0ac6cc940958d4da705c9859155c0d"
 }

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

@@ -4,4 +4,5 @@
     --spectrum-drop-zone-background-color-rgb: var(
         --spectrum-indigo-900-rgb
     ); /* var(--spectrum-accent-color-900);*/
+    --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
 }

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

@@ -4,4 +4,5 @@
     --spectrum-drop-zone-background-color-rgb: var(
         --spectrum-indigo-900-rgb
     ); /* var(--spectrum-accent-color-900);*/
+    --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
 }

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

@@ -4,4 +4,5 @@
     --spectrum-drop-zone-background-color-rgb: var(
         --spectrum-indigo-800-rgb
     ); /* var(--spectrum-accent-color-800);*/
+    --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
 }

package/tokens/express/global-vars.css

@@ -1008,15 +1008,6 @@
     --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-900);
     --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-900);
     --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-900);
-    --system-spectrum-checkbox-control-selected-color-default: var(
-        --spectrum-gray-800
-    );
-    --system-spectrum-checkbox-control-selected-color-hover: var(
-        --spectrum-gray-900
-    );
-    --system-spectrum-checkbox-control-selected-color-down: var(
-        --spectrum-gray-900
-    );
 }
 
 :host,
@@ -1146,18 +1137,6 @@
     --system-spectrum-tag-border-color-selected-focus: var(
         --spectrum-neutral-background-color-key-focus
     );
-    --system-spectrum-tag-background-color-selected: var(
-        --spectrum-neutral-background-color-default
-    );
-    --system-spectrum-tag-background-color-selected-hover: var(
-        --spectrum-neutral-background-color-hover
-    );
-    --system-spectrum-tag-background-color-selected-active: var(
-        --spectrum-neutral-background-color-down
-    );
-    --system-spectrum-tag-background-color-selected-focus: var(
-        --spectrum-neutral-background-color-key-focus
-    );
     --system-spectrum-tag-border-color-disabled: var(
         --spectrum-disabled-border-color
     );

package/tokens/global-vars.css

@@ -254,6 +254,7 @@
     --spectrum-progress-bar-maximum-width: 768px;
     --spectrum-meter-minimum-width: 48px;
     --spectrum-meter-maximum-width: 768px;
+    --spectrum-meter-default-width: var(--spectrum-meter-width);
     --spectrum-in-line-alert-minimum-width: 240px;
     --spectrum-popover-tip-width: 16px;
     --spectrum-popover-tip-height: 8px;

package/tokens/large-vars.css

@@ -57,7 +57,7 @@
     --spectrum-progress-bar-thickness-medium: 8px;
     --spectrum-progress-bar-thickness-large: 10px;
     --spectrum-progress-bar-thickness-extra-large: 13px;
-    --spectrum-meter-default-width: 240px;
+    --spectrum-meter-width: 240px;
     --spectrum-meter-thickness-small: 5px;
     --spectrum-meter-thickness-large: 8px;
     --spectrum-tag-top-to-avatar-small: 5px;
@@ -154,9 +154,12 @@
         --spectrum-heading-cjk-size-s
     );
     --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs);
-    --spectrum-coach-mark-minimum-width: 208px;
+    --spectrum-coach-mark-width: 216px;
+    --spectrum-coach-mark-minimum-width: 216px;
+    --spectrum-coach-mark-maximum-width: 248px;
     --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300);
     --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px;
+    --spectrum-coach-mark-media-height: 162px;
     --spectrum-coach-mark-media-minimum-height: 121px;
     --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs);
     --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs);

package/tokens/medium-vars.css

@@ -57,7 +57,7 @@
     --spectrum-progress-bar-thickness-medium: 6px;
     --spectrum-progress-bar-thickness-large: 8px;
     --spectrum-progress-bar-thickness-extra-large: 10px;
-    --spectrum-meter-default-width: 192px;
+    --spectrum-meter-width: 192px;
     --spectrum-meter-thickness-small: 4px;
     --spectrum-meter-thickness-large: 6px;
     --spectrum-tag-top-to-avatar-small: 4px;
@@ -154,10 +154,16 @@
         --spectrum-heading-cjk-size-m
     );
     --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s);
+    --spectrum-coach-mark-width: 296px;
     --spectrum-coach-mark-minimum-width: 296px;
+    --spectrum-coach-mark-maximum-width: 380px;
     --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400);
     --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px;
+    --spectrum-coach-mark-media-height: 222px;
     --spectrum-coach-mark-media-minimum-height: 166px;
+    --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs);
+    --spectrum-coach-mark-body-size: var(--spectrum-body-size-s);
+    --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s);
     --spectrum-accordion-top-to-text-compact-small: 2px;
     --spectrum-accordion-top-to-text-regular-small: 5px;
     --spectrum-accordion-small-top-to-text-spacious: 9px;

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

@@ -51,4 +51,21 @@
     --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
 
     --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
+
+    --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
+    --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
+    --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
+    --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
+    --spectrum-steplist-current-marker-color-key-focus: var(
+        --spectrum-blue-700
+    );
+
+    --spectrum-treeview-item-background-color-quiet-selected: rgba(
+        var(--spectrum-gray-900-rgb),
+        0.07
+    );
+    --spectrum-treeview-item-background-color-selected: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.15
+    );
 }

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

@@ -52,4 +52,21 @@
     --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
 
     --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
+
+    --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
+    --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
+    --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
+    --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
+    --spectrum-steplist-current-marker-color-key-focus: var(
+        --spectrum-blue-700
+    );
+
+    --spectrum-treeview-item-background-color-quiet-selected: rgba(
+        var(--spectrum-gray-900-rgb),
+        0.08
+    );
+    --spectrum-treeview-item-background-color-selected: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.2
+    );
 }

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

@@ -51,4 +51,29 @@
     --spectrum-sidenav-heading-top-margin: 30px; /* TODO replace with var(--spectrum-side-navigation-item-to-header); once token is updated */
     --spectrum-sidenav-heading-bottom-margin: 10px; /* TODO replace with var(--spectrum-side-navigation-item-to-header); once token is added */
     --spectrum-sidenav-bottom-to-label: 10px; /* TODO replace with updated var(--spectrum-component-bottom-to-text-100); */
+
+    --spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
+    --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
+
+    --spectrum-coach-indicator-gap: 8px;
+    --spectrum-coach-indicator-ring-diameter: 20px;
+    --spectrum-coach-indicator-quiet-ring-diameter: 10px;
+
+    --spectrum-coachmark-buttongroup-display: none;
+    --spectrum-coachmark-buttongroup-mobile-display: flex;
+    --spectrum-coachmark-menu-display: none;
+    --spectrum-coachmark-menu-mobile-display: inline-flex;
+
+    --spectrum-well-padding: 20px;
+    --spectrum-well-margin-top: 5px;
+    --spectrum-well-min-width: 300px;
+    --spectrum-well-border-radius: 5px;
+
+    --spectrum-icon-chevron-size-50: 8px;
+
+    --spectrum-treeview-item-indentation-medium: 20px;
+    --spectrum-treeview-item-indentation-small: 15px;
+    --spectrum-treeview-item-indentation-large: 25px;
+    --spectrum-treeview-item-indentation-extra-large: 30px;
+    --spectrum-treeview-indicator-inset-block-start: 6px;
 }

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

@@ -51,4 +51,21 @@
     --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
 
     --spectrum-badge-label-icon-color-primary: var(--spectrum-white);
+
+    --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
+    --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
+    --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
+    --spectrum-well-border-color: var(--spectrum-black-rgb);
+    --spectrum-steplist-current-marker-color-key-focus: var(
+        --spectrum-blue-800
+    );
+
+    --spectrum-treeview-item-background-color-quiet-selected: rgba(
+        var(--spectrum-gray-900-rgb),
+        0.06
+    );
+    --spectrum-treeview-item-background-color-selected: rgba(
+        var(--spectrum-blue-900-rgb),
+        0.1
+    );
 }

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

@@ -51,4 +51,30 @@
     --spectrum-sidenav-heading-top-margin: 24px; /* TODO replace with var(--spectrum-side-navigation-item-to-header); once token is updated */
     --spectrum-sidenav-heading-bottom-margin: 8px; /* TODO replace with var(--spectrum-side-navigation-item-to-header); once token is added */
     --spectrum-sidenav-bottom-to-label: 8px; /* TODO replace with updated var(--spectrum-component-bottom-to-text-100); */
+
+    --spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
+    --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
+
+    --spectrum-coach-indicator-gap: 6px;
+    --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
+    --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
+
+    --spectrum-coachmark-buttongroup-display: flex;
+    --spectrum-coachmark-buttongroup-mobile-display: none;
+    --spectrum-coachmark-menu-display: inline-flex;
+    --spectrum-coachmark-menu-mobile-display: none;
+    --spectrum-well-padding: var(--spectrum-spacing-300);
+    --spectrum-well-margin-top: var(--spectrum-spacing-75);
+    --spectrum-well-min-width: 240px;
+    --spectrum-well-border-radius: var(--spectrum-spacing-75);
+
+    --spectrum-icon-chevron-size-50: 6px;
+
+    --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
+    --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
+    --spectrum-treeview-item-indentation-large: 20px;
+    --spectrum-treeview-item-indentation-extra-large: var(
+        --spectrum-spacing-400
+    );
+    --spectrum-treeview-indicator-inset-block-start: 5px;
 }

package/tokens/spectrum/custom-vars.css

@@ -15,6 +15,7 @@
     --spectrum-animation-duration-1000: 500ms;
     --spectrum-animation-duration-2000: 1000ms;
     --spectrum-animation-duration-4000: 2000ms;
+    --spectrum-animation-duration-6000: 3000ms;
     --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
     --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
     --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);

package/tokens/spectrum/global-vars.css

@@ -1022,15 +1022,6 @@
     --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-700);
     --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-800);
     --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-700);
-    --system-spectrum-checkbox-control-selected-color-default: var(
-        --spectrum-gray-700
-    );
-    --system-spectrum-checkbox-control-selected-color-hover: var(
-        --spectrum-gray-800
-    );
-    --system-spectrum-checkbox-control-selected-color-down: var(
-        --spectrum-gray-900
-    );
 }
 :host,
 :root {
@@ -1160,18 +1151,6 @@
     --system-spectrum-tag-border-color-selected-focus: var(
         --spectrum-neutral-subdued-background-color-key-focus
     );
-    --system-spectrum-tag-background-color-selected: var(
-        --spectrum-neutral-subdued-background-color-default
-    );
-    --system-spectrum-tag-background-color-selected-hover: var(
-        --spectrum-neutral-subdued-background-color-hover
-    );
-    --system-spectrum-tag-background-color-selected-active: var(
-        --spectrum-neutral-subdued-background-color-down
-    );
-    --system-spectrum-tag-background-color-selected-focus: var(
-        --spectrum-neutral-subdued-background-color-key-focus
-    );
     --system-spectrum-tag-border-color-disabled: transparent;
     --system-spectrum-tag-background-color-disabled: var(
         --spectrum-disabled-background-color