diff --git a/.prettierignore b/.prettierignore
index 2098be16835d..a1a342817af0 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -39,9 +39,6 @@ packages/icons-react/next/**
 # Changelogs
 **/CHANGELOG.md
 
-# Generated docs
-**/docs/sass.md
-
 # Generate sass files
 **/scss/vendor/**
 **/_inlined/**
diff --git a/.yarn/cache/@babel-node-npm-7.14.7-f4ca01e24f-04d665fdcf.zip b/.yarn/cache/@babel-node-npm-7.14.7-f4ca01e24f-04d665fdcf.zip
new file mode 100644
index 000000000000..78a2f3ab73cd
Binary files /dev/null and b/.yarn/cache/@babel-node-npm-7.14.7-f4ca01e24f-04d665fdcf.zip differ
diff --git a/.yarn/cache/@babel-register-npm-7.13.16-c9089f2afd-a2a4622292.zip b/.yarn/cache/@babel-register-npm-7.13.16-c9089f2afd-a2a4622292.zip
deleted file mode 100644
index 6aa34c9580a1..000000000000
Binary files a/.yarn/cache/@babel-register-npm-7.13.16-c9089f2afd-a2a4622292.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-register-npm-7.14.5-5144ce6f7c-5fab2384f5.zip b/.yarn/cache/@babel-register-npm-7.14.5-5144ce6f7c-5fab2384f5.zip
new file mode 100644
index 000000000000..66d2baf46455
Binary files /dev/null and b/.yarn/cache/@babel-register-npm-7.14.5-5144ce6f7c-5fab2384f5.zip differ
diff --git a/.yarn/cache/core-js-npm-3.12.0-86ddce2306-d66e368bd7.zip b/.yarn/cache/core-js-npm-3.15.2-6825052e10-f8f61569c4.zip
similarity index 69%
rename from .yarn/cache/core-js-npm-3.12.0-86ddce2306-d66e368bd7.zip
rename to .yarn/cache/core-js-npm-3.15.2-6825052e10-f8f61569c4.zip
index be64e7761d90..4bfc32e96226 100644
Binary files a/.yarn/cache/core-js-npm-3.12.0-86ddce2306-d66e368bd7.zip and b/.yarn/cache/core-js-npm-3.15.2-6825052e10-f8f61569c4.zip differ
diff --git a/.yarn/cache/node-environment-flags-npm-1.0.6-019b553a56-268139ed0f.zip b/.yarn/cache/node-environment-flags-npm-1.0.6-019b553a56-268139ed0f.zip
new file mode 100644
index 000000000000..71c3c93a6f2b
Binary files /dev/null and b/.yarn/cache/node-environment-flags-npm-1.0.6-019b553a56-268139ed0f.zip differ
diff --git a/.yarn/cache/v8flags-npm-3.1.3-bfb62a4728-ba7fc706f1.zip b/.yarn/cache/v8flags-npm-3.1.3-bfb62a4728-ba7fc706f1.zip
deleted file mode 100644
index 65c231903ec0..000000000000
Binary files a/.yarn/cache/v8flags-npm-3.1.3-bfb62a4728-ba7fc706f1.zip and /dev/null differ
diff --git a/.yarn/cache/v8flags-npm-3.2.0-28770d6a95-193db08aa3.zip b/.yarn/cache/v8flags-npm-3.2.0-28770d6a95-193db08aa3.zip
new file mode 100644
index 000000000000..8b4917805c9d
Binary files /dev/null and b/.yarn/cache/v8flags-npm-3.2.0-28770d6a95-193db08aa3.zip differ
diff --git a/packages/carbon-react/.storybook/styles.scss b/packages/carbon-react/.storybook/styles.scss
index a6f921f7ef32..57ceb93e2e68 100644
--- a/packages/carbon-react/.storybook/styles.scss
+++ b/packages/carbon-react/.storybook/styles.scss
@@ -14,26 +14,27 @@ $feature-flags: (
 @use "~@ibm/plex/arabic";
 
 @use '../index.scss' as styles;
+@use '../scss/components/button';
 
 // For now, including all weights for testing
 @include arabic.all;
 @include sans.all;
 @include mono.all;
 
-body {
-  @include styles.theme();
+:root {
+  @include styles.theme(styles.$white, button.$white);
 }
 
 [data-carbon-theme='g10'] {
-  @include styles.theme(styles.$g10);
+  @include styles.theme(styles.$g10, button.$g10);
 }
 
 [data-carbon-theme='g90'] {
-  @include styles.theme(styles.$g90);
+  @include styles.theme(styles.$g90, button.$g90);
 }
 
 [data-carbon-theme='g100'] {
-  @include styles.theme(styles.$g100);
+  @include styles.theme(styles.$g100, button.$g100);
 }
 
 html[lang='en'] body {
diff --git a/packages/carbon-react/docs/sass.md b/packages/carbon-react/docs/sass.md
index be616ea73251..fb3458e3d81c 100644
--- a/packages/carbon-react/docs/sass.md
+++ b/packages/carbon-react/docs/sass.md
@@ -55,8 +55,8 @@ For most teams, this configuration will look like:
 }
 ```
 
-For bundler specific solutions, check out the sections below for your bundler
-of choice. If you can't find what you're looking for, please make an
+For bundler specific solutions, check out the sections below for your bundler of
+choice. If you can't find what you're looking for, please make an
 [issue](https://github.com/carbon-design-system/carbon/issues/new/choose) and
 we'll try to get instructions for it added!
 
@@ -105,5 +105,5 @@ export default {
       },
     },
   },
-}
+};
 ```
diff --git a/packages/carbon-react/scss/components/_button.scss b/packages/carbon-react/scss/components/_button.scss
new file mode 100644
index 000000000000..32dc20db3573
--- /dev/null
+++ b/packages/carbon-react/scss/components/_button.scss
@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/button';
diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
index 821c97cb49c6..f78af5dd4fca 100644
--- a/packages/styles/scss/__tests__/theme-test.js
+++ b/packages/styles/scss/__tests__/theme-test.js
@@ -24,7 +24,6 @@ describe('@carbon/styles/scss/theme', () => {
         variables: map.keys(meta.module-variables('theme')),
         mixins: (
           theme: meta.mixin-exists('theme', 'theme'),
-          set-theme: meta.mixin-exists('set-theme', 'theme'),
         ),
       ));
     `);
@@ -32,158 +31,140 @@ describe('@carbon/styles/scss/theme', () => {
     const { value: api } = get('api');
     expect(api.mixins).toEqual({
       theme: true,
-      'set-theme': true,
     });
     expect(api.variables).toMatchInlineSnapshot(`
-      Array [
-        "theme",
-        "interactive-01",
-        "interactive-02",
-        "interactive-03",
-        "interactive-04",
-        "ui-background",
-        "ui-01",
-        "ui-02",
-        "ui-03",
-        "ui-04",
-        "ui-05",
-        "text-01",
-        "text-02",
-        "text-03",
-        "text-04",
-        "text-05",
-        "text-error",
-        "icon-01",
-        "icon-02",
-        "icon-03",
-        "link-01",
-        "link-02",
-        "inverse-link",
-        "field-01",
-        "field-02",
-        "inverse-01",
-        "inverse-02",
-        "support-01",
-        "support-02",
-        "support-03",
-        "support-04",
-        "inverse-support-01",
-        "inverse-support-02",
-        "inverse-support-03",
-        "inverse-support-04",
-        "overlay-01",
-        "danger-01",
-        "danger-02",
-        "focus",
-        "inverse-focus-ui",
-        "hover-primary",
-        "active-primary",
-        "hover-primary-text",
-        "hover-secondary",
-        "active-secondary",
-        "hover-tertiary",
-        "active-tertiary",
-        "hover-ui",
-        "hover-light-ui",
-        "hover-selected-ui",
-        "active-ui",
-        "active-light-ui",
-        "selected-ui",
-        "selected-light-ui",
-        "inverse-hover-ui",
-        "hover-danger",
-        "active-danger",
-        "hover-row",
-        "visited-link",
-        "disabled-01",
-        "disabled-02",
-        "disabled-03",
-        "highlight",
-        "decorative-01",
-        "button-separator",
-        "skeleton-01",
-        "skeleton-02",
-        "background",
-        "layer",
-        "layer-accent",
-        "field",
-        "background-inverse",
-        "background-brand",
-        "interactive",
-        "border-subtle",
-        "border-strong",
-        "border-inverse",
-        "border-interactive",
-        "text-primary",
-        "text-secondary",
-        "text-placeholder",
-        "text-helper",
-        "text-on-color",
-        "text-inverse",
-        "link-primary",
-        "link-secondary",
-        "link-visited",
-        "link-inverse",
-        "icon-primary",
-        "icon-secondary",
-        "icon-on-color",
-        "icon-inverse",
-        "support-error",
-        "support-success",
-        "support-warning",
-        "support-info",
-        "support-error-inverse",
-        "support-success-inverse",
-        "support-warning-inverse",
-        "support-info-inverse",
-        "overlay",
-        "toggle-off",
-        "button-primary",
-        "button-secondary",
-        "button-tertiary",
-        "button-danger-primary",
-        "button-danger-secondary",
-        "background-active",
-        "layer-active",
-        "button-danger-active",
-        "button-primary-active",
-        "button-secondary-active",
-        "button-tertiary-active",
-        "focus-inset",
-        "focus-inverse",
-        "background-hover",
-        "layer-hover",
-        "field-hover",
-        "background-inverse-hover",
-        "link-primary-hover",
-        "button-danger-hover",
-        "button-primary-hover",
-        "button-secondary-hover",
-        "button-tertiary-hover",
-        "background-selected",
-        "background-selected-hover",
-        "layer-selected",
-        "layer-selected-hover",
-        "layer-selected-inverse",
-        "border-subtle-selected",
-        "layer-disabled",
-        "field-disabled",
-        "border-disabled",
-        "text-disabled",
-        "button-disabled",
-        "icon-disabled",
-        "text-on-color-disabled",
-        "icon-on-color-disabled",
-        "layer-selected-disabled",
-        "skeleton-background",
-        "skeleton-element",
-        "brand-01",
-        "brand-02",
-        "brand-03",
-        "active-01",
-        "hover-field",
-        "danger",
-      ]
-    `);
+Array [
+  "fallback",
+  "theme",
+  "use-fallback-value",
+  "background",
+  "background-active",
+  "background-selected",
+  "background-selected-hover",
+  "background-hover",
+  "background-brand",
+  "background-inverse",
+  "background-inverse-hover",
+  "layer-01",
+  "layer-active-01",
+  "layer-hover-01",
+  "layer-selected-01",
+  "layer-selected-hover-01",
+  "layer-02",
+  "layer-active-02",
+  "layer-hover-02",
+  "layer-selected-02",
+  "layer-selected-hover-02",
+  "layer-03",
+  "layer-active-03",
+  "layer-hover-03",
+  "layer-selected-03",
+  "layer-selected-hover-03",
+  "layer-disabled",
+  "layer-selected-inverse",
+  "layer-selected-disabled",
+  "layer-accent-01",
+  "layer-accent-active-01",
+  "layer-accent-hover-01",
+  "layer-accent-02",
+  "layer-accent-active-02",
+  "layer-accent-hover-02",
+  "layer-accent-03",
+  "layer-accent-active-03",
+  "layer-accent-hover-03",
+  "field-01",
+  "field-hover-01",
+  "field-02",
+  "field-hover-02",
+  "field-03",
+  "field-hover-03",
+  "field-disabled",
+  "interactive",
+  "border-subtle-00",
+  "border-subtle-01",
+  "border-subtle-selected-01",
+  "border-subtle-02",
+  "border-subtle-selected-02",
+  "border-subtle-03",
+  "border-subtle-selected-03",
+  "border-strong-01",
+  "border-strong-02",
+  "border-strong-03",
+  "border-inverse",
+  "border-interactive",
+  "border-disabled",
+  "text-primary",
+  "text-secondary",
+  "text-placeholder",
+  "text-helper",
+  "text-error",
+  "text-inverse",
+  "text-on-color",
+  "text-on-color-disabled",
+  "text-disabled",
+  "link-primary",
+  "link-primary-hover",
+  "link-secondary",
+  "link-inverse",
+  "link-visited",
+  "icon-primary",
+  "icon-secondary",
+  "icon-inverse",
+  "icon-on-color",
+  "icon-on-color-disabled",
+  "icon-disabled",
+  "support-error",
+  "support-success",
+  "support-warning",
+  "support-info",
+  "support-error-inverse",
+  "support-success-inverse",
+  "support-warning-inverse",
+  "support-info-inverse",
+  "support-caution-major",
+  "support-caution-minor",
+  "support-caution-undefined",
+  "highlight",
+  "overlay",
+  "toggle-off",
+  "focus",
+  "focus-inset",
+  "focus-inverse",
+  "skeleton-background",
+  "skeleton-element",
+  "border-subtle",
+  "border-strong",
+  "layer",
+  "layer-active",
+  "layer-hover",
+  "layer-accent",
+  "layer-selected",
+  "layer-selected-hover",
+  "field",
+  "field-hover",
+  "interactive-01",
+  "interactive-04",
+  "decorative-01",
+  "hover-row",
+  "ui-01",
+  "ui-02",
+  "ui-05",
+  "disabled-01",
+  "disabled-02",
+  "hover-field",
+  "hover-ui",
+  "selected-ui",
+  "hover-selected-ui",
+  "hover-light-ui",
+  "active-light-ui",
+  "text-01",
+  "text-02",
+  "text-04",
+  "text-05",
+  "icon-01",
+  "icon-02",
+  "link-01",
+]
+`);
   });
 });
diff --git a/packages/styles/scss/_theme.scss b/packages/styles/scss/_theme.scss
index 495c6a016bb2..7c6bb58a8a30 100644
--- a/packages/styles/scss/_theme.scss
+++ b/packages/styles/scss/_theme.scss
@@ -5,152 +5,48 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use './config' as *;
+@use '@carbon/themes/scss/modules/config' with (
+  $prefix: $prefix,
+);
+@use '@carbon/themes/scss/modules/tokens';
 @forward '@carbon/themes/scss/modules/theme';
-@forward '@carbon/themes/scss/modules/tokens'
-show
-  $interactive-01,
-  $interactive-02,
-  $interactive-03,
-  $interactive-04,
-  $ui-background,
-  $ui-01,
-  $ui-02,
-  $ui-03,
-  $ui-04,
-  $ui-05,
-  $text-01,
-  $text-02,
-  $text-03,
-  $text-04,
-  $text-05,
-  $text-error,
-  $icon-01,
-  $icon-02,
-  $icon-03,
-  $link-01,
-  $link-02,
-  $inverse-link,
-  $field-01,
-  $field-02,
-  $inverse-01,
-  $inverse-02,
-  $support-01,
-  $support-02,
-  $support-03,
-  $support-04,
-  $inverse-support-01,
-  $inverse-support-02,
-  $inverse-support-03,
-  $inverse-support-04,
-  $overlay-01,
-  $danger-01,
-  $danger-02,
-  $focus,
-  $inverse-focus-ui,
-  $hover-primary,
-  $active-primary,
-  $hover-primary-text,
-  $hover-secondary,
-  $active-secondary,
-  $hover-tertiary,
-  $active-tertiary,
-  $hover-ui,
-  $hover-light-ui,
-  $hover-selected-ui,
-  $active-ui,
-  $active-light-ui,
-  $selected-ui,
-  $selected-light-ui,
-  $inverse-hover-ui,
-  $hover-danger,
-  $active-danger,
-  $hover-row,
-  $visited-link,
-  $disabled-01,
-  $disabled-02,
-  $disabled-03,
-  $highlight,
-  $decorative-01,
-  $button-separator,
-  $skeleton-01,
-  $skeleton-02,
-  $background,
-  $layer,
-  $layer-accent,
-  $field,
-  $background-inverse,
-  $background-brand,
-  $interactive,
-  $border-subtle,
-  $border-strong,
-  $border-inverse,
-  $border-interactive,
-  $text-primary,
-  $text-secondary,
-  $text-placeholder,
-  $text-helper,
-  $text-on-color,
-  $text-inverse,
-  $link-primary,
-  $link-secondary,
-  $link-visited,
-  $link-inverse,
-  $icon-primary,
-  $icon-secondary,
-  $icon-on-color,
-  $icon-inverse,
-  $support-error,
-  $support-success,
-  $support-warning,
-  $support-info,
-  $support-error-inverse,
-  $support-success-inverse,
-  $support-warning-inverse,
-  $support-info-inverse,
-  $overlay,
-  $toggle-off,
-  $button-primary,
-  $button-secondary,
-  $button-tertiary,
-  $button-danger-primary,
-  $button-danger-secondary,
-  $background-active,
-  $layer-active,
-  $button-danger-active,
-  $button-primary-active,
-  $button-secondary-active,
-  $button-tertiary-active,
-  $focus-inset,
-  $focus-inverse,
-  $background-hover,
-  $layer-hover,
-  $field-hover,
-  $background-inverse-hover,
-  $link-primary-hover,
-  $button-danger-hover,
-  $button-primary-hover,
-  $button-secondary-hover,
-  $button-tertiary-hover,
-  $background-selected,
-  $background-selected-hover,
-  $layer-selected,
-  $layer-selected-hover,
-  $layer-selected-inverse,
-  $border-subtle-selected,
-  $layer-disabled,
-  $field-disabled,
-  $border-disabled,
-  $text-disabled,
-  $button-disabled,
-  $icon-disabled,
-  $text-on-color-disabled,
-  $icon-on-color-disabled,
-  $layer-selected-disabled,
-  $skeleton-background,
-  $skeleton-element,
-  $brand-01,
-  $brand-02,
-  $brand-03,
-  $active-01,
-  $hover-field,
-  $danger;
+@forward '@carbon/themes/scss/modules/tokens';
+
+// TODO: add contextual tokens
+$border-subtle: tokens.$border-subtle-01;
+$border-strong: tokens.$border-strong-01;
+
+$layer: tokens.$layer-01;
+$layer-active: tokens.$layer-active-01;
+$layer-hover: tokens.$layer-hover-01;
+$layer-accent: tokens.$layer-accent-01;
+$layer-selected: tokens.$layer-selected-01;
+$layer-selected-hover: tokens.$layer-selected-hover-01;
+
+$field: tokens.$field-01;
+$field-hover: tokens.$field-hover-01;
+
+// TODO remove
+$interactive-01: #0f62fe;
+$interactive-04: #0f62fe;
+$decorative-01: #e0e0e0;
+$hover-row: #636363;
+$ui-01: #f4f4f4;
+$ui-02: #ffffff;
+$ui-05: #161616;
+$disabled-01: #f4f4f4;
+$disabled-02: #c6c6c6;
+$hover-field: #e5e5e5;
+$hover-ui: #e5e5e5;
+$selected-ui: #e0e0e0;
+$hover-selected-ui: #cacaca;
+$hover-light-ui: #e5e5e5;
+$active-light-ui: #c6c6c6;
+$text-01: #161616;
+$text-02: #525252;
+$text-04: #ffffff;
+$text-05: #6f6f6f;
+$icon-01: #f4f4f4;
+$icon-02: #525252;
+$link-01: #0f62fe;
diff --git a/packages/styles/scss/components/__tests__/button-test.js b/packages/styles/scss/components/__tests__/button-test.js
index f2498738412c..b491bf177b88 100644
--- a/packages/styles/scss/components/__tests__/button-test.js
+++ b/packages/styles/scss/components/__tests__/button-test.js
@@ -25,22 +25,41 @@ describe('scss/components/button', () => {
     `);
     expect(unwrap('mixin')).toBe(true);
     expect(unwrap('variables')).toMatchInlineSnapshot(`
-      Array [
-        "button-font-weight",
-        "button-font-size",
-        "button-border-radius",
-        "button-height",
-        "button-padding",
-        "button-padding-field",
-        "button-padding-sm",
-        "button-padding-lg",
-        "button-padding-ghost",
-        "button-padding-ghost-field",
-        "button-padding-ghost-sm",
-        "button-border-width",
-        "button-outline-width",
-      ]
-    `);
+Array [
+  "button-font-weight",
+  "button-font-size",
+  "button-border-radius",
+  "button-height",
+  "button-padding",
+  "button-padding-field",
+  "button-padding-sm",
+  "button-padding-lg",
+  "button-padding-ghost",
+  "button-padding-ghost-field",
+  "button-padding-ghost-sm",
+  "button-border-width",
+  "button-outline-width",
+  "white",
+  "g10",
+  "g90",
+  "g100",
+  "button-separator",
+  "button-primary",
+  "button-secondary",
+  "button-tertiary",
+  "button-danger-primary",
+  "button-danger-secondary",
+  "button-danger-active",
+  "button-primary-active",
+  "button-secondary-active",
+  "button-tertiary-active",
+  "button-danger-hover",
+  "button-primary-hover",
+  "button-secondary-hover",
+  "button-tertiary-hover",
+  "button-disabled",
+]
+`);
   });
 
   test('configuration', async () => {
diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss
index ca7c055ce843..7b9244d6ff37 100644
--- a/packages/styles/scss/components/button/_button.scss
+++ b/packages/styles/scss/components/button/_button.scss
@@ -17,6 +17,7 @@
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/tooltip' as *;
 @use '../../utilities/visually-hidden' as *;
+@use 'tokens' as *;
 
 @mixin button {
   .#{$prefix}--btn {
diff --git a/packages/styles/scss/components/button/_index.scss b/packages/styles/scss/components/button/_index.scss
index 2da026bbe3d1..86439bfd53e1 100644
--- a/packages/styles/scss/components/button/_index.scss
+++ b/packages/styles/scss/components/button/_index.scss
@@ -7,6 +7,7 @@
 
 @forward 'vars';
 @forward 'button';
+@forward 'tokens';
 @use 'button';
 
 @include button.button;
diff --git a/packages/styles/scss/components/button/_mixins.scss b/packages/styles/scss/components/button/_mixins.scss
index 4a569b435d9f..951fbf595311 100644
--- a/packages/styles/scss/components/button/_mixins.scss
+++ b/packages/styles/scss/components/button/_mixins.scss
@@ -13,6 +13,7 @@
 @use '../../type' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert' as *;
+@use 'tokens' as *;
 
 @mixin button-base {
   @include component-reset.reset;
diff --git a/packages/styles/scss/components/button/_tokens.scss b/packages/styles/scss/components/button/_tokens.scss
new file mode 100644
index 000000000000..02c8bab65292
--- /dev/null
+++ b/packages/styles/scss/components/button/_tokens.scss
@@ -0,0 +1,76 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+@use '../../theme' as *;
+@use '../../utilities/custom-property';
+
+$white: (
+  button-separator: #e0e0e0,
+  button-primary: #0f62fe,
+  button-secondary: #393939,
+  button-tertiary: #0f62fe,
+  button-danger-primary: #da1e28,
+  button-danger-secondary: #da1e28,
+  button-danger-active: #750e13,
+  button-primary-active: #002d9c,
+  button-secondary-active: #6f6f6f,
+  button-tertiary-active: #002d9c,
+  button-danger-hover: #b81921,
+  button-primary-hover: #0353e9,
+  button-secondary-hover: #4c4c4c,
+  button-tertiary-hover: #0353e9,
+  button-disabled: #c6c6c6,
+);
+
+$g10: $white;
+
+$g90: map.merge(
+  $white,
+  (
+    button-separator: #161616,
+    button-secondary: #6f6f6f,
+    button-tertiary: #ffffff,
+    button-danger-secondary: #ff8389,
+    button-secondary-active: #393939,
+    button-tertiary-active: #c6c6c6,
+    button-secondary-hover: #606060,
+    button-tertiary-hover: #f4f4f4,
+    button-disabled: #6f6f6f,
+  )
+);
+
+$g100: map.merge(
+  $white,
+  (
+    button-separator: #161616,
+    button-secondary: #6f6f6f,
+    button-tertiary: #ffffff,
+    button-danger-secondary: #fa4d56,
+    button-secondary-active: #393939,
+    button-tertiary-active: #c6c6c6,
+    button-secondary-hover: #606060,
+    button-tertiary-hover: #f4f4f4,
+    button-disabled: #525252,
+  )
+);
+
+$button-separator: custom-property.get-var('button-separator');
+$button-primary: custom-property.get-var('button-primary');
+$button-secondary: custom-property.get-var('button-secondary');
+$button-tertiary: custom-property.get-var('button-tertiary');
+$button-danger-primary: custom-property.get-var('button-danger-primary');
+$button-danger-secondary: custom-property.get-var('button-danger-secondary');
+$button-danger-active: custom-property.get-var('button-danger-active');
+$button-primary-active: custom-property.get-var('button-primary-active');
+$button-secondary-active: custom-property.get-var('button-secondary-active');
+$button-tertiary-active: custom-property.get-var('button-tertiary-active');
+$button-danger-hover: custom-property.get-var('button-danger-hover');
+$button-primary-hover: custom-property.get-var('button-primary-hover');
+$button-secondary-hover: custom-property.get-var('button-secondary-hover');
+$button-tertiary-hover: custom-property.get-var('button-tertiary-hover');
+$button-disabled: custom-property.get-var('button-disabled');
diff --git a/packages/styles/scss/components/file-uploader/_file-uploader.scss b/packages/styles/scss/components/file-uploader/_file-uploader.scss
index 54863d4e6c30..1f7a90661459 100644
--- a/packages/styles/scss/components/file-uploader/_file-uploader.scss
+++ b/packages/styles/scss/components/file-uploader/_file-uploader.scss
@@ -100,7 +100,7 @@
   }
 
   .#{$prefix}--file-browse-btn--disabled .#{$prefix}--file__drop-container {
-    border: 1px dashed $button-disabled;
+    border: 1px dashed button.$button-disabled;
   }
 
   .#{$prefix}--label-description {
diff --git a/packages/styles/scss/components/menu/_menu.scss b/packages/styles/scss/components/menu/_menu.scss
index 276d74f5b1b5..c848cef05b60 100644
--- a/packages/styles/scss/components/menu/_menu.scss
+++ b/packages/styles/scss/components/menu/_menu.scss
@@ -10,6 +10,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../button/tokens' as button;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/z-index' as *;
@@ -62,7 +63,7 @@
 
   .#{$prefix}--menu-option--danger:hover,
   .#{$prefix}--menu-option--danger:focus {
-    background-color: $button-danger-primary;
+    background-color: button.$button-danger-primary;
     color: $text-on-color;
   }
 
diff --git a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss
index 237b4635f63a..e9bb40f2f05b 100644
--- a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss
+++ b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss
@@ -10,6 +10,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../button/tokens' as button;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/focus-outline' as *;
@@ -295,7 +296,7 @@
     .#{$prefix}--overflow-menu-options__btn:hover,
   .#{$prefix}--overflow-menu-options__option--danger
     .#{$prefix}--overflow-menu-options__btn:focus {
-    background-color: $button-danger-primary;
+    background-color: button.$button-danger-primary;
     color: $text-on-color;
 
     svg {
diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss
index a4b0cb65de31..9a061b9c66cb 100644
--- a/packages/styles/scss/components/tabs/_tabs.scss
+++ b/packages/styles/scss/components/tabs/_tabs.scss
@@ -18,7 +18,7 @@
 @use '../../breakpoint' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
-
+@use '../button/tokens' as button;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/rotate' as *;
 @use '../../utilities/box-shadow' as *;
@@ -249,7 +249,7 @@
   .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
     @include breakpoint(md) {
-      background-color: $button-disabled;
+      background-color: button.$button-disabled;
     }
   }
 
@@ -675,7 +675,7 @@
       .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--disabled,
     &.#{$prefix}--tabs--scrollable--container
       .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--disabled:hover {
-      background-color: $button-disabled;
+      background-color: button.$button-disabled;
     }
 
     //-----------------------------
diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
index b978492cc667..887487fee6f1 100644
--- a/packages/styles/scss/components/tile/_tile.scss
+++ b/packages/styles/scss/components/tile/_tile.scss
@@ -10,6 +10,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../button/tokens' as button;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;
@@ -252,7 +253,7 @@
   }
 
   .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected {
-    border-color: $button-disabled;
+    border-color: button.$button-disabled;
   }
 
   .#{$prefix}--tile--disabled .#{$prefix}--tile__checkmark svg {
diff --git a/packages/styles/scss/components/toggle/_toggle.scss b/packages/styles/scss/components/toggle/_toggle.scss
index 31c1635765c0..a426ba32ad9c 100644
--- a/packages/styles/scss/components/toggle/_toggle.scss
+++ b/packages/styles/scss/components/toggle/_toggle.scss
@@ -11,6 +11,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../button/tokens' as button;
 @use '../../utilities/convert' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;
@@ -125,7 +126,7 @@
     }
 
     .#{$prefix}--toggle--disabled .#{$prefix}--toggle__switch {
-      background-color: $button-disabled;
+      background-color: button.$button-disabled;
 
       &::before {
         background-color: $icon-on-color-disabled;
@@ -133,7 +134,7 @@
     }
 
     .#{$prefix}--toggle--disabled .#{$prefix}--toggle__check {
-      fill: $button-disabled;
+      fill: button.$button-disabled;
     }
 
     // HCM
@@ -304,7 +305,7 @@
       }
 
       &::after {
-        background-color: $button-disabled;
+        background-color: button.$button-disabled;
       }
 
       &::before,
@@ -518,7 +519,7 @@
       cursor: not-allowed;
 
       &::before {
-        background-color: $button-disabled;
+        background-color: button.$button-disabled;
       }
 
       &::after {
diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss
index 5d5966d9217c..bd2547661fca 100644
--- a/packages/styles/scss/components/tooltip/_tooltip.scss
+++ b/packages/styles/scss/components/tooltip/_tooltip.scss
@@ -10,6 +10,7 @@
 @use '../../motion' as *;
 @use '../../config' as *;
 @use '../../spacing' as *;
+@use '../button/tokens' as button;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/component-reset' as *;
 @use '../../utilities/visually-hidden' as *;
@@ -353,7 +354,7 @@
     &:focus {
       @include focus-outline('border');
 
-      fill: $button-primary-hover;
+      fill: button.$button-primary-hover;
     }
   }
 
diff --git a/packages/styles/scss/utilities/_custom-property.scss b/packages/styles/scss/utilities/_custom-property.scss
index 2fa3b6545ebe..4188bbefac21 100644
--- a/packages/styles/scss/utilities/_custom-property.scss
+++ b/packages/styles/scss/utilities/_custom-property.scss
@@ -35,6 +35,17 @@
   @return --#{config.$prefix}-#{$name};
 }
 
+/// Get the var() representation for a given token
+/// @param {String} $name
+/// @param {Any} $fallback
+/// @returns var()
+@function get-var($name, $fallback: false) {
+  @if $fallback {
+    @return var(--#{config.$prefix}-#{$name}, #{$fallback});
+  }
+  @return var(--#{config.$prefix}-#{$name});
+}
+
 /// Emit a declaration which sets the value of a CSS Custom Property using the
 /// $name as the <custom-property-name> and the $value as the
 /// <declaration-value>
diff --git a/packages/themes/__tests__/module-test.js b/packages/themes/__tests__/module-test.js
new file mode 100644
index 000000000000..a6ce24d2a39c
--- /dev/null
+++ b/packages/themes/__tests__/module-test.js
@@ -0,0 +1,152 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+const { group, themes } = require('../src/next');
+
+const { render } = SassRenderer.create(__dirname);
+const tokens = group.getTokens();
+
+describe('@carbon/themes/scss', () => {
+  test('index.scss', async () => {
+    const tokenVariables = tokens.map((token) => {
+      const variable = `themes.$${token.name}`;
+      return `$_: get('${variable}', ${variable});`;
+    });
+
+    const { unwrap } = await render(`
+      @use 'sass:meta';
+      @use '../' as themes;
+
+      // Theme mixin
+      $_: get('themes.theme', meta.mixin-exists(theme, 'themes'));
+
+      // Get value from current theme
+      $_: get('themes.get', meta.function-exists(get, 'themes'));
+
+      // Current theme
+      $_: get('themes.$theme', themes.$theme);
+
+      // Theme variables
+      ${tokenVariables.join('\n')}
+    `);
+
+    // Mixin
+    expect(unwrap('themes.theme')).toBe(true);
+    // Current theme
+    expect(unwrap('themes.$theme')).toBeDefined();
+    // Theme getter
+    expect(unwrap('themes.get')).toBe(true);
+
+    // All tokens should be available as variables
+    for (const token of tokens) {
+      const variable = `themes.$${token.name}`;
+      expect(unwrap(variable)).toBeDefined();
+    }
+  });
+
+  test('scss/_themes.scss', async () => {
+    const { unwrap } = await render(`
+      @use '../scss/modules/themes';
+
+      // Themes
+      $_: get('themes.$white', themes.$white);
+      $_: get('themes.$g10', themes.$g10);
+      $_: get('themes.$g90', themes.$g90);
+      $_: get('themes.$g100', themes.$g100);
+    `);
+
+    // Themes should be available
+    for (const theme of Object.keys(themes)) {
+      expect(unwrap(`themes.$${theme}`)).toBeDefined();
+    }
+  });
+
+  describe('configuration', () => {
+    // Set current theme to another theme
+    test('$theme', async () => {
+      const { unwrap } = await render(`
+        @use 'sass:map';
+        @use '../scss/modules/themes' as *;
+        @use '../' as themes with (
+          $theme: $g100
+        );
+
+        $_: get('theme.background', themes.get('background'));
+        $_: get('g100.background', map.get($g100, 'background'));
+      `);
+      expect(unwrap('theme.background')).toBe(unwrap('g100.background'));
+    });
+
+    // Set current theme to a custom theme
+    test('custom $theme', async () => {
+      const { unwrap } = await render(`
+        @use '../' as themes with (
+          $theme: (
+            token-01: #ffffff
+          )
+        );
+
+        $_: get('token-01', themes.get('token-01'));
+        $_: get('background', themes.get('background'));
+      `);
+      expect(unwrap('token-01')).toBe('#ffffff');
+      expect(unwrap('background')).toBeDefined();
+    });
+
+    // Set theme fallback
+    test('$fallback', async () => {
+      const { unwrap } = await render(`
+        @use 'sass:map';
+        @use '../scss/modules/themes' as *;
+        @use '../' as themes with (
+          $fallback: $g100,
+          $theme: (
+            token-01: #ffffff,
+          ),
+        );
+
+        $_: get('token-01', themes.get('token-01'));
+        $_: get('background', themes.get('background'));
+        $_: get('gray100.background', map.get($g100, 'background'));
+      `);
+
+      // Should allow custom token to resolve and other tokens should resolve
+      // from the $fallback theme
+      expect(unwrap('token-01')).toBe('#ffffff');
+      expect(unwrap('background')).toBe(unwrap('gray100.background'));
+    });
+
+    // Set value fallback for CSS Custom Properties
+    test('$use-fallback-value', async () => {
+      const { unwrap } = await render(`
+        @use '../' as themes with (
+          $use-fallback-value: true,
+        );
+
+        $_: get('background', themes.$background);
+      `);
+      expect(unwrap('background')).toBe('var(--cds-background, #ffffff)');
+    });
+
+    // Set prefix for CSS Custom Properties
+    test('$property-prefix', async () => {
+      const { unwrap } = await render(`
+        @use '../' as themes with (
+          $prefix: 'test',
+        );
+
+        $_: get('background', themes.$background);
+      `);
+      expect(unwrap('background')).toEqual('var(--test-background)');
+    });
+  });
+});
diff --git a/packages/themes/docs/sass.md b/packages/themes/docs/sass.md
new file mode 100644
index 000000000000..8f275d1f1307
--- /dev/null
+++ b/packages/themes/docs/sass.md
@@ -0,0 +1,92 @@
+# `@carbon/themes`
+
+_Note: this documentation is used with the next version of `@carbon/themes`
+which uses Sass Modules. It will not work in the current stable version of this
+package_
+
+<!-- prettier-ignore-start -->
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Table of Contents
+
+- [Usage](#usage)
+- [FAQ](#faq)
+  - [Why are the themes not exported in `@carbon/themes`?](#why-are-the-themes-not-exported-in-carbonthemes)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+<!-- prettier-ignore-end -->
+
+## Usage
+
+There are several entrypoints that you can use with `@carbon/themes`, including:
+
+| Filename                                     | Description                                            |
+| -------------------------------------------- | ------------------------------------------------------ |
+| `@use '@carbon/themes';`                     | Package entrypoint                                     |
+| `@use '@carbon/themes/scss/modules/config';` | Specify config options for the package                 |
+| `@use '@carbon/themes/scss/modules/themes';` | Theme definitions for white, g10, g90, and g100        |
+| `@use '@carbon/themes/scss/modules/theme';`  | Set the current theme, get token values from the theme |
+| `@use '@carbon/themes/scss/modules/tokens';` | Access theme tokens                                    |
+
+_Note: the white, g10, g90, and g100 themes are only available in the
+`scss/modules/themes` file and are not re-exported in `@carbon/themes`. To learn
+more, checkout our [FAQ](#why-are-the-themes-not-exported-in-carbonthemes)._
+
+You can bring in `@carbon/themes` by using `@use`:
+
+```scss
+@use '@carbon/themes';
+
+.my-component {
+  // Use tokens from the theme, this will map to a CSS Custom Property
+  color: themes.$token-01;
+}
+
+:root {
+  // Emit CSS Custom Properties for the current theme
+  @include themes.theme();
+}
+
+// Get the value of a specific token
+$custom-variable: rgba(themes.get('token-01'), 0.25);
+```
+
+You can configure the current theme with the `$theme` option:
+
+```scss
+@use '@carbon/themes/scss/modules/themes';
+@use '@carbon/themes' with (
+  $theme: themes.$g100,
+);
+```
+
+You can also extend the theme with your own custom tokens:
+
+```scss
+@use '@carbon/themes/scss/modules/themes';
+@use '@carbon/themes' with (
+  $fallback: themes.$g100,
+  $theme: (
+    token-01: #000000,
+  ),
+);
+```
+
+## FAQ
+
+### Why are the themes not exported in `@carbon/themes`?
+
+In order to support `@use '@carbon/themes' with` in Sass Modules, unfortunately
+we cannot re-export the themes available in `scss/modules/themes`. If we
+implemented the entrypoint at `@carbon/themes` to re-export that module, then
+Sass would not compile when doing the following:
+
+```scss
+@use '@carbon/themes/scss/modules/themes';
+@use '@carbon/themes' with (
+  $theme: themes.$g100,
+);
+```
+
+This is because the `scss/modules/themes` file will have been initialized twice
+which is not allowed in the Sass Module system.
diff --git a/packages/themes/index.scss b/packages/themes/index.scss
index a1dac313950f..be24212194c0 100644
--- a/packages/themes/index.scss
+++ b/packages/themes/index.scss
@@ -5,6 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'scss/modules/themes';
+@forward 'scss/modules/config';
 @forward 'scss/modules/theme';
 @forward 'scss/modules/tokens';
diff --git a/packages/themes/package.json b/packages/themes/package.json
index f04e3d130d4f..f014ef0c5489 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -26,7 +26,7 @@
   "scripts": {
     "ci-check": "carbon-cli check \"scss/**/*.scss\" -i \"**/generated/**\"",
     "clean": "rimraf es lib umd scss/generated",
-    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && node tasks/build.js && carbon-cli check \"scss/*.scss\""
+    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && babel-node --presets '@babel/preset-env' tasks/build.js && carbon-cli check \"scss/*.scss\""
   },
   "dependencies": {
     "@carbon/colors": "^10.28.0",
@@ -35,6 +35,8 @@
     "color": "^3.1.2"
   },
   "devDependencies": {
+    "@babel/node": "^7.14.2",
+    "@babel/preset-env": "^7.14.2",
     "@carbon/cli": "^10.25.0",
     "@carbon/cli-reporter": "^10.5.0",
     "@carbon/scss-generator": "^10.13.0",
@@ -45,5 +47,6 @@
     "js-yaml": "^3.13.0",
     "node-sass": "^4.13.1",
     "rimraf": "^3.0.0"
-  }
+  },
+  "sideEffects": false
 }
diff --git a/packages/themes/scss/modules/_config.scss b/packages/themes/scss/modules/_config.scss
new file mode 100644
index 000000000000..040069c9f4bb
--- /dev/null
+++ b/packages/themes/scss/modules/_config.scss
@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$prefix: 'cds' !default;
diff --git a/packages/themes/scss/modules/_theme.scss b/packages/themes/scss/modules/_theme.scss
index 67bfb4eb0a9c..5b475d412879 100644
--- a/packages/themes/scss/modules/_theme.scss
+++ b/packages/themes/scss/modules/_theme.scss
@@ -7,18 +7,23 @@
 
 @use 'sass:map';
 @use 'sass:meta';
+@use 'config';
 @use 'themes';
 
-$theme: themes.$white !default;
-$-custom-property-prefix: 'cds';
+/// Specify the fallback theme, used as a catch-all for tokens that you may not
+/// have defined in your custom theme
+$fallback: themes.$white !default;
 
-/// @access public
-/// @group @carbon/themes
-@mixin theme($active-theme: $theme, $component-tokens...) {
-  $parent-theme: $theme;
-  $theme: $active-theme !global;
+/// Specify the current theme. This can override existing tokens, or add new
+/// tokens. If you are adding new tokens, it's recommended that you set the
+/// fallback for your current theme
+$theme: () !default;
+$theme: map.merge($fallback, $theme);
 
-  @each $token, $value in $theme {
+/// Include the CSS Custom Properties for the active theme or a given theme on
+/// a selector
+@mixin theme($active-theme: $theme, $component-tokens...) {
+  @each $token, $value in $active-theme {
     @include -custom-property($token, $value);
   }
 
@@ -27,21 +32,20 @@ $-custom-property-prefix: 'cds';
       @include -custom-property($token, $value);
     }
   }
-
-  @content;
-
-  $theme: $parent-theme !global;
 }
 
-/// @access public
-/// @group @carbon/themes
-@mixin set-theme($active-theme) {
-  $theme: $active-theme !global;
+/// Retrieve the value for the given $token from the current $theme
+/// @param {String} $token
+@function get($token) {
+  @if map.has-key($theme, $token) {
+    @return map.get($theme, $token);
+  }
+  @error "Unable to find token: #{$token} in current $theme";
 }
 
 /// @access private
 /// @group @carbon/themes
-@mixin -custom-property($name, $value, $prefix: $-custom-property-prefix) {
+@mixin -custom-property($name, $value) {
   @if meta.type-of($value) == map {
     @each $property, $property-value in $value {
       // Only support one-level of depth for values that are maps. This is to
@@ -51,6 +55,6 @@ $-custom-property-prefix: 'cds';
       }
     }
   } @else {
-    --#{$prefix}-#{$name}: #{$value};
+    --#{config.$prefix}-#{$name}: #{$value};
   }
 }
diff --git a/packages/themes/scss/modules/_themes.scss b/packages/themes/scss/modules/_themes.scss
index 4e9bcd947b07..70170fb0a071 100644
--- a/packages/themes/scss/modules/_themes.scss
+++ b/packages/themes/scss/modules/_themes.scss
@@ -6,3 +6,4 @@
 //
 
 @forward 'generated/themes';
+@use 'generated/themes';
diff --git a/packages/themes/tasks/builders/modules-themes.js b/packages/themes/tasks/builders/modules-themes.js
index 2f2032c51c19..33114457cda9 100644
--- a/packages/themes/tasks/builders/modules-themes.js
+++ b/packages/themes/tasks/builders/modules-themes.js
@@ -8,78 +8,57 @@
 'use strict';
 
 const { types: t } = require('@carbon/scss-generator');
-const { formatTokenName } = require('../../lib');
+const { TokenFormat, themes, group } = require('../../src/next');
 const { FILE_BANNER, primitive } = require('./shared');
 
-function buildThemesFile(themes, tokens, defaultThemeName) {
-  const defaultTheme = themes[defaultThemeName];
-  const defaultThemeMap = t.Assignment({
-    id: t.Identifier(defaultThemeName),
-    init: t.SassFunctionCall(t.Identifier('utilities.merge'), [
-      t.SassValue('layout.$spacing'),
-      t.SassValue('layout.$fluid-spacing'),
-      t.SassValue('type.$tokens'),
-      t.SassMap({
-        properties: Object.keys(defaultTheme)
-          .filter((token) => {
-            return tokens.colors.includes(token);
-          })
-          .map((token) => {
-            return t.SassMapProperty(
-              t.Identifier(formatTokenName(token)),
-              primitive(defaultTheme[token])
-            );
-          }),
-      }),
-    ]),
-    default: true,
-  });
-  const themeMaps = Object.keys(themes)
-    .filter((name) => {
-      return name !== defaultThemeName && name !== 'v9';
-    })
-    .flatMap((name) => {
-      const theme = themes[name];
-      const comment = t.Comment(`/ Carbon's ${name} color theme
-/ @type Map
-/ @access public
-/ @group @carbon/themes`);
-      return [
-        t.Newline(),
-        comment,
-        t.Assignment({
-          id: t.Identifier(name),
-          init: t.SassFunctionCall(t.Identifier('map.merge'), [
-            t.Identifier(defaultThemeName),
-            t.SassMap({
-              properties: Object.keys(theme)
-                .filter((token) => {
-                  return theme[token] !== defaultTheme[token];
-                })
-                .map((token) => {
-                  return t.SassMapProperty(
-                    t.Identifier(formatTokenName(token)),
-                    primitive(theme[token])
-                  );
-                }),
-            }),
-          ]),
-          default: true,
-        }),
-      ];
-    });
-
-  return t.StyleSheet([
-    FILE_BANNER,
-    t.Newline(),
+function buildThemesFile() {
+  const imports = [
     t.SassModule('sass:map'),
     t.SassModule('@carbon/layout'),
     t.SassModule('@carbon/type'),
     t.SassModule('../utilities'),
-    t.Newline(),
-    defaultThemeMap,
-    ...themeMaps,
-  ]);
+  ];
+  const variables = Object.entries(themes).flatMap(([key, theme]) => {
+    return [
+      t.Newline(),
+      t.Assignment({
+        id: t.Identifier(key),
+        init: t.SassMap({
+          properties: Object.entries(theme)
+            .filter(([token]) => {
+              return group.getToken(
+                TokenFormat.convert({
+                  name: token,
+                  format: TokenFormat.formats.scss,
+                })
+              );
+            })
+            .map(([token, value]) => {
+              const id = TokenFormat.convert({
+                name: token,
+                format: TokenFormat.formats.scss,
+              });
+              return t.SassMapProperty(t.Identifier(id), primitive(value));
+            }),
+        }),
+        default: true,
+      }),
+      t.Assignment({
+        id: t.Identifier(key),
+        init: t.SassFunctionCall({
+          id: t.Identifier('utilities.merge'),
+          params: [
+            t.Identifier(key),
+            t.SassValue('layout.$spacing'),
+            t.SassValue('layout.$fluid-spacing'),
+            t.SassValue('type.$tokens'),
+          ],
+        }),
+      }),
+    ];
+  });
+
+  return t.StyleSheet([FILE_BANNER, t.Newline(), ...imports, ...variables]);
 }
 
 module.exports = buildThemesFile;
diff --git a/packages/themes/tasks/builders/modules-tokens.js b/packages/themes/tasks/builders/modules-tokens.js
index f0c4d78b7a5b..31665b55af40 100644
--- a/packages/themes/tasks/builders/modules-tokens.js
+++ b/packages/themes/tasks/builders/modules-tokens.js
@@ -8,23 +8,76 @@
 'use strict';
 
 const { types: t } = require('@carbon/scss-generator');
-const { formatTokenName } = require('../../lib');
+const { group } = require('../../src/next');
 const { FILE_BANNER } = require('./shared');
 
-function buildThemeTokens(tokens) {
-  const names = Object.values(tokens).flatMap((values) => {
-    return values.map(formatTokenName);
+function buildThemeTokens() {
+  const tokens = group.getTokens();
+  const variables = tokens.flatMap((token) => {
+    const id = token.name;
+    return [
+      t.Newline(),
+      t.Comment(`/ The CSS Custom Property for the \`${id}\` token`),
+      t.Assignment({
+        id: t.Identifier(id),
+        init: t.SassFunctionCall({
+          id: t.Identifier('_get'),
+          params: [t.SassString(id)],
+        }),
+        default: true,
+      }),
+    ];
   });
 
   return t.StyleSheet([
+    // Preamble
     FILE_BANNER,
     t.Newline(),
-    ...names.map((name) => {
-      return t.Assignment({
-        id: t.Identifier(name),
-        init: t.SassValue(`var(--cds-${name})`),
-      });
+
+    // Modules
+    t.SassModule('sass:map'),
+    t.SassModule('../config'),
+    t.SassModule('../theme'),
+    t.Newline(),
+
+    // Fallback
+    t.Comment(
+      '/ Specify if a fallback value should be provided for the CSS Custom Property'
+    ),
+    t.Assignment({
+      id: t.Identifier('use-fallback-value'),
+      init: t.SassBoolean(false),
+      default: true,
     }),
+    t.Newline(),
+
+    t.Comment('/ Internal helper for generating CSS Custom Properties'),
+    t.SassFunction({
+      id: t.Identifier('_get'),
+      params: [t.Identifier('token')],
+      body: t.BlockStatement([
+        t.IfStatement({
+          test: t.LogicalExpression({
+            left: t.Identifier('use-fallback-value'),
+            operator: '==',
+            right: t.SassBoolean(false),
+          }),
+          consequent: t.BlockStatement([
+            t.AtReturn(t.SassValue('var(--#{config.$prefix}-#{$token})')),
+          ]),
+          alternate: t.BlockStatement([
+            t.AtReturn(
+              t.SassValue(
+                'var(--#{config.$prefix}-#{$token}, #{theme.get($token)})'
+              )
+            ),
+          ]),
+        }),
+      ]),
+    }),
+
+    // Variables
+    ...variables,
   ]);
 }
 
diff --git a/yarn.lock b/yarn.lock
index ef8ab9f4bcb9..4ed03309ebcf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -448,6 +448,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/node@npm:^7.14.2":
+  version: 7.14.7
+  resolution: "@babel/node@npm:7.14.7"
+  dependencies:
+    "@babel/register": ^7.14.5
+    commander: ^4.0.1
+    core-js: ^3.15.0
+    node-environment-flags: ^1.0.5
+    regenerator-runtime: ^0.13.4
+    v8flags: ^3.1.1
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  bin:
+    babel-node: ./bin/babel-node.js
+  checksum: 04d665fdcf2db38edd39d69d701c6e7ea723399e6982f44f93f00178a8c6fda7c3648dbe090de78651c174b86e804c4d65fe24071c92b1352af00583b4c82202
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.12.11, @babel/parser@npm:^7.12.5, @babel/parser@npm:^7.12.7, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.5, @babel/parser@npm:^7.14.6, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.4.4, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.7.2":
   version: 7.14.7
   resolution: "@babel/parser@npm:7.14.7"
@@ -1437,7 +1455,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.0.0, @babel/preset-env@npm:^7.12.11, @babel/preset-env@npm:^7.14.7":
+"@babel/preset-env@npm:^7.0.0, @babel/preset-env@npm:^7.12.11, @babel/preset-env@npm:^7.14.2, @babel/preset-env@npm:^7.14.7":
   version: 7.14.7
   resolution: "@babel/preset-env@npm:7.14.7"
   dependencies:
@@ -1577,9 +1595,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/register@npm:^7.12.1, @babel/register@npm:^7.13.16":
-  version: 7.13.16
-  resolution: "@babel/register@npm:7.13.16"
+"@babel/register@npm:^7.12.1, @babel/register@npm:^7.13.16, @babel/register@npm:^7.14.5":
+  version: 7.14.5
+  resolution: "@babel/register@npm:7.14.5"
   dependencies:
     clone-deep: ^4.0.1
     find-cache-dir: ^2.0.0
@@ -1588,7 +1606,7 @@ __metadata:
     source-map-support: ^0.5.16
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: a2a4622292c281fa22e1e501c5c9cf5de41131b6824f3b96095275e315316d1f193593a1316f078bc43fb290f510c0419ae8d3515616c7607b4af4eefecc3d55
+  checksum: 5fab2384f5e3588cf5978312997afcc4cabcfc519eb6db7ebe3c5e704dc7faa7eef691b6939bc086937f732cdfbba028ea3fec0bdc23c41f19443bea13135a97
   languageName: node
   linkType: hard
 
@@ -2100,6 +2118,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@carbon/themes@workspace:packages/themes"
   dependencies:
+    "@babel/node": ^7.14.2
+    "@babel/preset-env": ^7.14.2
     "@carbon/cli": ^10.25.0
     "@carbon/cli-reporter": ^10.5.0
     "@carbon/colors": ^10.28.0
@@ -12057,10 +12077,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^3.0.1, core-js@npm:^3.0.4, core-js@npm:^3.11.1, core-js@npm:^3.2.0, core-js@npm:^3.6.5, core-js@npm:^3.8.2":
-  version: 3.12.0
-  resolution: "core-js@npm:3.12.0"
-  checksum: d66e368bd73c8af15321b92048c7dfca86675c892336bc1b21be5897b3e059ff1918a8d8308789ea2d287dc73463b9d9f50de944c806ecb995c4f1a9de7499a7
+"core-js@npm:^3.0.1, core-js@npm:^3.0.4, core-js@npm:^3.11.1, core-js@npm:^3.15.0, core-js@npm:^3.2.0, core-js@npm:^3.6.5, core-js@npm:^3.8.2":
+  version: 3.15.2
+  resolution: "core-js@npm:3.15.2"
+  checksum: f8f61569c4c3bdf50679226f5a1045551192a2f4bc3fa46a873b6fa834cff6d1634ee138a6e4bae3eea99f1b1db2d588fa693de74640447476292b41f595a4c3
   languageName: node
   linkType: hard
 
@@ -24482,6 +24502,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-environment-flags@npm:^1.0.5":
+  version: 1.0.6
+  resolution: "node-environment-flags@npm:1.0.6"
+  dependencies:
+    object.getownpropertydescriptors: ^2.0.3
+    semver: ^5.7.0
+  checksum: 268139ed0f7fabdca346dcb26931300ec7a1dc54a58085a849e5c78a82b94967f55df40177a69d4e819da278d98686d5c4fd49ab0d7bcff16fda25b6fffc4ca3
+  languageName: node
+  linkType: hard
+
 "node-fetch-npm@npm:^2.0.2":
   version: 2.0.2
   resolution: "node-fetch-npm@npm:2.0.2"
@@ -34360,12 +34390,12 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"v8flags@npm:^3.0.1":
-  version: 3.1.3
-  resolution: "v8flags@npm:3.1.3"
+"v8flags@npm:^3.0.1, v8flags@npm:^3.1.1":
+  version: 3.2.0
+  resolution: "v8flags@npm:3.2.0"
   dependencies:
     homedir-polyfill: ^1.0.1
-  checksum: ba7fc706f1c9a90a2e7a7cd09d5ae8bf1c273f6e2c5359f294ce26333445b8478a9b329fd9d920e46ab8236fae244cd76b44403540f8202b6cf8a02bc8a47769
+  checksum: 193db08aa396d993da04d3d985450784aa0010f51613005d13ef97d7b2b9e1ba5aef04affa585037adece12de5ca532f6f5fc40288495eab55e2eebc201809d2
   languageName: node
   linkType: hard