diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index bb79d2e..0000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,244 +0,0 @@
-module.exports = {
- "env": {
- "browser": true,
- "es6": true
- },
- "extends": ["eslint:recommended", "plugin:lit/recommended"],
- "globals": {
- "Atomics": "readonly",
- "SharedArrayBuffer": "readonly"
- },
- "parserOptions": {
- "ecmaVersion": 2018,
- "sourceType": "module"
- },
- "plugins": ["lit"],
- "rules": {
- "accessor-pairs": "error",
- "array-bracket-newline": "error",
- "array-bracket-spacing": "error",
- "array-callback-return": "error",
- "array-element-newline": "error",
- "arrow-body-style": "error",
- "arrow-parens": "error",
- "arrow-spacing": ["error", {
- "after": true,
- "before": true
- }],
- "block-scoped-var": "error",
- "block-spacing": "error",
- "brace-style": "error",
- "callback-return": "error",
- "camelcase": "error",
- "capitalized-comments": "off",
- "class-methods-use-this": "off",
- "comma-dangle": "off",
- "comma-spacing": ["error", {
- "after": true,
- "before": false
- }],
- "comma-style": ["error", "last"],
- "complexity": "error",
- "computed-property-spacing": "error",
- "consistent-return": "error",
- "consistent-this": "error",
- "curly": "error",
- "default-case": "error",
- "default-param-last": "error",
- "dot-location": "error",
- "dot-notation": "error",
- "eol-last": "off",
- "eqeqeq": "error",
- "func-call-spacing": "error",
- "func-name-matching": "error",
- "func-names": "off",
- "func-style": "error",
- "function-paren-newline": "error",
- "generator-star-spacing": "error",
- "global-require": "error",
- "grouped-accessor-pairs": "error",
- "guard-for-in": "error",
- "handle-callback-err": "error",
- "id-blacklist": "error",
- "id-length": "error",
- "id-match": "error",
- "implicit-arrow-linebreak": "error",
- "indent": "off",
- "indent-legacy": "off",
- "init-declarations": "error",
- "jsx-quotes": "error",
- "key-spacing": "off",
- "keyword-spacing": ["error", {
- "after": true,
- "before": true
- }],
- "line-comment-position": "error",
- "linebreak-style": ["error", "unix"],
- "lines-around-comment": "error",
- "lines-around-directive": "error",
- "lines-between-class-members": ["error", "always"],
- "max-classes-per-file": "error",
- "max-depth": "error",
- "max-len": "off",
- "max-lines": "error",
- "max-lines-per-function": "off",
- "max-nested-callbacks": "error",
- "max-params": "error",
- "max-statements": "error",
- "max-statements-per-line": "error",
- "multiline-comment-style": "off",
- "new-cap": "error",
- "new-parens": "error",
- "newline-after-var": "error",
- "newline-before-return": "error",
- "newline-per-chained-call": "error",
- "no-alert": "error",
- "no-array-constructor": "error",
- "no-await-in-loop": "error",
- "no-bitwise": "error",
- "no-buffer-constructor": "error",
- "no-caller": "error",
- "no-catch-shadow": "error",
- "no-confusing-arrow": "error",
- "no-console": "error",
- "no-constructor-return": "error",
- "no-continue": "error",
- "no-div-regex": "error",
- "no-dupe-else-if": "error",
- "no-duplicate-imports": "error",
- "no-else-return": "error",
- "no-empty-function": "off",
- "no-eq-null": "error",
- "no-eval": "error",
- "no-extend-native": "error",
- "no-extra-bind": "error",
- "no-extra-label": "error",
- "no-extra-parens": "error",
- "no-floating-decimal": "error",
- "no-implicit-coercion": "error",
- "no-implicit-globals": "error",
- "no-implied-eval": "error",
- "no-import-assign": "error",
- "no-inline-comments": "error",
- "no-invalid-this": "off",
- "no-iterator": "error",
- "no-label-var": "error",
- "no-labels": "error",
- "no-lone-blocks": "error",
- "no-lonely-if": "error",
- "no-loop-func": "error",
- "no-magic-numbers": "error",
- "no-mixed-operators": "error",
- "no-mixed-requires": "error",
- "no-multi-assign": "error",
- "no-multi-spaces": "error",
- "no-multi-str": "error",
- "no-multiple-empty-lines": "error",
- "no-native-reassign": "error",
- "no-negated-condition": "error",
- "no-negated-in-lhs": "error",
- "no-nested-ternary": "error",
- "no-new": "error",
- "no-new-func": "error",
- "no-new-object": "error",
- "no-new-require": "error",
- "no-new-wrappers": "error",
- "no-octal-escape": "error",
- "no-param-reassign": "error",
- "no-path-concat": "error",
- "no-plusplus": "error",
- "no-process-env": "error",
- "no-process-exit": "error",
- "no-proto": "error",
- "no-restricted-globals": "error",
- "no-restricted-imports": "error",
- "no-restricted-modules": "error",
- "no-restricted-properties": "error",
- "no-restricted-syntax": "error",
- "no-return-assign": "error",
- "no-return-await": "error",
- "no-script-url": "error",
- "no-self-compare": "error",
- "no-sequences": "error",
- "no-setter-return": "error",
- "no-shadow": "error",
- "no-spaced-func": "error",
- "no-sync": "error",
- "no-tabs": "error",
- "no-template-curly-in-string": "error",
- "no-ternary": "off",
- "no-throw-literal": "error",
- "no-trailing-spaces": "error",
- "no-undef-init": "error",
- "no-undefined": "off",
- "no-underscore-dangle": "error",
- "no-unmodified-loop-condition": "error",
- "no-unneeded-ternary": "error",
- "no-unused-expressions": "error",
- "no-use-before-define": "error",
- "no-useless-call": "error",
- "no-useless-computed-key": "error",
- "no-useless-concat": "error",
- "no-useless-constructor": "error",
- "no-useless-rename": "error",
- "no-useless-return": "error",
- "no-var": "error",
- "no-void": "error",
- "no-warning-comments": "error",
- "no-whitespace-before-property": "error",
- "nonblock-statement-body-position": "error",
- "object-curly-newline": "error",
- "object-curly-spacing": "off",
- "object-property-newline": "error",
- "object-shorthand": "error",
- "one-var": "error",
- "one-var-declaration-per-line": "error",
- "operator-assignment": "error",
- "operator-linebreak": "error",
- "padded-blocks": "off",
- "padding-line-between-statements": "error",
- "prefer-arrow-callback": "error",
- "prefer-const": "error",
- "prefer-destructuring": "error",
- "prefer-exponentiation-operator": "error",
- "prefer-named-capture-group": "error",
- "prefer-numeric-literals": "error",
- "prefer-object-spread": "error",
- "prefer-promise-reject-errors": "error",
- "prefer-reflect": "error",
- "prefer-regex-literals": "error",
- "prefer-rest-params": "error",
- "prefer-spread": "error",
- "prefer-template": "error",
- "quote-props": "off",
- "quotes": "off",
- "radix": "error",
- "require-await": "error",
- "require-jsdoc": "error",
- "require-unicode-regexp": "error",
- "rest-spread-spacing": ["error", "never"],
- "semi": "off",
- "semi-spacing": "error",
- "semi-style": ["error", "last"],
- "sort-keys": "off",
- "sort-vars": "error",
- "space-before-blocks": "error",
- "space-before-function-paren": "off",
- "space-in-parens": ["error", "never"],
- "space-infix-ops": "error",
- "space-unary-ops": "error",
- "spaced-comment": ["error", "always"],
- "strict": "error",
- "switch-colon-spacing": "error",
- "symbol-description": "error",
- "template-curly-spacing": ["error", "never"],
- "template-tag-spacing": ["error", "never"],
- "unicode-bom": ["error", "never"],
- "valid-jsdoc": "error",
- "vars-on-top": "error",
- "wrap-iife": "error",
- "wrap-regex": "error",
- "yield-star-spacing": "error",
- "yoda": ["error", "never"]
- }
-};
diff --git a/.husky/commit-msg b/.husky/commit-msg
new file mode 100644
index 0000000..70bd3dd
--- /dev/null
+++ b/.husky/commit-msg
@@ -0,0 +1 @@
+npx --no-install commitlint --edit "$1"
diff --git a/.husky/pre-commit b/.husky/pre-commit
index 06563ea..07ace63 100755
--- 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
index 4b95c01..1716e9a 100644
--- 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](
-### CSS Custom Property fallbacks
-
-
-[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.
-
-
-
### Define dependency in project component
@@ -127,9 +118,9 @@ In cases where the project is not able to process JS assets, there are pre-proce
```html
-
-
-
+
+
+
```
diff --git a/apiExamples/label.html b/apiExamples/label.html
index 03ee0fa..800ee28 100644
--- a/apiExamples/label.html
+++ b/apiExamples/label.html
@@ -2,4 +2,3 @@
Danger
Success
Advisory
-Flight 167
diff --git a/demo/api.html b/demo/api.html
index cbdc57a..8dda71e 100644
--- a/demo/api.html
+++ b/demo/api.html
@@ -32,7 +32,7 @@
-
diff --git a/demo/apiExamples.md b/demo/api.md
similarity index 92%
rename from demo/apiExamples.md
rename to demo/api.md
index c4187db..01df9e2 100644
--- a/demo/apiExamples.md
+++ b/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.
Flight 99
```
-
+
+
+## Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+
+
+
+```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);
+}
+```
+
diff --git a/demo/index.html b/demo/index.html
index 9a56672..afb4954 100644
--- 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"
/>
-
-
-
@@ -39,6 +36,5 @@
-