@spectrum-web-components/styles 0.40.0 → 0.40.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/styles",
-    "version": "0.40.0",
+    "version": "0.40.2",
     "publishConfig": {
         "access": "public"
     },
@@ -104,12 +104,12 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.40.0"
+        "@spectrum-web-components/base": "^0.40.2"
     },
     "devDependencies": {
         "@spectrum-css/commons": "^8.0.0",
         "@spectrum-css/expressvars": "^3.0.9",
-        "@spectrum-css/tokens": "^12.0.0",
+        "@spectrum-css/tokens": "^13.0.4",
         "@spectrum-css/typography": "^5.0.40",
         "@spectrum-css/vars": "^9.0.8"
     },
@@ -118,5 +118,5 @@
         "./**/*.css"
     ],
     "style": "all-medium-lightest.css",
-    "gitHead": "24d5569a839da94892ecfd125428779587ffb1f5"
+    "gitHead": "e5fd35c7a98569150ca695ec0e0e7411c9c64c28"
 }

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

@@ -5,4 +5,13 @@
         --spectrum-indigo-900-rgb
     ); /* var(--spectrum-accent-color-900);*/
     --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
+
+    --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
+    --spectrum-assetcard-border-color-selected-hover: var(
+        --spectrum-indigo-700
+    );
+    --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
+    --spectrum-assetcard-selectionindicator-background-color-ordered: var(
+        --spectrum-indigo-700
+    );
 }

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

@@ -5,4 +5,13 @@
         --spectrum-indigo-900-rgb
     ); /* var(--spectrum-accent-color-900);*/
     --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
+
+    --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
+    --spectrum-assetcard-border-color-selected-hover: var(
+        --spectrum-indigo-700
+    );
+    --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
+    --spectrum-assetcard-selectionindicator-background-color-ordered: var(
+        --spectrum-indigo-700
+    );
 }

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

@@ -6,4 +6,6 @@
     --spectrum-dialog-confirm-border-radius: 8px;
 
     --spectrum-dial-border-radius: 15px;
+
+    --spectrum-assetcard-focus-ring-border-radius: 12px;
 }

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

@@ -5,4 +5,15 @@
         --spectrum-indigo-800-rgb
     ); /* var(--spectrum-accent-color-800);*/
     --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
+
+    --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900);
+    --spectrum-assetcard-border-color-selected-hover: var(
+        --spectrum-indigo-900
+    );
+    --spectrum-assetcard-border-color-selected-down: var(
+        --spectrum-indigo-1000
+    );
+    --spectrum-assetcard-selectionindicator-background-color-ordered: var(
+        --spectrum-indigo-900
+    );
 }

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

@@ -6,4 +6,6 @@
     --spectrum-dialog-confirm-border-radius: 6px;
 
     --spectrum-dial-border-radius: 12px;
+
+    --spectrum-assetcard-focus-ring-border-radius: 10px;
 }

package/tokens/global-vars.css

@@ -96,8 +96,6 @@
     --spectrum-color-loupe-drop-shadow-color: var(
         --spectrum-transparent-black-300
     );
-    --spectrum-color-loupe-drop-shadow-y: 2px;
-    --spectrum-color-loupe-drop-shadow-blur: 8px;
     --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200);
     --spectrum-color-loupe-outer-border: var(--spectrum-white);
     --spectrum-card-selection-background-color: var(--spectrum-gray-100);
@@ -305,6 +303,8 @@
     --spectrum-color-loupe-bottom-to-color-handle: 12px;
     --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200);
     --spectrum-color-loupe-inner-border-width: 1px;
+    --spectrum-color-loupe-drop-shadow-y: 2px;
+    --spectrum-color-loupe-drop-shadow-blur: 8px;
     --spectrum-card-minimum-width: 100px;
     --spectrum-card-preview-minimum-height: 130px;
     --spectrum-card-selection-background-size: 40px;

package/tokens/large-vars.css

@@ -160,7 +160,7 @@
     --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs);
     --spectrum-opacity-checkerboard-square-size: 10px;
     --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs);
-    --spectrum-contextual-help-body-size: var(--spectrum-heading-size-xs);
+    --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs);
     --spectrum-breadcrumbs-height-multiline: 84px;
     --spectrum-breadcrumbs-top-to-text: 17px;
     --spectrum-breadcrumbs-top-to-text-compact: 16px;
@@ -362,7 +362,8 @@
     --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px;
     --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px;
     --spectrum-side-navigation-item-to-item: 5px;
-    --spectrum-side-navigation-item-to-header: 20px;
+    --spectrum-side-navigation-item-to-header: 30px;
+    --spectrum-side-navigation-header-to-item: 10px;
     --spectrum-side-navigation-bottom-to-text: 10px;
     --spectrum-tray-top-to-content-area: 5px;
     --spectrum-text-to-visual-50: 8px;
@@ -481,10 +482,10 @@
     --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px;
     --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px;
     --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px;
-    --spectrum-navigational-indicator-top-to-back-icon-small: 9px;
-    --spectrum-navigational-indicator-top-to-back-icon-medium: 13px;
-    --spectrum-navigational-indicator-top-to-back-icon-large: 17px;
-    --spectrum-navigational-indicator-top-to-back-icon-extra-large: 22px;
+    --spectrum-navigational-indicator-top-to-back-icon-small: 7px;
+    --spectrum-navigational-indicator-top-to-back-icon-medium: 12px;
+    --spectrum-navigational-indicator-top-to-back-icon-large: 16px;
+    --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px;
     --spectrum-color-control-track-width: 30px;
     --spectrum-font-size-50: 13px;
     --spectrum-font-size-75: 15px;

package/tokens/medium-vars.css

@@ -160,7 +160,7 @@
     --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-contextual-help-body-size: var(--spectrum-body-size-s);
     --spectrum-breadcrumbs-height-multiline: 72px;
     --spectrum-breadcrumbs-top-to-text: 13px;
     --spectrum-breadcrumbs-top-to-text-compact: 11px;
@@ -362,7 +362,8 @@
     --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-side-navigation-item-to-header: 24px;
+    --spectrum-side-navigation-header-to-item: 8px;
     --spectrum-side-navigation-bottom-to-text: 8px;
     --spectrum-tray-top-to-content-area: 4px;
     --spectrum-text-to-visual-50: 6px;
@@ -481,10 +482,10 @@
     --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px;
     --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px;
     --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px;
-    --spectrum-navigational-indicator-top-to-back-icon-small: 7px;
-    --spectrum-navigational-indicator-top-to-back-icon-medium: 11px;
-    --spectrum-navigational-indicator-top-to-back-icon-large: 14px;
-    --spectrum-navigational-indicator-top-to-back-icon-extra-large: 17px;
+    --spectrum-navigational-indicator-top-to-back-icon-small: 6px;
+    --spectrum-navigational-indicator-top-to-back-icon-medium: 9px;
+    --spectrum-navigational-indicator-top-to-back-icon-large: 12px;
+    --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px;
     --spectrum-color-control-track-width: 24px;
     --spectrum-font-size-50: 11px;
     --spectrum-font-size-75: 12px;

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

@@ -21,6 +21,9 @@
         --spectrum-blue-900-rgb
     ); /* var(--spectrum-accent-color-900);*/
 
+    /* Drop Indicator color rgb */
+    --spectrum-dropindicator-color: var(--spectrum-blue-700);
+
     --spectrum-calendar-day-background-color-selected: rgba(
         var(--spectrum-blue-800-rgb),
         0.15
@@ -55,7 +58,9 @@
     --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
     );
@@ -82,4 +87,22 @@
         --spectrum-magenta-900
     );
     --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
+
+    --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
+    --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
+    --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
+    --spectrum-assetcard-selectionindicator-background-color-ordered: var(
+        --spectrum-blue-800
+    );
+    --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
+
+    --spectrum-assetlist-item-background-color-selected-hover: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.25
+    );
+    --spectrum-assetlist-item-background-color-selected: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.15
+    );
+    --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
 }

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

@@ -21,6 +21,9 @@
         --spectrum-blue-900-rgb
     ); /* var(--spectrum-accent-color-900);*/
 
+    /* Drop Indicator color rgb */
+    --spectrum-dropindicator-color: var(--spectrum-blue-700);
+
     --spectrum-calendar-day-background-color-selected: rgba(
         var(--spectrum-blue-800-rgb),
         0.2
@@ -56,7 +59,9 @@
     --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
     );
@@ -83,4 +88,22 @@
         --spectrum-magenta-900
     );
     --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
+
+    --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
+    --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
+    --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
+    --spectrum-assetcard-selectionindicator-background-color-ordered: var(
+        --spectrum-blue-800
+    );
+    --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
+
+    --spectrum-assetlist-item-background-color-selected-hover: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.3
+    );
+    --spectrum-assetlist-item-background-color-selected: rgba(
+        var(--spectrum-blue-800-rgb),
+        0.2
+    );
+    --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
 }

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

@@ -48,10 +48,6 @@
         --spectrum-spacing-200
     );
 
-    --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);
 
@@ -76,8 +72,9 @@
     --spectrum-treeview-item-indentation-large: 25px;
     --spectrum-treeview-item-indentation-extra-large: 30px;
     --spectrum-treeview-indicator-inset-block-start: 6px;
-    --spectrum-dialog-confirm-entry-animation-distance: 25px;
+    --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
 
+    --spectrum-dialog-confirm-entry-animation-distance: 25px;
     --spectrum-dialog-confirm-hero-height: 160px;
     --spectrum-dialog-confirm-border-radius: 5px;
     --spectrum-dialog-confirm-title-text-size: 19px;
@@ -104,4 +101,14 @@
     --spectrum-dial-controls-margin: 10px;
     --spectrum-dial-label-gap-y: 6px;
     --spectrum-dial-label-container-top-to-text: 5px;
+
+    --spectrum-assetcard-focus-ring-border-radius: 9px;
+    --spectrum-assetcard-selectionindicator-margin: 15px;
+    --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
+    --spectrum-assetcard-header-content-font-size: var(
+        --spectrum-heading-size-xxs
+    );
+    --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
+
+    --spectrum-tooltip-animation-distance: 5px;
 }

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

@@ -21,6 +21,9 @@
         --spectrum-blue-800-rgb
     ); /* var(--spectrum-accent-color-800);*/
 
+    /* Drop Indicator color rgb */
+    --spectrum-dropindicator-color: var(--spectrum-blue-800);
+
     --spectrum-calendar-day-background-color-selected: rgba(
         var(--spectrum-blue-900-rgb),
         0.1
@@ -55,7 +58,9 @@
     --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
     );
@@ -82,4 +87,22 @@
         --spectrum-magenta-1100
     );
     --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
+
+    --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
+    --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
+    --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
+    --spectrum-assetcard-selectionindicator-background-color-ordered: var(
+        --spectrum-blue-900
+    );
+    --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
+
+    --spectrum-assetlist-item-background-color-selected-hover: rgba(
+        var(--spectrum-blue-900-rgb),
+        0.2
+    );
+    --spectrum-assetlist-item-background-color-selected: rgba(
+        var(--spectrum-blue-900-rgb),
+        0.1
+    );
+    --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
 }

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

@@ -48,10 +48,6 @@
         --spectrum-spacing-100
     );
 
-    --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);
 
@@ -77,8 +73,9 @@
         --spectrum-spacing-400
     );
     --spectrum-treeview-indicator-inset-block-start: 5px;
-    --spectrum-dialog-confirm-entry-animation-distance: 20px;
+    --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
 
+    --spectrum-dialog-confirm-entry-animation-distance: 20px;
     --spectrum-dialog-confirm-hero-height: 128px;
     --spectrum-dialog-confirm-border-radius: 4px;
     --spectrum-dialog-confirm-title-text-size: 18px;
@@ -105,4 +102,14 @@
     --spectrum-dial-controls-margin: 8px;
     --spectrum-dial-label-gap-y: 5px;
     --spectrum-dial-label-container-top-to-text: 4px;
+
+    --spectrum-assetcard-focus-ring-border-radius: 8px;
+    --spectrum-assetcard-selectionindicator-margin: 12px;
+    --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
+    --spectrum-assetcard-header-content-font-size: var(
+        --spectrum-heading-size-xs
+    );
+    --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
+
+    --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
 }