diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 0f532ea11388..ae99f150967e 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -3689,6 +3689,8 @@ $custom-property-prefix: 'cds';
 - **Group**: [@carbon/themes](#carbonthemes)
 - **Requires**:
   - [prefix [variable]](#prefix-variable)
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ❌should-emit [function]
 
@@ -3707,6 +3709,8 @@ $custom-property-prefix: 'cds';
 </details>
 
 - **Group**: [@carbon/themes](#carbonthemes)
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅carbon--theme [mixin]
 
@@ -3782,69 +3786,379 @@ Define theme variables from a map of tokens
   $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')};
-    --text-05: #{map-get($theme, 'text-05')};
-    --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')};
-    --inverse-link: #{map-get($theme, 'inverse-link')};
-    --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')};
-    --danger: #{map-get($theme, 'danger')};
-    --focus: #{map-get($theme, 'focus')};
-    --inverse-focus-ui: #{map-get($theme, 'inverse-focus-ui')};
-    --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')};
-    --inverse-hover-ui: #{map-get($theme, 'inverse-hover-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')};
+    @if should-emit($theme, $carbon--theme, 'interactive-01', $emit-difference)
+    {
+      @include custom-property(
+        'interactive-01',
+        map-get($theme, 'interactive-01')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'interactive-02', $emit-difference)
+    {
+      @include custom-property(
+        'interactive-02',
+        map-get($theme, 'interactive-02')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'interactive-03', $emit-difference)
+    {
+      @include custom-property(
+        'interactive-03',
+        map-get($theme, 'interactive-03')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'interactive-04', $emit-difference)
+    {
+      @include custom-property(
+        'interactive-04',
+        map-get($theme, 'interactive-04')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'ui-background', $emit-difference) {
+      @include custom-property(
+        'ui-background',
+        map-get($theme, 'ui-background')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'ui-01', $emit-difference) {
+      @include custom-property('ui-01', map-get($theme, 'ui-01'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'ui-02', $emit-difference) {
+      @include custom-property('ui-02', map-get($theme, 'ui-02'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'ui-03', $emit-difference) {
+      @include custom-property('ui-03', map-get($theme, 'ui-03'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'ui-04', $emit-difference) {
+      @include custom-property('ui-04', map-get($theme, 'ui-04'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'ui-05', $emit-difference) {
+      @include custom-property('ui-05', map-get($theme, 'ui-05'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'text-01', $emit-difference) {
+      @include custom-property('text-01', map-get($theme, 'text-01'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'text-02', $emit-difference) {
+      @include custom-property('text-02', map-get($theme, 'text-02'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'text-03', $emit-difference) {
+      @include custom-property('text-03', map-get($theme, 'text-03'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'text-04', $emit-difference) {
+      @include custom-property('text-04', map-get($theme, 'text-04'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'text-05', $emit-difference) {
+      @include custom-property('text-05', map-get($theme, 'text-05'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'icon-01', $emit-difference) {
+      @include custom-property('icon-01', map-get($theme, 'icon-01'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'icon-02', $emit-difference) {
+      @include custom-property('icon-02', map-get($theme, 'icon-02'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'icon-03', $emit-difference) {
+      @include custom-property('icon-03', map-get($theme, 'icon-03'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'link-01', $emit-difference) {
+      @include custom-property('link-01', map-get($theme, 'link-01'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'inverse-link', $emit-difference) {
+      @include custom-property('inverse-link', map-get($theme, 'inverse-link'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'field-01', $emit-difference) {
+      @include custom-property('field-01', map-get($theme, 'field-01'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'field-02', $emit-difference) {
+      @include custom-property('field-02', map-get($theme, 'field-02'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'inverse-01', $emit-difference) {
+      @include custom-property('inverse-01', map-get($theme, 'inverse-01'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'inverse-02', $emit-difference) {
+      @include custom-property('inverse-02', map-get($theme, 'inverse-02'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'support-01', $emit-difference) {
+      @include custom-property('support-01', map-get($theme, 'support-01'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'support-02', $emit-difference) {
+      @include custom-property('support-02', map-get($theme, 'support-02'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'support-03', $emit-difference) {
+      @include custom-property('support-03', map-get($theme, 'support-03'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'support-04', $emit-difference) {
+      @include custom-property('support-04', map-get($theme, 'support-04'));
+    }
+
+    @if should-emit(
+      $theme,
+      $carbon--theme,
+      'inverse-support-01',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'inverse-support-01',
+        map-get($theme, 'inverse-support-01')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $carbon--theme,
+      'inverse-support-02',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'inverse-support-02',
+        map-get($theme, 'inverse-support-02')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $carbon--theme,
+      'inverse-support-03',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'inverse-support-03',
+        map-get($theme, 'inverse-support-03')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $carbon--theme,
+      'inverse-support-04',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'inverse-support-04',
+        map-get($theme, 'inverse-support-04')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'overlay-01', $emit-difference) {
+      @include custom-property('overlay-01', map-get($theme, 'overlay-01'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'danger', $emit-difference) {
+      @include custom-property('danger', map-get($theme, 'danger'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'focus', $emit-difference) {
+      @include custom-property('focus', map-get($theme, 'focus'));
+    }
+
+    @if should-emit(
+      $theme,
+      $carbon--theme,
+      'inverse-focus-ui',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'inverse-focus-ui',
+        map-get($theme, 'inverse-focus-ui')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'hover-primary', $emit-difference) {
+      @include custom-property(
+        'hover-primary',
+        map-get($theme, 'hover-primary')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'active-primary', $emit-difference)
+    {
+      @include custom-property(
+        'active-primary',
+        map-get($theme, 'active-primary')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $carbon--theme,
+      'hover-primary-text',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'hover-primary-text',
+        map-get($theme, 'hover-primary-text')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'hover-secondary', $emit-difference)
+    {
+      @include custom-property(
+        'hover-secondary',
+        map-get($theme, 'hover-secondary')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $carbon--theme,
+      'active-secondary',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'active-secondary',
+        map-get($theme, 'active-secondary')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'hover-tertiary', $emit-difference)
+    {
+      @include custom-property(
+        'hover-tertiary',
+        map-get($theme, 'hover-tertiary')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'active-tertiary', $emit-difference)
+    {
+      @include custom-property(
+        'active-tertiary',
+        map-get($theme, 'active-tertiary')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'hover-ui', $emit-difference) {
+      @include custom-property('hover-ui', map-get($theme, 'hover-ui'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'active-ui', $emit-difference) {
+      @include custom-property('active-ui', map-get($theme, 'active-ui'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'selected-ui', $emit-difference) {
+      @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
+    }
+
+    @if should-emit(
+      $theme,
+      $carbon--theme,
+      'hover-selected-ui',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'hover-selected-ui',
+        map-get($theme, 'hover-selected-ui')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $carbon--theme,
+      'inverse-hover-ui',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'inverse-hover-ui',
+        map-get($theme, 'inverse-hover-ui')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'hover-danger', $emit-difference) {
+      @include custom-property('hover-danger', map-get($theme, 'hover-danger'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'active-danger', $emit-difference) {
+      @include custom-property(
+        'active-danger',
+        map-get($theme, 'active-danger')
+      );
+    }
+
+    @if should-emit($theme, $carbon--theme, 'hover-row', $emit-difference) {
+      @include custom-property('hover-row', map-get($theme, 'hover-row'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'visited-link', $emit-difference) {
+      @include custom-property('visited-link', map-get($theme, 'visited-link'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'disabled-01', $emit-difference) {
+      @include custom-property('disabled-01', map-get($theme, 'disabled-01'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'disabled-02', $emit-difference) {
+      @include custom-property('disabled-02', map-get($theme, 'disabled-02'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'disabled-03', $emit-difference) {
+      @include custom-property('disabled-03', map-get($theme, 'disabled-03'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'highlight', $emit-difference) {
+      @include custom-property('highlight', map-get($theme, 'highlight'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'skeleton-01', $emit-difference) {
+      @include custom-property('skeleton-01', map-get($theme, 'skeleton-01'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'skeleton-02', $emit-difference) {
+      @include custom-property('skeleton-02', map-get($theme, 'skeleton-02'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'brand-01', $emit-difference) {
+      @include custom-property('brand-01', map-get($theme, 'brand-01'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'brand-02', $emit-difference) {
+      @include custom-property('brand-02', map-get($theme, 'brand-02'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'brand-03', $emit-difference) {
+      @include custom-property('brand-03', map-get($theme, 'brand-03'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'active-01', $emit-difference) {
+      @include custom-property('active-01', map-get($theme, 'active-01'));
+    }
+
+    @if should-emit($theme, $carbon--theme, 'hover-field', $emit-difference) {
+      @include custom-property('hover-field', map-get($theme, 'hover-field'));
+    }
   }
 
   @content;
@@ -3892,6 +4206,8 @@ Define theme variables from a map of tokens
 - **Content**: Pass in your custom declaration blocks to be used after the token
   maps set theming variables.
 - **Requires**:
+  - [custom-property [mixin]](#custom-property-mixin)
+  - [should-emit [function]](#should-emit-function)
   - [interactive-01 [variable]](#interactive-01-variable)
   - [interactive-02 [variable]](#interactive-02-variable)
   - [interactive-03 [variable]](#interactive-03-variable)