feat: refactor hard coded size values with tokens #198

AlaskaAirlines · Jun 4, 2024 · 0bb579a · 0bb579a
1 parent 4009ac7
commit 0bb579a
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 25 deletions.
diff --git a/demo/api.md b/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-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+  --ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, $ds-color-icon-emphasis-inverse);
+  --ds-auro-menuoption-background-color: transparent;
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/docs/partials/api.md b/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 -->
+
diff --git a/src/auro-menuoption.js b/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() {

diff --git a/src/color.scss b/src/color.scss
@@ -0,0 +1,31 @@
+// 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);
+}
+
+: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:not([disabled])) {
+  --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 {
+    fill: var(--ds-auro-menuoption-icon-color) !important;
+  }
+}
diff --git a/src/style-base.scss b/src/style-base.scss
@@ -47,7 +47,7 @@
     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: 1px solid var(--ds-auro-menu-border-color) !important;
   }
 }
 

diff --git a/src/style-menuoption.scss b/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;
-  }
-}
diff --git a/src/tokens.scss b/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-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+  --ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, $ds-color-icon-emphasis-inverse);
+  --ds-auro-menuoption-background-color: transparent;
+}