From 0ce75cc3f68d210d69c4d6babd406c388764e958 Mon Sep 17 00:00:00 2001
From: Jason Baker <jason@capsule42.com>
Date: Wed, 29 May 2024 13:05:59 -0700
Subject: [PATCH] feat(themes): update styles to support component themes #243

---
 apiExamples/passFunction.html |   2 +-
 demo/api.md                   |  38 ++
 demo/index.md                 |   6 +-
 docs/partials/api.md          |  22 ++
 package-lock.json             | 635 ++++++++--------------------------
 package.json                  |  12 +-
 src/auro-button.js            |  30 +-
 src/colors.scss               | 335 ++++++++++++++++++
 src/style.scss                | 247 +++----------
 src/tokens.scss               |   9 +
 test/auro-button.test.js      |  16 +-
 11 files changed, 629 insertions(+), 723 deletions(-)
 create mode 100644 src/colors.scss
 create mode 100644 src/tokens.scss

diff --git a/apiExamples/passFunction.html b/apiExamples/passFunction.html
index d769cda..a5af60a 100644
--- a/apiExamples/passFunction.html
+++ b/apiExamples/passFunction.html
@@ -1,3 +1,3 @@
 <auro-button onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
 <auro-button disabled onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
-<auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button
+<auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
diff --git a/demo/api.md b/demo/api.md
index ff4aa13..8b7bfda 100644
--- a/demo/api.md
+++ b/demo/api.md
@@ -78,6 +78,25 @@
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/onDark.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/onDark.html -->
+  <auro-button ondark>Primary</auro-button>
+  <auro-button variant="secondary" ondark>Secondary</auro-button>
+  <auro-button variant="tertiary" ondark>Tertiary</auro-button>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alightRight>
+  <span slot="trigger">See code</span>
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/onDark.html) -->
+  <!-- The below code snippet is automatically added from ./../../apiExamples/onDark.html -->
+  ```html
+  <auro-button ondark>Primary</auro-button>
+  <auro-button variant="secondary" ondark>Secondary</auro-button>
+  <auro-button variant="tertiary" ondark>Tertiary</auro-button>
+  ```
+  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 
 ## Disabled
 
@@ -534,3 +553,22 @@ Use the `loading` attribute to alter the content to teh shimmering dots to alert
 ```
 <!-- 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.scss) -->
+<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
+
+```scss
+:host {
+  --ds-auro-button-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
+  --ds-auro-button-container-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+  --ds-auro-button-container-image: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+  --ds-auro-button-border-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+  --ds-auro-button-loader-color: var(--ds-color-background-darkest, $ds-color-background-darkest);
+  --ds-auro-button-tap-color: transparent;
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/demo/index.md b/demo/index.md
index 6afe76e..e64d7e9 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -174,7 +174,7 @@ These examples illustrate a common use case where a user will want to pass a fun
   <!-- The below content is automatically added from ./../../apiExamples/passFunction.html -->
   <auro-button onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
   <auro-button disabled onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
-  <auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button
+  <auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -185,8 +185,8 @@ These examples illustrate a common use case where a user will want to pass a fun
 ```html
 <auro-button onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
 <auro-button disabled onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
-<auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button
-```
+<auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
diff --git a/docs/partials/api.md b/docs/partials/api.md
index 84cc626..1ac9873 100644
--- a/docs/partials/api.md
+++ b/docs/partials/api.md
@@ -18,6 +18,22 @@
 
 </auro-accordion>
 
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/onDark.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+
+
+<auro-accordion alightRight>
+  <span slot="trigger">See code</span>
+
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/onDark.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
 ## Disabled
 
 This example demonstrates `auro-button` in it's `disabled` state.
@@ -269,3 +285,9 @@ Use the `loading` attribute to alter the content to teh shimmering dots to alert
 
 </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.scss) -->
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/package-lock.json b/package-lock.json
index bdddb8f..b8b036a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
       },
       "devDependencies": {
         "@aurodesignsystem/auro-library": "^2.6.0",
-        "@aurodesignsystem/design-tokens": "^4.4.0",
+        "@aurodesignsystem/design-tokens": "^4.6.2",
         "@aurodesignsystem/eslint-config": "^1.3.1",
         "@aurodesignsystem/webcorestylesheets": "^5.1.1",
         "@commitlint/cli": "^19.3.0",
@@ -34,21 +34,21 @@
         "copyfiles": "^2.4.1",
         "core-js": "^3.37.1",
         "eslint": "^8.57.0",
-        "eslint-plugin-jsdoc": "^48.2.5",
-        "eslint-plugin-lit": "^1.13.0",
+        "eslint-plugin-jsdoc": "^48.2.7",
+        "eslint-plugin-lit": "^1.14.0",
         "husky": "^9.0.11",
         "lodash": "^4.17.21",
         "markdown-magic": "^2.6.1",
-        "nodemon": "^3.1.0",
+        "nodemon": "^3.1.2",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.38",
         "postcss-discard-comments": "^7.0.0",
         "postcss-selector-replace": "^1.0.2",
-        "rollup": "^4.17.2",
+        "rollup": "^4.18.0",
         "rollup-plugin-serve": "^2.0.2",
         "semantic-release": "^23.1.1",
         "sinon": "^18.0.0",
-        "stylelint": "^16.5.0",
+        "stylelint": "^16.6.1",
         "stylelint-config-standard": "^36.0.0",
         "stylelint-config-standard-scss": "^13.1.0",
         "stylelint-order": "^6.0.4",
@@ -131,9 +131,9 @@
       }
     },
     "node_modules/@aurodesignsystem/design-tokens": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.4.0.tgz",
-      "integrity": "sha512-+pn8CXrRzWZjQ+Var0aELnC/6Hm0EUwD30PeFprBhyueFjERsy+MznKZGwbTpZBYCr4MU4tH7QfbuUj8eOqPGQ==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.6.2.tgz",
+      "integrity": "sha512-P3w5+UPO+BDWaaaertCPezcitDqF5SuLrpAeS6wv63ruUVLD0qWYvcJnl0FvG/cukLo6H4T/ilmDD57F61vI/Q==",
       "hasInstallScript": true,
       "dependencies": {
         "chalk": "^5.3.0"
@@ -1205,9 +1205,9 @@
       }
     },
     "node_modules/@es-joy/jsdoccomment": {
-      "version": "0.43.0",
-      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.43.0.tgz",
-      "integrity": "sha512-Q1CnsQrytI3TlCB1IVWXWeqUIPGVEKGaE7IbVdt13Nq/3i0JESAkQQERrfiQkmlpijl+++qyqPgaS31Bvc1jRQ==",
+      "version": "0.43.1",
+      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.43.1.tgz",
+      "integrity": "sha512-I238eDtOolvCuvtxrnqtlBaw0BwdQuYqK7eA6XIonicMdOOOb75mqdIzkGDUbS04+1Di007rgm9snFRNeVrOog==",
       "dev": true,
       "dependencies": {
         "@types/eslint": "^8.56.5",
@@ -1341,102 +1341,6 @@
       "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
       "dev": true
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
-    },
-    "node_modules/@isaacs/cliui/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
@@ -1705,16 +1609,6 @@
         "lit-html": "^2.0.0 || ^3.0.0"
       }
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@pnpm/config.env-replace": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz",
@@ -1851,9 +1745,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
-      "integrity": "sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
+      "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==",
       "cpu": [
         "arm"
       ],
@@ -1864,9 +1758,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.2.tgz",
-      "integrity": "sha512-yeX/Usk7daNIVwkq2uGoq2BYJKZY1JfyLTaHO/jaiSwi/lsf8fTFoQW/n6IdAsx5tx+iotu2zCJwz8MxI6D/Bw==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz",
+      "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==",
       "cpu": [
         "arm64"
       ],
@@ -1877,9 +1771,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.2.tgz",
-      "integrity": "sha512-kcMLpE6uCwls023+kknm71ug7MZOrtXo+y5p/tsg6jltpDtgQY1Eq5sGfHcQfb+lfuKwhBmEURDga9N0ol4YPw==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz",
+      "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==",
       "cpu": [
         "arm64"
       ],
@@ -1890,9 +1784,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.2.tgz",
-      "integrity": "sha512-AtKwD0VEx0zWkL0ZjixEkp5tbNLzX+FCqGG1SvOu993HnSz4qDI6S4kGzubrEJAljpVkhRSlg5bzpV//E6ysTQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz",
+      "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==",
       "cpu": [
         "x64"
       ],
@@ -1903,9 +1797,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.2.tgz",
-      "integrity": "sha512-3reX2fUHqN7sffBNqmEyMQVj/CKhIHZd4y631duy0hZqI8Qoqf6lTtmAKvJFYa6bhU95B1D0WgzHkmTg33In0A==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz",
+      "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==",
       "cpu": [
         "arm"
       ],
@@ -1916,9 +1810,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.2.tgz",
-      "integrity": "sha512-uSqpsp91mheRgw96xtyAGP9FW5ChctTFEoXP0r5FAzj/3ZRv3Uxjtc7taRQSaQM/q85KEKjKsZuiZM3GyUivRg==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz",
+      "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==",
       "cpu": [
         "arm"
       ],
@@ -1929,9 +1823,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.2.tgz",
-      "integrity": "sha512-EMMPHkiCRtE8Wdk3Qhtciq6BndLtstqZIroHiiGzB3C5LDJmIZcSzVtLRbwuXuUft1Cnv+9fxuDtDxz3k3EW2A==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz",
+      "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==",
       "cpu": [
         "arm64"
       ],
@@ -1942,9 +1836,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.2.tgz",
-      "integrity": "sha512-NMPylUUZ1i0z/xJUIx6VUhISZDRT+uTWpBcjdv0/zkp7b/bQDF+NfnfdzuTiB1G6HTodgoFa93hp0O1xl+/UbA==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz",
+      "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==",
       "cpu": [
         "arm64"
       ],
@@ -1955,9 +1849,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.2.tgz",
-      "integrity": "sha512-T19My13y8uYXPw/L/k0JYaX1fJKFT/PWdXiHr8mTbXWxjVF1t+8Xl31DgBBvEKclw+1b00Chg0hxE2O7bTG7GQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz",
+      "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==",
       "cpu": [
         "ppc64"
       ],
@@ -1968,9 +1862,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.2.tgz",
-      "integrity": "sha512-BOaNfthf3X3fOWAB+IJ9kxTgPmMqPPH5f5k2DcCsRrBIbWnaJCgX2ll77dV1TdSy9SaXTR5iDXRL8n7AnoP5cg==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz",
+      "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==",
       "cpu": [
         "riscv64"
       ],
@@ -1981,9 +1875,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.2.tgz",
-      "integrity": "sha512-W0UP/x7bnn3xN2eYMql2T/+wpASLE5SjObXILTMPUBDB/Fg/FxC+gX4nvCfPBCbNhz51C+HcqQp2qQ4u25ok6g==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz",
+      "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==",
       "cpu": [
         "s390x"
       ],
@@ -1994,9 +1888,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.2.tgz",
-      "integrity": "sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz",
+      "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==",
       "cpu": [
         "x64"
       ],
@@ -2007,9 +1901,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.2.tgz",
-      "integrity": "sha512-h1+yTWeYbRdAyJ/jMiVw0l6fOOm/0D1vNLui9iPuqgRGnXA0u21gAqOyB5iHjlM9MMfNOm9RHCQ7zLIzT0x11Q==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz",
+      "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==",
       "cpu": [
         "x64"
       ],
@@ -2020,9 +1914,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.2.tgz",
-      "integrity": "sha512-tmdtXMfKAjy5+IQsVtDiCfqbynAQE/TQRpWdVataHmhMb9DCoJxp9vLcCBjEQWMiUYxO1QprH/HbY9ragCEFLA==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz",
+      "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==",
       "cpu": [
         "arm64"
       ],
@@ -2033,9 +1927,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.2.tgz",
-      "integrity": "sha512-7II/QCSTAHuE5vdZaQEwJq2ZACkBpQDOmQsE6D6XUbnBHW8IAhm4eTufL6msLJorzrHDFv3CF8oCA/hSIRuZeQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz",
+      "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==",
       "cpu": [
         "ia32"
       ],
@@ -2046,9 +1940,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.2.tgz",
-      "integrity": "sha512-TGGO7v7qOq4CYmSBVEYpI1Y5xDuCEnbVC5Vth8mOsW0gDSzxNrVERPc790IGHsrT2dQSimgMr9Ub3Y1Jci5/8w==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz",
+      "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==",
       "cpu": [
         "x64"
       ],
@@ -3052,9 +2946,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.9.0.tgz",
-      "integrity": "sha512-oZQD9HEWQanl9UfsbGVcZ2cGaR0YT5476xfWE0oE5kQa2sNK2frxOlkeacLOTh9po4AlUT5rtkGyYM5kew0z5w==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.11.0.tgz",
+      "integrity": "sha512-MPEsDRZTyCiXkD4vd3zywDCifi7tatc4K37KqTprCvaXptP7Xlpdw0NR2hRJTetG5TxbWDB79Ys4kLmHliEo/w==",
       "dev": true,
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -3748,11 +3642,11 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -5510,12 +5404,6 @@
         "safe-buffer": "~5.1.0"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
-    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -5955,19 +5843,18 @@
       }
     },
     "node_modules/eslint-plugin-jsdoc": {
-      "version": "48.2.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.2.5.tgz",
-      "integrity": "sha512-ZeTfKV474W1N9niWfawpwsXGu+ZoMXu4417eBROX31d7ZuOk8zyG66SO77DpJ2+A9Wa2scw/jRqBPnnQo7VbcQ==",
+      "version": "48.2.7",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.2.7.tgz",
+      "integrity": "sha512-fYj3roTnkFL9OFFTB129rico8lerC5G8Vp2ZW9SjO9RNWG0exVvI+i/Y8Bpm1ufjR0uvT38xtoab/U0Hp8Ybog==",
       "dev": true,
       "dependencies": {
-        "@es-joy/jsdoccomment": "~0.43.0",
+        "@es-joy/jsdoccomment": "~0.43.1",
         "are-docs-informative": "^0.0.2",
         "comment-parser": "1.4.1",
         "debug": "^4.3.4",
         "escape-string-regexp": "^4.0.0",
         "esquery": "^1.5.0",
-        "is-builtin-module": "^3.2.1",
-        "semver": "^7.6.1",
+        "semver": "^7.6.2",
         "spdx-expression-parse": "^4.0.0"
       },
       "engines": {
@@ -5978,9 +5865,9 @@
       }
     },
     "node_modules/eslint-plugin-lit": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.13.0.tgz",
-      "integrity": "sha512-vKc67q6YQ+naYO1QuFpqMoTs3535yp8+0WB/8bzZRLr5NSOb4C6vZrD4se7S9XZtym5TxSVlIqa9QTWYISykQg==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.14.0.tgz",
+      "integrity": "sha512-J4w+CgO31621GreLFCdTUbTr5yeV2/RJ/M0myw0dykD5p9FGGIRLityQiNa6SG+JpVbmeQTQPJy4pNFmiurJ/w==",
       "dev": true,
       "dependencies": {
         "parse5": "^6.0.1",
@@ -6453,9 +6340,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -6543,9 +6430,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
-      "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
     "node_modules/for-each": {
@@ -6557,34 +6444,6 @@
         "is-callable": "^1.1.3"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
-      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/foreground-child/node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/form-data": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.1.tgz",
@@ -8186,24 +8045,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/jackspeak": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
-      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
-      "dev": true,
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
     "node_modules/java-properties": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/java-properties/-/java-properties-1.0.2.tgz",
@@ -9235,12 +9076,12 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
       "dev": true,
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -9310,15 +9151,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/minipass": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/mitt": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
@@ -9503,9 +9335,9 @@
       "dev": true
     },
     "node_modules/nodemon": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.0.tgz",
-      "integrity": "sha512-xqlktYlDMCepBJd43ZQhjWwMw2obW/JRvkrLxq5RCNcuDDX1DbcPT+qT1IlIIdf+DhnWs90JpTMe+Y5KxOchvA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.2.tgz",
+      "integrity": "sha512-/Ib/kloefDy+N0iRTxIUzyGcdW9lzlnca2Jsa5w73bs3npXjg+WInmiX6VY13mIb6SykkthYX/U5t0ukryGqBw==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.2",
@@ -12834,31 +12666,6 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
-    "node_modules/path-scurry": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
-      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^9.1.1 || ^10.0.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
-      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
-      "dev": true,
-      "engines": {
-        "node": "14 || >=16.14"
-      }
-    },
     "node_modules/path-to-regexp": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
@@ -13138,9 +12945,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
       "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -13893,9 +13700,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.2.tgz",
-      "integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz",
+      "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==",
       "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -13908,22 +13715,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.17.2",
-        "@rollup/rollup-android-arm64": "4.17.2",
-        "@rollup/rollup-darwin-arm64": "4.17.2",
-        "@rollup/rollup-darwin-x64": "4.17.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.17.2",
-        "@rollup/rollup-linux-arm-musleabihf": "4.17.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.17.2",
-        "@rollup/rollup-linux-arm64-musl": "4.17.2",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.17.2",
-        "@rollup/rollup-linux-riscv64-gnu": "4.17.2",
-        "@rollup/rollup-linux-s390x-gnu": "4.17.2",
-        "@rollup/rollup-linux-x64-gnu": "4.17.2",
-        "@rollup/rollup-linux-x64-musl": "4.17.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.17.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.17.2",
-        "@rollup/rollup-win32-x64-msvc": "4.17.2",
+        "@rollup/rollup-android-arm-eabi": "4.18.0",
+        "@rollup/rollup-android-arm64": "4.18.0",
+        "@rollup/rollup-darwin-arm64": "4.18.0",
+        "@rollup/rollup-darwin-x64": "4.18.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.18.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.18.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.18.0",
+        "@rollup/rollup-linux-arm64-musl": "4.18.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.18.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.18.0",
+        "@rollup/rollup-linux-x64-gnu": "4.18.0",
+        "@rollup/rollup-linux-x64-musl": "4.18.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.18.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.18.0",
+        "@rollup/rollup-win32-x64-msvc": "4.18.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -14833,27 +14640,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
     "node_modules/string-width/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -14934,19 +14720,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -14978,16 +14751,26 @@
       }
     },
     "node_modules/stylelint": {
-      "version": "16.5.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.5.0.tgz",
-      "integrity": "sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw==",
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.6.1.tgz",
+      "integrity": "sha512-yNgz2PqWLkhH2hw6X9AweV9YvoafbAD5ZsFdKN9BvSDVwGvPh+AUIrn7lYwy1S7IHmtFin75LLfX1m0D2tHu8Q==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
       "dependencies": {
-        "@csstools/css-parser-algorithms": "^2.6.1",
-        "@csstools/css-tokenizer": "^2.2.4",
-        "@csstools/media-query-list-parser": "^2.1.9",
-        "@csstools/selector-specificity": "^3.0.3",
-        "@dual-bundle/import-meta-resolve": "^4.0.0",
+        "@csstools/css-parser-algorithms": "^2.6.3",
+        "@csstools/css-tokenizer": "^2.3.1",
+        "@csstools/media-query-list-parser": "^2.1.11",
+        "@csstools/selector-specificity": "^3.1.1",
+        "@dual-bundle/import-meta-resolve": "^4.1.0",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
         "cosmiconfig": "^9.0.0",
@@ -14996,7 +14779,7 @@
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "fastest-levenshtein": "^1.0.16",
-        "file-entry-cache": "^8.0.0",
+        "file-entry-cache": "^9.0.0",
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
@@ -15004,16 +14787,16 @@
         "ignore": "^5.3.1",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
-        "known-css-properties": "^0.30.0",
+        "known-css-properties": "^0.31.0",
         "mathml-tag-names": "^2.1.3",
         "meow": "^13.2.0",
-        "micromatch": "^4.0.5",
+        "micromatch": "^4.0.7",
         "normalize-path": "^3.0.0",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.0.1",
         "postcss": "^8.4.38",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^7.0.0",
-        "postcss-selector-parser": "^6.0.16",
+        "postcss-selector-parser": "^6.1.0",
         "postcss-value-parser": "^4.2.0",
         "resolve-from": "^5.0.0",
         "string-width": "^4.2.3",
@@ -15028,10 +14811,6 @@
       },
       "engines": {
         "node": ">=18.12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/stylelint"
       }
     },
     "node_modules/stylelint-config-recommended": {
@@ -15156,68 +14935,36 @@
       "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
       "dev": true
     },
-    "node_modules/stylelint/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/stylelint/node_modules/brace-expansion/node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
-    },
     "node_modules/stylelint/node_modules/file-entry-cache": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
-      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.0.0.tgz",
+      "integrity": "sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==",
       "dev": true,
       "dependencies": {
-        "flat-cache": "^4.0.0"
+        "flat-cache": "^5.0.0"
       },
       "engines": {
-        "node": ">=16.0.0"
+        "node": ">=18"
       }
     },
     "node_modules/stylelint/node_modules/flat-cache": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.0.tgz",
-      "integrity": "sha512-EryKbCE/wxpxKniQlyas6PY1I9vwtF3uCBweX+N8KYTCn3Y12RTGtQAJ/bd5pl7kxUAc8v/R3Ake/N17OZiFqA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-5.0.0.tgz",
+      "integrity": "sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==",
       "dev": true,
       "dependencies": {
-        "flatted": "^3.2.9",
-        "keyv": "^4.5.4",
-        "rimraf": "^5.0.5"
+        "flatted": "^3.3.1",
+        "keyv": "^4.5.4"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     },
-    "node_modules/stylelint/node_modules/glob": {
-      "version": "10.3.10",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
-      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
-      "dev": true,
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.5",
-        "minimatch": "^9.0.1",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
-        "path-scurry": "^1.10.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
+    "node_modules/stylelint/node_modules/known-css-properties": {
+      "version": "0.31.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.31.0.tgz",
+      "integrity": "sha512-sBPIUGTNF0czz0mwGGUoKKJC8Q7On1GPbCSFPfyEsfHb2DyBG0Y4QtV+EVWpINSaiGKZblDNuF5AezxSgOhesQ==",
+      "dev": true
     },
     "node_modules/stylelint/node_modules/meow": {
       "version": "13.2.0",
@@ -15231,39 +14978,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/stylelint/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/stylelint/node_modules/rimraf": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.5.tgz",
-      "integrity": "sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^10.3.7"
-      },
-      "bin": {
-        "rimraf": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/stylelint/node_modules/strip-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -16464,57 +16178,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/wrap-ansi/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
diff --git a/package.json b/package.json
index ba63e80..48fa439 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@aurodesignsystem/auro-library": "^2.6.0",
-    "@aurodesignsystem/design-tokens": "^4.4.0",
+    "@aurodesignsystem/design-tokens": "^4.6.2",
     "@aurodesignsystem/eslint-config": "^1.3.1",
     "@aurodesignsystem/webcorestylesheets": "^5.1.1",
     "@commitlint/cli": "^19.3.0",
@@ -49,21 +49,21 @@
     "copyfiles": "^2.4.1",
     "core-js": "^3.37.1",
     "eslint": "^8.57.0",
-    "eslint-plugin-jsdoc": "^48.2.5",
-    "eslint-plugin-lit": "^1.13.0",
+    "eslint-plugin-jsdoc": "^48.2.7",
+    "eslint-plugin-lit": "^1.14.0",
     "husky": "^9.0.11",
     "lodash": "^4.17.21",
     "markdown-magic": "^2.6.1",
-    "nodemon": "^3.1.0",
+    "nodemon": "^3.1.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-discard-comments": "^7.0.0",
     "postcss-selector-replace": "^1.0.2",
-    "rollup": "^4.17.2",
+    "rollup": "^4.18.0",
     "rollup-plugin-serve": "^2.0.2",
     "semantic-release": "^23.1.1",
     "sinon": "^18.0.0",
-    "stylelint": "^16.5.0",
+    "stylelint": "^16.6.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
diff --git a/src/auro-button.js b/src/auro-button.js
index 4da5615..debc466 100644
--- a/src/auro-button.js
+++ b/src/auro-button.js
@@ -7,6 +7,8 @@ import { LitElement, html } from "lit";
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import styleCss from "./style-css.js";
+import colorsCss from "./colors-css.js";
+import tokensCss from "./tokens-css.js";
 import '@aurodesignsystem/auro-loader';
 
 /**
@@ -14,9 +16,7 @@ import '@aurodesignsystem/auro-loader';
  * @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions
  * @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
  * @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
- * @attr {Boolean} ondark - Set value for on-dark version of auro-button
- * @attr {Boolean} secondary - DEPRECATED
- * @attr {Boolean} tertiary - DEPRECATED
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-button
  * @attr {Boolean} rounded - If set to true, the button will have a rounded shape
  * @attr {Boolean} slim - Set value for slim version of auro-button
  * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container
@@ -46,7 +46,7 @@ export class AuroButton extends LitElement {
     this.disabled = false;
     this.iconOnly = false;
     this.loading = false;
-    this.ondark = false;
+    this.onDark = false;
     this.ready = false;
     this.secondary = false;
     this.tertiary = false;
@@ -56,7 +56,11 @@ export class AuroButton extends LitElement {
   }
 
   static get styles() {
-    return [styleCss];
+    return [
+      tokensCss,
+      styleCss,
+      colorsCss
+    ];
   }
 
   static get properties() {
@@ -89,7 +93,7 @@ export class AuroButton extends LitElement {
         type: Boolean,
         reflect: true
       },
-      ondark:           {
+      onDark:           {
         type: Boolean,
         reflect: true
       },
@@ -158,20 +162,9 @@ export class AuroButton extends LitElement {
   }
 
   render() {
-
-    // deprecated options - maintaining for backwards compatibility
-    // auro-button--secondary
-    // auro-buttonOndark--secondary
-    // auro-button--tertiary
-    // auro-buttonOndark--tertiary
     const classes = {
       'util_insetLg--squish': true,
       'auro-button': true,
-      'auro-buttonOndark': this.ondark,
-      'auro-button--secondary': this.secondary,
-      'auro-buttonOndark--secondary': this.secondary && this.ondark,
-      'auro-button--tertiary': this.tertiary,
-      'auro-buttonOndark--tertiary': this.tertiary && this.ondark,
       'auro-button--rounded': this.rounded,
       'auro-button--slim': this.slim,
       'auro-button--iconOnly': this.iconOnly,
@@ -187,6 +180,9 @@ export class AuroButton extends LitElement {
         ?autofocus="${this.autofocus}"
         class="${classMap(classes)}"
         ?disabled="${this.disabled || this.loading}"
+        ?onDark="${this.onDark}"
+        ?secondary="${this.secondary}"
+        ?tertiary="${this.tertiary}"
         title="${ifDefined(this.title ? this.title : undefined)}"
         name="${ifDefined(this.name ? this.name : undefined)}"
         type="${ifDefined(this.type ? this.type : undefined)}"
diff --git a/src/colors.scss b/src/colors.scss
new file mode 100644
index 0000000..bc8d81c
--- /dev/null
+++ b/src/colors.scss
@@ -0,0 +1,335 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable 
+   max-nesting-depth,
+   selector-max-attribute,
+   selector-class-pattern,
+   selector-max-pseudo-class,
+   declaration-empty-line-before,
+   scss/selector-nest-combinators,
+   selector-not-notation,
+   no-descending-specificity
+   */
+
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+auro-loader {
+  color: var(--ds-auro-button-loader-color);
+}
+
+.auro-button {
+  /**
+  * DEFAULT / PRIMARY VARIANT STYLES
+  */
+  -webkit-tap-highlight-color: var(--ds-auro-button-tap-color);
+
+  color: var(--ds-auro-button-text-color);
+  background-color: var(--ds-auro-button-container-color);
+  background-image: linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));
+  border-color: var(--ds-auro-button-border-color);
+
+  &:not([varient='secondary']):not([varient='tertiary']) {
+    &:focus-visible {
+      &:after {
+        border-color: var(--ds-auro-button-border-inset-color);
+      }
+    }
+  }
+
+  &:not([ondark]) {
+    /**
+    * DEFAULT / PRIMARY VARIANT STYLES
+    */
+
+    // handle active state
+    &:active {
+      --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-hover-default, $ds-color-container-ui-primary-hover-default);
+
+      /**
+      * We use the container color for the border color in this case because the border is not designed as visibly different from the container color
+      */
+      --ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);
+    }
+
+    &[disabled] {
+      --ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, $ds-color-container-ui-primary-disabled-default);
+      --ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, $ds-color-container-ui-primary-disabled-default);
+
+      /**
+      * We use the container color for the border color in this case because the border is not designed as visibly different from the container color
+      */
+      --ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, $ds-color-container-ui-primary-disabled-default);
+
+      @media (hover: hover) {
+        &:hover {
+          --ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, $ds-color-container-ui-primary-disabled-default);
+          --ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, $ds-color-container-ui-primary-disabled-default);
+
+          /**
+          * We use the container color for the border color in this case because the border is not designed as visibly different from the container color
+          */
+          --ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, $ds-color-container-ui-primary-disabled-default);
+        }
+      }
+    }
+
+    // handle hover state auro-button
+    @media (hover: hover) {
+      &:active,
+      &:hover {
+        --ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-default, $ds-color-container-ui-primary-hover-default);
+        --ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-default, $ds-color-container-ui-primary-hover-default);
+
+        /**
+        * We use the container color for the border color in this case because the border is not designed as visibly different from the container color
+        */
+        --ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-default, $ds-color-container-ui-primary-hover-default);
+      }
+    }
+
+    /**
+    * SECONDARY VARIANT STYLES
+    */
+    &[variant='secondary'] {
+      --ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, $ds-color-container-ui-secondary-default-default);
+      --ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, $ds-color-container-ui-secondary-default-default);
+      --ds-auro-button-border-color: var(--ds-color-border-ui-secondary-default-default, $ds-color-border-ui-secondary-default-default);
+      --ds-auro-button-text-color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default);
+
+      @media (hover: hover) {
+        &:active,
+        &:hover {        
+          --ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-default, $ds-color-container-ui-secondary-hover-default);
+          --ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-default, $ds-color-container-ui-secondary-hover-default);
+          --ds-auro-button-border-color: var(--ds-color-border-ui-hover-default, $ds-color-border-ui-hover-default);
+          --ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, $ds-color-text-ui-hover-default);
+        }
+      }
+
+      &:focus-visible {
+        --ds-auro-button-border-inset-color: var(--ds-color-border-ui-secondary-focus-default, $ds-color-border-ui-secondary-focus-default);
+      }
+
+      &:active {
+        --ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-default, $ds-color-container-ui-secondary-active-default);
+        --ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-default, $ds-color-container-ui-secondary-active-default);
+        --ds-auro-button-border-color: var(--ds-color-border-ui-active-default, $ds-color-border-ui-active-default);
+        --ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, $ds-color-text-ui-hover-default);
+      }
+
+      &:disabled {
+        --ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, $ds-color-container-ui-secondary-disabled-default);
+        --ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, $ds-color-container-ui-secondary-disabled-default);
+        --ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, $ds-color-border-ui-disabled-default);
+        --ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, $ds-color-text-ui-disabled-default);
+
+        @media (hover: hover) {
+          &:hover {
+            --ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, $ds-color-container-ui-secondary-disabled-default);
+            --ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, $ds-color-container-ui-secondary-disabled-default);
+            --ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, $ds-color-border-ui-disabled-default);
+            --ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, $ds-color-text-ui-disabled-default);
+          }
+        }
+      }
+    }
+
+    /**
+    * TERTIARY VARIANT STYLES
+    */
+    &[variant='tertiary'] {
+      --ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, $ds-color-container-ui-tertiary-default-default);
+      --ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, $ds-color-container-ui-tertiary-default-default);
+      --ds-auro-button-border-color: transparent;
+      --ds-auro-button-text-color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default);
+
+      @media (hover: hover) {
+        &:active,
+        &:hover {        
+          --ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-default, $ds-color-container-ui-tertiary-hover-default);
+          --ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-default, $ds-color-container-ui-tertiary-hover-default);
+          --ds-auro-button-border-color: transparent;
+          --ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, $ds-color-text-ui-hover-default);
+        }
+      }
+
+      &:focus-visible {
+        --ds-auro-button-border-color: var(--ds-color-border-ui-secondary-default-default, $ds-color-border-ui-secondary-default-default);
+        --ds-auro-button-border-inset-color: var(--ds-color-border-ui-secondary-default-default, $ds-color-border-ui-secondary-default-default);
+      }
+
+      &:active {
+        --ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-default, $ds-color-container-ui-tertiary-active-default);
+        --ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-default, $ds-color-container-ui-tertiary-active-default);
+        --ds-auro-button-border-color: transparent;
+        --ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, $ds-color-text-ui-hover-default);
+      }
+
+      &:disabled {
+        --ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, $ds-color-container-ui-tertiary-disabled-default);
+        --ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, $ds-color-container-ui-tertiary-disabled-default);
+        --ds-auro-button-border-color: transparent;
+        --ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, $ds-color-text-ui-disabled-default);
+
+        @media (hover: hover) {
+          &:hover {
+            --ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, $ds-color-container-ui-tertiary-disabled-default);
+            --ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, $ds-color-container-ui-tertiary-disabled-default);
+            --ds-auro-button-border-color: transparent;
+            --ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, $ds-color-text-ui-disabled-default);
+          }
+        }
+      }
+    }
+  }
+
+  &[ondark] {
+    --ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-inverse, $ds-color-container-ui-primary-default-inverse);
+    --ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-inverse, $ds-color-container-ui-primary-default-inverse);
+
+    /**
+      * We use the container color for the border color in this case because the border is not designed as visibly different from the container color
+      */
+    --ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-inverse, $ds-color-container-ui-primary-default-inverse);
+    --ds-auro-button-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
+    --ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
+
+    @media (hover: hover) {
+      &:active,
+      &:hover {
+        --ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, $ds-color-container-ui-primary-hover-inverse);
+        --ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, $ds-color-container-ui-primary-hover-inverse);
+
+        /**
+          * We use the container color for the border color in this case because the border is not designed as visibly different from the container color
+          */
+        --ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, $ds-color-container-ui-primary-hover-inverse);
+      }
+    }
+
+    &:active {
+      --ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, $ds-color-container-ui-primary-hover-inverse);
+      --ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, $ds-color-container-ui-primary-hover-inverse);
+
+      /**
+        * We use the container color for the border color in this case because the border is not designed as visibly different from the container color
+        */
+      --ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, $ds-color-container-ui-primary-hover-inverse);
+    }
+
+    &[disabled] {
+      --ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, $ds-color-container-ui-primary-disabled-inverse);
+      --ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, $ds-color-container-ui-primary-disabled-inverse);
+  
+      /**
+       * We use the container color for the border color in this case because the border is not designed as visibly different from the container color
+       */
+      --ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, $ds-color-container-ui-primary-disabled-inverse);
+  
+      @media (hover: hover) {
+        &:hover {
+          --ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, $ds-color-container-ui-primary-disabled-inverse);
+          --ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, $ds-color-container-ui-primary-disabled-inverse);
+  
+          /**
+           * We use the container color for the border color in this case because the border is not designed as visibly different from the container color
+           */
+          --ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, $ds-color-container-ui-primary-disabled-inverse);
+        }
+      }
+    }
+
+    &[variant='secondary'] {
+      --ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-inverse, $ds-color-container-ui-secondary-default-inverse);
+      --ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-inverse, $ds-color-container-ui-secondary-default-inverse);
+      --ds-auro-button-border-color: var(--ds-color-border-ui-secondary-default-inverse, $ds-color-border-ui-secondary-default-inverse);
+      --ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, $ds-color-text-ui-default-inverse);
+
+      @media (hover: hover) {
+        &:active,
+        &:hover {        
+          --ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-inverse, $ds-color-container-ui-secondary-hover-inverse);
+          --ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-inverse, $ds-color-container-ui-secondary-hover-inverse);
+          --ds-auro-button-border-color: var(--ds-color-border-ui-hover-inverse, $ds-color-border-ui-hover-inverse);
+          --ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, $ds-color-text-ui-hover-inverse);
+        }
+      }
+
+      &:focus-visible {
+        --ds-auro-button-border-inset-color: var(--ds-color-border-ui-secondary-focus-inverse, $ds-color-border-ui-secondary-focus-inverse);
+      }
+
+      &:active {
+        --ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-inverse, $ds-color-container-ui-secondary-active-inverse);
+        --ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-inverse, $ds-color-container-ui-secondary-active-inverse);
+        --ds-auro-button-border-color: var(--ds-color-border-ui-active-inverse, $ds-color-border-ui-active-inverse);
+        --ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, $ds-color-text-ui-hover-inverse);
+      }
+
+      &:disabled {
+        --ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, $ds-color-container-ui-secondary-disabled-inverse);
+        --ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, $ds-color-container-ui-secondary-disabled-inverse);
+        --ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, $ds-color-border-ui-disabled-inverse);
+        --ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, $ds-color-text-ui-disabled-inverse);
+
+        @media (hover: hover) {
+          &:hover {
+            --ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, $ds-color-container-ui-secondary-disabled-inverse);
+            --ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, $ds-color-container-ui-secondary-disabled-inverse);
+            --ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, $ds-color-border-ui-disabled-inverse);
+            --ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, $ds-color-text-ui-disabled-inverse);
+          }
+        }
+      }
+    }
+
+    &[variant='tertiary'] {
+      --ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-inverse, $ds-color-container-ui-tertiary-default-inverse);
+      --ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-inverse, $ds-color-container-ui-tertiary-default-inverse);
+      --ds-auro-button-border-color: transparent;
+      --ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, $ds-color-text-ui-default-inverse);
+
+      @media (hover: hover) {
+        &:active,
+        &:hover {        
+          --ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-inverse, $ds-color-container-ui-tertiary-hover-inverse);
+          --ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, $ds-color-container-ui-tertiary-hover-inverse);
+          --ds-auro-button-border-color: transparent;
+          --ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, $ds-color-text-ui-hover-inverse);
+        }
+      }
+
+      &:focus-visible {
+        --ds-auro-button-border-color: var(--ds-color-border-ui-secondary-default-inverse, $ds-color-border-ui-secondary-default-inverse);
+        --ds-auro-button-border-inset-color: var(--ds-color-border-ui-secondary-default-inverse, $ds-color-border-ui-secondary-default-inverse);
+      }
+
+      &:active {
+        --ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-inverse, $ds-color-container-ui-tertiary-active-inverse);
+        --ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-inverse, $ds-color-container-ui-tertiary-active-inverse);
+        --ds-auro-button-border-color: transparent;
+        --ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, $ds-color-text-ui-hover-inverse);
+      }
+
+      &:disabled {
+        --ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, $ds-color-container-ui-tertiary-disabled-inverse);
+        --ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, $ds-color-container-ui-tertiary-disabled-inverse);
+        --ds-auro-button-border-color: transparent;
+        --ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, $ds-color-text-ui-disabled-inverse);
+
+        @media (hover: hover) {
+          &:hover {
+            --ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, $ds-color-container-ui-tertiary-disabled-inverse);
+            --ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, $ds-color-container-ui-tertiary-disabled-inverse);
+            --ds-auro-button-border-color: transparent;
+            --ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, $ds-color-text-ui-disabled-inverse);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/style.scss b/src/style.scss
index 714ca1b..5326d00 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -19,7 +19,11 @@
    declaration-empty-line-before,
    property-no-vendor-prefix,
    selector-max-class,
-   no-duplicate-selectors */
+   no-duplicate-selectors,
+   selector-max-attribute,
+   selector-max-pseudo-class,
+   selector-not-notation
+   */
 
 // Import Auro Sass variables
 @import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
@@ -34,12 +38,6 @@
 $auro-inset-spacing-options: lg;
 $auro-inset-directions:'--squish';
 
-// TO-DO
-// Sass and CSS variables do not process together
-// These values should be moved to Auro Design Tokens for use
-$auro-rgb-color-base-black-03: rgba(0, 0, 0, .03);
-$auro-rgb-color-base-white-03: rgba(255, 255, 255, .03);
-
 @import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityMixins/insetUtility";
 
 :host([fluid]),
@@ -62,18 +60,15 @@ slot {
 
 // Button styles
 .auro-button {
-  @include auro_transition(all, 0.15s, ease);
-  $disabledOPacity: .4;
-
   position: relative;
 
   padding: 0 var(--ds-size-300, $ds-size-300);
 
-  color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
   cursor: pointer;
-  background-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
-  border: 1px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+  border-width: 1px;
+  border-style: solid;
   border-radius: var(--ds-border-radius, $ds-border-radius);
+
   font-family: var(--ds-font-family-default, $ds-font-family-default);
   font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
   font-weight: var(--ds-text-body-default-weight, $ds-text-body-default-weight);
@@ -95,42 +90,53 @@ slot {
   margin: 0;
 
   // macOS / iOS agents
-  -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
 
-  // handle hover state auro-button
-  @media (hover: hover) {
-    &:active,
-    &:hover {
-      background-image: linear-gradient(var(--ds-color-ui-hover-default, $ds-color-ui-hover-default), var(--ds-color-ui-hover-default, $ds-color-ui-hover-default));
-      border: 1px solid var(--ds-color-ui-hover-default, $ds-color-ui-hover-default);
-    }
-  }
-
   // handle active state
   &:active {
-    background-color: var(--ds-color-ui-active-default, $ds-color-ui-active-default);
-    border: 1px solid var(--ds-color-ui-active-default, $ds-color-ui-active-default);
     transform: scale(0.95);
   }
 
+  &:focus-visible {
+    &:not([variant='secondary']):not([variant='tertiary']) {
+      &:after {
+        display: block;
+        content: '';
+        height: calc(100% - 2px);
+        width: calc(100% - 2px);
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        border-radius: 4px;
+        border-style: solid;
+        border-width: 2px;
+      }
+    }
+
+    &[variant='secondary'],
+    &[variant='tertiary'] {
+      &:after {
+        display: block;
+        content: '';
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: var(--ds-border-radius, $ds-border-radius);
+        border-style: solid;
+        border-width: 2px;
+      }
+    }
+  }
+
   &.loading {
     cursor: not-allowed;
 
     *:not(auro-loader) {
       visibility: hidden;
     }
-
-    auro-loader {
-      color: var(--ds-color-background-darkest, $ds-color-background-darkest, $ds-color-background-darkest);
-    }
-
-    &.auro-buttonOndark {
-      auro-loader {
-        color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
-      }
-    }
   }
 
   @include auro_breakpoint--sm {
@@ -141,211 +147,50 @@ slot {
   &:disabled {
     cursor: not-allowed;
     transform: unset;
-
-    background-color: rgba($ds-color-ui-default-default, $disabledOPacity);
-    border: 1px solid rgba($ds-color-ui-default-default, 0);
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: rgba($ds-color-ui-default-default, $disabledOPacity);
-        border: 1px solid rgba($ds-color-ui-default-default, 0);
-      }
-    }
   }
 
-  // auro-button--secondary
-  &[variant='secondary'],
-  &--secondary {
-    background-color: var(--ds-color-background-lightest, $ds-color-background-lightest);
-    border: 1px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
-    color: var(--ds-color-text-link-default, $ds-color-text-link-default);
-
-    @media (hover: hover) {
-      &:active,
-      &:hover {
-        background-image: linear-gradient(var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default), var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default));
-        border: 1px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
-      }
-    }
-
-    &:active {
-      background-color: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
-      border: 1px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
-    }
-
+  &[variant='secondary'] {
     &:disabled {
       cursor: not-allowed;
       transform: unset;
-
-      color: rgba($ds-color-text-link-default, $disabledOPacity);
-      background-color: rgba($ds-color-background-lightest, $disabledOPacity);
-      border: 1px solid rgba($ds-color-ui-default-default, $disabledOPacity);
-
-      @media (hover: hover) {
-        &:hover {
-          color: rgba($ds-color-text-link-default, $disabledOPacity);
-          background-color: rgba($ds-color-background-lightest, $disabledOPacity);
-          border: 1px solid rgba($ds-color-ui-default-default, $disabledOPacity);
-        }
-      }
     }
   }
 
-  // auro-button--tertiary
-  &[variant='tertiary'],
-  &--tertiary {
-    background-color: $auro-rgb-color-base-black-03;
-    border-color: transparent;
-    color: var(--ds-color-text-link-default, $ds-color-text-link-default);
-
-    @media (hover: hover) {
-      &:active,
-      &:hover {
-        background-image: linear-gradient(var(--ds-color-ui-bkg-hover-default), var(--ds-color-ui-bkg-hover-default));
-        border-color: transparent;
-      }
-    }
-
-    &:active {
-      background-color: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
-      border-color: transparent;
-    }
-
+  &[variant='tertiary'] {
     &:disabled {
       cursor: not-allowed;
       transform: unset;
-
-      color: rgba($ds-color-text-link-default, $disabledOPacity);
-      background-color: $auro-rgb-color-base-black-03;
-      border: 1px solid transparent;
-
-      @media (hover: hover) {
-        &:hover {
-          background-color: $auro-rgb-color-base-black-03;
-          border: 1px solid transparent;
-        }
-      }
     }
   }
 
-  &Ondark {
-    background-color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
-    border: 1px solid var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
-    color: var(--ds-color-text-primary-default);
-
-    // auro-buttonOndark hover
-    @media (hover: hover) {
-      &:active,
-      &:hover {
-        background-image: linear-gradient(var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse), var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse));
-        border: 1px solid var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse);
-      }
-    }
-
-    &:active {
-      background-color: var(--ds-color-ui-active-inverse, $ds-color-ui-active-inverse);
-      border: 1px solid var(--ds-color-ui-active-inverse, $ds-color-ui-active-inverse);
-    }
-
+  &[ondark] {
     &:disabled {
       cursor: not-allowed;
       transform: unset;
-
-      color: rgba($ds-color-text-primary-default, $disabledOPacity);
-      background-color: rgba($ds-color-ui-default-inverse, $disabledOPacity);
-      border: 1px solid rgba($ds-color-ui-default-inverse, $disabledOPacity);
-
-      @media (hover: hover) {
-        &:hover {
-          color: rgba($ds-color-text-primary-default, $disabledOPacity);
-          background-color: rgba($ds-color-ui-default-inverse, $disabledOPacity);
-          border: 1px solid rgba($ds-color-ui-default-inverse, $disabledOPacity);
-        }
-      }
     }
 
-    // auro-buttonOndark--secondary
-    &[variant='secondary'],
-    &--secondary {
-      background-color: var(--ds-color-background-darker, $ds-color-background-darker);
-      border: 1px solid var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
-      color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
-
-      @media (hover: hover) {
-        &:active,
-        &:hover {
-          background-image: linear-gradient(var(--ds-color-background-darkest, $ds-color-background-darkest), var(--ds-color-background-darkest, $ds-color-background-darkest));
-        }
-      }
-
-      &:active {
-        background-color: var(--ds-color-base-black-opacity-15, $ds-color-base-black-opacity-15, $ds-color-base-black-opacity-15);
-        border: 1px solid var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse);
-      }
-
-      &:disabled {
-        @media (hover: hover) {
-          &:hover {
-            background-color: var(--ds-color-background-darker, $ds-color-background-darker);
-            border: 1px solid var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
-          }
-        }
-      }
-
+    &[variant='secondary'] {
       &:disabled {
         cursor: not-allowed;
         transform: unset;
-
-        color: rgba($ds-color-ui-default-inverse, $disabledOPacity);
-        background-color: var(--ds-color-background-darker, $ds-color-background-darker);
-        border: 1px solid rgba($ds-color-ui-default-inverse, $disabledOPacity);
-
-        @media (hover: hover) {
-          &:hover {
-            color: rgba($ds-color-ui-default-inverse, $disabledOPacity);
-            background-color: var(--ds-color-background-darker, $ds-color-background-darker);
-            border: 1px solid rgba($ds-color-ui-default-inverse, $disabledOPacity);
-          }
-        }
       }
     }
 
-    // auro-button--tertiary
-    &[variant='tertiary'],
-    &--tertiary {
-      background-color: $auro-rgb-color-base-white-03;
-      border: 1px solid transparent;
-      color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
-
+    &[variant='tertiary'] {
       @media (hover: hover) {
         &:active,
         &:hover {
-          background-image: linear-gradient(var(--ds-color-ui-bkg-hover-inverse, $ds-color-ui-bkg-hover-inverse), var(--ds-color-ui-bkg-hover-inverse, $ds-color-ui-bkg-hover-inverse));
-          border: 1px solid transparent;
           box-shadow: none;
         }
       }
 
       &:active {
-        background-color: var(--ds-color-base-black-opacity-15, $ds-color-base-black-opacity-15);
-        border: 1px solid transparent;
         box-shadow: none;
       }
 
       &:disabled {
         cursor: not-allowed;
         transform: unset;
-        background-color: $auro-rgb-color-base-white-03;
-        border: transparent;
-        color: rgba($ds-color-ui-default-inverse, $disabledOPacity);
-
-        @media (hover: hover) {
-          &:hover {
-            background-color: $auro-rgb-color-base-white-03;
-            color: rgba($ds-color-ui-default-inverse, $disabledOPacity);
-            border: transparent;
-          }
-        }
       }
     }
   }
diff --git a/src/tokens.scss b/src/tokens.scss
new file mode 100644
index 0000000..9d17ffe
--- /dev/null
+++ b/src/tokens.scss
@@ -0,0 +1,9 @@
+:host {
+  --ds-auro-button-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
+  --ds-auro-button-container-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+  --ds-auro-button-container-image: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+  --ds-auro-button-border-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+  --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-tap-color: transparent;
+}
\ No newline at end of file
diff --git a/test/auro-button.test.js b/test/auro-button.test.js
index 469a072..037bdd0 100644
--- a/test/auro-button.test.js
+++ b/test/auro-button.test.js
@@ -71,7 +71,7 @@ describe('auro-button', () => {
 
     expect(classList.includes('util_insetLg--squish')).to.be.true;
     expect(classList.includes('auro-button')).to.be.true;
-    expect(classList.includes('auro-buttonOndark')).to.be.true;
+    expect(el.hasAttribute('ondark')).to.be.true;
   });
 
   it('tests setting secondary', async () => {
@@ -85,7 +85,7 @@ describe('auro-button', () => {
 
     expect(classList.includes('util_insetLg--squish')).to.be.true;
     expect(classList.includes('auro-button')).to.be.true;
-    expect(classList.includes('auro-button--secondary')).to.be.true;
+    expect(el.hasAttribute('secondary')).to.be.true;
   });
 
   it('tests setting secondary ondark', async () => {
@@ -99,9 +99,8 @@ describe('auro-button', () => {
 
     expect(classList.includes('util_insetLg--squish')).to.be.true;
     expect(classList.includes('auro-button')).to.be.true;
-    expect(classList.includes('auro-button--secondary')).to.be.true;
-    expect(classList.includes('auro-buttonOndark--secondary')).to.be.true;
-    expect(classList.includes('auro-buttonOndark')).to.be.true;
+    expect(el.hasAttribute('ondark')).to.be.true;
+    expect(el.hasAttribute('secondary')).to.be.true;
   });
 
   it('tests setting tertiary', async () => {
@@ -115,7 +114,7 @@ describe('auro-button', () => {
 
     expect(classList.includes('util_insetLg--squish')).to.be.true;
     expect(classList.includes('auro-button')).to.be.true;
-    expect(classList.includes('auro-button--tertiary')).to.be.true;
+    expect(el.hasAttribute('tertiary')).to.be.true;
   });
 
   it('tests setting tertiary ondark', async () => {
@@ -129,9 +128,8 @@ describe('auro-button', () => {
 
     expect(classList.includes('util_insetLg--squish')).to.be.true;
     expect(classList.includes('auro-button')).to.be.true;
-    expect(classList.includes('auro-button--tertiary')).to.be.true;
-    expect(classList.includes('auro-buttonOndark--tertiary')).to.be.true;
-    expect(classList.includes('auro-buttonOndark')).to.be.true;
+    expect(el.hasAttribute('ondark')).to.be.true;
+    expect(el.hasAttribute('tertiary')).to.be.true;
   });
 
   it('tests setting arialabel', async () => {