feat(theme): update styles to support themeing

AlaskaAirlines · Jul 11, 2024 · 7328b7f · 7328b7f
1 parent ca61b63
commit 7328b7f
Show file tree

Hide file tree

Showing 19 changed files with 895 additions and 412 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
@@ -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) -->

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/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/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.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>

diff --git a/demo/index.md b/demo/index.md
@@ -18,6 +18,13 @@ If the `href` attribute is not added, the hyperlink element will render back sim
   Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- 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) -->
@@ -27,6 +34,14 @@ If the `href` attribute is not added, the hyperlink element will render back sim
 <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>
 
@@ -49,6 +64,19 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
   </auro-hyperlink>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark" style="display: flex; justify-content: space-between;">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/navPattern-ondark.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/navPattern-ondark.html -->
+  <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>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navPattern.html) -->
@@ -64,6 +92,20 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
   <auro-icon category="interface" name="chevron-right" customColor style="line-height: 1"></auro-icon>
 </auro-hyperlink>
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navPattern-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/navPattern-ondark.html -->
+
+```html
+<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>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -81,6 +123,12 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
   <auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/roleButton-ondark.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/roleButton-ondark.html -->
+  <auro-hyperlink ondark href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roleButton.html) -->
@@ -89,19 +137,33 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
 ```html
 <auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roleButton-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/roleButton-ondark.html -->
+
+```html
+<auro-hyperlink ondark href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roleButton.js) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/roleButton.js -->
 
 ```js
 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/index.min.js b/demo/index.min.js
@@ -1,11 +1,18 @@
 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) {
@@ -34,4 +41,3 @@ function initHyperlinkIndexExamples(initCount) {
   }
 }
 
-export { initHyperlinkIndexExamples };
diff --git a/docs/partials/index.md b/docs/partials/index.md
@@ -16,11 +16,18 @@ If the `href` attribute is not added, the hyperlink element will render back sim
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic-ondark.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic-ondark.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
 
@@ -35,11 +42,18 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
+<div class="exampleWrapper--ondark" style="display: flex; justify-content: space-between;">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/navPattern-ondark.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navPattern.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navPattern-ondark.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
 
@@ -56,11 +70,18 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/roleButton-ondark.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roleButton.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roleButton-ondark.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roleButton.js) -->
 <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,21 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [...compat.extends("@aurodesignsystem/eslint-config"), {
+    rules: {
+        "no-magic-numbers": ["error", {
+            ignore: [0, 1, 13, 32],
+            ignoreArrayIndexes: true,
+        }],
+    },
+}];
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>