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

AlaskaAirlines · Jun 25, 2024 · ecf69d3 · ecf69d3
1 parent 6d543d6
commit ecf69d3
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 27 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -717,4 +717,26 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
 </auro-dialog>
 ```
 <!-- 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-dialog-background-color: var(--ds-color-background-primary-100-default, $ds-color-background-primary-100-default);
+  --ds-auro-dialog-boxshadow-color-one: rgb(0 0 0 / 0.12);
+  --ds-auro-dialog-boxshadow-color-two: rgb(0 0 0 / 0.1);
+  --ds-auro-dialog-close-button-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);
+  --ds-auro-dialog-header-action-border-color: transparent;
+  --ds-auro-dialog-header-action-background-color: transparent;
+  --ds-auro-dialog-overlay-open-background-color: rgb(0 0 0 / 0.2);
+  --ds-auro-dialog-overlay-modal-background-color: rgb(0 0 0 / 0.5);
+  --ds-auro-dialog-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/docs/partials/api.md b/docs/partials/api.md
@@ -143,3 +143,10 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
 <!-- 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 -->
diff --git a/src/color.scss b/src/color.scss
@@ -0,0 +1,41 @@
+// Copyright (c) 2024 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";
+@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints";
+
+/* stylelint-disable selector-class-pattern */
+
+.dialogOverlay {
+  &--open {
+    background: var(--ds-auro-dialog-overlay-open-background-color);
+  }
+
+  &--modal {
+    background: var(--ds-auro-dialog-overlay-modal-background-color);
+  }
+}
+
+.dialog {
+  background: var(--ds-auro-dialog-background-color);
+  color: var(--ds-auro-dialog-text-color);
+
+  // 1024px breakpoint / large dialog size is default
+  @include auro_breakpoint--md {
+    box-shadow: 0 10px 20px 0 var(--ds-auro-dialog-boxshadow-color-one), 0 1px 10px 0 var(--ds-auro-dialog-boxshadow-color-two);
+  }
+}
+
+.dialog-header--action {
+  border: 2px solid var(--ds-auro-dialog-header-action-border-color);
+  border-radius: var(--ds-border-radius, $ds-border-radius);
+  background-color: var(--ds-auro-dialog-header-action-background-color);
+  color: var(--ds-auro-dialog-close-button-color);
+}
+
+:host([unformatted][onDark]) {
+  --ds-auro-dialog-close-button-color: var(--ds-color-icon-primary-inverse, #{$ds-color-icon-primary-inverse});
+}
diff --git a/src/componentBase.js b/src/componentBase.js
@@ -10,6 +10,9 @@ import { classMap } from 'lit/directives/class-map.js';
 
 import styleCss from "./style-css.js";
 import styleUnformattedCss from './style-unformatted-css.js';
+import colorCss from "./color-css.js";
+import tokensCss from "./tokens-css.js";
+
 import closeIcon from '@alaskaairux/icons/dist/icons/interface/x-lg.mjs';
 
 /* eslint-disable one-var, prefer-destructuring */
@@ -213,7 +216,9 @@ export default class ComponentBase extends LitElement {
   static get styles() {
     return [
       styleCss,
-      styleUnformattedCss
+      styleUnformattedCss,
+      colorCss,
+      tokensCss
     ];
   }
 

diff --git a/src/style.scss b/src/style.scss
@@ -47,17 +47,13 @@ $auro-spacing-options: none;
     z-index: var(--ds-depth-overlay);
 
     transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 0);
-
-    background: rgba(0, 0, 0, 0.2);
   }
 
   // Modal modifier for modal/blocking state
   &--modal {
     z-index: var(--ds-depth-overlay);
 
     transition: background 0.3s cubic-bezier(0.4, 0, 0.5, 0);
-
-    background: rgba(0, 0, 0, 0.5);
   }
 }
 
@@ -81,11 +77,10 @@ $auro-spacing-options: none;
 
   opacity: 0;
   border: 0;
-  background: var(--ds-color-background-lightest, $ds-color-background-lightest);
-  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-  // baseline dialog UI / mobile-first
 
+  // baseline dialog UI / mobile-first
   @include auro_transition(all, 0.3s, ease-in-out);
+
   // 1024px breakpoint / large dialog size is default
   @include auro_breakpoint--md {
     top: 10%;
@@ -98,8 +93,6 @@ $auro-spacing-options: none;
 
     transform: scale(0);
 
-    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.12), 0 1px 10px 0 rgba(0,0,0,0.1);
-
     &--open {
       transform: scale(1);
     }
@@ -139,19 +132,10 @@ $auro-spacing-options: none;
   justify-content: space-between;
   padding-top: var(--ds-size-800, $ds-size-800);
 
-  & svg {
-    fill: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
-  }
-
   &--action {
     margin: 0;
     padding: 0;
 
-    border: none;
-    border: 2px solid transparent;
-    border-radius: var(--ds-border-radius, $ds-border-radius);
-    background-color: transparent;
-
     &:hover {
       cursor: pointer;
     }
@@ -182,13 +166,6 @@ $auro-spacing-options: none;
   }
 }
 
-// sets X from black to white
-:host([unformatted][onDark]) {
-  .dialog-header--action {
-    color: var(--ds-color-base-white, $ds-color-base-white);
-  }
-}
-
 :host([sm]) {
   .dialog {
     max-height: 30%;

diff --git a/src/tokens.scss b/src/tokens.scss
@@ -0,0 +1,11 @@
+:host {
+  --ds-auro-dialog-background-color: var(--ds-color-background-primary-100-default, $ds-color-background-primary-100-default);
+  --ds-auro-dialog-boxshadow-color-one: rgb(0 0 0 / 0.12);
+  --ds-auro-dialog-boxshadow-color-two: rgb(0 0 0 / 0.1);
+  --ds-auro-dialog-close-button-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);
+  --ds-auro-dialog-header-action-border-color: transparent;
+  --ds-auro-dialog-header-action-background-color: transparent;
+  --ds-auro-dialog-overlay-open-background-color: rgb(0 0 0 / 0.2);
+  --ds-auro-dialog-overlay-modal-background-color: rgb(0 0 0 / 0.5);
+  --ds-auro-dialog-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+}