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

demo/api.md

@@ -78,4 +78,21 @@ 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
+:host {
+  --ds-auro-skeleton-background-color: var(--ds-color-background-subtle-default, $ds-color-background-subtle-default);
+  --ds-auro-skeleton-gradient-color-one: var(--ds-color-background-subtle-default, $ds-color-background-subtle-default);
+  --ds-auro-skeleton-gradient-color-two: var(--ds-color-background-primary-300-default, $ds-color-background-primary-300-default);
+  --ds-auro-skeleton-gradient-color-three: var(--ds-color-background-subtle-default, $ds-color-background-subtle-default);
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->

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 -->

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.

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-gradient-color-one) 10%,var(--ds-auro-skeleton-gradient-color-two) 40%,var(--ds-auro-skeleton-gradient-color-three) 60%);
+}

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

src/tokens.scss

@@ -0,0 +1,6 @@
+:host {
+  --ds-auro-skeleton-background-color: var(--ds-color-background-subtle-default, $ds-color-background-subtle-default);
+  --ds-auro-skeleton-gradient-color-one: var(--ds-color-background-subtle-default, $ds-color-background-subtle-default);
+  --ds-auro-skeleton-gradient-color-two: var(--ds-color-background-primary-300-default, $ds-color-background-primary-300-default);
+  --ds-auro-skeleton-gradient-color-three: var(--ds-color-background-subtle-default, $ds-color-background-subtle-default);
+}