chore(assetcard): adds custom tokens

Author: Melissa Thompson

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

@@ -15,4 +15,9 @@ governing permissions and limitations under the License.
   /* Drop Zone background color rgb */
   --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);
+
+  --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);
 }

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

@@ -15,4 +15,9 @@ governing permissions and limitations under the License.
   /* Drop Zone background color rgb */
   --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);
+
+  --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);
 }

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

@@ -19,4 +19,6 @@ governing permissions and limitations under the License.
   --spectrum-dialog-confirm-border-radius: 8px;
 
   --spectrum-dial-border-radius: 15px;
+
+  --spectrum-assetcard-focus-ring-border-radius: 12px;
 }

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

@@ -16,4 +16,9 @@ governing permissions and limitations under the License.
   /* Drop Zone background color rgb */
   --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);
+
+  --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);
 }

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

@@ -19,4 +19,6 @@ governing permissions and limitations under the License.
   --spectrum-dialog-confirm-border-radius: 6px;
 
   --spectrum-dial-border-radius: 12px;
+
+  --spectrum-assetcard-focus-ring-border-radius: 10px;
 }

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

@@ -56,4 +56,10 @@ governing permissions and limitations under the License.
   --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);
+
+  --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);
 }

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

@@ -56,4 +56,10 @@ governing permissions and limitations under the License.
   --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);
+
+  --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);
 }

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

@@ -116,4 +116,10 @@ governing permissions and limitations under the License.
   --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);
 }

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

@@ -57,4 +57,10 @@ governing permissions and limitations under the License.
   --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);
+
+  --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);
 }

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

@@ -115,4 +115,10 @@ governing permissions and limitations under the License.
   --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);
 }