feat(tokens): add component level tokens for theming

BREAKING CHANGE: Advisory variant has been removed. Warning variant is the intended replacement.
AlaskaAirlines · Jun 18, 2024 · b1ee061 · b1ee061
1 parent 5b06d77
commit b1ee061
Show file tree

Hide file tree

Showing 16 changed files with 2,217 additions and 2,548 deletions.
diff --git a/apiExamples/onDark.html b/apiExamples/onDark.html
@@ -1,7 +1,13 @@
-<auro-icon ondark category="interface" name="pin-trip"></auro-icon>
-<auro-icon ondark category="interface" name="pin-trip" emphasis></auro-icon>
-<auro-icon ondark category="interface" name="pin-trip" accent></auro-icon>
-<auro-icon ondark category="interface" name="pin-trip" disabled></auro-icon>
-<auro-icon ondark category="interface" name="pin-trip" error></auro-icon>
-<auro-icon ondark category="interface" name="pin-trip" success></auro-icon>
-<auro-icon ondark category="interface" name="pin-trip" advisory></auro-icon>
+<span style="color: var(--ds-color-text-primary-inverse)">
+  <auro-icon category="interface" name="pin-trip" onDark></auro-icon>default<br />
+  <auro-icon category="interface" name="pin-trip" onDark accent></auro-icon>accent<br />
+  <auro-icon category="interface" name="pin-trip" onDark disabled></auro-icon>disabled<br />
+  <auro-icon category="interface" name="pin-trip" onDark emphasis></auro-icon>emphasis<br />
+  <auro-icon category="interface" name="pin-trip" onDark error></auro-icon>error<br />
+  <auro-icon category="interface" name="pin-trip" onDark info></auro-icon>info<br />
+  <auro-icon category="interface" name="pin-trip" onDark secondary></auro-icon>secondary<br />
+  <auro-icon category="interface" name="pin-trip" onDark subtle></auro-icon>subtle<br />
+  <auro-icon category="interface" name="pin-trip" onDark success></auro-icon>success<br />
+  <auro-icon category="interface" name="pin-trip" onDark tertiary></auro-icon>tertiary<br />
+  <auro-icon category="interface" name="pin-trip" onDark warning></auro-icon>warning
+</span>
diff --git a/apiExamples/visualState.html b/apiExamples/visualState.html
@@ -1,7 +1,11 @@
-<auro-icon category="interface" name="pin-trip"></auro-icon>
-<auro-icon category="interface" name="pin-trip" emphasis></auro-icon>
-<auro-icon category="interface" name="pin-trip" accent></auro-icon>
-<auro-icon category="interface" name="pin-trip" disabled></auro-icon>
-<auro-icon category="interface" name="pin-trip" error></auro-icon>
-<auro-icon category="interface" name="pin-trip" success></auro-icon>
-<auro-icon category="interface" name="pin-trip" advisory></auro-icon>
+<auro-icon category="interface" name="pin-trip"></auro-icon> default<br />
+<auro-icon category="interface" name="pin-trip" accent></auro-icon> accent<br />
+<auro-icon category="interface" name="pin-trip" disabled></auro-icon> disabled<br />
+<auro-icon category="interface" name="pin-trip" emphasis></auro-icon> emphasis<br />
+<auro-icon category="interface" name="pin-trip" error></auro-icon> error<br />
+<auro-icon category="interface" name="pin-trip" info></auro-icon> info<br />
+<auro-icon category="interface" name="pin-trip" secondary></auro-icon> secondary<br />
+<auro-icon category="interface" name="pin-trip" subtle></auro-icon> subtle<br />
+<auro-icon category="interface" name="pin-trip" success></auro-icon> success<br />
+<auro-icon category="interface" name="pin-trip" tertiary></auro-icon>tertiary<br />
+<auro-icon category="interface" name="pin-trip" warning></auro-icon> warning
diff --git a/demo/alaska.html b/demo/alaska.html
@@ -0,0 +1,48 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/index.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Generator | auro-icon custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('/demo/alaska.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        });
+    </script>
+    <script type="module" data-demo-script="true" src="../src/auro-alaska.js"></script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+  </body>
+</html>
diff --git a/demo/alaska.md b/demo/alaska.md
@@ -14,7 +14,7 @@ import "@alaskaairux/auro-icon/dist/auro-alaska";
   <auro-alaska style="width: 192px"></auro-alaska>
 </div>
 
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
   ```html
@@ -27,7 +27,7 @@ import "@alaskaairux/auro-icon/dist/auro-alaska";
   <auro-alaska onDark style="width: 192px"></auro-alaska>
 </div>
 
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
   ```html
@@ -44,7 +44,7 @@ Using the `official` property will display the Alaska Airlines logo with the off
   <auro-alaska official style="width: 192px"></auro-alaska>
 </div>
 
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
   ```html
@@ -57,7 +57,7 @@ Using the `official` property will display the Alaska Airlines logo with the off
   <auro-alaska official ondark style="width: 192px"></auro-alaska>
 </div>
 
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
   ```html
@@ -77,7 +77,7 @@ The Alaska Airline logo has a preferred version of the logo depending in the siz
   <auro-alaska style="width: 528px"></auro-alaska>
 </div>
 
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
   ```html
@@ -96,7 +96,7 @@ The Alaska Airline logo has a preferred version of the logo depending in the siz
   <auro-alaska official style="width: 528px"></auro-alaska>
 </div>
 
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
   ```html

diff --git a/demo/api.md b/demo/api.md
@@ -16,7 +16,6 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca
 | Property         | Attribute        | Type      | Default                                          | Description                                      |
 |------------------|------------------|-----------|--------------------------------------------------|--------------------------------------------------|
 | [accent](#accent)         | `accent`         | `Boolean` |                                                  | Sets the icon to use the accent style.           |
-| [advisory](#advisory)       | `advisory`       | `Boolean` |                                                  | Sets the icon to use the advisory style.         |
 | [ariaHidden](#ariaHidden)     | `ariaHidden`     | `String`  |                                                  | Set aria-hidden value. Default is `true`. Option is `false`. |
 | [category](#category)       | `category`       | `String`  |                                                  | The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage. |
 | [customColor](#customColor)    | `customColor`    | `Boolean` |                                                  | Removes primary selector.                        |
@@ -26,14 +25,24 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca
 | [hidden](#hidden)         | `hidden`         | `Boolean` |                                                  | If present, the component will be hidden both visually and from screen readers |
 | [hiddenAudible](#hiddenAudible)  | `hiddenAudible`  | `Boolean` |                                                  | If present, the component will be hidden from screen readers, but seen visually |
 | [hiddenVisually](#hiddenVisually) | `hiddenVisually` | `Boolean` |                                                  | If present, the component will be hidden visually, but still read by screen readers |
+| [info](#info)           | `info`           | `Boolean` |                                                  | Sets the icon to use the info style.             |
 | [label](#label)          | `label`          | `Boolean` |                                                  | Exposes content in slot as icon label.           |
 | [name](#name)           | `name`           | `String`  |                                                  | The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage |
 | [onDark](#onDark)         | `onDark`         | `Boolean` | false                                            | Set value for on-dark version of auro-icon       |
-| [primary](#primary)        | `primary`        | `Boolean` |                                                  | Sets the icon to use the baseline primary icon style. |
+| [primary](#primary)        | `primary`        | `Boolean` |                                                  | DEPRECATED: Sets the icon to use the baseline primary icon style. |
+| [secondary](#secondary)      | `secondary`      | `Boolean` |                                                  | Sets the icon to use the secondary style.        |
+| [subtle](#subtle)         | `subtle`         | `Boolean` |                                                  | Sets the icon to use the subtle style.           |
 | [success](#success)        | `success`        | `Boolean` |                                                  | Sets the icon to use the success style.          |
+| [tertiary](#tertiary)       | `tertiary`       | `Boolean` |                                                  | Sets the icon to use the tertiary style.         |
 | [uri](#uri)            | `uri`            | `String`  | "https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist" | Set the uri for CDN used when fetching icons     |
 | [warning](#warning)        | `warning`        | `Boolean` |                                                  | Sets the icon to use the warning style.          |
 
+## Methods
+
+| Method                | Type                                      | Description                                      |
+|-----------------------|-------------------------------------------|--------------------------------------------------|
+| [handleCustomTagName](#handleCustomTagName) | `(name: string, elem: HTMLElement): void` | If component is registered as a custom name,<br />this function will add an attribute to the element<br />with the default name. This is so that other parent<br />components can still this the element.<br /><br />**name**: The default tag name.<br />**elem**: The element to add the attribute to. |
+
 ## Slots
 
 | Name | Description                                      |
@@ -92,13 +101,17 @@ Mono-color icons support the following attributes to illustrate visual state. Th
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/visualState.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/visualState.html -->
-  <auro-icon category="interface" name="pin-trip"></auro-icon>
-  <auro-icon category="interface" name="pin-trip" emphasis></auro-icon>
-  <auro-icon category="interface" name="pin-trip" accent></auro-icon>
-  <auro-icon category="interface" name="pin-trip" disabled></auro-icon>
-  <auro-icon category="interface" name="pin-trip" error></auro-icon>
-  <auro-icon category="interface" name="pin-trip" success></auro-icon>
-  <auro-icon category="interface" name="pin-trip" advisory></auro-icon>
+  <auro-icon category="interface" name="pin-trip"></auro-icon> default<br />
+  <auro-icon category="interface" name="pin-trip" accent></auro-icon> accent<br />
+  <auro-icon category="interface" name="pin-trip" disabled></auro-icon> disabled<br />
+  <auro-icon category="interface" name="pin-trip" emphasis></auro-icon> emphasis<br />
+  <auro-icon category="interface" name="pin-trip" error></auro-icon> error<br />
+  <auro-icon category="interface" name="pin-trip" info></auro-icon> info<br />
+  <auro-icon category="interface" name="pin-trip" secondary></auro-icon> secondary<br />
+  <auro-icon category="interface" name="pin-trip" subtle></auro-icon> subtle<br />
+  <auro-icon category="interface" name="pin-trip" success></auro-icon> success<br />
+  <auro-icon category="interface" name="pin-trip" tertiary></auro-icon>tertiary<br />
+  <auro-icon category="interface" name="pin-trip" warning></auro-icon> warning
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -107,31 +120,41 @@ Mono-color icons support the following attributes to illustrate visual state. Th
 <!-- The below code snippet is automatically added from ./../../apiExamples/visualState.html -->
 
 ```html
-<auro-icon category="interface" name="pin-trip"></auro-icon>
-<auro-icon category="interface" name="pin-trip" emphasis></auro-icon>
-<auro-icon category="interface" name="pin-trip" accent></auro-icon>
-<auro-icon category="interface" name="pin-trip" disabled></auro-icon>
-<auro-icon category="interface" name="pin-trip" error></auro-icon>
-<auro-icon category="interface" name="pin-trip" success></auro-icon>
-<auro-icon category="interface" name="pin-trip" advisory></auro-icon>
-```
+<auro-icon category="interface" name="pin-trip"></auro-icon> default<br />
+<auro-icon category="interface" name="pin-trip" accent></auro-icon> accent<br />
+<auro-icon category="interface" name="pin-trip" disabled></auro-icon> disabled<br />
+<auro-icon category="interface" name="pin-trip" emphasis></auro-icon> emphasis<br />
+<auro-icon category="interface" name="pin-trip" error></auro-icon> error<br />
+<auro-icon category="interface" name="pin-trip" info></auro-icon> info<br />
+<auro-icon category="interface" name="pin-trip" secondary></auro-icon> secondary<br />
+<auro-icon category="interface" name="pin-trip" subtle></auro-icon> subtle<br />
+<auro-icon category="interface" name="pin-trip" success></auro-icon> success<br />
+<auro-icon category="interface" name="pin-trip" tertiary></auro-icon>tertiary<br />
+<auro-icon category="interface" name="pin-trip" warning></auro-icon> warning
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### ondark visual state
+#### onDark visual state
 
-All compatible with `ondark` attribute.
+All compatible with `onDark` attribute.
 
 <div class="exampleWrapper" style="background: repeating-linear-gradient(45deg, var(--ds-color-background-darkest, #00274a), var(--ds-color-background-darkest, #00274a) 10px, var(--ds-color-background-darker, #01426a) 10px, var(--ds-color-background-darker, #01426a) 20px);">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/onDark.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/onDark.html -->
-  <auro-icon ondark category="interface" name="pin-trip"></auro-icon>
-  <auro-icon ondark category="interface" name="pin-trip" emphasis></auro-icon>
-  <auro-icon ondark category="interface" name="pin-trip" accent></auro-icon>
-  <auro-icon ondark category="interface" name="pin-trip" disabled></auro-icon>
-  <auro-icon ondark category="interface" name="pin-trip" error></auro-icon>
-  <auro-icon ondark category="interface" name="pin-trip" success></auro-icon>
-  <auro-icon ondark category="interface" name="pin-trip" advisory></auro-icon>
+  <span style="color: var(--ds-color-text-primary-inverse)">
+    <auro-icon category="interface" name="pin-trip" onDark></auro-icon>default<br />
+    <auro-icon category="interface" name="pin-trip" onDark accent></auro-icon>accent<br />
+    <auro-icon category="interface" name="pin-trip" onDark disabled></auro-icon>disabled<br />
+    <auro-icon category="interface" name="pin-trip" onDark emphasis></auro-icon>emphasis<br />
+    <auro-icon category="interface" name="pin-trip" onDark error></auro-icon>error<br />
+    <auro-icon category="interface" name="pin-trip" onDark info></auro-icon>info<br />
+    <auro-icon category="interface" name="pin-trip" onDark secondary></auro-icon>secondary<br />
+    <auro-icon category="interface" name="pin-trip" onDark subtle></auro-icon>subtle<br />
+    <auro-icon category="interface" name="pin-trip" onDark success></auro-icon>success<br />
+    <auro-icon category="interface" name="pin-trip" onDark tertiary></auro-icon>tertiary<br />
+    <auro-icon category="interface" name="pin-trip" onDark warning></auro-icon>warning
+  </span>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -140,13 +163,19 @@ All compatible with `ondark` attribute.
 <!-- The below code snippet is automatically added from ./../../apiExamples/onDark.html -->
 
 ```html
-<auro-icon ondark category="interface" name="pin-trip"></auro-icon>
-<auro-icon ondark category="interface" name="pin-trip" emphasis></auro-icon>
-<auro-icon ondark category="interface" name="pin-trip" accent></auro-icon>
-<auro-icon ondark category="interface" name="pin-trip" disabled></auro-icon>
-<auro-icon ondark category="interface" name="pin-trip" error></auro-icon>
-<auro-icon ondark category="interface" name="pin-trip" success></auro-icon>
-<auro-icon ondark category="interface" name="pin-trip" advisory></auro-icon>
+<span style="color: var(--ds-color-text-primary-inverse)">
+  <auro-icon category="interface" name="pin-trip" onDark></auro-icon>default<br />
+  <auro-icon category="interface" name="pin-trip" onDark accent></auro-icon>accent<br />
+  <auro-icon category="interface" name="pin-trip" onDark disabled></auro-icon>disabled<br />
+  <auro-icon category="interface" name="pin-trip" onDark emphasis></auro-icon>emphasis<br />
+  <auro-icon category="interface" name="pin-trip" onDark error></auro-icon>error<br />
+  <auro-icon category="interface" name="pin-trip" onDark info></auro-icon>info<br />
+  <auro-icon category="interface" name="pin-trip" onDark secondary></auro-icon>secondary<br />
+  <auro-icon category="interface" name="pin-trip" onDark subtle></auro-icon>subtle<br />
+  <auro-icon category="interface" name="pin-trip" onDark success></auro-icon>success<br />
+  <auro-icon category="interface" name="pin-trip" onDark tertiary></auro-icon>tertiary<br />
+  <auro-icon category="interface" name="pin-trip" onDark warning></auro-icon>warning
+</span>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -196,3 +225,17 @@ Auro icon's by default are set to the value of the `--ds-size-300` token. To cus
 ```
 <!-- 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-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->