feat: implement tier 3 color tokens #198

AlaskaAirlines · Aug 23, 2024 · c5940e7 · c5940e7
1 parent 617c8f7
commit c5940e7
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 22 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -17,6 +17,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | Property                        | Attribute                       | Type      | Default                | Description                                      |
 |---------------------------------|---------------------------------|-----------|------------------------|--------------------------------------------------|
 | [disabled](#disabled)                      | `disabled`                      | `Boolean` |                        | When attribute is present element shows disabled state. |
+| [dropdownTag](#dropdownTag)                   |                                 | `string`  |                        |                                                  |
 | [error](#error)                         | `error`                         | `String`  |                        | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
 | [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `Boolean` |                        | When true, checkmark on selected option will no longer be present. |
 | [noValidate](#noValidate)                    | `noValidate`                    | `Boolean` |                        | If set, disables auto-validation on blur.        |
@@ -567,4 +568,21 @@ export function valueAlert(elem) {
 </auro-select>
 ```
 <!-- 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
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-select-help-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
+  --ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/docs/api.md b/docs/api.md
@@ -7,6 +7,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | Property                        | Attribute                       | Type      | Default                | Description                                      |
 |---------------------------------|---------------------------------|-----------|------------------------|--------------------------------------------------|
 | `disabled`                      | `disabled`                      | `Boolean` |                        | When attribute is present element shows disabled state. |
+| `dropdownTag`                   |                                 | `string`  |                        |                                                  |
 | `error`                         | `error`                         | `String`  |                        | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
 | `noCheckmark`                   | `noCheckmark`                   | `Boolean` |                        | When true, checkmark on selected option will no longer be present. |
 | `noValidate`                    | `noValidate`                    | `Boolean` |                        | If set, disables auto-validation on blur.        |

diff --git a/docs/partials/api.md b/docs/partials/api.md
@@ -216,3 +216,10 @@ The following example listens for the `selectedOption` event. Once triggered, `e
 <!-- 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/auro-select.js b/src/auro-select.js
@@ -19,8 +19,9 @@ import dropdownVersion from './dropdownVersion';
 
 import '@aurodesignsystem/auro-menu';
 
-// Import touch detection lib
 import styleCss from "./style-css.js";
+import colorCss from "./color-css.js";
+import tokensCss from "./tokens-css.js";
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
@@ -154,7 +155,11 @@ export class AuroSelect extends LitElement {
   }
 
   static get styles() {
-    return [styleCss];
+    return [
+      styleCss,
+      colorCss,
+      tokensCss
+    ];
   }
 
   /**

diff --git a/src/color.scss b/src/color.scss
@@ -0,0 +1,46 @@
+// 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';
+
+// Support for fallback values
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';
+
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
+
+/* stylelint-disable max-nesting-depth, selector-class-pattern */
+
+:host {
+  [auro-dropdown] {
+    &::part(trigger) {
+      &:hover {
+        --ds-auro-dropdown-trigger-container-color: rgba(0 0 0 / 0.06); // Needs container token
+      }
+    }
+  }
+
+  .selectElement-helpText {
+    color: var(--ds-auro-select-help-text-color);
+  }
+}
+
+:host([disabled]) {
+  * {
+    color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default);
+  }
+}
+
+:host([validity]:not([validity='valid'])) {
+  .selectElement-helpText {
+    --ds-auro-select-help-text-color: var(--ds-color-text-error-default, #{$ds-color-text-error-default});
+  }
+}
+
+.placeholder {
+  color: var(--ds-auro-select-placeholder-text-color);
+}
diff --git a/src/style.scss b/src/style.scss
@@ -19,7 +19,6 @@
   width: 100%;
   padding: 0;
   border: 0;
-  background: none;
   cursor: pointer;
   font-family: inherit;
   font-size: inherit;
@@ -33,12 +32,6 @@
     &::part(trigger) {
       min-height: var(--ds-size-500, $ds-size-500);
       max-height: var(--ds-size-500, $ds-size-500);
-
-      /* stylelint-disable */
-      &:hover {
-        background-color: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
-      }
-      /* stylelint-enable */
     }
 
     &::part(popover) {
@@ -49,7 +42,6 @@
 
 :host([disabled]) {
   * {
-    color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default);
     user-select: none;
   }
 }
@@ -68,17 +60,6 @@ auro-menuoption {
 
 .selectElement-helpText {
   margin: var(--ds-size-50, $ds-size-50) 0;
-  color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
   font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
   line-height: 1rem;
 }
-
-:host([validity]:not([validity='valid'])) {
-  .selectElement-helpText {
-    color: var(--ds-color-alert-error-default, $ds-color-alert-error-default);
-  }
-}
-
-.placeholder {
-  color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
-}
diff --git a/src/tokens.scss b/src/tokens.scss
@@ -0,0 +1,6 @@
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-select-help-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
+  --ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
+}