feat(themes): update module builders for new design tokens (#9128)

* chore(themes): update build script to use @babel/node

* feat(themes): update module builders for new design tokens

* chore(themes): remove commented code

* chore(project): update outdated prettierignore rule

* fix(themes): remove light and dark themes

* docs(themes): add initial docs

* feat(styles): update theme tokens that are imported

* feat(styles): add button tokens

* refactor(styles): update with new tokens and add compat tokens

* docs: run prettier

* refactor(project): update themes and storybook for carbon-react

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.prettierignore

@@ -39,9 +39,6 @@ packages/icons-react/next/**
 # Changelogs
 **/CHANGELOG.md
 
-# Generated docs
-**/docs/sass.md
-
 # Generate sass files
 **/scss/vendor/**
 **/_inlined/**

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 {

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 {
       },
     },
   },
-}
+};
 ```

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';

packages/styles/scss/__tests__/theme-test.js

@@ -24,166 +24,147 @@ 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'),
         ),
       ));
     `);
 
     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",
+]
+`);
   });
 });