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

demo/api.md

@@ -65,4 +65,21 @@ The `componentData` attribute is used to provide the table TD content for the ta
 
 The `nowrap` attribute, when applied, will prevent table content from word wrapping, i.e. all text content will be on a single line.
 
-</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-table-alt-row-container-color: var(--ds-color-container-secondary-default, #{$ds-color-container-secondary-default});
+  --ds-auro-table-border-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->

docs/partials/api.md

@@ -34,3 +34,10 @@ The `componentData` attribute is used to provide the table TD content for the ta
 The `nowrap` attribute, when applied, will prevent table content from word wrapping, i.e. all text content will be on a single line.
 
 </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-table.js

@@ -8,8 +8,8 @@
 import { LitElement, html } from "lit-element";
 import { classMap } from 'lit/directives/class-map.js';
 
-// Import touch detection lib
 import styleCss from "./style-css.js";
+import tokensCss from "./tokens-css.js";
 
 // build the component class
 export class AuroTable extends LitElement {
@@ -28,7 +28,10 @@ export class AuroTable extends LitElement {
   }
 
   static get styles() {
-    return [styleCss];
+    return [
+      styleCss,
+      tokensCss
+    ];
   }
 
   /**

src/style.scss

@@ -33,13 +33,13 @@ table {
 }
 
 thead {
-  border-bottom: 1px solid var(--ds-color-brand-gray-200, $ds-color-brand-gray-200);
+  border-bottom: 1px solid var(--ds-auro-table-border-color);
   border-collapse: collapse;
 }
 
 tr {
   &:nth-child(even) {
-    background-color: var(--ds-color-brand-gray-100, $ds-color-brand-gray-100);
+    background-color: var(--ds-auro-table-alt-row-container-color);
   }
 }
 

src/tokens.scss

@@ -0,0 +1,6 @@
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {
+  --ds-auro-table-alt-row-container-color: var(--ds-color-container-secondary-default, #{$ds-color-container-secondary-default});
+  --ds-auro-table-border-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
+}