chore(tokens): add custom tokens for dropindicator, assetlist, treeview (#2228)

* chore(dropindicator): adds custom tokens

* chore(datepicker): adds custom tokens

* chore(assetlist): adds custom tokens

* Revert "chore(datepicker): adds custom tokens"

This reverts commit 0fbb37d.

* chore(treeview): adds custom tokens

* refactor(tokens): add spacing

---------

Co-authored-by: Melissa Thompson <mthompson@heysparkbox.com>

Author: jenndiaz

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

@@ -20,7 +20,7 @@ governing permissions and limitations under the License.
   /* Drop Zone background color rgb */
   --spectrum-drop-zone-background-color-rgb: var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/
 
-  /* Drop Indicator color rgb */  
+  /* 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);
@@ -37,7 +37,9 @@ governing permissions and limitations under the License.
   --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);
@@ -58,4 +60,8 @@ governing permissions and limitations under the License.
   --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);
 }

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

@@ -20,7 +20,7 @@ governing permissions and limitations under the License.
   /* Drop Zone background color rgb */
   --spectrum-drop-zone-background-color-rgb: var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/
 
-  /* Drop Indicator color rgb */  
+  /* 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);
@@ -37,7 +37,9 @@ governing permissions and limitations under the License.
   --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);
@@ -58,4 +60,8 @@ governing permissions and limitations under the License.
   --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);
 }

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

@@ -83,8 +83,9 @@ governing permissions and limitations under the License.
   --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;

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

@@ -21,7 +21,7 @@ governing permissions and limitations under the License.
   /* Drop Zone background color rgb */
   --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800);*/
 
-  /* Drop Indicator color rgb */  
+  /* 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);
@@ -38,7 +38,9 @@ governing permissions and limitations under the License.
   --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);
@@ -59,4 +61,8 @@ governing permissions and limitations under the License.
   --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);
 }

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

@@ -82,8 +82,9 @@ governing permissions and limitations under the License.
   --spectrum-treeview-item-indentation-large: 20px;
   --spectrum-treeview-item-indentation-extra-large: var(--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;