feat: update to support component theming

This commit address the following updates:

  1. add component level tokens for theming
  2. Advisory variant has been removed. Warning variant is the intended replacement.
  3. add classmap for label attribute
  4. add customSvg attribute support #124

Changes to be committed:
modified:   README.md
new file:   apiExamples/customSvg.html
modified:   apiExamples/onDark.html
modified:   apiExamples/visualState.html
new file:   demo/alaska.html
modified:   demo/alaska.md
modified:   demo/api.md
modified:   docs/api.md
modified:   docs/partials/api.md
modified:   index.js
modified:   package-lock.json
modified:   package.json
modified:   src/auro-icon.js
modified:   src/baseIcon.js
new file:   src/color.scss
deleted:    src/iconStyle.scss
modified:   src/style.scss
new file:   src/tokens.scss
modified:   test/auro-icon.test.js

CHANGELOG.md

@@ -1,12 +1,21 @@
 # Semantic Release Automated Changelog
 
-# [4.4.0](https://github.com/AlaskaAirlines/auro-icon/compare/v4.3.1...v4.4.0) (2024-07-02)
+# [5.0.0-beta.1](https://github.com/AlaskaAirlines/auro-icon/compare/v4.3.1...v5.0.0-beta.1) (2024-06-18)
+
+### Features
+
+* **tokens:** add component level tokens for theming ([b1ee061](https://github.com/AlaskaAirlines/auro-icon/commit/b1ee06106c76ae59774a3f401716eb175b9ad939))
 
+# [4.4.0](https://github.com/AlaskaAirlines/auro-icon/compare/v4.3.1...v4.4.0) (2024-07-02)
 
 ### Features
 
 * **custom:** add function to handle custom element tag name ([bf38f92](https://github.com/AlaskaAirlines/auro-icon/commit/bf38f929cf0abc4aa3dcde416c484e1c624b9e91))
 
+### BREAKING CHANGES
+
+* **tokens:** Advisory variant has been removed. Warning variant is the intended replacement.
+
 ## [4.3.1](https://github.com/AlaskaAirlines/auro-icon/compare/v4.3.0...v4.3.1) (2024-02-26)
 
 

README.md

@@ -60,15 +60,6 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### CSS Custom Property fallbacks
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm.
-
-Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
 ### Define dependency in project component
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
@@ -107,7 +98,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@4.4.0/dist/auro-icon__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@5.0.0-beta.1/dist/auro-icon__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

apiExamples/customSvg.html

@@ -0,0 +1,9 @@
+<auro-icon customSvg>
+  <svg slot="svg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" part="svg" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
+</auro-icon>
+<auro-icon customSvg success>
+  <svg slot="svg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" part="svg" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
+</auro-icon>
+<auro-icon customSvg error>
+  <svg slot="svg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" part="svg" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
+</auro-icon>

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>

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

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>

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