@carbon/themes 10.31.0 → 10.33.0

package/scss/generated/_mixins.scss

@@ -104,6 +104,86 @@
   $button-separator: map-get($theme, 'button-separator') !global;
   $skeleton-01: map-get($theme, 'skeleton-01') !global;
   $skeleton-02: map-get($theme, 'skeleton-02') !global;
+  $background: map-get($theme, 'background') !global;
+  $layer: map-get($theme, 'layer') !global;
+  $layer-accent: map-get($theme, 'layer-accent') !global;
+  $field: map-get($theme, 'field') !global;
+  $background-inverse: map-get($theme, 'background-inverse') !global;
+  $background-brand: map-get($theme, 'background-brand') !global;
+  $interactive: map-get($theme, 'interactive') !global;
+  $border-subtle: map-get($theme, 'border-subtle') !global;
+  $border-strong: map-get($theme, 'border-strong') !global;
+  $border-inverse: map-get($theme, 'border-inverse') !global;
+  $border-interactive: map-get($theme, 'border-interactive') !global;
+  $text-primary: map-get($theme, 'text-primary') !global;
+  $text-secondary: map-get($theme, 'text-secondary') !global;
+  $text-placeholder: map-get($theme, 'text-placeholder') !global;
+  $text-helper: map-get($theme, 'text-helper') !global;
+  $text-on-color: map-get($theme, 'text-on-color') !global;
+  $text-inverse: map-get($theme, 'text-inverse') !global;
+  $link-primary: map-get($theme, 'link-primary') !global;
+  $link-secondary: map-get($theme, 'link-secondary') !global;
+  $link-visited: map-get($theme, 'link-visited') !global;
+  $link-inverse: map-get($theme, 'link-inverse') !global;
+  $icon-primary: map-get($theme, 'icon-primary') !global;
+  $icon-secondary: map-get($theme, 'icon-secondary') !global;
+  $icon-on-color: map-get($theme, 'icon-on-color') !global;
+  $icon-inverse: map-get($theme, 'icon-inverse') !global;
+  $support-error: map-get($theme, 'support-error') !global;
+  $support-success: map-get($theme, 'support-success') !global;
+  $support-warning: map-get($theme, 'support-warning') !global;
+  $support-info: map-get($theme, 'support-info') !global;
+  $support-error-inverse: map-get($theme, 'support-error-inverse') !global;
+  $support-success-inverse: map-get($theme, 'support-success-inverse') !global;
+  $support-warning-inverse: map-get($theme, 'support-warning-inverse') !global;
+  $support-info-inverse: map-get($theme, 'support-info-inverse') !global;
+  $overlay: map-get($theme, 'overlay') !global;
+  $toggle-off: map-get($theme, 'toggle-off') !global;
+  $button-primary: map-get($theme, 'button-primary') !global;
+  $button-secondary: map-get($theme, 'button-secondary') !global;
+  $button-tertiary: map-get($theme, 'button-tertiary') !global;
+  $button-danger-primary: map-get($theme, 'button-danger-primary') !global;
+  $button-danger-secondary: map-get($theme, 'button-danger-secondary') !global;
+  $background-active: map-get($theme, 'background-active') !global;
+  $layer-active: map-get($theme, 'layer-active') !global;
+  $button-danger-active: map-get($theme, 'button-danger-active') !global;
+  $button-primary-active: map-get($theme, 'button-primary-active') !global;
+  $button-secondary-active: map-get($theme, 'button-secondary-active') !global;
+  $button-tertiary-active: map-get($theme, 'button-tertiary-active') !global;
+  $focus-inset: map-get($theme, 'focus-inset') !global;
+  $focus-inverse: map-get($theme, 'focus-inverse') !global;
+  $background-hover: map-get($theme, 'background-hover') !global;
+  $layer-hover: map-get($theme, 'layer-hover') !global;
+  $field-hover: map-get($theme, 'field-hover') !global;
+  $background-inverse-hover: map-get(
+    $theme,
+    'background-inverse-hover'
+  ) !global;
+  $link-primary-hover: map-get($theme, 'link-primary-hover') !global;
+  $button-danger-hover: map-get($theme, 'button-danger-hover') !global;
+  $button-primary-hover: map-get($theme, 'button-primary-hover') !global;
+  $button-secondary-hover: map-get($theme, 'button-secondary-hover') !global;
+  $button-tertiary-hover: map-get($theme, 'button-tertiary-hover') !global;
+  $background-selected: map-get($theme, 'background-selected') !global;
+  $background-selected-hover: map-get(
+    $theme,
+    'background-selected-hover'
+  ) !global;
+  $layer-selected: map-get($theme, 'layer-selected') !global;
+  $layer-selected-hover: map-get($theme, 'layer-selected-hover') !global;
+  $layer-selected-inverse: map-get($theme, 'layer-selected-inverse') !global;
+  $border-subtle-selected: map-get($theme, 'border-subtle-selected') !global;
+  $layer-disabled: map-get($theme, 'layer-disabled') !global;
+  $field-disabled: map-get($theme, 'field-disabled') !global;
+  $border-disabled: map-get($theme, 'border-disabled') !global;
+  $text-disabled: map-get($theme, 'text-disabled') !global;
+  $button-disabled: map-get($theme, 'button-disabled') !global;
+  $icon-disabled: map-get($theme, 'icon-disabled') !global;
+  $text-on-color-disabled: map-get($theme, 'text-on-color-disabled') !global;
+  $icon-on-color-disabled: map-get($theme, 'icon-on-color-disabled') !global;
+  $layer-selected-disabled: map-get($theme, 'layer-selected-disabled') !global;
+  $skeleton-background: map-get($theme, 'skeleton-background') !global;
+  $skeleton-element: map-get($theme, 'skeleton-element') !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;
@@ -440,6 +520,302 @@
       --#{$custom-property-prefix}-skeleton-02,
       map-get($theme, 'skeleton-02')
     ) !global;
+    $background: var(
+      --#{$custom-property-prefix}-background,
+      map-get($theme, 'background')
+    ) !global;
+    $layer: var(
+      --#{$custom-property-prefix}-layer,
+      map-get($theme, 'layer')
+    ) !global;
+    $layer-accent: var(
+      --#{$custom-property-prefix}-layer-accent,
+      map-get($theme, 'layer-accent')
+    ) !global;
+    $field: var(
+      --#{$custom-property-prefix}-field,
+      map-get($theme, 'field')
+    ) !global;
+    $background-inverse: var(
+      --#{$custom-property-prefix}-background-inverse,
+      map-get($theme, 'background-inverse')
+    ) !global;
+    $background-brand: var(
+      --#{$custom-property-prefix}-background-brand,
+      map-get($theme, 'background-brand')
+    ) !global;
+    $interactive: var(
+      --#{$custom-property-prefix}-interactive,
+      map-get($theme, 'interactive')
+    ) !global;
+    $border-subtle: var(
+      --#{$custom-property-prefix}-border-subtle,
+      map-get($theme, 'border-subtle')
+    ) !global;
+    $border-strong: var(
+      --#{$custom-property-prefix}-border-strong,
+      map-get($theme, 'border-strong')
+    ) !global;
+    $border-inverse: var(
+      --#{$custom-property-prefix}-border-inverse,
+      map-get($theme, 'border-inverse')
+    ) !global;
+    $border-interactive: var(
+      --#{$custom-property-prefix}-border-interactive,
+      map-get($theme, 'border-interactive')
+    ) !global;
+    $text-primary: var(
+      --#{$custom-property-prefix}-text-primary,
+      map-get($theme, 'text-primary')
+    ) !global;
+    $text-secondary: var(
+      --#{$custom-property-prefix}-text-secondary,
+      map-get($theme, 'text-secondary')
+    ) !global;
+    $text-placeholder: var(
+      --#{$custom-property-prefix}-text-placeholder,
+      map-get($theme, 'text-placeholder')
+    ) !global;
+    $text-helper: var(
+      --#{$custom-property-prefix}-text-helper,
+      map-get($theme, 'text-helper')
+    ) !global;
+    $text-on-color: var(
+      --#{$custom-property-prefix}-text-on-color,
+      map-get($theme, 'text-on-color')
+    ) !global;
+    $text-inverse: var(
+      --#{$custom-property-prefix}-text-inverse,
+      map-get($theme, 'text-inverse')
+    ) !global;
+    $link-primary: var(
+      --#{$custom-property-prefix}-link-primary,
+      map-get($theme, 'link-primary')
+    ) !global;
+    $link-secondary: var(
+      --#{$custom-property-prefix}-link-secondary,
+      map-get($theme, 'link-secondary')
+    ) !global;
+    $link-visited: var(
+      --#{$custom-property-prefix}-link-visited,
+      map-get($theme, 'link-visited')
+    ) !global;
+    $link-inverse: var(
+      --#{$custom-property-prefix}-link-inverse,
+      map-get($theme, 'link-inverse')
+    ) !global;
+    $icon-primary: var(
+      --#{$custom-property-prefix}-icon-primary,
+      map-get($theme, 'icon-primary')
+    ) !global;
+    $icon-secondary: var(
+      --#{$custom-property-prefix}-icon-secondary,
+      map-get($theme, 'icon-secondary')
+    ) !global;
+    $icon-on-color: var(
+      --#{$custom-property-prefix}-icon-on-color,
+      map-get($theme, 'icon-on-color')
+    ) !global;
+    $icon-inverse: var(
+      --#{$custom-property-prefix}-icon-inverse,
+      map-get($theme, 'icon-inverse')
+    ) !global;
+    $support-error: var(
+      --#{$custom-property-prefix}-support-error,
+      map-get($theme, 'support-error')
+    ) !global;
+    $support-success: var(
+      --#{$custom-property-prefix}-support-success,
+      map-get($theme, 'support-success')
+    ) !global;
+    $support-warning: var(
+      --#{$custom-property-prefix}-support-warning,
+      map-get($theme, 'support-warning')
+    ) !global;
+    $support-info: var(
+      --#{$custom-property-prefix}-support-info,
+      map-get($theme, 'support-info')
+    ) !global;
+    $support-error-inverse: var(
+      --#{$custom-property-prefix}-support-error-inverse,
+      map-get($theme, 'support-error-inverse')
+    ) !global;
+    $support-success-inverse: var(
+      --#{$custom-property-prefix}-support-success-inverse,
+      map-get($theme, 'support-success-inverse')
+    ) !global;
+    $support-warning-inverse: var(
+      --#{$custom-property-prefix}-support-warning-inverse,
+      map-get($theme, 'support-warning-inverse')
+    ) !global;
+    $support-info-inverse: var(
+      --#{$custom-property-prefix}-support-info-inverse,
+      map-get($theme, 'support-info-inverse')
+    ) !global;
+    $overlay: var(
+      --#{$custom-property-prefix}-overlay,
+      map-get($theme, 'overlay')
+    ) !global;
+    $toggle-off: var(
+      --#{$custom-property-prefix}-toggle-off,
+      map-get($theme, 'toggle-off')
+    ) !global;
+    $button-primary: var(
+      --#{$custom-property-prefix}-button-primary,
+      map-get($theme, 'button-primary')
+    ) !global;
+    $button-secondary: var(
+      --#{$custom-property-prefix}-button-secondary,
+      map-get($theme, 'button-secondary')
+    ) !global;
+    $button-tertiary: var(
+      --#{$custom-property-prefix}-button-tertiary,
+      map-get($theme, 'button-tertiary')
+    ) !global;
+    $button-danger-primary: var(
+      --#{$custom-property-prefix}-button-danger-primary,
+      map-get($theme, 'button-danger-primary')
+    ) !global;
+    $button-danger-secondary: var(
+      --#{$custom-property-prefix}-button-danger-secondary,
+      map-get($theme, 'button-danger-secondary')
+    ) !global;
+    $background-active: var(
+      --#{$custom-property-prefix}-background-active,
+      map-get($theme, 'background-active')
+    ) !global;
+    $layer-active: var(
+      --#{$custom-property-prefix}-layer-active,
+      map-get($theme, 'layer-active')
+    ) !global;
+    $button-danger-active: var(
+      --#{$custom-property-prefix}-button-danger-active,
+      map-get($theme, 'button-danger-active')
+    ) !global;
+    $button-primary-active: var(
+      --#{$custom-property-prefix}-button-primary-active,
+      map-get($theme, 'button-primary-active')
+    ) !global;
+    $button-secondary-active: var(
+      --#{$custom-property-prefix}-button-secondary-active,
+      map-get($theme, 'button-secondary-active')
+    ) !global;
+    $button-tertiary-active: var(
+      --#{$custom-property-prefix}-button-tertiary-active,
+      map-get($theme, 'button-tertiary-active')
+    ) !global;
+    $focus-inset: var(
+      --#{$custom-property-prefix}-focus-inset,
+      map-get($theme, 'focus-inset')
+    ) !global;
+    $focus-inverse: var(
+      --#{$custom-property-prefix}-focus-inverse,
+      map-get($theme, 'focus-inverse')
+    ) !global;
+    $background-hover: var(
+      --#{$custom-property-prefix}-background-hover,
+      map-get($theme, 'background-hover')
+    ) !global;
+    $layer-hover: var(
+      --#{$custom-property-prefix}-layer-hover,
+      map-get($theme, 'layer-hover')
+    ) !global;
+    $field-hover: var(
+      --#{$custom-property-prefix}-field-hover,
+      map-get($theme, 'field-hover')
+    ) !global;
+    $background-inverse-hover: var(
+      --#{$custom-property-prefix}-background-inverse-hover,
+      map-get($theme, 'background-inverse-hover')
+    ) !global;
+    $link-primary-hover: var(
+      --#{$custom-property-prefix}-link-primary-hover,
+      map-get($theme, 'link-primary-hover')
+    ) !global;
+    $button-danger-hover: var(
+      --#{$custom-property-prefix}-button-danger-hover,
+      map-get($theme, 'button-danger-hover')
+    ) !global;
+    $button-primary-hover: var(
+      --#{$custom-property-prefix}-button-primary-hover,
+      map-get($theme, 'button-primary-hover')
+    ) !global;
+    $button-secondary-hover: var(
+      --#{$custom-property-prefix}-button-secondary-hover,
+      map-get($theme, 'button-secondary-hover')
+    ) !global;
+    $button-tertiary-hover: var(
+      --#{$custom-property-prefix}-button-tertiary-hover,
+      map-get($theme, 'button-tertiary-hover')
+    ) !global;
+    $background-selected: var(
+      --#{$custom-property-prefix}-background-selected,
+      map-get($theme, 'background-selected')
+    ) !global;
+    $background-selected-hover: var(
+      --#{$custom-property-prefix}-background-selected-hover,
+      map-get($theme, 'background-selected-hover')
+    ) !global;
+    $layer-selected: var(
+      --#{$custom-property-prefix}-layer-selected,
+      map-get($theme, 'layer-selected')
+    ) !global;
+    $layer-selected-hover: var(
+      --#{$custom-property-prefix}-layer-selected-hover,
+      map-get($theme, 'layer-selected-hover')
+    ) !global;
+    $layer-selected-inverse: var(
+      --#{$custom-property-prefix}-layer-selected-inverse,
+      map-get($theme, 'layer-selected-inverse')
+    ) !global;
+    $border-subtle-selected: var(
+      --#{$custom-property-prefix}-border-subtle-selected,
+      map-get($theme, 'border-subtle-selected')
+    ) !global;
+    $layer-disabled: var(
+      --#{$custom-property-prefix}-layer-disabled,
+      map-get($theme, 'layer-disabled')
+    ) !global;
+    $field-disabled: var(
+      --#{$custom-property-prefix}-field-disabled,
+      map-get($theme, 'field-disabled')
+    ) !global;
+    $border-disabled: var(
+      --#{$custom-property-prefix}-border-disabled,
+      map-get($theme, 'border-disabled')
+    ) !global;
+    $text-disabled: var(
+      --#{$custom-property-prefix}-text-disabled,
+      map-get($theme, 'text-disabled')
+    ) !global;
+    $button-disabled: var(
+      --#{$custom-property-prefix}-button-disabled,
+      map-get($theme, 'button-disabled')
+    ) !global;
+    $icon-disabled: var(
+      --#{$custom-property-prefix}-icon-disabled,
+      map-get($theme, 'icon-disabled')
+    ) !global;
+    $text-on-color-disabled: var(
+      --#{$custom-property-prefix}-text-on-color-disabled,
+      map-get($theme, 'text-on-color-disabled')
+    ) !global;
+    $icon-on-color-disabled: var(
+      --#{$custom-property-prefix}-icon-on-color-disabled,
+      map-get($theme, 'icon-on-color-disabled')
+    ) !global;
+    $layer-selected-disabled: var(
+      --#{$custom-property-prefix}-layer-selected-disabled,
+      map-get($theme, 'layer-selected-disabled')
+    ) !global;
+    $skeleton-background: var(
+      --#{$custom-property-prefix}-skeleton-background,
+      map-get($theme, 'skeleton-background')
+    ) !global;
+    $skeleton-element: var(
+      --#{$custom-property-prefix}-skeleton-element,
+      map-get($theme, 'skeleton-element')
+    ) !global;
     $brand-01: var(
       --#{$custom-property-prefix}-brand-01,
       map-get($theme, 'brand-01')
@@ -1189,6 +1565,890 @@
       @include custom-property('skeleton-02', map-get($theme, 'skeleton-02'));
     }
 
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'background',
+      $emit-difference
+    )
+    {
+      @include custom-property('background', map-get($theme, 'background'));
+    }
+
+    @if should-emit($theme, $parent-carbon-theme, 'layer', $emit-difference) {
+      @include custom-property('layer', map-get($theme, 'layer'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'layer-accent',
+      $emit-difference
+    )
+    {
+      @include custom-property('layer-accent', map-get($theme, 'layer-accent'));
+    }
+
+    @if should-emit($theme, $parent-carbon-theme, 'field', $emit-difference) {
+      @include custom-property('field', map-get($theme, 'field'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'background-inverse',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'background-inverse',
+        map-get($theme, 'background-inverse')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'background-brand',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'background-brand',
+        map-get($theme, 'background-brand')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'interactive',
+      $emit-difference
+    )
+    {
+      @include custom-property('interactive', map-get($theme, 'interactive'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'border-subtle',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'border-subtle',
+        map-get($theme, 'border-subtle')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'border-strong',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'border-strong',
+        map-get($theme, 'border-strong')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'border-inverse',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'border-inverse',
+        map-get($theme, 'border-inverse')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'border-interactive',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'border-interactive',
+        map-get($theme, 'border-interactive')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'text-primary',
+      $emit-difference
+    )
+    {
+      @include custom-property('text-primary', map-get($theme, 'text-primary'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'text-secondary',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'text-secondary',
+        map-get($theme, 'text-secondary')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'text-placeholder',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'text-placeholder',
+        map-get($theme, 'text-placeholder')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'text-helper',
+      $emit-difference
+    )
+    {
+      @include custom-property('text-helper', map-get($theme, 'text-helper'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'text-on-color',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'text-on-color',
+        map-get($theme, 'text-on-color')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'text-inverse',
+      $emit-difference
+    )
+    {
+      @include custom-property('text-inverse', map-get($theme, 'text-inverse'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'link-primary',
+      $emit-difference
+    )
+    {
+      @include custom-property('link-primary', map-get($theme, 'link-primary'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'link-secondary',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'link-secondary',
+        map-get($theme, 'link-secondary')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'link-visited',
+      $emit-difference
+    )
+    {
+      @include custom-property('link-visited', map-get($theme, 'link-visited'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'link-inverse',
+      $emit-difference
+    )
+    {
+      @include custom-property('link-inverse', map-get($theme, 'link-inverse'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'icon-primary',
+      $emit-difference
+    )
+    {
+      @include custom-property('icon-primary', map-get($theme, 'icon-primary'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'icon-secondary',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'icon-secondary',
+        map-get($theme, 'icon-secondary')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'icon-on-color',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'icon-on-color',
+        map-get($theme, 'icon-on-color')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'icon-inverse',
+      $emit-difference
+    )
+    {
+      @include custom-property('icon-inverse', map-get($theme, 'icon-inverse'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'support-error',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'support-error',
+        map-get($theme, 'support-error')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'support-success',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'support-success',
+        map-get($theme, 'support-success')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'support-warning',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'support-warning',
+        map-get($theme, 'support-warning')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'support-info',
+      $emit-difference
+    )
+    {
+      @include custom-property('support-info', map-get($theme, 'support-info'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'support-error-inverse',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'support-error-inverse',
+        map-get($theme, 'support-error-inverse')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'support-success-inverse',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'support-success-inverse',
+        map-get($theme, 'support-success-inverse')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'support-warning-inverse',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'support-warning-inverse',
+        map-get($theme, 'support-warning-inverse')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'support-info-inverse',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'support-info-inverse',
+        map-get($theme, 'support-info-inverse')
+      );
+    }
+
+    @if should-emit($theme, $parent-carbon-theme, 'overlay', $emit-difference) {
+      @include custom-property('overlay', map-get($theme, 'overlay'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'toggle-off',
+      $emit-difference
+    )
+    {
+      @include custom-property('toggle-off', map-get($theme, 'toggle-off'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-primary',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-primary',
+        map-get($theme, 'button-primary')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-secondary',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-secondary',
+        map-get($theme, 'button-secondary')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-tertiary',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-tertiary',
+        map-get($theme, 'button-tertiary')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-danger-primary',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-danger-primary',
+        map-get($theme, 'button-danger-primary')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-danger-secondary',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-danger-secondary',
+        map-get($theme, 'button-danger-secondary')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'background-active',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'background-active',
+        map-get($theme, 'background-active')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'layer-active',
+      $emit-difference
+    )
+    {
+      @include custom-property('layer-active', map-get($theme, 'layer-active'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-danger-active',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-danger-active',
+        map-get($theme, 'button-danger-active')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-primary-active',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-primary-active',
+        map-get($theme, 'button-primary-active')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-secondary-active',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-secondary-active',
+        map-get($theme, 'button-secondary-active')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-tertiary-active',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-tertiary-active',
+        map-get($theme, 'button-tertiary-active')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'focus-inset',
+      $emit-difference
+    )
+    {
+      @include custom-property('focus-inset', map-get($theme, 'focus-inset'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'focus-inverse',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'focus-inverse',
+        map-get($theme, 'focus-inverse')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'background-hover',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'background-hover',
+        map-get($theme, 'background-hover')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'layer-hover',
+      $emit-difference
+    )
+    {
+      @include custom-property('layer-hover', map-get($theme, 'layer-hover'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'field-hover',
+      $emit-difference
+    )
+    {
+      @include custom-property('field-hover', map-get($theme, 'field-hover'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'background-inverse-hover',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'background-inverse-hover',
+        map-get($theme, 'background-inverse-hover')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'link-primary-hover',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'link-primary-hover',
+        map-get($theme, 'link-primary-hover')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-danger-hover',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-danger-hover',
+        map-get($theme, 'button-danger-hover')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-primary-hover',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-primary-hover',
+        map-get($theme, 'button-primary-hover')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-secondary-hover',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-secondary-hover',
+        map-get($theme, 'button-secondary-hover')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-tertiary-hover',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-tertiary-hover',
+        map-get($theme, 'button-tertiary-hover')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'background-selected',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'background-selected',
+        map-get($theme, 'background-selected')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'background-selected-hover',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'background-selected-hover',
+        map-get($theme, 'background-selected-hover')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'layer-selected',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'layer-selected',
+        map-get($theme, 'layer-selected')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'layer-selected-hover',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'layer-selected-hover',
+        map-get($theme, 'layer-selected-hover')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'layer-selected-inverse',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'layer-selected-inverse',
+        map-get($theme, 'layer-selected-inverse')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'border-subtle-selected',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'border-subtle-selected',
+        map-get($theme, 'border-subtle-selected')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'layer-disabled',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'layer-disabled',
+        map-get($theme, 'layer-disabled')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'field-disabled',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'field-disabled',
+        map-get($theme, 'field-disabled')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'border-disabled',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'border-disabled',
+        map-get($theme, 'border-disabled')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'text-disabled',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'text-disabled',
+        map-get($theme, 'text-disabled')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-disabled',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-disabled',
+        map-get($theme, 'button-disabled')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'icon-disabled',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'icon-disabled',
+        map-get($theme, 'icon-disabled')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'text-on-color-disabled',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'text-on-color-disabled',
+        map-get($theme, 'text-on-color-disabled')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'icon-on-color-disabled',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'icon-on-color-disabled',
+        map-get($theme, 'icon-on-color-disabled')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'layer-selected-disabled',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'layer-selected-disabled',
+        map-get($theme, 'layer-selected-disabled')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'skeleton-background',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'skeleton-background',
+        map-get($theme, 'skeleton-background')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'skeleton-element',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'skeleton-element',
+        map-get($theme, 'skeleton-element')
+      );
+    }
+
     @if should-emit($theme, $parent-carbon-theme, 'brand-01', $emit-difference)
     {
       @include custom-property('brand-01', map-get($theme, 'brand-01'));