Move theming support from Beta to Main

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx --no-install commitlint --edit "$1"

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 ./node_modules/.bin/npm-run-all preCommit test linters postinstall

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "cSpell.words": [
+        "alaskaair",
+        "csspart",
+        "noncomponent",
+        "ondark",
+        "referrerpolicy",
+        "WCSS"
+    ]
+}

README.md

@@ -58,15 +58,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) -->
@@ -104,9 +95,9 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.3.1/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected].0/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@3.6.0/dist/auro-hyperlink__bundled.js" type="module"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected].2/dist/bundled/essentials.css" />
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@4.0.0-beta.1/dist/auro-hyperlink__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

apiExamples/basic-ondark.html

@@ -0,0 +1,2 @@
+<auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
+Welcome to <auro-hyperlink ondark href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.

apiExamples/cta-ondark.html

@@ -0,0 +1,11 @@
+<auro-hyperlink type="cta" ondark href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" ondark href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
+
+<auro-hyperlink type="cta" ondark secondary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" ondark secondary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" ondark secondary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
+
+<auro-hyperlink type="cta" ondark tertiary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" ondark tertiary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" ondark tertiary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>

apiExamples/external-ondark.html

@@ -0,0 +1,18 @@
+Example link with
+<auro-hyperlink
+  ondark
+  target="_blank"
+  href="https://www.alaskaair.com">
+  external target
+</auro-hyperlink>
+but same domain
+
+<br>
+Example link with
+<auro-hyperlink
+  ondark
+  target="_blank"
+  href="https://www.portseattle.org/sea-tac">
+  external target
+</auro-hyperlink>
+ with external domain

apiExamples/external-referrer-ondark.html

@@ -0,0 +1,9 @@
+Example link with
+<auro-hyperlink
+  ondark
+  target="_blank"
+  referrerpolicy
+  href="https://www.portseattle.org/sea-tac">
+  external target
+</auro-hyperlink>
+ , external domain with referrerpolicy attribute

apiExamples/navPattern-ondark.html

@@ -0,0 +1,9 @@
+<auro-hyperlink ondark href="/last" type="nav">
+  <auro-icon ondark category="interface" name="chevron-left" customColor style="line-height: 1"></auro-icon>
+  Click here to go back
+</auro-hyperlink>
+
+<auro-hyperlink ondark href="/next" type="nav">
+  Click here to go forward
+  <auro-icon ondark category="interface" name="chevron-right" customColor style="line-height: 1"></auro-icon>
+</auro-hyperlink>

apiExamples/navStyle-ondark.html

@@ -0,0 +1,6 @@
+<auro-hyperlink
+  ondark
+  type="nav"
+  href="https://www.alaskaair.com">
+  Navigation style link
+</auro-hyperlink>

apiExamples/roleButton-ondark.html

@@ -0,0 +1 @@
+<auro-hyperlink ondark href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>

apiExamples/roleButton.js

@@ -1,11 +1,18 @@
 export function roleButtonExample() {
   const roleButton = document.getElementById('roleButton');
+  const roleButtonOndark = document.getElementById('roleButton-ondark');
 
   roleButton.addEventListener('click', () => {
     alert(`You clicked the role button!`);
   });
 
   roleButton.addEventListener('keydown', handleKeyPress);
+
+  roleButtonOndark.addEventListener('click', () => {
+    alert(`You clicked the role button!`);
+  });
+
+  roleButtonOndark.addEventListener('keydown', handleKeyPress);
 }
 
 function handleKeyPress(event) {

demo/api.html

@@ -26,6 +26,11 @@
     <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" />
+    <style>
+      .exampleWrapper--ondark {
+        color: var(--ds-color-text-primary-inverse);
+      }
+    </style>
   </head>
   <body class="auro-markdown">
     <main></main>