From c0854c68804c4975c27ea348dc40893fb5740cdd Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Tue, 4 Jun 2024 15:41:52 -0700 Subject: [PATCH] feat: refactor color tokens to use tier 3 tokens #198 --- demo/api.md | 17 +++++++++++++++++ docs/partials/api.md | 7 +++++++ src/auro-menu.js | 8 +++++++- src/auro-menuoption.js | 10 +++++++++- src/color.scss | 40 +++++++++++++++++++++++++++++++++++++++ src/style-base.scss | 3 ++- src/style-menuoption.scss | 23 ---------------------- src/tokens.scss | 6 ++++++ 8 files changed, 88 insertions(+), 26 deletions(-) create mode 100644 src/color.scss create mode 100644 src/tokens.scss diff --git a/demo/api.md b/demo/api.md index 517e95f..2d13c8d 100644 --- a/demo/api.md +++ b/demo/api.md @@ -732,3 +732,20 @@ export function auroMenuResetExample() { ``` + +### Theme Support + +The component may be restyled using the following code sample and changing the values of the following token(s). + + + + +```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); +} +``` + diff --git a/docs/partials/api.md b/docs/partials/api.md index f2a7fb8..0d41050 100644 --- 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 +### Theme Support + +The component may be restyled using the following code sample and changing the values of the following token(s). + + + + diff --git a/src/auro-menu.js b/src/auro-menu.js index 159428c..872db64 100644 --- a/src/auro-menu.js +++ b/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 + ]; } /** diff --git a/src/auro-menuoption.js b/src/auro-menuoption.js index 926b4c5..4c22c26 100644 --- 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 new file mode 100644 index 0000000..3db48ea --- /dev/null +++ b/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}); + } +} + diff --git a/src/style-base.scss b/src/style-base.scss index da42c69..9230975 100644 --- a/src/style-base.scss +++ b/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; } } diff --git a/src/style-menuoption.scss b/src/style-menuoption.scss index 6be37bf..7a2f6de 100644 --- 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 new file mode 100644 index 0000000..d61c163 --- /dev/null +++ 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-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); +}