Address color theming issues and tech debt

.husky/_/husky.sh

@@ -0,0 +1,9 @@
+echo "husky - DEPRECATED
+
+Please remove the following two lines from $0:
+
+#!/usr/bin/env sh
+. \"\$(dirname -- \"\$0\")/_/husky.sh\"
+
+They WILL FAIL in v10.0.0
+"

.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

.npmignore

@@ -6,7 +6,7 @@ NOTICE
 
 .github/
 .gitignore
-.eslintrc
+eslint.config.mjs
 .stylelintrc
 
 coverage/

CHANGELOG.md

@@ -1,17 +1,5 @@
 # Semantic Release Automated Changelog
 
-# [2.1.0-beta.1](https://github.com/AlaskaAirlines/auro-banner/compare/v2.0.7...v2.1.0-beta.1) (2024-07-09)
-
-
-### Features
-
-* refactor color tokens with tier 3 tokens [#57](https://github.com/AlaskaAirlines/auro-banner/issues/57) ([1b104b7](https://github.com/AlaskaAirlines/auro-banner/commit/1b104b7be217d4dafca07c8ac42b04e40c561c3e))
-
-
-### Performance Improvements
-
-* update dependencies ([8f451b7](https://github.com/AlaskaAirlines/auro-banner/commit/8f451b7fbf846027cebe4552fd062583afa039cb))
-
 ## [2.0.7](https://github.com/AlaskaAirlines/auro-banner/compare/v2.0.6...v2.0.7) (2024-05-13)
 
 

README.md

@@ -61,11 +61,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) -->
-<!-- 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) -->

apiExamples/iconic.html

@@ -5,7 +5,7 @@
     <img src="https://picsum.photos/id/452/2800/2000.jpg" alt="">
   </picture>
   <span slot="icon">
-    <auro-icon category="social" name="instagram" customSize customColor style="color: var(--auro-color-base-white); width: 5rem"></auro-icon>
+    <auro-icon category="social" name="instagram" customSize customColor style="color: var(--ds-color-base-white); width: 5rem"></auro-icon>
   </span>
   <span slot="title">
     <auro-header level="2" display="800" margin="both" size="none">Lorem ipsum title</auro-header>

demo/api.md

@@ -329,7 +329,7 @@ The following example illustrates a `<auro-banner>` custom element with the `ico
       <img src="https://picsum.photos/id/452/2800/2000.jpg" alt="">
     </picture>
     <span slot="icon">
-      <auro-icon category="social" name="instagram" customSize customColor style="color: var(--auro-color-base-white); width: 5rem"></auro-icon>
+      <auro-icon category="social" name="instagram" customSize customColor style="color: var(--ds-color-base-white); width: 5rem"></auro-icon>
     </span>
     <span slot="title">
       <auro-header level="2" display="800" margin="both" size="none">Lorem ipsum title</auro-header>
@@ -354,7 +354,7 @@ The following example illustrates a `<auro-banner>` custom element with the `ico
     <img src="https://picsum.photos/id/452/2800/2000.jpg" alt="">
   </picture>
   <span slot="icon">
-    <auro-icon category="social" name="instagram" customSize customColor style="color: var(--auro-color-base-white); width: 5rem"></auro-icon>
+    <auro-icon category="social" name="instagram" customSize customColor style="color: var(--ds-color-base-white); width: 5rem"></auro-icon>
   </span>
   <span slot="title">
     <auro-header level="2" display="800" margin="both" size="none">Lorem ipsum title</auro-header>
@@ -556,8 +556,8 @@ The component may be restyled using the following code sample and changing the v
   --ds-auro-banner-disclaimer-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
   --ds-auro-banner-title-text-color: var(--ds-color-text-emphasis-default, #{$ds-color-text-emphasis-default});
   --ds-auro-banner-icon-container-color: var(--ds-color-utility-gray-default, #{$ds-color-utility-gray-default});
-  --ds-auro-banner-wrapper-container-color: var(--ds-color-brand-midnight-400, #{$ds-color-brand-midnight-400});
-  --ds-auro-banner-wrapper-border-color: var(--ds-color-brand-lounge, #{$ds-color-brand-lounge});
+  --ds-auro-banner-wrapper-container-color: var(--ds-color-container-secondary-inverse, #{$ds-color-container-secondary-inverse});
+  --ds-auro-banner-wrapper-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

demo/index.html

@@ -43,9 +43,10 @@
     <script type="module" data-demo-script="true" src="../index.js"></script>
 
     <script type="module">
-      import { registerComponent } from '../index.js';
-
-      registerComponent('custom-banner');
+      import { AuroBanner } from './src/auro-banner.js';
+      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+      RuntimeUtils.default.prototype.registerComponent('custom-banner', AuroBanner);
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->

demo/index.md

@@ -113,8 +113,10 @@ There are two important parts of every Auro component. The <a href="https://deve
 To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-banner';
-registerComponent('custom-banner');
+import { AuroBanner } from './src/auro-banner.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-banner', AuroBanner);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-banner` element.

docs/partials/index.md

@@ -49,8 +49,10 @@ There are two important parts of every Auro component. The <a href="https://deve
 To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-banner';
-registerComponent('custom-banner');
+import { AuroBanner } from './src/auro-banner.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-banner', AuroBanner);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-banner` element.

eslint.config.mjs

@@ -0,0 +1,13 @@
+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")];

index.js

@@ -1,15 +1,4 @@
 import { AuroBanner } from './src/auro-banner.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-/**
- * Register Custom Element.
- * @param {Object} name - Name to use for custom element.
- * @returns {void}
- */
- const registerComponent = (name = 'custom-banner') => {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroBanner {});
-  }
-}
-
-export { registerComponent }
+RuntimeUtils.default.prototype.registerComponent('custom-banner', AuroBanner);