feat: refactor color token structure with tier 3 tokens #31

AlaskaAirlines · Jul 8, 2024 · 750c223 · 750c223
1 parent 5256acd
commit 750c223
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 4 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -78,4 +78,23 @@ The `<auro-skeleton>` element makes use of a single `shape` enumerated attribute
 <auro-skeleton shape="rectangle" style="width: 800px; height: 300px"></auro-skeleton>
 ```
 <!-- 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-skeleton-background-color: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
+  --ds-auro-skeleton-background-gradient-one-color: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
+  --ds-auro-skeleton-background-gradient-two-color: var(--ds-color-background-primary-300-default, #{$ds-color-background-primary-300-default});
+  --ds-auro-skeleton-background-gradient-three-color: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/docs/partials/api.md b/docs/partials/api.md
@@ -44,3 +44,10 @@ The `<auro-skeleton>` element makes use of a single `shape` enumerated attribute
 <!-- 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-skeleton.js b/src/auro-skeleton.js
@@ -7,6 +7,8 @@
 import { LitElement, html } from "lit";
 
 import styleCss from "./style-css.js";
+import colorCss from "./color-css.js";
+import tokensCss from "./tokens-css.js";
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
@@ -29,7 +31,11 @@ export class AuroSkeleton extends LitElement {
   }
 
   static get styles() {
-    return [styleCss];
+    return [
+      styleCss,
+      colorCss,
+      tokensCss
+    ];
   }
 
   // When using auroElement, use the following attribute and function when hiding content from screen readers.

diff --git a/src/color.scss b/src/color.scss
@@ -0,0 +1,12 @@
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// Import Auro tokens
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  background-color: var(--ds-auro-skeleton-background-color);
+  background-image: linear-gradient(to right, var(--ds-auro-skeleton-background-gradient-one-color) 10%, var(--ds-auro-skeleton-background-gradient-two-color) 40%,var(--ds-auro-skeleton-gradient-color-three) 60%);
+}
diff --git a/src/style.scss b/src/style.scss
@@ -19,8 +19,6 @@
   animation-iteration-count: infinite;
   animation-name: place-holder-shimmer;
   animation-timing-function: linear;
-  background-color: var(--ds-color-brand-neutral-100, $ds-color-brand-neutral-100);
-  background-image: linear-gradient(to right,var(--ds-color-brand-neutral-100, $ds-color-brand-neutral-100) 10%,var(--ds-color-brand-neutral-200, $ds-color-brand-neutral-200) 40%,var(--ds-color-brand-neutral-100, $ds-color-brand-neutral-100) 60%);
   background-repeat: no-repeat;
   background-size: 1000px 100%;
 }

diff --git a/src/tokens.scss b/src/tokens.scss
@@ -0,0 +1,8 @@
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-skeleton-background-color: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
+  --ds-auro-skeleton-background-gradient-one-color: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
+  --ds-auro-skeleton-background-gradient-two-color: var(--ds-color-background-primary-300-default, #{$ds-color-background-primary-300-default});
+  --ds-auro-skeleton-background-gradient-three-color: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
+}