Address color theming issues

.husky/pre-commit

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

.npmignore

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

README.md

@@ -108,8 +108,8 @@ 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.8/dist/bundled/essentials.css" />
+<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/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
 <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@7.3.0/dist/auro-button__bundled.js" type="module"></script>
 ```
 

demo/api.md

@@ -563,15 +563,15 @@ The component may be restyled using the following code sample and changing the v
 <!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
 
 ```scss
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
 :host {
-  --ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);
-  --ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);
-  --ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);
-  --ds-auro-button-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
-
-  // THE BELOW TOKEN SEEMS WRONG - WAITING FOR RESPONSE FROM JUNE
-  --ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, $ds-color-border-emphasis-inverse);
-  --ds-auro-button-loader-color: var(--ds-color-background-darkest, $ds-color-background-darkest);
+  --ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #{$ds-color-container-ui-primary-default-default});
+  --ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #{$ds-color-border-emphasis-inverse});
+  --ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #{$ds-color-container-ui-primary-default-default});
+  --ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #{$ds-color-container-ui-primary-default-default});
+  --ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #{$ds-color-utility-navy-default});
+  --ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
   --ds-auro-button-tap-color: transparent;
 }
 ```

demo/index.html

@@ -29,7 +29,11 @@
         });
     </script>
     <script type="module" data-demo-script="true">
-      import { registerComponent } from '../index.js';
+      import { AuroButton } from '../src/auro-button.js';
+      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+      RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
+
       import { initExamples } from './index.min.js'; 
 
       registerComponent('custom-button');

demo/index.md

@@ -228,8 +228,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-button';
-registerComponent('custom-button');
+import { AuroButton } from './src/auro-button.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` element.

docs/partials/index.md

@@ -141,8 +141,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-button';
-registerComponent('custom-button');
+import { AuroButton } from './src/auro-button.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` element.

index.js

@@ -1,13 +1,4 @@
 import { AuroButton } from './src/auro-button.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}
- */
-export function registerComponent(name) {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroButton {});
-  }
-}
+RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);