feat(theme): update styles to support themeing

AlaskaAirlines · Jul 17, 2024 · e5016af · e5016af
1 parent 2b8f8a2
commit e5016af
Show file tree

Hide file tree

Showing 26 changed files with 1,189 additions and 407 deletions.
diff --git a/.eslintrc b/.eslintrc
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+    "cSpell.words": [
+        "noncomponent",
+        "ondark",
+        "WCSS"
+    ]
+}
diff --git a/README.md b/README.md
@@ -95,7 +95,7 @@ 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/design-tokens@4.9.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.0/dist/bundled/essentials.css" />
 <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@3.6.1-beta.1/dist/auro-hyperlink__bundled.js" type="module"></script>
 ```

diff --git a/apiExamples/basic-ondark.html b/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>.
diff --git a/apiExamples/cta-ondark.html b/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>
diff --git a/apiExamples/external-ondark.html b/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
diff --git a/apiExamples/external-referrer-ondark.html b/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
diff --git a/apiExamples/navPattern-ondark.html b/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>
diff --git a/apiExamples/navStyle-ondark.html b/apiExamples/navStyle-ondark.html
@@ -0,0 +1,6 @@
+<auro-hyperlink
+  ondark
+  type="nav"
+  href="https://www.alaskaair.com">
+  Navigation style link
+</auro-hyperlink>
diff --git a/apiExamples/roleButton-ondark.html b/apiExamples/roleButton-ondark.html
@@ -0,0 +1 @@
+<auro-hyperlink ondark href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
diff --git a/apiExamples/roleButton.js b/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) {

diff --git a/demo/api.html b/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>

diff --git a/demo/api.md b/demo/api.md
@@ -42,6 +42,13 @@
   Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic-ondark.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/basic-ondark.html -->
+  <auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
+  Welcome to <auro-hyperlink ondark href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
@@ -51,6 +58,14 @@
 <auro-hyperlink>No href supplied</auro-hyperlink><br>
 Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/basic-ondark.html -->
+
+```html
+<auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
+Welcome to <auro-hyperlink ondark href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -81,6 +96,29 @@ For link security purposes, when using the `target="_blank"` attribute, this imp
    with external domain
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/external-ondark.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/external-ondark.html -->
+  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
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/external.html) -->
@@ -104,6 +142,30 @@ Example link with
 </auro-hyperlink>
  with external domain
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/external-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/external-ondark.html -->
+
+```html
+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
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -128,6 +190,20 @@ Example link with
  , external domain with referrerpolicy attribute
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/external-referrer-ondark.html) -->
+<!-- The below content is automatically added from ./../../apiExamples/external-referrer-ondark.html -->
+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
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/external-referrer.html) -->
@@ -143,6 +219,21 @@ Example link with
 </auro-hyperlink>
  , external domain with referrerpolicy attribute
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/external-referrer-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/external-referrer-ondark.html -->
+
+```html
+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
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -160,6 +251,17 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
   </auro-hyperlink>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/navStyle-ondark.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/navStyle-ondark.html -->
+  <auro-hyperlink
+    ondark
+    type="nav"
+    href="https://www.alaskaair.com">
+    Navigation style link
+  </auro-hyperlink>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navStyle.html) -->
@@ -172,6 +274,18 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
   Navigation style link
 </auro-hyperlink>
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navStyle-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/navStyle-ondark.html -->
+
+```html
+<auro-hyperlink
+  ondark
+  type="nav"
+  href="https://www.alaskaair.com">
+  Navigation style link
+</auro-hyperlink>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -294,6 +408,20 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
   <auro-hyperlink type="cta" tertiary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/cta-ondark.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/cta-ondark.html -->
+  <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>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/cta.html) -->
@@ -310,6 +438,21 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
 <auro-hyperlink type="cta" tertiary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
 <auro-hyperlink type="cta" tertiary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/cta-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/cta-ondark.html -->
+
+```html
+<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>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 

diff --git a/demo/api.min.js b/demo/api.min.js
@@ -1,4 +1,3 @@
 function initHyperlinkApiExamples(initCount) {
 }
 
-export { initHyperlinkApiExamples };
diff --git a/demo/index.html b/demo/index.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>
Original file line number	Diff line number	Diff line change
		@@ -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>.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<auro-hyperlink ondark href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>