feat: refactor color tokens with tier 3 tokens #53

AlaskaAirlines · Jul 9, 2024 · d12f8f0 · d12f8f0
1 parent 0b3a456
commit d12f8f0
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 20 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -154,7 +154,7 @@ The auro-avatar component is hidden from screen readers by default. The placemen
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Fallback Images
+### Fallback Images
 
 The auro-avatar component will use a fallback image if a `code` value results in an avatar image that fails to load.
 
@@ -173,4 +173,21 @@ The auro-avatar component will use a fallback image if a `code` value results in
 <auro-avatar code="INVALID"></auro-avatar>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+</auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
+
+```scss
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-avatar-tail-container-gradient-one-color: var(--ds-color-brand-navy-500, #{$ds-color-brand-navy-500});
+  --ds-auro-avatar-tail-container-gradient-two-color: rgba(255 255 255 / .9);
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/docs/partials/api.md b/docs/partials/api.md
@@ -85,7 +85,7 @@ The auro-avatar component is hidden from screen readers by default. The placemen
 
 </auro-accordion>
 
-## Fallback Images
+### Fallback Images
 
 The auro-avatar component will use a fallback image if a `code` value results in an avatar image that fails to load.
 
@@ -100,3 +100,10 @@ The auro-avatar component will use a fallback image if a `code` value results in
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/src/auro-avatar.js b/src/auro-avatar.js
@@ -8,6 +8,7 @@ import { LitElement, html } from "lit";
 import '@aurodesignsystem/auro-icon';
 
 import styleCss from "./style-css.js";
+import tokensCss from "./tokens-css.js";
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
@@ -61,7 +62,10 @@ export class AuroAvatar extends LitElement {
   }
 
   static get styles() {
-    return [styleCss];
+    return [
+      styleCss,
+      tokensCss
+    ];
   }
 
   /**

diff --git a/src/style.scss b/src/style.scss
@@ -6,24 +6,10 @@
 // Import Auro tokens
 @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties';
-
-// Support for fallback values
-@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';
-
+
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
 
-// Support for auroElement styles
-// @import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement';
-
-// container styles - defines the look of the outer custom component
-// :host {
-//   ...
-// }
-
-// layout styles - define any layout specifications for UI that is contained WITHIN the component
-// never define layout that would cause effect on element outside the scope of this component
-
 img {
   display: block;
   width: 100%;
@@ -75,7 +61,7 @@ img {
     height: 100%;
     border-radius: 50%;
     margin: 0 auto;
-    background: linear-gradient(180deg, var(--ds-color-brand-midnight-200, $ds-color-brand-midnight-200) 0%, rgba(255 255 255 / .9) 100%);
+    background: linear-gradient(180deg, var(--ds-auro-avatar-tail-container-gradient-one-color) 0%, var(--ds-auro-avatar-tail-container-gradient-two-color) 100%);
   }
 
   auro-icon {

diff --git a/src/tokens.scss b/src/tokens.scss
@@ -0,0 +1,6 @@
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-avatar-tail-container-gradient-one-color: var(--ds-color-brand-navy-500, #{$ds-color-brand-navy-500});
+  --ds-auro-avatar-tail-container-gradient-two-color: rgba(255 255 255 / .9);
+}