feat: refactor color tokens to use tier 3 tokens #198

demo/api.md

@@ -732,3 +732,20 @@ export function auroMenuResetExample() {
 ```
 <!-- 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) -->
+<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
+
+```scss
+:host {
+  --ds-auro-menu-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
+  --ds-auro-menuoption-background-color: transparent;
+  --ds-auro-menuoption-icon-color: transparent;
+  --ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->

docs/partials/api.md

@@ -215,3 +215,10 @@ The `auro-menu` may be reset to a state with no menuoption selected by setting t
 
 </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-menu.js

@@ -4,7 +4,10 @@
 // ---------------------------------------------------------------------
 
 import { LitElement, html } from "lit";
+
 import styleCss from "./style-base-css.js";
+import tokensCss from "./tokens-css.js";
+
 import './auro-menuoption';
 import "mark.js/dist/mark.min";
 
@@ -67,7 +70,10 @@ export class AuroMenu extends LitElement {
   }
 
   static get styles() {
-    return [styleCss];
+    return [
+      styleCss,
+      tokensCss
+    ];
   }
 
   /**

src/auro-menuoption.js

@@ -3,7 +3,11 @@
 
 // ---------------------------------------------------------------------
 import { LitElement, html } from "lit";
+
 import styleCss from "./style-menuoption-css.js";
+import colorCss from "./color-css.js";
+import tokensCss from "./tokens-css.js";
+
 import check from '@alaskaairux/icons/dist/icons/interface/check-sm_es6';
 
 /**
@@ -66,7 +70,11 @@ class AuroMenuOption extends LitElement {
   }
 
   static get styles() {
-    return [styleCss];
+    return [
+      styleCss,
+      colorCss,
+      tokensCss
+    ];
   }
 
   firstUpdated() {

src/color.scss

@@ -0,0 +1,40 @@
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable custom-property-empty-line-before, declaration-no-important */
+
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  background-color: var(--ds-auro-menuoption-background-color);
+  color: var(--ds-auro-menuoption-text-color);
+
+  ::slotted(hr) {
+    border-top-color: var(--ds-auro-menu-border-color) !important;
+  }
+
+  svg {
+    fill: var(--ds-auro-menuoption-icon-color) !important;
+  }
+}
+
+:host([disabled]) {
+  --ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
+}
+
+:host(:hover:not([disabled])),
+:host(.active) {
+  --ds-auro-menuoption-background-color: var(--ds-color-container-ui-secondary-hover-default, #{$ds-color-container-ui-secondary-hover-default});
+}
+
+:host([selected]:not([disabled])) {
+  --ds-auro-menuoption-background-color: var(--ds-color-container-ui-primary-default-default, #{$ds-color-container-ui-primary-default-default});
+  --ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
+
+  svg {
+    --ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #{$ds-color-icon-emphasis-inverse});
+  }
+}
+

src/style-base.scss

@@ -47,7 +47,8 @@
     margin: var(--ds-size-100, $ds-size-100) 0 !important;
 
     border-width: 0 !important;
-    border-top: 1px solid var(--ds-color-border-divider-default, $ds-color-border-divider-default) !important;
+    border-top-width: 1px !important;
+    border-top-style: solid !important;
   }
 }
 

src/style-menuoption.scss

@@ -38,8 +38,6 @@
   svg {
     margin-right: var(--ds-size-150, $ds-size-150);
     margin-left: var(--ds-size-100, $ds-size-100);
-
-    fill: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default) !important;
   }
 
   ::slotted(.nestingSpacer) {
@@ -65,26 +63,5 @@
 }
 
 :host([disabled]) {
-  color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default);
-
   user-select: none;
 }
-
-:host(:hover:not([disabled])),
-:host(.active:not([disabled])) {
-  background-color: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
-  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-
-  svg {
-    fill: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default) !important;
-  }
-}
-
-:host([selected]:not([disabled])) {
-  background-color: var(--ds-color-alert-notification-default, $ds-color-alert-notification-default);
-  color: var(--ds-color-base-white, $ds-color-base-white);
-
-  svg {
-    fill: var(--ds-color-base-white, $ds-color-base-white) !important;
-  }
-}

src/tokens.scss

@@ -0,0 +1,6 @@
+:host {
+  --ds-auro-menu-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
+  --ds-auro-menuoption-background-color: transparent;
+  --ds-auro-menuoption-icon-color: transparent;
+  --ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+}