@carbon/charts 0.41.91 → 0.41.95

package/styles/vendor/@carbon/themes/docs/sass.md

@@ -1,1689 +1,96 @@
-# Sass API
+# `@carbon/themes`
 
-| Mark | Description                                                |
-| ---- | ---------------------------------------------------------- |
-| ✅   | Public functions, mixins, placeholders, and variables      |
-| ❌   | Private items - not supported outside package's build      |
-| ⚠️   | Deprecated items - may not be available in future releases |
+_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_
 
-<!-- toc -->
+<!-- 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
 
-- [@carbon/themes](#carbonthemes)
-  - [✅carbon--theme [mixin]](#carbon--theme-mixin)
-  - [✅carbon--theme--white [variable]](#carbon--theme--white-variable)
-  - [✅carbon--theme--g10 [variable]](#carbon--theme--g10-variable)
-  - [✅carbon--theme--g90 [variable]](#carbon--theme--g90-variable)
-  - [✅carbon--theme--g100 [variable]](#carbon--theme--g100-variable)
-  - [✅carbon--theme [variable]](#carbon--theme-variable)
-  - [✅interactive-01 [variable]](#interactive-01-variable)
-  - [✅interactive-02 [variable]](#interactive-02-variable)
-  - [✅interactive-03 [variable]](#interactive-03-variable)
-  - [✅interactive-04 [variable]](#interactive-04-variable)
-  - [✅ui-background [variable]](#ui-background-variable)
-  - [✅ui-01 [variable]](#ui-01-variable)
-  - [✅ui-02 [variable]](#ui-02-variable)
-  - [✅ui-03 [variable]](#ui-03-variable)
-  - [✅ui-04 [variable]](#ui-04-variable)
-  - [✅ui-05 [variable]](#ui-05-variable)
-  - [✅text-01 [variable]](#text-01-variable)
-  - [✅text-02 [variable]](#text-02-variable)
-  - [✅text-03 [variable]](#text-03-variable)
-  - [✅text-04 [variable]](#text-04-variable)
-  - [✅icon-01 [variable]](#icon-01-variable)
-  - [✅icon-02 [variable]](#icon-02-variable)
-  - [✅icon-03 [variable]](#icon-03-variable)
-  - [✅link-01 [variable]](#link-01-variable)
-  - [✅field-01 [variable]](#field-01-variable)
-  - [✅field-02 [variable]](#field-02-variable)
-  - [✅inverse-01 [variable]](#inverse-01-variable)
-  - [✅inverse-02 [variable]](#inverse-02-variable)
-  - [✅support-01 [variable]](#support-01-variable)
-  - [✅support-02 [variable]](#support-02-variable)
-  - [✅support-03 [variable]](#support-03-variable)
-  - [✅support-04 [variable]](#support-04-variable)
-  - [✅inverse-support-01 [variable]](#inverse-support-01-variable)
-  - [✅inverse-support-02 [variable]](#inverse-support-02-variable)
-  - [✅inverse-support-03 [variable]](#inverse-support-03-variable)
-  - [✅inverse-support-04 [variable]](#inverse-support-04-variable)
-  - [✅overlay-01 [variable]](#overlay-01-variable)
-  - [✅focus [variable]](#focus-variable)
-  - [✅hover-primary [variable]](#hover-primary-variable)
-  - [✅active-primary [variable]](#active-primary-variable)
-  - [✅hover-primary-text [variable]](#hover-primary-text-variable)
-  - [✅hover-secondary [variable]](#hover-secondary-variable)
-  - [✅active-secondary [variable]](#active-secondary-variable)
-  - [✅hover-tertiary [variable]](#hover-tertiary-variable)
-  - [✅active-tertiary [variable]](#active-tertiary-variable)
-  - [✅hover-ui [variable]](#hover-ui-variable)
-  - [✅active-ui [variable]](#active-ui-variable)
-  - [✅selected-ui [variable]](#selected-ui-variable)
-  - [✅hover-selected-ui [variable]](#hover-selected-ui-variable)
-  - [✅hover-danger [variable]](#hover-danger-variable)
-  - [✅active-danger [variable]](#active-danger-variable)
-  - [✅hover-row [variable]](#hover-row-variable)
-  - [✅visited-link [variable]](#visited-link-variable)
-  - [✅disabled-01 [variable]](#disabled-01-variable)
-  - [✅disabled-02 [variable]](#disabled-02-variable)
-  - [✅disabled-03 [variable]](#disabled-03-variable)
-  - [✅highlight [variable]](#highlight-variable)
-  - [✅skeleton-01 [variable]](#skeleton-01-variable)
-  - [✅skeleton-02 [variable]](#skeleton-02-variable)
-  - [✅⚠️brand-01 [variable]](#brand-01-variable)
-  - [✅⚠️brand-02 [variable]](#brand-02-variable)
-  - [✅⚠️brand-03 [variable]](#brand-03-variable)
-  - [✅⚠️active-01 [variable]](#active-01-variable)
-  - [✅⚠️hover-field [variable]](#hover-field-variable)
+- [Usage](#usage)
+- [FAQ](#faq)
+  - [Why are the themes not exported in `@carbon/themes`?](#why-are-the-themes-not-exported-in-carbonthemes)
 
-<!-- tocstop -->
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+<!-- prettier-ignore-end -->
 
-## @carbon/themes
+## Usage
 
-### ✅carbon--theme [mixin]
+There are several entrypoints that you can use with `@carbon/themes`, including:
 
-Define theme variables from a map of tokens
+| 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                                    |
 
-<details>
-<summary>Source code</summary>
+_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)._
 
-```scss
-@mixin carbon--theme($theme: $carbon--theme, $emit-custom-properties: false) {
-  $interactive-01: map-get($theme, 'interactive-01') !global;
-  $interactive-02: map-get($theme, 'interactive-02') !global;
-  $interactive-03: map-get($theme, 'interactive-03') !global;
-  $interactive-04: map-get($theme, 'interactive-04') !global;
-  $ui-background: map-get($theme, 'ui-background') !global;
-  $ui-01: map-get($theme, 'ui-01') !global;
-  $ui-02: map-get($theme, 'ui-02') !global;
-  $ui-03: map-get($theme, 'ui-03') !global;
-  $ui-04: map-get($theme, 'ui-04') !global;
-  $ui-05: map-get($theme, 'ui-05') !global;
-  $text-01: map-get($theme, 'text-01') !global;
-  $text-02: map-get($theme, 'text-02') !global;
-  $text-03: map-get($theme, 'text-03') !global;
-  $text-04: map-get($theme, 'text-04') !global;
-  $icon-01: map-get($theme, 'icon-01') !global;
-  $icon-02: map-get($theme, 'icon-02') !global;
-  $icon-03: map-get($theme, 'icon-03') !global;
-  $link-01: map-get($theme, 'link-01') !global;
-  $field-01: map-get($theme, 'field-01') !global;
-  $field-02: map-get($theme, 'field-02') !global;
-  $inverse-01: map-get($theme, 'inverse-01') !global;
-  $inverse-02: map-get($theme, 'inverse-02') !global;
-  $support-01: map-get($theme, 'support-01') !global;
-  $support-02: map-get($theme, 'support-02') !global;
-  $support-03: map-get($theme, 'support-03') !global;
-  $support-04: map-get($theme, 'support-04') !global;
-  $inverse-support-01: map-get($theme, 'inverse-support-01') !global;
-  $inverse-support-02: map-get($theme, 'inverse-support-02') !global;
-  $inverse-support-03: map-get($theme, 'inverse-support-03') !global;
-  $inverse-support-04: map-get($theme, 'inverse-support-04') !global;
-  $overlay-01: map-get($theme, 'overlay-01') !global;
-  $focus: map-get($theme, 'focus') !global;
-  $hover-primary: map-get($theme, 'hover-primary') !global;
-  $active-primary: map-get($theme, 'active-primary') !global;
-  $hover-primary-text: map-get($theme, 'hover-primary-text') !global;
-  $hover-secondary: map-get($theme, 'hover-secondary') !global;
-  $active-secondary: map-get($theme, 'active-secondary') !global;
-  $hover-tertiary: map-get($theme, 'hover-tertiary') !global;
-  $active-tertiary: map-get($theme, 'active-tertiary') !global;
-  $hover-ui: map-get($theme, 'hover-ui') !global;
-  $active-ui: map-get($theme, 'active-ui') !global;
-  $selected-ui: map-get($theme, 'selected-ui') !global;
-  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
-  $hover-danger: map-get($theme, 'hover-danger') !global;
-  $active-danger: map-get($theme, 'active-danger') !global;
-  $hover-row: map-get($theme, 'hover-row') !global;
-  $visited-link: map-get($theme, 'visited-link') !global;
-  $disabled-01: map-get($theme, 'disabled-01') !global;
-  $disabled-02: map-get($theme, 'disabled-02') !global;
-  $disabled-03: map-get($theme, 'disabled-03') !global;
-  $highlight: map-get($theme, 'highlight') !global;
-  $skeleton-01: map-get($theme, 'skeleton-01') !global;
-  $skeleton-02: map-get($theme, 'skeleton-02') !global;
-  $brand-01: map-get($theme, 'brand-01') !global;
-  $brand-02: map-get($theme, 'brand-02') !global;
-  $brand-03: map-get($theme, 'brand-03') !global;
-  $active-01: map-get($theme, 'active-01') !global;
-  $hover-field: map-get($theme, 'hover-field') !global;
-
-  @if $emit-custom-properties == true {
-    --interactive-01: #{map-get($theme, 'interactive-01')};
-    --interactive-02: #{map-get($theme, 'interactive-02')};
-    --interactive-03: #{map-get($theme, 'interactive-03')};
-    --interactive-04: #{map-get($theme, 'interactive-04')};
-    --ui-background: #{map-get($theme, 'ui-background')};
-    --ui-01: #{map-get($theme, 'ui-01')};
-    --ui-02: #{map-get($theme, 'ui-02')};
-    --ui-03: #{map-get($theme, 'ui-03')};
-    --ui-04: #{map-get($theme, 'ui-04')};
-    --ui-05: #{map-get($theme, 'ui-05')};
-    --text-01: #{map-get($theme, 'text-01')};
-    --text-02: #{map-get($theme, 'text-02')};
-    --text-03: #{map-get($theme, 'text-03')};
-    --text-04: #{map-get($theme, 'text-04')};
-    --icon-01: #{map-get($theme, 'icon-01')};
-    --icon-02: #{map-get($theme, 'icon-02')};
-    --icon-03: #{map-get($theme, 'icon-03')};
-    --link-01: #{map-get($theme, 'link-01')};
-    --field-01: #{map-get($theme, 'field-01')};
-    --field-02: #{map-get($theme, 'field-02')};
-    --inverse-01: #{map-get($theme, 'inverse-01')};
-    --inverse-02: #{map-get($theme, 'inverse-02')};
-    --support-01: #{map-get($theme, 'support-01')};
-    --support-02: #{map-get($theme, 'support-02')};
-    --support-03: #{map-get($theme, 'support-03')};
-    --support-04: #{map-get($theme, 'support-04')};
-    --inverse-support-01: #{map-get($theme, 'inverse-support-01')};
-    --inverse-support-02: #{map-get($theme, 'inverse-support-02')};
-    --inverse-support-03: #{map-get($theme, 'inverse-support-03')};
-    --inverse-support-04: #{map-get($theme, 'inverse-support-04')};
-    --overlay-01: #{map-get($theme, 'overlay-01')};
-    --focus: #{map-get($theme, 'focus')};
-    --hover-primary: #{map-get($theme, 'hover-primary')};
-    --active-primary: #{map-get($theme, 'active-primary')};
-    --hover-primary-text: #{map-get($theme, 'hover-primary-text')};
-    --hover-secondary: #{map-get($theme, 'hover-secondary')};
-    --active-secondary: #{map-get($theme, 'active-secondary')};
-    --hover-tertiary: #{map-get($theme, 'hover-tertiary')};
-    --active-tertiary: #{map-get($theme, 'active-tertiary')};
-    --hover-ui: #{map-get($theme, 'hover-ui')};
-    --active-ui: #{map-get($theme, 'active-ui')};
-    --selected-ui: #{map-get($theme, 'selected-ui')};
-    --hover-selected-ui: #{map-get($theme, 'hover-selected-ui')};
-    --hover-danger: #{map-get($theme, 'hover-danger')};
-    --active-danger: #{map-get($theme, 'active-danger')};
-    --hover-row: #{map-get($theme, 'hover-row')};
-    --visited-link: #{map-get($theme, 'visited-link')};
-    --disabled-01: #{map-get($theme, 'disabled-01')};
-    --disabled-02: #{map-get($theme, 'disabled-02')};
-    --disabled-03: #{map-get($theme, 'disabled-03')};
-    --highlight: #{map-get($theme, 'highlight')};
-    --skeleton-01: #{map-get($theme, 'skeleton-01')};
-    --skeleton-02: #{map-get($theme, 'skeleton-02')};
-    --brand-01: #{map-get($theme, 'brand-01')};
-    --brand-02: #{map-get($theme, 'brand-02')};
-    --brand-03: #{map-get($theme, 'brand-03')};
-    --active-01: #{map-get($theme, 'active-01')};
-    --hover-field: #{map-get($theme, 'hover-field')};
-  }
-
-  @content;
-  // Reset to default theme after apply in content
-  @if $theme != $carbon--theme {
-    @include carbon--theme();
-  }
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name                      | Description                                   | Type   | Default value    |
-| ------------------------- | --------------------------------------------- | ------ | ---------------- |
-| `$theme`                  | Map of theme tokens                           | `Map`  | `$carbon--theme` |
-| `$emit-custom-properties` | Output CSS Custom Properties for theme tokens | `Bool` | `false`          |
-
-**Example**:
-
-<details>
-<summary>Example code</summary>
+You can bring in `@carbon/themes` by using `@use`:
 
 ```scss
-// Default usage
-@include carbon--theme();
+@use '@carbon/themes';
 
-// Alternate styling (not white theme)
-@include carbon--theme($carbon--theme--g90) {
-  // declarations...
+.my-component {
+  // Use tokens from the theme, this will map to a CSS Custom Property
+  color: themes.$token-01;
 }
 
-// Inline styling
-@include carbon--theme($carbon--theme--g90) {
-  .my-dark-theme {
-    // declarations...
-  }
+:root {
+  // Emit CSS Custom Properties for the current theme
+  @include themes.theme();
 }
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Content**: Pass in your custom declaration blocks to be used after the token
-  maps set theming variables.
-- **Requires**:
-  - [interactive-01 [variable]](#interactive-01-variable)
-  - [interactive-02 [variable]](#interactive-02-variable)
-  - [interactive-03 [variable]](#interactive-03-variable)
-  - [interactive-04 [variable]](#interactive-04-variable)
-  - [ui-background [variable]](#ui-background-variable)
-  - [ui-01 [variable]](#ui-01-variable)
-  - [ui-02 [variable]](#ui-02-variable)
-  - [ui-03 [variable]](#ui-03-variable)
-  - [ui-04 [variable]](#ui-04-variable)
-  - [ui-05 [variable]](#ui-05-variable)
-  - [text-01 [variable]](#text-01-variable)
-  - [text-02 [variable]](#text-02-variable)
-  - [text-03 [variable]](#text-03-variable)
-  - [text-04 [variable]](#text-04-variable)
-  - [icon-01 [variable]](#icon-01-variable)
-  - [icon-02 [variable]](#icon-02-variable)
-  - [icon-03 [variable]](#icon-03-variable)
-  - [link-01 [variable]](#link-01-variable)
-  - [field-01 [variable]](#field-01-variable)
-  - [field-02 [variable]](#field-02-variable)
-  - [inverse-01 [variable]](#inverse-01-variable)
-  - [inverse-02 [variable]](#inverse-02-variable)
-  - [support-01 [variable]](#support-01-variable)
-  - [support-02 [variable]](#support-02-variable)
-  - [support-03 [variable]](#support-03-variable)
-  - [support-04 [variable]](#support-04-variable)
-  - [inverse-support-01 [variable]](#inverse-support-01-variable)
-  - [inverse-support-02 [variable]](#inverse-support-02-variable)
-  - [inverse-support-03 [variable]](#inverse-support-03-variable)
-  - [inverse-support-04 [variable]](#inverse-support-04-variable)
-  - [overlay-01 [variable]](#overlay-01-variable)
-  - [focus [variable]](#focus-variable)
-  - [hover-primary [variable]](#hover-primary-variable)
-  - [active-primary [variable]](#active-primary-variable)
-  - [hover-primary-text [variable]](#hover-primary-text-variable)
-  - [hover-secondary [variable]](#hover-secondary-variable)
-  - [active-secondary [variable]](#active-secondary-variable)
-  - [hover-tertiary [variable]](#hover-tertiary-variable)
-  - [active-tertiary [variable]](#active-tertiary-variable)
-  - [hover-ui [variable]](#hover-ui-variable)
-  - [active-ui [variable]](#active-ui-variable)
-  - [selected-ui [variable]](#selected-ui-variable)
-  - [hover-selected-ui [variable]](#hover-selected-ui-variable)
-  - [hover-danger [variable]](#hover-danger-variable)
-  - [active-danger [variable]](#active-danger-variable)
-  - [hover-row [variable]](#hover-row-variable)
-  - [visited-link [variable]](#visited-link-variable)
-  - [disabled-01 [variable]](#disabled-01-variable)
-  - [disabled-02 [variable]](#disabled-02-variable)
-  - [disabled-03 [variable]](#disabled-03-variable)
-  - [highlight [variable]](#highlight-variable)
-  - [skeleton-01 [variable]](#skeleton-01-variable)
-  - [skeleton-02 [variable]](#skeleton-02-variable)
-  - [brand-01 [variable]](#brand-01-variable)
-  - [brand-02 [variable]](#brand-02-variable)
-  - [brand-03 [variable]](#brand-03-variable)
-  - [active-01 [variable]](#active-01-variable)
-  - [hover-field [variable]](#hover-field-variable)
-  - [carbon--theme [variable]](#carbon--theme-variable)
-
-### ✅carbon--theme--white [variable]
-
-Carbon's white color theme
-
-<details>
-<summary>Source code</summary>
 
-```scss
-$carbon--theme--white: (
-  interactive-01: #0062ff,
-  interactive-02: #171717,
-  interactive-03: #0062ff,
-  interactive-04: #0062ff,
-  ui-background: #ffffff,
-  ui-01: #f3f3f3,
-  ui-02: #ffffff,
-  ui-03: #dcdcdc,
-  ui-04: #8c8c8c,
-  ui-05: #171717,
-  text-01: #171717,
-  text-02: #565656,
-  text-03: #8c8c8c,
-  text-04: #ffffff,
-  icon-01: #171717,
-  icon-02: #565656,
-  icon-03: #ffffff,
-  link-01: #0062ff,
-  field-01: #f3f3f3,
-  field-02: #ffffff,
-  inverse-01: #ffffff,
-  inverse-02: #3d3d3d,
-  support-01: #da1e28,
-  support-02: #24a148,
-  support-03: #fdd13a,
-  support-04: #054ada,
-  inverse-support-01: #fb4b53,
-  inverse-support-02: #3dbb61,
-  inverse-support-03: #fdd13a,
-  inverse-support-04: #408bfc,
-  overlay-01: rgba(23, 23, 23, 0.5),
-  focus: #0062ff,
-  hover-primary: #0353e9,
-  active-primary: #0530ad,
-  hover-primary-text: #054ada,
-  hover-secondary: #4c4c4c,
-  active-secondary: #6f6f6f,
-  hover-tertiary: #0353e9,
-  active-tertiary: #0530ad,
-  hover-ui: #e5e5e5,
-  active-ui: #bebebe,
-  selected-ui: #dcdcdc,
-  hover-selected-ui: #cacaca,
-  hover-danger: #ba1b23,
-  active-danger: #750e13,
-  hover-row: #e5e5e5,
-  visited-link: #8a3ffc,
-  disabled-01: #f3f3f3,
-  disabled-02: #bebebe,
-  disabled-03: #8c8c8c,
-  highlight: #c9deff,
-  skeleton-01: #e5e5e5,
-  skeleton-02: #bebebe,
-  brand-01: #0062ff,
-  brand-02: #171717,
-  brand-03: #0062ff,
-  active-01: #bebebe,
-  hover-field: #e5e5e5,
-);
+// Get the value of a specific token
+$custom-variable: rgba(themes.get('token-01'), 0.25);
 ```
 
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Map`
-- **Aliased**:
-  - `carbon--theme`
-
-### ✅carbon--theme--g10 [variable]
-
-Carbon's g10 color theme
-
-<details>
-<summary>Source code</summary>
+You can configure the current theme with the `$theme` option:
 
 ```scss
-$carbon--theme--g10: (
-  interactive-01: #0062ff,
-  interactive-02: #171717,
-  interactive-03: #0062ff,
-  interactive-04: #0062ff,
-  ui-background: #f3f3f3,
-  ui-01: #ffffff,
-  ui-02: #f3f3f3,
-  ui-03: #dcdcdc,
-  ui-04: #8c8c8c,
-  ui-05: #171717,
-  text-01: #171717,
-  text-02: #565656,
-  text-03: #8c8c8c,
-  text-04: #ffffff,
-  icon-01: #171717,
-  icon-02: #565656,
-  icon-03: #ffffff,
-  link-01: #0062ff,
-  field-01: #ffffff,
-  field-02: #f3f3f3,
-  inverse-01: #ffffff,
-  inverse-02: #3d3d3d,
-  support-01: #da1e28,
-  support-02: #24a148,
-  support-03: #fdd13a,
-  support-04: #054ada,
-  inverse-support-01: #fb4b53,
-  inverse-support-02: #3dbb61,
-  inverse-support-03: #fdd13a,
-  inverse-support-04: #408bfc,
-  overlay-01: rgba(23, 23, 23, 0.5),
-  focus: #0062ff,
-  hover-primary: #0353e9,
-  active-primary: #0530ad,
-  hover-primary-text: #054ada,
-  hover-secondary: #4c4c4c,
-  active-secondary: #6f6f6f,
-  hover-tertiary: #0353e9,
-  active-tertiary: #0530ad,
-  hover-ui: #e5e5e5,
-  active-ui: #bebebe,
-  selected-ui: #dcdcdc,
-  hover-selected-ui: #cacaca,
-  hover-danger: #ba1b23,
-  active-danger: #750e13,
-  hover-row: #e5e5e5,
-  visited-link: #8a3ffc,
-  disabled-01: #ffffff,
-  disabled-02: #bebebe,
-  disabled-03: #8c8c8c,
-  highlight: #c9deff,
-  skeleton-01: #e5e5e5,
-  skeleton-02: #bebebe,
-  brand-01: #0062ff,
-  brand-02: #171717,
-  brand-03: #0062ff,
-  active-01: #bebebe,
-  hover-field: #e5e5e5,
+@use '@carbon/themes/scss/modules/themes';
+@use '@carbon/themes' with (
+  $theme: themes.$g100,
 );
 ```
 
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Map`
-
-### ✅carbon--theme--g90 [variable]
-
-Carbon's g90 color theme
-
-<details>
-<summary>Source code</summary>
+You can also extend the theme with your own custom tokens:
 
 ```scss
-$carbon--theme--g90: (
-  interactive-01: #0062ff,
-  interactive-02: #6f6f6f,
-  interactive-03: #ffffff,
-  interactive-04: #408bfc,
-  ui-background: #282828,
-  ui-01: #3d3d3d,
-  ui-02: #565656,
-  ui-03: #565656,
-  ui-04: #8c8c8c,
-  ui-05: #f3f3f3,
-  text-01: #f3f3f3,
-  text-02: #bebebe,
-  text-03: #8c8c8c,
-  text-04: #ffffff,
-  icon-01: #f3f3f3,
-  icon-02: #bebebe,
-  icon-03: #ffffff,
-  link-01: #6ea6ff,
-  field-01: #3d3d3d,
-  field-02: #565656,
-  inverse-01: #171717,
-  inverse-02: #f3f3f3,
-  support-01: #fb4b53,
-  support-02: #3dbb61,
-  support-03: #fdd13a,
-  support-04: #408bfc,
-  inverse-support-01: #da1e28,
-  inverse-support-02: #24a148,
-  inverse-support-03: #fdd13a,
-  inverse-support-04: #0062ff,
-  overlay-01: rgba(23, 23, 23, 0.7),
-  focus: #ffffff,
-  hover-primary: #0353e9,
-  active-primary: #0530ad,
-  hover-primary-text: #97c1ff,
-  hover-secondary: #606060,
-  active-secondary: #3d3d3d,
-  hover-tertiary: #f3f3f3,
-  active-tertiary: #bebebe,
-  hover-ui: #4c4c4c,
-  active-ui: #6f6f6f,
-  selected-ui: #565656,
-  hover-selected-ui: #656565,
-  hover-danger: #ba1b23,
-  active-danger: #750e13,
-  hover-row: #4c4c4c,
-  visited-link: #bb8eff,
-  disabled-01: #3d3d3d,
-  disabled-02: #565656,
-  disabled-03: #8c8c8c,
-  highlight: #054ada,
-  skeleton-01: #353535,
-  skeleton-02: #565656,
-  brand-01: #0062ff,
-  brand-02: #6f6f6f,
-  brand-03: #ffffff,
-  active-01: #6f6f6f,
-  hover-field: #4c4c4c,
+@use '@carbon/themes/scss/modules/themes';
+@use '@carbon/themes' with (
+  $fallback: themes.$g100,
+  $theme: (
+    token-01: #000000,
+  ),
 );
 ```
 
-</details>
+## Tokens
 
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Map`
+TODO
 
-### ✅carbon--theme--g100 [variable]
+## FAQ
 
-Carbon's g100 color theme
+### Why are the themes not exported in `@carbon/themes`?
 
-<details>
-<summary>Source code</summary>
+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
-$carbon--theme--g100: (
-  interactive-01: #0062ff,
-  interactive-02: #6f6f6f,
-  interactive-03: #ffffff,
-  interactive-04: #408bfc,
-  ui-background: #171717,
-  ui-01: #282828,
-  ui-02: #3d3d3d,
-  ui-03: #3d3d3d,
-  ui-04: #6f6f6f,
-  ui-05: #f3f3f3,
-  text-01: #f3f3f3,
-  text-02: #bebebe,
-  text-03: #6f6f6f,
-  text-04: #ffffff,
-  icon-01: #f3f3f3,
-  icon-02: #bebebe,
-  icon-03: #ffffff,
-  link-01: #6ea6ff,
-  field-01: #282828,
-  field-02: #3d3d3d,
-  inverse-01: #171717,
-  inverse-02: #f3f3f3,
-  support-01: #fb4b53,
-  support-02: #3dbb61,
-  support-03: #fdd13a,
-  support-04: #408bfc,
-  inverse-support-01: #da1e28,
-  inverse-support-02: #24a148,
-  inverse-support-03: #fdd13a,
-  inverse-support-04: #0062ff,
-  overlay-01: rgba(23, 23, 23, 0.7),
-  focus: #ffffff,
-  hover-primary: #0353e9,
-  active-primary: #0530ad,
-  hover-primary-text: #97c1ff,
-  hover-secondary: #606060,
-  active-secondary: #3d3d3d,
-  hover-tertiary: #f3f3f3,
-  active-tertiary: #bebebe,
-  hover-ui: #353535,
-  active-ui: #565656,
-  selected-ui: #3d3d3d,
-  hover-selected-ui: #4c4c4c,
-  hover-danger: #ba1b23,
-  active-danger: #750e13,
-  hover-row: #353535,
-  visited-link: #bb8eff,
-  disabled-01: #282828,
-  disabled-02: #3d3d3d,
-  disabled-03: #6f6f6f,
-  highlight: #0530ad,
-  skeleton-01: #353535,
-  skeleton-02: #3d3d3d,
-  brand-01: #0062ff,
-  brand-02: #6f6f6f,
-  brand-03: #ffffff,
-  active-01: #565656,
-  hover-field: #353535,
+@use '@carbon/themes/scss/modules/themes';
+@use '@carbon/themes' with (
+  $theme: themes.$g100,
 );
 ```
 
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Map`
-
-### ✅carbon--theme [variable]
-
-Carbon's default theme
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$carbon--theme: $carbon--theme--white;
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Map`
-- **Alias**: `carbon--theme--white`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅interactive-01 [variable]
-
-Primary interactive color; Primary buttons
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$interactive-01: map-get($carbon--theme, 'interactive-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Aliased**:
-  - `brand-01`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅interactive-02 [variable]
-
-Secondary interactive color; Secondary button
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$interactive-02: map-get($carbon--theme, 'interactive-02');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Aliased**:
-  - `brand-02`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅interactive-03 [variable]
-
-4.5:1 AA contrast; Tertiary button
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$interactive-03: map-get($carbon--theme, 'interactive-03');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Aliased**:
-  - `brand-03`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅interactive-04 [variable]
-
-3:1 AA contrast; Selected elements; Active elements; Accent icons
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$interactive-04: map-get($carbon--theme, 'interactive-04');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅ui-background [variable]
-
-Default page background
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$ui-background: map-get($carbon--theme, 'ui-background');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅ui-01 [variable]
-
-Primary container background; Secondary page background
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$ui-01: map-get($carbon--theme, 'ui-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅ui-02 [variable]
-
-Primary page background; Secondary container background
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$ui-02: map-get($carbon--theme, 'ui-02');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅ui-03 [variable]
-
-Subtle border; Tertiary background color
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$ui-03: map-get($carbon--theme, 'ui-03');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅ui-04 [variable]
-
-3:1 AA element contrast; Medium contrast border
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$ui-04: map-get($carbon--theme, 'ui-04');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅ui-05 [variable]
-
-4.5:1 AA element contrast; High contrast border; Emphasis elements
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$ui-05: map-get($carbon--theme, 'ui-05');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅text-01 [variable]
-
-Primary text; Body copy; Headers; Hover text color for `$text-02`
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$text-01: map-get($carbon--theme, 'text-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅text-02 [variable]
-
-Secondary text; Input labels; Help text
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$text-02: map-get($carbon--theme, 'text-02');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅text-03 [variable]
-
-Placeholder text
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$text-03: map-get($carbon--theme, 'text-03');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅text-04 [variable]
-
-Text on interactive colors
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$text-04: map-get($carbon--theme, 'text-04');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅icon-01 [variable]
-
-Primary icons
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$icon-01: map-get($carbon--theme, 'icon-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅icon-02 [variable]
-
-Secondary icons
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$icon-02: map-get($carbon--theme, 'icon-02');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅icon-03 [variable]
-
-Tertiary icons; Icons on interactive colors; Icons on non-ui colors
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$icon-03: map-get($carbon--theme, 'icon-03');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅link-01 [variable]
-
-Primary links; Ghost button
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$link-01: map-get($carbon--theme, 'link-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅field-01 [variable]
-
-Default input fields; Field color on \$ui-backgrounds
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$field-01: map-get($carbon--theme, 'field-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅field-02 [variable]
-
-Input field color on `$ui-02` backgrounds
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$field-02: map-get($carbon--theme, 'field-02');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅inverse-01 [variable]
-
-Inverse text color; Inverse icon color
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$inverse-01: map-get($carbon--theme, 'inverse-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅inverse-02 [variable]
-
-High contrast backgrounds; High contrast elements
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$inverse-02: map-get($carbon--theme, 'inverse-02');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅support-01 [variable]
-
-Error
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$support-01: map-get($carbon--theme, 'support-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅support-02 [variable]
-
-Success
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$support-02: map-get($carbon--theme, 'support-02');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅support-03 [variable]
-
-Warning
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$support-03: map-get($carbon--theme, 'support-03');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅support-04 [variable]
-
-Information
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$support-04: map-get($carbon--theme, 'support-04');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅inverse-support-01 [variable]
-
-Error on high contrast backgrounds
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$inverse-support-01: map-get($carbon--theme, 'inverse-support-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅inverse-support-02 [variable]
-
-Success on high contrast backgrounds
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$inverse-support-02: map-get($carbon--theme, 'inverse-support-02');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅inverse-support-03 [variable]
-
-Warning on high contrast backgrounds
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$inverse-support-03: map-get($carbon--theme, 'inverse-support-03');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅inverse-support-04 [variable]
-
-Information on high contrast backgrounds
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$inverse-support-04: map-get($carbon--theme, 'inverse-support-04');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅overlay-01 [variable]
-
-Background overlay
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$overlay-01: map-get($carbon--theme, 'overlay-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅focus [variable]
-
-Focus border; Focus underline
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$focus: map-get($carbon--theme, 'focus');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅hover-primary [variable]
-
-`$interactive-01` hover
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$hover-primary: map-get($carbon--theme, 'hover-primary');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅active-primary [variable]
-
-`$interactive-01` active
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$active-primary: map-get($carbon--theme, 'active-primary');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅hover-primary-text [variable]
-
-`$interactive-01` text hover
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$hover-primary-text: map-get($carbon--theme, 'hover-primary-text');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅hover-secondary [variable]
-
-`$interactive-02` hover
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$hover-secondary: map-get($carbon--theme, 'hover-secondary');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅active-secondary [variable]
-
-`$interactive-02` active; `$inverse-01` active
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$active-secondary: map-get($carbon--theme, 'active-secondary');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅hover-tertiary [variable]
-
-`$interactive-03` hover; `$inverse-01` hover
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$hover-tertiary: map-get($carbon--theme, 'hover-tertiary');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅active-tertiary [variable]
-
-`$interactive-03` active
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$active-tertiary: map-get($carbon--theme, 'active-tertiary');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅hover-ui [variable]
-
-`$ui-01` hover; `$ui-02` hover; Transparent background hover
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$hover-ui: map-get($carbon--theme, 'hover-ui');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Aliased**:
-  - `hover-field`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅active-ui [variable]
-
-`$ui-01` active; `$ui-02` active
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$active-ui: map-get($carbon--theme, 'active-ui');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Aliased**:
-  - `active-01`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅selected-ui [variable]
-
-Selected UI elements
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$selected-ui: map-get($carbon--theme, 'selected-ui');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅hover-selected-ui [variable]
-
-Data table selected row hover
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$hover-selected-ui: map-get($carbon--theme, 'hover-selected-ui');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅hover-danger [variable]
-
-Danger hover; `$support-01` hover
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$hover-danger: map-get($carbon--theme, 'hover-danger');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅active-danger [variable]
-
-Danger active; `$support-01` active
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$active-danger: map-get($carbon--theme, 'active-danger');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅hover-row [variable]
-
-Row hover
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$hover-row: map-get($carbon--theme, 'hover-row');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅visited-link [variable]
-
-Visited links
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$visited-link: map-get($carbon--theme, 'visited-link');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅disabled-01 [variable]
-
-Disabled fields; Disabled backgrounds; Disabled border
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$disabled-01: map-get($carbon--theme, 'disabled-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅disabled-02 [variable]
-
-Disabled elements on `$disabled-01`; Disabled label; Disabled text on
-`$disabled-01`; Disabled icons; Disabled border
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$disabled-02: map-get($carbon--theme, 'disabled-02');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅disabled-03 [variable]
-
-Disabled text on `$disabled-02`; Disabled icons on `$disabled-02`
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$disabled-03: map-get($carbon--theme, 'disabled-03');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅highlight [variable]
-
-`$interactive-01` high light
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$highlight: map-get($carbon--theme, 'highlight');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅skeleton-01 [variable]
-
-Skeleton state of graphics
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$skeleton-01: map-get($carbon--theme, 'skeleton-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅skeleton-02 [variable]
-
-Skeleton state of text
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$skeleton-02: map-get($carbon--theme, 'skeleton-02');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅⚠️brand-01 [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$brand-01: map-get($carbon--theme, 'brand-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Alias**: `interactive-01`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-- **Deprecated**: This may not be available in future releases
-
-### ✅⚠️brand-02 [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$brand-02: map-get($carbon--theme, 'brand-02');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Alias**: `interactive-02`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-- **Deprecated**: This may not be available in future releases
-
-### ✅⚠️brand-03 [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$brand-03: map-get($carbon--theme, 'brand-03');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Alias**: `interactive-03`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-- **Deprecated**: This may not be available in future releases
-
-### ✅⚠️active-01 [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$active-01: map-get($carbon--theme, 'active-01');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Alias**: `active-ui`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-- **Deprecated**: This may not be available in future releases
-
-### ✅⚠️hover-field [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$hover-field: map-get($carbon--theme, 'hover-field');
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `Color`
-- **Alias**: `hover-ui`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-- **Deprecated**: This may not be available in future releases
+This is because the `scss/modules/themes` file will have been initialized twice
+which is not allowed in the Sass Module system.