feat: implement color theming support #95

AlaskaAirlines · Jul 27, 2024 · 9c52813 · 9c52813
1 parent 963b59b
commit 9c52813
Show file tree

Hide file tree

Showing 21 changed files with 333 additions and 326 deletions.
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -0,0 +1 @@
+npx --no-install commitlint --edit "$1"
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 ./node_modules/.bin/npm-run-all linters test
diff --git a/README.md b/README.md
@@ -82,15 +82,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) -->
@@ -127,9 +118,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.0/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.0.5/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-badge@2.5.0/dist/auro-badge__bundled.js" type="module"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@[dtVersion]/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@[wcssVersion]/dist/bundled/essentials.css" />
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-badge@[Version]/dist/auro-badge__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/apiExamples/label.html b/apiExamples/label.html
@@ -2,4 +2,3 @@
 <auro-badge label error>Danger</auro-badge>
 <auro-badge label success>Success</auro-badge>
 <auro-badge label advisory>Advisory</auro-badge>
-<auro-badge label style="color: var(--auro-color-text-primary-on-light); background-color: var(--auro-color-brand-tropical-300); border-color: var(--auro-color-brand-tropical-300)">Flight 167</auro-badge>
diff --git a/demo/api.html b/demo/api.html
@@ -32,7 +32,7 @@
     <script type="module">
       import 'https://cdn.jsdelivr.net/npm/marked@5.1.0/marked.min.js';
       import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
-      fetch('/demo/apiExamples.md')
+      fetch('/demo/api.md')
         .then((response) => response.text())
         .then((text) => {
           const rawHtml = marked.parse(text);
@@ -41,7 +41,6 @@
         });
     </script>
     <script type="module" src="../index.js" data-demo-script="true"></script>
-    <script src="./api.min.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>

diff --git a/demo/apiExamples.md → demo/api.md b/demo/apiExamples.md → demo/api.md
@@ -3,7 +3,7 @@
 
 # auro-badge
 
-HTML custom element for the use of drawing attention to additional interface information
+HTML custom element for the use of drawing attention to additional interface information.
 
 ## Attributes
 
@@ -18,6 +18,7 @@ HTML custom element for the use of drawing attention to additional interface inf
 | [mvp](#mvp)        | `Boolean` | Sets the background color of the badge to the oneworld mvp color |
 | [mvpgold](#mvpgold)    | `Boolean` | Sets the background color of the badge to the oneworld mvpgold color |
 | `mvpgold75k` | `Boolean` | Sets the background color of the badge to the oneworld mvpgold75k color |
+| [ondark](#ondark)     | `Boolean` | Enables styles for dark backgrounds              |
 | [pill](#pill)       | `Boolean` | Enables pill UI option                           |
 | [ruby](#ruby)       | `Boolean` | Sets the background color of the badge to the oneworld ruby color |
 | [sapphire](#sapphire)   | `Boolean` | Sets the background color of the badge to the oneworld sapphire color |
@@ -262,4 +263,21 @@ Use the `pill` attribute to render a small 'pill size' UI.
 <auro-badge pill style="color: var(--auro-color-text-primary-on-light); background-color: var(--auro-color-brand-tropical-300); border-color: var(--auro-color-brand-tropical-300)">Flight 99</auro-badge>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+</auro-accordion>
+
+## Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.css) -->
+<!-- The below code snippet is automatically added from ./../../src/tokens.css -->
+
+```css
+:host {
+  --ds-auro-badge-border-color: var(--ds-color-border-subtle-inverse, #326aa5);
+  --ds-auro-badge-boxshadow-color: var(--ds-color-border-subtle-default, #f0f7fd);
+  --ds-auro-badge-container-color: var(--ds-color-utility-navy-default, #326aa5);
+  --ds-auro-badge-text-color: var(--ds-color-text-primary-inverse, #ffffff);
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/demo/index.html b/demo/index.html
@@ -9,9 +9,6 @@
       type="text/css"
       href="https://cdn.jsdelivr.net/npm/prismjs@latest/themes/prism.css"
     />
-    <!-- legacy reference is still needed to support auro-accordion's use of legacy toke vales at this time-->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.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" />
@@ -39,6 +36,5 @@
     </script>
 
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
   </body>
 </html>
diff --git a/demo/index.md b/demo/index.md
@@ -172,7 +172,6 @@ Use the `label` attribute for a text label experience. The last example illustra
   <auro-badge label error>Danger</auro-badge>
   <auro-badge label success>Success</auro-badge>
   <auro-badge label advisory>Advisory</auro-badge>
-  <auro-badge label style="color: var(--auro-color-text-primary-on-light); background-color: var(--auro-color-brand-tropical-300); border-color: var(--auro-color-brand-tropical-300)">Flight 167</auro-badge>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -184,8 +183,7 @@ Use the `label` attribute for a text label experience. The last example illustra
 <auro-badge label>Hello World</auro-badge>
 <auro-badge label error>Danger</auro-badge>
 <auro-badge label success>Success</auro-badge>
-<auro-badge label advisory>Advisory</auro-badge>
-<auro-badge label style="color: var(--auro-color-text-primary-on-light); background-color: var(--auro-color-brand-tropical-300); border-color: var(--auro-color-brand-tropical-300)">Flight 167</auro-badge>
+<auro-badge label advisory>Advisory</auro-badge>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

diff --git a/docs/api.md b/docs/api.md
@@ -1,6 +1,6 @@
 # auro-badge
 
-HTML custom element for the use of drawing attention to additional interface information
+HTML custom element for the use of drawing attention to additional interface information.
 
 ## Attributes
 
@@ -15,6 +15,7 @@ HTML custom element for the use of drawing attention to additional interface inf
 | `mvp`        | `Boolean` | Sets the background color of the badge to the oneworld mvp color |
 | `mvpgold`    | `Boolean` | Sets the background color of the badge to the oneworld mvpgold color |
 | `mvpgold75k` | `Boolean` | Sets the background color of the badge to the oneworld mvpgold75k color |
+| `ondark`     | `Boolean` | Enables styles for dark backgrounds              |
 | `pill`       | `Boolean` | Enables pill UI option                           |
 | `ruby`       | `Boolean` | Sets the background color of the badge to the oneworld ruby color |
 | `sapphire`   | `Boolean` | Sets the background color of the badge to the oneworld sapphire color |

diff --git a/docs/partials/apiExamples.md → docs/partials/api.md b/docs/partials/apiExamples.md → docs/partials/api.md
@@ -162,3 +162,10 @@ Use the `pill` attribute to render a small 'pill size' UI.
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
+
+## Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.css) -->
+<!-- AURO-GENERATED-CONTENT:END -->