diff --git a/example/src/MyComponent.jsx b/example/src/MyComponent.jsx
index e9c3312d2d1..25fbe9cb708 100644
--- a/example/src/MyComponent.jsx
+++ b/example/src/MyComponent.jsx
@@ -5,6 +5,7 @@ import {
 } from '@openedx/paragon';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { FavoriteBorder } from '@openedx/paragon/icons';
+import ThemeSwitcher from './ThemeSwitcher';
 
 function MyComponent() {
   const [value, setValue] = useState('');
@@ -13,9 +14,12 @@ function MyComponent() {
 
   return (
     <Container className="p-5">
-      <Stack direction="horizontal" gap={2}>
-        <h1>My Form</h1>
-        <Bubble variant="error">1</Bubble>
+      <Stack direction="horizontal" gap={2} className="justify-content-between align-items-center">
+        <Stack direction="horizontal" gap={2}>
+          <h1>My Form</h1>
+          <Bubble variant="error">1</Bubble>
+        </Stack>
+        <ThemeSwitcher />
       </Stack>
       <Form>
         <Form.Group>
diff --git a/example/src/ThemeSwitcher.jsx b/example/src/ThemeSwitcher.jsx
new file mode 100644
index 00000000000..b5fe3e18b3a
--- /dev/null
+++ b/example/src/ThemeSwitcher.jsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Form } from '@openedx/paragon';
+
+// Paragon ships each theme as a separate, self-contained stylesheet. Switching
+// themes means loading the corresponding CSS — here we swap a single <link>
+// between the built light and dark bundles served at /paragon-dist
+// (see webpack.dev.config.js). Run `make build` at the repo root first.
+const THEME_HREF = {
+  light: '/paragon-dist/light.min.css',
+  dark: '/paragon-dist/dark.min.css',
+};
+
+function ThemeSwitcher() {
+  const [theme, setTheme] = useState('light');
+
+  useEffect(() => {
+    let link = document.getElementById('paragon-theme');
+    if (!link) {
+      link = document.createElement('link');
+      link.id = 'paragon-theme';
+      link.rel = 'stylesheet';
+      document.head.appendChild(link);
+    }
+    link.href = THEME_HREF[theme];
+  }, [theme]);
+
+  return (
+    <Form.Switch
+      checked={theme === 'dark'}
+      onChange={(e) => setTheme(e.target.checked ? 'dark' : 'light')}
+    >
+      Dark theme
+    </Form.Switch>
+  );
+}
+
+export default ThemeSwitcher;
diff --git a/example/webpack.dev.config.js b/example/webpack.dev.config.js
index 4d7be1d08bc..af83858a420 100644
--- a/example/webpack.dev.config.js
+++ b/example/webpack.dev.config.js
@@ -25,4 +25,20 @@ config.resolveLoader = {
   ],
 };
 
+// Serve Paragon's built theme stylesheets (dist/light.min.css, dist/dark.min.css)
+// at /paragon-dist so the ThemeSwitcher demo can swap between them via a <link>.
+// Requires `make build` (or `npm run build`) at the repo root to populate ./dist.
+const existingStatic = config.devServer && config.devServer.static;
+let staticDirs = [];
+if (Array.isArray(existingStatic)) {
+  staticDirs = [...existingStatic];
+} else if (existingStatic) {
+  staticDirs = [existingStatic];
+}
+staticDirs.push({
+  directory: path.resolve(__dirname, '..', 'dist'),
+  publicPath: '/paragon-dist',
+});
+config.devServer = { ...(config.devServer || {}), static: staticDirs };
+
 module.exports = config;
diff --git a/lib/build-scss.js b/lib/build-scss.js
index 4d297d8bed9..ae42eeff304 100755
--- a/lib/build-scss.js
+++ b/lib/build-scss.js
@@ -104,7 +104,9 @@ const compileAndWriteStyleSheets = ({
   ];
 
   const postCSSCompilation = ora(`Compilation for ${capitalize(name)} stylesheet...`).start();
-  postCSS(commonPostCssPlugins)
+  // Return the promise so callers can await it; theme variants share a single
+  // theme-urls.json, so they must be built sequentially (see buildScssCommand).
+  return postCSS(commonPostCssPlugins)
     .process(compiledStyleSheet.css, { from: stylesPath, map: false })
     .then((result) => {
       postCSSCompilation.succeed(`Successfully compiled ${capitalize(name)} theme stylesheet`);
@@ -151,7 +153,7 @@ const compileAndWriteStyleSheets = ({
  *
  * @param {Array<string>} commandArgs - Command line arguments for building SCSS stylesheets.
  */
-function buildScssCommand(commandArgs) {
+async function buildScssCommand(commandArgs) {
   const defaultArgs = {
     corePath: path.resolve(process.cwd(), 'styles/scss/core/core.scss'),
     excludeCore: false,
@@ -168,9 +170,15 @@ function buildScssCommand(commandArgs) {
     defaultThemeVariants,
   } = minimist(commandArgs, { default: defaultArgs, boolean: ['excludeCore'] });
 
+  // Discover theme variant dirs synchronously, before any await. Core + variants
+  // are then built sequentially because they share a single theme-urls.json
+  // (concurrent builds would race and drop one).
+  const themeDirs = fs.readdirSync(themesPath, { withFileTypes: true })
+    .filter((item) => item.isDirectory());
+
   // Core CSS
   if (!excludeCore) {
-    compileAndWriteStyleSheets({
+    await compileAndWriteStyleSheets({
       name: 'core',
       stylesPath: corePath,
       outDir,
@@ -178,11 +186,9 @@ function buildScssCommand(commandArgs) {
   }
 
   // Theme variants CSS
-  const themeDirs = fs.readdirSync(themesPath, { withFileTypes: true })
-    .filter((item) => item.isDirectory());
-
   for (const themeDir of themeDirs) {
-    compileAndWriteStyleSheets({
+    // eslint-disable-next-line no-await-in-loop
+    await compileAndWriteStyleSheets({
       name: themeDir.name,
       stylesPath: `${themesPath}/${themeDir.name}/index.css`,
       outDir,
diff --git a/package.json b/package.json
index 0ea414c17fb..d878120b9cc 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "build-types": "tsc --emitDeclarationOnly",
     "playroom:start": "npm run playroom:start --workspace=www",
     "playroom:build": "npm run playroom:build --workspace=www",
-    "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css",
+    "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css --all-themes",
     "build-tokens:watch": "npx nodemon --ignore styles/css -x \"npm run build-tokens\"",
     "serve-theme-css": "./bin/paragon-scripts.js serve-theme-css --build-dir ./dist --theme-name='Custom Theme Name'",
     "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage",
diff --git a/src/Card/index.scss b/src/Card/index.scss
index 61074958678..825ad449b60 100644
--- a/src/Card/index.scss
+++ b/src/Card/index.scss
@@ -125,7 +125,7 @@ a.pgn__card {
     }
 
     %header-title {
-      color: var(--pgn-color-black);
+      color: var(--pgn-color-headings-base);
       font-weight: var(--pgn-typography-font-weight-bold);
       text-align: start;
     }
@@ -270,7 +270,7 @@ a.pgn__card {
     }
 
     .pgn__card-section-title {
-      color: var(--pgn-color-black);
+      color: var(--pgn-color-headings-base);
       font-weight: var(--pgn-typography-font-weight-bold);
       font-size: var(--pgn-typography-font-size-h5-base);
       margin-bottom: var(--pgn-spacing-card-spacer-y);
@@ -396,7 +396,7 @@ a.pgn__card {
 
     .pgn__card-status__heading {
       font-size: var(--pgn-typography-font-size-h4-base);
-      color: var(--pgn-color-black);
+      color: var(--pgn-color-headings-base);
       display: flex;
       font-weight: var(--pgn-typography-font-weight-bold);
       line-height: 1.5rem;
diff --git a/src/Collapsible/index.scss b/src/Collapsible/index.scss
index 4ab345dd3fb..eac9f700f6c 100644
--- a/src/Collapsible/index.scss
+++ b/src/Collapsible/index.scss
@@ -67,7 +67,7 @@
     cursor: pointer;
     align-items: center;
     text-decoration: underline;
-    color: theme-color("primary", "default");
+    color: var(--pgn-color-theme-default-primary);
     padding: var(--pgn-spacing-collapsible-card-spacer-basic-y) var(--pgn-spacing-collapsible-card-spacer-basic-x);
   }
 
diff --git a/src/ColorPicker/index.scss b/src/ColorPicker/index.scss
index db46647e622..568eaac1fdb 100644
--- a/src/ColorPicker/index.scss
+++ b/src/ColorPicker/index.scss
@@ -24,7 +24,7 @@
 }
 
 .pgn__color-modal {
-  background: var(--pgn-color-white);
+  background: var(--pgn-color-bg-base);
   padding-bottom: .1rem;
   margin-bottom: var(--pgn-spacing-spacer-base);
 }
diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss
index 4292f5bde38..5f891a26c0e 100644
--- a/src/DataTable/index.scss
+++ b/src/DataTable/index.scss
@@ -139,11 +139,11 @@
   width: 100%;
 
   &.is-striped tr:nth-child(even) {
-    background-color: var(--pgn-color-light-200);
+    background-color: var(--pgn-color-data-table-bg-striped);
   }
 
   th {
-    background-color: var(--pgn-color-light-300);
+    background-color: var(--pgn-color-data-table-bg-header);
     padding: var(--pgn-spacing-data-table-padding-cell);
     text-align: start;
   }
@@ -296,7 +296,7 @@
 }
 
 .pgn__data-table__overflow-actions-menu {
-  background: var(--pgn-color-white);
+  background: var(--pgn-color-bg-base);
   padding: var(--pgn-spacing-spacer-2);
   box-shadow: var(--pgn-elevation-box-shadow-level-1);
   border-radius: 4px;
diff --git a/src/Form/_index.scss b/src/Form/_index.scss
index fccb6a970a0..850d9cb1574 100644
--- a/src/Form/_index.scss
+++ b/src/Form/_index.scss
@@ -503,7 +503,7 @@ select.form-control {
   }
 
   &:focus {
-    border-color: var(--pgn-color-black);
+    border-color: var(--pgn-color-gray-900);
 
     &::before {
       border-radius: var(--pgn-size-form-control-border-radio-indicator-radius);
@@ -632,7 +632,7 @@ select.form-control {
     max-height: 15rem;
     overflow-y: scroll;
     position: absolute;
-    background-color: var(--pgn-color-white);
+    background-color: var(--pgn-color-bg-base);
     width: calc(100% - .5rem);
     z-index: var(--pgn-elevation-dropdown-zindex);
     top: 3.125rem;
@@ -658,7 +658,7 @@ select.form-control {
       .spinner-border {
         width: var(--pgn-size-form-autosuggest-spinner-width);
         height: var(--pgn-size-form-autosuggest-spinner-height);
-        border: var(--pgn-size-form-autosuggest-border-width) solid var(--pgn-color-black);
+        border: var(--pgn-size-form-autosuggest-border-width) solid var(--pgn-color-gray-900);
         border-right-color: transparent;
       }
     }
diff --git a/src/Menu/README.md b/src/Menu/README.md
index 81704754396..ae15fc4ab6e 100644
--- a/src/Menu/README.md
+++ b/src/Menu/README.md
@@ -77,7 +77,7 @@ A ``Menu`` can be implemented to appear inside a `modalpopup` for a wide variety
       <ModalPopup positionRef={target} isOpen={isOpen} onClose={close} style={{
         width: 500, height: 50
       }}>
-      <div className="bg-white">
+      <div style={{ backgroundColor: 'var(--pgn-color-bg-base)' }}>
         <Menu>
           <MenuItem as={Button} variant="tertiary" size="inline" onClick= {()=>setSelected('Beans')}>Beans</MenuItem>
           <MenuItem as={Button} variant="tertiary" size="inline" onClick= {()=>setSelected('Greens')}>Greens</MenuItem>
diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss
index 16b38e29078..29ec2c7d754 100644
--- a/src/Modal/_ModalDialog.scss
+++ b/src/Modal/_ModalDialog.scss
@@ -185,7 +185,7 @@
   &::before {
     content: "";
     background-color: transparent;
-    background-image: linear-gradient(#605C5C, #B8BEBE, transparent 50%);
+    background-image: linear-gradient(var(--pgn-color-modal-content-scroll-shadow-from), var(--pgn-color-modal-content-scroll-shadow-to), transparent 50%);
     display: block;
     height: 20px;
     position: sticky;
@@ -203,8 +203,8 @@
     background-image:
       linear-gradient(
         360deg,
-        #605C5C,
-        #B8BEBE,
+        var(--pgn-color-modal-content-scroll-shadow-from),
+        var(--pgn-color-modal-content-scroll-shadow-to),
         transparent 50%
       );
     display: block;
diff --git a/src/Modal/index.scss b/src/Modal/index.scss
index 40bffefe7a1..2282a42e886 100644
--- a/src/Modal/index.scss
+++ b/src/Modal/index.scss
@@ -62,7 +62,7 @@
   }
 
   &::before {
-    border-top-color: rgba(0, 0, 0, .2);
+    border-top-color: var(--pgn-color-modal-content-border);
   }
 }
 
@@ -98,7 +98,7 @@
 .pgn__modal-popup__arrow-top-start::after,
 .pgn__modal-popup__arrow-top::after {
   bottom: var(--pgn-size-border-width);
-  border-top-color: var(--pgn-color-white);
+  border-top-color: var(--pgn-color-bg-base);
 }
 
 [data-popper-placement^="right"] .pgn__modal-popup__arrow-auto,
diff --git a/src/Modal/modal-layer.mdx b/src/Modal/modal-layer.mdx
index 65871643f13..7ebb286cde7 100644
--- a/src/Modal/modal-layer.mdx
+++ b/src/Modal/modal-layer.mdx
@@ -27,7 +27,7 @@ A generic component for creating accessibile modal layer objects. The modal laye
         <Button variant="outline-primary" onClick={open}>Open modal layer</Button>
       </div>
       <ModalLayer isOpen={isOpen} onClose={close}>
-        <div role="dialog" aria-label="My dialog" className="mw-sm p-5 bg-white mx-auto my-5">
+        <div role="dialog" aria-label="My dialog" className="mw-sm p-5 mx-auto my-5 border rounded" style={{ backgroundColor: 'var(--pgn-color-bg-base)' }}>
           <h1>I'm a dialog box</h1>
           <p>
             <Button variant="primary" className="mie-2">A button</Button>
@@ -67,7 +67,7 @@ A generic component for creating accessibile modal layer objects. The modal laye
         <Button variant="outline-primary" onClick={open}>Open small modal layer</Button>
       </div>
       <ModalLayer isOpen={isOpen} onClose={close}>
-        <div role="dialog" aria-label="My dialog" className="mw-sm p-5 bg-white mx-auto my-5">
+        <div role="dialog" aria-label="My dialog" className="mw-sm p-5 mx-auto my-5 border rounded" style={{ backgroundColor: 'var(--pgn-color-bg-base)' }}>
           <h1>I'm a dialog box</h1>
           <p>
             <Button variant="primary" className="mie-2">A button</Button>
diff --git a/src/Modal/modal-popup.mdx b/src/Modal/modal-popup.mdx
index e31feef0cf2..2e16309b974 100644
--- a/src/Modal/modal-popup.mdx
+++ b/src/Modal/modal-popup.mdx
@@ -40,8 +40,8 @@ A proper way to implement this is to use [callback refs](https://react.dev/refer
         isOpen={isOpen}
         onClose={close}>
         <div
-          className="bg-white p-3 rounded shadow"
-          style={{textAlign: 'start'}}>
+          className="p-3 rounded shadow border"
+          style={{textAlign: 'start', backgroundColor: 'var(--pgn-color-bg-base)'}}>
           <p>This could be a menu or tray.</p>
 
           <Button variant="primary" className="mie-2">Action</Button>
@@ -78,8 +78,8 @@ The arrow modifier positions an inner element of the modal popup so it appears c
         isOpen={isOpen}
         onClose={close}>
         <div
-          className="bg-white p-3 rounded shadow border"
-          style={{textAlign: 'start'}}>
+          className="p-3 rounded shadow border"
+          style={{textAlign: 'start', backgroundColor: 'var(--pgn-color-bg-base)'}}>
           <p>This could be a menu or tray.</p>
 
           <Button variant="primary" className="mie-2">Action</Button>
diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss
index 8ae9b98b224..26b9e305d5c 100644
--- a/src/ProductTour/Checkpoint.scss
+++ b/src/ProductTour/Checkpoint.scss
@@ -89,8 +89,8 @@
     border-right:
       solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
       var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1));
-    -webkit-filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1));
+    filter: drop-shadow(0 4px 2px var(--pgn-color-product-tour-checkpoint-box-shadow));
+    -webkit-filter: drop-shadow(0 4px 2px var(--pgn-color-product-tour-checkpoint-box-shadow));
   }
 }
 
@@ -131,7 +131,7 @@
     border-right:
       solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
       var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    filter: drop-shadow(3px 1px 2px rgba(0, 0, 0, .1));
+    filter: drop-shadow(3px 1px 2px var(--pgn-color-product-tour-checkpoint-box-shadow));
   }
 }
 
@@ -153,6 +153,6 @@
     border-right:
       solid var(--pgn-size-product-tour-checkpoint-arrow-top)
       var(--pgn-color-product-tour-checkpoint-arrow-border-top);
-    filter: drop-shadow(-3px 1px 2px rgba(0, 0, 0, .1));
+    filter: drop-shadow(-3px 1px 2px var(--pgn-color-product-tour-checkpoint-box-shadow));
   }
 }
diff --git a/src/SelectableBox/index.scss b/src/SelectableBox/index.scss
index 5fad5a2146f..d2f56b14aa9 100644
--- a/src/SelectableBox/index.scss
+++ b/src/SelectableBox/index.scss
@@ -21,7 +21,7 @@
   box-shadow: var(--pgn-elevation-box-shadow-level-1);
   border-radius: var(--pgn-spacing-selectable-box-border-radius);
   text-align: start;
-  background: var(--pgn-color-white);
+  background: var(--pgn-color-bg-base);
 
   &:focus-visible {
     outline: 1px solid var(--pgn-color-primary-700);
diff --git a/src/Sheet/index.scss b/src/Sheet/index.scss
index 1420578d55f..7758df5d7e8 100644
--- a/src/Sheet/index.scss
+++ b/src/Sheet/index.scss
@@ -34,7 +34,7 @@
 .pgn__sheet-component {
   position: fixed;
   padding: 1.25rem;
-  background-color: var(--pgn-color-white);
+  background-color: var(--pgn-color-bg-base);
   z-index: var(--pgn-elevation-sheet-zindex-main);
 
   &.pgn__sheet__dark {
diff --git a/src/Skeleton/index.scss b/src/Skeleton/index.scss
index 206346342b9..6b06c943b5e 100644
--- a/src/Skeleton/index.scss
+++ b/src/Skeleton/index.scss
@@ -1,3 +1,8 @@
 .react-loading-skeleton {
   z-index: unset;
+  // Map react-loading-skeleton's own custom properties to theme-aware Paragon
+  // grays so the placeholder shimmer adapts to light/dark instead of staying
+  // a fixed light gray (which appears as a bright patch on dark surfaces).
+  --base-color: var(--pgn-color-gray-200) !important;
+  --highlight-color: var(--pgn-color-gray-300) !important;
 }
diff --git a/styles/css/themes/dark/abstraction-variables.css b/styles/css/themes/dark/abstraction-variables.css
new file mode 100644
index 00000000000..3a6f83e9597
--- /dev/null
+++ b/styles/css/themes/dark/abstraction-variables.css
@@ -0,0 +1,304 @@
+:root {
+  /**
+   * ELEVATION
+   */
+  --pgn-elevation-box-shadow-level-1:
+    var(--pgn-elevation-box-shadow-level-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-1-1-blur)
+    var(--pgn-elevation-box-shadow-level-1-1-color),
+    var(--pgn-elevation-box-shadow-level-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-1-2-blur)
+    var(--pgn-elevation-box-shadow-level-1-2-color);
+
+  --pgn-elevation-box-shadow-level-2:
+    var(--pgn-elevation-box-shadow-level-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-2-1-blur)
+    var(--pgn-elevation-box-shadow-level-2-1-color),
+    var(--pgn-elevation-box-shadow-level-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-2-2-blur)
+    var(--pgn-elevation-box-shadow-level-2-2-color);
+
+  --pgn-elevation-box-shadow-level-3:
+    var(--pgn-elevation-box-shadow-level-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-3-1-blur)
+    var(--pgn-elevation-box-shadow-level-3-1-color),
+    var(--pgn-elevation-box-shadow-level-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-3-2-blur)
+    var(--pgn-elevation-box-shadow-level-3-2-color);
+
+  --pgn-elevation-box-shadow-level-4:
+    var(--pgn-elevation-box-shadow-level-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-4-1-blur)
+    var(--pgn-elevation-box-shadow-level-4-1-color),
+    var(--pgn-elevation-box-shadow-level-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-4-2-blur)
+    var(--pgn-elevation-box-shadow-level-4-2-color);
+
+  --pgn-elevation-box-shadow-level-5:
+    var(--pgn-elevation-box-shadow-level-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-5-1-blur)
+    var(--pgn-elevation-box-shadow-level-5-1-color),
+    var(--pgn-elevation-box-shadow-level-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-5-2-blur)
+    var(--pgn-elevation-box-shadow-level-5-2-color);
+
+  --pgn-elevation-box-shadow-down-1:
+    var(--pgn-elevation-box-shadow-down-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-1-1-blur)
+    var(--pgn-elevation-box-shadow-down-1-1-color),
+    var(--pgn-elevation-box-shadow-down-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-1-2-blur)
+    var(--pgn-elevation-box-shadow-down-1-2-color);
+
+  --pgn-elevation-box-shadow-down-2:
+  var(--pgn-elevation-box-shadow-down-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-2-1-blur)
+    var(--pgn-elevation-box-shadow-down-2-1-color),
+    var(--pgn-elevation-box-shadow-down-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-2-2-blur)
+    var(--pgn-elevation-box-shadow-down-2-2-color);
+
+  --pgn-elevation-box-shadow-down-3:
+    var(--pgn-elevation-box-shadow-down-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-3-1-blur)
+    var(--pgn-elevation-box-shadow-down-3-1-color),
+    var(--pgn-elevation-box-shadow-down-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-3-2-blur)
+    var(--pgn-elevation-box-shadow-down-3-2-color);
+
+  --pgn-elevation-box-shadow-down-4:
+    var(--pgn-elevation-box-shadow-down-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-4-1-blur)
+    var(--pgn-elevation-box-shadow-down-4-1-color),
+    var(--pgn-elevation-box-shadow-down-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-4-2-blur)
+    var(--pgn-elevation-box-shadow-down-4-2-color);
+
+  --pgn-elevation-box-shadow-down-5:
+    var(--pgn-elevation-box-shadow-down-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-5-1-blur)
+    var(--pgn-elevation-box-shadow-down-5-1-color),
+    var(--pgn-elevation-box-shadow-down-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-5-2-blur)
+    var(--pgn-elevation-box-shadow-down-5-2-color);
+
+  --pgn-elevation-box-shadow-left-1:
+    var(--pgn-elevation-box-shadow-left-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-1-1-blur)
+    var(--pgn-elevation-box-shadow-left-1-1-color),
+    var(--pgn-elevation-box-shadow-left-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-1-2-blur)
+    var(--pgn-elevation-box-shadow-left-1-2-color);
+
+  --pgn-elevation-box-shadow-left-2:
+    var(--pgn-elevation-box-shadow-left-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-2-1-blur)
+    var(--pgn-elevation-box-shadow-left-2-1-color),
+    var(--pgn-elevation-box-shadow-left-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-2-2-blur)
+    var(--pgn-elevation-box-shadow-left-2-2-color);
+
+  --pgn-elevation-box-shadow-left-3:
+    var(--pgn-elevation-box-shadow-left-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-3-1-blur)
+    var(--pgn-elevation-box-shadow-left-3-1-color),
+    var(--pgn-elevation-box-shadow-left-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-3-2-blur)
+    var(--pgn-elevation-box-shadow-left-3-2-color);
+
+  --pgn-elevation-box-shadow-left-4:
+    var(--pgn-elevation-box-shadow-left-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-4-1-blur)
+    var(--pgn-elevation-box-shadow-left-4-1-color),
+    var(--pgn-elevation-box-shadow-left-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-4-2-blur)
+    var(--pgn-elevation-box-shadow-left-4-2-color);
+
+  --pgn-elevation-box-shadow-left-5:
+    var(--pgn-elevation-box-shadow-left-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-5-1-blur)
+    var(--pgn-elevation-box-shadow-left-5-1-color),
+    var(--pgn-elevation-box-shadow-left-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-5-2-blur)
+    var(--pgn-elevation-box-shadow-left-5-2-color);
+
+  --pgn-elevation-box-shadow-up-1:
+    var(--pgn-elevation-box-shadow-up-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-1-1-blur)
+    var(--pgn-elevation-box-shadow-up-1-1-color),
+    var(--pgn-elevation-box-shadow-up-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-1-2-blur)
+    var(--pgn-elevation-box-shadow-up-1-2-color);
+
+  --pgn-elevation-box-shadow-up-2:
+    var(--pgn-elevation-box-shadow-up-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-2-1-blur)
+    var(--pgn-elevation-box-shadow-up-2-1-color),
+    var(--pgn-elevation-box-shadow-up-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-2-2-blur)
+    var(--pgn-elevation-box-shadow-up-2-2-color);
+
+  --pgn-elevation-box-shadow-up-3:
+    var(--pgn-elevation-box-shadow-up-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-3-1-blur)
+    var(--pgn-elevation-box-shadow-up-3-1-color),
+    var(--pgn-elevation-box-shadow-up-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-3-2-blur)
+    var(--pgn-elevation-box-shadow-up-3-2-color);
+
+  --pgn-elevation-box-shadow-up-4:
+    var(--pgn-elevation-box-shadow-up-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-4-1-blur)
+    var(--pgn-elevation-box-shadow-up-4-1-color),
+    var(--pgn-elevation-box-shadow-up-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-4-2-blur)
+    var(--pgn-elevation-box-shadow-up-4-2-color);
+
+  --pgn-elevation-box-shadow-up-5:
+    var(--pgn-elevation-box-shadow-up-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-5-1-blur)
+    var(--pgn-elevation-box-shadow-up-5-1-color),
+    var(--pgn-elevation-box-shadow-up-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-5-2-blur)
+    var(--pgn-elevation-box-shadow-up-5-2-color);
+
+  --pgn-elevation-box-shadow-right-1:
+    var(--pgn-elevation-box-shadow-right-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-1-1-blur)
+    var(--pgn-elevation-box-shadow-right-1-1-color),
+    var(--pgn-elevation-box-shadow-right-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-1-2-blur)
+    var(--pgn-elevation-box-shadow-right-1-2-color);
+
+  --pgn-elevation-box-shadow-right-2:
+    var(--pgn-elevation-box-shadow-right-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-2-1-blur)
+    var(--pgn-elevation-box-shadow-right-2-1-color),
+    var(--pgn-elevation-box-shadow-right-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-2-2-blur)
+    var(--pgn-elevation-box-shadow-right-2-2-color);
+
+  --pgn-elevation-box-shadow-right-3:
+    var(--pgn-elevation-box-shadow-right-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-3-1-blur)
+    var(--pgn-elevation-box-shadow-right-3-1-color),
+    var(--pgn-elevation-box-shadow-right-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-3-2-blur)
+    var(--pgn-elevation-box-shadow-right-3-2-color);
+
+  --pgn-elevation-box-shadow-right-4:
+    var(--pgn-elevation-box-shadow-right-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-4-1-blur)
+    var(--pgn-elevation-box-shadow-right-4-1-color),
+    var(--pgn-elevation-box-shadow-right-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-4-2-blur)
+    var(--pgn-elevation-box-shadow-right-4-2-color);
+
+  --pgn-elevation-box-shadow-right-5:
+    var(--pgn-elevation-box-shadow-right-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-5-1-blur)
+    var(--pgn-elevation-box-shadow-right-5-1-color),
+    var(--pgn-elevation-box-shadow-right-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-5-2-blur)
+    var(--pgn-elevation-box-shadow-right-5-2-color);
+
+  --pgn-elevation-box-shadow-centered-1:
+    var(--pgn-elevation-box-shadow-centered-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-1-1-blur)
+    var(--pgn-elevation-box-shadow-centered-1-1-color),
+    var(--pgn-elevation-box-shadow-centered-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-1-2-blur)
+    var(--pgn-elevation-box-shadow-centered-1-2-color);
+
+  --pgn-elevation-box-shadow-centered-2:
+    var(--pgn-elevation-box-shadow-centered-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-2-1-blur)
+    var(--pgn-elevation-box-shadow-centered-2-1-color),
+    var(--pgn-elevation-box-shadow-centered-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-2-2-blur)
+    var(--pgn-elevation-box-shadow-centered-2-2-color);
+
+  --pgn-elevation-box-shadow-centered-3:
+    var(--pgn-elevation-box-shadow-centered-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-3-1-blur)
+    var(--pgn-elevation-box-shadow-centered-3-1-color),
+    var(--pgn-elevation-box-shadow-centered-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-3-2-blur)
+    var(--pgn-elevation-box-shadow-centered-3-2-color);
+
+  --pgn-elevation-box-shadow-centered-4:
+    var(--pgn-elevation-box-shadow-centered-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-4-1-blur)
+    var(--pgn-elevation-box-shadow-centered-4-1-color),
+    var(--pgn-elevation-box-shadow-centered-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-4-2-blur)
+    var(--pgn-elevation-box-shadow-centered-4-2-color);
+
+  --pgn-elevation-box-shadow-centered-5:
+    var(--pgn-elevation-box-shadow-centered-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-5-1-blur)
+    var(--pgn-elevation-box-shadow-centered-5-1-color),
+    var(--pgn-elevation-box-shadow-centered-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-5-2-blur)
+    var(--pgn-elevation-box-shadow-centered-5-2-color);
+}
diff --git a/styles/css/themes/dark/index.css b/styles/css/themes/dark/index.css
new file mode 100644
index 00000000000..e997ed9633b
--- /dev/null
+++ b/styles/css/themes/dark/index.css
@@ -0,0 +1,3 @@
+@import "variables.css";
+@import "abstraction-variables.css";
+@import "utility-classes.css";
diff --git a/styles/css/themes/dark/utility-classes.css b/styles/css/themes/dark/utility-classes.css
new file mode 100644
index 00000000000..49ea86492d2
--- /dev/null
+++ b/styles/css/themes/dark/utility-classes.css
@@ -0,0 +1,2453 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * See <PARAGON_ROOT>/tokens/README.md for more details.
+ */
+
+.bg-accent-a {
+  background-color: var(--pgn-color-accent-a) !important;
+}
+
+a.bg-accent-a:hover,
+a.bg-accent-a:focus,
+button.bg-accent-a:hover,
+button.bg-accent-a:focus {
+  background-color: var(--pgn-color-action-default-accent-a) !important;
+}
+
+.text-accent-a {
+  color: var(--pgn-color-accent-a) !important;
+}
+
+a.text-accent-a:hover,
+a.text-accent-a:focus {
+  color: var(--pgn-color-action-default-accent-a) !important;
+}
+
+.border-accent-a {
+  border-color: var(--pgn-color-accent-a) !important;
+}
+
+.bg-accent-b {
+  background-color: var(--pgn-color-accent-b) !important;
+}
+
+a.bg-accent-b:hover,
+a.bg-accent-b:focus,
+button.bg-accent-b:hover,
+button.bg-accent-b:focus {
+  background-color: var(--pgn-color-action-default-accent-b) !important;
+}
+
+.text-accent-b {
+  color: var(--pgn-color-accent-b) !important;
+}
+
+a.text-accent-b:hover,
+a.text-accent-b:focus {
+  color: var(--pgn-color-action-default-accent-b) !important;
+}
+
+.border-accent-b {
+  border-color: var(--pgn-color-accent-b) !important;
+}
+
+.bg-gray-100 {
+  background-color: var(--pgn-color-gray-100) !important;
+}
+
+a.bg-gray-100:hover,
+a.bg-gray-100:focus,
+button.bg-gray-100:hover,
+button.bg-gray-100:focus {
+  background-color: var(--pgn-color-action-default-gray-100) !important;
+}
+
+.text-gray-100 {
+  color: var(--pgn-color-gray-100) !important;
+}
+
+a.text-gray-100:hover,
+a.text-gray-100:focus {
+  color: var(--pgn-color-action-default-gray-100) !important;
+}
+
+.border-gray-100 {
+  border-color: var(--pgn-color-gray-100) !important;
+}
+
+.bg-gray-200 {
+  background-color: var(--pgn-color-gray-200) !important;
+}
+
+a.bg-gray-200:hover,
+a.bg-gray-200:focus,
+button.bg-gray-200:hover,
+button.bg-gray-200:focus {
+  background-color: var(--pgn-color-action-default-gray-200) !important;
+}
+
+.text-gray-200 {
+  color: var(--pgn-color-gray-200) !important;
+}
+
+a.text-gray-200:hover,
+a.text-gray-200:focus {
+  color: var(--pgn-color-action-default-gray-200) !important;
+}
+
+.border-gray-200 {
+  border-color: var(--pgn-color-gray-200) !important;
+}
+
+.bg-gray-300 {
+  background-color: var(--pgn-color-gray-300) !important;
+}
+
+a.bg-gray-300:hover,
+a.bg-gray-300:focus,
+button.bg-gray-300:hover,
+button.bg-gray-300:focus {
+  background-color: var(--pgn-color-action-default-gray-300) !important;
+}
+
+.text-gray-300 {
+  color: var(--pgn-color-gray-300) !important;
+}
+
+a.text-gray-300:hover,
+a.text-gray-300:focus {
+  color: var(--pgn-color-action-default-gray-300) !important;
+}
+
+.border-gray-300 {
+  border-color: var(--pgn-color-gray-300) !important;
+}
+
+.bg-gray-400 {
+  background-color: var(--pgn-color-gray-400) !important;
+}
+
+a.bg-gray-400:hover,
+a.bg-gray-400:focus,
+button.bg-gray-400:hover,
+button.bg-gray-400:focus {
+  background-color: var(--pgn-color-action-default-gray-400) !important;
+}
+
+.text-gray-400 {
+  color: var(--pgn-color-gray-400) !important;
+}
+
+a.text-gray-400:hover,
+a.text-gray-400:focus {
+  color: var(--pgn-color-action-default-gray-400) !important;
+}
+
+.border-gray-400 {
+  border-color: var(--pgn-color-gray-400) !important;
+}
+
+.bg-gray-500 {
+  background-color: var(--pgn-color-gray-500) !important;
+}
+
+a.bg-gray-500:hover,
+a.bg-gray-500:focus,
+button.bg-gray-500:hover,
+button.bg-gray-500:focus {
+  background-color: var(--pgn-color-action-default-gray-500) !important;
+}
+
+.text-gray-500 {
+  color: var(--pgn-color-gray-500) !important;
+}
+
+a.text-gray-500:hover,
+a.text-gray-500:focus {
+  color: var(--pgn-color-action-default-gray-500) !important;
+}
+
+.border-gray-500 {
+  border-color: var(--pgn-color-gray-500) !important;
+}
+
+.bg-gray-600 {
+  background-color: var(--pgn-color-gray-600) !important;
+}
+
+a.bg-gray-600:hover,
+a.bg-gray-600:focus,
+button.bg-gray-600:hover,
+button.bg-gray-600:focus {
+  background-color: var(--pgn-color-action-default-gray-600) !important;
+}
+
+.text-gray-600 {
+  color: var(--pgn-color-gray-600) !important;
+}
+
+a.text-gray-600:hover,
+a.text-gray-600:focus {
+  color: var(--pgn-color-action-default-gray-600) !important;
+}
+
+.border-gray-600 {
+  border-color: var(--pgn-color-gray-600) !important;
+}
+
+.bg-gray-700 {
+  background-color: var(--pgn-color-gray-700) !important;
+}
+
+a.bg-gray-700:hover,
+a.bg-gray-700:focus,
+button.bg-gray-700:hover,
+button.bg-gray-700:focus {
+  background-color: var(--pgn-color-action-default-gray-700) !important;
+}
+
+.text-gray-700 {
+  color: var(--pgn-color-gray-700) !important;
+}
+
+a.text-gray-700:hover,
+a.text-gray-700:focus {
+  color: var(--pgn-color-action-default-gray-700) !important;
+}
+
+.border-gray-700 {
+  border-color: var(--pgn-color-gray-700) !important;
+}
+
+.bg-gray-800 {
+  background-color: var(--pgn-color-gray-800) !important;
+}
+
+a.bg-gray-800:hover,
+a.bg-gray-800:focus,
+button.bg-gray-800:hover,
+button.bg-gray-800:focus {
+  background-color: var(--pgn-color-action-default-gray-800) !important;
+}
+
+.text-gray-800 {
+  color: var(--pgn-color-gray-800) !important;
+}
+
+a.text-gray-800:hover,
+a.text-gray-800:focus {
+  color: var(--pgn-color-action-default-gray-800) !important;
+}
+
+.border-gray-800 {
+  border-color: var(--pgn-color-gray-800) !important;
+}
+
+.bg-gray-900 {
+  background-color: var(--pgn-color-gray-900) !important;
+}
+
+a.bg-gray-900:hover,
+a.bg-gray-900:focus,
+button.bg-gray-900:hover,
+button.bg-gray-900:focus {
+  background-color: var(--pgn-color-action-default-gray-900) !important;
+}
+
+.text-gray-900 {
+  color: var(--pgn-color-gray-900) !important;
+}
+
+a.text-gray-900:hover,
+a.text-gray-900:focus {
+  color: var(--pgn-color-action-default-gray-900) !important;
+}
+
+.border-gray-900 {
+  border-color: var(--pgn-color-gray-900) !important;
+}
+
+.bg-gray {
+  background-color: var(--pgn-color-gray-base) !important;
+}
+
+a.bg-gray:hover,
+a.bg-gray:focus,
+button.bg-gray:hover,
+button.bg-gray:focus {
+  background-color: var(--pgn-color-action-default-gray-base) !important;
+}
+
+.text-gray {
+  color: var(--pgn-color-gray-base) !important;
+}
+
+a.text-gray:hover,
+a.text-gray:focus {
+  color: var(--pgn-color-action-default-gray-base) !important;
+}
+
+.border-gray {
+  border-color: var(--pgn-color-gray-base) !important;
+}
+
+.bg-primary-100 {
+  background-color: var(--pgn-color-primary-100) !important;
+}
+
+a.bg-primary-100:hover,
+a.bg-primary-100:focus,
+button.bg-primary-100:hover,
+button.bg-primary-100:focus {
+  background-color: var(--pgn-color-action-default-primary-100) !important;
+}
+
+.text-primary-100 {
+  color: var(--pgn-color-primary-100) !important;
+}
+
+a.text-primary-100:hover,
+a.text-primary-100:focus {
+  color: var(--pgn-color-action-default-primary-100) !important;
+}
+
+.border-primary-100 {
+  border-color: var(--pgn-color-primary-100) !important;
+}
+
+.bg-primary-200 {
+  background-color: var(--pgn-color-primary-200) !important;
+}
+
+a.bg-primary-200:hover,
+a.bg-primary-200:focus,
+button.bg-primary-200:hover,
+button.bg-primary-200:focus {
+  background-color: var(--pgn-color-action-default-primary-200) !important;
+}
+
+.text-primary-200 {
+  color: var(--pgn-color-primary-200) !important;
+}
+
+a.text-primary-200:hover,
+a.text-primary-200:focus {
+  color: var(--pgn-color-action-default-primary-200) !important;
+}
+
+.border-primary-200 {
+  border-color: var(--pgn-color-primary-200) !important;
+}
+
+.bg-primary-300 {
+  background-color: var(--pgn-color-primary-300) !important;
+}
+
+a.bg-primary-300:hover,
+a.bg-primary-300:focus,
+button.bg-primary-300:hover,
+button.bg-primary-300:focus {
+  background-color: var(--pgn-color-action-default-primary-300) !important;
+}
+
+.text-primary-300 {
+  color: var(--pgn-color-primary-300) !important;
+}
+
+a.text-primary-300:hover,
+a.text-primary-300:focus {
+  color: var(--pgn-color-action-default-primary-300) !important;
+}
+
+.border-primary-300 {
+  border-color: var(--pgn-color-primary-300) !important;
+}
+
+.bg-primary-400 {
+  background-color: var(--pgn-color-primary-400) !important;
+}
+
+a.bg-primary-400:hover,
+a.bg-primary-400:focus,
+button.bg-primary-400:hover,
+button.bg-primary-400:focus {
+  background-color: var(--pgn-color-action-default-primary-400) !important;
+}
+
+.text-primary-400 {
+  color: var(--pgn-color-primary-400) !important;
+}
+
+a.text-primary-400:hover,
+a.text-primary-400:focus {
+  color: var(--pgn-color-action-default-primary-400) !important;
+}
+
+.border-primary-400 {
+  border-color: var(--pgn-color-primary-400) !important;
+}
+
+.bg-primary-500 {
+  background-color: var(--pgn-color-primary-500) !important;
+}
+
+a.bg-primary-500:hover,
+a.bg-primary-500:focus,
+button.bg-primary-500:hover,
+button.bg-primary-500:focus {
+  background-color: var(--pgn-color-action-default-primary-500) !important;
+}
+
+.text-primary-500 {
+  color: var(--pgn-color-primary-500) !important;
+}
+
+a.text-primary-500:hover,
+a.text-primary-500:focus {
+  color: var(--pgn-color-action-default-primary-500) !important;
+}
+
+.border-primary-500 {
+  border-color: var(--pgn-color-primary-500) !important;
+}
+
+.bg-primary-600 {
+  background-color: var(--pgn-color-primary-600) !important;
+}
+
+a.bg-primary-600:hover,
+a.bg-primary-600:focus,
+button.bg-primary-600:hover,
+button.bg-primary-600:focus {
+  background-color: var(--pgn-color-action-default-primary-600) !important;
+}
+
+.text-primary-600 {
+  color: var(--pgn-color-primary-600) !important;
+}
+
+a.text-primary-600:hover,
+a.text-primary-600:focus {
+  color: var(--pgn-color-action-default-primary-600) !important;
+}
+
+.border-primary-600 {
+  border-color: var(--pgn-color-primary-600) !important;
+}
+
+.bg-primary-700 {
+  background-color: var(--pgn-color-primary-700) !important;
+}
+
+a.bg-primary-700:hover,
+a.bg-primary-700:focus,
+button.bg-primary-700:hover,
+button.bg-primary-700:focus {
+  background-color: var(--pgn-color-action-default-primary-700) !important;
+}
+
+.text-primary-700 {
+  color: var(--pgn-color-primary-700) !important;
+}
+
+a.text-primary-700:hover,
+a.text-primary-700:focus {
+  color: var(--pgn-color-action-default-primary-700) !important;
+}
+
+.border-primary-700 {
+  border-color: var(--pgn-color-primary-700) !important;
+}
+
+.bg-primary-800 {
+  background-color: var(--pgn-color-primary-800) !important;
+}
+
+a.bg-primary-800:hover,
+a.bg-primary-800:focus,
+button.bg-primary-800:hover,
+button.bg-primary-800:focus {
+  background-color: var(--pgn-color-action-default-primary-800) !important;
+}
+
+.text-primary-800 {
+  color: var(--pgn-color-primary-800) !important;
+}
+
+a.text-primary-800:hover,
+a.text-primary-800:focus {
+  color: var(--pgn-color-action-default-primary-800) !important;
+}
+
+.border-primary-800 {
+  border-color: var(--pgn-color-primary-800) !important;
+}
+
+.bg-primary-900 {
+  background-color: var(--pgn-color-primary-900) !important;
+}
+
+a.bg-primary-900:hover,
+a.bg-primary-900:focus,
+button.bg-primary-900:hover,
+button.bg-primary-900:focus {
+  background-color: var(--pgn-color-action-default-primary-900) !important;
+}
+
+.text-primary-900 {
+  color: var(--pgn-color-primary-900) !important;
+}
+
+a.text-primary-900:hover,
+a.text-primary-900:focus {
+  color: var(--pgn-color-action-default-primary-900) !important;
+}
+
+.border-primary-900 {
+  border-color: var(--pgn-color-primary-900) !important;
+}
+
+.bg-primary {
+  background-color: var(--pgn-color-primary-base) !important;
+}
+
+a.bg-primary:hover,
+a.bg-primary:focus,
+button.bg-primary:hover,
+button.bg-primary:focus {
+  background-color: var(--pgn-color-action-default-primary-base) !important;
+}
+
+.text-primary {
+  color: var(--pgn-color-primary-base) !important;
+}
+
+a.text-primary:hover,
+a.text-primary:focus {
+  color: var(--pgn-color-action-default-primary-base) !important;
+}
+
+.border-primary {
+  border-color: var(--pgn-color-primary-base) !important;
+}
+
+.bg-secondary-100 {
+  background-color: var(--pgn-color-secondary-100) !important;
+}
+
+a.bg-secondary-100:hover,
+a.bg-secondary-100:focus,
+button.bg-secondary-100:hover,
+button.bg-secondary-100:focus {
+  background-color: var(--pgn-color-action-default-secondary-100) !important;
+}
+
+.text-secondary-100 {
+  color: var(--pgn-color-secondary-100) !important;
+}
+
+a.text-secondary-100:hover,
+a.text-secondary-100:focus {
+  color: var(--pgn-color-action-default-secondary-100) !important;
+}
+
+.border-secondary-100 {
+  border-color: var(--pgn-color-secondary-100) !important;
+}
+
+.bg-secondary-200 {
+  background-color: var(--pgn-color-secondary-200) !important;
+}
+
+a.bg-secondary-200:hover,
+a.bg-secondary-200:focus,
+button.bg-secondary-200:hover,
+button.bg-secondary-200:focus {
+  background-color: var(--pgn-color-action-default-secondary-200) !important;
+}
+
+.text-secondary-200 {
+  color: var(--pgn-color-secondary-200) !important;
+}
+
+a.text-secondary-200:hover,
+a.text-secondary-200:focus {
+  color: var(--pgn-color-action-default-secondary-200) !important;
+}
+
+.border-secondary-200 {
+  border-color: var(--pgn-color-secondary-200) !important;
+}
+
+.bg-secondary-300 {
+  background-color: var(--pgn-color-secondary-300) !important;
+}
+
+a.bg-secondary-300:hover,
+a.bg-secondary-300:focus,
+button.bg-secondary-300:hover,
+button.bg-secondary-300:focus {
+  background-color: var(--pgn-color-action-default-secondary-300) !important;
+}
+
+.text-secondary-300 {
+  color: var(--pgn-color-secondary-300) !important;
+}
+
+a.text-secondary-300:hover,
+a.text-secondary-300:focus {
+  color: var(--pgn-color-action-default-secondary-300) !important;
+}
+
+.border-secondary-300 {
+  border-color: var(--pgn-color-secondary-300) !important;
+}
+
+.bg-secondary-400 {
+  background-color: var(--pgn-color-secondary-400) !important;
+}
+
+a.bg-secondary-400:hover,
+a.bg-secondary-400:focus,
+button.bg-secondary-400:hover,
+button.bg-secondary-400:focus {
+  background-color: var(--pgn-color-action-default-secondary-400) !important;
+}
+
+.text-secondary-400 {
+  color: var(--pgn-color-secondary-400) !important;
+}
+
+a.text-secondary-400:hover,
+a.text-secondary-400:focus {
+  color: var(--pgn-color-action-default-secondary-400) !important;
+}
+
+.border-secondary-400 {
+  border-color: var(--pgn-color-secondary-400) !important;
+}
+
+.bg-secondary-500 {
+  background-color: var(--pgn-color-secondary-500) !important;
+}
+
+a.bg-secondary-500:hover,
+a.bg-secondary-500:focus,
+button.bg-secondary-500:hover,
+button.bg-secondary-500:focus {
+  background-color: var(--pgn-color-action-default-secondary-500) !important;
+}
+
+.text-secondary-500 {
+  color: var(--pgn-color-secondary-500) !important;
+}
+
+a.text-secondary-500:hover,
+a.text-secondary-500:focus {
+  color: var(--pgn-color-action-default-secondary-500) !important;
+}
+
+.border-secondary-500 {
+  border-color: var(--pgn-color-secondary-500) !important;
+}
+
+.bg-secondary-600 {
+  background-color: var(--pgn-color-secondary-600) !important;
+}
+
+a.bg-secondary-600:hover,
+a.bg-secondary-600:focus,
+button.bg-secondary-600:hover,
+button.bg-secondary-600:focus {
+  background-color: var(--pgn-color-action-default-secondary-600) !important;
+}
+
+.text-secondary-600 {
+  color: var(--pgn-color-secondary-600) !important;
+}
+
+a.text-secondary-600:hover,
+a.text-secondary-600:focus {
+  color: var(--pgn-color-action-default-secondary-600) !important;
+}
+
+.border-secondary-600 {
+  border-color: var(--pgn-color-secondary-600) !important;
+}
+
+.bg-secondary-700 {
+  background-color: var(--pgn-color-secondary-700) !important;
+}
+
+a.bg-secondary-700:hover,
+a.bg-secondary-700:focus,
+button.bg-secondary-700:hover,
+button.bg-secondary-700:focus {
+  background-color: var(--pgn-color-action-default-secondary-700) !important;
+}
+
+.text-secondary-700 {
+  color: var(--pgn-color-secondary-700) !important;
+}
+
+a.text-secondary-700:hover,
+a.text-secondary-700:focus {
+  color: var(--pgn-color-action-default-secondary-700) !important;
+}
+
+.border-secondary-700 {
+  border-color: var(--pgn-color-secondary-700) !important;
+}
+
+.bg-secondary-800 {
+  background-color: var(--pgn-color-secondary-800) !important;
+}
+
+a.bg-secondary-800:hover,
+a.bg-secondary-800:focus,
+button.bg-secondary-800:hover,
+button.bg-secondary-800:focus {
+  background-color: var(--pgn-color-action-default-secondary-800) !important;
+}
+
+.text-secondary-800 {
+  color: var(--pgn-color-secondary-800) !important;
+}
+
+a.text-secondary-800:hover,
+a.text-secondary-800:focus {
+  color: var(--pgn-color-action-default-secondary-800) !important;
+}
+
+.border-secondary-800 {
+  border-color: var(--pgn-color-secondary-800) !important;
+}
+
+.bg-secondary-900 {
+  background-color: var(--pgn-color-secondary-900) !important;
+}
+
+a.bg-secondary-900:hover,
+a.bg-secondary-900:focus,
+button.bg-secondary-900:hover,
+button.bg-secondary-900:focus {
+  background-color: var(--pgn-color-action-default-secondary-900) !important;
+}
+
+.text-secondary-900 {
+  color: var(--pgn-color-secondary-900) !important;
+}
+
+a.text-secondary-900:hover,
+a.text-secondary-900:focus {
+  color: var(--pgn-color-action-default-secondary-900) !important;
+}
+
+.border-secondary-900 {
+  border-color: var(--pgn-color-secondary-900) !important;
+}
+
+.bg-secondary {
+  background-color: var(--pgn-color-secondary-base) !important;
+}
+
+a.bg-secondary:hover,
+a.bg-secondary:focus,
+button.bg-secondary:hover,
+button.bg-secondary:focus {
+  background-color: var(--pgn-color-action-default-secondary-base) !important;
+}
+
+.text-secondary {
+  color: var(--pgn-color-secondary-base) !important;
+}
+
+a.text-secondary:hover,
+a.text-secondary:focus {
+  color: var(--pgn-color-action-default-secondary-base) !important;
+}
+
+.border-secondary {
+  border-color: var(--pgn-color-secondary-base) !important;
+}
+
+.bg-brand-100 {
+  background-color: var(--pgn-color-brand-100) !important;
+}
+
+a.bg-brand-100:hover,
+a.bg-brand-100:focus,
+button.bg-brand-100:hover,
+button.bg-brand-100:focus {
+  background-color: var(--pgn-color-action-default-brand-100) !important;
+}
+
+.text-brand-100 {
+  color: var(--pgn-color-brand-100) !important;
+}
+
+a.text-brand-100:hover,
+a.text-brand-100:focus {
+  color: var(--pgn-color-action-default-brand-100) !important;
+}
+
+.border-brand-100 {
+  border-color: var(--pgn-color-brand-100) !important;
+}
+
+.bg-brand-200 {
+  background-color: var(--pgn-color-brand-200) !important;
+}
+
+a.bg-brand-200:hover,
+a.bg-brand-200:focus,
+button.bg-brand-200:hover,
+button.bg-brand-200:focus {
+  background-color: var(--pgn-color-action-default-brand-200) !important;
+}
+
+.text-brand-200 {
+  color: var(--pgn-color-brand-200) !important;
+}
+
+a.text-brand-200:hover,
+a.text-brand-200:focus {
+  color: var(--pgn-color-action-default-brand-200) !important;
+}
+
+.border-brand-200 {
+  border-color: var(--pgn-color-brand-200) !important;
+}
+
+.bg-brand-300 {
+  background-color: var(--pgn-color-brand-300) !important;
+}
+
+a.bg-brand-300:hover,
+a.bg-brand-300:focus,
+button.bg-brand-300:hover,
+button.bg-brand-300:focus {
+  background-color: var(--pgn-color-action-default-brand-300) !important;
+}
+
+.text-brand-300 {
+  color: var(--pgn-color-brand-300) !important;
+}
+
+a.text-brand-300:hover,
+a.text-brand-300:focus {
+  color: var(--pgn-color-action-default-brand-300) !important;
+}
+
+.border-brand-300 {
+  border-color: var(--pgn-color-brand-300) !important;
+}
+
+.bg-brand-400 {
+  background-color: var(--pgn-color-brand-400) !important;
+}
+
+a.bg-brand-400:hover,
+a.bg-brand-400:focus,
+button.bg-brand-400:hover,
+button.bg-brand-400:focus {
+  background-color: var(--pgn-color-action-default-brand-400) !important;
+}
+
+.text-brand-400 {
+  color: var(--pgn-color-brand-400) !important;
+}
+
+a.text-brand-400:hover,
+a.text-brand-400:focus {
+  color: var(--pgn-color-action-default-brand-400) !important;
+}
+
+.border-brand-400 {
+  border-color: var(--pgn-color-brand-400) !important;
+}
+
+.bg-brand-500 {
+  background-color: var(--pgn-color-brand-500) !important;
+}
+
+a.bg-brand-500:hover,
+a.bg-brand-500:focus,
+button.bg-brand-500:hover,
+button.bg-brand-500:focus {
+  background-color: var(--pgn-color-action-default-brand-500) !important;
+}
+
+.text-brand-500 {
+  color: var(--pgn-color-brand-500) !important;
+}
+
+a.text-brand-500:hover,
+a.text-brand-500:focus {
+  color: var(--pgn-color-action-default-brand-500) !important;
+}
+
+.border-brand-500 {
+  border-color: var(--pgn-color-brand-500) !important;
+}
+
+.bg-brand-600 {
+  background-color: var(--pgn-color-brand-600) !important;
+}
+
+a.bg-brand-600:hover,
+a.bg-brand-600:focus,
+button.bg-brand-600:hover,
+button.bg-brand-600:focus {
+  background-color: var(--pgn-color-action-default-brand-600) !important;
+}
+
+.text-brand-600 {
+  color: var(--pgn-color-brand-600) !important;
+}
+
+a.text-brand-600:hover,
+a.text-brand-600:focus {
+  color: var(--pgn-color-action-default-brand-600) !important;
+}
+
+.border-brand-600 {
+  border-color: var(--pgn-color-brand-600) !important;
+}
+
+.bg-brand-700 {
+  background-color: var(--pgn-color-brand-700) !important;
+}
+
+a.bg-brand-700:hover,
+a.bg-brand-700:focus,
+button.bg-brand-700:hover,
+button.bg-brand-700:focus {
+  background-color: var(--pgn-color-action-default-brand-700) !important;
+}
+
+.text-brand-700 {
+  color: var(--pgn-color-brand-700) !important;
+}
+
+a.text-brand-700:hover,
+a.text-brand-700:focus {
+  color: var(--pgn-color-action-default-brand-700) !important;
+}
+
+.border-brand-700 {
+  border-color: var(--pgn-color-brand-700) !important;
+}
+
+.bg-brand-800 {
+  background-color: var(--pgn-color-brand-800) !important;
+}
+
+a.bg-brand-800:hover,
+a.bg-brand-800:focus,
+button.bg-brand-800:hover,
+button.bg-brand-800:focus {
+  background-color: var(--pgn-color-action-default-brand-800) !important;
+}
+
+.text-brand-800 {
+  color: var(--pgn-color-brand-800) !important;
+}
+
+a.text-brand-800:hover,
+a.text-brand-800:focus {
+  color: var(--pgn-color-action-default-brand-800) !important;
+}
+
+.border-brand-800 {
+  border-color: var(--pgn-color-brand-800) !important;
+}
+
+.bg-brand-900 {
+  background-color: var(--pgn-color-brand-900) !important;
+}
+
+a.bg-brand-900:hover,
+a.bg-brand-900:focus,
+button.bg-brand-900:hover,
+button.bg-brand-900:focus {
+  background-color: var(--pgn-color-action-default-brand-900) !important;
+}
+
+.text-brand-900 {
+  color: var(--pgn-color-brand-900) !important;
+}
+
+a.text-brand-900:hover,
+a.text-brand-900:focus {
+  color: var(--pgn-color-action-default-brand-900) !important;
+}
+
+.border-brand-900 {
+  border-color: var(--pgn-color-brand-900) !important;
+}
+
+.bg-brand {
+  background-color: var(--pgn-color-brand-base) !important;
+}
+
+a.bg-brand:hover,
+a.bg-brand:focus,
+button.bg-brand:hover,
+button.bg-brand:focus {
+  background-color: var(--pgn-color-action-default-brand-base) !important;
+}
+
+.text-brand {
+  color: var(--pgn-color-brand-base) !important;
+}
+
+a.text-brand:hover,
+a.text-brand:focus {
+  color: var(--pgn-color-action-default-brand-base) !important;
+}
+
+.border-brand {
+  border-color: var(--pgn-color-brand-base) !important;
+}
+
+.bg-success-100 {
+  background-color: var(--pgn-color-success-100) !important;
+}
+
+a.bg-success-100:hover,
+a.bg-success-100:focus,
+button.bg-success-100:hover,
+button.bg-success-100:focus {
+  background-color: var(--pgn-color-action-default-success-100) !important;
+}
+
+.text-success-100 {
+  color: var(--pgn-color-success-100) !important;
+}
+
+a.text-success-100:hover,
+a.text-success-100:focus {
+  color: var(--pgn-color-action-default-success-100) !important;
+}
+
+.border-success-100 {
+  border-color: var(--pgn-color-success-100) !important;
+}
+
+.bg-success-200 {
+  background-color: var(--pgn-color-success-200) !important;
+}
+
+a.bg-success-200:hover,
+a.bg-success-200:focus,
+button.bg-success-200:hover,
+button.bg-success-200:focus {
+  background-color: var(--pgn-color-action-default-success-200) !important;
+}
+
+.text-success-200 {
+  color: var(--pgn-color-success-200) !important;
+}
+
+a.text-success-200:hover,
+a.text-success-200:focus {
+  color: var(--pgn-color-action-default-success-200) !important;
+}
+
+.border-success-200 {
+  border-color: var(--pgn-color-success-200) !important;
+}
+
+.bg-success-300 {
+  background-color: var(--pgn-color-success-300) !important;
+}
+
+a.bg-success-300:hover,
+a.bg-success-300:focus,
+button.bg-success-300:hover,
+button.bg-success-300:focus {
+  background-color: var(--pgn-color-action-default-success-300) !important;
+}
+
+.text-success-300 {
+  color: var(--pgn-color-success-300) !important;
+}
+
+a.text-success-300:hover,
+a.text-success-300:focus {
+  color: var(--pgn-color-action-default-success-300) !important;
+}
+
+.border-success-300 {
+  border-color: var(--pgn-color-success-300) !important;
+}
+
+.bg-success-400 {
+  background-color: var(--pgn-color-success-400) !important;
+}
+
+a.bg-success-400:hover,
+a.bg-success-400:focus,
+button.bg-success-400:hover,
+button.bg-success-400:focus {
+  background-color: var(--pgn-color-action-default-success-400) !important;
+}
+
+.text-success-400 {
+  color: var(--pgn-color-success-400) !important;
+}
+
+a.text-success-400:hover,
+a.text-success-400:focus {
+  color: var(--pgn-color-action-default-success-400) !important;
+}
+
+.border-success-400 {
+  border-color: var(--pgn-color-success-400) !important;
+}
+
+.bg-success-500 {
+  background-color: var(--pgn-color-success-500) !important;
+}
+
+a.bg-success-500:hover,
+a.bg-success-500:focus,
+button.bg-success-500:hover,
+button.bg-success-500:focus {
+  background-color: var(--pgn-color-action-default-success-500) !important;
+}
+
+.text-success-500 {
+  color: var(--pgn-color-success-500) !important;
+}
+
+a.text-success-500:hover,
+a.text-success-500:focus {
+  color: var(--pgn-color-action-default-success-500) !important;
+}
+
+.border-success-500 {
+  border-color: var(--pgn-color-success-500) !important;
+}
+
+.bg-success-600 {
+  background-color: var(--pgn-color-success-600) !important;
+}
+
+a.bg-success-600:hover,
+a.bg-success-600:focus,
+button.bg-success-600:hover,
+button.bg-success-600:focus {
+  background-color: var(--pgn-color-action-default-success-600) !important;
+}
+
+.text-success-600 {
+  color: var(--pgn-color-success-600) !important;
+}
+
+a.text-success-600:hover,
+a.text-success-600:focus {
+  color: var(--pgn-color-action-default-success-600) !important;
+}
+
+.border-success-600 {
+  border-color: var(--pgn-color-success-600) !important;
+}
+
+.bg-success-700 {
+  background-color: var(--pgn-color-success-700) !important;
+}
+
+a.bg-success-700:hover,
+a.bg-success-700:focus,
+button.bg-success-700:hover,
+button.bg-success-700:focus {
+  background-color: var(--pgn-color-action-default-success-700) !important;
+}
+
+.text-success-700 {
+  color: var(--pgn-color-success-700) !important;
+}
+
+a.text-success-700:hover,
+a.text-success-700:focus {
+  color: var(--pgn-color-action-default-success-700) !important;
+}
+
+.border-success-700 {
+  border-color: var(--pgn-color-success-700) !important;
+}
+
+.bg-success-800 {
+  background-color: var(--pgn-color-success-800) !important;
+}
+
+a.bg-success-800:hover,
+a.bg-success-800:focus,
+button.bg-success-800:hover,
+button.bg-success-800:focus {
+  background-color: var(--pgn-color-action-default-success-800) !important;
+}
+
+.text-success-800 {
+  color: var(--pgn-color-success-800) !important;
+}
+
+a.text-success-800:hover,
+a.text-success-800:focus {
+  color: var(--pgn-color-action-default-success-800) !important;
+}
+
+.border-success-800 {
+  border-color: var(--pgn-color-success-800) !important;
+}
+
+.bg-success-900 {
+  background-color: var(--pgn-color-success-900) !important;
+}
+
+a.bg-success-900:hover,
+a.bg-success-900:focus,
+button.bg-success-900:hover,
+button.bg-success-900:focus {
+  background-color: var(--pgn-color-action-default-success-900) !important;
+}
+
+.text-success-900 {
+  color: var(--pgn-color-success-900) !important;
+}
+
+a.text-success-900:hover,
+a.text-success-900:focus {
+  color: var(--pgn-color-action-default-success-900) !important;
+}
+
+.border-success-900 {
+  border-color: var(--pgn-color-success-900) !important;
+}
+
+.bg-success {
+  background-color: var(--pgn-color-success-base) !important;
+}
+
+a.bg-success:hover,
+a.bg-success:focus,
+button.bg-success:hover,
+button.bg-success:focus {
+  background-color: var(--pgn-color-action-default-success-base) !important;
+}
+
+.text-success {
+  color: var(--pgn-color-success-base) !important;
+}
+
+a.text-success:hover,
+a.text-success:focus {
+  color: var(--pgn-color-action-default-success-base) !important;
+}
+
+.border-success {
+  border-color: var(--pgn-color-success-base) !important;
+}
+
+.bg-info-100 {
+  background-color: var(--pgn-color-info-100) !important;
+}
+
+a.bg-info-100:hover,
+a.bg-info-100:focus,
+button.bg-info-100:hover,
+button.bg-info-100:focus {
+  background-color: var(--pgn-color-action-default-info-100) !important;
+}
+
+.text-info-100 {
+  color: var(--pgn-color-info-100) !important;
+}
+
+a.text-info-100:hover,
+a.text-info-100:focus {
+  color: var(--pgn-color-action-default-info-100) !important;
+}
+
+.border-info-100 {
+  border-color: var(--pgn-color-info-100) !important;
+}
+
+.bg-info-200 {
+  background-color: var(--pgn-color-info-200) !important;
+}
+
+a.bg-info-200:hover,
+a.bg-info-200:focus,
+button.bg-info-200:hover,
+button.bg-info-200:focus {
+  background-color: var(--pgn-color-action-default-info-200) !important;
+}
+
+.text-info-200 {
+  color: var(--pgn-color-info-200) !important;
+}
+
+a.text-info-200:hover,
+a.text-info-200:focus {
+  color: var(--pgn-color-action-default-info-200) !important;
+}
+
+.border-info-200 {
+  border-color: var(--pgn-color-info-200) !important;
+}
+
+.bg-info-300 {
+  background-color: var(--pgn-color-info-300) !important;
+}
+
+a.bg-info-300:hover,
+a.bg-info-300:focus,
+button.bg-info-300:hover,
+button.bg-info-300:focus {
+  background-color: var(--pgn-color-action-default-info-300) !important;
+}
+
+.text-info-300 {
+  color: var(--pgn-color-info-300) !important;
+}
+
+a.text-info-300:hover,
+a.text-info-300:focus {
+  color: var(--pgn-color-action-default-info-300) !important;
+}
+
+.border-info-300 {
+  border-color: var(--pgn-color-info-300) !important;
+}
+
+.bg-info-400 {
+  background-color: var(--pgn-color-info-400) !important;
+}
+
+a.bg-info-400:hover,
+a.bg-info-400:focus,
+button.bg-info-400:hover,
+button.bg-info-400:focus {
+  background-color: var(--pgn-color-action-default-info-400) !important;
+}
+
+.text-info-400 {
+  color: var(--pgn-color-info-400) !important;
+}
+
+a.text-info-400:hover,
+a.text-info-400:focus {
+  color: var(--pgn-color-action-default-info-400) !important;
+}
+
+.border-info-400 {
+  border-color: var(--pgn-color-info-400) !important;
+}
+
+.bg-info-500 {
+  background-color: var(--pgn-color-info-500) !important;
+}
+
+a.bg-info-500:hover,
+a.bg-info-500:focus,
+button.bg-info-500:hover,
+button.bg-info-500:focus {
+  background-color: var(--pgn-color-action-default-info-500) !important;
+}
+
+.text-info-500 {
+  color: var(--pgn-color-info-500) !important;
+}
+
+a.text-info-500:hover,
+a.text-info-500:focus {
+  color: var(--pgn-color-action-default-info-500) !important;
+}
+
+.border-info-500 {
+  border-color: var(--pgn-color-info-500) !important;
+}
+
+.bg-info-600 {
+  background-color: var(--pgn-color-info-600) !important;
+}
+
+a.bg-info-600:hover,
+a.bg-info-600:focus,
+button.bg-info-600:hover,
+button.bg-info-600:focus {
+  background-color: var(--pgn-color-action-default-info-600) !important;
+}
+
+.text-info-600 {
+  color: var(--pgn-color-info-600) !important;
+}
+
+a.text-info-600:hover,
+a.text-info-600:focus {
+  color: var(--pgn-color-action-default-info-600) !important;
+}
+
+.border-info-600 {
+  border-color: var(--pgn-color-info-600) !important;
+}
+
+.bg-info-700 {
+  background-color: var(--pgn-color-info-700) !important;
+}
+
+a.bg-info-700:hover,
+a.bg-info-700:focus,
+button.bg-info-700:hover,
+button.bg-info-700:focus {
+  background-color: var(--pgn-color-action-default-info-700) !important;
+}
+
+.text-info-700 {
+  color: var(--pgn-color-info-700) !important;
+}
+
+a.text-info-700:hover,
+a.text-info-700:focus {
+  color: var(--pgn-color-action-default-info-700) !important;
+}
+
+.border-info-700 {
+  border-color: var(--pgn-color-info-700) !important;
+}
+
+.bg-info-800 {
+  background-color: var(--pgn-color-info-800) !important;
+}
+
+a.bg-info-800:hover,
+a.bg-info-800:focus,
+button.bg-info-800:hover,
+button.bg-info-800:focus {
+  background-color: var(--pgn-color-action-default-info-800) !important;
+}
+
+.text-info-800 {
+  color: var(--pgn-color-info-800) !important;
+}
+
+a.text-info-800:hover,
+a.text-info-800:focus {
+  color: var(--pgn-color-action-default-info-800) !important;
+}
+
+.border-info-800 {
+  border-color: var(--pgn-color-info-800) !important;
+}
+
+.bg-info-900 {
+  background-color: var(--pgn-color-info-900) !important;
+}
+
+a.bg-info-900:hover,
+a.bg-info-900:focus,
+button.bg-info-900:hover,
+button.bg-info-900:focus {
+  background-color: var(--pgn-color-action-default-info-900) !important;
+}
+
+.text-info-900 {
+  color: var(--pgn-color-info-900) !important;
+}
+
+a.text-info-900:hover,
+a.text-info-900:focus {
+  color: var(--pgn-color-action-default-info-900) !important;
+}
+
+.border-info-900 {
+  border-color: var(--pgn-color-info-900) !important;
+}
+
+.bg-info {
+  background-color: var(--pgn-color-info-base) !important;
+}
+
+a.bg-info:hover,
+a.bg-info:focus,
+button.bg-info:hover,
+button.bg-info:focus {
+  background-color: var(--pgn-color-action-default-info-base) !important;
+}
+
+.text-info {
+  color: var(--pgn-color-info-base) !important;
+}
+
+a.text-info:hover,
+a.text-info:focus {
+  color: var(--pgn-color-action-default-info-base) !important;
+}
+
+.border-info {
+  border-color: var(--pgn-color-info-base) !important;
+}
+
+.bg-warning-100 {
+  background-color: var(--pgn-color-warning-100) !important;
+}
+
+a.bg-warning-100:hover,
+a.bg-warning-100:focus,
+button.bg-warning-100:hover,
+button.bg-warning-100:focus {
+  background-color: var(--pgn-color-action-default-warning-100) !important;
+}
+
+.text-warning-100 {
+  color: var(--pgn-color-warning-100) !important;
+}
+
+a.text-warning-100:hover,
+a.text-warning-100:focus {
+  color: var(--pgn-color-action-default-warning-100) !important;
+}
+
+.border-warning-100 {
+  border-color: var(--pgn-color-warning-100) !important;
+}
+
+.bg-warning-200 {
+  background-color: var(--pgn-color-warning-200) !important;
+}
+
+a.bg-warning-200:hover,
+a.bg-warning-200:focus,
+button.bg-warning-200:hover,
+button.bg-warning-200:focus {
+  background-color: var(--pgn-color-action-default-warning-200) !important;
+}
+
+.text-warning-200 {
+  color: var(--pgn-color-warning-200) !important;
+}
+
+a.text-warning-200:hover,
+a.text-warning-200:focus {
+  color: var(--pgn-color-action-default-warning-200) !important;
+}
+
+.border-warning-200 {
+  border-color: var(--pgn-color-warning-200) !important;
+}
+
+.bg-warning-300 {
+  background-color: var(--pgn-color-warning-300) !important;
+}
+
+a.bg-warning-300:hover,
+a.bg-warning-300:focus,
+button.bg-warning-300:hover,
+button.bg-warning-300:focus {
+  background-color: var(--pgn-color-action-default-warning-300) !important;
+}
+
+.text-warning-300 {
+  color: var(--pgn-color-warning-300) !important;
+}
+
+a.text-warning-300:hover,
+a.text-warning-300:focus {
+  color: var(--pgn-color-action-default-warning-300) !important;
+}
+
+.border-warning-300 {
+  border-color: var(--pgn-color-warning-300) !important;
+}
+
+.bg-warning-400 {
+  background-color: var(--pgn-color-warning-400) !important;
+}
+
+a.bg-warning-400:hover,
+a.bg-warning-400:focus,
+button.bg-warning-400:hover,
+button.bg-warning-400:focus {
+  background-color: var(--pgn-color-action-default-warning-400) !important;
+}
+
+.text-warning-400 {
+  color: var(--pgn-color-warning-400) !important;
+}
+
+a.text-warning-400:hover,
+a.text-warning-400:focus {
+  color: var(--pgn-color-action-default-warning-400) !important;
+}
+
+.border-warning-400 {
+  border-color: var(--pgn-color-warning-400) !important;
+}
+
+.bg-warning-500 {
+  background-color: var(--pgn-color-warning-500) !important;
+}
+
+a.bg-warning-500:hover,
+a.bg-warning-500:focus,
+button.bg-warning-500:hover,
+button.bg-warning-500:focus {
+  background-color: var(--pgn-color-action-default-warning-500) !important;
+}
+
+.text-warning-500 {
+  color: var(--pgn-color-warning-500) !important;
+}
+
+a.text-warning-500:hover,
+a.text-warning-500:focus {
+  color: var(--pgn-color-action-default-warning-500) !important;
+}
+
+.border-warning-500 {
+  border-color: var(--pgn-color-warning-500) !important;
+}
+
+.bg-warning-600 {
+  background-color: var(--pgn-color-warning-600) !important;
+}
+
+a.bg-warning-600:hover,
+a.bg-warning-600:focus,
+button.bg-warning-600:hover,
+button.bg-warning-600:focus {
+  background-color: var(--pgn-color-action-default-warning-600) !important;
+}
+
+.text-warning-600 {
+  color: var(--pgn-color-warning-600) !important;
+}
+
+a.text-warning-600:hover,
+a.text-warning-600:focus {
+  color: var(--pgn-color-action-default-warning-600) !important;
+}
+
+.border-warning-600 {
+  border-color: var(--pgn-color-warning-600) !important;
+}
+
+.bg-warning-700 {
+  background-color: var(--pgn-color-warning-700) !important;
+}
+
+a.bg-warning-700:hover,
+a.bg-warning-700:focus,
+button.bg-warning-700:hover,
+button.bg-warning-700:focus {
+  background-color: var(--pgn-color-action-default-warning-700) !important;
+}
+
+.text-warning-700 {
+  color: var(--pgn-color-warning-700) !important;
+}
+
+a.text-warning-700:hover,
+a.text-warning-700:focus {
+  color: var(--pgn-color-action-default-warning-700) !important;
+}
+
+.border-warning-700 {
+  border-color: var(--pgn-color-warning-700) !important;
+}
+
+.bg-warning-800 {
+  background-color: var(--pgn-color-warning-800) !important;
+}
+
+a.bg-warning-800:hover,
+a.bg-warning-800:focus,
+button.bg-warning-800:hover,
+button.bg-warning-800:focus {
+  background-color: var(--pgn-color-action-default-warning-800) !important;
+}
+
+.text-warning-800 {
+  color: var(--pgn-color-warning-800) !important;
+}
+
+a.text-warning-800:hover,
+a.text-warning-800:focus {
+  color: var(--pgn-color-action-default-warning-800) !important;
+}
+
+.border-warning-800 {
+  border-color: var(--pgn-color-warning-800) !important;
+}
+
+.bg-warning-900 {
+  background-color: var(--pgn-color-warning-900) !important;
+}
+
+a.bg-warning-900:hover,
+a.bg-warning-900:focus,
+button.bg-warning-900:hover,
+button.bg-warning-900:focus {
+  background-color: var(--pgn-color-action-default-warning-900) !important;
+}
+
+.text-warning-900 {
+  color: var(--pgn-color-warning-900) !important;
+}
+
+a.text-warning-900:hover,
+a.text-warning-900:focus {
+  color: var(--pgn-color-action-default-warning-900) !important;
+}
+
+.border-warning-900 {
+  border-color: var(--pgn-color-warning-900) !important;
+}
+
+.bg-warning {
+  background-color: var(--pgn-color-warning-base) !important;
+}
+
+a.bg-warning:hover,
+a.bg-warning:focus,
+button.bg-warning:hover,
+button.bg-warning:focus {
+  background-color: var(--pgn-color-action-default-warning-base) !important;
+}
+
+.text-warning {
+  color: var(--pgn-color-warning-base) !important;
+}
+
+a.text-warning:hover,
+a.text-warning:focus {
+  color: var(--pgn-color-action-default-warning-base) !important;
+}
+
+.border-warning {
+  border-color: var(--pgn-color-warning-base) !important;
+}
+
+.bg-danger-100 {
+  background-color: var(--pgn-color-danger-100) !important;
+}
+
+a.bg-danger-100:hover,
+a.bg-danger-100:focus,
+button.bg-danger-100:hover,
+button.bg-danger-100:focus {
+  background-color: var(--pgn-color-action-default-danger-100) !important;
+}
+
+.text-danger-100 {
+  color: var(--pgn-color-danger-100) !important;
+}
+
+a.text-danger-100:hover,
+a.text-danger-100:focus {
+  color: var(--pgn-color-action-default-danger-100) !important;
+}
+
+.border-danger-100 {
+  border-color: var(--pgn-color-danger-100) !important;
+}
+
+.bg-danger-200 {
+  background-color: var(--pgn-color-danger-200) !important;
+}
+
+a.bg-danger-200:hover,
+a.bg-danger-200:focus,
+button.bg-danger-200:hover,
+button.bg-danger-200:focus {
+  background-color: var(--pgn-color-action-default-danger-200) !important;
+}
+
+.text-danger-200 {
+  color: var(--pgn-color-danger-200) !important;
+}
+
+a.text-danger-200:hover,
+a.text-danger-200:focus {
+  color: var(--pgn-color-action-default-danger-200) !important;
+}
+
+.border-danger-200 {
+  border-color: var(--pgn-color-danger-200) !important;
+}
+
+.bg-danger-300 {
+  background-color: var(--pgn-color-danger-300) !important;
+}
+
+a.bg-danger-300:hover,
+a.bg-danger-300:focus,
+button.bg-danger-300:hover,
+button.bg-danger-300:focus {
+  background-color: var(--pgn-color-action-default-danger-300) !important;
+}
+
+.text-danger-300 {
+  color: var(--pgn-color-danger-300) !important;
+}
+
+a.text-danger-300:hover,
+a.text-danger-300:focus {
+  color: var(--pgn-color-action-default-danger-300) !important;
+}
+
+.border-danger-300 {
+  border-color: var(--pgn-color-danger-300) !important;
+}
+
+.bg-danger-400 {
+  background-color: var(--pgn-color-danger-400) !important;
+}
+
+a.bg-danger-400:hover,
+a.bg-danger-400:focus,
+button.bg-danger-400:hover,
+button.bg-danger-400:focus {
+  background-color: var(--pgn-color-action-default-danger-400) !important;
+}
+
+.text-danger-400 {
+  color: var(--pgn-color-danger-400) !important;
+}
+
+a.text-danger-400:hover,
+a.text-danger-400:focus {
+  color: var(--pgn-color-action-default-danger-400) !important;
+}
+
+.border-danger-400 {
+  border-color: var(--pgn-color-danger-400) !important;
+}
+
+.bg-danger-500 {
+  background-color: var(--pgn-color-danger-500) !important;
+}
+
+a.bg-danger-500:hover,
+a.bg-danger-500:focus,
+button.bg-danger-500:hover,
+button.bg-danger-500:focus {
+  background-color: var(--pgn-color-action-default-danger-500) !important;
+}
+
+.text-danger-500 {
+  color: var(--pgn-color-danger-500) !important;
+}
+
+a.text-danger-500:hover,
+a.text-danger-500:focus {
+  color: var(--pgn-color-action-default-danger-500) !important;
+}
+
+.border-danger-500 {
+  border-color: var(--pgn-color-danger-500) !important;
+}
+
+.bg-danger-600 {
+  background-color: var(--pgn-color-danger-600) !important;
+}
+
+a.bg-danger-600:hover,
+a.bg-danger-600:focus,
+button.bg-danger-600:hover,
+button.bg-danger-600:focus {
+  background-color: var(--pgn-color-action-default-danger-600) !important;
+}
+
+.text-danger-600 {
+  color: var(--pgn-color-danger-600) !important;
+}
+
+a.text-danger-600:hover,
+a.text-danger-600:focus {
+  color: var(--pgn-color-action-default-danger-600) !important;
+}
+
+.border-danger-600 {
+  border-color: var(--pgn-color-danger-600) !important;
+}
+
+.bg-danger-700 {
+  background-color: var(--pgn-color-danger-700) !important;
+}
+
+a.bg-danger-700:hover,
+a.bg-danger-700:focus,
+button.bg-danger-700:hover,
+button.bg-danger-700:focus {
+  background-color: var(--pgn-color-action-default-danger-700) !important;
+}
+
+.text-danger-700 {
+  color: var(--pgn-color-danger-700) !important;
+}
+
+a.text-danger-700:hover,
+a.text-danger-700:focus {
+  color: var(--pgn-color-action-default-danger-700) !important;
+}
+
+.border-danger-700 {
+  border-color: var(--pgn-color-danger-700) !important;
+}
+
+.bg-danger-800 {
+  background-color: var(--pgn-color-danger-800) !important;
+}
+
+a.bg-danger-800:hover,
+a.bg-danger-800:focus,
+button.bg-danger-800:hover,
+button.bg-danger-800:focus {
+  background-color: var(--pgn-color-action-default-danger-800) !important;
+}
+
+.text-danger-800 {
+  color: var(--pgn-color-danger-800) !important;
+}
+
+a.text-danger-800:hover,
+a.text-danger-800:focus {
+  color: var(--pgn-color-action-default-danger-800) !important;
+}
+
+.border-danger-800 {
+  border-color: var(--pgn-color-danger-800) !important;
+}
+
+.bg-danger-900 {
+  background-color: var(--pgn-color-danger-900) !important;
+}
+
+a.bg-danger-900:hover,
+a.bg-danger-900:focus,
+button.bg-danger-900:hover,
+button.bg-danger-900:focus {
+  background-color: var(--pgn-color-action-default-danger-900) !important;
+}
+
+.text-danger-900 {
+  color: var(--pgn-color-danger-900) !important;
+}
+
+a.text-danger-900:hover,
+a.text-danger-900:focus {
+  color: var(--pgn-color-action-default-danger-900) !important;
+}
+
+.border-danger-900 {
+  border-color: var(--pgn-color-danger-900) !important;
+}
+
+.bg-danger {
+  background-color: var(--pgn-color-danger-base) !important;
+}
+
+a.bg-danger:hover,
+a.bg-danger:focus,
+button.bg-danger:hover,
+button.bg-danger:focus {
+  background-color: var(--pgn-color-action-default-danger-base) !important;
+}
+
+.text-danger {
+  color: var(--pgn-color-danger-base) !important;
+}
+
+a.text-danger:hover,
+a.text-danger:focus {
+  color: var(--pgn-color-action-default-danger-base) !important;
+}
+
+.border-danger {
+  border-color: var(--pgn-color-danger-base) !important;
+}
+
+.bg-light-100 {
+  background-color: var(--pgn-color-light-100) !important;
+}
+
+a.bg-light-100:hover,
+a.bg-light-100:focus,
+button.bg-light-100:hover,
+button.bg-light-100:focus {
+  background-color: var(--pgn-color-action-default-light-100) !important;
+}
+
+.text-light-100 {
+  color: var(--pgn-color-light-100) !important;
+}
+
+a.text-light-100:hover,
+a.text-light-100:focus {
+  color: var(--pgn-color-action-default-light-100) !important;
+}
+
+.border-light-100 {
+  border-color: var(--pgn-color-light-100) !important;
+}
+
+.bg-light-200 {
+  background-color: var(--pgn-color-light-200) !important;
+}
+
+a.bg-light-200:hover,
+a.bg-light-200:focus,
+button.bg-light-200:hover,
+button.bg-light-200:focus {
+  background-color: var(--pgn-color-action-default-light-200) !important;
+}
+
+.text-light-200 {
+  color: var(--pgn-color-light-200) !important;
+}
+
+a.text-light-200:hover,
+a.text-light-200:focus {
+  color: var(--pgn-color-action-default-light-200) !important;
+}
+
+.border-light-200 {
+  border-color: var(--pgn-color-light-200) !important;
+}
+
+.bg-light-300 {
+  background-color: var(--pgn-color-light-300) !important;
+}
+
+a.bg-light-300:hover,
+a.bg-light-300:focus,
+button.bg-light-300:hover,
+button.bg-light-300:focus {
+  background-color: var(--pgn-color-action-default-light-300) !important;
+}
+
+.text-light-300 {
+  color: var(--pgn-color-light-300) !important;
+}
+
+a.text-light-300:hover,
+a.text-light-300:focus {
+  color: var(--pgn-color-action-default-light-300) !important;
+}
+
+.border-light-300 {
+  border-color: var(--pgn-color-light-300) !important;
+}
+
+.bg-light-400 {
+  background-color: var(--pgn-color-light-400) !important;
+}
+
+a.bg-light-400:hover,
+a.bg-light-400:focus,
+button.bg-light-400:hover,
+button.bg-light-400:focus {
+  background-color: var(--pgn-color-action-default-light-400) !important;
+}
+
+.text-light-400 {
+  color: var(--pgn-color-light-400) !important;
+}
+
+a.text-light-400:hover,
+a.text-light-400:focus {
+  color: var(--pgn-color-action-default-light-400) !important;
+}
+
+.border-light-400 {
+  border-color: var(--pgn-color-light-400) !important;
+}
+
+.bg-light-500 {
+  background-color: var(--pgn-color-light-500) !important;
+}
+
+a.bg-light-500:hover,
+a.bg-light-500:focus,
+button.bg-light-500:hover,
+button.bg-light-500:focus {
+  background-color: var(--pgn-color-action-default-light-500) !important;
+}
+
+.text-light-500 {
+  color: var(--pgn-color-light-500) !important;
+}
+
+a.text-light-500:hover,
+a.text-light-500:focus {
+  color: var(--pgn-color-action-default-light-500) !important;
+}
+
+.border-light-500 {
+  border-color: var(--pgn-color-light-500) !important;
+}
+
+.bg-light-600 {
+  background-color: var(--pgn-color-light-600) !important;
+}
+
+a.bg-light-600:hover,
+a.bg-light-600:focus,
+button.bg-light-600:hover,
+button.bg-light-600:focus {
+  background-color: var(--pgn-color-action-default-light-600) !important;
+}
+
+.text-light-600 {
+  color: var(--pgn-color-light-600) !important;
+}
+
+a.text-light-600:hover,
+a.text-light-600:focus {
+  color: var(--pgn-color-action-default-light-600) !important;
+}
+
+.border-light-600 {
+  border-color: var(--pgn-color-light-600) !important;
+}
+
+.bg-light-700 {
+  background-color: var(--pgn-color-light-700) !important;
+}
+
+a.bg-light-700:hover,
+a.bg-light-700:focus,
+button.bg-light-700:hover,
+button.bg-light-700:focus {
+  background-color: var(--pgn-color-action-default-light-700) !important;
+}
+
+.text-light-700 {
+  color: var(--pgn-color-light-700) !important;
+}
+
+a.text-light-700:hover,
+a.text-light-700:focus {
+  color: var(--pgn-color-action-default-light-700) !important;
+}
+
+.border-light-700 {
+  border-color: var(--pgn-color-light-700) !important;
+}
+
+.bg-light-800 {
+  background-color: var(--pgn-color-light-800) !important;
+}
+
+a.bg-light-800:hover,
+a.bg-light-800:focus,
+button.bg-light-800:hover,
+button.bg-light-800:focus {
+  background-color: var(--pgn-color-action-default-light-800) !important;
+}
+
+.text-light-800 {
+  color: var(--pgn-color-light-800) !important;
+}
+
+a.text-light-800:hover,
+a.text-light-800:focus {
+  color: var(--pgn-color-action-default-light-800) !important;
+}
+
+.border-light-800 {
+  border-color: var(--pgn-color-light-800) !important;
+}
+
+.bg-light-900 {
+  background-color: var(--pgn-color-light-900) !important;
+}
+
+a.bg-light-900:hover,
+a.bg-light-900:focus,
+button.bg-light-900:hover,
+button.bg-light-900:focus {
+  background-color: var(--pgn-color-action-default-light-900) !important;
+}
+
+.text-light-900 {
+  color: var(--pgn-color-light-900) !important;
+}
+
+a.text-light-900:hover,
+a.text-light-900:focus {
+  color: var(--pgn-color-action-default-light-900) !important;
+}
+
+.border-light-900 {
+  border-color: var(--pgn-color-light-900) !important;
+}
+
+.bg-light {
+  background-color: var(--pgn-color-light-base) !important;
+}
+
+a.bg-light:hover,
+a.bg-light:focus,
+button.bg-light:hover,
+button.bg-light:focus {
+  background-color: var(--pgn-color-action-default-light-base) !important;
+}
+
+.text-light {
+  color: var(--pgn-color-light-base) !important;
+}
+
+a.text-light:hover,
+a.text-light:focus {
+  color: var(--pgn-color-action-default-light-base) !important;
+}
+
+.border-light {
+  border-color: var(--pgn-color-light-base) !important;
+}
+
+.bg-dark-100 {
+  background-color: var(--pgn-color-dark-100) !important;
+}
+
+a.bg-dark-100:hover,
+a.bg-dark-100:focus,
+button.bg-dark-100:hover,
+button.bg-dark-100:focus {
+  background-color: var(--pgn-color-action-default-dark-100) !important;
+}
+
+.text-dark-100 {
+  color: var(--pgn-color-dark-100) !important;
+}
+
+a.text-dark-100:hover,
+a.text-dark-100:focus {
+  color: var(--pgn-color-action-default-dark-100) !important;
+}
+
+.border-dark-100 {
+  border-color: var(--pgn-color-dark-100) !important;
+}
+
+.bg-dark-200 {
+  background-color: var(--pgn-color-dark-200) !important;
+}
+
+a.bg-dark-200:hover,
+a.bg-dark-200:focus,
+button.bg-dark-200:hover,
+button.bg-dark-200:focus {
+  background-color: var(--pgn-color-action-default-dark-200) !important;
+}
+
+.text-dark-200 {
+  color: var(--pgn-color-dark-200) !important;
+}
+
+a.text-dark-200:hover,
+a.text-dark-200:focus {
+  color: var(--pgn-color-action-default-dark-200) !important;
+}
+
+.border-dark-200 {
+  border-color: var(--pgn-color-dark-200) !important;
+}
+
+.bg-dark-300 {
+  background-color: var(--pgn-color-dark-300) !important;
+}
+
+a.bg-dark-300:hover,
+a.bg-dark-300:focus,
+button.bg-dark-300:hover,
+button.bg-dark-300:focus {
+  background-color: var(--pgn-color-action-default-dark-300) !important;
+}
+
+.text-dark-300 {
+  color: var(--pgn-color-dark-300) !important;
+}
+
+a.text-dark-300:hover,
+a.text-dark-300:focus {
+  color: var(--pgn-color-action-default-dark-300) !important;
+}
+
+.border-dark-300 {
+  border-color: var(--pgn-color-dark-300) !important;
+}
+
+.bg-dark-400 {
+  background-color: var(--pgn-color-dark-400) !important;
+}
+
+a.bg-dark-400:hover,
+a.bg-dark-400:focus,
+button.bg-dark-400:hover,
+button.bg-dark-400:focus {
+  background-color: var(--pgn-color-action-default-dark-400) !important;
+}
+
+.text-dark-400 {
+  color: var(--pgn-color-dark-400) !important;
+}
+
+a.text-dark-400:hover,
+a.text-dark-400:focus {
+  color: var(--pgn-color-action-default-dark-400) !important;
+}
+
+.border-dark-400 {
+  border-color: var(--pgn-color-dark-400) !important;
+}
+
+.bg-dark-500 {
+  background-color: var(--pgn-color-dark-500) !important;
+}
+
+a.bg-dark-500:hover,
+a.bg-dark-500:focus,
+button.bg-dark-500:hover,
+button.bg-dark-500:focus {
+  background-color: var(--pgn-color-action-default-dark-500) !important;
+}
+
+.text-dark-500 {
+  color: var(--pgn-color-dark-500) !important;
+}
+
+a.text-dark-500:hover,
+a.text-dark-500:focus {
+  color: var(--pgn-color-action-default-dark-500) !important;
+}
+
+.border-dark-500 {
+  border-color: var(--pgn-color-dark-500) !important;
+}
+
+.bg-dark-600 {
+  background-color: var(--pgn-color-dark-600) !important;
+}
+
+a.bg-dark-600:hover,
+a.bg-dark-600:focus,
+button.bg-dark-600:hover,
+button.bg-dark-600:focus {
+  background-color: var(--pgn-color-action-default-dark-600) !important;
+}
+
+.text-dark-600 {
+  color: var(--pgn-color-dark-600) !important;
+}
+
+a.text-dark-600:hover,
+a.text-dark-600:focus {
+  color: var(--pgn-color-action-default-dark-600) !important;
+}
+
+.border-dark-600 {
+  border-color: var(--pgn-color-dark-600) !important;
+}
+
+.bg-dark-700 {
+  background-color: var(--pgn-color-dark-700) !important;
+}
+
+a.bg-dark-700:hover,
+a.bg-dark-700:focus,
+button.bg-dark-700:hover,
+button.bg-dark-700:focus {
+  background-color: var(--pgn-color-action-default-dark-700) !important;
+}
+
+.text-dark-700 {
+  color: var(--pgn-color-dark-700) !important;
+}
+
+a.text-dark-700:hover,
+a.text-dark-700:focus {
+  color: var(--pgn-color-action-default-dark-700) !important;
+}
+
+.border-dark-700 {
+  border-color: var(--pgn-color-dark-700) !important;
+}
+
+.bg-dark-800 {
+  background-color: var(--pgn-color-dark-800) !important;
+}
+
+a.bg-dark-800:hover,
+a.bg-dark-800:focus,
+button.bg-dark-800:hover,
+button.bg-dark-800:focus {
+  background-color: var(--pgn-color-action-default-dark-800) !important;
+}
+
+.text-dark-800 {
+  color: var(--pgn-color-dark-800) !important;
+}
+
+a.text-dark-800:hover,
+a.text-dark-800:focus {
+  color: var(--pgn-color-action-default-dark-800) !important;
+}
+
+.border-dark-800 {
+  border-color: var(--pgn-color-dark-800) !important;
+}
+
+.bg-dark-900 {
+  background-color: var(--pgn-color-dark-900) !important;
+}
+
+a.bg-dark-900:hover,
+a.bg-dark-900:focus,
+button.bg-dark-900:hover,
+button.bg-dark-900:focus {
+  background-color: var(--pgn-color-action-default-dark-900) !important;
+}
+
+.text-dark-900 {
+  color: var(--pgn-color-dark-900) !important;
+}
+
+a.text-dark-900:hover,
+a.text-dark-900:focus {
+  color: var(--pgn-color-action-default-dark-900) !important;
+}
+
+.border-dark-900 {
+  border-color: var(--pgn-color-dark-900) !important;
+}
+
+.bg-dark {
+  background-color: var(--pgn-color-dark-base) !important;
+}
+
+a.bg-dark:hover,
+a.bg-dark:focus,
+button.bg-dark:hover,
+button.bg-dark:focus {
+  background-color: var(--pgn-color-action-default-dark-base) !important;
+}
+
+.text-dark {
+  color: var(--pgn-color-dark-base) !important;
+}
+
+a.text-dark:hover,
+a.text-dark:focus {
+  color: var(--pgn-color-action-default-dark-base) !important;
+}
+
+.border-dark {
+  border-color: var(--pgn-color-dark-base) !important;
+}
+
diff --git a/styles/css/themes/dark/variables.css b/styles/css/themes/dark/variables.css
new file mode 100644
index 00000000000..b52fff51084
--- /dev/null
+++ b/styles/css/themes/dark/variables.css
@@ -0,0 +1,2067 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * See <PARAGON_ROOT>/tokens/README.md for more details.
+ */
+
+:root {
+  --pgn-size-btn-focus-width: 2px;
+  --pgn-size-input-btn-focus-width: 1px;
+  --pgn-spacing-input-btn-padding-y: 0.5625rem;
+  --pgn-elevation-dropdown-box-shadow: none;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x: 0;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y: 10px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-blur: 20px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x: 0;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y: 8px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-blur: 20px;
+  --pgn-elevation-popover-box-shadow: none;
+  --pgn-elevation-tooltip-box-shadow-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-tooltip-box-shadow-1-offset-x: 0;
+  --pgn-elevation-tooltip-box-shadow-1-offset-y: 2px;
+  --pgn-elevation-tooltip-box-shadow-1-blur: 4px;
+  --pgn-elevation-tooltip-box-shadow-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-tooltip-box-shadow-2-offset-x: 0;
+  --pgn-elevation-tooltip-box-shadow-2-offset-y: 2px;
+  --pgn-elevation-tooltip-box-shadow-2-blur: 8px;
+  --pgn-elevation-annotation-box-shadow-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-annotation-box-shadow-1-offset-x: 0;
+  --pgn-elevation-annotation-box-shadow-1-offset-y: 2px;
+  --pgn-elevation-annotation-box-shadow-1-blur: 4px;
+  --pgn-elevation-annotation-box-shadow-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-annotation-box-shadow-2-offset-x: 0;
+  --pgn-elevation-annotation-box-shadow-2-offset-y: 2px;
+  --pgn-elevation-annotation-box-shadow-2-blur: 8px;
+  --pgn-elevation-btn-box-shadow-base: none;
+  --pgn-elevation-btn-box-shadow-active: none;
+  --pgn-elevation-close-button-text-shadow-offset-x: 0;
+  --pgn-elevation-close-button-text-shadow-offset-y: 1px;
+  --pgn-elevation-close-button-text-shadow-blur: 0;
+  --pgn-elevation-code-kbd-box-shadow: none;
+  --pgn-elevation-data-table-box-shadow-color: rgba(0, 0, 0, 0.55);
+  --pgn-elevation-data-table-box-shadow-offset-x: 0;
+  --pgn-elevation-data-table-box-shadow-offset-y: 0.0625rem;
+  --pgn-elevation-data-table-box-shadow-blur: 0.125rem;
+  --pgn-elevation-dropzone-hover-spread: 2px;
+  --pgn-elevation-dropzone-hover-offset-x: 0;
+  --pgn-elevation-dropzone-hover-offset-y: 0;
+  --pgn-elevation-dropzone-hover-blur: 0;
+  --pgn-elevation-dropzone-hover-inset: inset;
+  --pgn-elevation-dropzone-focus-spread: 2px;
+  --pgn-elevation-dropzone-focus-offset-x: 0;
+  --pgn-elevation-dropzone-focus-offset-y: 0;
+  --pgn-elevation-dropzone-focus-blur: 0;
+  --pgn-elevation-dropzone-focus-inset: inset;
+  --pgn-elevation-dropzone-active-spread: 2px;
+  --pgn-elevation-dropzone-active-offset-x: 0;
+  --pgn-elevation-dropzone-active-offset-y: 0;
+  --pgn-elevation-dropzone-active-blur: 0;
+  --pgn-elevation-dropzone-active-inset: inset;
+  --pgn-elevation-dropzone-error-spread: 2px;
+  --pgn-elevation-dropzone-error-offset-x: 0;
+  --pgn-elevation-dropzone-error-offset-y: 0;
+  --pgn-elevation-dropzone-error-blur: 0;
+  --pgn-elevation-dropzone-error-inset: inset;
+  --pgn-elevation-form-input-base: none;
+  --pgn-elevation-form-input-focus-spread: 1px;
+  --pgn-elevation-form-input-focus-offset-x: 0;
+  --pgn-elevation-form-input-focus-offset-y: 0;
+  --pgn-elevation-form-input-focus-blur: 0;
+  --pgn-elevation-form-control-indicator-checked-base: none;
+  --pgn-elevation-form-control-indicator-checked-focus-color: rgba(0, 0, 0, 0.1);
+  --pgn-elevation-form-control-indicator-checked-focus-spread: 4px;
+  --pgn-elevation-form-control-indicator-checked-focus-offset-x: 0;
+  --pgn-elevation-form-control-indicator-checked-focus-offset-y: 0;
+  --pgn-elevation-form-control-indicator-checked-focus-blur: 0;
+  --pgn-elevation-form-control-indicator-active: none;
+  --pgn-elevation-form-control-checkbox-indicator-indeterminate: none;
+  --pgn-elevation-form-control-range-track: none;
+  --pgn-elevation-form-control-range-thumb-base: none;
+  --pgn-elevation-form-control-range-thumb-focus-spread: 0;
+  --pgn-elevation-form-control-range-thumb-focus-offset-x: 0;
+  --pgn-elevation-form-control-range-thumb-focus-offset-y: 0.1rem;
+  --pgn-elevation-form-control-range-thumb-focus-blur: 0.25rem;
+  --pgn-elevation-form-control-file-focus-spread: 1px;
+  --pgn-elevation-form-control-file-focus-offset-x: 0;
+  --pgn-elevation-form-control-file-focus-offset-y: 0;
+  --pgn-elevation-form-control-file-focus-blur: 0;
+  --pgn-elevation-form-control-select-border-base: none;
+  --pgn-elevation-form-control-select-border-focus-offset-x: 0;
+  --pgn-elevation-form-control-select-border-focus-offset-y: 0;
+  --pgn-elevation-form-control-select-border-focus-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-primary-base-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-primary-base-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-primary-base-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-primary-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-primary-active: none;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-secondary-active: none;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-brand-base-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-brand-base-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-brand-base-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-brand-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-brand-active: none;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-success-base-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-success-base-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-success-base-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-success-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-success-active: none;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-warning-base-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-warning-base-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-warning-base-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-warning-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-warning-active: none;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-danger-base-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-danger-base-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-danger-base-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-danger-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-danger-active: none;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-light-base-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-light-base-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-light-base-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-light-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-light-active: none;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-dark-base-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-dark-base-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-dark-base-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-dark-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-dark-active: none;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-black-base-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-black-base-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-black-base-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-black-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-offset-x: 0;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-offset-y: 0;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-blur: 0;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-black-active: none;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-active: none;
+  --pgn-elevation-image-thumbnail-box-shadow: none;
+  --pgn-elevation-menu-box-shadow-color: rgba(0, 0, 0, 0.6);
+  --pgn-elevation-menu-box-shadow-offset-x: 0;
+  --pgn-elevation-menu-box-shadow-offset-y: 0.125rem;
+  --pgn-elevation-menu-box-shadow-blur: 0.25rem;
+  --pgn-elevation-pagination-focus-box-shadow-offset-x: 0;
+  --pgn-elevation-pagination-focus-box-shadow-offset-y: 0;
+  --pgn-elevation-pagination-focus-box-shadow-blur: 0;
+  --pgn-elevation-progress-bar-box-shadow: none;
+  --pgn-elevation-sticky-shadow-top-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-top-1-offset-x: 0;
+  --pgn-elevation-sticky-shadow-top-1-offset-y: -0.5rem;
+  --pgn-elevation-sticky-shadow-top-1-blur: 1rem;
+  --pgn-elevation-sticky-shadow-top-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-top-2-offset-x: 0;
+  --pgn-elevation-sticky-shadow-top-2-offset-y: -0.25rem;
+  --pgn-elevation-sticky-shadow-top-2-blur: 0.625rem;
+  --pgn-elevation-sticky-shadow-bottom-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-bottom-1-offset-x: 0;
+  --pgn-elevation-sticky-shadow-bottom-1-offset-y: 0.5rem;
+  --pgn-elevation-sticky-shadow-bottom-1-blur: 1rem;
+  --pgn-elevation-sticky-shadow-bottom-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-bottom-2-offset-x: 0;
+  --pgn-elevation-sticky-shadow-bottom-2-offset-y: 0.25rem;
+  --pgn-elevation-sticky-shadow-bottom-2-blur: 0.625rem;
+  --pgn-elevation-toast-box-shadow-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-toast-box-shadow-1-offset-x: 0;
+  --pgn-elevation-toast-box-shadow-1-offset-y: 1.25rem;
+  --pgn-elevation-toast-box-shadow-1-blur: 2.5rem;
+  --pgn-elevation-toast-box-shadow-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-toast-box-shadow-2-offset-x: 0;
+  --pgn-elevation-toast-box-shadow-2-offset-y: 0.5rem;
+  --pgn-elevation-toast-box-shadow-2-blur: 3rem;
+  --pgn-elevation-input-btn-focus-box-shadow-offset-x: 0;
+  --pgn-elevation-input-btn-focus-box-shadow-offset-y: 0;
+  --pgn-elevation-input-btn-focus-box-shadow-blur: 0;
+  --pgn-elevation-box-shadow-level-1-1-color: rgba(0, 0, 0, 0.5); /** Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-offset-x: 0; /** Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-offset-y: 0.0625rem; /** Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-blur: 0.125rem; /** Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-color: rgba(0, 0, 0, 0.5); /** Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-offset-x: 0; /** Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-offset-y: 0.0625rem; /** Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-blur: 0.25rem; /** Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-2-1-color: rgba(0, 0, 0, 0.5); /** Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-offset-x: 0; /** Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-offset-y: 0.125rem; /** Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-blur: 0.25rem; /** Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-color: rgba(0, 0, 0, 0.5); /** Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-offset-x: 0; /** Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-offset-y: 0.125rem; /** Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-blur: 0.5rem; /** Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-3-1-color: rgba(0, 0, 0, 0.5); /** Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-offset-x: 0; /** Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-offset-y: 0; /** Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-blur: 0.625rem; /** Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-color: rgba(0, 0, 0, 0.5); /** Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-offset-x: 0; /** Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-offset-y: 0; /** Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-blur: 1rem; /** Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-4-1-color: rgba(0, 0, 0, 0.5); /** Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-offset-x: 0; /** Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-offset-y: 0.625rem; /** Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-blur: 1.25rem; /** Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-color: rgba(0, 0, 0, 0.5); /** Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-offset-x: 0; /** Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-offset-y: 0.5rem; /** Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-blur: 1.25rem; /** Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-5-1-color: rgba(0, 0, 0, 0.5); /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-offset-x: 0; /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-offset-y: 1.25rem; /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-blur: 2.5rem; /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-color: rgba(0, 0, 0, 0.5); /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-offset-x: 0; /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-offset-y: 0.5rem; /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-blur: 3rem; /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-base-color: rgba(0, 0, 0, 0.6); /** Default box shadow. */
+  --pgn-elevation-box-shadow-base-offset-x: 0; /** Default box shadow. */
+  --pgn-elevation-box-shadow-base-offset-y: 0.125rem; /** Default box shadow. */
+  --pgn-elevation-box-shadow-base-blur: 0.25rem; /** Default box shadow. */
+  --pgn-elevation-box-shadow-sm-color: rgba(0, 0, 0, 0.55); /** Small box shadow. */
+  --pgn-elevation-box-shadow-sm-offset-x: 0; /** Small box shadow. */
+  --pgn-elevation-box-shadow-sm-offset-y: 0.0625rem; /** Small box shadow. */
+  --pgn-elevation-box-shadow-sm-blur: 0.125rem; /** Small box shadow. */
+  --pgn-elevation-box-shadow-lg-color: rgba(0, 0, 0, 0.6); /** Large box shadow. */
+  --pgn-elevation-box-shadow-lg-offset-x: 0; /** Large box shadow. */
+  --pgn-elevation-box-shadow-lg-offset-y: 0.25rem; /** Large box shadow. */
+  --pgn-elevation-box-shadow-lg-blur: 0.5rem; /** Large box shadow. */
+  --pgn-elevation-box-shadow-down-1-1-color: rgba(0, 0, 0, 0.5); /** Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-offset-x: 0; /** Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-offset-y: 0.0625rem; /** Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-blur: 0.125rem; /** Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-color: rgba(0, 0, 0, 0.5); /** Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-offset-x: 0; /** Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-offset-y: 0.0625rem; /** Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-blur: 0.25rem; /** Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-2-1-color: rgba(0, 0, 0, 0.5); /** Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-offset-x: 0; /** Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-offset-y: 0.125rem; /** Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-blur: 0.25rem; /** Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-color: rgba(0, 0, 0, 0.5); /** Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-offset-x: 0; /** Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-offset-y: 0.125rem; /** Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-blur: 0.5rem; /** Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-3-1-color: rgba(0, 0, 0, 0.5); /** Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-offset-x: 0; /** Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-offset-y: 0.5rem; /** Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-blur: 1rem; /** Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-color: rgba(0, 0, 0, 0.5); /** Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-offset-x: 0; /** Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-offset-y: 0.25rem; /** Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-blur: 0.625rem; /** Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-4-1-color: rgba(0, 0, 0, 0.5); /** Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-offset-x: 0; /** Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-offset-y: 0.625rem; /** Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-blur: 1.25rem; /** Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-color: rgba(0, 0, 0, 0.5); /** Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-offset-x: 0; /** Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-offset-y: 0.5rem; /** Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-blur: 1.25rem; /** Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-5-1-color: rgba(0, 0, 0, 0.5); /** Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-offset-x: 0; /** Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-offset-y: 1.25rem; /** Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-blur: 2.5rem; /** Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-color: rgba(0, 0, 0, 0.5); /** Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-offset-x: 0; /** Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-offset-y: 0.5rem; /** Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-blur: 3rem; /** Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-1-1-color: rgba(0, 0, 0, 0.5); /** Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-offset-x: -0.0625rem; /** Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-offset-y: 0; /** Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-blur: 0.125rem; /** Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-color: rgba(0, 0, 0, 0.5); /** Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-offset-x: -0.0625rem; /** Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-offset-y: 0; /** Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-blur: 0.25rem; /** Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-2-1-color: rgba(0, 0, 0, 0.5); /** Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-offset-x: -0.125rem; /** Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-offset-y: 0; /** Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-blur: 0.25rem; /** Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-color: rgba(0, 0, 0, 0.5); /** Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-offset-x: -0.125rem; /** Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-offset-y: 0; /** Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-blur: 0.5rem; /** Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-3-1-color: rgba(0, 0, 0, 0.5); /** Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-offset-x: -0.5rem; /** Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-offset-y: 0; /** Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-blur: 1rem; /** Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-color: rgba(0, 0, 0, 0.5); /** Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-offset-x: -0.25rem; /** Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-offset-y: 0; /** Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-blur: 0.625rem; /** Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-4-1-color: rgba(0, 0, 0, 0.5); /** Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-offset-x: -0.625rem; /** Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-offset-y: 0; /** Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-blur: 1.25rem; /** Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-color: rgba(0, 0, 0, 0.5); /** Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-offset-x: -0.5rem; /** Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-offset-y: 0; /** Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-blur: 1.25rem; /** Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-5-1-color: rgba(0, 0, 0, 0.5); /** Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-offset-x: -1.25rem; /** Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-offset-y: 0; /** Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-blur: 2.5rem; /** Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-color: rgba(0, 0, 0, 0.5); /** Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-offset-x: -0.5rem; /** Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-offset-y: 0; /** Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-blur: 3rem; /** Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-1-1-color: rgba(0, 0, 0, 0.5); /** Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-offset-x: 0; /** Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-offset-y: -0.0625rem; /** Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-blur: 0.125rem; /** Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-color: rgba(0, 0, 0, 0.5); /** Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-offset-x: 0; /** Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-offset-y: -0.0625rem; /** Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-blur: 0.25rem; /** Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-2-1-color: rgba(0, 0, 0, 0.5); /** Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-offset-x: 0; /** Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-offset-y: -0.125rem; /** Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-blur: 0.25rem; /** Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-color: rgba(0, 0, 0, 0.5); /** Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-offset-x: 0; /** Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-offset-y: -0.125rem; /** Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-blur: 0.5rem; /** Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-3-1-color: rgba(0, 0, 0, 0.5); /** Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-offset-x: 0; /** Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-offset-y: -0.5rem; /** Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-blur: 1rem; /** Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-color: rgba(0, 0, 0, 0.5); /** Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-offset-x: 0; /** Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-offset-y: -0.25rem; /** Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-blur: 0.625rem; /** Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-4-1-color: rgba(0, 0, 0, 0.5); /** Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-offset-x: 0; /** Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-offset-y: -0.625rem; /** Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-blur: 1.25rem; /** Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-color: rgba(0, 0, 0, 0.5); /** Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-offset-x: 0; /** Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-offset-y: -0.5rem; /** Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-blur: 1.25rem; /** Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-5-1-color: rgba(0, 0, 0, 0.5); /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-offset-x: 0; /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-offset-y: -1.25rem; /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-blur: 2.5rem; /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-color: rgba(0, 0, 0, 0.5); /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-offset-x: 0; /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-offset-y: -0.5rem; /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-blur: 3rem; /** Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-1-1-color: rgba(0, 0, 0, 0.5); /** Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-offset-x: 0.0625rem; /** Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-offset-y: 0; /** Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-blur: 0.125rem; /** Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-color: rgba(0, 0, 0, 0.5); /** Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-offset-x: 0.0625rem; /** Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-offset-y: 0; /** Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-blur: 0.25rem; /** Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-2-1-color: rgba(0, 0, 0, 0.5); /** Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-offset-x: 0.125rem; /** Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-offset-y: 0; /** Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-blur: 0.25rem; /** Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-color: rgba(0, 0, 0, 0.5); /** Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-offset-x: 0.125rem; /** Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-offset-y: 0; /** Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-blur: 0.5rem; /** Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-3-1-color: rgba(0, 0, 0, 0.5); /** Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-offset-x: 0.5rem; /** Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-offset-y: 0; /** Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-blur: 1rem; /** Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-color: rgba(0, 0, 0, 0.5); /** Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-offset-x: 0.25rem; /** Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-offset-y: 0; /** Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-blur: 0.625rem; /** Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-4-1-color: rgba(0, 0, 0, 0.5); /** Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-offset-x: 0.625rem; /** Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-offset-y: 0; /** Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-blur: 1.25rem; /** Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-color: rgba(0, 0, 0, 0.5); /** Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-offset-x: 0.5rem; /** Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-offset-y: 0; /** Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-blur: 1.25rem; /** Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-5-1-color: rgba(0, 0, 0, 0.5); /** Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-offset-x: 1.25rem; /** Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-offset-y: 0; /** Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-blur: 2.5rem; /** Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-color: rgba(0, 0, 0, 0.5); /** Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-offset-x: 0.5rem; /** Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-offset-y: 0; /** Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-blur: 3rem; /** Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-1-1-color: rgba(0, 0, 0, 0.5); /** Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-offset-x: 0; /** Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-offset-y: 0; /** Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-blur: 0.125rem; /** Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-color: rgba(0, 0, 0, 0.5); /** Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-offset-x: 0; /** Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-offset-y: 0; /** Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-blur: 0.25rem; /** Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-2-1-color: rgba(0, 0, 0, 0.5); /** Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-offset-x: 0; /** Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-offset-y: 0; /** Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-blur: 0.25rem; /** Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-color: rgba(0, 0, 0, 0.5); /** Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-offset-x: 0; /** Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-offset-y: 0; /** Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-blur: 0.5rem; /** Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-3-1-color: rgba(0, 0, 0, 0.5); /** Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-offset-x: 0; /** Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-offset-y: 0; /** Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-blur: 0.625rem; /** Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-color: rgba(0, 0, 0, 0.5); /** Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-offset-x: 0; /** Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-offset-y: 0; /** Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-blur: 1rem; /** Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-4-1-color: rgba(0, 0, 0, 0.5); /** Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-offset-x: 0; /** Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-offset-y: 0; /** Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-blur: 1.25rem; /** Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-color: rgba(0, 0, 0, 0.5); /** Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-offset-x: 0; /** Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-offset-y: 0; /** Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-blur: 1.25rem; /** Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-5-1-color: rgba(0, 0, 0, 0.5); /** Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-offset-x: 0; /** Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-offset-y: 0; /** Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-blur: 2.5rem; /** Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-color: rgba(0, 0, 0, 0.5); /** Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-offset-x: 0; /** Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-offset-y: 0; /** Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-blur: 3rem; /** Centered box shadow of level 5. */
+  --pgn-other-form-feedback-tooltip-opacity: .9;
+  --pgn-other-btn-disabled-opacity: .65;
+  --pgn-other-carousel-control-opacity-base: .5;
+  --pgn-other-carousel-control-opacity-hover: .9;
+  --pgn-other-chip-opacity-disabled: .3;
+  --pgn-other-content-form-control-select-bg-repeat: no-repeat;
+  --pgn-other-content-form-control-select-bg-position-x: right;
+  --pgn-other-content-form-control-select-bg-position-y: center;
+  --pgn-other-modal-opacity: .5;
+  --pgn-other-search-field-disabled-opacity: .3;
+  --pgn-other-tooltip-opacity: 1;
+  --pgn-other-link-emphasized-hover-darken-percentage: 15%;
+  --pgn-color-btn-bg-outline-brand: inherit;
+  --pgn-color-btn-bg-inverse-outline-brand: #00000000;
+  --pgn-color-btn-bg-outline-danger: inherit;
+  --pgn-color-btn-bg-inverse-outline-danger: #00000000;
+  --pgn-color-btn-bg-outline-dark: inherit;
+  --pgn-color-btn-bg-inverse-outline-dark: #00000000;
+  --pgn-color-btn-bg-outline-info: inherit;
+  --pgn-color-btn-bg-inverse-outline-info: inherit;
+  --pgn-color-btn-bg-outline-light: inherit;
+  --pgn-color-btn-bg-inverse-outline-light: inherit;
+  --pgn-color-btn-bg-outline-primary: #00000000;
+  --pgn-color-btn-bg-inverse-outline-primary: #00000000;
+  --pgn-color-btn-bg-outline-secondary: inherit;
+  --pgn-color-btn-bg-inverse-outline-secondary: inherit;
+  --pgn-color-btn-bg-outline-success: inherit;
+  --pgn-color-btn-bg-inverse-outline-success: inherit;
+  --pgn-color-btn-bg-tertiary: #00000000;
+  --pgn-color-btn-bg-inverse-tertiary: #00000000;
+  --pgn-color-btn-bg-outline-warning: inherit;
+  --pgn-color-btn-bg-inverse-outline-warning: inherit;
+  --pgn-color-btn-border-inverse-brand: #00000000;
+  --pgn-color-btn-border-inverse-danger: #00000000;
+  --pgn-color-btn-border-inverse-dark: #00000000;
+  --pgn-color-btn-border-inverse-info: #00000000;
+  --pgn-color-btn-border-inverse-light: #00000000;
+  --pgn-color-btn-border-inverse-primary: #00000000;
+  --pgn-color-btn-border-inverse-secondary: #00000000;
+  --pgn-color-btn-border-inverse-success: #00000000;
+  --pgn-color-btn-border-tertiary: #00000000;
+  --pgn-color-btn-border-inverse-tertiary: #00000000;
+  --pgn-color-btn-border-inverse-warning: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-brand: #00000000;
+  --pgn-color-btn-hover-border-inverse-brand: #00000000;
+  --pgn-color-btn-hover-border-inverse-danger: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-danger: #00000000;
+  --pgn-color-btn-hover-border-inverse-dark: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-dark: #00000000;
+  --pgn-color-btn-hover-border-inverse-info: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-info: #00000000;
+  --pgn-color-btn-hover-border-inverse-light: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-light: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-primary: #00000000;
+  --pgn-color-btn-hover-border-inverse-primary: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000;
+  --pgn-color-btn-hover-border-inverse-secondary: #00000000;
+  --pgn-color-btn-hover-border-inverse-success: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-success: #00000000;
+  --pgn-color-btn-hover-border-tertiary: #00000000;
+  --pgn-color-btn-hover-border-inverse-tertiary: #00000000;
+  --pgn-color-btn-hover-border-inverse-warning: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-warning: #00000000;
+  --pgn-color-btn-active-border-inverse-brand: #00000000;
+  --pgn-color-btn-active-border-inverse-outline-brand: #00000000;
+  --pgn-color-btn-active-border-inverse-danger: #00000000;
+  --pgn-color-btn-active-border-inverse-outline-danger: #00000000;
+  --pgn-color-btn-active-border-inverse-dark: #00000000;
+  --pgn-color-btn-active-border-inverse-outline-dark: #00000000;
+  --pgn-color-btn-active-border-inverse-info: #00000000;
+  --pgn-color-btn-active-border-inverse-outline-info: #00000000;
+  --pgn-color-btn-active-border-inverse-light: inherit;
+  --pgn-color-btn-active-border-inverse-outline-light: #00000000;
+  --pgn-color-btn-active-border-inverse-outline-primary: #00000000;
+  --pgn-color-btn-active-border-inverse-primary: #00000000;
+  --pgn-color-btn-active-border-inverse-outline-secondary: #00000000;
+  --pgn-color-btn-active-border-inverse-secondary: #00000000;
+  --pgn-color-btn-active-border-inverse-success: inherit;
+  --pgn-color-btn-active-border-inverse-outline-success: #00000000;
+  --pgn-color-btn-active-border-tertiary: #00000000;
+  --pgn-color-btn-active-border-inverse-tertiary: #00000000;
+  --pgn-color-btn-active-border-inverse-warning: inherit;
+  --pgn-color-btn-active-border-inverse-outline-warning: #00000000;
+  --pgn-color-btn-focus-text-outline-dark: inherit;
+  --pgn-color-btn-focus-text-inverse-secondary: inherit;
+  --pgn-color-btn-focus-border-inverse-tertiary: #00000000;
+  --pgn-color-btn-focus-bg-outline-brand: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-brand: inherit;
+  --pgn-color-btn-focus-bg-outline-danger: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-danger: inherit;
+  --pgn-color-btn-focus-bg-outline-dark: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-dark: inherit;
+  --pgn-color-btn-focus-bg-outline-info: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-info: inherit;
+  --pgn-color-btn-focus-bg-outline-light: #00000000;
+  --pgn-color-btn-focus-bg-inverse-outline-light: inherit;
+  --pgn-color-btn-focus-bg-outline-primary: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-primary: inherit;
+  --pgn-color-btn-focus-bg-outline-secondary: #00000000;
+  --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit;
+  --pgn-color-btn-focus-bg-outline-success: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-success: inherit;
+  --pgn-color-btn-focus-bg-tertiary: inherit;
+  --pgn-color-btn-focus-bg-inverse-tertiary: inherit;
+  --pgn-color-btn-focus-bg-outline-warning: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-warning: inherit;
+  --pgn-color-btn-focus-outline-inverse-outline-warning: inherit;
+  --pgn-color-btn-disabled-text-outline-dark: inherit;
+  --pgn-color-btn-disabled-text-outline-secondary: inherit;
+  --pgn-color-btn-disabled-text-inverse-secondary: inherit;
+  --pgn-color-btn-disabled-bg-outline-brand: inherit;
+  --pgn-color-btn-disabled-bg-outline-danger: inherit;
+  --pgn-color-btn-disabled-bg-inverse-danger: #00000000;
+  --pgn-color-btn-disabled-bg-inverse-outline-danger: inherit;
+  --pgn-color-btn-disabled-bg-outline-dark: inherit;
+  --pgn-color-btn-disabled-bg-inverse-dark: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-dark: inherit;
+  --pgn-color-btn-disabled-bg-outline-info: inherit;
+  --pgn-color-btn-disabled-bg-inverse-info: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-info: inherit;
+  --pgn-color-btn-disabled-bg-outline-light: inherit;
+  --pgn-color-btn-disabled-bg-inverse-light: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-light: inherit;
+  --pgn-color-btn-disabled-bg-outline-primary: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-primary: inherit;
+  --pgn-color-btn-disabled-bg-outline-secondary: inherit;
+  --pgn-color-btn-disabled-bg-inverse-secondary: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-secondary: inherit;
+  --pgn-color-btn-disabled-bg-outline-success: inherit;
+  --pgn-color-btn-disabled-bg-inverse-success: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-success: inherit;
+  --pgn-color-btn-disabled-bg-tertiary: inherit;
+  --pgn-color-btn-disabled-bg-inverse-tertiary: inherit;
+  --pgn-color-btn-disabled-bg-outline-warning: inherit;
+  --pgn-color-btn-disabled-bg-inverse-warning: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-warning: inherit;
+  --pgn-color-btn-disabled-border-inverse-danger: #00000000;
+  --pgn-color-btn-disabled-border-inverse-dark: #00000000;
+  --pgn-color-btn-disabled-border-inverse-info: #00000000;
+  --pgn-color-btn-disabled-border-inverse-light: #00000000;
+  --pgn-color-btn-disabled-border-inverse-primary: #00000000;
+  --pgn-color-btn-disabled-border-secondary: inherit;
+  --pgn-color-btn-disabled-border-inverse-success: #00000000;
+  --pgn-color-btn-disabled-border-inverse-outline-success: inherit;
+  --pgn-color-btn-disabled-border-inverse-warning: #00000000;
+  --pgn-color-card-base: inherit;
+  --pgn-color-code-base: #E83E8CFF;
+  --pgn-color-form-control-label-base: inherit;
+  --pgn-color-icon-button-bg-base: #00000000;
+  --pgn-color-menu-item-bg: #00000000;
+  --pgn-color-nav-link-border: #00000000;
+  --pgn-color-nav-tabs-base-bg-hover: #00000000;
+  --pgn-color-nav-tabs-base-link-active-bg: #00000000;
+  --pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000;
+  --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066;
+  --pgn-color-popover-border: #FFFFFF33;
+  --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000;
+  --pgn-color-progress-bg: #00000000;
+  --pgn-color-stepper-header-bg-base: #00000000;
+  --pgn-color-stepper-header-step-border: none;
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover: #00000000;
+  --pgn-color-toast-base: inherit;
+  --pgn-color-list-group-base: inherit;
+  --pgn-color-mark-bg: #FFF243FF;
+  --pgn-color-white: #FFFFFFFF; /** White color. */
+  --pgn-color-black: #000000FF; /** Black color. */
+  --pgn-color-blue: #23419FFF; /** Blue color. */
+  --pgn-color-red: #C32D3AFF; /** Red color. */
+  --pgn-color-green: #178253FF; /** Green color. */
+  --pgn-color-yellow: #FFD900FF; /** Yellow color. */
+  --pgn-color-teal: #006DAAFF; /** Teal color. */
+  --pgn-color-accent-a: #00BBF9FF; /** Accent-A color. */
+  --pgn-color-accent-b: #FFEE88FF; /** Accent-B color. */
+  --pgn-color-gray-100: #212529FF; /** Gray color of level 100. */
+  --pgn-color-gray-200: #333333FF; /** Gray color of level 200. */
+  --pgn-color-gray-300: #454545FF; /** Gray color of level 300. */
+  --pgn-color-gray-400: #5C5C5CFF; /** Gray color of level 400. */
+  --pgn-color-gray-600: #8F8F8FFF; /** Gray color of level 600. */
+  --pgn-color-gray-700: #ADADADFF; /** Gray color of level 700. */
+  --pgn-color-gray-800: #CCCCCCFF; /** Gray color of level 800. */
+  --pgn-color-gray-900: #EBEBEBFF; /** Gray color of level 900. */
+  --pgn-color-gray-base: #707070FF; /** Basic gray color. */
+  --pgn-color-primary-base: #0A3055FF; /** Basic primary color. */
+  --pgn-color-brand-base: #9D0054FF; /** Basic brand color. */
+  --pgn-color-light-base: #E1DDDBFF; /** Basic light color. */
+  --pgn-color-dark-base: #273F2FFF; /** Basic dark color. */
+  --pgn-border-color-nav-tabs-link-border-hover-top: transparent;
+  --pgn-border-color-nav-tabs-link-border-hover-right: transparent;
+  --pgn-border-color-nav-tabs-link-border-hover-left: transparent;
+  --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
+  --pgn-elevation-close-button-text-shadow-color: var(--pgn-color-white);
+  --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base);
+  --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
+  --pgn-elevation-form-control-select-border-focus-spread: var(--pgn-size-input-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-primary-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-secondary-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-brand-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-success-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-success-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-warning-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-danger-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-light-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-light-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-dark-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-black-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-black-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-pagination-focus-box-shadow-spread: var(--pgn-size-input-btn-focus-width);
+  --pgn-elevation-scrollable-body-box-shadow: #0000008C;
+  --pgn-elevation-input-btn-focus-box-shadow-spread: var(--pgn-size-input-btn-focus-width);
+  --pgn-color-bg-base: var(--pgn-color-gray-100); /** Basic background color. */
+  --pgn-color-text-50-black: #00000080; /** Black text color with transparency of 50%. */
+  --pgn-color-text-50-white: #FFFFFF80; /** White text color with transparency of 50%. */
+  --pgn-color-active: var(--pgn-color-white); /** Color for active element. */
+  --pgn-color-border: var(--pgn-color-gray-300); /** Border color. */
+  --pgn-color-theme-bg-gray: var(--pgn-color-gray-100); /** Theme-specific gray background color. */
+  --pgn-color-theme-border-gray: var(--pgn-color-gray-200); /** Theme-specific gray border color. */
+  --pgn-color-theme-hover-gray: var(--pgn-color-gray-700); /** Theme-specific gray hover color. */
+  --pgn-color-theme-active-gray: var(--pgn-color-gray-900); /** Theme-specific gray active color. */
+  --pgn-color-alert-title: var(--pgn-color-gray-900);
+  --pgn-color-alert-content: var(--pgn-color-gray-700);
+  --pgn-color-annotation-text-success: var(--pgn-color-white);
+  --pgn-color-annotation-text-warning: var(--pgn-color-black);
+  --pgn-color-annotation-text-error: var(--pgn-color-white);
+  --pgn-color-annotation-text-dark: var(--pgn-color-white);
+  --pgn-color-annotation-bg-warning: var(--pgn-color-accent-b);
+  --pgn-color-annotation-bg-light: var(--pgn-color-white);
+  --pgn-color-annotation-bg-dark: var(--pgn-color-dark-base);
+  --pgn-color-badge-text-primary: #FFFFFFFF;
+  --pgn-color-badge-text-light: #454545FF;
+  --pgn-color-badge-text-dark: #FFFFFFFF;
+  --pgn-color-badge-bg-primary: var(--pgn-color-primary-base);
+  --pgn-color-badge-bg-light: var(--pgn-color-light-base);
+  --pgn-color-badge-bg-dark: var(--pgn-color-dark-base);
+  --pgn-color-breadcrumb-active: var(--pgn-color-gray-700);
+  --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white);
+  --pgn-color-bubble-text-primary: #FFFFFFFF;
+  --pgn-color-bubble-bg-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-text-inverse-brand: var(--pgn-color-brand-base);
+  --pgn-color-btn-text-inverse-outline-brand: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-outline-danger: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-dark: var(--pgn-color-dark-base);
+  --pgn-color-btn-text-inverse-outline-dark: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-outline-info: var(--pgn-color-white);
+  --pgn-color-btn-text-outline-light: var(--pgn-color-light-base);
+  --pgn-color-btn-text-inverse-light: var(--pgn-color-light-base);
+  --pgn-color-btn-text-inverse-outline-light: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-text-inverse-outline-primary: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-outline-secondary: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-outline-success: var(--pgn-color-white);
+  --pgn-color-btn-text-tertiary: var(--pgn-color-gray-700);
+  --pgn-color-btn-text-inverse-tertiary: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-outline-warning: var(--pgn-color-white);
+  --pgn-color-btn-bg-brand: var(--pgn-color-brand-base);
+  --pgn-color-btn-bg-dark: var(--pgn-color-dark-base);
+  --pgn-color-btn-bg-light: var(--pgn-color-light-base);
+  --pgn-color-btn-bg-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-border-inverse-outline-brand: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-outline-danger: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-outline-dark: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-outline-info: var(--pgn-color-white);
+  --pgn-color-btn-border-outline-light: var(--pgn-color-light-base);
+  --pgn-color-btn-border-inverse-outline-light: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-outline-primary: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-outline-secondary: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-outline-success: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-outline-warning: var(--pgn-color-white);
+  --pgn-color-btn-hover-text-tertiary: var(--pgn-color-gray-700);
+  --pgn-color-btn-hover-text-inverse-tertiary: var(--pgn-color-white);
+  --pgn-color-btn-hover-bg-tertiary: var(--pgn-color-gray-200);
+  --pgn-color-btn-hover-bg-inverse-tertiary: #FFFFFF1A;
+  --pgn-color-btn-active-text-tertiary: var(--pgn-color-gray-700);
+  --pgn-color-btn-active-text-inverse-tertiary: var(--pgn-color-white);
+  --pgn-color-btn-active-bg-inverse-brand: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-danger: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-dark: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-info: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-light: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-primary: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-secondary: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-success: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-tertiary: var(--pgn-color-gray-200);
+  --pgn-color-btn-active-bg-inverse-warning: var(--pgn-color-gray-100);
+  --pgn-color-btn-focus-border-inverse-brand: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-danger: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-outline-danger: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-dark: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-outline-dark: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-info: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-light: var(--pgn-color-btn-border-inverse-light);
+  --pgn-color-btn-focus-border-inverse-primary: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-secondary: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-outline-secondary: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-success: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-tertiary: var(--pgn-color-btn-border-tertiary);
+  --pgn-color-btn-focus-border-inverse-warning: var(--pgn-color-btn-border-inverse-warning);
+  --pgn-color-btn-focus-outline-inverse-light: var(--pgn-color-white);
+  --pgn-color-btn-focus-outline-inverse-secondary: var(--pgn-color-white);
+  --pgn-color-btn-focus-outline-inverse-tertiary: var(--pgn-color-white);
+  --pgn-color-btn-focus-outline-inverse-warning: var(--pgn-color-white);
+  --pgn-color-btn-disabled-bg-inverse-brand: var(--pgn-color-white);
+  --pgn-color-btn-disabled-bg-inverse-outline-brand: var(--pgn-color-btn-bg-inverse-outline-brand);
+  --pgn-color-btn-disabled-bg-inverse-primary: var(--pgn-color-white);
+  --pgn-color-btn-disabled-border-inverse-secondary: var(--pgn-color-btn-border-inverse-secondary);
+  --pgn-color-btn-disabled-border-tertiary: var(--pgn-color-btn-border-tertiary);
+  --pgn-color-btn-disabled-border-inverse-tertiary: var(--pgn-color-btn-border-inverse-tertiary);
+  --pgn-color-card-border-base: #FFFFFF20;
+  --pgn-color-card-divider-bg: var(--pgn-color-gray-300);
+  --pgn-color-carousel-control-base: var(--pgn-color-white);
+  --pgn-color-carousel-indicator-active-bg: var(--pgn-color-white);
+  --pgn-color-carousel-caption: var(--pgn-color-white);
+  --pgn-color-chip-text-light: var(--pgn-color-black);
+  --pgn-color-chip-text-dark: var(--pgn-color-white);
+  --pgn-color-chip-bg-light: var(--pgn-color-white);
+  --pgn-color-chip-outline-dark: var(--pgn-color-white);
+  --pgn-color-close-button: var(--pgn-color-black);
+  --pgn-color-code-kbd-base: var(--pgn-color-white);
+  --pgn-color-code-kbd-bg: var(--pgn-color-gray-700);
+  --pgn-color-code-pre: var(--pgn-color-gray-900);
+  --pgn-color-data-table-bg-header: var(--pgn-color-gray-200);
+  --pgn-color-data-table-bg-striped: var(--pgn-color-gray-200);
+  --pgn-color-dropdown-border: #FFFFFF26;
+  --pgn-color-dropdown-divider-bg: var(--pgn-color-gray-300);
+  --pgn-color-dropdown-link-base: var(--pgn-color-gray-900);
+  --pgn-color-dropdown-link-hover-base: var(--pgn-color-gray-900);
+  --pgn-color-dropdown-link-hover-bg: var(--pgn-color-gray-200);
+  --pgn-color-dropzone-restriction-msg: var(--pgn-color-gray-600);
+  --pgn-color-form-input-base: var(--pgn-color-gray-700);
+  --pgn-color-form-input-bg-disabled: var(--pgn-color-gray-100);
+  --pgn-color-form-input-group-addon-bg: var(--pgn-color-gray-100);
+  --pgn-color-form-control-indicator-border: var(--pgn-color-gray-700);
+  --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580;
+  --pgn-color-form-control-select-bg-disabled: var(--pgn-color-gray-100);
+  --pgn-color-form-control-select-bg-size: var(--pgn-color-gray-100);
+  --pgn-color-form-control-range-track-bg: var(--pgn-color-gray-300);
+  --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-primary-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-secondary-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-secondary-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-secondary-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-secondary-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-hover: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-bg-brand-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-active-base: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-bg-success-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-success-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-success-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-success-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-warning-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-warning-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-warning-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-warning-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-danger-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-danger-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-danger-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-danger-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-hover: var(--pgn-color-light-base);
+  --pgn-color-icon-button-bg-light-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-active-base: var(--pgn-color-light-base);
+  --pgn-color-icon-button-bg-dark-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-dark-hover: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-bg-dark-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-dark-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-dark-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-dark-active-base: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-bg-black-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-black-hover: var(--pgn-color-black);
+  --pgn-color-icon-button-bg-black-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-black-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-black-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-black-active-base: var(--pgn-color-black);
+  --pgn-color-icon-button-text-brand-inverse-hover: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-text-brand-inverse-active-base: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-text-light-base: var(--pgn-color-light-base);
+  --pgn-color-icon-button-text-light-inverse-hover: var(--pgn-color-light-base);
+  --pgn-color-icon-button-text-light-inverse-active-base: var(--pgn-color-light-base);
+  --pgn-color-icon-button-text-dark-inverse-hover: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-text-dark-inverse-active-base: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-text-black-base: var(--pgn-color-black);
+  --pgn-color-icon-button-text-black-inverse-hover: var(--pgn-color-black);
+  --pgn-color-icon-button-text-black-inverse-active-base: var(--pgn-color-black);
+  --pgn-color-icon-button-accent: var(--pgn-color-white);
+  --pgn-color-icon-button-black: var(--pgn-color-black);
+  --pgn-color-image-thumbnail-border: var(--pgn-color-gray-200);
+  --pgn-color-menu-item-border: var(--pgn-color-menu-item-bg);
+  --pgn-color-menu-item-hover-border: var(--pgn-color-menu-item-bg);
+  --pgn-color-menu-item-focus-bg: var(--pgn-color-gray-200);
+  --pgn-color-modal-content-border: #FFFFFF33;
+  --pgn-color-modal-content-scroll-shadow-from: var(--pgn-color-white);
+  --pgn-color-modal-content-scroll-shadow-to: var(--pgn-color-gray-800);
+  --pgn-color-modal-backdrop-bg: var(--pgn-color-black);
+  --pgn-color-nav-link-text-base: var(--pgn-color-gray-700);
+  --pgn-color-nav-link-text-disabled: var(--pgn-color-gray-300);
+  --pgn-color-nav-tabs-base-text-disabled: var(--pgn-color-nav-tabs-base-bg-hover);
+  --pgn-color-nav-tabs-base-border-focus: var(--pgn-color-nav-tabs-base-bg-hover);
+  --pgn-color-nav-tabs-base-link-hover-bg: var(--pgn-color-gray-200);
+  --pgn-color-nav-tabs-base-link-disabled-border: var(--pgn-color-nav-link-border);
+  --pgn-color-nav-tabs-inverse-link-text-base: var(--pgn-color-white);
+  --pgn-color-nav-tabs-inverse-dropdown-border: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover);
+  --pgn-color-nav-pills-base-link-active-border: var(--pgn-color-white);
+  --pgn-color-nav-pills-inverse-link-text-base: var(--pgn-color-white);
+  --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-primary-base);
+  --pgn-color-nav-divider: var(--pgn-color-gray-100);
+  --pgn-color-nav-dark: #FFFFFF80;
+  --pgn-color-nav-light: #00000080;
+  --pgn-color-navbar-dark-text: #FFFFFF80;
+  --pgn-color-navbar-dark-hover: #FFFFFFBF;
+  --pgn-color-navbar-dark-disabled: #FFFFFF40;
+  --pgn-color-navbar-dark-toggler-border: #FFFFFF1A;
+  --pgn-color-navbar-light-text: #00000080;
+  --pgn-color-navbar-light-hover: #000000B3;
+  --pgn-color-navbar-light-active: #000000E6;
+  --pgn-color-navbar-light-disabled: #0000004D;
+  --pgn-color-navbar-light-toggler-border: #0000001A;
+  --pgn-color-page-banner-bg-accent-a: var(--pgn-color-accent-a);
+  --pgn-color-page-banner-bg-accent-b: var(--pgn-color-accent-b);
+  --pgn-color-page-banner-text-dark: var(--pgn-color-white);
+  --pgn-color-page-banner-text-light: var(--pgn-color-black);
+  --pgn-color-page-banner-text-accent-a: var(--pgn-color-black);
+  --pgn-color-page-banner-text-accent-b: var(--pgn-color-black);
+  --pgn-color-page-banner-text-warning: var(--pgn-color-white);
+  --pgn-color-pagination-text-inverse: var(--pgn-color-white);
+  --pgn-color-pagination-bg-hover: var(--pgn-color-gray-100);
+  --pgn-color-pagination-bg-disabled: var(--pgn-color-white);
+  --pgn-color-pagination-border-base: var(--pgn-color-gray-200);
+  --pgn-color-pagination-border-hover: var(--pgn-color-gray-200);
+  --pgn-color-pagination-border-disabled: var(--pgn-color-gray-100);
+  --pgn-color-pagination-focus-text: var(--pgn-color-black);
+  --pgn-color-pagination-dropdown-text-inverse: var(--pgn-color-white);
+  --pgn-color-popover-header-bg-dark: #808080FF;
+  --pgn-color-popover-header-border-bottom-dark: #F2F2F2FF;
+  --pgn-color-popover-arrow-outer: #FFFFFF0D;
+  --pgn-color-product-tour-checkpoint-bg: var(--pgn-color-gray-200);
+  --pgn-color-product-tour-checkpoint-body: var(--pgn-color-gray-700);
+  --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-base);
+  --pgn-color-product-tour-checkpoint-box-shadow: #0000004D;
+  --pgn-color-progress-bar-base: #414141FF;
+  --pgn-color-progress-bar-bg-base: var(--pgn-color-accent-a);
+  --pgn-color-search-field-border-interaction: var(--pgn-color-white);
+  --pgn-color-search-field-border-focus: var(--pgn-color-white);
+  --pgn-color-sheet-skrim-bg: #45454580;
+  --pgn-color-sheet-skrim-component-box-shadow: #00000026;
+  --pgn-color-stepper-header-bg-line: var(--pgn-color-light-base);
+  --pgn-color-stepper-header-step-bg-base: var(--pgn-color-stepper-header-bg-base);
+  --pgn-color-tab-more-link-dropdown-toggle-text-focus: var(--pgn-color-white);
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus: var(--pgn-color-white);
+  --pgn-color-toast-bg: var(--pgn-color-gray-200);
+  --pgn-color-toast-border: #FFFFFF1A;
+  --pgn-color-toast-header-text: var(--pgn-color-white);
+  --pgn-color-toast-header-bg: var(--pgn-color-gray-200);
+  --pgn-color-toast-header-border: #FFFFFF80;
+  --pgn-color-tooltip-text: var(--pgn-color-white);
+  --pgn-color-tooltip-light: var(--pgn-color-black);
+  --pgn-color-tooltip-bg-base: var(--pgn-color-black);
+  --pgn-color-tooltip-bg-light: var(--pgn-color-white);
+  --pgn-color-tooltip-arrow-light: var(--pgn-color-white);
+  --pgn-color-body-base: var(--pgn-color-gray-700);
+  --pgn-color-headings-base: var(--pgn-color-gray-900);
+  --pgn-color-hr-border: #FFFFFF1A;
+  --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100);
+  --pgn-color-list-group-border: #FFFFFF20;
+  --pgn-color-list-group-disabled-base: var(--pgn-color-gray-600);
+  --pgn-color-list-group-action-base: var(--pgn-color-gray-700);
+  --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200);
+  --pgn-color-text-muted: var(--pgn-color-gray-600);
+  --pgn-color-blockquote-small: var(--pgn-color-gray-600);
+  --pgn-color-yiq-light: var(--pgn-color-white);
+  --pgn-color-gray-500: var(--pgn-color-gray-base); /** Gray color of level 500. */
+  --pgn-color-primary-100: #010305FF; /** Primary color of level 100. */
+  --pgn-color-primary-200: #030C15FF; /** Primary color of level 200. */
+  --pgn-color-primary-300: #05182BFF; /** Primary color of level 300. */
+  --pgn-color-primary-400: #082440FF; /** Primary color of level 400. */
+  --pgn-color-primary-500: var(--pgn-color-primary-base); /** Primary color of level 500. */
+  --pgn-color-primary-600: #234566FF; /** Primary color of level 600. */
+  --pgn-color-primary-700: #3B5977FF; /** Primary color of level 700. */
+  --pgn-color-primary-800: #476480FF; /** Primary color of level 800. */
+  --pgn-color-primary-900: #546E88FF; /** Primary color of level 900. */
+  --pgn-color-secondary-base: var(--pgn-color-gray-700); /** Basic secondary color. */
+  --pgn-color-brand-100: #090005FF; /** Brand color of level 100. */
+  --pgn-color-brand-200: #270015FF; /** Brand color of level 200. */
+  --pgn-color-brand-300: #4F002AFF; /** Brand color of level 300. */
+  --pgn-color-brand-400: #76003FFF; /** Brand color of level 400. */
+  --pgn-color-brand-500: var(--pgn-color-brand-base); /** Brand color of level 500. */
+  --pgn-color-brand-600: #A71A65FF; /** Brand color of level 600. */
+  --pgn-color-brand-700: #B13376FF; /** Brand color of level 700. */
+  --pgn-color-brand-800: #B6407FFF; /** Brand color of level 800. */
+  --pgn-color-brand-900: #BA4D87FF; /** Brand color of level 900. */
+  --pgn-color-success-base: var(--pgn-color-green); /** Basic success color. */
+  --pgn-color-info-base: var(--pgn-color-teal); /** Basic info color. */
+  --pgn-color-warning-base: var(--pgn-color-yellow); /** Basic warning color. */
+  --pgn-color-danger-base: var(--pgn-color-red); /** Basic danger color. */
+  --pgn-color-light-100: #0E0D0DFF; /** Light color of level 100. */
+  --pgn-color-light-200: #383737FF; /** Light color of level 200. */
+  --pgn-color-light-300: #716F6EFF; /** Light color of level 300. */
+  --pgn-color-light-400: #A9A6A4FF; /** Light color of level 400. */
+  --pgn-color-light-500: var(--pgn-color-light-base); /** Light color of level 500. */
+  --pgn-color-light-600: #E4E0DFFF; /** Light color of level 600. */
+  --pgn-color-light-700: #E7E4E2FF; /** Light color of level 700. */
+  --pgn-color-light-800: #E9E6E4FF; /** Light color of level 800. */
+  --pgn-color-light-900: #EAE7E6FF; /** Light color of level 900. */
+  --pgn-color-dark-100: #020403FF; /** Dark color of level 100. */
+  --pgn-color-dark-200: #0A100CFF; /** Dark color of level 200. */
+  --pgn-color-dark-300: #142018FF; /** Dark color of level 300. */
+  --pgn-color-dark-400: #1D2F23FF; /** Dark color of level 400. */
+  --pgn-color-dark-500: var(--pgn-color-dark-base); /** Dark color of level 500. */
+  --pgn-color-dark-600: #3D5244FF; /** Dark color of level 600. */
+  --pgn-color-dark-700: #526559FF; /** Info color of level 700. */
+  --pgn-color-dark-800: #5D6F63FF; /** Dark color of level 800. */
+  --pgn-color-dark-900: #68796DFF; /** Dark color of level 900. */
+  --pgn-color-action-default-gray-100: #000000FF;
+  --pgn-color-action-default-gray-200: #000000FF;
+  --pgn-color-action-default-gray-300: #000000FF;
+  --pgn-color-action-default-gray-400: #000000FF;
+  --pgn-color-action-default-gray-600: #000000FF;
+  --pgn-color-action-default-gray-700: #000000FF;
+  --pgn-color-action-default-gray-800: #000000FF;
+  --pgn-color-action-default-gray-900: #000000FF;
+  --pgn-color-action-default-gray-base: #000000FF;
+  --pgn-color-action-default-primary-base: #000000FF;
+  --pgn-color-action-default-brand-base: #000000FF;
+  --pgn-color-action-default-light-base: #000000FF;
+  --pgn-color-action-default-dark-base: #000000FF;
+  --pgn-color-action-default-accent-a: #000000FF;
+  --pgn-color-action-default-accent-b: #000000FF;
+  --pgn-elevation-dropzone-active-color: var(--pgn-color-primary-500);
+  --pgn-elevation-form-input-focus-color: var(--pgn-color-primary-500);
+  --pgn-elevation-form-control-file-focus-color: var(--pgn-color-primary-500);
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-success-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-light-base-color: var(--pgn-color-icon-button-text-light-base);
+  --pgn-elevation-icon-button-box-shadow-light-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-black-base-color: var(--pgn-color-icon-button-text-black-base);
+  --pgn-elevation-icon-button-box-shadow-black-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-other-content-form-control-select-bg-offset-y: var(--pgn-spacing-form-input-padding-y-base);
+  --pgn-color-bg-active: #607891FF; /** Active background color. */
+  --pgn-color-disabled: var(--pgn-color-gray-500); /** Color for disabled element. */
+  --pgn-color-input-focus: var(--pgn-color-primary-500); /** Focused input value color. */
+  --pgn-color-table-caption: var(--pgn-color-text-muted); /** Table caption color. */
+  --pgn-color-table-border: var(--pgn-color-border); /** Table border color. */
+  --pgn-color-theme-bg-primary: var(--pgn-color-primary-100); /** Theme-specific primary background color. */
+  --pgn-color-theme-bg-brand: var(--pgn-color-brand-100); /** Theme-specific brand background color. */
+  --pgn-color-theme-bg-light: var(--pgn-color-light-100); /** Theme-specific light background color. */
+  --pgn-color-theme-bg-dark: var(--pgn-color-dark-100); /** Theme-specific dark background color. */
+  --pgn-color-theme-border-primary: var(--pgn-color-primary-200); /** Theme-specific primary border color. */
+  --pgn-color-theme-border-brand: var(--pgn-color-brand-200); /** Theme-specific brand border color. */
+  --pgn-color-theme-border-light: var(--pgn-color-light-200); /** Theme-specific light border color. */
+  --pgn-color-theme-border-dark: var(--pgn-color-dark-200); /** Theme-specific dark border color. */
+  --pgn-color-theme-focus-primary: var(--pgn-color-primary-500); /** Theme-specific primary focus color. */
+  --pgn-color-theme-focus-brand: var(--pgn-color-brand-500); /** Theme-specific brand focus color. */
+  --pgn-color-theme-focus-light: var(--pgn-color-light-500); /** Theme-specific light focus color. */
+  --pgn-color-theme-focus-dark: var(--pgn-color-dark-500); /** Theme-specific dark focus color. */
+  --pgn-color-theme-focus-gray: var(--pgn-color-gray-500); /** Theme-specific gray focus color. */
+  --pgn-color-theme-default-primary: #9DACBBFF; /** Theme-specific primary default color. */
+  --pgn-color-theme-default-brand: #D38CB2FF; /** Theme-specific brand default color. */
+  --pgn-color-theme-default-light: var(--pgn-color-light-500); /** Theme-specific light default color. */
+  --pgn-color-theme-default-dark: #A9B2ACFF; /** Theme-specific dark default color. */
+  --pgn-color-theme-default-gray: var(--pgn-color-gray-500); /** Theme-specific gray default color. */
+  --pgn-color-theme-hover-primary: var(--pgn-color-primary-700); /** Theme-specific primary hover color. */
+  --pgn-color-theme-hover-brand: var(--pgn-color-brand-700); /** Theme-specific brand hover color. */
+  --pgn-color-theme-hover-light: var(--pgn-color-light-700); /** Theme-specific light hover color. */
+  --pgn-color-theme-hover-dark: var(--pgn-color-dark-700); /** Theme-specific dark hover color. */
+  --pgn-color-theme-active-primary: var(--pgn-color-primary-900); /** Theme-specific primary active color. */
+  --pgn-color-theme-active-brand: var(--pgn-color-brand-900); /** Theme-specific brand active color. */
+  --pgn-color-theme-active-light: var(--pgn-color-light-900); /** Theme-specific light active color. */
+  --pgn-color-theme-active-dark: var(--pgn-color-dark-900); /** Theme-specific dark active color. */
+  --pgn-color-annotation-text-light: var(--pgn-color-primary-500);
+  --pgn-color-annotation-bg-success: var(--pgn-color-success-base);
+  --pgn-color-annotation-bg-error: var(--pgn-color-danger-base);
+  --pgn-color-avatar-border: var(--pgn-color-light-300);
+  --pgn-color-badge-text-secondary: #414141FF;
+  --pgn-color-badge-text-success: #FFFFFFFF;
+  --pgn-color-badge-text-danger: #FFFFFFFF;
+  --pgn-color-badge-text-warning: #454545FF;
+  --pgn-color-badge-text-info: #FFFFFFFF;
+  --pgn-color-badge-bg-secondary: var(--pgn-color-secondary-base);
+  --pgn-color-badge-bg-success: var(--pgn-color-success-base);
+  --pgn-color-badge-bg-warning: var(--pgn-color-warning-base);
+  --pgn-color-badge-bg-danger: var(--pgn-color-danger-base);
+  --pgn-color-badge-bg-info: var(--pgn-color-info-base);
+  --pgn-color-badge-focus-primary: var(--pgn-color-badge-text-primary);
+  --pgn-color-badge-focus-light: var(--pgn-color-badge-text-light);
+  --pgn-color-badge-focus-dark: var(--pgn-color-badge-text-dark);
+  --pgn-color-badge-focus-bg-primary: #051627FF;
+  --pgn-color-badge-focus-bg-light: #CAC3BFFF;
+  --pgn-color-badge-focus-bg-dark: #142018FF;
+  --pgn-color-badge-focus-box-shadow-primary: #0A30550D;
+  --pgn-color-badge-focus-box-shadow-light: #E1DDDB0D;
+  --pgn-color-badge-focus-box-shadow-dark: #273F2F0D;
+  --pgn-color-breadcrumb-inverse-active: var(--pgn-color-light-500);
+  --pgn-color-breadcrumb-inverse-spacer: var(--pgn-color-light-700);
+  --pgn-color-bubble-text-success: #FFFFFFFF;
+  --pgn-color-bubble-text-warning: #454545FF;
+  --pgn-color-bubble-text-error: #FFFFFFFF;
+  --pgn-color-bubble-bg-success: var(--pgn-color-success-base);
+  --pgn-color-bubble-bg-warning: var(--pgn-color-warning-base);
+  --pgn-color-bubble-bg-error: var(--pgn-color-danger-base);
+  --pgn-color-btn-text-brand: #FFFFFFFF;
+  --pgn-color-btn-text-inverse-danger: var(--pgn-color-danger-base);
+  --pgn-color-btn-text-dark: #FFFFFFFF;
+  --pgn-color-btn-text-inverse-info: var(--pgn-color-info-base);
+  --pgn-color-btn-text-light: #454545FF;
+  --pgn-color-btn-text-primary: #FFFFFFFF;
+  --pgn-color-btn-text-outline-secondary: var(--pgn-color-secondary-base);
+  --pgn-color-btn-text-inverse-secondary: var(--pgn-color-secondary-base);
+  --pgn-color-btn-text-inverse-success: var(--pgn-color-success-base);
+  --pgn-color-btn-text-outline-warning: var(--pgn-color-warning-base);
+  --pgn-color-btn-text-inverse-warning: var(--pgn-color-warning-base);
+  --pgn-color-btn-bg-inverse-brand: #FFFFFFFF;
+  --pgn-color-btn-bg-danger: var(--pgn-color-danger-base);
+  --pgn-color-btn-bg-inverse-dark: #FFFFFFFF;
+  --pgn-color-btn-bg-info: var(--pgn-color-info-base);
+  --pgn-color-btn-bg-inverse-light: #454545FF;
+  --pgn-color-btn-bg-inverse-primary: #FFFFFFFF;
+  --pgn-color-btn-bg-secondary: var(--pgn-color-secondary-base);
+  --pgn-color-btn-bg-success: var(--pgn-color-success-base);
+  --pgn-color-btn-bg-warning: var(--pgn-color-warning-base);
+  --pgn-color-btn-border-brand: var(--pgn-color-btn-bg-brand);
+  --pgn-color-btn-border-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-border-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-border-primary: var(--pgn-color-btn-bg-primary);
+  --pgn-color-btn-border-outline-secondary: var(--pgn-color-secondary-base);
+  --pgn-color-btn-border-outline-warning: var(--pgn-color-warning-base);
+  --pgn-color-btn-hover-text-inverse-brand: #770040FF;
+  --pgn-color-btn-hover-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
+  --pgn-color-btn-hover-text-inverse-dark: #18271DFF;
+  --pgn-color-btn-hover-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark);
+  --pgn-color-btn-hover-text-inverse-light: #D0C9C6FF;
+  --pgn-color-btn-hover-text-inverse-primary: #061D33FF;
+  --pgn-color-btn-hover-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
+  --pgn-color-btn-hover-bg-outline-brand: var(--pgn-color-brand-100);
+  --pgn-color-btn-hover-bg-inverse-outline-brand: var(--pgn-color-brand-100);
+  --pgn-color-btn-hover-bg-outline-dark: var(--pgn-color-dark-100);
+  --pgn-color-btn-hover-bg-inverse-outline-dark: var(--pgn-color-dark-100);
+  --pgn-color-btn-hover-bg-outline-light: var(--pgn-color-light-100);
+  --pgn-color-btn-hover-bg-inverse-outline-light: var(--pgn-color-light-100);
+  --pgn-color-btn-hover-bg-outline-primary: var(--pgn-color-primary-100);
+  --pgn-color-btn-hover-bg-inverse-outline-primary: var(--pgn-color-primary-100);
+  --pgn-color-btn-hover-border-outline-brand: var(--pgn-color-brand-900);
+  --pgn-color-btn-hover-border-outline-dark: var(--pgn-color-dark-900);
+  --pgn-color-btn-hover-border-outline-light: var(--pgn-color-light-900);
+  --pgn-color-btn-hover-border-outline-primary: var(--pgn-color-primary-900);
+  --pgn-color-btn-active-text-inverse-brand: #6A0039FF;
+  --pgn-color-btn-active-text-inverse-dark: #142018FF;
+  --pgn-color-btn-active-text-inverse-light: #CAC3BFFF;
+  --pgn-color-btn-active-text-inverse-primary: #051627FF;
+  --pgn-color-btn-active-bg-inverse-tertiary: var(--pgn-color-btn-hover-bg-inverse-tertiary);
+  --pgn-color-btn-focus-text-inverse-brand: var(--pgn-color-btn-text-inverse-brand);
+  --pgn-color-btn-focus-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
+  --pgn-color-btn-focus-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger);
+  --pgn-color-btn-focus-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark);
+  --pgn-color-btn-focus-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark);
+  --pgn-color-btn-focus-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info);
+  --pgn-color-btn-focus-text-outline-light: var(--pgn-color-btn-text-outline-light);
+  --pgn-color-btn-focus-text-inverse-light: var(--pgn-color-btn-text-inverse-light);
+  --pgn-color-btn-focus-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light);
+  --pgn-color-btn-focus-text-inverse-primary: var(--pgn-color-btn-text-inverse-primary);
+  --pgn-color-btn-focus-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
+  --pgn-color-btn-focus-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary);
+  --pgn-color-btn-focus-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success);
+  --pgn-color-btn-focus-text-tertiary: var(--pgn-color-btn-text-tertiary);
+  --pgn-color-btn-focus-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary);
+  --pgn-color-btn-focus-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning);
+  --pgn-color-btn-focus-border-inverse-outline-brand: var(--pgn-color-btn-border-inverse-outline-brand);
+  --pgn-color-btn-focus-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info);
+  --pgn-color-btn-focus-border-outline-light: var(--pgn-color-btn-border-outline-light);
+  --pgn-color-btn-focus-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light);
+  --pgn-color-btn-focus-border-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary);
+  --pgn-color-btn-focus-border-inverse-outline-success: var(--pgn-color-btn-border-inverse-outline-success);
+  --pgn-color-btn-focus-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning);
+  --pgn-color-btn-focus-bg-brand: var(--pgn-color-btn-bg-brand);
+  --pgn-color-btn-focus-bg-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-focus-bg-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-focus-bg-primary: var(--pgn-color-btn-bg-primary);
+  --pgn-color-btn-focus-outline-inverse-brand: var(--pgn-color-btn-focus-border-inverse-brand);
+  --pgn-color-btn-focus-outline-inverse-danger: var(--pgn-color-btn-focus-border-inverse-danger);
+  --pgn-color-btn-focus-outline-inverse-outline-danger: var(--pgn-color-btn-focus-border-inverse-danger);
+  --pgn-color-btn-focus-outline-inverse-dark: var(--pgn-color-btn-focus-border-inverse-dark);
+  --pgn-color-btn-focus-outline-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark);
+  --pgn-color-btn-focus-outline-inverse-info: var(--pgn-color-btn-focus-border-inverse-info);
+  --pgn-color-btn-focus-outline-light: var(--pgn-color-primary-300);
+  --pgn-color-btn-focus-outline-inverse-primary: var(--pgn-color-btn-focus-border-inverse-primary);
+  --pgn-color-btn-focus-outline-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary);
+  --pgn-color-btn-focus-outline-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary);
+  --pgn-color-btn-focus-outline-inverse-success: var(--pgn-color-btn-focus-border-inverse-success);
+  --pgn-color-btn-disabled-text-inverse-brand: var(--pgn-color-brand-500);
+  --pgn-color-btn-disabled-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
+  --pgn-color-btn-disabled-text-inverse-danger: var(--pgn-color-danger-base);
+  --pgn-color-btn-disabled-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger);
+  --pgn-color-btn-disabled-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark);
+  --pgn-color-btn-disabled-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark);
+  --pgn-color-btn-disabled-text-inverse-info: var(--pgn-color-info-base);
+  --pgn-color-btn-disabled-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info);
+  --pgn-color-btn-disabled-text-inverse-light: var(--pgn-color-btn-text-inverse-light);
+  --pgn-color-btn-disabled-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light);
+  --pgn-color-btn-disabled-text-inverse-primary: var(--pgn-color-primary-500);
+  --pgn-color-btn-disabled-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
+  --pgn-color-btn-disabled-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary);
+  --pgn-color-btn-disabled-text-inverse-success: var(--pgn-color-success-base);
+  --pgn-color-btn-disabled-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success);
+  --pgn-color-btn-disabled-text-tertiary: var(--pgn-color-btn-text-tertiary);
+  --pgn-color-btn-disabled-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary);
+  --pgn-color-btn-disabled-text-inverse-warning: var(--pgn-color-warning-base);
+  --pgn-color-btn-disabled-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning);
+  --pgn-color-btn-disabled-bg-brand: var(--pgn-color-btn-bg-brand);
+  --pgn-color-btn-disabled-bg-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-disabled-bg-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-disabled-bg-primary: var(--pgn-color-btn-bg-primary);
+  --pgn-color-btn-disabled-border-inverse-brand: var(--pgn-color-btn-disabled-bg-inverse-brand);
+  --pgn-color-btn-disabled-border-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
+  --pgn-color-btn-disabled-border-inverse-outline-danger: var(--pgn-color-btn-border-inverse-outline-danger);
+  --pgn-color-btn-disabled-border-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark);
+  --pgn-color-btn-disabled-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info);
+  --pgn-color-btn-disabled-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light);
+  --pgn-color-btn-disabled-border-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
+  --pgn-color-btn-disabled-border-outline-secondary: var(--pgn-color-secondary-base);
+  --pgn-color-btn-disabled-border-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary);
+  --pgn-color-btn-disabled-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning);
+  --pgn-color-card-bg-base: var(--pgn-color-bg-base);
+  --pgn-color-card-bg-dark: var(--pgn-color-primary-500);
+  --pgn-color-card-bg-muted: var(--pgn-color-light-200);
+  --pgn-color-card-border-focus-base: var(--pgn-color-primary-500);
+  --pgn-color-chip-bg-dark: var(--pgn-color-primary-300);
+  --pgn-color-chip-border-base: var(--pgn-color-light-800);
+  --pgn-color-chip-border-focus-selected-dark: var(--pgn-color-chip-outline-dark);
+  --pgn-color-chip-border-focus-selected-light: var(--pgn-color-dark-500);
+  --pgn-color-chip-label-base: var(--pgn-color-primary-700);
+  --pgn-color-chip-label-dark: var(--pgn-color-chip-outline-dark);
+  --pgn-color-data-table-bg-base: var(--pgn-color-bg-base);
+  --pgn-color-data-table-bg-is-loading: #212529B3;
+  --pgn-color-data-table-border: var(--pgn-color-light-300);
+  --pgn-color-dropdown-text: var(--pgn-color-body-base);
+  --pgn-color-dropdown-header: var(--pgn-color-gray-500);
+  --pgn-color-dropdown-bg: var(--pgn-color-bg-base);
+  --pgn-color-dropdown-link-active-base: var(--pgn-color-active);
+  --pgn-color-dropzone-border-base: var(--pgn-color-gray-500);
+  --pgn-color-form-input-placeholder: var(--pgn-color-gray-500);
+  --pgn-color-form-input-plaintext: var(--pgn-color-body-base);
+  --pgn-color-form-input-border: var(--pgn-color-gray-500);
+  --pgn-color-form-input-bg-base: var(--pgn-color-bg-base);
+  --pgn-color-form-input-group-addon-base: var(--pgn-color-form-input-base);
+  --pgn-color-form-input-focus-base: var(--pgn-color-form-input-base);
+  --pgn-color-form-control-indicator-bg-disabled: var(--pgn-color-form-input-bg-disabled);
+  --pgn-color-form-control-indicator-active-base: var(--pgn-color-active);
+  --pgn-color-form-control-switch-indicator-checked-bg: var(--pgn-color-success-base);
+  --pgn-color-form-control-select-base: var(--pgn-color-form-input-base);
+  --pgn-color-form-control-select-indicator-base: var(--pgn-color-theme-hover-gray);
+  --pgn-color-form-control-file-base: var(--pgn-color-form-input-base);
+  --pgn-color-form-control-file-bg-disabled: var(--pgn-color-form-input-bg-disabled);
+  --pgn-color-form-control-file-button-bg: var(--pgn-color-form-input-group-addon-bg);
+  --pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-primary-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-primary-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-primary-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-secondary-hover: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-bg-secondary-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-secondary-active-base: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-bg-secondary-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-secondary-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-secondary-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-brand-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-brand-active-hover: var(--pgn-color-icon-button-bg-brand-active-base);
+  --pgn-color-icon-button-bg-brand-active-focus: var(--pgn-color-icon-button-bg-brand-active-base);
+  --pgn-color-icon-button-bg-brand-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-brand-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-brand-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-success-hover: var(--pgn-color-success-base);
+  --pgn-color-icon-button-bg-success-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-success-active-base: var(--pgn-color-success-base);
+  --pgn-color-icon-button-bg-success-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-success-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-success-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-warning-hover: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-bg-warning-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-warning-active-base: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-bg-warning-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-warning-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-warning-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-danger-hover: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-bg-danger-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-danger-active-base: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-bg-danger-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-danger-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-danger-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-light-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-light-active-hover: var(--pgn-color-icon-button-bg-light-active-base);
+  --pgn-color-icon-button-bg-light-active-focus: var(--pgn-color-icon-button-bg-light-active-base);
+  --pgn-color-icon-button-bg-light-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-light-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-light-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-dark-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-dark-active-hover: var(--pgn-color-icon-button-bg-dark-active-base);
+  --pgn-color-icon-button-bg-dark-active-focus: var(--pgn-color-icon-button-bg-dark-active-base);
+  --pgn-color-icon-button-bg-dark-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-dark-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-dark-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-black-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-black-active-hover: var(--pgn-color-icon-button-bg-black-active-base);
+  --pgn-color-icon-button-bg-black-active-focus: var(--pgn-color-icon-button-bg-black-active-base);
+  --pgn-color-icon-button-bg-black-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-black-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-black-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-base: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-text-secondary-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-inverse-hover: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-text-secondary-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-inverse-active-base: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-text-brand-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-inverse-active-hover: var(--pgn-color-icon-button-text-brand-inverse-active-base);
+  --pgn-color-icon-button-text-brand-inverse-active-focus: var(--pgn-color-icon-button-text-brand-inverse-active-base);
+  --pgn-color-icon-button-text-success-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-inverse-hover: var(--pgn-color-success-base);
+  --pgn-color-icon-button-text-success-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-inverse-active-base: var(--pgn-color-success-base);
+  --pgn-color-icon-button-text-warning-base: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-text-warning-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-inverse-hover: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-text-warning-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-inverse-active-base: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-text-danger-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-inverse-hover: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-text-danger-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-inverse-active-base: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-text-light-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-focus: var(--pgn-color-icon-button-text-light-base);
+  --pgn-color-icon-button-text-light-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-inverse-active-hover: var(--pgn-color-icon-button-text-light-inverse-active-base);
+  --pgn-color-icon-button-text-light-inverse-active-focus: var(--pgn-color-icon-button-text-light-inverse-active-base);
+  --pgn-color-icon-button-text-dark-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-inverse-active-hover: var(--pgn-color-icon-button-text-dark-inverse-active-base);
+  --pgn-color-icon-button-text-dark-inverse-active-focus: var(--pgn-color-icon-button-text-dark-inverse-active-base);
+  --pgn-color-icon-button-text-black-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-focus: var(--pgn-color-icon-button-text-black-base);
+  --pgn-color-icon-button-text-black-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-inverse-active-hover: var(--pgn-color-icon-button-text-black-inverse-active-base);
+  --pgn-color-icon-button-text-black-inverse-active-focus: var(--pgn-color-icon-button-text-black-inverse-active-base);
+  --pgn-color-image-figure-caption: var(--pgn-color-gray-500);
+  --pgn-color-menu-bg: var(--pgn-color-bg-base);
+  --pgn-color-menu-item-color: var(--pgn-color-body-base);
+  --pgn-color-menu-item-hover-color: var(--pgn-color-btn-hover-text-tertiary);
+  --pgn-color-menu-item-hover-bg: var(--pgn-color-btn-hover-bg-tertiary);
+  --pgn-color-modal-content-bg: var(--pgn-color-bg-base);
+  --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400);
+  --pgn-color-nav-tabs-inverse-link-border-bottom: var(--pgn-color-dark-300);
+  --pgn-color-nav-tabs-inverse-link-border-active: var(--pgn-color-nav-tabs-inverse-link-text-base);
+  --pgn-color-nav-tabs-inverse-link-bg-focus: var(--pgn-color-nav-tabs-inverse-link-text-base);
+  --pgn-color-nav-tabs-inverse-link-tab-content-color: var(--pgn-color-nav-tabs-inverse-link-text-base);
+  --pgn-color-nav-pills-base-link-active-text: var(--pgn-color-active);
+  --pgn-color-nav-pills-inverse-link-text-focus: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-nav-pills-inverse-link-text-active: var(--pgn-color-primary-500);
+  --pgn-color-nav-pills-inverse-link-text-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-nav-pills-inverse-link-text-active-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-nav-pills-inverse-link-border-base: var(--pgn-color-dark-300);
+  --pgn-color-nav-pills-inverse-link-border-active: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-nav-pills-inverse-link-border-focus-hover: var(--pgn-color-nav-pills-inverse-link-border-active-focus);
+  --pgn-color-nav-pills-inverse-link-bg-active: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-nav-pills-inverse-link-bg-active-focus-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-nav-pills-inverse-tab-content-color: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-navbar-dark-active: var(--pgn-color-active);
+  --pgn-color-navbar-light-brand-text: var(--pgn-color-navbar-light-active);
+  --pgn-color-navbar-light-brand-hover: var(--pgn-color-navbar-light-active);
+  --pgn-color-page-banner-bg-dark: var(--pgn-color-dark-500);
+  --pgn-color-page-banner-bg-light: var(--pgn-color-light-400);
+  --pgn-color-pagination-text-active: var(--pgn-color-active);
+  --pgn-color-pagination-bg-base: var(--pgn-color-bg-base);
+  --pgn-color-pagination-focus-base: var(--pgn-color-primary-500);
+  --pgn-color-popover-bg: var(--pgn-color-bg-base);
+  --pgn-color-popover-header-text: var(--pgn-color-headings-base);
+  --pgn-color-popover-header-bg: var(--pgn-color-bg-base);
+  --pgn-color-popover-body: var(--pgn-color-body-base);
+  --pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg);
+  --pgn-color-progress-bar-bg-annotated: var(--pgn-color-dark-500);
+  --pgn-color-progress-bar-border: var(--pgn-color-gray-500);
+  --pgn-color-search-field-border-base: var(--pgn-color-gray-500);
+  --pgn-color-search-field-button-bg-primary: var(--pgn-color-primary-500);
+  --pgn-color-search-field-button-bg-brand: var(--pgn-color-brand-500);
+  --pgn-color-search-field-form-bg: var(--pgn-color-bg-base);
+  --pgn-color-stepper-header-step-bg-active: var(--pgn-color-gray-500);
+  --pgn-color-stepper-header-step-bubble-error: var(--pgn-color-danger-base);
+  --pgn-color-tab-more-link-dropdown-toggle-btn-text-focus: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus);
+  --pgn-color-tab-more-link-dropdown-toggle-text-active: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus);
+  --pgn-color-tab-more-link-dropdown-toggle-bg-focus: var(--pgn-color-primary-500);
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus: var(--pgn-color-primary-500);
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover: var(--pgn-color-primary-300);
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
+  --pgn-color-tooltip-arrow-base: var(--pgn-color-tooltip-bg-base);
+  --pgn-color-body-bg: var(--pgn-color-bg-base);
+  --pgn-color-list-group-bg-base: var(--pgn-color-bg-base);
+  --pgn-color-list-group-active-base: var(--pgn-color-active);
+  --pgn-color-list-group-action-hover: var(--pgn-color-list-group-action-base);
+  --pgn-color-list-group-action-active-base: var(--pgn-color-body-base);
+  --pgn-color-secondary-100: #0A0A0AFF; /** Secondary color of level 100. */
+  --pgn-color-secondary-200: #2B2B2BFF; /** Secondary color of level 200. */
+  --pgn-color-secondary-300: #575757FF; /** Secondary color of level 300. */
+  --pgn-color-secondary-400: #828282FF; /** Secondary color of level 400. */
+  --pgn-color-secondary-500: var(--pgn-color-secondary-base); /** Secondary color of level 500. */
+  --pgn-color-secondary-600: #B5B5B5FF; /** Secondary color of level 600. */
+  --pgn-color-secondary-700: #BDBDBDFF; /** Secondary color of level 700. */
+  --pgn-color-secondary-800: #C2C2C2FF; /** Secondary color of level 800. */
+  --pgn-color-secondary-900: #C6C6C6FF; /** Secondary color of level 900. */
+  --pgn-color-success-100: #010805FF; /** Success color of level 100. */
+  --pgn-color-success-200: #062115FF; /** Success color of level 200. */
+  --pgn-color-success-300: #0C412AFF; /** Success color of level 300. */
+  --pgn-color-success-400: #11623EFF; /** Success color of level 400. */
+  --pgn-color-success-500: var(--pgn-color-success-base); /** Success color of level 500. */
+  --pgn-color-success-600: #2E8F64FF; /** Success color of level 600. */
+  --pgn-color-success-700: #459B75FF; /** Success color of level 700. */
+  --pgn-color-success-800: #51A17EFF; /** Success color of level 800. */
+  --pgn-color-success-900: #5DA887FF; /** Success color of level 900. */
+  --pgn-color-info-100: #00070AFF; /** Info color of level 100. */
+  --pgn-color-info-200: #001B2BFF; /** Info color of level 200. */
+  --pgn-color-info-300: #003755FF; /** Info color of level 300. */
+  --pgn-color-info-400: #005280FF; /** Info color of level 400. */
+  --pgn-color-info-500: var(--pgn-color-info-base); /** Info color of level 500. */
+  --pgn-color-info-600: #1A7CB3FF; /** Info color of level 600. */
+  --pgn-color-info-700: #338ABBFF; /** Info color of level 700. */
+  --pgn-color-info-800: #4092BFFF; /** Info color of level 800. */
+  --pgn-color-info-900: #4D99C4FF; /** Info color of level 900. */
+  --pgn-color-warning-100: #0F0D00FF; /** Warning color of level 100. */
+  --pgn-color-warning-200: #403600FF; /** Warning color of level 200. */
+  --pgn-color-warning-300: #806D00FF; /** Warning color of level 300. */
+  --pgn-color-warning-400: #BFA300FF; /** Warning color of level 400. */
+  --pgn-color-warning-500: var(--pgn-color-warning-base); /** Warning color of level 500. */
+  --pgn-color-warning-600: #FFDD1AFF; /** Warning color of level 600. */
+  --pgn-color-warning-700: #FFE133FF; /** Warning color of level 700. */
+  --pgn-color-warning-800: #FFE340FF; /** Warning color of level 800. */
+  --pgn-color-warning-900: #FFE44DFF; /** Warning color of level 900. */
+  --pgn-color-danger-100: #0C0303FF; /** Danger color of level 100. */
+  --pgn-color-danger-200: #310B0FFF; /** Danger color of level 200. */
+  --pgn-color-danger-300: #62171DFF; /** Danger color of level 300. */
+  --pgn-color-danger-400: #92222CFF; /** Danger color of level 400. */
+  --pgn-color-danger-500: var(--pgn-color-danger-base); /** Danger color of level 500. */
+  --pgn-color-danger-600: #C9424EFF; /** Danger color of level 600. */
+  --pgn-color-danger-700: #CF5761FF; /** Danger color of level 700. */
+  --pgn-color-danger-800: #D2626BFF; /** Danger color of level 800. */
+  --pgn-color-danger-900: #D56C75FF; /** Danger color of level 900. */
+  --pgn-color-action-default-gray-500: #000000FF;
+  --pgn-color-action-default-primary-100: #000000FF;
+  --pgn-color-action-default-primary-200: #000000FF;
+  --pgn-color-action-default-primary-300: #000000FF;
+  --pgn-color-action-default-primary-400: #000000FF;
+  --pgn-color-action-default-primary-500: #000000FF;
+  --pgn-color-action-default-primary-600: #000000FF;
+  --pgn-color-action-default-primary-700: #000000FF;
+  --pgn-color-action-default-primary-800: #000000FF;
+  --pgn-color-action-default-primary-900: #000000FF;
+  --pgn-color-action-default-secondary-base: #000000FF;
+  --pgn-color-action-default-brand-100: #000000FF;
+  --pgn-color-action-default-brand-200: #000000FF;
+  --pgn-color-action-default-brand-300: #000000FF;
+  --pgn-color-action-default-brand-400: #000000FF;
+  --pgn-color-action-default-brand-500: #000000FF;
+  --pgn-color-action-default-brand-600: #000000FF;
+  --pgn-color-action-default-brand-700: #000000FF;
+  --pgn-color-action-default-brand-800: #000000FF;
+  --pgn-color-action-default-brand-900: #000000FF;
+  --pgn-color-action-default-success-base: #000000FF;
+  --pgn-color-action-default-info-base: #000000FF;
+  --pgn-color-action-default-warning-base: #000000FF;
+  --pgn-color-action-default-danger-base: #000000FF;
+  --pgn-color-action-default-light-100: #000000FF;
+  --pgn-color-action-default-light-200: #000000FF;
+  --pgn-color-action-default-light-300: #000000FF;
+  --pgn-color-action-default-light-400: #000000FF;
+  --pgn-color-action-default-light-500: #000000FF;
+  --pgn-color-action-default-light-600: #000000FF;
+  --pgn-color-action-default-light-700: #000000FF;
+  --pgn-color-action-default-light-800: #000000FF;
+  --pgn-color-action-default-light-900: #000000FF;
+  --pgn-color-action-default-dark-100: #000000FF;
+  --pgn-color-action-default-dark-200: #000000FF;
+  --pgn-color-action-default-dark-300: #000000FF;
+  --pgn-color-action-default-dark-400: #000000FF;
+  --pgn-color-action-default-dark-500: #000000FF;
+  --pgn-color-action-default-dark-600: #000000FF;
+  --pgn-color-action-default-dark-700: #000000FF;
+  --pgn-color-action-default-dark-800: #000000FF;
+  --pgn-color-action-default-dark-900: #000000FF;
+  --pgn-content-carousel-control-bg-prev-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
+  --pgn-content-carousel-control-bg-next-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
+  --pgn-content-navbar-toggler-dark-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23FFFFFF80' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  --pgn-content-navbar-toggler-light-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2300000080' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  --pgn-elevation-dropzone-hover-color: var(--pgn-color-info-300);
+  --pgn-elevation-dropzone-focus-color: var(--pgn-color-info-300);
+  --pgn-elevation-dropzone-error-color: var(--pgn-color-danger-300);
+  --pgn-elevation-form-control-range-thumb-focus-color: var(--pgn-color-body-bg);
+  --pgn-elevation-icon-button-box-shadow-secondary-base-color: var(--pgn-color-icon-button-text-secondary-base);
+  --pgn-elevation-icon-button-box-shadow-warning-base-color: var(--pgn-color-icon-button-text-warning-base);
+  --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e");
+  --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="%23ADADADFF"/></svg>');
+  --pgn-color-input-btn-focus: var(--pgn-color-bg-active);
+  --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100); /** Theme-specific secondary background color. */
+  --pgn-color-theme-bg-success: var(--pgn-color-success-300); /** Theme-specific success background color. */
+  --pgn-color-theme-bg-info: var(--pgn-color-info-300); /** Theme-specific info background color. */
+  --pgn-color-theme-bg-warning: var(--pgn-color-warning-200); /** Theme-specific warning background color. */
+  --pgn-color-theme-bg-danger: var(--pgn-color-danger-300); /** Theme-specific danger background color. */
+  --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200); /** Theme-specific secondary border color. */
+  --pgn-color-theme-border-success: var(--pgn-color-success-200); /** Theme-specific success border color. */
+  --pgn-color-theme-border-info: var(--pgn-color-info-200); /** Theme-specific info border color. */
+  --pgn-color-theme-border-warning: var(--pgn-color-warning-200); /** Theme-specific warning border color. */
+  --pgn-color-theme-border-danger: var(--pgn-color-danger-200); /** Theme-specific danger border color. */
+  --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500); /** Theme-specific secondary focus color. */
+  --pgn-color-theme-focus-success: var(--pgn-color-success-500); /** Theme-specific success focus color. */
+  --pgn-color-theme-focus-info: var(--pgn-color-info-500); /** Theme-specific info focus color. */
+  --pgn-color-theme-focus-warning: var(--pgn-color-warning-500); /** Theme-specific warning focus color. */
+  --pgn-color-theme-focus-danger: var(--pgn-color-danger-500); /** Theme-specific danger focus color. */
+  --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500); /** Theme-specific secondary default color. */
+  --pgn-color-theme-default-success: #8BC1A9FF; /** Theme-specific success default color. */
+  --pgn-color-theme-default-info: #80B6D5FF; /** Theme-specific info default color. */
+  --pgn-color-theme-default-warning: var(--pgn-color-warning-500); /** Theme-specific warning default color. */
+  --pgn-color-theme-default-danger: #E1969DFF; /** Theme-specific danger default color. */
+  --pgn-color-theme-hover-secondary: var(--pgn-color-secondary-700); /** Theme-specific secondary hover color. */
+  --pgn-color-theme-hover-success: var(--pgn-color-success-700); /** Theme-specific success hover color. */
+  --pgn-color-theme-hover-info: var(--pgn-color-info-700); /** Theme-specific info hover color. */
+  --pgn-color-theme-hover-warning: var(--pgn-color-warning-700); /** Theme-specific warning hover color. */
+  --pgn-color-theme-hover-danger: var(--pgn-color-danger-700); /** Theme-specific danger hover color. */
+  --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900); /** Theme-specific secondary active color. */
+  --pgn-color-theme-active-success: var(--pgn-color-success-900); /** Theme-specific success active color. */
+  --pgn-color-theme-active-info: var(--pgn-color-info-900); /** Theme-specific info active color. */
+  --pgn-color-theme-active-warning: var(--pgn-color-warning-900); /** Theme-specific warning active color. */
+  --pgn-color-theme-active-danger: var(--pgn-color-danger-900); /** Theme-specific danger active color. */
+  --pgn-color-badge-focus-secondary: var(--pgn-color-badge-text-secondary);
+  --pgn-color-badge-focus-success: var(--pgn-color-badge-text-success);
+  --pgn-color-badge-focus-warning: var(--pgn-color-badge-text-warning);
+  --pgn-color-badge-focus-danger: var(--pgn-color-badge-text-danger);
+  --pgn-color-badge-focus-info: var(--pgn-color-badge-text-info);
+  --pgn-color-badge-focus-bg-secondary: #949494FF;
+  --pgn-color-badge-focus-bg-success: #0F5737FF;
+  --pgn-color-badge-focus-bg-danger: #9A232EFF;
+  --pgn-color-badge-focus-bg-warning: #CCAE00FF;
+  --pgn-color-badge-focus-bg-info: #004C77FF;
+  --pgn-color-badge-focus-box-shadow-secondary: #ADADAD0D;
+  --pgn-color-badge-focus-box-shadow-success: #1782530D;
+  --pgn-color-badge-focus-box-shadow-danger: #C32D3A0D;
+  --pgn-color-badge-focus-box-shadow-warning: #FFD9000D;
+  --pgn-color-badge-focus-box-shadow-info: #006DAA0D;
+  --pgn-color-breadcrumb-base: var(--pgn-color-theme-default-primary);
+  --pgn-color-btn-text-outline-brand: var(--pgn-color-theme-default-brand);
+  --pgn-color-btn-text-danger: #FFFFFFFF;
+  --pgn-color-btn-text-outline-dark: var(--pgn-color-theme-default-dark);
+  --pgn-color-btn-text-info: #FFFFFFFF;
+  --pgn-color-btn-text-outline-primary: var(--pgn-color-theme-default-primary);
+  --pgn-color-btn-text-secondary: #414141FF;
+  --pgn-color-btn-text-success: #FFFFFFFF;
+  --pgn-color-btn-text-warning: #454545FF;
+  --pgn-color-btn-bg-inverse-danger: #FFFFFFFF;
+  --pgn-color-btn-bg-inverse-info: #FFFFFFFF;
+  --pgn-color-btn-bg-inverse-secondary: #414141FF;
+  --pgn-color-btn-bg-inverse-success: #FFFFFFFF;
+  --pgn-color-btn-bg-inverse-warning: #454545FF;
+  --pgn-color-btn-border-outline-brand: var(--pgn-color-theme-default-brand);
+  --pgn-color-btn-border-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-border-outline-dark: var(--pgn-color-theme-default-dark);
+  --pgn-color-btn-border-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-border-outline-primary: var(--pgn-color-theme-default-primary);
+  --pgn-color-btn-border-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-border-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-border-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-hover-text-inverse-danger: #A42631FF;
+  --pgn-color-btn-hover-text-inverse-info: #005484FF;
+  --pgn-color-btn-hover-text-outline-light: var(--pgn-color-theme-hover-light);
+  --pgn-color-btn-hover-text-inverse-outline-light: var(--pgn-color-theme-hover-light);
+  --pgn-color-btn-hover-text-inverse-secondary: #9A9A9AFF;
+  --pgn-color-btn-hover-text-inverse-success: #11623EFF;
+  --pgn-color-btn-hover-text-inverse-warning: #D9B800FF;
+  --pgn-color-btn-hover-bg-brand: var(--pgn-color-theme-hover-brand);
+  --pgn-color-btn-hover-bg-inverse-brand: #ECECECFF;
+  --pgn-color-btn-hover-bg-outline-danger: var(--pgn-color-danger-100);
+  --pgn-color-btn-hover-bg-inverse-outline-danger: var(--pgn-color-danger-100);
+  --pgn-color-btn-hover-bg-dark: var(--pgn-color-theme-hover-dark);
+  --pgn-color-btn-hover-bg-inverse-dark: #ECECECFF;
+  --pgn-color-btn-hover-bg-outline-info: var(--pgn-color-info-100);
+  --pgn-color-btn-hover-bg-inverse-outline-info: var(--pgn-color-info-100);
+  --pgn-color-btn-hover-bg-light: var(--pgn-color-theme-hover-light);
+  --pgn-color-btn-hover-bg-inverse-light: #323232FF;
+  --pgn-color-btn-hover-bg-primary: var(--pgn-color-theme-hover-primary);
+  --pgn-color-btn-hover-bg-inverse-primary: #ECECECFF;
+  --pgn-color-btn-hover-bg-outline-secondary: var(--pgn-color-secondary-100);
+  --pgn-color-btn-hover-bg-inverse-outline-secondary: var(--pgn-color-secondary-100);
+  --pgn-color-btn-hover-bg-outline-success: var(--pgn-color-success-100);
+  --pgn-color-btn-hover-bg-inverse-outline-success: var(--pgn-color-success-100);
+  --pgn-color-btn-hover-bg-outline-warning: var(--pgn-color-warning-100);
+  --pgn-color-btn-hover-bg-inverse-outline-warning: var(--pgn-color-warning-100);
+  --pgn-color-btn-hover-border-brand: var(--pgn-color-theme-hover-brand);
+  --pgn-color-btn-hover-border-outline-danger: var(--pgn-color-danger-900);
+  --pgn-color-btn-hover-border-dark: var(--pgn-color-theme-hover-dark);
+  --pgn-color-btn-hover-border-outline-info: var(--pgn-color-info-900);
+  --pgn-color-btn-hover-border-light: var(--pgn-color-theme-hover-light);
+  --pgn-color-btn-hover-border-primary: var(--pgn-color-theme-hover-primary);
+  --pgn-color-btn-hover-border-outline-secondary: var(--pgn-color-secondary-900);
+  --pgn-color-btn-hover-border-outline-success: var(--pgn-color-success-900);
+  --pgn-color-btn-hover-border-outline-warning: var(--pgn-color-warning-900);
+  --pgn-color-btn-active-text-inverse-danger: #9A232EFF;
+  --pgn-color-btn-active-text-inverse-info: #004C77FF;
+  --pgn-color-btn-active-text-inverse-secondary: #949494FF;
+  --pgn-color-btn-active-text-inverse-success: #0F5737FF;
+  --pgn-color-btn-active-text-inverse-warning: #CCAE00FF;
+  --pgn-color-btn-active-bg-brand: var(--pgn-color-theme-active-brand);
+  --pgn-color-btn-active-bg-outline-brand: var(--pgn-color-theme-bg-brand);
+  --pgn-color-btn-active-bg-inverse-outline-brand: var(--pgn-color-theme-bg-brand);
+  --pgn-color-btn-active-bg-dark: var(--pgn-color-theme-active-dark);
+  --pgn-color-btn-active-bg-outline-dark: var(--pgn-color-theme-bg-dark);
+  --pgn-color-btn-active-bg-inverse-outline-dark: var(--pgn-color-theme-bg-dark);
+  --pgn-color-btn-active-bg-light: var(--pgn-color-theme-active-light);
+  --pgn-color-btn-active-bg-outline-light: var(--pgn-color-theme-bg-light);
+  --pgn-color-btn-active-bg-inverse-outline-light: var(--pgn-color-theme-bg-light);
+  --pgn-color-btn-active-bg-primary: var(--pgn-color-theme-active-primary);
+  --pgn-color-btn-active-bg-outline-primary: var(--pgn-color-theme-bg-primary);
+  --pgn-color-btn-active-bg-inverse-outline-primary: var(--pgn-color-theme-bg-primary);
+  --pgn-color-btn-active-border-brand: var(--pgn-color-theme-active-brand);
+  --pgn-color-btn-active-border-outline-brand: var(--pgn-color-theme-active-brand);
+  --pgn-color-btn-active-border-dark: var(--pgn-color-theme-active-dark);
+  --pgn-color-btn-active-border-outline-dark: var(--pgn-color-theme-active-dark);
+  --pgn-color-btn-active-border-light: var(--pgn-color-theme-active-light);
+  --pgn-color-btn-active-border-outline-light: var(--pgn-color-theme-active-light);
+  --pgn-color-btn-active-border-primary: var(--pgn-color-theme-active-primary);
+  --pgn-color-btn-active-border-outline-primary: var(--pgn-color-theme-active-primary);
+  --pgn-color-btn-focus-text-brand: var(--pgn-color-btn-text-brand);
+  --pgn-color-btn-focus-text-inverse-danger: var(--pgn-color-btn-text-inverse-danger);
+  --pgn-color-btn-focus-text-dark: var(--pgn-color-btn-text-dark);
+  --pgn-color-btn-focus-text-inverse-info: var(--pgn-color-btn-text-inverse-info);
+  --pgn-color-btn-focus-text-light: var(--pgn-color-btn-text-light);
+  --pgn-color-btn-focus-text-primary: var(--pgn-color-btn-text-primary);
+  --pgn-color-btn-focus-text-outline-secondary: var(--pgn-color-btn-text-outline-secondary);
+  --pgn-color-btn-focus-text-inverse-success: var(--pgn-color-btn-text-inverse-success);
+  --pgn-color-btn-focus-text-outline-warning: var(--pgn-color-btn-text-outline-warning);
+  --pgn-color-btn-focus-text-inverse-warning: var(--pgn-color-btn-text-inverse-warning);
+  --pgn-color-btn-focus-border-brand: var(--pgn-color-btn-border-brand);
+  --pgn-color-btn-focus-border-dark: var(--pgn-color-btn-focus-bg-dark);
+  --pgn-color-btn-focus-border-light: var(--pgn-color-btn-border-light);
+  --pgn-color-btn-focus-border-primary: var(--pgn-color-btn-border-primary);
+  --pgn-color-btn-focus-border-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-focus-border-outline-secondary: var(--pgn-color-btn-border-outline-secondary);
+  --pgn-color-btn-focus-border-outline-warning: var(--pgn-color-btn-border-outline-warning);
+  --pgn-color-btn-focus-bg-inverse-brand: var(--pgn-color-btn-bg-inverse-brand);
+  --pgn-color-btn-focus-bg-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-focus-bg-inverse-dark: var(--pgn-color-btn-bg-inverse-dark);
+  --pgn-color-btn-focus-bg-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-focus-bg-inverse-light: var(--pgn-color-btn-bg-inverse-light);
+  --pgn-color-btn-focus-bg-inverse-primary: var(--pgn-color-btn-bg-inverse-primary);
+  --pgn-color-btn-focus-bg-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-focus-bg-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-focus-bg-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-focus-outline-brand: var(--pgn-color-theme-focus-brand);
+  --pgn-color-btn-focus-outline-outline-brand: var(--pgn-color-theme-focus-brand);
+  --pgn-color-btn-focus-outline-inverse-outline-brand: var(--pgn-color-btn-focus-border-inverse-outline-brand);
+  --pgn-color-btn-focus-outline-dark: var(--pgn-color-theme-focus-dark);
+  --pgn-color-btn-focus-outline-outline-dark: var(--pgn-color-theme-focus-dark);
+  --pgn-color-btn-focus-outline-inverse-outline-info: var(--pgn-color-btn-focus-border-inverse-outline-info);
+  --pgn-color-btn-focus-outline-outline-light: var(--pgn-color-theme-focus-light);
+  --pgn-color-btn-focus-outline-inverse-outline-light: var(--pgn-color-btn-focus-border-inverse-outline-light);
+  --pgn-color-btn-focus-outline-primary: var(--pgn-color-theme-focus-primary);
+  --pgn-color-btn-focus-outline-outline-primary: var(--pgn-color-theme-focus-primary);
+  --pgn-color-btn-focus-outline-inverse-outline-success: var(--pgn-color-btn-focus-border-inverse-outline-success);
+  --pgn-color-btn-focus-outline-tertiary: var(--pgn-color-theme-focus-primary);
+  --pgn-color-btn-disabled-text-brand: var(--pgn-color-btn-text-brand);
+  --pgn-color-btn-disabled-text-dark: var(--pgn-color-btn-text-dark);
+  --pgn-color-btn-disabled-text-light: var(--pgn-color-btn-text-light);
+  --pgn-color-btn-disabled-text-primary: var(--pgn-color-btn-text-primary);
+  --pgn-color-btn-disabled-text-outline-warning: var(--pgn-color-btn-text-outline-warning);
+  --pgn-color-btn-disabled-bg-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-disabled-bg-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-disabled-bg-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-disabled-bg-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-disabled-bg-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-disabled-border-brand: var(--pgn-color-btn-border-brand);
+  --pgn-color-btn-disabled-border-dark: var(--pgn-color-btn-border-dark);
+  --pgn-color-btn-disabled-border-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-disabled-border-light: var(--pgn-color-btn-border-light);
+  --pgn-color-btn-disabled-border-primary: var(--pgn-color-btn-border-primary);
+  --pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning);
+  --pgn-color-btn-disabled-link: var(--pgn-color-disabled);
+  --pgn-color-card-border-focus-dark: var(--pgn-color-theme-focus-primary);
+  --pgn-color-chip-outline-light: var(--pgn-color-chip-label-base);
+  --pgn-color-dropdown-link-active-bg: var(--pgn-color-bg-active);
+  --pgn-color-dropdown-link-disabled: var(--pgn-color-disabled);
+  --pgn-color-dropzone-error-wrapper: var(--pgn-color-danger-500);
+  --pgn-color-form-input-group-addon-border: var(--pgn-color-form-input-border);
+  --pgn-color-form-input-focus-border: var(--pgn-color-input-focus);
+  --pgn-color-form-input-focus-bg: var(--pgn-color-form-input-bg-base);
+  --pgn-color-form-control-indicator-bg-base: var(--pgn-color-form-input-bg-base);
+  --pgn-color-form-control-indicator-checked-base: var(--pgn-color-bg-active);
+  --pgn-color-form-control-indicator-checked-bg-base: var(--pgn-color-bg-active);
+  --pgn-color-form-control-indicator-active-bg: var(--pgn-color-bg-active);
+  --pgn-color-form-control-label-disabled: var(--pgn-color-disabled);
+  --pgn-color-form-control-label-floating-text: #2125291A;
+  --pgn-color-form-control-checkbox-indicator-indeterminate-bg: var(--pgn-color-bg-active);
+  --pgn-color-form-control-select-disabled: var(--pgn-color-disabled);
+  --pgn-color-form-control-select-bg-base: var(--pgn-color-form-input-bg-base);
+  --pgn-color-form-control-select-border-base: var(--pgn-color-form-input-border);
+  --pgn-color-form-control-range-thumb-bg-base: var(--pgn-color-bg-active);
+  --pgn-color-form-control-range-thumb-bg-disabled: var(--pgn-color-disabled);
+  --pgn-color-form-control-range-thumb-bg-active: #000000FF;
+  --pgn-color-form-control-file-bg-base: var(--pgn-color-form-input-bg-base);
+  --pgn-color-form-control-file-button-base: var(--pgn-color-form-control-file-base);
+  --pgn-color-form-control-file-border-base: var(--pgn-color-form-input-border);
+  --pgn-color-icon-button-bg-secondary-active-hover: var(--pgn-color-icon-button-bg-secondary-active-base);
+  --pgn-color-icon-button-bg-secondary-active-focus: var(--pgn-color-icon-button-bg-secondary-active-base);
+  --pgn-color-icon-button-bg-success-active-hover: var(--pgn-color-icon-button-bg-success-active-base);
+  --pgn-color-icon-button-bg-success-active-focus: var(--pgn-color-icon-button-bg-success-active-base);
+  --pgn-color-icon-button-bg-warning-active-hover: var(--pgn-color-icon-button-bg-warning-active-base);
+  --pgn-color-icon-button-bg-warning-active-focus: var(--pgn-color-icon-button-bg-warning-active-base);
+  --pgn-color-icon-button-bg-danger-active-hover: var(--pgn-color-icon-button-bg-danger-active-base);
+  --pgn-color-icon-button-bg-danger-active-focus: var(--pgn-color-icon-button-bg-danger-active-base);
+  --pgn-color-icon-button-text-primary-base: var(--pgn-color-theme-default-primary);
+  --pgn-color-icon-button-text-secondary-focus: var(--pgn-color-icon-button-text-secondary-base);
+  --pgn-color-icon-button-text-secondary-inverse-active-hover: var(--pgn-color-icon-button-text-secondary-inverse-active-base);
+  --pgn-color-icon-button-text-secondary-inverse-active-focus: var(--pgn-color-icon-button-text-secondary-inverse-active-base);
+  --pgn-color-icon-button-text-brand-base: var(--pgn-color-theme-default-brand);
+  --pgn-color-icon-button-text-success-inverse-active-hover: var(--pgn-color-icon-button-text-success-inverse-active-base);
+  --pgn-color-icon-button-text-success-inverse-active-focus: var(--pgn-color-icon-button-text-success-inverse-active-base);
+  --pgn-color-icon-button-text-warning-focus: var(--pgn-color-icon-button-text-warning-base);
+  --pgn-color-icon-button-text-warning-inverse-active-hover: var(--pgn-color-icon-button-text-warning-inverse-active-base);
+  --pgn-color-icon-button-text-warning-inverse-active-focus: var(--pgn-color-icon-button-text-warning-inverse-active-base);
+  --pgn-color-icon-button-text-danger-inverse-active-hover: var(--pgn-color-icon-button-text-danger-inverse-active-base);
+  --pgn-color-icon-button-text-danger-inverse-active-focus: var(--pgn-color-icon-button-text-danger-inverse-active-base);
+  --pgn-color-icon-button-text-dark-base: var(--pgn-color-theme-default-dark);
+  --pgn-color-image-thumbnail-bg: var(--pgn-color-body-bg);
+  --pgn-color-menu-select-btn-link-color: var(--pgn-color-theme-default-primary);
+  --pgn-color-nav-tabs-base-link-active-text: var(--pgn-color-theme-default-primary);
+  --pgn-color-nav-tabs-inverse-link-bg-hover: var(--pgn-color-nav-tabs-inverse-link-border-bottom);
+  --pgn-color-nav-pills-base-link-active-bg: var(--pgn-color-bg-active);
+  --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border-base);
+  --pgn-color-nav-pills-inverse-link-text-active-focus: var(--pgn-color-nav-pills-inverse-link-text-active);
+  --pgn-color-nav-pills-inverse-link-border-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
+  --pgn-color-nav-pills-inverse-link-bg-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
+  --pgn-color-nav-pills-inverse-link-bg-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
+  --pgn-color-navbar-dark-brand-text: var(--pgn-color-navbar-dark-active);
+  --pgn-color-navbar-dark-brand-hover: var(--pgn-color-navbar-dark-active);
+  --pgn-color-page-banner-bg-warning: var(--pgn-color-warning-100);
+  --pgn-color-pagination-text-disabled: var(--pgn-color-disabled);
+  --pgn-color-pagination-bg-active: var(--pgn-color-bg-active);
+  --pgn-color-popover-arrow-base: var(--pgn-color-popover-bg);
+  --pgn-color-popover-success-bg: var(--pgn-color-success-100);
+  --pgn-color-popover-success-icon: var(--pgn-color-success-500);
+  --pgn-color-popover-warning-bg: var(--pgn-color-warning-100);
+  --pgn-color-popover-warning-icon: var(--pgn-color-warning-500);
+  --pgn-color-popover-danger-bg: var(--pgn-color-danger-100);
+  --pgn-color-popover-danger-icon: var(--pgn-color-danger-500);
+  --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-theme-default-primary);
+  --pgn-color-stepper-header-step-base: var(--pgn-color-theme-default-primary);
+  --pgn-color-stepper-header-step-description-error: var(--pgn-color-stepper-header-step-bubble-error);
+  --pgn-color-tab-more-link-dropdown-toggle-btn-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
+  --pgn-color-tab-more-link-dropdown-toggle-text-hover: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
+  --pgn-color-tab-more-link-dropdown-toggle-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus);
+  --pgn-color-link-muted-base: var(--pgn-color-theme-default-primary);
+  --pgn-color-link-muted-inline-base: var(--pgn-color-theme-default-primary);
+  --pgn-color-link-brand-base: var(--pgn-color-theme-default-brand);
+  --pgn-color-link-brand-inline-base: var(--pgn-color-theme-default-brand);
+  --pgn-color-list-group-active-bg: var(--pgn-color-bg-active);
+  --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base);
+  --pgn-color-action-default-secondary-100: #000000FF;
+  --pgn-color-action-default-secondary-200: #000000FF;
+  --pgn-color-action-default-secondary-300: #000000FF;
+  --pgn-color-action-default-secondary-400: #000000FF;
+  --pgn-color-action-default-secondary-500: #000000FF;
+  --pgn-color-action-default-secondary-600: #000000FF;
+  --pgn-color-action-default-secondary-700: #000000FF;
+  --pgn-color-action-default-secondary-800: #000000FF;
+  --pgn-color-action-default-secondary-900: #000000FF;
+  --pgn-color-action-default-success-100: #000000FF;
+  --pgn-color-action-default-success-200: #000000FF;
+  --pgn-color-action-default-success-300: #000000FF;
+  --pgn-color-action-default-success-400: #000000FF;
+  --pgn-color-action-default-success-500: #000000FF;
+  --pgn-color-action-default-success-600: #000000FF;
+  --pgn-color-action-default-success-700: #000000FF;
+  --pgn-color-action-default-success-800: #000000FF;
+  --pgn-color-action-default-success-900: #000000FF;
+  --pgn-color-action-default-info-100: #000000FF;
+  --pgn-color-action-default-info-200: #000000FF;
+  --pgn-color-action-default-info-300: #000000FF;
+  --pgn-color-action-default-info-400: #000000FF;
+  --pgn-color-action-default-info-500: #000000FF;
+  --pgn-color-action-default-info-600: #000000FF;
+  --pgn-color-action-default-info-700: #000000FF;
+  --pgn-color-action-default-info-800: #000000FF;
+  --pgn-color-action-default-info-900: #000000FF;
+  --pgn-color-action-default-warning-100: #000000FF;
+  --pgn-color-action-default-warning-200: #000000FF;
+  --pgn-color-action-default-warning-300: #000000FF;
+  --pgn-color-action-default-warning-400: #000000FF;
+  --pgn-color-action-default-warning-500: #000000FF;
+  --pgn-color-action-default-warning-600: #000000FF;
+  --pgn-color-action-default-warning-700: #000000FF;
+  --pgn-color-action-default-warning-800: #000000FF;
+  --pgn-color-action-default-warning-900: #000000FF;
+  --pgn-color-action-default-danger-100: #000000FF;
+  --pgn-color-action-default-danger-200: #000000FF;
+  --pgn-color-action-default-danger-300: #000000FF;
+  --pgn-color-action-default-danger-400: #000000FF;
+  --pgn-color-action-default-danger-500: #000000FF;
+  --pgn-color-action-default-danger-600: #000000FF;
+  --pgn-color-action-default-danger-700: #000000FF;
+  --pgn-color-action-default-danger-800: #000000FF;
+  --pgn-color-action-default-danger-900: #000000FF;
+  --pgn-border-color-nav-tabs-link-border-active: var(--pgn-color-theme-default-primary);
+  --pgn-border-color-nav-tabs-link-border-hover-bottom: var(--pgn-color-nav-tabs-base-border-base);
+  --pgn-elevation-form-control-select-border-focus-color: var(--pgn-color-input-btn-focus);
+  --pgn-elevation-icon-button-box-shadow-primary-base-color: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-elevation-icon-button-box-shadow-brand-base-color: var(--pgn-color-icon-button-text-brand-base);
+  --pgn-elevation-icon-button-box-shadow-dark-base-color: var(--pgn-color-icon-button-text-dark-base);
+  --pgn-elevation-pagination-focus-box-shadow-color: var(--pgn-color-input-btn-focus);
+  --pgn-elevation-input-btn-focus-box-shadow-color: var(--pgn-color-input-btn-focus);
+  --pgn-other-content-form-control-checkbox-indicator-icon-checked-base: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23607891FF'/></svg>");
+  --pgn-other-content-form-control-radio-indicator-icon-checked-base: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23607891FF'/%3e%3c/svg%3e");
+  --pgn-other-content-form-control-switch-indicator-icon-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23607891FF'/%3e%3c/svg%3e");
+  --pgn-other-content-form-control-select-bg-color: var(--pgn-color-form-control-select-bg-base);
+  --pgn-other-content-form-control-select-bg-image: var(--pgn-other-content-form-control-select-indicator-icon);
+  --pgn-color-alert-icon-success: var(--pgn-color-theme-default-success);
+  --pgn-color-alert-icon-info: var(--pgn-color-theme-default-info);
+  --pgn-color-alert-icon-danger: var(--pgn-color-theme-default-danger);
+  --pgn-color-alert-icon-warning: var(--pgn-color-theme-default-warning);
+  --pgn-color-alert-bg-success: var(--pgn-color-theme-bg-success);
+  --pgn-color-alert-bg-info: var(--pgn-color-theme-bg-info);
+  --pgn-color-alert-bg-danger: var(--pgn-color-theme-bg-danger);
+  --pgn-color-alert-bg-warning: var(--pgn-color-theme-bg-warning);
+  --pgn-color-alert-border-success: var(--pgn-color-theme-border-success);
+  --pgn-color-alert-border-info: var(--pgn-color-theme-border-info);
+  --pgn-color-alert-border-danger: var(--pgn-color-theme-border-danger);
+  --pgn-color-alert-border-warning: var(--pgn-color-theme-border-warning);
+  --pgn-color-btn-text-outline-danger: var(--pgn-color-theme-default-danger);
+  --pgn-color-btn-text-outline-info: var(--pgn-color-theme-default-info);
+  --pgn-color-btn-text-outline-success: var(--pgn-color-theme-default-success);
+  --pgn-color-btn-border-outline-danger: var(--pgn-color-theme-default-danger);
+  --pgn-color-btn-border-outline-info: var(--pgn-color-theme-default-info);
+  --pgn-color-btn-border-outline-success: var(--pgn-color-theme-default-success);
+  --pgn-color-btn-hover-text-brand: #FFFFFFFF;
+  --pgn-color-btn-hover-text-outline-brand: var(--pgn-color-btn-text-outline-brand);
+  --pgn-color-btn-hover-text-outline-danger: var(--pgn-color-theme-hover-danger);
+  --pgn-color-btn-hover-text-inverse-outline-danger: var(--pgn-color-theme-hover-danger);
+  --pgn-color-btn-hover-text-dark: #FFFFFFFF;
+  --pgn-color-btn-hover-text-outline-dark: var(--pgn-color-btn-text-outline-dark);
+  --pgn-color-btn-hover-text-outline-info: var(--pgn-color-theme-hover-info);
+  --pgn-color-btn-hover-text-inverse-outline-info: var(--pgn-color-theme-hover-info);
+  --pgn-color-btn-hover-text-light: #454545FF;
+  --pgn-color-btn-hover-text-primary: #FFFFFFFF;
+  --pgn-color-btn-hover-text-outline-primary: var(--pgn-color-btn-text-outline-primary);
+  --pgn-color-btn-hover-text-outline-secondary: var(--pgn-color-theme-hover-secondary);
+  --pgn-color-btn-hover-text-inverse-outline-secondary: var(--pgn-color-theme-hover-secondary);
+  --pgn-color-btn-hover-text-outline-success: var(--pgn-color-theme-hover-success);
+  --pgn-color-btn-hover-text-inverse-outline-success: var(--pgn-color-theme-hover-success);
+  --pgn-color-btn-hover-text-outline-warning: var(--pgn-color-theme-hover-warning);
+  --pgn-color-btn-hover-text-inverse-outline-warning: var(--pgn-color-theme-hover-warning);
+  --pgn-color-btn-hover-bg-danger: var(--pgn-color-theme-hover-danger);
+  --pgn-color-btn-hover-bg-inverse-danger: #ECECECFF;
+  --pgn-color-btn-hover-bg-info: var(--pgn-color-theme-hover-info);
+  --pgn-color-btn-hover-bg-inverse-info: #ECECECFF;
+  --pgn-color-btn-hover-bg-secondary: var(--pgn-color-theme-hover-secondary);
+  --pgn-color-btn-hover-bg-inverse-secondary: #2E2E2EFF;
+  --pgn-color-btn-hover-bg-success: var(--pgn-color-theme-hover-success);
+  --pgn-color-btn-hover-bg-inverse-success: #ECECECFF;
+  --pgn-color-btn-hover-bg-warning: var(--pgn-color-theme-hover-warning);
+  --pgn-color-btn-hover-bg-inverse-warning: #323232FF;
+  --pgn-color-btn-hover-border-danger: var(--pgn-color-theme-hover-danger);
+  --pgn-color-btn-hover-border-info: var(--pgn-color-theme-hover-info);
+  --pgn-color-btn-hover-border-secondary: var(--pgn-color-theme-hover-secondary);
+  --pgn-color-btn-hover-border-success: var(--pgn-color-theme-hover-success);
+  --pgn-color-btn-hover-border-warning: var(--pgn-color-theme-hover-warning);
+  --pgn-color-btn-active-text-brand: #FFFFFFFF;
+  --pgn-color-btn-active-text-outline-brand: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-brand: #FFFFFFFF;
+  --pgn-color-btn-active-text-dark: #FFFFFFFF;
+  --pgn-color-btn-active-text-outline-dark: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-dark: #FFFFFFFF;
+  --pgn-color-btn-active-text-light: #454545FF;
+  --pgn-color-btn-active-text-outline-light: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-light: #FFFFFFFF;
+  --pgn-color-btn-active-text-primary: #FFFFFFFF;
+  --pgn-color-btn-active-text-outline-primary: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-primary: #FFFFFFFF;
+  --pgn-color-btn-active-bg-danger: var(--pgn-color-theme-active-danger);
+  --pgn-color-btn-active-bg-outline-danger: var(--pgn-color-theme-bg-danger);
+  --pgn-color-btn-active-bg-inverse-outline-danger: var(--pgn-color-theme-bg-danger);
+  --pgn-color-btn-active-bg-info: var(--pgn-color-theme-active-info);
+  --pgn-color-btn-active-bg-outline-info: var(--pgn-color-theme-bg-info);
+  --pgn-color-btn-active-bg-inverse-outline-info: var(--pgn-color-theme-bg-info);
+  --pgn-color-btn-active-bg-secondary: var(--pgn-color-theme-active-secondary);
+  --pgn-color-btn-active-bg-outline-secondary: var(--pgn-color-theme-bg-secondary);
+  --pgn-color-btn-active-bg-inverse-outline-secondary: var(--pgn-color-theme-bg-secondary);
+  --pgn-color-btn-active-bg-success: var(--pgn-color-theme-active-success);
+  --pgn-color-btn-active-bg-outline-success: var(--pgn-color-theme-bg-success);
+  --pgn-color-btn-active-bg-inverse-outline-success: var(--pgn-color-theme-bg-success);
+  --pgn-color-btn-active-bg-warning: var(--pgn-color-theme-active-warning);
+  --pgn-color-btn-active-bg-outline-warning: var(--pgn-color-theme-bg-warning);
+  --pgn-color-btn-active-bg-inverse-outline-warning: var(--pgn-color-theme-bg-warning);
+  --pgn-color-btn-active-border-danger: var(--pgn-color-theme-active-danger);
+  --pgn-color-btn-active-border-outline-danger: var(--pgn-color-theme-active-danger);
+  --pgn-color-btn-active-border-info: var(--pgn-color-theme-active-info);
+  --pgn-color-btn-active-border-outline-info: var(--pgn-color-theme-active-info);
+  --pgn-color-btn-active-border-secondary: var(--pgn-color-theme-active-secondary);
+  --pgn-color-btn-active-border-outline-secondary: var(--pgn-color-theme-active-secondary);
+  --pgn-color-btn-active-border-success: var(--pgn-color-theme-active-success);
+  --pgn-color-btn-active-border-outline-success: var(--pgn-color-theme-active-success);
+  --pgn-color-btn-active-border-warning: var(--pgn-color-theme-active-warning);
+  --pgn-color-btn-active-border-outline-warning: var(--pgn-color-theme-active-warning);
+  --pgn-color-btn-focus-text-outline-brand: var(--pgn-color-btn-text-outline-brand);
+  --pgn-color-btn-focus-text-danger: var(--pgn-color-btn-text-danger);
+  --pgn-color-btn-focus-text-info: var(--pgn-color-btn-text-info);
+  --pgn-color-btn-focus-text-outline-primary: var(--pgn-color-btn-text-outline-primary);
+  --pgn-color-btn-focus-text-secondary: var(--pgn-color-btn-text-secondary);
+  --pgn-color-btn-focus-text-success: var(--pgn-color-btn-text-success);
+  --pgn-color-btn-focus-text-warning: var(--pgn-color-btn-text-warning);
+  --pgn-color-btn-focus-border-outline-brand: var(--pgn-color-btn-border-outline-brand);
+  --pgn-color-btn-focus-border-danger: var(--pgn-color-btn-focus-bg-danger);
+  --pgn-color-btn-focus-border-outline-dark: var(--pgn-color-btn-border-outline-dark);
+  --pgn-color-btn-focus-border-info: var(--pgn-color-btn-border-info);
+  --pgn-color-btn-focus-border-outline-primary: var(--pgn-color-btn-border-outline-primary);
+  --pgn-color-btn-focus-border-success: var(--pgn-color-btn-border-success);
+  --pgn-color-btn-focus-border-warning: var(--pgn-color-btn-border-warning);
+  --pgn-color-btn-focus-bg-inverse-danger: var(--pgn-color-btn-bg-inverse-danger);
+  --pgn-color-btn-focus-bg-inverse-info: var(--pgn-color-btn-bg-inverse-info);
+  --pgn-color-btn-focus-bg-inverse-secondary: var(--pgn-color-btn-bg-inverse-secondary);
+  --pgn-color-btn-focus-bg-inverse-success: var(--pgn-color-btn-bg-inverse-success);
+  --pgn-color-btn-focus-bg-inverse-warning: var(--pgn-color-btn-bg-inverse-warning);
+  --pgn-color-btn-focus-outline-danger: var(--pgn-color-theme-focus-danger);
+  --pgn-color-btn-focus-outline-outline-danger: var(--pgn-color-theme-focus-danger);
+  --pgn-color-btn-focus-outline-info: var(--pgn-color-theme-focus-info);
+  --pgn-color-btn-focus-outline-outline-info: var(--pgn-color-theme-focus-info);
+  --pgn-color-btn-focus-outline-secondary: var(--pgn-color-theme-focus-secondary);
+  --pgn-color-btn-focus-outline-outline-secondary: var(--pgn-color-theme-focus-secondary);
+  --pgn-color-btn-focus-outline-success: var(--pgn-color-theme-focus-success);
+  --pgn-color-btn-focus-outline-outline-success: var(--pgn-color-theme-focus-success);
+  --pgn-color-btn-focus-outline-warning: var(--pgn-color-theme-focus-warning);
+  --pgn-color-btn-focus-outline-outline-warning: var(--pgn-color-theme-focus-warning);
+  --pgn-color-btn-disabled-text-danger: var(--pgn-color-btn-text-danger);
+  --pgn-color-btn-disabled-text-info: var(--pgn-color-btn-text-info);
+  --pgn-color-btn-disabled-text-outline-light: var(--pgn-color-btn-hover-text-outline-light);
+  --pgn-color-btn-disabled-text-secondary: var(--pgn-color-btn-text-secondary);
+  --pgn-color-btn-disabled-text-success: var(--pgn-color-btn-text-success);
+  --pgn-color-btn-disabled-text-warning: var(--pgn-color-btn-text-warning);
+  --pgn-color-btn-disabled-border-outline-brand: var(--pgn-color-btn-border-outline-brand);
+  --pgn-color-btn-disabled-border-danger: var(--pgn-color-btn-border-danger);
+  --pgn-color-btn-disabled-border-outline-light: var(--pgn-color-btn-hover-text-outline-light);
+  --pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success);
+  --pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning);
+  --pgn-color-form-control-indicator-checked-valid: var(--pgn-color-theme-default-success);
+  --pgn-color-form-control-indicator-checked-invalid: var(--pgn-color-theme-default-danger);
+  --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-form-control-indicator-checked-base);
+  --pgn-color-form-control-indicator-checked-border-focus: var(--pgn-color-form-input-focus-border);
+  --pgn-color-form-control-indicator-active-border: var(--pgn-color-form-control-indicator-active-bg);
+  --pgn-color-form-control-checkbox-indicator-indeterminate-base: var(--pgn-color-form-control-indicator-checked-base);
+  --pgn-color-form-control-checkbox-indicator-indeterminate-border: var(--pgn-color-form-control-checkbox-indicator-indeterminate-bg);
+  --pgn-color-form-control-select-border-focus: var(--pgn-color-form-input-focus-border);
+  --pgn-color-form-control-file-border-focus: var(--pgn-color-form-input-focus-border);
+  --pgn-color-form-feedback-valid: var(--pgn-color-theme-default-success);
+  --pgn-color-form-feedback-invalid: var(--pgn-color-theme-default-danger);
+  --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-bg-primary-active-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-bg-primary-active-focus: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-focus: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-inverse-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-inverse-active-base: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-inverse-active-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-inverse-active-focus: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-brand-focus: var(--pgn-color-icon-button-text-brand-base);
+  --pgn-color-icon-button-text-success-base: var(--pgn-color-theme-default-success);
+  --pgn-color-icon-button-text-danger-base: var(--pgn-color-theme-default-danger);
+  --pgn-color-icon-button-text-dark-focus: var(--pgn-color-icon-button-text-dark-base);
+  --pgn-color-nav-tabs-inverse-link-bg-active: var(--pgn-color-nav-tabs-inverse-link-bg-hover);
+  --pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active);
+  --pgn-color-link-base: var(--pgn-color-theme-default-info);
+  --pgn-color-link-inline-base: var(--pgn-color-theme-default-info);
+  --pgn-color-link-muted-hover: #CAD2DAFF;
+  --pgn-color-link-muted-inline-decoration: #9DACBB4D;
+  --pgn-color-link-muted-inline-hover-base: #CAD2DAFF;
+  --pgn-color-link-brand-hover: #E8C3D7FF;
+  --pgn-color-link-brand-inline-decoration: #D38CB24D;
+  --pgn-color-link-brand-inline-hover-base: #E8C3D7FF;
+  --pgn-color-list-group-active-border: var(--pgn-color-list-group-active-bg);
+  --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
+  --pgn-elevation-icon-button-box-shadow-success-base-color: var(--pgn-color-icon-button-text-success-base);
+  --pgn-elevation-icon-button-box-shadow-danger-base-color: var(--pgn-color-icon-button-text-danger-base);
+  --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%238BC1A9FF'/></svg>");
+  --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23E1969DFF'/></svg>");
+  --pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='%23607891FF'/></svg>");
+  --pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238BC1A9FF'/%3e%3c/svg%3e");
+  --pgn-other-content-form-control-radio-indicator-icon-checked-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23E1969DFF'/%3e%3c/svg%3e");
+  --pgn-color-btn-hover-text-danger: #FFFFFFFF;
+  --pgn-color-btn-hover-text-info: #FFFFFFFF;
+  --pgn-color-btn-hover-text-secondary: #454545FF;
+  --pgn-color-btn-hover-text-success: #FFFFFFFF;
+  --pgn-color-btn-hover-text-warning: #454545FF;
+  --pgn-color-btn-active-text-danger: #252525FF;
+  --pgn-color-btn-active-text-outline-danger: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-danger: #FFFFFFFF;
+  --pgn-color-btn-active-text-info: #292929FF;
+  --pgn-color-btn-active-text-outline-info: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-info: #FFFFFFFF;
+  --pgn-color-btn-active-text-secondary: #454545FF;
+  --pgn-color-btn-active-text-outline-secondary: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-secondary: #FFFFFFFF;
+  --pgn-color-btn-active-text-success: #313131FF;
+  --pgn-color-btn-active-text-outline-success: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-success: #FFFFFFFF;
+  --pgn-color-btn-active-text-warning: #454545FF;
+  --pgn-color-btn-active-text-outline-warning: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-warning: #FFFFFFFF;
+  --pgn-color-btn-focus-text-outline-danger: var(--pgn-color-btn-text-outline-danger);
+  --pgn-color-btn-focus-text-outline-info: var(--pgn-color-btn-text-outline-info);
+  --pgn-color-btn-focus-text-outline-success: var(--pgn-color-btn-text-outline-success);
+  --pgn-color-btn-focus-border-outline-danger: var(--pgn-color-btn-border-outline-danger);
+  --pgn-color-btn-focus-border-outline-info: var(--pgn-color-btn-border-outline-info);
+  --pgn-color-btn-focus-border-outline-success: var(--pgn-color-btn-border-outline-success);
+  --pgn-color-btn-disabled-text-outline-brand: var(--pgn-color-btn-hover-text-outline-brand);
+  --pgn-color-btn-disabled-text-outline-danger: var(--pgn-color-btn-hover-text-outline-danger);
+  --pgn-color-btn-disabled-text-outline-info: var(--pgn-color-btn-text-outline-info);
+  --pgn-color-btn-disabled-text-outline-primary: var(--pgn-color-btn-hover-text-outline-primary);
+  --pgn-color-btn-disabled-text-outline-success: var(--pgn-color-btn-text-outline-success);
+  --pgn-color-btn-disabled-border-outline-danger: var(--pgn-color-btn-border-outline-danger);
+  --pgn-color-btn-disabled-border-outline-dark: var(--pgn-color-btn-hover-text-outline-dark);
+  --pgn-color-btn-disabled-border-outline-info: var(--pgn-color-btn-border-outline-info);
+  --pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-hover-text-outline-primary);
+  --pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success);
+  --pgn-color-form-feedback-icon-valid: var(--pgn-color-form-feedback-valid);
+  --pgn-color-form-feedback-icon-invalid: var(--pgn-color-form-feedback-invalid);
+  --pgn-color-form-feedback-tooltip-valid: #454545FF;
+  --pgn-color-form-feedback-tooltip-bg-valid: #8BC1A9E6;
+  --pgn-color-form-feedback-tooltip-bg-invalid: #E1969DE6;
+  --pgn-color-form-feedback-tooltip-box-shadow-focus-valid: #8BC1A940;
+  --pgn-color-form-feedback-tooltip-box-shadow-focus-invalid: #E1969D40;
+  --pgn-color-form-feedback-checked-valid: #ACD3C2FF;
+  --pgn-color-form-feedback-checked-invalid: #ECBEC2FF;
+  --pgn-color-icon-button-text-success-focus: var(--pgn-color-icon-button-text-success-base);
+  --pgn-color-icon-button-text-danger-focus: var(--pgn-color-icon-button-text-danger-base);
+  --pgn-color-pagination-text-base: var(--pgn-color-link-base);
+  --pgn-color-link-hover: #B9D7E8FF;
+  --pgn-color-link-inline-decoration: #80B6D54D;
+  --pgn-color-link-inline-hover-base: #B9D7E8FF;
+  --pgn-color-link-muted-inline-hover-decoration: #CAD2DAFF;
+  --pgn-color-link-brand-inline-hover-decoration: #E8C3D7FF;
+  --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%238BC1A9FF' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23E1969DFF' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23E1969DFF' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
+  --pgn-color-pagination-text-hover: var(--pgn-color-link-hover);
+  --pgn-color-link-inline-hover-decoration: #B9D7E8FF;
+}
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index 1c150c9c8c6..8e44b6f86b8 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -618,6 +618,8 @@
   --pgn-color-form-control-label-base: inherit;
   --pgn-color-icon-button-bg-base: #00000000;
   --pgn-color-menu-item-bg: #00000000;
+  --pgn-color-modal-content-scroll-shadow-from: #605C5CFF;
+  --pgn-color-modal-content-scroll-shadow-to: #B8BEBEFF;
   --pgn-color-nav-link-border: #00000000;
   --pgn-color-nav-tabs-base-bg-hover: #00000000;
   --pgn-color-nav-tabs-base-link-active-bg: #00000000;
@@ -1232,6 +1234,8 @@
   --pgn-color-chip-label-base: var(--pgn-color-primary-700);
   --pgn-color-chip-label-dark: var(--pgn-color-chip-outline-dark);
   --pgn-color-data-table-bg-base: var(--pgn-color-bg-base);
+  --pgn-color-data-table-bg-header: var(--pgn-color-light-300);
+  --pgn-color-data-table-bg-striped: var(--pgn-color-light-200);
   --pgn-color-data-table-border: var(--pgn-color-light-300);
   --pgn-color-dropdown-text: var(--pgn-color-body-base);
   --pgn-color-dropdown-header: var(--pgn-color-gray-500);
diff --git a/tokens/src/themes/dark/alias/color.json b/tokens/src/themes/dark/alias/color.json
new file mode 100644
index 00000000000..dad5c94bc6d
--- /dev/null
+++ b/tokens/src/themes/dark/alias/color.json
@@ -0,0 +1,322 @@
+{
+  "color": {
+    "$type": "color",
+    "bg": {
+      "base": { "$value": "{color.gray.100}", "$description": "Basic background color." },
+      "active": {
+        "source": "$component-active-bg",
+        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.35" }],
+        "$value": "{color.primary.500}",
+        "$description": "Active background color."
+      }
+    },
+    "text": {
+      "50": {
+        "black": {
+          "source": "$text-black-50",
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.black}",
+          "$description": "Black text color with transparency of 50%."
+        },
+        "white": {
+          "source": "$text-white-50",
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.white}",
+          "$description": "White text color with transparency of 50%."
+        }
+      }
+    },
+    "active": {
+      "source": "$component-active-color",
+      "$value": "{color.white}",
+      "$description": "Color for active element."
+    },
+    "disabled": {
+      "$value": "{color.gray.500}",
+      "$description": "Color for disabled element."
+    },
+    "input": {
+      "focus": {
+        "$value": "{color.primary.500}",
+        "$description": "Focused input value color."
+      }
+    },
+    "table": {
+      "caption": {
+        "source": "$table-caption-color",
+        "$value": "{color.text-muted}",
+        "$description": "Table caption color."
+      },
+      "border": {
+        "source": "$table-border-color",
+        "$value": "{color.border}",
+        "$description": "Table border color."
+      }
+    },
+    "border": {
+      "source": "$border-color",
+      "$value": "{color.gray.300}",
+      "$description": "Border color."
+    },
+    "theme": {
+      "bg": {
+        "primary": {
+          "$value": "{color.primary.100}",
+          "$description": "Theme-specific primary background color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.100}",
+          "$description": "Theme-specific secondary background color."
+        },
+        "brand": {
+          "$value": "{color.brand.100}",
+          "$description": "Theme-specific brand background color."
+        },
+        "success": {
+          "$value": "{color.success.300}",
+          "$description": "Theme-specific success background color."
+        },
+        "info": {
+          "$value": "{color.info.300}",
+          "$description": "Theme-specific info background color."
+        },
+        "warning": {
+          "$value": "{color.warning.200}",
+          "$description": "Theme-specific warning background color."
+        },
+        "danger": {
+          "$value": "{color.danger.300}",
+          "$description": "Theme-specific danger background color."
+        },
+        "light": {
+          "$value": "{color.light.100}",
+          "$description": "Theme-specific light background color."
+        },
+        "dark": {
+          "$value": "{color.dark.100}",
+          "$description": "Theme-specific dark background color."
+        },
+        "gray": {
+          "$value": "{color.gray.100}",
+          "$description": "Theme-specific gray background color."
+        }
+      },
+      "border": {
+        "primary": {
+          "$value": "{color.primary.200}",
+          "$description": "Theme-specific primary border color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.200}",
+          "$description": "Theme-specific secondary border color."
+        },
+        "brand": {
+          "$value": "{color.brand.200}",
+          "$description": "Theme-specific brand border color."
+        },
+        "success": {
+          "$value": "{color.success.200}",
+          "$description": "Theme-specific success border color."
+        },
+        "info": {
+          "$value": "{color.info.200}",
+          "$description": "Theme-specific info border color."
+        },
+        "warning": {
+          "$value": "{color.warning.200}",
+          "$description": "Theme-specific warning border color."
+        },
+        "danger": {
+          "$value": "{color.danger.200}",
+          "$description": "Theme-specific danger border color."
+        },
+        "light": {
+          "$value": "{color.light.200}",
+          "$description": "Theme-specific light border color."
+        },
+        "dark": {
+          "$value": "{color.dark.200}",
+          "$description": "Theme-specific dark border color."
+        },
+        "gray": {
+          "$value": "{color.gray.200}",
+          "$description": "Theme-specific gray border color."
+        }
+      },
+      "focus": {
+        "primary": {
+          "$value": "{color.primary.500}",
+          "$description": "Theme-specific primary focus color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.500}",
+          "$description": "Theme-specific secondary focus color."
+        },
+        "brand": {
+          "$value": "{color.brand.500}",
+          "$description": "Theme-specific brand focus color."
+        },
+        "success": {
+          "$value": "{color.success.500}",
+          "$description": "Theme-specific success focus color."
+        },
+        "info": {
+          "$value": "{color.info.500}",
+          "$description": "Theme-specific info focus color."
+        },
+        "warning": {
+          "$value": "{color.warning.500}",
+          "$description": "Theme-specific warning focus color."
+        },
+        "danger": {
+          "$value": "{color.danger.500}",
+          "$description": "Theme-specific danger focus color."
+        },
+        "light": {
+          "$value": "{color.light.500}",
+          "$description": "Theme-specific light focus color."
+        },
+        "dark": {
+          "$value": "{color.dark.500}",
+          "$description": "Theme-specific dark focus color."
+        },
+        "gray": {
+          "$value": "{color.gray.500}",
+          "$description": "Theme-specific gray focus color."
+        }
+      },
+      "default": {
+        "primary": {
+          "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.6" }],
+          "$value": "{color.primary.500}",
+          "$description": "Theme-specific primary default color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.500}",
+          "$description": "Theme-specific secondary default color."
+        },
+        "brand": {
+          "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.55" }],
+          "$value": "{color.brand.500}",
+          "$description": "Theme-specific brand default color."
+        },
+        "success": {
+          "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.5" }],
+          "$value": "{color.success.500}",
+          "$description": "Theme-specific success default color."
+        },
+        "info": {
+          "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.5" }],
+          "$value": "{color.info.500}",
+          "$description": "Theme-specific info default color."
+        },
+        "warning": {
+          "$value": "{color.warning.500}",
+          "$description": "Theme-specific warning default color."
+        },
+        "danger": {
+          "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.5" }],
+          "$value": "{color.danger.500}",
+          "$description": "Theme-specific danger default color."
+        },
+        "light": {
+          "$value": "{color.light.500}",
+          "$description": "Theme-specific light default color."
+        },
+        "dark": {
+          "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.6" }],
+          "$value": "{color.dark.500}",
+          "$description": "Theme-specific dark default color."
+        },
+        "gray": {
+          "$value": "{color.gray.500}",
+          "$description": "Theme-specific gray default color."
+        }
+      },
+      "hover": {
+        "primary": {
+          "$value": "{color.primary.700}",
+          "$description": "Theme-specific primary hover color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.700}",
+          "$description": "Theme-specific secondary hover color."
+        },
+        "brand": {
+          "$value": "{color.brand.700}",
+          "$description": "Theme-specific brand hover color."
+        },
+        "success": {
+          "$value": "{color.success.700}",
+          "$description": "Theme-specific success hover color."
+        },
+        "info": {
+          "$value": "{color.info.700}",
+          "$description": "Theme-specific info hover color."
+        },
+        "warning": {
+          "$value": "{color.warning.700}",
+          "$description": "Theme-specific warning hover color."
+        },
+        "danger": {
+          "$value": "{color.danger.700}",
+          "$description": "Theme-specific danger hover color."
+        },
+        "light": {
+          "$value": "{color.light.700}",
+          "$description": "Theme-specific light hover color."
+        },
+        "dark": {
+          "$value": "{color.dark.700}",
+          "$description": "Theme-specific dark hover color."
+        },
+        "gray": {
+          "$value": "{color.gray.700}",
+          "$description": "Theme-specific gray hover color."
+        }
+      },
+      "active": {
+        "primary": {
+          "$value": "{color.primary.900}",
+          "$description": "Theme-specific primary active color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.900}",
+          "$description": "Theme-specific secondary active color."
+        },
+        "brand": {
+          "$value": "{color.brand.900}",
+          "$description": "Theme-specific brand active color."
+        },
+        "success": {
+          "$value": "{color.success.900}",
+          "$description": "Theme-specific success active color."
+        },
+        "info": {
+          "$value": "{color.info.900}",
+          "$description": "Theme-specific info active color."
+        },
+        "warning": {
+          "$value": "{color.warning.900}",
+          "$description": "Theme-specific warning active color."
+        },
+        "danger": {
+          "$value": "{color.danger.900}",
+          "$description": "Theme-specific danger active color."
+        },
+        "light": {
+          "$value": "{color.light.900}",
+          "$description": "Theme-specific light active color."
+        },
+        "dark": {
+          "$value": "{color.dark.900}",
+          "$description": "Theme-specific dark active color."
+        },
+        "gray": {
+          "$value": "{color.gray.900}",
+          "$description": "Theme-specific gray active color."
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Alert.json b/tokens/src/themes/dark/components/Alert.json
new file mode 100644
index 00000000000..20d45e62aad
--- /dev/null
+++ b/tokens/src/themes/dark/components/Alert.json
@@ -0,0 +1,41 @@
+{
+  "color": {
+    "$type": "color",
+    "alert": {
+      "title": { "source": "$alert-title-color", "$value": "{color.gray.900}" },
+      "content": { "source": "$alert-content-color", "$value": "{color.gray.700}" },
+      "icon": {
+        "success": { "source": "$alert-success-icon-color", "$value": "{color.theme.default.success}" },
+        "info": { "source": "$alert-info-icon-color", "$value": "{color.theme.default.info}" },
+        "danger": { "source": "$alert-danger-icon-color", "$value": "{color.theme.default.danger}" },
+        "warning": { "source": "$alert-warning-icon-color", "$value": "{color.theme.default.warning}" }
+      },
+      "bg": {
+        "success": { "source": "$alert-success-bg", "$value": "{color.theme.bg.success}" },
+        "info": { "source": "$alert-info-bg", "$value": "{color.theme.bg.info}" },
+        "danger": { "source": "$alert-danger-bg", "$value": "{color.theme.bg.danger}" },
+        "warning": { "source": "$alert-warning-bg", "$value": "{color.theme.bg.warning}" }
+      },
+      "border": {
+        "success": { "source": "$alert-success-border-color", "$value": "{color.theme.border.success}" },
+        "info": { "source": "$alert-info-border-color", "$value": "{color.theme.border.info}" },
+        "danger": { "source": "$alert-danger-border-color", "$value": "{color.theme.border.danger}" },
+        "warning": { "source": "$alert-warning-border-color", "$value": "{color.theme.border.warning}" }
+      },
+      "actions": {
+        "overrides": {
+          "button": {
+            "variants": {}
+          },
+          "examples": {
+            "button": {
+              "variants": {
+                "primary": "brand"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Annotation.json b/tokens/src/themes/dark/components/Annotation.json
new file mode 100644
index 00000000000..2bad75960e7
--- /dev/null
+++ b/tokens/src/themes/dark/components/Annotation.json
@@ -0,0 +1,43 @@
+{
+  "elevation": {
+    "$type": "shadow",
+    "annotation": {
+      "box-shadow": {
+        "source": "$annotation-box-shadow",
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "4px"
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "8px"
+          }
+        ]
+      }
+    }
+  },
+  "color": {
+    "$type": "color",
+    "annotation": {
+      "text": {
+        "success": { "source": "$annotation-success-color", "$value": "{color.white}" },
+        "warning": { "source": "$annotation-warning-color", "$value": "{color.black}" },
+        "error": { "source": "$annotation-error-color", "$value": "{color.white}" },
+        "light": { "source": "$annotation-light-color", "$value": "{color.primary.500}" },
+        "dark": { "source": "$annotation-dark-color", "$value": "{color.white}" }
+      },
+      "bg": {
+        "success": { "source": "$annotation-success-bg", "$value": "{color.success.base}" },
+        "warning": { "source": "$annotation-warning-bg", "$value": "{color.accent.b}" },
+        "error": { "source": "$annotation-error-bg", "$value": "{color.danger.base}" },
+        "light": { "source": "$annotation-light-bg", "$value": "{color.white}" },
+        "dark": { "source": "$annotation-dark-bg", "$value": "{color.dark.base}" }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Avatar.json b/tokens/src/themes/dark/components/Avatar.json
new file mode 100644
index 00000000000..be1da05fe3c
--- /dev/null
+++ b/tokens/src/themes/dark/components/Avatar.json
@@ -0,0 +1,8 @@
+{
+  "color": {
+    "$type": "color",
+    "avatar": {
+      "border": { "$value": "{color.light.300}" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Badge.json b/tokens/src/themes/dark/components/Badge.json
new file mode 100644
index 00000000000..0eca2c66516
--- /dev/null
+++ b/tokens/src/themes/dark/components/Badge.json
@@ -0,0 +1,121 @@
+{
+  "color": {
+    "$type": "color",
+    "badge": {
+      "text": {
+        "primary": { "source": "$badge-primary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.primary.base}" },
+        "secondary": { "source": "$badge-secondary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.secondary.base}" },
+        "success": { "source": "$badge-success-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.success.base}" },
+        "danger": { "source": "$badge-danger-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.danger.base}" },
+        "warning": { "source": "$badge-warning-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.warning.base}" },
+        "info": { "source": "$badge-info-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.info.base}" },
+        "light": { "source": "$badge-light-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.light.base}" },
+        "dark": { "source": "$badge-dark-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.dark.base}" }
+      },
+      "bg": {
+        "primary": { "source": "$badge-primary-bg", "$value": "{color.primary.base}" },
+        "secondary": { "source": "$badge-secondary-bg", "$value": "{color.secondary.base}" },
+        "success": { "source": "$badge-success-bg", "$value": "{color.success.base}" },
+        "warning": { "source": "$badge-warning-bg", "$value": "{color.warning.base}" },
+        "danger": { "source": "$badge-danger-bg", "$value": "{color.danger.base}" },
+        "info": { "source": "$badge-info-bg", "$value": "{color.info.base}" },
+        "light": { "source": "$badge-light-bg", "$value": "{color.light.base}" },
+        "dark": { "source": "$badge-dark-bg", "$value": "{color.dark.base}" }
+      },
+      "focus": {
+        "primary": { "source": "$badge-primary-focus-color", "$value": "{color.badge.text.primary}" },
+        "secondary": { "source": "$badge-secondary-focus-color", "$value": "{color.badge.text.secondary}" },
+        "success": { "source": "$badge-success-focus-color", "$value": "{color.badge.text.success}" },
+        "warning": { "source": "$badge-warning-focus-color", "$value": "{color.badge.text.warning}" },
+        "danger": { "source": "$badge-danger-focus-color", "$value": "{color.badge.text.danger}" },
+        "info": { "source": "$badge-info-focus-color", "$value": "{color.badge.text.info}" },
+        "light": { "source": "$badge-light-focus-color", "$value": "{color.badge.text.light}" },
+        "dark": { "source": "$badge-dark-focus-color", "$value": "{color.badge.text.dark}" },
+        "bg": {
+          "primary": {
+            "source": "$badge-primary-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.primary}"
+          },
+          "secondary": {
+            "source": "$badge-secondary-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.secondary}"
+          },
+          "success": {
+            "source": "$badge-success-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.success}"
+          },
+          "danger": {
+            "source": "$badge-danger-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.danger}"
+          },
+          "warning": {
+            "source": "$badge-warning-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.warning}"
+          },
+          "info": {
+            "source": "$badge-info-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.info}"
+          },
+          "light": {
+            "source": "$badge-light-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.light}"
+          },
+          "dark": {
+            "source": "$badge-dark-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.dark}"
+          }
+        },
+        "box-shadow": {
+          "primary": {
+            "source": "$badge-primary-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.primary}"
+          },
+          "secondary": {
+            "source": "$badge-secondary-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.secondary}"
+          },
+          "success": {
+            "source": "$badge-success-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.success}"
+          },
+          "danger": {
+            "source": "$badge-danger-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.danger}"
+          },
+          "warning": {
+            "source": "$badge-warning-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.warning}"
+          },
+          "info": {
+            "source": "$badge-info-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.info}"
+          },
+          "light": {
+            "source": "$badge-light-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.light}"
+          },
+          "dark": {
+            "source": "$badge-dark-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.dark}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Breadcrumb.json b/tokens/src/themes/dark/components/Breadcrumb.json
new file mode 100644
index 00000000000..a8133f71384
--- /dev/null
+++ b/tokens/src/themes/dark/components/Breadcrumb.json
@@ -0,0 +1,14 @@
+{
+  "color": {
+    "$type": "color",
+    "breadcrumb": {
+      "base": { "source": "$breadcrumb-color", "$value": "{color.theme.default.primary}" },
+      "active": { "source": "$breadcrumb-active-color", "$value": "{color.gray.700}" },
+      "inverse": {
+        "base": { "source": "$breadcrumb-inverse-color", "$value": "{color.white}" },
+        "active": { "source": "$breadcrumb-inverse-active", "$value": "{color.light.500}" },
+        "spacer": { "source": "$breadcrumb-inverse-spacer", "$value": "{color.light.700}" }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Bubble.json b/tokens/src/themes/dark/components/Bubble.json
new file mode 100644
index 00000000000..baa7252177a
--- /dev/null
+++ b/tokens/src/themes/dark/components/Bubble.json
@@ -0,0 +1,19 @@
+{
+  "color": {
+    "$type": "color",
+    "bubble": {
+      "text": {
+        "success": { "source": "$bubble-success-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.success.base}" },
+        "warning": { "source": "$bubble-warning-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.warning.base}" },
+        "error": { "source": "$bubble-error-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.danger.base}" },
+        "primary": { "source": "$bubble-primary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.primary.base}" }
+      },
+      "bg": {
+        "success": { "source": "$bubble-success-bg", "$value": "{color.success.base}" },
+        "warning": { "source": "$bubble-warning-bg", "$value": "{color.warning.base}" },
+        "error": { "source": "$bubble-error-bg", "$value": "{color.danger.base}" },
+        "primary": { "source": "$bubble-primary-bg", "$value": "{color.primary.base}" }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Button/brand.json b/tokens/src/themes/dark/components/Button/brand.json
new file mode 100644
index 00000000000..3bad90f174f
--- /dev/null
+++ b/tokens/src/themes/dark/components/Button/brand.json
@@ -0,0 +1,312 @@
+{
+  "color": {
+    "$type": "color",
+    "btn": {
+      "text": {
+        "brand": {
+          "source": "$btn-brand-color",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.brand}"
+        },
+        "outline-brand": {
+          "source": "$btn-brand-outline-color",
+          "$value": "{color.theme.default.brand}"
+        },
+        "inverse-brand": {
+          "source": "$btn-brand-inverse-color",
+          "$value": "{color.brand.base}"
+        },
+        "inverse-outline-brand": {
+          "source": "$btn-brand-inverse-outline-color",
+          "$value": "{color.white}"
+        }
+      },
+      "bg": {
+        "brand": {
+          "source": "$btn-brand-bg",
+          "$value": "{color.brand.base}"
+        },
+        "outline-brand": {
+          "source": "$btn-brand-outline-bg",
+          "$value": "inherit"
+        },
+        "inverse-brand": {
+          "source": "$btn-brand-inverse-bg",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-brand}"
+        },
+        "inverse-outline-brand": {
+          "source": "$btn-brand-inverse-outline-bg",
+          "$value": "transparent"
+        }
+      },
+      "border": {
+        "brand": {
+          "source": "$btn-brand-border-color",
+          "$value": "{color.btn.bg.brand}"
+        },
+        "outline-brand": {
+          "source": "$btn-brand-outline-border-color",
+          "$value": "{color.theme.default.brand}"
+        },
+        "inverse-outline-brand": {
+          "source": "$btn-brand-inverse-outline-border-color",
+          "$value": "{color.white}"
+        },
+        "inverse-brand": {
+          "source": "$btn-brand-inverse-border-color",
+          "$value": "transparent"
+        }
+      },
+      "hover": {
+        "text": {
+          "brand": {
+            "source": "$btn-brand-hover-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-hover-color",
+            "$value": "{color.btn.text.outline-brand}"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-brand}"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-hover-color",
+            "$value": "{color.btn.text.inverse-outline-brand}"
+          }
+        },
+        "bg": {
+          "brand": {
+            "source": "$btn-brand-hover-bg",
+            "$value": "{color.theme.hover.brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-hover-bg",
+            "$value": "{color.brand.100}"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-hover-bg",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-brand}"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-hover-bg",
+            "$value": "{color.brand.100}"
+          }
+        },
+        "border": {
+          "brand": {
+            "source": "$btn-brand-hover-border-color",
+            "$value": "{color.theme.hover.brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-hover-border-color",
+            "$value": "{color.brand.900}"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-hover-border-color",
+            "$value": "transparent"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-hover-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "active": {
+        "text": {
+          "brand": {
+            "source": "$btn-brand-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-brand}"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-active-color",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-brand}"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-brand}"
+          }
+        },
+        "bg": {
+          "brand": {
+            "source": "$btn-brand-active-bg",
+            "$value": "{color.theme.active.brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-active-bg",
+            "$value": "{color.theme.bg.brand}"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.brand}"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-active-bg",
+            "$value": "{color.gray.100}"
+          }
+        },
+        "border": {
+          "brand": {
+            "source": "$btn-brand-active-border-color",
+            "$value": "{color.theme.active.brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-active-border-color",
+            "$value": "{color.theme.active.brand}"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-active-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-active-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "focus": {
+        "text": {
+          "brand": {
+            "source": "$btn-brand-focus-color",
+            "$value": "{color.btn.text.brand}"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-focus-color",
+            "$value": "{color.btn.text.outline-brand}"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-brand}"
+          }
+        },
+        "border": {
+          "brand": {
+            "source": "$btn-brand-focus-border-color",
+            "$value": "{color.btn.border.brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-brand}"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-focus-border-color",
+            "$value": "{color.white}"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-brand}"
+          }
+        },
+        "bg": {
+          "brand": {
+            "source": "$btn-brand-focus-bg",
+            "$value": "{color.btn.bg.brand}"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
+        },
+        "outline": {
+          "brand": {
+            "source": "$btn-brand-focus-outline-color",
+            "$value": "{color.theme.focus.brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-focus-outline-color",
+            "$value": "{color.theme.focus.brand}"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-brand}"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-outline-brand}"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "brand": {
+            "source": "$btn-brand-disabled-color",
+            "$value": "{color.btn.text.brand}"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-disabled-color",
+            "$value": "{color.brand.500}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-disabled-color",
+            "$value": "{color.btn.hover.text.outline-brand}"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-brand}"
+          }
+        },
+        "bg": {
+          "brand": {
+            "source": "$btn-brand-disabled-bg",
+            "$value": "{color.btn.bg.brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-disabled-bg",
+            "$value": "{color.white}"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-disabled-bg",
+            "$value": "{color.btn.bg.inverse-outline-brand}"
+          }
+        },
+        "border": {
+          "brand": {
+            "source": "$btn-brand-disabled-border-color",
+            "$value": "{color.btn.border.brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-disabled-border-color",
+            "$value": "{color.btn.border.outline-brand}"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-disabled-border-color",
+            "$value": "{color.btn.disabled.bg.inverse-brand}"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.text.inverse-outline-brand}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Button/core.json b/tokens/src/themes/dark/components/Button/core.json
new file mode 100644
index 00000000000..2a8c1f4bfe5
--- /dev/null
+++ b/tokens/src/themes/dark/components/Button/core.json
@@ -0,0 +1,23 @@
+{
+  "color": {
+    "$type": "color",
+    "btn": {
+      "disabled-link": { "source": "$btn-link-disabled-color", "$value": "{color.disabled}" }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "btn": {
+      "box-shadow": {
+        "base": { "source": "$btn-box-shadow", "$value": "none" },
+        "active": { "source": "$btn-active-box-shadow", "$value": "none" }
+      }
+    }
+  },
+  "other": {
+    "$type": "number",
+    "btn": {
+      "disabled-opacity": { "source": "$btn-disabled-opacity", "$value": ".65" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Button/danger.json b/tokens/src/themes/dark/components/Button/danger.json
new file mode 100644
index 00000000000..bfbeeb6044f
--- /dev/null
+++ b/tokens/src/themes/dark/components/Button/danger.json
@@ -0,0 +1,306 @@
+{
+  "color": {
+    "$type": "color",
+    "btn": {
+      "text": {
+        "danger": {
+          "source": "$btn-danger-color",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.danger}"
+        },
+        "outline-danger": { "source": "$btn-danger-outline-color", "$value": "{color.theme.default.danger}" },
+        "inverse-danger": {
+          "source": "$btn-danger-inverse-color",
+          "$value": "{color.danger.base}"
+        },
+        "inverse-outline-danger": {
+          "source": "$btn-danger-inverse-outline-color",
+          "$value": "{color.white}"
+        }
+      },
+      "bg": {
+        "danger": { "source": "$btn-danger-bg", "$value": "{color.danger.base}" },
+        "outline-danger": {
+          "source": "$btn-danger-outline-bg",
+          "$value": "inherit"
+        },
+        "inverse-danger": {
+          "source": "$btn-danger-inverse-bg",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-danger}"
+        },
+        "inverse-outline-danger": {
+          "source": "$btn-danger-inverse-outline-bg",
+          "$value": "transparent"
+        }
+      },
+      "border": {
+        "danger": {
+          "source": "$btn-danger-border-color",
+          "$value": "{color.btn.bg.danger}"
+        },
+        "outline-danger": {
+          "source": "$btn-danger-outline-border-color",
+          "$value": "{color.theme.default.danger}"
+        },
+        "inverse-danger": {
+          "source": "$btn-danger-inverse-border-color",
+          "$value": "transparent"
+        },
+        "inverse-outline-danger": {
+          "source": "$btn-danger-inverse-outline-border-color",
+          "$value": "{color.white}"
+        }
+      },
+      "hover": {
+        "text": {
+          "danger": {
+            "source": "$btn-danger-hover-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-hover-color",
+            "$value": "{color.theme.hover.danger}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-danger}"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.danger}"
+          }
+        },
+        "bg": {
+          "danger": {
+            "source": "$btn-danger-hover-bg",
+            "$value": "{color.theme.hover.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-hover-bg",
+            "$value": "{color.danger.100}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-hover-bg",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-danger}"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-hover-bg",
+            "$value": "{color.danger.100}"
+          }
+        },
+        "border": {
+          "danger": {
+            "source": "$btn-danger-hover-border-color",
+            "$value": "{color.theme.hover.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-hover-border-color",
+            "$value": "{color.danger.900}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-hover-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-hover-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "active": {
+        "text": {
+          "danger": {
+            "source": "$btn-danger-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-danger}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-active-color",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-danger}"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-danger}"
+          }
+        },
+        "bg": {
+          "danger": {
+            "source": "$btn-danger-active-bg",
+            "$value": "{color.theme.active.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-active-bg",
+            "$value": "{color.theme.bg.danger}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-active-bg",
+            "$value": "{color.gray.100}"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.danger}"
+          }
+        },
+        "border": {
+          "danger": {
+            "source": "$btn-danger-active-border-color",
+            "$value": "{color.theme.active.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-active-border-color",
+            "$value": "{color.theme.active.danger}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-active-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-active-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "focus": {
+        "text": {
+          "danger": {
+            "source": "$btn-danger-focus-color",
+            "$value": "{color.btn.text.danger}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-focus-color",
+            "$value": "{color.btn.text.outline-danger}"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-danger}"
+          }
+        },
+        "border": {
+          "danger": {
+            "source": "$btn-danger-focus-border-color",
+            "$value": "{color.btn.focus.bg.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-danger}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-focus-border-color",
+            "$value": "{color.white}"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-focus-border-color",
+            "$value": "{color.white}"
+          }
+        },
+        "bg": {
+          "danger": {
+            "source": "$btn-danger-focus-bg",
+            "$value": "{color.btn.bg.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-danger}"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
+        },
+        "outline": {
+          "danger": {
+            "source": "$btn-danger-focus-outline-color",
+            "$value": "{color.theme.focus.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-focus-outline-color",
+            "$value": "{color.theme.focus.danger}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-danger}"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-danger}"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "danger": {
+            "source": "$btn-danger-disabled-color",
+            "$value": "{color.btn.text.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-disabled-color",
+            "$value": "{color.btn.hover.text.outline-danger}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-disabled-color",
+            "$value": "{color.danger.base}"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-danger}"
+          }
+        },
+        "bg": {
+          "danger": {
+            "source": "$btn-danger-disabled-bg",
+            "$value": "{color.btn.bg.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-disabled-bg",
+            "$value": "transparent"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
+        },
+        "border": {
+          "danger": {
+            "source": "$btn-danger-disabled-border-color",
+            "$value": "{color.btn.border.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-disabled-border-color",
+            "$value": "{color.btn.border.outline-danger}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-disabled-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.border.inverse-outline-danger}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Button/dark.json b/tokens/src/themes/dark/components/Button/dark.json
new file mode 100644
index 00000000000..6ac27c71a6d
--- /dev/null
+++ b/tokens/src/themes/dark/components/Button/dark.json
@@ -0,0 +1,312 @@
+{
+  "color": {
+    "$type": "color",
+    "btn": {
+      "text": {
+        "dark": {
+          "source": "$btn-dark-color",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.dark}"
+        },
+        "outline-dark": {
+          "source": "$btn-dark-outline-color",
+          "$value": "{color.theme.default.dark}"
+        },
+        "inverse-dark": {
+          "source": "$btn-dark-inverse-color",
+          "$value": "{color.dark.base}"
+        },
+        "inverse-outline-dark": {
+          "source": "$btn-dark-inverse-outline-color",
+          "$value": "{color.white}"
+        }
+      },
+      "bg": {
+        "dark": {
+          "source": "$btn-dark-bg",
+          "$value": "{color.dark.base}"
+        },
+        "outline-dark": {
+          "source": "$btn-dark-outline-bg",
+          "$value": "inherit"
+        },
+        "inverse-dark": {
+          "source": "$btn-dark-inverse-bg",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-dark}"
+        },
+        "inverse-outline-dark": {
+          "source": "$btn-dark-inverse-outline-bg",
+          "$value": "transparent"
+        }
+      },
+      "border": {
+        "dark": {
+          "source": "$btn-dark-border-color",
+          "$value": "{color.btn.bg.dark}"
+        },
+        "outline-dark": {
+          "source": "$btn-dark-outline-border-color",
+          "$value": "{color.theme.default.dark}"
+        },
+        "inverse-dark": {
+          "source": "$btn-dark-inverse-border-color",
+          "$value": "transparent"
+        },
+        "inverse-outline-dark": {
+          "source": "$btn-dark-inverse-outline-border-color",
+          "$value": "{color.white}"
+        }
+      },
+      "hover": {
+        "text": {
+          "dark": {
+            "source": "$btn-dark-hover-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-hover-color",
+            "$value": "{color.btn.text.outline-dark}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-dark}"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-hover-color",
+            "$value": "{color.btn.text.inverse-outline-dark}"
+          }
+        },
+        "bg": {
+          "dark": {
+            "source": "$btn-dark-hover-bg",
+            "$value": "{color.theme.hover.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-hover-bg",
+            "$value": "{color.dark.100}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-hover-bg",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-dark}"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-hover-bg",
+            "$value": "{color.dark.100}"
+          }
+        },
+        "border": {
+          "dark": {
+            "source": "$btn-dark-hover-border-color",
+            "$value": "{color.theme.hover.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-hover-border-color",
+            "$value": "{color.dark.900}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-hover-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-hover-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "active": {
+        "text": {
+          "dark": {
+            "source": "$btn-dark-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-dark}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-active-color",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-dark}"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-dark}"
+          }
+        },
+        "bg": {
+          "dark": {
+            "source": "$btn-dark-active-bg",
+            "$value": "{color.theme.active.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-active-bg",
+            "$value": "{color.theme.bg.dark}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-active-bg",
+            "$value": "{color.gray.100}"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.dark}"
+          }
+        },
+        "border": {
+          "dark": {
+            "source": "$btn-dark-active-border-color",
+            "$value": "{color.theme.active.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-active-border-color",
+            "$value": "{color.theme.active.dark}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-active-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-active-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "focus": {
+        "text": {
+          "dark": {
+            "source": "$btn-dark-focus-color",
+            "$value": "{color.btn.text.dark}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-focus-color",
+            "$value": "inherit"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-dark}"
+          }
+        },
+        "border": {
+          "dark": {
+            "source": "$btn-dark-focus-border-color",
+            "$value": "{color.btn.focus.bg.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-dark}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-focus-border-color",
+            "$value": "{color.white}"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-focus-border-color",
+            "$value": "{color.white}"
+          }
+        },
+        "bg": {
+          "dark": {
+            "source": "$btn-dark-focus-bg",
+            "$value": "{color.btn.bg.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-dark}"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
+        },
+        "outline": {
+          "dark": {
+            "source": "$btn-dark-focus-outline-color",
+            "$value": "{color.theme.focus.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-focus-outline-color",
+            "$value": "{color.theme.focus.dark}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-dark}"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-focus-border-color",
+            "$value": "{color.btn.focus.border.inverse-outline-dark}"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "dark": {
+            "source": "$btn-dark-disabled-color",
+            "$value": "{color.btn.text.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-disabled-color",
+            "$value": "inherit"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-disabled-color",
+            "$value": "{color.btn.text.inverse-dark}"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-dark}"
+          }
+        },
+        "bg": {
+          "dark": {
+            "source": "$btn-dark-disabled-bg",
+            "$value": "{color.btn.bg.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
+        },
+        "border": {
+          "dark": {
+            "source": "$btn-dark-disabled-border-color",
+            "$value": "{color.btn.border.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-disabled-border-color",
+            "$value": "{color.btn.hover.text.outline-dark}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-disabled-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.focus.border.inverse-outline-dark}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Button/info.json b/tokens/src/themes/dark/components/Button/info.json
new file mode 100644
index 00000000000..18fdd45f01e
--- /dev/null
+++ b/tokens/src/themes/dark/components/Button/info.json
@@ -0,0 +1,312 @@
+{
+  "color": {
+    "$type": "color",
+    "btn": {
+      "text": {
+        "info": {
+          "source": "$btn-info-color",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.info}"
+        },
+        "outline-info": {
+          "source": "$btn-info-outline-color",
+          "$value": "{color.theme.default.info}"
+        },
+        "inverse-info": {
+          "source": "$btn-info-inverse-color",
+          "$value": "{color.info.base}"
+        },
+        "inverse-outline-info": {
+          "source": "$btn-info-inverse-outline-color",
+          "$value": "{color.white}"
+        }
+      },
+      "bg": {
+        "info": {
+          "source": "$btn-info-bg",
+          "$value": "{color.info.base}"
+        },
+        "outline-info": {
+          "source": "$btn-info-outline-bg",
+          "$value": "inherit"
+        },
+        "inverse-info": {
+          "source": "$btn-info-inverse-bg",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-info}"
+        },
+        "inverse-outline-info": {
+          "source": "$btn-info-inverse-outline-bg",
+          "$value": "inherit"
+        }
+      },
+      "border": {
+        "info": {
+          "source": "$btn-info-border-color",
+          "$value": "{color.btn.bg.info}"
+        },
+        "outline-info": {
+          "source": "$btn-info-outline-border-color",
+          "$value": "{color.theme.default.info}"
+        },
+        "inverse-info": {
+          "source": "$btn-info-inverse-border-color",
+          "$value": "transparent"
+        },
+        "inverse-outline-info": {
+          "source": "$btn-info-inverse-outline-border-color",
+          "$value": "{color.white}"
+        }
+      },
+      "hover": {
+        "text": {
+          "info": {
+            "source": "$btn-info-hover-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-hover-color",
+            "$value": "{color.theme.hover.info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-info}"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.info}"
+          }
+        },
+        "bg": {
+          "info": {
+            "source": "$btn-info-hover-bg",
+            "$value": "{color.theme.hover.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-hover-bg",
+            "$value": "{color.info.100}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-hover-bg",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-info}"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-hover-bg",
+            "$value": "{color.info.100}"
+          }
+        },
+        "border": {
+          "info": {
+            "source": "$btn-info-hover-border-color",
+            "$value": "{color.theme.hover.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-hover-border-color",
+            "$value": "{color.info.900}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-hover-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-hover-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "active": {
+        "text": {
+          "info": {
+            "source": "$btn-info-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-active-color",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-info}"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-info}"
+          }
+        },
+        "bg": {
+          "info": {
+            "source": "$btn-info-active-bg",
+            "$value": "{color.theme.active.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-active-bg",
+            "$value": "{color.theme.bg.info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-active-bg",
+            "$value": "{color.gray.100}"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.info}"
+          }
+        },
+        "border": {
+          "info": {
+            "source": "$btn-info-active-border-color",
+            "$value": "{color.theme.active.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-active-border-color",
+            "$value": "{color.theme.active.info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-active-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-active-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "focus": {
+        "text": {
+          "info": {
+            "source": "$btn-info-focus-color",
+            "$value": "{color.btn.text.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-focus-color",
+            "$value": "{color.btn.text.outline-info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-info}"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-info}"
+          }
+        },
+        "border": {
+          "info": {
+            "source": "$btn-info-focus-border-color",
+            "$value": "{color.btn.border.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-focus-border-color",
+            "$value": "{color.white}"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-info}"
+          }
+        },
+        "bg": {
+          "info": {
+            "source": "$btn-info-focus-bg",
+            "$value": "{color.btn.bg.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-info}"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
+        },
+        "outline": {
+          "info": {
+            "source": "$btn-info-focus-outline-color",
+            "$value": "{color.theme.focus.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-focus-outline-color",
+            "$value": "{color.theme.focus.info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-info}"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-outline-info}"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "info": {
+            "source": "$btn-info-disabled-color",
+            "$value": "{color.btn.text.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-disabled-color",
+            "$value": "{color.btn.text.outline-info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-disabled-color",
+            "$value": "{color.info.base}"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-info}"
+          }
+        },
+        "bg": {
+          "info": {
+            "source": "$btn-info-disabled-bg",
+            "$value": "{color.btn.bg.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
+        },
+        "border": {
+          "info": {
+            "source": "$btn-info-disabled-border-color",
+            "$value": "{color.btn.bg.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-disabled-border-color",
+            "$value": "{color.btn.border.outline-info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-disabled-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.border.inverse-outline-info}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Button/light.json b/tokens/src/themes/dark/components/Button/light.json
new file mode 100644
index 00000000000..f7e76f50d87
--- /dev/null
+++ b/tokens/src/themes/dark/components/Button/light.json
@@ -0,0 +1,312 @@
+{
+  "color": {
+    "$type": "color",
+    "btn": {
+      "text": {
+        "light": {
+          "source": "$btn-light-color",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.light}"
+        },
+        "outline-light": {
+          "source": "$btn-light-outline-color",
+          "$value": "{color.light.base}"
+        },
+        "inverse-light": {
+          "source": "$btn-light-inverse-color",
+          "$value": "{color.light.base}"
+        },
+        "inverse-outline-light": {
+          "source": "$btn-light-inverse-outline-color",
+          "$value": "{color.white}"
+        }
+      },
+      "bg": {
+        "light": {
+          "source": "$btn-light-bg",
+          "$value": "{color.light.base}"
+        },
+        "inverse-light": {
+          "source": "$btn-light-inverse-bg",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-light}"
+        },
+        "outline-light": {
+          "source": "$btn-light-outline-bg",
+          "$value": "inherit"
+        },
+        "inverse-outline-light": {
+          "source": "$btn-light-inverse-outline-bg",
+          "$value": "inherit"
+        }
+      },
+      "border": {
+        "light": {
+          "source": "$btn-light-border-color",
+          "$value": "{color.btn.bg.light}"
+        },
+        "outline-light": {
+          "source": "$btn-light-outline-border-color",
+          "$value": "{color.light.base}"
+        },
+        "inverse-light": {
+          "source": "$btn-light-inverse-border-color",
+          "$value": "transparent"
+        },
+        "inverse-outline-light": {
+          "source": "$btn-light-inverse-outline-border-color",
+          "$value": "{color.white}"
+        }
+      },
+      "hover": {
+        "text": {
+          "light": {
+            "source": "$btn-light-hover-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-hover-color",
+            "$value": "{color.theme.hover.light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-light}"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.light}"
+          }
+        },
+        "bg": {
+          "light": {
+            "source": "$btn-light-hover-bg",
+            "$value": "{color.theme.hover.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-hover-bg",
+            "$value": "{color.light.100}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-hover-bg",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-light}"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-hover-bg",
+            "$value": "{color.light.100}"
+          }
+        },
+        "border": {
+          "light": {
+            "source": "$btn-light-hover-border-color",
+            "$value": "{color.theme.hover.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-hover-border-color",
+            "$value": "{color.light.900}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-hover-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-hover-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "active": {
+        "text": {
+          "light": {
+            "source": "$btn-light-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-active-color",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-light}"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-light}"
+          }
+        },
+        "bg": {
+          "light": {
+            "source": "$btn-light-active-bg",
+            "$value": "{color.theme.active.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-active-bg",
+            "$value": "{color.theme.bg.light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-active-bg",
+            "$value": "{color.gray.100}"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.light}"
+          }
+        },
+        "border": {
+          "light": {
+            "source": "$btn-light-active-border-color",
+            "$value": "{color.theme.active.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-active-border-color",
+            "$value": "{color.theme.active.light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-active-border-color",
+            "$value": "inherit"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-active-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "focus": {
+        "text": {
+          "light": {
+            "source": "$btn-light-focus-color",
+            "$value": "{color.btn.text.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-focus-color",
+            "$value": "{color.btn.text.outline-light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-light}"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-light}"
+          }
+        },
+        "border": {
+          "light": {
+            "source": "$btn-light-focus-border-color",
+            "$value": "{color.btn.border.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-focus-border-color",
+            "$value": "{color.btn.border.inverse-light}"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-light}"
+          }
+        },
+        "bg": {
+          "light": {
+            "source": "$btn-light-focus-bg",
+            "$value": "{color.btn.bg.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-focus-bg",
+            "$value": "transparent"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-light}"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
+        },
+        "outline": {
+          "light": {
+            "source": "$btn-light-focus-outline-color",
+            "$value": "{color.primary.300}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-focus-outline-color",
+            "$value": "{color.theme.focus.light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-focus-outline-color",
+            "$value": "{color.white}"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-outline-light}"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "light": {
+            "source": "$btn-light-disabled-color",
+            "$value": "{color.btn.text.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-disabled-color",
+            "$value": "{color.btn.hover.text.outline-light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-disabled-color",
+            "$value": "{color.btn.text.inverse-light}"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-light}"
+          }
+        },
+        "bg": {
+          "light": {
+            "source": "$btn-light-disabled-bg",
+            "$value": "{color.btn.bg.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
+        },
+        "border": {
+          "light": {
+            "source": "$btn-light-disabled-border-color",
+            "$value": "{color.btn.border.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-disabled-border-color",
+            "$value": "{color.btn.hover.text.outline-light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-disabled-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.border.inverse-outline-light}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Button/primary.json b/tokens/src/themes/dark/components/Button/primary.json
new file mode 100644
index 00000000000..28e02f4997f
--- /dev/null
+++ b/tokens/src/themes/dark/components/Button/primary.json
@@ -0,0 +1,312 @@
+{
+  "color": {
+    "$type": "color",
+    "btn": {
+      "text": {
+        "primary": {
+          "source": "$btn-primary-color",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.primary}"
+        },
+        "outline-primary": {
+          "source": "$btn-primary-outline-color",
+          "$value": "{color.theme.default.primary}"
+        },
+        "inverse-primary": {
+          "source": "$btn-primary-inverse-color",
+          "$value": "{color.primary.base}"
+        },
+        "inverse-outline-primary": {
+          "source": "$btn-primary-inverse-outline-color",
+          "$value": "{color.white}"
+        }
+      },
+      "bg": {
+        "primary": {
+          "source": "$btn-primary-bg",
+          "$value": "{color.primary.base}"
+        },
+        "outline-primary": {
+          "source": "$btn-primary-outline-bg",
+          "$value": "transparent"
+        },
+        "inverse-outline-primary": {
+          "source": "$btn-primary-inverse-outline-bg",
+          "$value": "transparent"
+        },
+        "inverse-primary": {
+          "source": "$btn-primary-inverse-bg",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-primary}"
+        }
+      },
+      "border": {
+        "primary": {
+          "source": "$btn-primary-border-color",
+          "$value": "{color.btn.bg.primary}"
+        },
+        "outline-primary": {
+          "source": "$btn-primary-outline-border-color",
+          "$value": "{color.theme.default.primary}"
+        },
+        "inverse-outline-primary": {
+          "source": "$btn-primary-inverse-outline-border-color",
+          "$value": "{color.white}"
+        },
+        "inverse-primary": {
+          "source": "$btn-primary-inverse-border-color",
+          "$value": "transparent"
+        }
+      },
+      "hover": {
+        "text": {
+          "primary": {
+            "source": "$btn-primary-hover-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.primary}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-hover-color",
+            "$value": "{color.btn.text.outline-primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-primary}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-hover-color",
+            "$value": "{color.btn.text.inverse-outline-primary}"
+          }
+        },
+        "bg": {
+          "primary": {
+            "source": "$btn-primary-hover-bg",
+            "$value": "{color.theme.hover.primary}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-hover-bg",
+            "$value": "{color.primary.100}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-hover-bg",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-primary}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-hover-bg",
+            "$value": "{color.primary.100}"
+          }
+        },
+        "border": {
+          "primary": {
+            "source": "$btn-primary-hover-border-color",
+            "$value": "{color.theme.hover.primary}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-hover-border-color",
+            "$value": "{color.primary.900}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-hover-border-color",
+            "$value": "transparent"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-hover-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "active": {
+        "text": {
+          "primary": {
+            "source": "$btn-primary-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.primary}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-active-color",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-primary}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-primary}"
+          }
+        },
+        "bg": {
+          "primary": {
+            "source": "$btn-primary-active-bg",
+            "$value": "{color.theme.active.primary}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-active-bg",
+            "$value": "{color.theme.bg.primary}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-active-bg",
+            "$value": "{color.gray.100}"
+          }
+        },
+        "border": {
+          "primary": {
+            "source": "$btn-primary-active-border-color",
+            "$value": "{color.theme.active.primary}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-active-border-color",
+            "$value": "{color.theme.active.primary}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-active-border-color",
+            "$value": "transparent"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-active-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "focus": {
+        "text": {
+          "primary": {
+            "source": "$btn-primary-focus-color",
+            "$value": "{color.btn.text.primary}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-focus-color",
+            "$value": "{color.btn.text.outline-primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-primary}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-primary}"
+          }
+        },
+        "border": {
+          "primary": {
+            "source": "$btn-primary-focus-border-color",
+            "$value": "{color.btn.border.primary}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-focus-border-color",
+            "$value": "{color.white}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-primary}"
+          }
+        },
+        "outline": {
+          "primary": {
+            "source": "$btn-primary-focus-focus-outline-color",
+            "$value": "{color.theme.focus.primary}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-focus-outline-color",
+            "$value": "{color.theme.focus.primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-primary}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.border.inverse-outline-primary}"
+          }
+        },
+        "bg": {
+          "primary": {
+            "source": "$btn-primary-focus-bg",
+            "$value": "{color.btn.bg.primary}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-primary}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "primary": {
+            "source": "$btn-primary-disabled-color",
+            "$value": "{color.btn.text.primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-disabled-color",
+            "$value": "{color.primary.500}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-disabled-color",
+            "$value": "{color.btn.hover.text.outline-primary}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-primary}"
+          }
+        },
+        "bg": {
+          "primary": {
+            "source": "$btn-primary-disabled-bg",
+            "$value": "{color.btn.bg.primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-disabled-bg",
+            "$value": "{color.white}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
+        },
+        "border": {
+          "primary": {
+            "source": "$btn-primary-disabled-border-color",
+            "$value": "{color.btn.border.primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-disabled-border-color",
+            "$value": "transparent"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-disabled-border-color",
+            "$value": "{color.btn.hover.text.outline-primary}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.text.inverse-outline-primary}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Button/secondary.json b/tokens/src/themes/dark/components/Button/secondary.json
new file mode 100644
index 00000000000..c8057ffa9bb
--- /dev/null
+++ b/tokens/src/themes/dark/components/Button/secondary.json
@@ -0,0 +1,312 @@
+{
+  "color": {
+    "$type": "color",
+    "btn": {
+      "text": {
+        "secondary": {
+          "source": "$btn-secondary-color",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.secondary}"
+        },
+        "outline-secondary": {
+          "source": "$btn-secondary-outline-color",
+          "$value": "{color.secondary.base}"
+        },
+        "inverse-secondary": {
+          "source": "$btn-secondary-inverse-color",
+          "$value": "{color.secondary.base}"
+        },
+        "inverse-outline-secondary": {
+          "source": "$btn-secondary-inverse-outline-color",
+          "$value": "{color.white}"
+        }
+      },
+      "bg": {
+        "secondary": {
+          "source": "$btn-secondary-bg",
+          "$value": "{color.secondary.base}"
+        },
+        "outline-secondary": {
+          "source": "$btn-secondary-outline-bg",
+          "$value": "inherit"
+        },
+        "inverse-outline-secondary": {
+          "source": "$btn-secondary-inverse-outline-bg",
+          "$value": "inherit"
+        },
+        "inverse-secondary": {
+          "source": "$btn-secondary-inverse-bg",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-secondary}"
+        }
+      },
+      "border": {
+        "secondary": {
+          "source": "$btn-secondary-border-color",
+          "$value": "{color.btn.bg.secondary}"
+        },
+        "outline-secondary": {
+          "source": "$btn-secondary-outline-border-color",
+          "$value": "{color.secondary.base}"
+        },
+        "inverse-outline-secondary": {
+          "source": "$btn-secondary-inverse-outline-border-color",
+          "$value": "{color.white}"
+        },
+        "inverse-secondary": {
+          "source": "$btn-secondary-inverse-border-color",
+          "$value": "transparent"
+        }
+      },
+      "hover": {
+        "text": {
+          "secondary": {
+            "source": "$btn-secondary-hover-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-hover-color",
+            "$value": "{color.theme.hover.secondary}"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-secondary}"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.secondary}"
+          }
+        },
+        "bg": {
+          "secondary": {
+            "source": "$btn-secondary-hover-bg",
+            "$value": "{color.theme.hover.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-hover-bg",
+            "$value": "{color.secondary.100}"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-hover-bg",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-secondary}"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-hover-bg",
+            "$value": "{color.secondary.100}"
+          }
+        },
+        "border": {
+          "secondary": {
+            "source": "$btn-secondary-hover-border-color",
+            "$value": "{color.theme.hover.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-hover-border-color",
+            "$value": "{color.secondary.900}"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-hover-border-color",
+            "$value": "transparent"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-hover-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "active": {
+        "text": {
+          "secondary": {
+            "source": "$btn-secondary-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-secondary}"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-active-color",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-secondary}"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-secondary}"
+          }
+        },
+        "bg": {
+          "secondary": {
+            "source": "$btn-secondary-active-bg",
+            "$value": "{color.theme.active.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-active-bg",
+            "$value": "{color.theme.bg.secondary}"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.secondary}"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-active-bg",
+            "$value": "{color.gray.100}"
+          }
+        },
+        "border": {
+          "secondary": {
+            "source": "$btn-secondary-active-border-color",
+            "$value": "{color.theme.active.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-active-border-color",
+            "$value": "{color.theme.active.secondary}"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-active-border-color",
+            "$value": "transparent"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-active-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "focus": {
+        "text": {
+          "secondary": {
+            "source": "$btn-secondary-focus-color",
+            "$value": "{color.btn.text.secondary}"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-focus-color",
+            "$value": "inherit"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-focus-color",
+            "$value": "{color.btn.text.outline-secondary}"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-secondary}"
+          }
+        },
+        "border": {
+          "secondary": {
+            "source": "$btn-secondary-focus-border-color",
+            "$value": "{color.btn.bg.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-secondary}"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-focus-border-color",
+            "$value": "{color.white}"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-focus-border-color",
+            "$value": "{color.white}"
+          }
+        },
+        "outline": {
+          "secondary": {
+            "source": "$btn-secondary-focus-outline-color",
+            "$value": "{color.theme.focus.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-focus-outline-color",
+            "$value": "{color.theme.focus.secondary}"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-focus-outline-color",
+            "$value": "{color.white}"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.border.inverse-outline-secondary}"
+          }
+        },
+        "bg": {
+          "secondary": {
+            "source": "$btn-secondary-focus-bg",
+            "$value": "{color.btn.bg.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-focus-bg",
+            "$value": "transparent"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-secondary}"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "secondary": {
+            "source": "$btn-secondary-disabled-color",
+            "$value": "{color.btn.text.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-disabled-color",
+            "$value": "inherit"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-disabled-color",
+            "$value": "inherit"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-secondary}"
+          }
+        },
+        "bg": {
+          "secondary": {
+            "source": "$btn-secondary-disabled-bg",
+            "$value": "{color.btn.bg.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
+        },
+        "border": {
+          "secondary": {
+            "source": "$btn-secondary-disabled-border-color",
+            "$value": "inherit"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-disabled-border-color",
+            "$value": "{color.secondary.base}"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-disabled-border-color",
+            "$value": "{color.btn.border.inverse-secondary}"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.border.inverse-outline-secondary}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Button/success.json b/tokens/src/themes/dark/components/Button/success.json
new file mode 100644
index 00000000000..ce0157ea0c3
--- /dev/null
+++ b/tokens/src/themes/dark/components/Button/success.json
@@ -0,0 +1,312 @@
+{
+  "color": {
+    "$type": "color",
+    "btn": {
+      "text": {
+        "success": {
+          "source": "$btn-success-color",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.success}"
+        },
+        "outline-success": {
+          "source": "$btn-success-outline-color",
+          "$value": "{color.theme.default.success}"
+        },
+        "inverse-success": {
+          "source": "$btn-success-inverse-color",
+          "$value": "{color.success.base}"
+        },
+        "inverse-outline-success": {
+          "source": "$btn-success-inverse-outline-color",
+          "$value": "{color.white}"
+        }
+      },
+      "bg": {
+        "success": {
+          "source": "$btn-success-bg",
+          "$value": "{color.success.base}"
+        },
+        "outline-success": {
+          "source": "$btn-success-outline-bg",
+          "$value": "inherit"
+        },
+        "inverse-success": {
+          "source": "$btn-success-inverse-bg",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-success}"
+        },
+        "inverse-outline-success": {
+          "source": "$btn-success-inverse-outline-bg",
+          "$value": "inherit"
+        }
+      },
+      "border": {
+        "success": {
+          "source": "$btn-success-border-color",
+          "$value": "{color.btn.bg.success}"
+        },
+        "outline-success": {
+          "source": "$btn-success-outline-border-color",
+          "$value": "{color.theme.default.success}"
+        },
+        "inverse-success": {
+          "source": "$btn-success-inverse-border-color",
+          "$value": "transparent"
+        },
+        "inverse-outline-success": {
+          "source": "$btn-success-inverse-outline-border-color",
+          "$value": "{color.white}"
+        }
+      },
+      "hover": {
+        "text": {
+          "success": {
+            "source": "$btn-success-hover-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-hover-color",
+            "$value": "{color.theme.hover.success}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-success}"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.success}"
+          }
+        },
+        "bg": {
+          "success": {
+            "source": "$btn-success-hover-bg",
+            "$value": "{color.theme.hover.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-hover-bg",
+            "$value": "{color.success.100}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-hover-bg",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-success}"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-hover-bg",
+            "$value": "{color.success.100}"
+          }
+        },
+        "border": {
+          "success": {
+            "source": "$btn-success-hover-border-color",
+            "$value": "{color.theme.hover.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-hover-border-color",
+            "$value": "{color.success.900}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-hover-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-hover-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "active": {
+        "text": {
+          "success": {
+            "source": "$btn-success-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-success}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-active-color",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-success}"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-success}"
+          }
+        },
+        "bg": {
+          "success": {
+            "source": "$btn-success-active-bg",
+            "$value": "{color.theme.active.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-active-bg",
+            "$value": "{color.theme.bg.success}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-active-bg",
+            "$value": "{color.gray.100}"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.success}"
+          }
+        },
+        "border": {
+          "success": {
+            "source": "$btn-success-active-border-color",
+            "$value": "{color.theme.active.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-active-border-color",
+            "$value": "{color.theme.active.success}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-active-border-color",
+            "$value": "inherit"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-active-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "focus": {
+        "text": {
+          "success": {
+            "source": "$btn-success-focus-color",
+            "$value": "{color.btn.text.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-focus-color",
+            "$value": "{color.btn.text.outline-success}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-success}"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-success}"
+          }
+        },
+        "border": {
+          "success": {
+            "source": "$btn-success-focus-border-color",
+            "$value": "{color.btn.border.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-success}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-focus-border-color",
+            "$value": "{color.white}"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-success}"
+          }
+        },
+        "bg": {
+          "success": {
+            "source": "$btn-success-focus-bg",
+            "$value": "{color.btn.bg.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-success}"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
+        },
+        "outline": {
+          "success": {
+            "source": "$btn-success-focus-outline-color",
+            "$value": "{color.theme.focus.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-focus-outline-color",
+            "$value": "{color.theme.focus.success}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-success}"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-outline-success}"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "success": {
+            "source": "$btn-success-disabled-color",
+            "$value": "{color.btn.text.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-disabled-color",
+            "$value": "{color.btn.text.outline-success}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-disabled-color",
+            "$value": "{color.success.base}"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-success}"
+          }
+        },
+        "bg": {
+          "success": {
+            "source": "$btn-success-disabled-bg",
+            "$value": "{color.btn.bg.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
+        },
+        "border": {
+          "success": {
+            "source": "$btn-success-disabled-border-color",
+            "$value": "{color.btn.border.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-disabled-border-color",
+            "$value": "{color.btn.border.outline-success}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-disabled-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-disabled-border-color",
+            "$value": "inherit"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Button/tertiary.json b/tokens/src/themes/dark/components/Button/tertiary.json
new file mode 100644
index 00000000000..803938b060b
--- /dev/null
+++ b/tokens/src/themes/dark/components/Button/tertiary.json
@@ -0,0 +1,83 @@
+{
+  "color": {
+    "$type": "color",
+    "btn": {
+      "text": {
+        "tertiary": { "source": "$btn-tertiary-color", "$value": "{color.gray.700}" },
+        "inverse-tertiary": { "source": "$btn-inverse-tertiary-color", "$value": "{color.white}" }
+      },
+      "bg": {
+        "tertiary": { "source": "$btn-tertiary-bg", "$value": "transparent" },
+        "inverse-tertiary": { "source": "$btn-inverse-tertiary-bg", "$value": "transparent" }
+      },
+      "border": {
+        "tertiary": { "source": "$btn-tertiary-border-color", "$value": "transparent" },
+        "inverse-tertiary": { "source": "$btn-inverse-tertiary-border-color", "$value": "transparent" }
+      },
+      "hover": {
+        "text": {
+          "tertiary": { "source": "$btn-tertiary-hover-color", "$value": "{color.gray.700}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-color", "$value": "{color.white}" }
+        },
+        "bg": {
+          "tertiary": { "source": "$btn-tertiary-hover-bg", "$value": "{color.gray.200}" },
+          "inverse-tertiary": {
+            "source": "$btn-inverse-tertiary-hover-bg",
+            "modify": [{ "type": "alpha", "amount": 0.1 }],
+            "$value": "{color.white}"
+          }
+        },
+        "border": {
+          "tertiary": { "source": "$btn-tertiary-hover-border-color", "$value": "transparent" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-border-color", "$value": "transparent" }
+        }
+      },
+      "active": {
+        "text": {
+          "tertiary": { "source": "$btn-tertiary-active-color", "$value": "{color.gray.700}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-color", "$value": "{color.white}" }
+        },
+        "bg": {
+          "tertiary": { "source": "$btn-tertiary-active-bg", "$value": "{color.gray.200}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-bg", "$value": "{color.btn.hover.bg.inverse-tertiary}" }
+        },
+        "border": {
+          "tertiary": { "source": "$btn-tertiary-active-border-color", "$value": "transparent" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-border-color", "$value": "transparent" }
+        }
+      },
+      "focus": {
+        "text": {
+          "tertiary": { "source": "$btn-tertiary-focus-color", "$value": "{color.btn.text.tertiary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-color", "$value": "{color.btn.text.inverse-tertiary}" }
+        },
+        "border": {
+          "tertiary": { "source": "$btn-tertiary-focus-border-color", "$value": "{color.btn.border.tertiary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-border-color", "$value": "transparent" }
+        },
+        "bg": {
+          "tertiary": { "source": "$btn-tertiary-focus-bg", "$value": "inherit" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-bg", "$value": "inherit" }
+        },
+        "outline": {
+          "tertiary": { "source": "$btn-tertiary-focus-outline-color", "$value": "{color.theme.focus.primary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-outline-color", "$value": "{color.white}" }
+        }
+      },
+      "disabled": {
+        "text": {
+          "tertiary": { "source": "$btn-tertiary-disabled-color", "$value": "{color.btn.text.tertiary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-color", "$value": "{color.btn.text.inverse-tertiary}" }
+        },
+        "bg": {
+          "tertiary": { "source": "$btn-tertiary-disabled-bg", "$value": "inherit" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-bg", "$value": "inherit" }
+        },
+        "border": {
+          "tertiary": { "source": "$btn-tertiary-disabled-border-color", "$value": "{color.btn.border.tertiary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-border-color", "$value": "{color.btn.border.inverse-tertiary}" }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Button/warning.json b/tokens/src/themes/dark/components/Button/warning.json
new file mode 100644
index 00000000000..eeb6ff1806a
--- /dev/null
+++ b/tokens/src/themes/dark/components/Button/warning.json
@@ -0,0 +1,312 @@
+{
+  "color": {
+    "$type": "color",
+    "btn": {
+      "text": {
+        "warning": {
+          "source": "$btn-warning-color",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.warning}"
+        },
+        "outline-warning": {
+          "source": "$btn-warning-outline-color",
+          "$value": "{color.warning.base}"
+        },
+        "inverse-warning": {
+          "source": "$btn-warning-inverse-color",
+          "$value": "{color.warning.base}"
+        },
+        "inverse-outline-warning": {
+          "source": "$btn-warning-inverse-outline-color",
+          "$value": "{color.white}"
+        }
+      },
+      "bg": {
+        "warning": {
+          "source": "$btn-warning-bg",
+          "$value": "{color.warning.base}"
+        },
+        "outline-warning": {
+          "source": "$btn-warning-outline-bg",
+          "$value": "inherit"
+        },
+        "inverse-warning": {
+          "source": "$btn-warning-inverse-bg",
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-warning}"
+        },
+        "inverse-outline-warning": {
+          "source": "$btn-warning-inverse-outline-bg",
+          "$value": "inherit"
+        }
+      },
+      "border": {
+        "warning": {
+          "source": "$btn-warning-border-color",
+          "$value": "{color.btn.bg.warning}"
+        },
+        "outline-warning": {
+          "source": "$btn-warning-outline-border-color",
+          "$value": "{color.warning.base}"
+        },
+        "inverse-warning": {
+          "source": "$btn-warning-inverse-border-color",
+          "$value": "transparent"
+        },
+        "inverse-outline-warning": {
+          "source": "$btn-warning-inverse-outline-border-color",
+          "$value": "{color.white}"
+        }
+      },
+      "hover": {
+        "text": {
+          "warning": {
+            "source": "$btn-warning-hover-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-hover-color",
+            "$value": "{color.theme.hover.warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-warning}"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.warning}"
+          }
+        },
+        "bg": {
+          "warning": {
+            "source": "$btn-warning-hover-bg",
+            "$value": "{color.theme.hover.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-hover-bg",
+            "$value": "{color.warning.100}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-hover-bg",
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-warning}"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-hover-bg",
+            "$value": "{color.warning.100}"
+          }
+        },
+        "border": {
+          "warning": {
+            "source": "$btn-warning-hover-border-color",
+            "$value": "{color.theme.hover.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-hover-border-color",
+            "$value": "{color.warning.900}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-hover-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-hover-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "active": {
+        "text": {
+          "warning": {
+            "source": "$btn-warning-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-active-color",
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-warning}"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-active-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-warning}"
+          }
+        },
+        "bg": {
+          "warning": {
+            "source": "$btn-warning-active-bg",
+            "$value": "{color.theme.active.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-active-bg",
+            "$value": "{color.theme.bg.warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-active-bg",
+            "$value": "{color.gray.100}"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.warning}"
+          }
+        },
+        "border": {
+          "warning": {
+            "source": "$btn-warning-active-border-color",
+            "$value": "{color.theme.active.warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-active-border-color",
+            "$value": "inherit"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-active-border-color",
+            "$value": "{color.theme.active.warning}"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-active-border-color",
+            "$value": "transparent"
+          }
+        }
+      },
+      "focus": {
+        "text": {
+          "warning": {
+            "source": "$btn-warning-focus-color",
+            "$value": "{color.btn.text.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-focus-color",
+            "$value": "{color.btn.text.outline-warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-warning}"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-warning}"
+          }
+        },
+        "border": {
+          "warning": {
+            "source": "$btn-warning-focus-border-color",
+            "$value": "{color.btn.border.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-focus-border-color",
+            "$value": "{color.btn.border.inverse-warning}"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-warning}"
+          }
+        },
+        "bg": {
+          "warning": {
+            "source": "$btn-warning-focus-bg",
+            "$value": "{color.btn.bg.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-warning}"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
+        },
+        "outline": {
+          "warning": {
+            "source": "$btn-warning-focus-outline-color",
+            "$value": "{color.theme.focus.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-focus-outline-color",
+            "$value": "{color.theme.focus.warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-focus-outline-color",
+            "$value": "{color.white}"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "warning": {
+            "source": "$btn-warning-disabled-color",
+            "$value": "{color.btn.text.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-disabled-color",
+            "$value": "{color.btn.text.outline-warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-disabled-color",
+            "$value": "{color.warning.base}"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-warning}"
+          }
+        },
+        "bg": {
+          "warning": {
+            "source": "$btn-warning-disabled-bg",
+            "$value": "{color.btn.bg.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
+        },
+        "border": {
+          "warning": {
+            "source": "$btn-warning-disabled-border-color",
+            "$value": "{color.btn.border.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-disabled-border-color",
+            "$value": "{color.btn.border.outline-warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-disabled-border-color",
+            "$value": "transparent"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.border.inverse-outline-warning}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Card.json b/tokens/src/themes/dark/components/Card.json
new file mode 100644
index 00000000000..bd0228060b5
--- /dev/null
+++ b/tokens/src/themes/dark/components/Card.json
@@ -0,0 +1,25 @@
+{
+  "color": {
+    "$type": "color",
+    "card": {
+      "base": { "source": "$card-color", "$value": "inherit" },
+      "bg": {
+        "base": { "source": "$card-bg", "$value": "{color.bg.base}" },
+        "dark": { "source": "$card-bg-dark", "$value": "{color.primary.500}" },
+        "muted": { "source": "$card-bg-muted", "$value": "{color.light.200}" }
+      },
+      "border": {
+        "base": {
+          "source": "$card-border-color",
+          "modify": [{ "type": "alpha", "amount": 0.125 }],
+          "$value": "{color.white}"
+        },
+        "focus": {
+          "base": { "source": "$card-border-focus-color", "$value": "{color.primary.500}" },
+          "dark": { "source": "$card-border-focus-color-dark", "$value": "{color.theme.focus.primary}" }
+        }
+      },
+      "divider-bg": { "source": "$card-divider-bg", "$value": "{color.gray.300}" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Carousel.json b/tokens/src/themes/dark/components/Carousel.json
new file mode 100644
index 00000000000..024aaf47b78
--- /dev/null
+++ b/tokens/src/themes/dark/components/Carousel.json
@@ -0,0 +1,46 @@
+{
+  "color": {
+    "$type": "color",
+    "carousel": {
+      "control": {
+        "base": { "source": "$carousel-control-color", "$value": "{color.white}" }
+      },
+      "indicator": {
+        "active-bg": { "source": "$carousel-indicator-active-bg", "$value": "{color.white}" }
+      },
+      "caption": { "source": "$carousel-caption-color", "$value": "{color.white}" }
+    }
+  },
+  "content": {
+    "$type": "file",
+    "carousel": {
+      "control": {
+        "bg": {
+          "prev-icon": {
+            "source": "$carousel-control-prev-icon-bg",
+            "outputReferences": false,
+            "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+            "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\")"
+          },
+          "next-icon": {
+            "source": "$carousel-control-next-icon-bg",
+            "outputReferences": false,
+            "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+            "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\")"
+          }
+        }
+      }
+    }
+  },
+  "other": {
+    "$type": "number",
+    "carousel": {
+      "control": {
+        "opacity": {
+          "base": { "source": "$carousel-control-opacity", "$value": ".5" },
+          "hover": { "source": "$carousel-control-hover-opacity", "$value": ".9" }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Chip.json b/tokens/src/themes/dark/components/Chip.json
new file mode 100644
index 00000000000..b11b7c36ea0
--- /dev/null
+++ b/tokens/src/themes/dark/components/Chip.json
@@ -0,0 +1,38 @@
+{
+  "color": {
+    "$type": "color",
+    "chip": {
+      "text": {
+        "light": { "source": "$chip-light-color", "$value": "{color.black}" },
+        "dark": { "source": "$chip-dark-color", "$value": "{color.white}" }
+      },
+      "bg": {
+        "light": { "source": "$chip-light-bg-color", "$value": "{color.white}" },
+        "dark": { "source": "$chip-dark-bg", "$value": "{color.primary.300}" }
+      },
+      "border": {
+        "base": { "source": "$chip-border-color", "$value": "{color.light.800}" },
+        "focus": {
+          "selected": {
+            "dark": { "source": "$chip-dark-selected-focus-border-color", "$value": "{color.chip.outline.dark}" },
+            "light": { "source": "$chip-light-selected-focus-border-color", "$value": "{color.dark.500}" }
+          }
+        }
+      },
+      "label": {
+        "base": { "source": "$chip-label-color", "$value": "{color.primary.700}" },
+        "dark": { "source": "$chip-dark-label-color", "$value": "{color.chip.outline.dark}" }
+      },
+      "outline": {
+        "dark": { "source": "$chip-dark-outline-color", "$value": "{color.white}" },
+        "light": { "source": "$chip-light-outline-color", "$value": "{color.chip.label.base}" }
+      }
+    }
+  },
+  "other": {
+    "$type": "number",
+    "chip": {
+      "opacity-disabled": { "source": "$chip-disable-opacity", "$value": ".3" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/CloseButton.json b/tokens/src/themes/dark/components/CloseButton.json
new file mode 100644
index 00000000000..dcba0a2d299
--- /dev/null
+++ b/tokens/src/themes/dark/components/CloseButton.json
@@ -0,0 +1,20 @@
+{
+  "color": {
+    "$type": "color",
+    "close-button": { "source": "$close-color", "$value": "{color.black}" }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "close-button": {
+      "text-shadow": {
+        "source": "$close-text-shadow",
+        "$value": {
+          "color": "{color.white}",
+          "offsetX": "0",
+          "offsetY": "1px",
+          "blur": "0"
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Code.json b/tokens/src/themes/dark/components/Code.json
new file mode 100644
index 00000000000..07785b97547
--- /dev/null
+++ b/tokens/src/themes/dark/components/Code.json
@@ -0,0 +1,21 @@
+{
+  "color": {
+    "$type": "color",
+    "code": {
+      "base": { "source": "$code-color", "$value": "#E83E8C" },
+      "kbd": {
+        "base": { "source": "$kbd-color", "$value": "{color.white}" },
+        "bg": { "source": "$kbd-bg", "$value": "{color.gray.700}" }
+      },
+      "pre": { "source": "$pre-color", "$value": "{color.gray.900}" }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "code": {
+      "kbd": {
+        "box-shadow": { "source": "$kbd-box-shadow", "$value": "none" }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/DataTable.json b/tokens/src/themes/dark/components/DataTable.json
new file mode 100644
index 00000000000..582e0ca2388
--- /dev/null
+++ b/tokens/src/themes/dark/components/DataTable.json
@@ -0,0 +1,24 @@
+{
+  "color": {
+    "$type": "color",
+    "data-table": {
+      "bg": {
+        "base": { "source": "$data-table-background-color", "$value": "{color.bg.base}" },
+        "is-loading": {
+          "source": "$data-table-is-loading-bg",
+          "modify": [{ "type": "alpha", "amount": 0.7 }],
+          "$value": "{color.bg.base}"
+        },
+        "header": { "source": "$data-table-header-bg", "$value": "{color.gray.200}" },
+        "striped": { "source": "$data-table-striped-bg", "$value": "{color.gray.200}" }
+      },
+      "border": { "source": "$data-table-border-color", "$value": "{color.light.300}" }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "data-table": {
+      "box-shadow": { "source": "$data-table-box-shadow", "$value": "{elevation.box-shadow.sm}" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Dropdown.json b/tokens/src/themes/dark/components/Dropdown.json
new file mode 100644
index 00000000000..e574f7b5e78
--- /dev/null
+++ b/tokens/src/themes/dark/components/Dropdown.json
@@ -0,0 +1,37 @@
+{
+  "color": {
+    "$type": "color",
+    "dropdown": {
+      "text": { "source": "$dropdown-color", "$value": "{color.body.base}" },
+      "header": { "source": "$dropdown-header-color", "$value": "{color.gray.500}" },
+      "bg": { "source": "$dropdown-bg", "$value": "{color.bg.base}" },
+      "border": {
+        "source": "$dropdown-border-color",
+        "modify": [{ "type": "alpha", "amount": 0.15 }],
+        "$value": "{color.white}"
+      },
+      "divider-bg": { "source": "$dropdown-divider-bg", "$value": "{color.gray.300}" },
+      "link": {
+        "base": { "source": "$dropdown-link-color", "$value": "{color.gray.900}" },
+        "hover": {
+          "base": {
+            "source": "$dropdown-link-hover-color",
+            "$value": "{color.gray.900}"
+          },
+          "bg": { "source": "$dropdown-link-hover-bg", "$value": "{color.gray.200}" }
+        },
+        "active": {
+          "base": { "source": "$dropdown-link-active-color", "$value": "{color.active}" },
+          "bg": { "source": "$dropdown-link-active-bg", "$value": "{color.bg.active}" }
+        },
+        "disabled": { "source": "$dropdown-link-disabled-color", "$value": "{color.disabled}" }
+      }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "dropdown": {
+      "box-shadow": { "source": "$dropdown-box-shadow", "$value": "none" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Dropzone.json b/tokens/src/themes/dark/components/Dropzone.json
new file mode 100644
index 00000000000..b29b603023b
--- /dev/null
+++ b/tokens/src/themes/dark/components/Dropzone.json
@@ -0,0 +1,61 @@
+{
+  "color": {
+    "$type": "color",
+    "dropzone": {
+      "error-wrapper": { "source": "$dropzone-error-wrapper-color", "$value": "{color.danger.500}" },
+      "restriction-msg": { "source": "$dropzone-restriction-msg-color", "$value": "{color.gray.600}" },
+      "border": {
+        "base": { "source": "$dropzone-border-color-default", "$value": "{color.gray.500}" }
+      }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "dropzone": {
+      "hover": {
+        "source": "$dropzone-box-shadow-hover",
+        "$value": {
+          "color": "{color.info.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      },
+      "focus": {
+        "source": "$dropzone-box-shadow-focus",
+        "$value": {
+          "color": "{color.info.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      },
+      "active": {
+        "source": "$dropzone-box-shadow-active",
+        "$value": {
+          "color": "{color.primary.500}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      },
+      "error": {
+        "source": "$dropzone-box-shadow-error",
+        "$value": {
+          "color": "{color.danger.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Form/color.json b/tokens/src/themes/dark/components/Form/color.json
new file mode 100644
index 00000000000..dad32ff5eeb
--- /dev/null
+++ b/tokens/src/themes/dark/components/Form/color.json
@@ -0,0 +1,216 @@
+{
+  "color": {
+    "form": {
+      "input": {
+        "$type": "color",
+        "base": { "source": "$input-color", "$value": "{color.gray.700}" },
+        "placeholder": { "source": "$input-placeholder-color", "$value": "{color.gray.500}" },
+        "plaintext": { "source": "$input-plaintext-color", "$value": "{color.body.base}" },
+        "border": { "source": "$input-border-color", "$value": "{color.gray.500}" },
+        "bg": {
+          "base": { "source": "$input-bg", "$value": "{color.bg.base}" },
+          "disabled": { "source": "$input-disabled-bg", "$value": "{color.gray.100}" }
+        },
+        "group": {
+          "addon": {
+            "base": { "source": "$input-group-addon-color", "$value": "{color.form.input.base}" },
+            "border": { "source": "$input-group-addon-border-color", "$value": "{color.form.input.border}" },
+            "bg": { "source": "$input-group-addon-bg", "$value": "{color.gray.100}" }
+          }
+        },
+        "focus": {
+          "base": { "source": "$input-focus-color", "$value": "{color.form.input.base}" },
+          "border": { "source": "$input-focus-border-color", "$value": "{color.input.focus}" },
+          "bg": { "source": "$input-focus-bg", "$value": "{color.form.input.bg.base}" }
+        }
+      },
+      "control": {
+        "indicator": {
+          "$type": "color",
+          "border": { "source": "$custom-control-indicator-border-color", "$value": "{color.gray.700}" },
+          "bg": {
+            "base": { "source": "$custom-control-indicator-bg", "$value": "{color.form.input.bg.base}" },
+            "disabled": { "source": "$custom-control-indicator-disabled-bg", "$value": "{color.form.input.bg.disabled}" }
+          },
+          "checked": {
+            "base": { "source": "$custom-control-indicator-checked-color", "$value": "{color.bg.active}" },
+            "valid": { "source": "$custom-control-indicator-checked-valid-color", "$value": "{color.theme.default.success}" },
+            "invalid": { "source": "$custom-control-indicator-checked-invalid-color", "$value": "{color.theme.default.danger}" },
+            "bg": {
+              "base": { "source": "$custom-control-indicator-checked-bg", "$value": "{color.bg.active}" },
+              "disabled": {
+                "source": "$custom-control-indicator-checked-disabled-bg",
+                "modify": [{ "type": "alpha", "amount": 0.5 }],
+                "$value": "{color.primary.base}"
+              }
+            },
+            "border": {
+              "base": { "source": "$custom-control-indicator-checked-border-color", "$value": "{color.form.control.indicator.checked.base}" },
+              "focus": { "source": "$custom-control-indicator-focus-border-color", "$value": "{color.form.input.focus.border}" }
+            }
+          },
+          "active": {
+            "base": { "source": "$custom-control-indicator-active-color", "$value": "{color.active}" },
+            "bg": { "source": "$custom-control-indicator-active-bg", "$value": "{color.bg.active}" },
+            "border": { "source": "$custom-control-indicator-active-border-color", "$value": "{color.form.control.indicator.active.bg}" }
+          }
+        },
+        "label": {
+          "$type": "color",
+          "base": { "source": "$custom-control-label-color", "$value": "inherit" },
+          "disabled": { "source": "$custom-control-label-disabled-color", "$value": "{color.disabled}" },
+          "floating": {
+            "text": {
+              "source": "$form-control-floating-label-text-bg",
+              "modify": [{ "type": "alpha", "amount": 0.1 }],
+              "$value": "{color.form.input.bg.base}"
+            }
+          }
+        },
+        "checkbox": {
+          "$type": "color",
+          "indicator": {
+            "indeterminate": {
+              "base": { "source": "$custom-checkbox-indicator-indeterminate-color", "$value": "{color.form.control.indicator.checked.base}" },
+              "bg": { "source": "$custom-checkbox-indicator-indeterminate-bg", "$value": "{color.bg.active}" },
+              "border": { "source": "$custom-checkbox-indicator-indeterminate-border-color", "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}" }
+            }
+          }
+        },
+        "switch": {
+          "$type": "color",
+          "indicator": {
+            "checked": {
+              "bg": { "source": "$custom-switch-indicator-checked-bg", "$value": "{color.success.base}" }
+            }
+          }
+        },
+        "select": {
+          "base": {
+            "source": "$custom-select-color",
+            "$value": "{color.form.input.base}",
+            "$type": "color"
+          },
+          "disabled": {
+            "source": "$custom-select-disabled-color",
+            "$value": "{color.disabled}",
+            "$type": "color"
+          },
+          "indicator": {
+            "$type": "color",
+            "base": { "source": "$custom-select-indicator-color", "$value": "{color.theme.hover.gray}" }
+          },
+          "bg": {
+            "base": {
+              "source": "$custom-select-bg",
+              "$value": "{color.form.input.bg.base}",
+              "$type": "color"
+            },
+            "disabled": {
+              "source": "$custom-select-disabled-bg",
+              "$value": "{color.gray.100}",
+              "$type": "color"
+            },
+            "size": {
+              "source": "$custom-select-bg-size",
+              "$value": "{color.gray.100}",
+              "$type": "dimension"
+            }
+          },
+          "border": {
+            "$type": "color",
+            "base": { "source": "$custom-select-border-color", "$value": "{color.form.input.border}" },
+            "focus": { "source": "$custom-select-focus-border-color", "$value": "{color.form.input.focus.border}" }
+          }
+        },
+        "range": {
+          "$type": "color",
+          "track": {
+            "bg": { "source": "$custom-range-track-bg", "$value": "{color.gray.300}" }
+          },
+          "thumb": {
+            "bg": {
+              "base": { "source": "$custom-range-thumb-bg", "$value": "{color.bg.active}" },
+              "disabled": { "source": "$custom-range-thumb-disabled-bg", "$value": "{color.disabled}" },
+              "active": {
+                "source": "$custom-range-thumb-active-bg",
+                "modify": [{ "type": "lighten", "amount": "0.35" }],
+                "$value": "{color.bg.active}"
+              }
+            }
+          }
+        },
+        "file": {
+          "$type": "color",
+          "base": { "source": "$custom-file-color", "$value": "{color.form.input.base}" },
+          "bg": {
+            "base": { "source": "$custom-file-bg", "$value": "{color.form.input.bg.base}" },
+            "disabled": { "source": "$custom-file-disabled-bg", "$value": "{color.form.input.bg.disabled}" }
+          },
+          "button": {
+            "base": { "source": "$custom-file-button-color", "$value": "{color.form.control.file.base}" },
+            "bg": { "source": "$custom-file-button-bg", "$value": "{color.form.input.group.addon.bg}" }
+          },
+          "border": {
+            "base": { "source": "$custom-file-border-color", "$value": "{color.form.input.border}" },
+            "focus": { "source": "$custom-file-focus-border-color", "$value": "{color.form.input.focus.border}" }
+          }
+        }
+      },
+      "feedback": {
+        "$type": "color",
+        "valid": { "source": "$form-feedback-valid-color", "$value": "{color.theme.default.success}" },
+        "invalid": { "source": "$form-feedback-invalid-color", "$value": "{color.theme.default.danger}" },
+        "icon": {
+          "valid": { "source": "$form-feedback-icon-valid-color", "$value": "{color.form.feedback.valid}" },
+          "invalid": { "source": "$form-feedback-icon-invalid-color", "$value": "{color.form.feedback.invalid}" }
+        },
+        "tooltip": {
+          "valid": {
+            "source": "$form-feedback-tooltip-valid-color",
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.form.feedback.valid}"
+          },
+          "bg": {
+            "valid": {
+              "source": "$form-feedback-tooltip-valid-bg",
+              "modify": [{ "type": "alpha", "amount": 0.9 }],
+              "$value": "{color.form.feedback.valid}"
+            },
+            "invalid": {
+              "source": "$form-feedback-tooltip-invalid-bg",
+              "modify": [{ "type": "alpha", "amount": 0.9 }],
+              "$value": "{color.form.feedback.invalid}"
+            }
+          },
+          "box-shadow": {
+            "focus": {
+              "valid": {
+                "source": "$form-feedback-focus-box-shadow-valid-color",
+                "modify": [{ "type": "alpha", "amount": 0.25 }],
+                "$value": "{color.form.feedback.valid}"
+              },
+              "invalid": {
+                "source": "$form-feedback-focus-box-shadow-invalid-color",
+                "modify": [{ "type": "alpha", "amount": 0.25 }],
+                "$value": "{color.form.feedback.invalid}"
+              }
+            }
+          }
+        },
+        "checked": {
+          "valid": {
+            "source": "$form-feedback-checked-valid-color",
+            "modify": [{ "type": "lighten", "amount": 0.1 }],
+            "$value": "{color.form.feedback.valid}"
+          },
+          "invalid": {
+            "source": "$form-feedback-checked-invalid-color",
+            "modify": [{ "type": "lighten", "amount": 0.1 }],
+            "$value": "{color.form.feedback.invalid}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Form/elevation.json b/tokens/src/themes/dark/components/Form/elevation.json
new file mode 100644
index 00000000000..6554295dc1b
--- /dev/null
+++ b/tokens/src/themes/dark/components/Form/elevation.json
@@ -0,0 +1,72 @@
+{
+  "elevation": {
+    "$type": "shadow",
+    "form": {
+      "input": {
+        "base": { "source": "$input-box-shadow", "$value": "none" },
+        "focus": {
+          "source": "$input-focus-box-shadow",
+          "$value": {
+            "color": "{color.primary.500}",
+            "spread": "1px",
+            "offsetX": "0",
+            "offsetY": "0",
+            "blur": "0"
+          }
+        }
+      },
+      "control": {
+        "indicator": {
+          "base": { "source": "$custom-control-indicator-box-shadow", "$value": "{elevation.form.input.base}" },
+          "checked": {
+            "base": { "source": "$custom-control-indicator-checked-box-shadow", "$value": "none" },
+            "focus": {
+              "source": "$custom-control-indicator-focus-box-shadow",
+              "$value": {
+                "color": "rgba(0, 0, 0, .1)",
+                "spread": "4px",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": "0"
+              }
+            }
+          },
+          "active": { "source": "$custom-control-indicator-active-box-shadow", "$value": "none" }
+        },
+        "checkbox": {
+          "indicator": {
+            "indeterminate": { "source": "$custom-checkbox-indicator-indeterminate-box-shadow", "$value": "none" }
+          }
+        },
+        "range": {
+          "track": { "source": "$custom-range-track-box-shadow", "$value": "none" },
+          "thumb": {
+            "base": { "source": "$custom-range-thumb-box-shadow", "$value": "none" },
+            "focus": {
+              "source": "$custom-range-thumb-focus-box-shadow",
+              "$value": [
+                {
+                  "color": "{color.body.bg}",
+                  "spread": "0",
+                  "offsetX": "0",
+                  "offsetY": ".1rem",
+                  "blur": ".25rem"
+                }
+              ]
+            }
+          }
+        },
+        "file": {
+          "base": { "source": "$custom-file-box-shadow", "$value": "{elevation.form.input.base}" },
+          "focus": { "source": "$custom-file-focus-box-shadow", "$value": "{elevation.form.input.focus}" }
+        },
+        "select": {
+          "border": {
+            "base": { "source": "$custom-select-box-shadow", "$value": "none" },
+            "focus": { "source": "$custom-select-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Form/other.json b/tokens/src/themes/dark/components/Form/other.json
new file mode 100644
index 00000000000..5970074591e
--- /dev/null
+++ b/tokens/src/themes/dark/components/Form/other.json
@@ -0,0 +1,134 @@
+{
+  "other": {
+    "form": {
+      "$type": "number",
+      "feedback": {
+        "tooltip-opacity": {
+          "source": "$form-feedback-tooltip-opacity",
+          "$value": ".9"
+        }
+      }
+    },
+    "content": {
+      "form": {
+        "control": {
+          "checkbox": {
+            "$type": "file",
+            "indicator": {
+              "icon-checked": {
+                "base": {
+                  "source": "$custom-checkbox-indicator-icon-checked",
+                  "outputReferences": false,
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.base}'/></svg>\")"
+                },
+                "valid": {
+                  "source": "$custom-checkbox-indicator-icon-valid-checked",
+                  "outputReferences": false,
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.valid}'/></svg>\")"
+                },
+                "invalid": {
+                  "source": "$custom-checkbox-indicator-icon-invalid-checked",
+                  "outputReferences": false,
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.invalid}'/></svg>\")"
+                }
+              },
+              "indeterminate": {
+                "icon": {
+                  "source": "$custom-checkbox-indicator-icon-indeterminate",
+                  "outputReferences": false,
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='{color.form.control.checkbox.indicator.indeterminate.base}'/></svg>\")"
+                }
+              }
+            }
+          },
+          "radio": {
+            "$type": "file",
+            "indicator": {
+              "icon-checked": {
+                "base": {
+                  "source": "$custom-radio-indicator-icon-checked",
+                  "outputReferences": false,
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")"
+                },
+                "valid": {
+                  "source": "$custom-radio-indicator-icon-valid-checked",
+                  "outputReferences": false,
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")"
+                },
+                "invalid": {
+                  "source": "$custom-radio-indicator-icon-invalid-checked",
+                  "outputReferences": false,
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")"
+                }
+              }
+            }
+          },
+          "switch": {
+            "$type": "file",
+            "indicator": {
+              "icon-off": {
+                "source": "$custom-switch-indicator-icon-off",
+                "outputReferences": false,
+                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")"
+              },
+              "icon-on": {
+                "source": "$custom-switch-indicator-icon-on",
+                "outputReferences": false,
+                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")"
+              }
+            }
+          },
+          "select": {
+            "indicator": {
+              "$type": "file",
+              "icon": {
+                "source": "$custom-select-indicator",
+                "outputReferences": false,
+                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                "$value": "url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z\" fill=\"{color.form.control.select.indicator.base}\"/></svg>')"
+              }
+            },
+            "bg": {
+              "source": "$custom-select-background",
+              "$value": {
+                "color": "{color.form.control.select.bg.base}",
+                "image": "{other.content.form.control.select.indicator.icon}",
+                "repeat": "no-repeat",
+                "position-x": "right",
+                "offset-y": "{spacing.form.input.padding.y.base}",
+                "position-y": "center"
+              },
+              "$type": "background"
+            }
+          }
+        },
+        "feedback": {
+          "$type": "file",
+          "icon": {
+            "valid": {
+              "source": "$form-feedback-icon-valid",
+              "outputReferences": false,
+              "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+              "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\")"
+            },
+            "invalid": {
+              "source": "$form-feedback-icon-invalid",
+              "outputReferences": false,
+              "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+              "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")"
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/IconButton.json b/tokens/src/themes/dark/components/IconButton.json
new file mode 100644
index 00000000000..37593bba7a5
--- /dev/null
+++ b/tokens/src/themes/dark/components/IconButton.json
@@ -0,0 +1,603 @@
+{
+  "color": {
+    "$type": "color",
+    "icon-button": {
+      "bg": {
+        "base": { "source": "$btn-icon-bg", "$value": "transparent" },
+        "primary": {
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.icon-button.text.primary.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
+          },
+          "active": {
+            "base": { "$value": "{color.icon-button.text.primary.base}" },
+            "hover": { "$value": "{color.icon-button.text.primary.base}" },
+            "focus": { "$value": "{color.icon-button.text.primary.base}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          }
+        },
+        "secondary": {
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.secondary.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
+          },
+          "active": {
+            "base": { "$value": "{color.secondary.base}" },
+            "hover": { "$value": "{color.icon-button.bg.secondary.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.secondary.active.base}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          }
+        },
+        "brand": {
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.brand.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
+          },
+          "active": {
+            "base": { "$value": "{color.brand.base}" },
+            "hover": { "$value": "{color.icon-button.bg.brand.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.brand.active.base}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          }
+        },
+        "success": {
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.success.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
+          },
+          "active": {
+            "base": { "$value": "{color.success.base}" },
+            "hover": { "$value": "{color.icon-button.bg.success.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.success.active.base}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          }
+        },
+        "warning": {
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.warning.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
+          },
+          "active": {
+            "base": { "$value": "{color.warning.base}" },
+            "hover": { "$value": "{color.icon-button.bg.warning.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.warning.active.base}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          }
+        },
+        "danger": {
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.danger.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
+          },
+          "active": {
+            "base": { "$value": "{color.danger.base}" },
+            "hover": { "$value": "{color.icon-button.bg.danger.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.danger.active.base}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          }
+        },
+        "light": {
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.light.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
+          },
+          "active": {
+            "base": { "$value": "{color.light.base}" },
+            "hover": { "$value": "{color.icon-button.bg.light.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.light.active.base}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          }
+        },
+        "dark": {
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.dark.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
+          },
+          "active": {
+            "base": { "$value": "{color.dark.base}" },
+            "hover": { "$value": "{color.icon-button.bg.dark.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.dark.active.base}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          }
+        },
+        "black": {
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.black}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
+          },
+          "active": {
+            "base": { "$value": "{color.black}" },
+            "hover": { "$value": "{color.icon-button.bg.black.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.black.active.base}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          }
+        }
+      },
+      "text": {
+        "primary": {
+          "base": { "$value": "{color.theme.default.primary}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.primary.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.text.primary.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.icon-button.text.primary.base}" },
+            "hover": { "$value": "{color.icon-button.text.primary.base}" },
+            "focus": { "$value": "{color.icon-button.text.primary.base}" }
+          }
+        },
+        "secondary": {
+          "base": { "$value": "{color.secondary.base}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.secondary.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.secondary.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.secondary.base}" },
+            "hover": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" }
+          }
+        },
+        "brand": {
+          "base": { "$value": "{color.theme.default.brand}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.brand.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.brand.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.brand.base}" },
+            "hover": { "$value": "{color.icon-button.text.brand.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.brand.inverse-active.base}" }
+          }
+        },
+        "success": {
+          "base": { "$value": "{color.theme.default.success}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.success.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.success.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.success.base}" },
+            "hover": { "$value": "{color.icon-button.text.success.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.success.inverse-active.base}" }
+          }
+        },
+        "warning": {
+          "base": { "$value": "{color.warning.base}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.warning.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.warning.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.warning.base}" },
+            "hover": { "$value": "{color.icon-button.text.warning.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.warning.inverse-active.base}" }
+          }
+        },
+        "danger": {
+          "base": { "$value": "{color.theme.default.danger}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.danger.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.danger.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.danger.base}" },
+            "hover": { "$value": "{color.icon-button.text.danger.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.danger.inverse-active.base}" }
+          }
+        },
+        "light": {
+          "base": { "$value": "{color.light.base}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.light.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.light.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.light.base}" },
+            "hover": { "$value": "{color.icon-button.text.light.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.light.inverse-active.base}" }
+          }
+        },
+        "dark": {
+          "base": { "$value": "{color.theme.default.dark}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.dark.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.dark.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.dark.base}" },
+            "hover": { "$value": "{color.icon-button.text.dark.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.dark.inverse-active.base}" }
+          }
+        },
+        "black": {
+          "base": { "$value": "{color.black}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.black.base}" },
+          "inverse": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.black}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "active": {
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
+          },
+          "inverse-active": {
+            "base": { "$value": "{color.black}" },
+            "hover": { "$value": "{color.icon-button.text.black.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.black.inverse-active.base}" }
+          }
+        }
+      },
+      "accent": {
+        "source": "$btn-icon-accent-color",
+        "$value": "{color.white}"
+      },
+      "black": {
+        "source": "$btn-icon-black",
+        "$value": "{color.black}"
+      }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "icon-button": {
+      "box-shadow": {
+        "primary": {
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.primary.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
+        },
+        "secondary": {
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.secondary.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
+        },
+        "brand": {
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.brand.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
+        },
+        "success": {
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.success.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
+        },
+        "warning": {
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.warning.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
+        },
+        "danger": {
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.danger.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
+        },
+        "light": {
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.light.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
+        },
+        "dark": {
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.dark.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
+        },
+        "black": {
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.black.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Image.json b/tokens/src/themes/dark/components/Image.json
new file mode 100644
index 00000000000..8c4df0f914a
--- /dev/null
+++ b/tokens/src/themes/dark/components/Image.json
@@ -0,0 +1,21 @@
+{
+  "color": {
+    "$type": "color",
+    "image": {
+      "figure-caption": { "source": "$figure-caption-color", "$value": "{color.gray.500}" },
+      "thumbnail": {
+        "bg": { "source": "$thumbnail-bg", "$value": "{color.body.bg}" },
+        "border": { "source": "$thumbnail-border-color", "$value": "{color.gray.200}"
+        }
+      }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "image": {
+      "thumbnail": {
+        "box-shadow": { "source": "$thumbnail-box-shadow", "$value": "none" }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Menu.json b/tokens/src/themes/dark/components/Menu.json
new file mode 100644
index 00000000000..0d0b6986090
--- /dev/null
+++ b/tokens/src/themes/dark/components/Menu.json
@@ -0,0 +1,32 @@
+{
+  "elevation": {
+    "$type": "shadow",
+    "menu": {
+      "box-shadow": { "source": "$menu-box-shadow", "$value": "{elevation.box-shadow.base}" }
+    }
+  },
+  "color": {
+    "$type": "color",
+    "menu": {
+      "bg": { "source": "$menu-bg", "$value": "{color.bg.base}" },
+      "item": {
+        "color": { "source": "$menu-item-color", "$value": "{color.body.base}" },
+        "bg": { "source": "$menu-item-bg", "$value": "transparent" },
+        "border": { "source": "$menu-item-border-color", "$value": "{color.menu.item.bg}" },
+        "hover": {
+          "color": { "source": "$menu-item-hover-color", "$value": "{color.btn.hover.text.tertiary}" },
+          "bg": { "source": "$menu-item-hover-bg", "$value": "{color.btn.hover.bg.tertiary}" },
+          "border": { "source": "$menu-item-hover-border-color", "$value": "{color.menu.item.bg}" }
+        },
+        "focus": {
+          "bg": { "source": "$menu-item-focus-bg", "$value": "{color.gray.200}" }
+        }
+      },
+      "select": {
+        "btn-link": {
+          "color": { "source": "$menu-select-btn-link-color", "$value": "{color.theme.default.primary}" }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Modal.json b/tokens/src/themes/dark/components/Modal.json
new file mode 100644
index 00000000000..3d352d4cba2
--- /dev/null
+++ b/tokens/src/themes/dark/components/Modal.json
@@ -0,0 +1,65 @@
+{
+  "color": {
+    "$type": "color",
+    "modal": {
+      "content": {
+        "bg": { "source": "$modal-content-bg", "$value": "{color.bg.base}" },
+        "border": {
+          "source": "$modal-content-border-color",
+          "modify": [{ "type": "alpha", "amount": 0.2 }],
+          "$value": "{color.white}"
+        },
+        "scroll-shadow": {
+          "from": { "source": "$modal-scroll-shadow-from", "$value": "{color.white}" },
+          "to": { "source": "$modal-scroll-shadow-to", "$value": "{color.gray.800}" }
+        }
+      },
+      "backdrop-bg": { "source": "$modal-backdrop-bg", "$value": "{color.black}" },
+      "footer": {
+        "overrides": {
+          "button": {
+            "variants": {}
+          },
+          "examples": {
+            "button": {
+              "variants": {
+                "primary": "brand"
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "modal": {
+      "content": {
+        "box-shadow": {
+          "sm-up": {
+            "source": "$modal-content-box-shadow-sm-up",
+            "$value": [
+              {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "10px",
+                "blur": "20px"
+              },
+              {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "8px",
+                "blur": "20px"
+              }
+            ]
+          }
+        }
+      }
+    }
+  },
+  "other": {
+    "modal": {
+      "opacity": { "source": "$modal-backdrop-opacity", "$value": ".5" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Nav.json b/tokens/src/themes/dark/components/Nav.json
new file mode 100644
index 00000000000..6a56f858b18
--- /dev/null
+++ b/tokens/src/themes/dark/components/Nav.json
@@ -0,0 +1,154 @@
+{
+  "border-color": {
+    "$type": "color",
+    "nav": {
+      "tabs-link": {
+        "border": {
+          "active": { "source": "$nav-tabs-link-active-border-color", "$value": "{color.theme.default.primary}" },
+          "hover": {
+            "source": "$nav-tabs-link-hover-border-color",
+            "$value": {
+              "top": "transparent",
+              "right": "transparent",
+              "bottom": "{color.nav.tabs.base.border.base}",
+              "left": "transparent"
+            }
+          },
+          "focus": {
+            "source": "$nav-tabs-link-focus-border-color",
+            "$value": "{color.nav.tabs.base.link.active.text}"
+          }
+        }
+      }
+    }
+  },
+  "color": {
+    "$type": "color",
+    "nav": {
+      "link": {
+        "text": {
+          "base": { "source": "$nav-link-color", "$value": "{color.gray.700}" },
+          "disabled": { "source": "$nav-link-disabled-color", "$value": "{color.gray.300}" }
+        },
+        "border": { "source": "$nav-tabs-link-border-color", "$value": "transparent" }
+      },
+      "tabs": {
+        "base": {
+          "text": {
+            "disabled": { "source": "$nav-tabs-disabled-bg", "$value": "{color.nav.tabs.base.bg.hover}" }
+          },
+          "bg": { "hover": { "source": "$nav-tabs-hover-bg", "$value": "transparent" } },
+          "border": {
+            "base": { "source": "$nav-tabs-border-color", "$value": "{color.light.400}" },
+            "focus": { "source": "$nav-tabs-focus-border-color", "$value": "{color.nav.tabs.base.bg.hover}" }
+          },
+          "link": {
+            "hover": { "bg": { "source": "$nav-tabs-link-hover-bg", "$value": "{color.gray.200}" } },
+            "active": {
+              "text": { "source": "$nav-tabs-link-active-color", "$value": "{color.theme.default.primary}" },
+              "bg": { "source": "$nav-tabs-link-active-bg", "$value": "transparent" }
+            },
+            "disabled": {
+              "border": { "source": "$nav-tabs-link-disabled-border-color", "$value": "{color.nav.link.border}" }
+            }
+          }
+        },
+        "inverse": {
+          "link": {
+            "text": { "base": { "source": "$nav-inverse-tabs-link-color", "$value": "{color.white}" } },
+            "border": {
+              "bottom": {
+                "source": "$nav-inverse-tabs-link-border-bottom-color",
+                "$value": "{color.dark.300}"
+              },
+              "active": {
+                "source": "$nav-inverse-tabs-link-active-border-color",
+                "$value": "{color.nav.tabs.inverse.link.text.base}"
+              }
+            },
+            "bg": {
+              "hover": {
+                "source": "$nav-inverse-tabs-link-hover-bg",
+                "$value": "{color.nav.tabs.inverse.link.border.bottom}"
+              },
+              "active": {
+                "source": "$nav-inverse-tabs-link-active-bg",
+                "$value": "{color.nav.tabs.inverse.link.bg.hover}"
+              },
+              "focus": {
+                "source": "$nav-inverse-tabs-link-focus-bg",
+                "$value": "{color.nav.tabs.inverse.link.text.base}"
+              },
+              "active-hover": {
+                "source": "$nav-inverse-tabs-link-active-hover-bg",
+                "$value": "transparent"
+              }
+            },
+            "tab-content-color": {
+              "source": "$nav-inverse-tabs-tab-content-color",
+              "$value": "{color.nav.tabs.inverse.link.text.base}"
+            }
+          },
+          "dropdown": {
+            "border": {
+              "source": "$nav-inverse-tabs-dropdown-border-color",
+              "$value": "{color.nav.tabs.inverse.link.bg.active-hover}"
+            }
+          }
+        }
+      },
+      "pills": {
+        "base": {
+          "link": {
+            "active": {
+              "text": { "source": "$nav-pills-link-active-color", "$value": "{color.active}" },
+              "bg": { "source": "$nav-pills-link-active-bg", "$value": "{color.bg.active}" },
+              "border": { "source": "$nav-pills-link-active-border-color", "$value": "{color.white}" }
+            },
+            "border": { "source": "$nav-pills-link-border-color", "$value": "{color.nav.tabs.base.border.base}" }
+          }
+        },
+        "inverse": {
+          "link": {
+            "text": {
+              "base": { "source": "$nav-inverse-pills-link-color", "$value": "{color.white}" },
+              "focus": { "source": "$nav-inverse-pills-link-focus-color", "$value": "{color.nav.pills.inverse.link.text.base}" },
+              "active": { "source": "$nav-inverse-pills-link-active-color", "$value": "{color.primary.500}" },
+              "hover": { "source": "$nav-inverse-pills-link-hover-color", "$value": "{color.nav.pills.inverse.link.text.base}" },
+              "active-focus": { "source": "$nav-inverse-pills-link-active-focus-color", "$value": "{color.nav.pills.inverse.link.text.active}" },
+              "active-hover": { "source": "$nav-inverse-pills-link-active-hover-color", "$value": "{color.nav.pills.inverse.link.text.base}" }
+            },
+            "border": {
+              "base": { "source": "$nav-inverse-pills-link-border-color", "$value": "{color.dark.300}" },
+              "active": { "source": "$nav-inverse-pills-link-active-border-color", "$value": "{color.nav.pills.inverse.link.text.base}" },
+              "active-hover": { "source": "$nav-inverse-pills-link-active-hover-border-color", "$value": "{color.nav.pills.inverse.link.border.base}" },
+              "active-focus": { "source": "$nav-inverse-pills-link-active-focus-border-color", "$value": "{color.primary.base}" },
+              "focus-hover": { "source": "$nav-inverse-pills-link-active-focus-hover-border-color", "$value": "{color.nav.pills.inverse.link.border.active-focus}" }
+            },
+            "bg": {
+              "hover": { "source": "$nav-inverse-pills-link-hover-bg", "$value": "{color.nav.pills.inverse.link.border.base}" },
+              "active": { "source": "$nav-inverse-pills-link-active-bg", "$value": "{color.nav.pills.inverse.link.text.base}" },
+              "active-hover": { "source": "$nav-inverse-pills-link-active-hover-bg", "$value": "{color.nav.pills.inverse.link.border.base}" },
+              "active-focus-hover": { "source": "$nav-inverse-pills-link-active-focus-hover-bg", "$value": "{color.nav.pills.inverse.link.text.base}" }
+            }
+          },
+          "tab-content-color": {
+            "source": "$nav-inverse-pills-tab-content-color",
+            "$value": "{color.nav.pills.inverse.link.text.base}"
+          }
+        }
+      },
+      "divider": { "source": "$nav-divider-color", "$value": "{color.gray.100}" },
+      "dark": {
+        "source": "$navbar-dark-color",
+        "modify": [{ "type": "alpha", "amount": 0.5 }],
+        "$value": "{color.white}"
+      },
+      "light": {
+        "source": "$navbar-light-color",
+        "modify": [{ "type": "alpha", "amount": 0.5 }],
+        "$value": "{color.black}"
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Navbar.json b/tokens/src/themes/dark/components/Navbar.json
new file mode 100644
index 00000000000..5b157599c3c
--- /dev/null
+++ b/tokens/src/themes/dark/components/Navbar.json
@@ -0,0 +1,92 @@
+{
+  "color": {
+    "$type": "color",
+    "navbar": {
+      "dark": {
+        "text": {
+          "source": "$navbar-dark-color",
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.white}"
+        },
+        "hover": {
+          "source": "$navbar-dark-hover-color",
+          "modify": [{ "type": "alpha", "amount": 0.75 }],
+          "$value": "{color.white}"
+        },
+        "active": { "source": "$navbar-dark-active-color", "$value": "{color.active}" },
+        "disabled": {
+          "source": "$navbar-dark-disabled-color",
+          "modify": [{ "type": "alpha", "amount": 0.25 }],
+          "$value": "{color.white}"
+        },
+        "toggler": {
+          "border": {
+            "source": "$navbar-dark-toggler-border-color",
+            "modify": [{ "type": "alpha", "amount": 0.1 }],
+            "$value": "{color.white}"
+          }
+        },
+        "brand": {
+          "text": { "source": "$navbar-dark-brand-color", "$value": "{color.navbar.dark.active}" },
+          "hover": { "source": "$navbar-dark-brand-hover-color", "$value": "{color.navbar.dark.active}" }
+        }
+      },
+      "light": {
+        "text": {
+          "source": "$navbar-light-color",
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.black}"
+        },
+        "hover": {
+          "source": "$navbar-light-hover-color",
+          "modify": [{ "type": "alpha", "amount": 0.7 }],
+          "$value": "{color.black}"
+        },
+        "active": {
+          "source": "$navbar-light-active-color",
+          "modify": [{ "type": "alpha", "amount": 0.9 }],
+          "$value": "{color.black}"
+        },
+        "disabled": {
+          "source": "$navbar-light-disabled-color",
+          "modify": [{ "type": "alpha", "amount": 0.3 }],
+          "$value": "{color.black}"
+        },
+        "toggler": {
+          "border": {
+            "source": "$navbar-light-toggler-border-color",
+            "modify": [{ "type": "alpha", "amount": 0.1 }],
+            "$value": "{color.black}"
+          }
+        },
+        "brand": {
+          "text": { "source": "$navbar-light-brand-color", "$value": "{color.navbar.light.active}" },
+          "hover": { "source": "$navbar-light-brand-hover-color", "$value": "{color.navbar.light.active}" }
+        }
+      }
+    }
+  },
+  "content": {
+    "$type": "file",
+    "navbar": {
+      "toggler": {
+        "dark": {
+          "icon-bg": {
+            "source": "$navbar-dark-toggler-icon-bg",
+            "outputReferences": false,
+            "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+            "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")"
+          }
+        },
+        "light": {
+          "icon-bg": {
+            "source": "$navbar-light-toggler-icon-bg",
+            "outputReferences": false,
+            "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+            "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/OverflowScroll.json b/tokens/src/themes/dark/components/OverflowScroll.json
new file mode 100644
index 00000000000..d02b7431459
--- /dev/null
+++ b/tokens/src/themes/dark/components/OverflowScroll.json
@@ -0,0 +1,11 @@
+{
+  "color": {
+    "$type": "color",
+    "overflow-scroll": {
+      "opacity-mask-transparent": {
+        "source": "$overflow-scroll-opacity-mask-transparent",
+        "$value": "rgba(0, 0, 0, .4)"
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/PageBanner.json b/tokens/src/themes/dark/components/PageBanner.json
new file mode 100644
index 00000000000..380b5ea3a65
--- /dev/null
+++ b/tokens/src/themes/dark/components/PageBanner.json
@@ -0,0 +1,25 @@
+{
+  "color": {
+    "$type": "color",
+    "page-banner": {
+      "bg": {
+        "dark": { "$value": "{color.dark.500}" },
+        "light": { "$value": "{color.light.400}" },
+        "accent": {
+          "a": { "$value": "{color.accent.a}" },
+          "b": { "$value": "{color.accent.b}" }
+        },
+        "warning": { "$value": "{color.warning.100}" }
+      },
+      "text": {
+        "dark": { "$value": "{color.white}" },
+        "light": { "$value": "{color.black}" },
+        "accent": {
+          "a": { "$value": "{color.black}" },
+          "b": { "$value": "{color.black}" }
+        },
+        "warning": { "$value": "{color.white}" }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Pagination.json b/tokens/src/themes/dark/components/Pagination.json
new file mode 100644
index 00000000000..d879de73021
--- /dev/null
+++ b/tokens/src/themes/dark/components/Pagination.json
@@ -0,0 +1,41 @@
+{
+  "color": {
+    "$type": "color",
+    "pagination": {
+      "text": {
+        "base": { "source": "$pagination-color", "$value": "{color.link.base}" },
+        "inverse": { "source": "$pagination-color-inverse", "$value": "{color.white}" },
+        "hover": { "source": "$pagination-hover-color", "$value": "{color.link.hover}" },
+        "active": { "source": "$pagination-active-color", "$value": "{color.active}" },
+        "disabled": { "source": "$pagination-disabled-color", "$value": "{color.disabled}" }
+      },
+      "bg": {
+        "base": { "source": "$pagination-bg", "$value": "{color.bg.base}" },
+        "hover": { "source": "$pagination-hover-bg", "$value": "{color.gray.100}" },
+        "active": { "source": "$pagination-active-bg", "$value": "{color.bg.active}" },
+        "disabled": { "source": "$pagination-disabled-bg", "$value": "{color.white}" }
+      },
+      "border": {
+        "base": { "source": "$pagination-border-color", "$value": "{color.gray.200}" },
+        "hover": { "source": "$pagination-hover-border-color", "$value": "{color.gray.200}" },
+        "active": { "source": "$pagination-active-border-color", "$value": "{color.pagination.bg.active}" },
+        "disabled": { "source": "$pagination-disabled-border-color", "$value": "{color.gray.100}" }
+      },
+      "focus": {
+        "base": { "source": "$pagination-focus-color", "$value": "{color.primary.500}" },
+        "text": { "source": "$pagination-focus-color-text", "$value": "{color.black}" }
+      },
+      "dropdown": {
+        "text-inverse": { "source": "$pagination-dropdown-color-inverse", "$value": "{color.white}" }
+      }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "pagination": {
+      "focus": {
+        "box-shadow": { "source": "$pagination-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Popover.json b/tokens/src/themes/dark/components/Popover.json
new file mode 100644
index 00000000000..58dbfc19a23
--- /dev/null
+++ b/tokens/src/themes/dark/components/Popover.json
@@ -0,0 +1,50 @@
+{
+  "color": {
+    "$type": "color",
+    "popover": {
+      "bg": { "source": "$popover-bg", "$value": "{color.bg.base}" },
+      "border": { "source": "$popover-border-color", "$value": "rgba(255, 255, 255, .2)" },
+      "header": {
+        "text": { "source": "$popover-header-color", "$value": "{color.headings.base}" },
+        "bg": { "source": "$popover-header-bg", "$value": "{color.bg.base}" },
+        "bg-dark": {
+          "source": "$popover-header-bg-dark",
+          "modify": [{ "type": "darken", "amount": 0.5 }],
+          "$value": "{color.white}"
+        },
+        "border-bottom-dark": {
+          "source": "$popover-header-border-bottom-darken",
+          "modify": [{ "type": "darken", "amount": 0.05 }],
+          "$value": "{color.white}"
+        }
+      },
+      "body": { "source": "$popover-body-color", "$value": "{color.body.base}" },
+      "arrow": {
+        "base": { "source": "$popover-arrow-color", "$value": "{color.popover.bg}" },
+        "outer": {
+          "source": "$popover-arrow-outer-color",
+          "modify": [{ "type": "alpha", "amount": 0.05 }],
+          "$value": "{color.popover.border}"
+        }
+      },
+      "success": {
+        "bg": { "source": "$popover-success-bg", "$value": "{color.success.100}" },
+        "icon": { "source": "$popover-success-icon-color", "$value": "{color.success.500}" }
+      },
+      "warning": {
+        "bg": { "source": "$popover-warning-bg", "$value": "{color.warning.100}" },
+        "icon": { "source": "$popover-warning-icon-color", "$value": "{color.warning.500}" }
+      },
+      "danger": {
+        "bg": { "source": "$popover-danger-bg", "$value": "{color.danger.100}" },
+        "icon": { "source": "$popover-danger-icon-color", "$value": "{color.danger.500}" }
+      }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "popover": {
+      "box-shadow": { "source": "$popover-box-shadow", "$value": "none" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/ProductTour.json b/tokens/src/themes/dark/components/ProductTour.json
new file mode 100644
index 00000000000..d0595df3874
--- /dev/null
+++ b/tokens/src/themes/dark/components/ProductTour.json
@@ -0,0 +1,24 @@
+{
+  "color": {
+    "$type": "color",
+    "product-tour": {
+      "checkpoint": {
+        "bg": { "source": "$checkpoint-background-color", "$value": "{color.gray.200}" },
+        "body": { "source": "$checkpoint-body-color", "$value": "{color.gray.700}" },
+        "border": { "source": "$checkpoint-border-color", "$value": "{color.brand.base}" },
+        "breadcrumb": { "source": "$checkpoint-breadcrumb-color", "$value": "{color.theme.default.primary}" },
+        "box-shadow": {
+          "source": "$checkpoint-box-shadow-color",
+          "modify": [{ "type": "alpha", "amount": 0.3 }],
+          "$value": "{color.black}"
+        },
+        "arrow": {
+          "border": {
+            "top": { "source": "$checkpoint-arrow-border-top-color", "$value": "{color.product-tour.checkpoint.bg}" },
+            "transparent": { "source": "$checkpoint-arrow-border-color-transparent", "$value": "transparent" }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/ProgressBar.json b/tokens/src/themes/dark/components/ProgressBar.json
new file mode 100644
index 00000000000..bbc60750acf
--- /dev/null
+++ b/tokens/src/themes/dark/components/ProgressBar.json
@@ -0,0 +1,22 @@
+{
+  "color": {
+    "$type": "color",
+    "progress-bar": {
+      "base": { "source": "$progress-bar-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.accent.a}" },
+      "bg": {
+        "base": { "source": "$progress-bar-bg", "$value": "{color.accent.a}" },
+        "annotated": { "source": "$annotated-progress-bar-bg", "$value": "{color.dark.500}" }
+      },
+      "border": { "source": "$progress-bar-border-color", "$value": "{color.gray.500}" }
+    },
+    "progress": {
+      "bg": { "source": "$progress-bg", "$value": "transparent" }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "progress-bar": {
+      "box-shadow": { "source": "$progress-box-shadow", "$value": "none" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Scrollable.json b/tokens/src/themes/dark/components/Scrollable.json
new file mode 100644
index 00000000000..87da8f709c8
--- /dev/null
+++ b/tokens/src/themes/dark/components/Scrollable.json
@@ -0,0 +1,14 @@
+{
+  "elevation": {
+    "$type": "shadow",
+    "scrollable": {
+      "body": {
+        "box-shadow": {
+          "source": "$scrollable-body-box-shadow",
+          "modify": [{ "type": "alpha", "amount": 0.55 }],
+          "$value": "{color.black}"
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/SearchField.json b/tokens/src/themes/dark/components/SearchField.json
new file mode 100644
index 00000000000..a64420f8c45
--- /dev/null
+++ b/tokens/src/themes/dark/components/SearchField.json
@@ -0,0 +1,25 @@
+{
+  "color": {
+    "$type": "color",
+    "search-field": {
+      "border": {
+        "base": { "source": "$search-border-color", "$value": "{color.gray.500}" },
+        "interaction": { "source": "$search-border-color-interaction", "$value": "{color.white}" },
+        "focus": { "source": "$search-border-focus-color", "$value": "{color.white}" }
+      },
+      "button": {
+        "bg": {
+          "primary": { "source": "$search-btn-primary-bg", "$value": "{color.primary.500}" },
+          "brand": { "source": "$search-btn-brand-bg", "$value": "{color.brand.500}" }
+        }
+      },
+      "form-bg": { "source": "$search-form-background-color", "$value": "{color.bg.base}" }
+    }
+  },
+  "other": {
+    "$type": "number",
+    "search-field": {
+      "disabled-opacity": { "source": "$search-disabled-opacity", "$value": ".3" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Sheet.json b/tokens/src/themes/dark/components/Sheet.json
new file mode 100644
index 00000000000..9084a8eb52c
--- /dev/null
+++ b/tokens/src/themes/dark/components/Sheet.json
@@ -0,0 +1,21 @@
+{
+  "color": {
+    "$type": "color",
+    "sheet": {
+      "skrim": {
+        "bg": {
+          "source": "$sheet-skrim-bg",
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.gray.300}"
+        },
+        "component": {
+          "box-shadow": {
+            "source": "$sheet-skrim-component-box-shadow",
+            "modify": [{ "type": "alpha", "amount": 0.15 }],
+            "$value": "{color.black}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Stepper.json b/tokens/src/themes/dark/components/Stepper.json
new file mode 100644
index 00000000000..2d478b17d45
--- /dev/null
+++ b/tokens/src/themes/dark/components/Stepper.json
@@ -0,0 +1,29 @@
+{
+  "color": {
+    "$type": "color",
+    "stepper": {
+      "header": {
+        "bg": {
+          "base": { "source": "$stepper-header-bg", "$value": "transparent" },
+          "line": { "source": "$stepper-header-line-bg", "$value": "{color.light.base}" }
+        },
+        "step": {
+          "base": { "source": "$stepper-header-step-color", "$value": "{color.theme.default.primary}" },
+          "bg": {
+            "base": { "source": "$stepper-header-step-bg", "$value": "{color.stepper.header.bg.base}" },
+            "active": { "source": "$stepper-header-active-step-bg", "$value": "{color.gray.500}" }
+          },
+          "border": { "source": "$stepper-header-step-border", "$value": "none" },
+          "bubble-error": {
+            "source": "$stepper-header-step-error-bubble-color",
+            "$value": "{color.danger.base}"
+          },
+          "description-error": {
+            "source": "$stepper-header-step-error-description-color",
+            "$value": "{color.stepper.header.step.bubble-error}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Sticky.json b/tokens/src/themes/dark/components/Sticky.json
new file mode 100644
index 00000000000..6fe18059fea
--- /dev/null
+++ b/tokens/src/themes/dark/components/Sticky.json
@@ -0,0 +1,43 @@
+{
+  "elevation": {
+    "$type": "shadow",
+    "sticky": {
+      "shadow": {
+        "top": {
+          "source": "$sticky-shadow-top",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.25rem",
+              "blur": ".625rem"
+            }
+          ]
+        },
+        "bottom": {
+          "source": "$sticky-shadow-bottom",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".25rem",
+              "blur": ".625rem"
+            }
+          ]
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Tab.json b/tokens/src/themes/dark/components/Tab.json
new file mode 100644
index 00000000000..5e7c601ff21
--- /dev/null
+++ b/tokens/src/themes/dark/components/Tab.json
@@ -0,0 +1,85 @@
+{
+  "color": {
+    "$type": "color",
+    "tab": {
+      "more-link-dropdown-toggle": {
+        "btn": {
+          "text": {
+            "focus": {
+              "source": "$tab-more-link-dropdown-toggle-btn-focus-color",
+              "$value": "{color.tab.more-link-dropdown-toggle.text.focus}"
+            }
+          },
+          "border": {
+            "focus": {
+              "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color",
+              "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+            }
+          }
+        },
+        "text": {
+          "focus": {
+            "source": "$tab-more-link-dropdown-toggle-focus-color",
+            "$value": "{color.white}"
+          },
+          "active": {
+            "source": "$tab-more-link-dropdown-toggle-active-color",
+            "$value": "{color.tab.more-link-dropdown-toggle.text.focus}"
+          },
+          "hover": {
+            "source": "$tab-more-link-dropdown-toggle-hover-color",
+            "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+          }
+        },
+        "bg": {
+          "focus": {
+            "source": "$tab-more-link-dropdown-toggle-focus-bg",
+            "$value": "{color.primary.500}"
+          }
+        },
+        "border": {
+          "focus": {
+            "source": "$tab-more-link-dropdown-toggle-focus-border-color",
+            "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+          }
+        }
+      },
+      "inverse-pills-link-dropdown-toggle": {
+        "text": {
+          "focus": {
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color",
+            "$value": "{color.primary.500}"
+          },
+          "active": {
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-color",
+            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}"
+          },
+          "active-hover": {
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color",
+            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}"
+          }
+        },
+        "bg": {
+          "focus": {
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg",
+            "$value": "{color.white}"
+          },
+          "hover": {
+            "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg",
+            "$value": "transparent"
+          },
+          "active-hover": {
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg",
+            "$value": "{color.primary.300}"
+          }
+        },
+        "border": {
+          "focus": {
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color",
+            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Toast.json b/tokens/src/themes/dark/components/Toast.json
new file mode 100644
index 00000000000..a6def3769fd
--- /dev/null
+++ b/tokens/src/themes/dark/components/Toast.json
@@ -0,0 +1,45 @@
+{
+  "color": {
+    "$type": "color",
+    "toast": {
+      "base": { "source": "$toast-color", "$value": "inherit" },
+      "bg": { "source": "$toast-background-color", "$value": "{color.gray.200}" },
+      "border": {
+        "source": "$toast-border-color",
+        "modify": [{ "type": "alpha", "amount": 0.1 }],
+        "$value": "{color.white}"
+      },
+      "header": {
+        "text": { "source": "$toast-header-color", "$value": "{color.white}" },
+        "bg": { "source": "$toast-header-background-color", "$value": "{color.gray.200}" },
+        "border": {
+          "source": "$toast-header-border-color",
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.white}"
+        }
+      }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "toast": {
+      "box-shadow": {
+        "source": "$toast-box-shadow",
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "1.25rem",
+            "blur": "2.5rem"
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": ".5rem",
+            "blur": "3rem"
+          }
+        ]
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/Tooltip.json b/tokens/src/themes/dark/components/Tooltip.json
new file mode 100644
index 00000000000..81062e6ec83
--- /dev/null
+++ b/tokens/src/themes/dark/components/Tooltip.json
@@ -0,0 +1,45 @@
+{
+  "color": {
+    "$type": "color",
+    "tooltip": {
+      "text": { "source": "$tooltip-color", "$value": "{color.white}" },
+      "light": { "source": "$tooltip-color-light", "$value": "{color.black}" },
+      "bg": {
+        "base": { "source": "$tooltip-bg", "$value": "{color.black}" },
+        "light": { "source": "$tooltip-bg-light", "$value": "{color.white}" }
+      },
+      "arrow": {
+        "base": { "source": "$tooltip-arrow-color", "$value": "{color.tooltip.bg.base}" },
+        "light": { "source": "$tooltip-arrow-color-light", "$value": "{color.white}" }
+      }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "tooltip": {
+      "box-shadow": {
+        "source": "$tooltip-box-shadow",
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "4px"
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "8px"
+          }
+        ]
+      }
+    }
+  },
+  "other": {
+    "$type": "number",
+    "tooltip": {
+      "opacity": { "source": "$tooltip-opacity", "$value": "1" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/general/body.json b/tokens/src/themes/dark/components/general/body.json
new file mode 100644
index 00000000000..f894be2efea
--- /dev/null
+++ b/tokens/src/themes/dark/components/general/body.json
@@ -0,0 +1,9 @@
+{
+  "color": {
+    "$type": "color",
+    "body": {
+      "base": { "source": "$body-color", "$value": "{color.gray.700}" },
+      "bg": { "source": "$body-bg", "$value": "{color.bg.base}" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/general/headings.json b/tokens/src/themes/dark/components/general/headings.json
new file mode 100644
index 00000000000..f9c41dd05be
--- /dev/null
+++ b/tokens/src/themes/dark/components/general/headings.json
@@ -0,0 +1,8 @@
+{
+  "color": {
+    "$type": "color",
+    "headings": {
+      "base": { "source": "$headings-color", "$value": "{color.gray.900}" }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/general/hr.json b/tokens/src/themes/dark/components/general/hr.json
new file mode 100644
index 00000000000..594bd2dcdc4
--- /dev/null
+++ b/tokens/src/themes/dark/components/general/hr.json
@@ -0,0 +1,12 @@
+{
+  "color": {
+    "$type": "color",
+    "hr": {
+      "border": {
+        "source": "$hr-border-color",
+        "modify": [{ "type": "alpha", "amount": 0.1 }],
+        "$value": "{color.white}"
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/general/input.json b/tokens/src/themes/dark/components/general/input.json
new file mode 100644
index 00000000000..424b099dbbe
--- /dev/null
+++ b/tokens/src/themes/dark/components/general/input.json
@@ -0,0 +1,25 @@
+{
+  "color": {
+    "$type": "color",
+    "input": {
+      "btn-focus": { "source": "$input-btn-focus-color", "$value": "{color.bg.active}" }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "input": {
+      "btn-focus": {
+        "box-shadow": {
+          "source": "$input-btn-focus-box-shadow",
+          "$value": {
+            "color": "{color.input.btn-focus}",
+            "spread": "{size.input.btn.focus-width}",
+            "offsetX": "0",
+            "offsetY": "0",
+            "blur": "0"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/general/link.json b/tokens/src/themes/dark/components/general/link.json
new file mode 100644
index 00000000000..a2ab9a58279
--- /dev/null
+++ b/tokens/src/themes/dark/components/general/link.json
@@ -0,0 +1,100 @@
+{
+  "color": {
+    "$type": "color",
+    "link": {
+      "base": { "source": "$link-color", "$value": "{color.theme.default.info}" },
+      "hover": {
+        "source": "$link-hover-color",
+        "modify": [{ "type": "lighten", "amount": 0.15 }],
+        "$value": "{color.link.base}"
+      },
+      "inline": {
+        "base": { "source": "$inline-link-color", "$value": "{color.theme.default.info}" },
+        "decoration": {
+          "source": "$inline-link-decoration-color",
+          "modify": [{ "type": "alpha", "amount": 0.3 }],
+          "$value": "{color.link.inline.base}"
+        },
+        "hover": {
+          "base": {
+            "source": "$inline-link-hover-color",
+            "modify": [{ "type": "lighten", "amount": 0.15 }],
+            "$value": "{color.link.inline.base}"
+          },
+          "decoration": {
+            "source": "$inline-link-hover-decoration-color",
+            "modify": [{ "type": "alpha", "amount": 1 }],
+            "$value": "{color.link.inline.hover.base}"
+          }
+        }
+      },
+      "muted": {
+        "base": { "source": "$muted-link-color", "$value": "{color.theme.default.primary}" },
+        "hover": {
+          "source": "$muted-link-hover-color",
+          "modify": [{ "type": "lighten", "amount": 0.15 }],
+          "$value": "{color.link.muted.base}"
+        },
+        "inline": {
+          "base": { "source": "$muted-inline-link-color", "$value": "{color.theme.default.primary}" },
+          "decoration": {
+            "source": "$muted-inline-link-decoration-color",
+            "modify": [{ "type": "alpha", "amount": 0.3 }],
+            "$value": "{color.link.muted.inline.base}"
+          },
+          "hover": {
+            "base": {
+              "source": "$muted-inline-link-hover-color",
+              "modify": [{ "type": "lighten", "amount": 0.15 }],
+              "$value": "{color.link.muted.inline.base}"
+            },
+            "decoration": {
+              "source": "$muted-inline-link-hover-decoration-color",
+              "modify": [{ "type": "alpha", "amount": 1 }],
+              "$value": "{color.link.muted.inline.hover.base}"
+            }
+          }
+        }
+      },
+      "brand": {
+        "base": { "source": "$brand-link-color", "$value": "{color.theme.default.brand}" },
+        "hover": {
+          "source": "$brand-link-hover-color",
+          "modify": [{ "type": "lighten", "amount": 0.15 }],
+          "$value": "{color.link.brand.base}"
+        },
+        "inline": {
+          "base": { "source": "$brand-inline-link-color", "$value": "{color.theme.default.brand}" },
+          "decoration": {
+            "source": "$brand-inline-link-decoration-color",
+            "modify": [{ "type": "alpha", "amount": 0.3 }],
+            "$value": "{color.link.brand.inline.base}"
+          },
+          "hover": {
+            "base": {
+              "source": "$brand-inline-link-hover-color",
+              "modify": [{ "type": "lighten", "amount": 0.15 }],
+              "$value": "{color.link.brand.inline.base}"
+            },
+            "decoration": {
+              "source": "$brand-inline-link-hover-decoration-color",
+              "modify": [{ "type": "alpha", "amount": 1 }],
+              "$value": "{color.link.brand.inline.hover.base}"
+            }
+          }
+        }
+      }
+    }
+  },
+  "other": {
+    "$type": "percentage",
+    "link": {
+      "emphasized-hover": {
+        "darken-percentage": {
+          "source": "$emphasized-link-hover-darken-percentage",
+          "$value": "15%"
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/general/list.json b/tokens/src/themes/dark/components/general/list.json
new file mode 100644
index 00000000000..2a35d602203
--- /dev/null
+++ b/tokens/src/themes/dark/components/general/list.json
@@ -0,0 +1,34 @@
+{
+  "color": {
+    "$type": "color",
+    "list-group": {
+      "base": { "source": "$list-group-color", "$value": "inherit" },
+      "bg": {
+        "base": { "source": "$list-group-bg", "$value": "{color.bg.base}" },
+        "hover": { "source": "$list-group-hover-bg", "$value": "{color.gray.100}" }
+      },
+      "border": {
+        "source": "$list-group-border-color",
+        "modify": [{ "type": "alpha", "amount": 0.125 }],
+        "$value": "{color.white}"
+      },
+      "active": {
+        "base": { "source": "$list-group-active-color", "$value": "{color.active}" },
+        "border": { "source": "$list-group-active-border-color", "$value": "{color.list-group.active.bg}" },
+        "bg": { "source": "$list-group-active-bg", "$value": "{color.bg.active}" }
+      },
+      "disabled": {
+        "base": { "source": "$list-group-disabled-color", "$value": "{color.gray.600}" },
+        "bg": { "source": "$list-group-disabled-bg", "$value": "{color.list-group.bg.base}" }
+      },
+      "action": {
+        "base": { "source": "$list-group-action-color", "$value": "{color.gray.700}" },
+        "hover": { "source": "$list-group-action-hover-color", "$value": "{color.list-group.action.base}" },
+        "active": {
+          "base": { "source": "$list-group-action-active-color", "$value": "{color.body.base}" },
+          "bg": { "source": "$list-group-action-active-bg", "$value": "{color.gray.200}" }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/components/general/text.json b/tokens/src/themes/dark/components/general/text.json
new file mode 100644
index 00000000000..1ab46dd2573
--- /dev/null
+++ b/tokens/src/themes/dark/components/general/text.json
@@ -0,0 +1,11 @@
+{
+  "color": {
+    "$type": "color",
+    "text-muted": { "source": "$text-muted", "$value": "{color.gray.600}" },
+    "mark-bg": { "source": "$mark-bg", "$value": "#FFF243" },
+    "blockquote": {
+      "small": { "source": "$blockquote-small-color", "$value": "{color.gray.600}" }
+    },
+    "yiq-light": { "source": "$yiq-text-light", "$value": "{color.white}" }
+  }
+}
diff --git a/tokens/src/themes/dark/global/color.json b/tokens/src/themes/dark/global/color.json
new file mode 100644
index 00000000000..ecc98e45b2e
--- /dev/null
+++ b/tokens/src/themes/dark/global/color.json
@@ -0,0 +1,2386 @@
+{
+  "color": {
+    "$type": "color",
+    "white": {
+      "source": "$white",
+      "$value": "#FFFFFF",
+      "$description": "White color."
+    },
+    "black": {
+      "source": "$black",
+      "$value": "#000000",
+      "$description": "Black color."
+    },
+    "blue": {
+      "source": "$blue",
+      "$value": "#23419F",
+      "$description": "Blue color."
+    },
+    "red": {
+      "source": "$red",
+      "$value": "#C32D3A",
+      "$description": "Red color."
+    },
+    "green": {
+      "source": "$green",
+      "$value": "#178253",
+      "$description": "Green color."
+    },
+    "yellow": {
+      "source": "$yellow",
+      "$value": "#FFD900",
+      "$description": "Yellow color."
+    },
+    "teal": {
+      "source": "$teal",
+      "$value": "#006DAA",
+      "$description": "Teal color."
+    },
+    "accent": {
+      "a": {
+        "source": "$accent-a",
+        "actions": {
+          "default": "{color.action.default.accent.a}"
+        },
+        "$value": "#00BBF9",
+        "$description": "Accent-A color."
+      },
+      "b": {
+        "source": "$accent-b",
+        "actions": {
+          "default": "{color.action.default.accent.b}"
+        },
+        "$value": "#FFEE88",
+        "$description": "Accent-B color."
+      }
+    },
+    "gray": {
+      "100": {
+        "source": "$gray-100",
+        "actions": {
+          "default": "{color.action.default.gray.100}"
+        },
+        "$value": "#212529",
+        "$description": "Gray color of level 100."
+      },
+      "200": {
+        "source": "$gray-200",
+        "actions": {
+          "default": "{color.action.default.gray.200}"
+        },
+        "$value": "#333333",
+        "$description": "Gray color of level 200."
+      },
+      "300": {
+        "source": "$gray-300",
+        "actions": {
+          "default": "{color.action.default.gray.300}"
+        },
+        "$value": "#454545",
+        "$description": "Gray color of level 300."
+      },
+      "400": {
+        "source": "$gray-400",
+        "actions": {
+          "default": "{color.action.default.gray.400}"
+        },
+        "$value": "#5C5C5C",
+        "$description": "Gray color of level 400."
+      },
+      "500": {
+        "source": "$gray-500",
+        "actions": {
+          "default": "{color.action.default.gray.500}"
+        },
+        "$value": "{color.gray.base}",
+        "$description": "Gray color of level 500."
+      },
+      "600": {
+        "source": "$gray-600",
+        "actions": {
+          "default": "{color.action.default.gray.600}"
+        },
+        "$value": "#8F8F8F",
+        "$description": "Gray color of level 600."
+      },
+      "700": {
+        "source": "$gray-700",
+        "actions": {
+          "default": "{color.action.default.gray.700}"
+        },
+        "$value": "#ADADAD",
+        "$description": "Gray color of level 700."
+      },
+      "800": {
+        "source": "$gray-800",
+        "actions": {
+          "default": "{color.action.default.gray.800}"
+        },
+        "$value": "#CCCCCC",
+        "$description": "Gray color of level 800."
+      },
+      "900": {
+        "source": "$gray-900",
+        "actions": {
+          "default": "{color.action.default.gray.900}"
+        },
+        "$value": "#EBEBEB",
+        "$description": "Gray color of level 900."
+      },
+      "base": {
+        "source": "$gray",
+        "actions": {
+          "default": "{color.action.default.gray.base}"
+        },
+        "$value": "#707070",
+        "$description": "Basic gray color."
+      }
+    },
+    "primary": {
+      "100": {
+        "source": "$primary-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.94"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.primary.100}"
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 100."
+      },
+      "200": {
+        "source": "$primary-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.75"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.primary.200}"
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 200."
+      },
+      "300": {
+        "source": "$primary-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.50"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.primary.300}"
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 300."
+      },
+      "400": {
+        "source": "$primary-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.primary.400}"
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 400."
+      },
+      "500": {
+        "source": "$primary-500",
+        "actions": {
+          "default": "{color.action.default.primary.500}"
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 500."
+      },
+      "600": {
+        "source": "$primary-600",
+        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.10" }],
+        "actions": {
+          "default": "{color.action.default.primary.600}"
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 600."
+      },
+      "700": {
+        "source": "$primary-700",
+        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.20" }],
+        "actions": {
+          "default": "{color.action.default.primary.700}"
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 700."
+      },
+      "800": {
+        "source": "$primary-800",
+        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }],
+        "actions": {
+          "default": "{color.action.default.primary.800}"
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 800."
+      },
+      "900": {
+        "source": "$primary-900",
+        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.30" }],
+        "actions": {
+          "default": "{color.action.default.primary.900}"
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 900."
+      },
+      "base": {
+        "source": "$primary",
+        "actions": {
+          "default": "{color.action.default.primary.base}"
+        },
+        "$value": "#0A3055",
+        "$description": "Basic primary color."
+      }
+    },
+    "secondary": {
+      "100": {
+        "source": "$secondary-100",
+        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.94" }],
+        "actions": {
+          "default": "{color.action.default.secondary.100}"
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 100."
+      },
+      "200": {
+        "source": "$secondary-200",
+        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.75" }],
+        "actions": {
+          "default": "{color.action.default.secondary.200}"
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 200."
+      },
+      "300": {
+        "source": "$secondary-300",
+        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.50" }],
+        "actions": {
+          "default": "{color.action.default.secondary.300}"
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 300."
+      },
+      "400": {
+        "source": "$secondary-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.secondary.400}"
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 400."
+      },
+      "500": {
+        "source": "$secondary-500",
+        "actions": {
+          "default": "{color.action.default.secondary.500}"
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 500."
+      },
+      "600": {
+        "source": "$secondary-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.10"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.secondary.600}"
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 600."
+      },
+      "700": {
+        "source": "$secondary-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.20"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.secondary.700}"
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 700."
+      },
+      "800": {
+        "source": "$secondary-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.secondary.800}"
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 800."
+      },
+      "900": {
+        "source": "$secondary-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.30"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.secondary.900}"
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 900."
+      },
+      "base": {
+        "source": "$secondary",
+        "actions": {
+          "default": "{color.action.default.secondary.base}"
+        },
+        "$value": "{color.gray.700}",
+        "$description": "Basic secondary color."
+      }
+    },
+    "brand": {
+      "100": {
+        "source": "$brand-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.94"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.brand.100}"
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 100."
+      },
+      "200": {
+        "source": "$brand-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.75"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.brand.200}"
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 200."
+      },
+      "300": {
+        "source": "$brand-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.50"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.brand.300}"
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 300."
+      },
+      "400": {
+        "source": "$brand-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.brand.400}"
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 400."
+      },
+      "500": {
+        "source": "$brand-500",
+        "actions": {
+          "default": "{color.action.default.brand.500}"
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 500."
+      },
+      "600": {
+        "source": "$brand-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.10"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.brand.600}"
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 600."
+      },
+      "700": {
+        "source": "$brand-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.20"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.brand.700}"
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 700."
+      },
+      "800": {
+        "source": "$brand-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.brand.800}"
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 800."
+      },
+      "900": {
+        "source": "$brand-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.30"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.brand.900}"
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 900."
+      },
+      "base": {
+        "source": "$brand",
+        "actions": {
+          "default": "{color.action.default.brand.base}"
+        },
+        "$value": "#9D0054",
+        "$description": "Basic brand color."
+      }
+    },
+    "success": {
+      "100": {
+        "source": "$success-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.94"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.success.100}"
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 100."
+      },
+      "200": {
+        "source": "$success-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.75"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.success.200}"
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 200."
+      },
+      "300": {
+        "source": "$success-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.50"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.success.300}"
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 300."
+      },
+      "400": {
+        "source": "$success-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.success.400}"
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 400."
+      },
+      "500": {
+        "source": "$success-500",
+        "actions": {
+          "default": "{color.action.default.success.500}"
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 500."
+      },
+      "600": {
+        "source": "$success-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.10"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.success.600}"
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 600."
+      },
+      "700": {
+        "source": "$success-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.20"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.success.700}"
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 700."
+      },
+      "800": {
+        "source": "$success-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.success.800}"
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 800."
+      },
+      "900": {
+        "source": "$success-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.30"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.success.900}"
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 900."
+      },
+      "base": {
+        "source": "$success",
+        "actions": {
+          "default": "{color.action.default.success.base}"
+        },
+        "$value": "{color.green}",
+        "$description": "Basic success color."
+      }
+    },
+    "info": {
+      "100": {
+        "source": "$info-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.94"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.info.100}"
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 100."
+      },
+      "200": {
+        "source": "$info-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.75"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.info.200}"
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 200."
+      },
+      "300": {
+        "source": "$info-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.50"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.info.300}"
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 300."
+      },
+      "400": {
+        "source": "$info-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.info.400}"
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 400."
+      },
+      "500": {
+        "source": "$info-500",
+        "actions": {
+          "default": "{color.action.default.info.500}"
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 500."
+      },
+      "600": {
+        "source": "$info-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.10"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.info.600}"
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 600."
+      },
+      "700": {
+        "source": "$info-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.20"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.info.700}"
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 700."
+      },
+      "800": {
+        "source": "$info-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.info.800}"
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 800."
+      },
+      "900": {
+        "source": "$info-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.30"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.info.900}"
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 900."
+      },
+      "base": {
+        "source": "$info",
+        "actions": {
+          "default": "{color.action.default.info.base}"
+        },
+        "$value": "{color.teal}",
+        "$description": "Basic info color."
+      }
+    },
+    "warning": {
+      "100": {
+        "source": "$warning-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.94"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.warning.100}"
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 100."
+      },
+      "200": {
+        "source": "$warning-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.75"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.warning.200}"
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 200."
+      },
+      "300": {
+        "source": "$warning-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.50"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.warning.300}"
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 300."
+      },
+      "400": {
+        "source": "$warning-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.warning.400}"
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 400."
+      },
+      "500": {
+        "source": "$warning-500",
+        "actions": {
+          "default": "{color.action.default.warning.500}"
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 500."
+      },
+      "600": {
+        "source": "$warning-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.10"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.warning.600}"
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 600."
+      },
+      "700": {
+        "source": "$warning-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.20"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.warning.700}"
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 700."
+      },
+      "800": {
+        "source": "$warning-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.warning.800}"
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 800."
+      },
+      "900": {
+        "source": "$warning-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.30"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.warning.900}"
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 900."
+      },
+      "base": {
+        "source": "$warning",
+        "actions": {
+          "default": "{color.action.default.warning.base}"
+        },
+        "$value": "{color.yellow}",
+        "$description": "Basic warning color."
+      }
+    },
+    "danger": {
+      "100": {
+        "source": "$danger-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.94"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.danger.100}"
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 100."
+      },
+      "200": {
+        "source": "$danger-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.75"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.danger.200}"
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 200."
+      },
+      "300": {
+        "source": "$danger-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.50"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.danger.300}"
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 300."
+      },
+      "400": {
+        "source": "$danger-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.danger.400}"
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 400."
+      },
+      "500": {
+        "source": "$danger-500",
+        "actions": {
+          "default": "{color.action.default.danger.500}"
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 500."
+      },
+      "600": {
+        "source": "$danger-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.10"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.danger.600}"
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 600."
+      },
+      "700": {
+        "source": "$danger-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.20"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.danger.700}"
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 700."
+      },
+      "800": {
+        "source": "$danger-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.danger.800}"
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 800."
+      },
+      "900": {
+        "source": "$danger-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.30"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.danger.900}"
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 900."
+      },
+      "base": {
+        "source": "$danger",
+        "actions": {
+          "default": "{color.action.default.danger.base}"
+        },
+        "$value": "{color.red}",
+        "$description": "Basic danger color."
+      }
+    },
+    "light": {
+      "100": {
+        "source": "$light-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.94"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.light.100}"
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 100."
+      },
+      "200": {
+        "source": "$light-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.75"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.light.200}"
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 200."
+      },
+      "300": {
+        "source": "$light-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.50"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.light.300}"
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 300."
+      },
+      "400": {
+        "source": "$light-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.light.400}"
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 400."
+      },
+      "500": {
+        "source": "$light-500",
+        "actions": {
+          "default": "{color.action.default.light.500}"
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 500."
+      },
+      "600": {
+        "source": "$light-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.10"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.light.600}"
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 600."
+      },
+      "700": {
+        "source": "$light-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.20"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.light.700}"
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 700."
+      },
+      "800": {
+        "source": "$light-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.light.800}"
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 800."
+      },
+      "900": {
+        "source": "$light-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.30"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.light.900}"
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 900."
+      },
+      "base": {
+        "source": "$light",
+        "actions": {
+          "default": "{color.action.default.light.base}"
+        },
+        "$value": "#E1DDDB",
+        "$description": "Basic light color."
+      }
+    },
+    "dark": {
+      "100": {
+        "source": "$dark-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.94"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.dark.100}"
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 100."
+      },
+      "200": {
+        "source": "$dark-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.75"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.dark.200}"
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 200."
+      },
+      "300": {
+        "source": "$dark-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.50"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.dark.300}"
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 300."
+      },
+      "400": {
+        "source": "$dark-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.dark.400}"
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 400."
+      },
+      "500": {
+        "source": "$dark-500",
+        "actions": {
+          "default": "{color.action.default.dark.500}"
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 500."
+      },
+      "600": {
+        "source": "$dark-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.10"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.dark.600}"
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 600."
+      },
+      "700": {
+        "source": "$dark-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.20"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.dark.700}"
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Info color of level 700."
+      },
+      "800": {
+        "source": "$dark-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.dark.800}"
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 800."
+      },
+      "900": {
+        "source": "$dark-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.30"
+          }
+        ],
+        "actions": {
+          "default": "{color.action.default.dark.900}"
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 900."
+      },
+      "base": {
+        "source": "$dark",
+        "actions": {
+          "default": "{color.action.default.dark.base}"
+        },
+        "$value": "#273F2F",
+        "$description": "Basic dark color."
+      }
+    },
+    "action": {
+      "default": {
+        "gray": {
+          "100": {
+            "source": "$action-default-gray-100",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.100}"
+          },
+          "200": {
+            "source": "$action-default-gray-200",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.200}"
+          },
+          "300": {
+            "source": "$action-default-gray-300",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.300}"
+          },
+          "400": {
+            "source": "$action-default-gray-400",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.400}"
+          },
+          "500": {
+            "source": "$action-default-gray-500",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.500}"
+          },
+          "600": {
+            "source": "$action-default-gray-600",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.600}"
+          },
+          "700": {
+            "source": "$action-default-gray-700",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.700}"
+          },
+          "800": {
+            "source": "$action-default-gray-800",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.800}"
+          },
+          "900": {
+            "source": "$action-default-gray-900",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.900}"
+          },
+          "base": {
+            "source": "$action-default-gray-base",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.base}"
+          }
+        },
+        "primary": {
+          "100": {
+            "source": "$action-default-primary-100",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.100}"
+          },
+          "200": {
+            "source": "$action-default-primary-200",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.200}"
+          },
+          "300": {
+            "source": "$action-default-primary-300",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.300}"
+          },
+          "400": {
+            "source": "$action-default-primary-400",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.400}"
+          },
+          "500": {
+            "source": "$action-default-primary-500",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.500}"
+          },
+          "600": {
+            "source": "$action-default-primary-600",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.600}"
+          },
+          "700": {
+            "source": "$action-default-primary-700",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.700}"
+          },
+          "800": {
+            "source": "$action-default-primary-800",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.800}"
+          },
+          "900": {
+            "source": "$action-default-primary-900",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.900}"
+          },
+          "base": {
+            "source": "$action-default-primary-base",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.base}"
+          }
+        },
+        "secondary": {
+          "100": {
+            "source": "$action-default-secondary-100",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.100}"
+          },
+          "200": {
+            "source": "$action-default-secondary-200",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.200}"
+          },
+          "300": {
+            "source": "$action-default-secondary-300",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.300}"
+          },
+          "400": {
+            "source": "$action-default-secondary-400",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.400}"
+          },
+          "500": {
+            "source": "$action-default-secondary-500",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.500}"
+          },
+          "600": {
+            "source": "$action-default-secondary-600",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.600}"
+          },
+          "700": {
+            "source": "$action-default-secondary-700",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.700}"
+          },
+          "800": {
+            "source": "$action-default-secondary-800",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.800}"
+          },
+          "900": {
+            "source": "$action-default-secondary-900",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.900}"
+          },
+          "base": {
+            "source": "$action-default-secondary-base",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.base}"
+          }
+        },
+        "brand": {
+          "100": {
+            "source": "$action-default-brand-100",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.100}"
+          },
+          "200": {
+            "source": "$action-default-brand-200",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.200}"
+          },
+          "300": {
+            "source": "$action-default-brand-300",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.300}"
+          },
+          "400": {
+            "source": "$action-default-brand-400",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.400}"
+          },
+          "500": {
+            "source": "$action-default-brand-500",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.500}"
+          },
+          "600": {
+            "source": "$action-default-brand-600",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.600}"
+          },
+          "700": {
+            "source": "$action-default-brand-700",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.700}"
+          },
+          "800": {
+            "source": "$action-default-brand-800",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.800}"
+          },
+          "900": {
+            "source": "$action-default-brand-900",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.900}"
+          },
+          "base": {
+            "source": "$action-default-brand-base",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.base}"
+          }
+        },
+        "success": {
+          "100": {
+            "source": "$action-default-success-100",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.100}"
+          },
+          "200": {
+            "source": "$action-default-success-200",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.200}"
+          },
+          "300": {
+            "source": "$action-default-success-300",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.300}"
+          },
+          "400": {
+            "source": "$action-default-success-400",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.400}"
+          },
+          "500": {
+            "source": "$action-default-success-500",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.500}"
+          },
+          "600": {
+            "source": "$action-default-success-600",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.600}"
+          },
+          "700": {
+            "source": "$action-default-success-700",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.700}"
+          },
+          "800": {
+            "source": "$action-default-success-800",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.800}"
+          },
+          "900": {
+            "source": "$action-default-success-900",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.900}"
+          },
+          "base": {
+            "source": "$action-default-success-base",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.base}"
+          }
+        },
+        "info": {
+          "100": {
+            "source": "$action-default-info-100",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.100}"
+          },
+          "200": {
+            "source": "$action-default-info-200",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.200}"
+          },
+          "300": {
+            "source": "$action-default-info-300",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.300}"
+          },
+          "400": {
+            "source": "$action-default-info-400",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.400}"
+          },
+          "500": {
+            "source": "$action-default-info-500",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.500}"
+          },
+          "600": {
+            "source": "$action-default-info-600",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.600}"
+          },
+          "700": {
+            "source": "$action-default-info-700",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.700}"
+          },
+          "800": {
+            "source": "$action-default-info-800",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.800}"
+          },
+          "900": {
+            "source": "$action-default-info-900",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.900}"
+          },
+          "base": {
+            "source": "$action-default-info-base",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.base}"
+          }
+        },
+        "warning": {
+          "100": {
+            "source": "$action-default-warning-100",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.100}"
+          },
+          "200": {
+            "source": "$action-default-warning-200",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.200}"
+          },
+          "300": {
+            "source": "$action-default-warning-300",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.300}"
+          },
+          "400": {
+            "source": "$action-default-warning-400",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.400}"
+          },
+          "500": {
+            "source": "$action-default-warning-500",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.500}"
+          },
+          "600": {
+            "source": "$action-default-warning-600",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.600}"
+          },
+          "700": {
+            "source": "$action-default-warning-700",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.700}"
+          },
+          "800": {
+            "source": "$action-default-warning-800",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.800}"
+          },
+          "900": {
+            "source": "$action-default-warning-900",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.900}"
+          },
+          "base": {
+            "source": "$action-default-warning-base",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.base}"
+          }
+        },
+        "danger": {
+          "100": {
+            "source": "$action-default-danger-100",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.100}"
+          },
+          "200": {
+            "source": "$action-default-danger-200",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.200}"
+          },
+          "300": {
+            "source": "$action-default-danger-300",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.300}"
+          },
+          "400": {
+            "source": "$action-default-danger-400",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.400}"
+          },
+          "500": {
+            "source": "$action-default-danger-500",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.500}"
+          },
+          "600": {
+            "source": "$action-default-danger-600",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.600}"
+          },
+          "700": {
+            "source": "$action-default-danger-700",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.700}"
+          },
+          "800": {
+            "source": "$action-default-danger-800",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.800}"
+          },
+          "900": {
+            "source": "$action-default-danger-900",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.900}"
+          },
+          "base": {
+            "source": "$action-default-danger-base",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.base}"
+          }
+        },
+        "light": {
+          "100": {
+            "source": "$action-default-light-100",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.100}"
+          },
+          "200": {
+            "source": "$action-default-light-200",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.200}"
+          },
+          "300": {
+            "source": "$action-default-light-300",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.300}"
+          },
+          "400": {
+            "source": "$action-default-light-400",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.400}"
+          },
+          "500": {
+            "source": "$action-default-light-500",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.500}"
+          },
+          "600": {
+            "source": "$action-default-light-600",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.600}"
+          },
+          "700": {
+            "source": "$action-default-light-700",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.700}"
+          },
+          "800": {
+            "source": "$action-default-light-800",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.800}"
+          },
+          "900": {
+            "source": "$action-default-light-900",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.900}"
+          },
+          "base": {
+            "source": "$action-default-light-base",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.base}"
+          }
+        },
+        "dark": {
+          "100": {
+            "source": "$action-default-dark-100",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.100}"
+          },
+          "200": {
+            "source": "$action-default-dark-200",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.200}"
+          },
+          "300": {
+            "source": "$action-default-dark-300",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.300}"
+          },
+          "400": {
+            "source": "$action-default-dark-400",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.400}"
+          },
+          "500": {
+            "source": "$action-default-dark-500",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.500}"
+          },
+          "600": {
+            "source": "$action-default-dark-600",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.600}"
+          },
+          "700": {
+            "source": "$action-default-dark-700",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.700}"
+          },
+          "800": {
+            "source": "$action-default-dark-800",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.800}"
+          },
+          "900": {
+            "source": "$action-default-dark-900",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.900}"
+          },
+          "base": {
+            "source": "$action-default-dark-base",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.base}"
+          }
+        },
+        "accent": {
+          "a": {
+            "source": "$action-default-accent-a",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.accent.a}"
+          },
+          "b": {
+            "source": "$action-default-accent-b",
+            "modify": [
+              {
+                "type": "lighten",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.accent.b}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/global/elevation.json b/tokens/src/themes/dark/global/elevation.json
new file mode 100644
index 00000000000..da5ffb32007
--- /dev/null
+++ b/tokens/src/themes/dark/global/elevation.json
@@ -0,0 +1,589 @@
+{
+  "elevation": {
+    "$type": "shadow",
+    "box-shadow": {
+      "level": {
+        "1": {
+          "source": "$level-1-box-shadow",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".25rem"
+            }
+          ],
+          "$description": "Basic box shadow of level 1."
+        },
+        "2": {
+          "source": "$level-2-box-shadow",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".5rem"
+            }
+          ],
+          "$description": "Basic box shadow of level 2."
+        },
+        "3": {
+          "source": "$level-3-box-shadow",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".625rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1rem"
+            }
+          ],
+          "$description": "Basic box shadow of level 3."
+        },
+        "4": {
+          "source": "$level-4-box-shadow",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".625rem",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1.25rem"
+            }
+          ],
+          "$description": "Basic box shadow of level 4."
+        },
+        "5": {
+          "source": "$level-5-box-shadow",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "1.25rem",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "3rem"
+            }
+          ],
+          "$description": "Basic box shadow of level 5."
+        }
+      },
+      "base": {
+        "source": "$box-shadow",
+        "$value": {
+          "color": "rgba(0, 0, 0, .6)",
+          "offsetX": "0",
+          "offsetY": ".125rem",
+          "blur": ".25rem"
+        },
+        "$description": "Default box shadow."
+      },
+      "sm": {
+        "source": "$box-shadow-sm",
+        "$value": {
+          "color": "rgba(0, 0, 0, .55)",
+          "offsetX": "0",
+          "offsetY": ".0625rem",
+          "blur": ".125rem"
+        },
+        "$description": "Small box shadow."
+      },
+      "lg": {
+        "source": "$box-shadow-lg",
+        "$value": {
+          "color": "rgba(0, 0, 0, .6)",
+          "offsetX": "0",
+          "offsetY": ".25rem",
+          "blur": ".5rem"
+        },
+        "$description": "Large box shadow."
+      },
+      "down": {
+        "1": {
+          "source": "$box-shadow-down-1",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".25rem"
+            }
+          ],
+          "$description": "Bottom box shadow of level 1."
+        },
+        "2": {
+          "source": "$box-shadow-down-2",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".5rem"
+            }
+          ],
+          "$description": "Bottom box shadow of level 2."
+        },
+        "3": {
+          "source": "$box-shadow-down-3",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".25rem",
+              "blur": ".625rem"
+            }
+          ],
+          "$description": "Bottom box shadow of level 3."
+        },
+        "4": {
+          "source": "$box-shadow-down-4",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".625rem",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1.25rem"
+            }
+          ],
+          "$description": "Bottom box shadow of level 4."
+        },
+        "5": {
+          "source": "$box-shadow-down-5",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "1.25rem",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "3rem"
+            }
+          ],
+          "$description": "Bottom box shadow of level 5."
+        }
+      },
+      "left": {
+        "1": {
+          "source": "$box-shadow-left-1",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "-.0625rem",
+              "offsetY": "0",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "-.0625rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            }
+          ],
+          "$description": "Left box shadow of level 1."
+        },
+        "2": {
+          "source": "$box-shadow-left-2",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "-.125rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "-.125rem",
+              "offsetY": "0",
+              "blur": ".5rem"
+            }
+          ],
+          "$description": "Left box shadow of level 2."
+        },
+        "3": {
+          "source": "$box-shadow-left-3",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "-.5rem",
+              "offsetY": "0",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "-.25rem",
+              "offsetY": "0",
+              "blur": ".625rem"
+            }
+          ],
+          "$description": "Left box shadow of level 3."
+        },
+        "4": {
+          "source": "$box-shadow-left-4",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "-.625rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "-.5rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            }
+          ],
+          "$description": "Left box shadow of level 4."
+        },
+        "5": {
+          "source": "$box-shadow-left-5",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "-1.25rem",
+              "offsetY": "0",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "-.5rem",
+              "offsetY": "0",
+              "blur": "3rem"
+            }
+          ],
+          "$description": "Left box shadow of level 5."
+        }
+      },
+      "up": {
+        "1": {
+          "source": "$box-shadow-up-1",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "-.0625rem",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "-.0625rem",
+              "blur": ".25rem"
+            }
+          ],
+          "$description": "Top box shadow of level 1."
+        },
+        "2": {
+          "source": "$box-shadow-up-2",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "-.125rem",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "-.125rem",
+              "blur": ".5rem"
+            }
+          ],
+          "$description": "Top box shadow of level 2."
+        },
+        "3": {
+          "source": "$box-shadow-up-3",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "-.25rem",
+              "blur": ".625rem"
+            }
+          ],
+          "$description": "Top box shadow of level 3."
+        },
+        "4": {
+          "source": "$box-shadow-up-4",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "-.625rem",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1.25rem"
+            }
+          ],
+          "$description": "Top box shadow of level 4."
+        },
+        "5": {
+          "source": "$box-shadow-up-5",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "-1.25rem",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "3rem"
+            }
+          ],
+          "$description": "Basic box shadow of level 5."
+        }
+      },
+      "right": {
+        "1": {
+          "source": "$box-shadow-right-1",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": ".0625rem",
+              "offsetY": "0",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": ".0625rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            }
+          ],
+          "$description": "Right box shadow of level 1."
+        },
+        "2": {
+          "source": "$box-shadow-right-2",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": ".125rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": ".125rem",
+              "offsetY": "0",
+              "blur": ".5rem"
+            }
+          ],
+          "$description": "Right box shadow of level 2."
+        },
+        "3": {
+          "source": "$box-shadow-right-3",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": ".5rem",
+              "offsetY": "0",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": ".25rem",
+              "offsetY": "0",
+              "blur": ".625rem"
+            }
+          ],
+          "$description": "Right box shadow of level 3."
+        },
+        "4": {
+          "source": "$box-shadow-right-4",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": ".625rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": ".5rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            }
+          ],
+          "$description": "Right box shadow of level 4."
+        },
+        "5": {
+          "source": "$box-shadow-right-5",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "1.25rem",
+              "offsetY": "0",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": ".5rem",
+              "offsetY": "0",
+              "blur": "3rem"
+            }
+          ],
+          "$description": "Right box shadow of level 5."
+        }
+      },
+      "centered": {
+        "1": {
+          "source": "$box-shadow-centered-1",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".25rem"
+            }
+          ],
+          "$description": "Centered box shadow of level 1."
+        },
+        "2": {
+          "source": "$box-shadow-centered-2",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".5rem"
+            }
+          ],
+          "$description": "Centered box shadow of level 2."
+        },
+        "3": {
+          "source": "$box-shadow-centered-3",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".625rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1rem"
+            }
+          ],
+          "$description": "Centered box shadow of level 3."
+        },
+        "4": {
+          "source": "$box-shadow-centered-4",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            }
+          ],
+          "$description": "Centered box shadow of level 4."
+        },
+        "5": {
+          "source": "$box-shadow-centered-5",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .5)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "3rem"
+            }
+          ],
+          "$description": "Centered box shadow of level 5."
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/dark/global/other.json b/tokens/src/themes/dark/global/other.json
new file mode 100644
index 00000000000..360b2c14850
--- /dev/null
+++ b/tokens/src/themes/dark/global/other.json
@@ -0,0 +1,4 @@
+{
+  "yiq-text-dark": "#454545",
+  "yiq-text-light": "#FFFFFF"
+}
diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json
index fae700aa269..80f38c474a6 100644
--- a/tokens/src/themes/light/components/DataTable.json
+++ b/tokens/src/themes/light/components/DataTable.json
@@ -8,7 +8,9 @@
           "source": "$data-table-is-loading-bg",
           "modify": [{ "type": "alpha", "amount": 0.7 }],
           "$value": "{color.white}"
-        }
+        },
+        "header": { "source": "$data-table-header-bg", "$value": "{color.light.300}" },
+        "striped": { "source": "$data-table-striped-bg", "$value": "{color.light.200}" }
       },
       "border": { "source": "$data-table-border-color", "$value": "{color.light.300}" }
     }
diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json
index 7dd9ceada8d..d45c91ef24e 100644
--- a/tokens/src/themes/light/components/Modal.json
+++ b/tokens/src/themes/light/components/Modal.json
@@ -8,6 +8,10 @@
           "source": "$modal-content-border-color",
           "modify": [{ "type": "alpha", "amount": 0.2 }],
           "$value": "{color.black}"
+        },
+        "scroll-shadow": {
+          "from": { "source": "$modal-scroll-shadow-from", "$value": "#605C5C" },
+          "to": { "source": "$modal-scroll-shadow-to", "$value": "#B8BEBE" }
         }
       },
       "backdrop-bg": { "source": "$modal-backdrop-bg", "$value": "{color.black}" },
diff --git a/www/src/components/Settings.scss b/www/src/components/Settings.scss
index 0ff40b70490..fce7ba1577e 100644
--- a/www/src/components/Settings.scss
+++ b/www/src/components/Settings.scss
@@ -11,7 +11,7 @@
   }
 
   &-label {
-    color: var(--pgn-color-black);
+    color: var(--pgn-color-headings-base);
   }
 
   &-direction {
diff --git a/www/src/components/header/Header.scss b/www/src/components/header/Header.scss
index ddd9dad3f27..6da06d4e6c2 100644
--- a/www/src/components/header/Header.scss
+++ b/www/src/components/header/Header.scss
@@ -39,7 +39,7 @@
 
   &-home--menu {
     position: absolute;
-    background-color: var(--pgn-color-white);
+    background-color: var(--pgn-color-bg-base);
     width: 28rem;
     left: -3rem;
     box-shadow: var(--pgn-elevation-box-shadow-down-2);
diff --git a/www/src/hooks/useCustomThemes.ts b/www/src/hooks/useCustomThemes.ts
index 591ee44cfcb..7a069f3ce90 100644
--- a/www/src/hooks/useCustomThemes.ts
+++ b/www/src/hooks/useCustomThemes.ts
@@ -3,7 +3,7 @@ import { type ThemeConfig } from '../types/types';
 import { UpdateSettingsFunction } from './useSettings';
 
 import { encodeThemesToQueryParam } from '../utils/queryParamEncoding';
-import { DEFAULT_THEME } from '../utils/themeUtils';
+import { DEFAULT_THEMES } from '../utils/themeUtils';
 
 /**
  * Hook to manage theme state including default and custom themes
@@ -58,9 +58,9 @@ export const useCustomThemes = (
       activeIdx = value;
     }
 
-    // Ensure we have at least the default theme
+    // Ensure we have at least the built-in default themes
     if (themesArr.length === 0) {
-      themesArr = [DEFAULT_THEME];
+      themesArr = [...DEFAULT_THEMES];
       activeIdx = 0;
     }
 
@@ -111,9 +111,9 @@ export const useCustomThemes = (
     if (index >= 0 && index < currentThemes.length) {
       const newThemes = currentThemes.filter((_, i) => i !== index);
 
-      // Ensure we have at least the default theme
+      // Ensure we have at least the built-in default themes
       if (newThemes.length === 0) {
-        newThemes.push(DEFAULT_THEME);
+        newThemes.push(...DEFAULT_THEMES);
       }
 
       // Adjust active index if needed
@@ -144,9 +144,9 @@ export const useCustomThemes = (
     url.searchParams.delete('themes');
     window.history.replaceState({}, '', url.toString());
 
-    // Update settings atomically - reset to just the default theme
+    // Update settings atomically - reset to the built-in default themes
     updateSettings({
-      themes: [DEFAULT_THEME],
+      themes: [...DEFAULT_THEMES],
       activeThemeIndex: 0,
     });
   };
diff --git a/www/src/hooks/useSettings.ts b/www/src/hooks/useSettings.ts
index 04c9b2e0f46..ceb251fcfc3 100644
--- a/www/src/hooks/useSettings.ts
+++ b/www/src/hooks/useSettings.ts
@@ -3,7 +3,7 @@ import { type ContainerSize } from '~paragon-react';
 import { SETTINGS_EVENTS, sendUserAnalyticsEvent } from '../../segment-events';
 import { type ThemeConfig } from '../types/types';
 import { decodeThemesFromQueryParam } from '../utils/queryParamEncoding';
-import { DEFAULT_THEME } from '../utils/themeUtils';
+import { DEFAULT_THEMES } from '../utils/themeUtils';
 
 export interface Settings {
   direction?: string;
@@ -31,7 +31,7 @@ const defaultSettings: Settings = {
   direction: 'ltr',
   language: 'en',
   containerWidth: 'md' as ContainerSize,
-  themes: [DEFAULT_THEME],
+  themes: DEFAULT_THEMES,
   activeThemeIndex: 0,
 };
 
@@ -103,10 +103,11 @@ export const useSettings = (): UseSettings => {
     };
 
     // Normalize themes: filter out entries without URLs (e.g. old default themes
-    // from shared links or localStorage), and ensure DEFAULT_THEME is always first.
+    // from shared links or localStorage), and ensure the built-in DEFAULT_THEMES
+    // (light + dark) are always first, in order.
     const loadedThemes = Array.isArray(finalSettings.themes) ? finalSettings.themes : [];
     const customThemes = loadedThemes.filter(t => !t.isDefault && t.urls?.length > 0);
-    finalSettings.themes = [DEFAULT_THEME, ...customThemes];
+    finalSettings.themes = [...DEFAULT_THEMES, ...customThemes];
 
     const activeIndex = finalSettings.activeThemeIndex;
     if (activeIndex == null || activeIndex < 0 || activeIndex >= finalSettings.themes.length) {
diff --git a/www/src/scss/openedx-dark-theme.scss b/www/src/scss/openedx-dark-theme.scss
new file mode 100644
index 00000000000..6978fa778b0
--- /dev/null
+++ b/www/src/scss/openedx-dark-theme.scss
@@ -0,0 +1,5 @@
+@use "~paragon-style/scss/core/core" as paragonCore;
+@use "~paragon-style/css/themes/dark/variables" as paragonDarkVariables;
+@use "~paragon-style/css/themes/dark/abstraction-variables" as paragonDarkAbstractionVariables;
+@use "~paragon-style/css/themes/dark/utility-classes" as paragonDarkUtilityClasses;
+@use "base";
diff --git a/www/src/utils/themeUtils.ts b/www/src/utils/themeUtils.ts
index 67d3edbbeee..4b183081612 100644
--- a/www/src/utils/themeUtils.ts
+++ b/www/src/utils/themeUtils.ts
@@ -9,6 +9,24 @@ export const DEFAULT_THEME: ThemeConfig = {
   isDefault: true,
 };
 
+/**
+ * Built-in "Open edX Dark" theme.
+ *
+ * The dark variant is compiled from `www/src/scss/openedx-dark-theme.scss`
+ * (registered in `theme-config.js`) into `public/static/openedx-dark-theme.css`.
+ * Selecting it overlays Paragon's dark design-token CSS over the page.
+ */
+export const DARK_DEFAULT_THEME: ThemeConfig = {
+  name: 'Open edX Dark',
+  urls: ['/static/openedx-dark-theme.css'],
+  isDefault: true,
+};
+
+/**
+ * Built-in themes that are always present in the theme selector, in display order.
+ */
+export const DEFAULT_THEMES: ThemeConfig[] = [DEFAULT_THEME, DARK_DEFAULT_THEME];
+
 /**
  * Converts existing theme to ThemeConfig (edit mode)
  * @param theme - Existing theme to convert
diff --git a/www/theme-config.js b/www/theme-config.js
index e82452e4e95..840370bec87 100644
--- a/www/theme-config.js
+++ b/www/theme-config.js
@@ -15,6 +15,12 @@ const THEMES = [
     stylesheet: 'openedx-theme',
     pathToVariables: undefined,
   },
+  {
+    id: 'openedx-dark',
+    label: 'Open edX Dark',
+    stylesheet: 'openedx-dark-theme',
+    pathToVariables: undefined,
+  },
 ];
 
 module.exports = {