@spectrum-web-components/styles 0.39.4 → 0.40.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/styles",
-    "version": "0.39.4",
+    "version": "0.40.1",
     "publishConfig": {
         "access": "public"
     },
@@ -104,12 +104,12 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.39.4"
+        "@spectrum-web-components/base": "^0.40.1"
     },
     "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": "f745c90e8e9ea85ff10be025e058b14cc925ec9f"
+    "gitHead": "a75c4f83094c505d64658dbc7de20b5f18a8fde1"
 }

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/express/global-vars.css

@@ -1076,6 +1076,38 @@
     --system-spectrum-picker-border-color-key-focus: transparent;
 }
 
+:host,
+:root {
+    --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var(
+        --spectrum-gray-200
+    );
+    --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var(
+        --spectrum-gray-300
+    );
+    --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var(
+        --spectrum-gray-400
+    );
+    --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var(
+        --spectrum-gray-300
+    );
+    --system-spectrum-pickerbutton-spectrum-picker-button-border-color: none;
+    --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var(
+        --spectrum-corner-radius-75
+    );
+    --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: var(
+        --spectrum-corner-radius-200
+    );
+    --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: var(
+        --spectrum-corner-radius-75
+    );
+    --system-spectrum-pickerbutton-spectrum-picker-button-border-width: 0px;
+}
+
+:host,
+:root {
+    --system-spectrum-popover-border-width: 0;
+}
+
 :host,
 :root {
     --system-spectrum-radio-button-border-color-default: var(
@@ -1097,6 +1129,111 @@
         --spectrum-accent-color-1000
     );
 }
+:host,
+:root {
+    --system-spectrum-search-border-radius: calc(
+        var(--spectrum-component-height-100) / 2
+    );
+    --system-spectrum-search-edge-to-visual: var(
+        --spectrum-component-pill-edge-to-visual-100
+    );
+    --system-spectrum-search-border-color-default: var(--spectrum-gray-400);
+    --system-spectrum-search-border-color-hover: var(--spectrum-gray-500);
+    --system-spectrum-search-border-color-focus: var(--spectrum-gray-800);
+    --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
+    --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
+    --system-spectrum-search-sizes-border-radius: calc(
+        var(--spectrum-component-height-75) / 2
+    );
+    --system-spectrum-search-sizes-edge-to-visual: var(
+        --spectrum-component-pill-edge-to-visual-75
+    );
+    --system-spectrum-search-sizem-border-radius: calc(
+        var(--spectrum-component-height-100) / 2
+    );
+    --system-spectrum-search-sizem-edge-to-visual: var(
+        --spectrum-component-pill-edge-to-visual-100
+    );
+    --system-spectrum-search-sizel-border-radius: calc(
+        var(--spectrum-component-height-200) / 2
+    );
+    --system-spectrum-search-sizel-edge-to-visual: var(
+        --spectrum-component-pill-edge-to-visual-200
+    );
+    --system-spectrum-search-sizexl-border-radius: calc(
+        var(--spectrum-component-height-300) / 2
+    );
+    --system-spectrum-search-sizexl-edge-to-visual: var(
+        --spectrum-component-pill-edge-to-visual-300
+    );
+}
+
+:host,
+:root {
+    --system-spectrum-slider-track-color: var(--spectrum-gray-200);
+    --system-spectrum-slider-track-fill-color: var(--spectrum-gray-600);
+    --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-300);
+    --system-spectrum-slider-ramp-track-color-disabled: var(
+        --spectrum-gray-200
+    );
+    --system-spectrum-slider-handle-background-color: var(--spectrum-gray-50);
+    --system-spectrum-slider-handle-background-color-disabled: var(
+        --spectrum-gray-50
+    );
+    --system-spectrum-slider-ramp-handle-background-color: var(
+        --spectrum-gray-50
+    );
+    --system-spectrum-slider-ticks-handle-background-color: var(
+        --spectrum-gray-50
+    );
+    --system-spectrum-slider-handle-border-color: var(--spectrum-gray-800);
+    --system-spectrum-slider-handle-disabled-background-color: var(
+        --spectrum-gray-50
+    );
+    --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
+    --system-spectrum-slider-handle-border-color-hover: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-900);
+    --system-spectrum-slider-handle-border-color-key-focus: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-slider-handle-focus-ring-color-key-focus: var(
+        --spectrum-focus-indicator-color
+    );
+}
+
+:host,
+:root {
+    --system-spectrum-stepper-border-width: var(--spectrum-border-width-200);
+    --system-spectrum-stepper-buttons-border-style: solid;
+    --system-spectrum-stepper-buttons-border-width: var(
+        --spectrum-border-width-200
+    );
+    --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
+    --system-spectrum-stepper-border-color: var(--spectrum-gray-400);
+    --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-500);
+    --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
+    --system-spectrum-stepper-border-color-focus-hover: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-stepper-border-color-keyboard-focus: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-stepper-button-border-radius-reset: var(
+        --spectrum-in-field-button-fill-stacked-inner-border-rounding
+    );
+    --system-spectrum-stepper-button-background-color-focus: var(
+        --spectrum-gray-400
+    );
+    --system-spectrum-stepper-button-background-color-keyboard-focus: var(
+        --spectrum-gray-300
+    );
+    --system-spectrum-stepper-disabled-buttons-background-color: var(
+        --spectrum-disabled-background-color
+    );
+    --system-spectrum-stepper-disabled-buttons-border-width: 0;
+}
 
 :host,
 :root {
@@ -1124,6 +1261,11 @@
     );
 }
 
+:host,
+:root {
+    --system-spectrum-tabs-font-weight: var(--spectrum-bold-font-weight);
+}
+
 :host,
 :root {
     --system-spectrum-tag-border-color: var(--spectrum-gray-300);
@@ -1200,114 +1342,6 @@
     );
 }
 
-:host,
-:root {
-    --system-spectrum-toast-background-color-default: var(
-        --spectrum-neutral-background-color-default
-    );
-}
-
-:host,
-:root {
-    --system-spectrum-tooltip-backgound-color-default-neutral: var(
-        --spectrum-neutral-background-color-default
-    );
-}
-
-:host,
-:root {
-    --system-spectrum-picker-background-color-default: var(--spectrum-gray-200);
-    --system-spectrum-picker-background-color-default-open: var(
-        --spectrum-gray-300
-    );
-    --system-spectrum-picker-background-color-active: var(--spectrum-gray-400);
-    --system-spectrum-picker-background-color-hover: var(--spectrum-gray-300);
-    --system-spectrum-picker-background-color-hover-open: var(
-        --spectrum-gray-300
-    );
-    --system-spectrum-picker-background-color-key-focus: var(
-        --spectrum-gray-300
-    );
-    --system-spectrum-picker-border-color-default: transparent;
-    --system-spectrum-picker-border-color-default-open: transparent;
-    --system-spectrum-picker-border-color-hover: transparent;
-    --system-spectrum-picker-border-color-hover-open: transparent;
-    --system-spectrum-picker-border-color-active: transparent;
-    --system-spectrum-picker-border-color-key-focus: transparent;
-}
-
-:host,
-:root {
-    --system-spectrum-slider-track-color: var(--spectrum-gray-200);
-    --system-spectrum-slider-track-fill-color: var(--spectrum-gray-600);
-    --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-300);
-    --system-spectrum-slider-ramp-track-color-disabled: var(
-        --spectrum-gray-200
-    );
-    --system-spectrum-slider-handle-background-color: var(--spectrum-gray-50);
-    --system-spectrum-slider-handle-background-color-disabled: var(
-        --spectrum-gray-50
-    );
-    --system-spectrum-slider-ramp-handle-background-color: var(
-        --spectrum-gray-50
-    );
-    --system-spectrum-slider-ticks-handle-background-color: var(
-        --spectrum-gray-50
-    );
-    --system-spectrum-slider-handle-border-color: var(--spectrum-gray-800);
-    --system-spectrum-slider-handle-disabled-background-color: var(
-        --spectrum-gray-50
-    );
-    --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
-    --system-spectrum-slider-handle-border-color-hover: var(
-        --spectrum-gray-900
-    );
-    --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-900);
-    --system-spectrum-slider-handle-border-color-key-focus: var(
-        --spectrum-gray-900
-    );
-    --system-spectrum-slider-handle-focus-ring-color-key-focus: var(
-        --spectrum-focus-indicator-color
-    );
-}
-
-:host,
-:root {
-    --system-spectrum-popover-border-width: 0;
-}
-
-:host,
-:root {
-    --system-spectrum-stepper-border-width: var(--spectrum-border-width-200);
-    --system-spectrum-stepper-buttons-border-style: solid;
-    --system-spectrum-stepper-buttons-border-width: var(
-        --spectrum-border-width-200
-    );
-    --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
-    --system-spectrum-stepper-border-color: var(--spectrum-gray-400);
-    --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-500);
-    --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
-    --system-spectrum-stepper-border-color-focus-hover: var(
-        --spectrum-gray-900
-    );
-    --system-spectrum-stepper-border-color-keyboard-focus: var(
-        --spectrum-gray-900
-    );
-    --system-spectrum-stepper-button-border-radius-reset: var(
-        --spectrum-in-field-button-fill-stacked-inner-border-rounding
-    );
-    --system-spectrum-stepper-button-background-color-focus: var(
-        --spectrum-gray-400
-    );
-    --system-spectrum-stepper-button-background-color-keyboard-focus: var(
-        --spectrum-gray-300
-    );
-    --system-spectrum-stepper-disabled-buttons-background-color: var(
-        --spectrum-disabled-background-color
-    );
-    --system-spectrum-stepper-disabled-buttons-border-width: 0;
-}
-
 :host,
 :root {
     --system-spectrum-textfield-border-color: var(--spectrum-gray-400);
@@ -1321,73 +1355,17 @@
     );
     --system-spectrum-textfield-border-width: var(--spectrum-border-width-200);
 }
-:host,
-:root {
-    --system-spectrum-search-border-radius: calc(
-        var(--spectrum-component-height-100) / 2
-    );
-    --system-spectrum-search-edge-to-visual: var(
-        --spectrum-component-pill-edge-to-visual-100
-    );
-    --system-spectrum-search-border-color-default: var(--spectrum-gray-400);
-    --system-spectrum-search-border-color-hover: var(--spectrum-gray-500);
-    --system-spectrum-search-border-color-focus: var(--spectrum-gray-800);
-    --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
-    --system-spectrum-search-sizes-border-radius: calc(
-        var(--spectrum-component-height-75) / 2
-    );
-    --system-spectrum-search-sizes-edge-to-visual: var(
-        --spectrum-component-pill-edge-to-visual-75
-    );
-    --system-spectrum-search-sizem-border-radius: calc(
-        var(--spectrum-component-height-100) / 2
-    );
-    --system-spectrum-search-sizem-edge-to-visual: var(
-        --spectrum-component-pill-edge-to-visual-100
-    );
-    --system-spectrum-search-sizel-border-radius: calc(
-        var(--spectrum-component-height-200) / 2
-    );
-    --system-spectrum-search-sizel-edge-to-visual: var(
-        --spectrum-component-pill-edge-to-visual-200
-    );
-    --system-spectrum-search-sizexl-border-radius: calc(
-        var(--spectrum-component-height-300) / 2
-    );
-    --system-spectrum-search-sizexl-edge-to-visual: var(
-        --spectrum-component-pill-edge-to-visual-300
-    );
-}
 
 :host,
 :root {
-    --system-spectrum-tabs-font-weight: var(--spectrum-bold-font-weight);
+    --system-spectrum-toast-background-color-default: var(
+        --spectrum-neutral-background-color-default
+    );
 }
 
 :host,
 :root {
-    --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var(
-        --spectrum-gray-200
-    );
-    --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var(
-        --spectrum-gray-300
-    );
-    --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var(
-        --spectrum-gray-400
-    );
-    --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var(
-        --spectrum-gray-300
-    );
-    --system-spectrum-pickerbutton-spectrum-picker-button-border-color: none;
-    --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var(
-        --spectrum-corner-radius-75
-    );
-    --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: var(
-        --spectrum-corner-radius-200
-    );
-    --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: var(
-        --spectrum-corner-radius-75
+    --system-spectrum-tooltip-backgound-color-default-neutral: var(
+        --spectrum-neutral-background-color-default
     );
-    --system-spectrum-pickerbutton-spectrum-picker-button-border-width: 0px;
 }

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);
 }

package/tokens/spectrum/global-vars.css

@@ -1090,6 +1090,34 @@
     --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-pickerbutton-spectrum-picker-button-background-color: var(
+        --spectrum-gray-75
+    );
+    --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var(
+        --spectrum-gray-200
+    );
+    --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var(
+        --spectrum-gray-300
+    );
+    --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var(
+        --spectrum-gray-200
+    );
+    --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit;
+    --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var(
+        --spectrum-corner-radius-100
+    );
+    --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0;
+    --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0;
+    --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var(
+        --spectrum-border-width-100
+    );
+}
+:host,
+:root {
+    --system-spectrum-popover-border-width: var(--spectrum-border-width-100);
+}
 
 :host,
 :root {
@@ -1112,6 +1140,99 @@
         --spectrum-accent-color-1000
     );
 }
+:host,
+:root {
+    --system-spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+    --system-spectrum-search-edge-to-visual: var(
+        --spectrum-component-edge-to-visual-100
+    );
+    --system-spectrum-search-border-color-default: var(--spectrum-gray-500);
+    --system-spectrum-search-border-color-hover: var(--spectrum-gray-600);
+    --system-spectrum-search-border-color-focus: var(--spectrum-gray-800);
+    --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
+    --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
+    --system-spectrum-search-sizes-border-radius: var(
+        --spectrum-corner-radius-100
+    );
+    --system-spectrum-search-sizes-edge-to-visual: var(
+        --spectrum-component-edge-to-visual-75
+    );
+    --system-spectrum-search-sizem-border-radius: var(
+        --spectrum-corner-radius-100
+    );
+    --system-spectrum-search-sizem-edge-to-visual: var(
+        --spectrum-component-edge-to-visual-100
+    );
+    --system-spectrum-search-sizel-border-radius: var(
+        --spectrum-corner-radius-100
+    );
+    --system-spectrum-search-sizel-edge-to-visual: var(
+        --spectrum-component-edge-to-visual-200
+    );
+    --system-spectrum-search-sizexl-border-radius: var(
+        --spectrum-corner-radius-100
+    );
+    --system-spectrum-search-sizexl-edge-to-visual: var(
+        --spectrum-component-edge-to-visual-300
+    );
+}
+
+: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-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-stepper-border-width: var(--spectrum-border-width-100);
+    --system-spectrum-stepper-buttons-border-style: none;
+    --system-spectrum-stepper-buttons-border-width: 0;
+    --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
+    --system-spectrum-stepper-border-color: var(--spectrum-gray-500);
+    --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
+    --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
+    --system-spectrum-stepper-border-color-focus-hover: var(
+        --spectrum-gray-800
+    );
+    --system-spectrum-stepper-border-color-keyboard-focus: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-stepper-button-border-radius-reset: 0px;
+    --system-spectrum-stepper-button-background-color-focus: var(
+        --spectrum-gray-300
+    );
+    --system-spectrum-stepper-button-background-color-keyboard-focus: var(
+        --spectrum-gray-200
+    );
+}
 
 :host,
 :root {
@@ -1138,6 +1259,11 @@
         --spectrum-gray-800
     );
 }
+
+:host,
+:root {
+    --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight);
+}
 :host,
 :root {
     --system-spectrum-tag-border-color: var(--spectrum-gray-700);
@@ -1214,103 +1340,6 @@
     );
 }
 :host,
-:root {
-    --system-spectrum-toast-background-color-default: var(
-        --spectrum-neutral-subdued-background-color-default
-    );
-}
-:host,
-:root {
-    --system-spectrum-tooltip-backgound-color-default-neutral: var(
-        --spectrum-neutral-subdued-background-color-default
-    );
-}
-
-:host,
-:root {
-    --system-spectrum-picker-background-color-default: var(--spectrum-gray-75);
-    --system-spectrum-picker-background-color-default-open: var(
-        --spectrum-gray-200
-    );
-    --system-spectrum-picker-background-color-active: var(--spectrum-gray-300);
-    --system-spectrum-picker-background-color-hover: var(--spectrum-gray-200);
-    --system-spectrum-picker-background-color-hover-open: var(
-        --spectrum-gray-200
-    );
-    --system-spectrum-picker-background-color-key-focus: var(
-        --spectrum-gray-200
-    );
-    --system-spectrum-picker-border-color-default: var(--spectrum-gray-500);
-    --system-spectrum-picker-border-color-default-open: var(
-        --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-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);
-}
-
-:host,
-:root {
-    --system-spectrum-stepper-border-width: var(--spectrum-border-width-100);
-    --system-spectrum-stepper-buttons-border-style: none;
-    --system-spectrum-stepper-buttons-border-width: 0;
-    --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
-    --system-spectrum-stepper-border-color: var(--spectrum-gray-500);
-    --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
-    --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
-    --system-spectrum-stepper-border-color-focus-hover: var(
-        --spectrum-gray-800
-    );
-    --system-spectrum-stepper-border-color-keyboard-focus: var(
-        --spectrum-gray-900
-    );
-    --system-spectrum-stepper-button-border-radius-reset: 0px;
-    --system-spectrum-stepper-button-background-color-focus: var(
-        --spectrum-gray-300
-    );
-    --system-spectrum-stepper-button-background-color-keyboard-focus: var(
-        --spectrum-gray-200
-    );
-}
-:host,
 :root {
     --system-spectrum-textfield-border-color: var(--spectrum-gray-500);
     --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
@@ -1323,68 +1352,16 @@
     );
     --system-spectrum-textfield-border-width: var(--spectrum-border-width-100);
 }
+
 :host,
 :root {
-    --system-spectrum-search-border-radius: var(--spectrum-corner-radius-100);
-    --system-spectrum-search-edge-to-visual: var(
-        --spectrum-component-edge-to-visual-100
-    );
-    --system-spectrum-search-border-color-default: var(--spectrum-gray-500);
-    --system-spectrum-search-border-color-hover: var(--spectrum-gray-600);
-    --system-spectrum-search-border-color-focus: var(--spectrum-gray-800);
-    --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
-    --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
-    --system-spectrum-search-sizes-border-radius: var(
-        --spectrum-corner-radius-100
-    );
-    --system-spectrum-search-sizes-edge-to-visual: var(
-        --spectrum-component-edge-to-visual-75
-    );
-    --system-spectrum-search-sizem-border-radius: var(
-        --spectrum-corner-radius-100
-    );
-    --system-spectrum-search-sizem-edge-to-visual: var(
-        --spectrum-component-edge-to-visual-100
-    );
-    --system-spectrum-search-sizel-border-radius: var(
-        --spectrum-corner-radius-100
-    );
-    --system-spectrum-search-sizel-edge-to-visual: var(
-        --spectrum-component-edge-to-visual-200
-    );
-    --system-spectrum-search-sizexl-border-radius: var(
-        --spectrum-corner-radius-100
-    );
-    --system-spectrum-search-sizexl-edge-to-visual: var(
-        --spectrum-component-edge-to-visual-300
+    --system-spectrum-toast-background-color-default: var(
+        --spectrum-neutral-subdued-background-color-default
     );
 }
 :host,
 :root {
-    --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight);
-}
-
-:host,
-:root {
-    --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var(
-        --spectrum-gray-75
-    );
-    --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var(
-        --spectrum-gray-200
-    );
-    --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var(
-        --spectrum-gray-300
-    );
-    --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var(
-        --spectrum-gray-200
-    );
-    --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit;
-    --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var(
-        --spectrum-corner-radius-100
-    );
-    --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0;
-    --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0;
-    --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var(
-        --spectrum-border-width-100
+    --system-spectrum-tooltip-backgound-color-default-neutral: var(
+        --spectrum-neutral-subdued-background-color-default
     );
 }