feat(themes): add component level tokens for themeing

.github/settings.yml

@@ -35,7 +35,7 @@ repository:
   allow_rebase_merge: true
 
 branches:
-  - name: master
+  - &default_protection
     # https://developer.github.com/v3/repos/branches/#update-branch-protection
     # Branch Protection settings. Set to null to disable
     protection:
@@ -46,7 +46,7 @@ branches:
         # Dismiss approved reviews automatically when a new commit is pushed.
         dismiss_stale_reviews: true
         # Blocks merge until code owners have reviewed.
-        require_code_owner_reviews: false
+        require_code_owner_reviews: true
         # Required. Require status checks to pass before merging. Set to null to disable
         # Specify which users and teams can dismiss pull request reviews. Pass an empty dismissal_restrictions object to disable. User and team dismissal_restrictions are only available for organization-owned repositories. Omit this parameter for personal repositories.
         dismissal_restrictions:
@@ -56,11 +56,19 @@ branches:
         # Required. Require branches to be up to date before merging.
         strict: true
         # Required. The list of status checks to require in order to merge into this branch
-        contexts: ["test (18.x)", "license/cla"]
+        contexts: ["test (18.x)", "test (20.x)", "license/cla"]
       # Required. Enforce all configured restrictions for administrators. Set to true to enforce required status checks for repository administrators. Set to null to disable.
       enforce_admins: false
       # Required. Restrict who can push to this branch. Team and user restrictions are only available for organization-owned repositories. Set to null to disable.
       restrictions: null
+      # Prevent merge commits from being pushed to matching branches
+      required_linear_history: true
+
+  - name: master
+    <<: *default_protection
+
+  - name: beta
+    <<: *default_protection
 
 # Labels: define labels for Issues and Pull Requests
 labels:

.github/workflows/testPublish.yml

@@ -25,10 +25,11 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - run: npm ci
       - run: npm run build
+      - run: npm run build:test
 
   release:
     # Only release on push to master
-    if: github.event_name == 'push' && github.ref == 'refs/heads/master'
+    if: github.event_name == 'push' && github.ref == 'refs/heads/master' || 'refs/heads/beta'
     runs-on: ubuntu-latest
     needs: test
     steps:
@@ -39,7 +40,7 @@ jobs:
         with:
           node-version: 20
       - run: npm ci
-      - run: npm run build
+      - run: npm run build:release
       - uses: cycjimmy/semantic-release-action@v4
         env:
           GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

apiExamples/onDark.html

@@ -1,7 +1,11 @@
-<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>
+<auro-icon category="interface" name="pin-trip" onDark>default</auro-icon> <span style="color: var(--ds-color-base-white)">default</span><br />
+<auro-icon category="interface" name="pin-trip" onDark accent></auro-icon> <span style="color: var(--ds-color-base-white)">accent</span><br />
+<auro-icon category="interface" name="pin-trip" onDark disabled></auro-icon> <span style="color: var(--ds-color-base-white)">disabled</span><br />
+<auro-icon category="interface" name="pin-trip" onDark emphasis></auro-icon> <span style="color: var(--ds-color-base-white)">emphasis</span><br />
+<auro-icon category="interface" name="pin-trip" onDark error></auro-icon> <span style="color: var(--ds-color-base-white)">error</span><br />
+<auro-icon category="interface" name="pin-trip" onDark info></auro-icon> <span style="color: var(--ds-color-base-white)">info</span><br />
+<auro-icon category="interface" name="pin-trip" onDark secondary></auro-icon> <span style="color: var(--ds-color-base-white)">secondary</span><br />
+<auro-icon category="interface" name="pin-trip" onDark subtle></auro-icon> <span style="color: var(--ds-color-base-white)">subtle</span><br />
+<auro-icon category="interface" name="pin-trip" onDark success></auro-icon> <span style="color: var(--ds-color-base-white)">success</span><br />
+<auro-icon category="interface" name="pin-trip" onDark tertiary></auro-icon><span style="color: var(--ds-color-base-white)">tertiary</span><br />
+<auro-icon category="interface" name="pin-trip" onDark warning></auro-icon> <span style="color: var(--ds-color-base-white)">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