Sass API

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

@carbon/themes

@carbon/themes

❌custom-property-prefix [variable]

Source code

$custom-property-prefix: 'cds';

Group: @carbon/themes
Used by:
- carbon--theme [mixin]

❌custom-property [mixin]

Source code

@mixin custom-property() {
  @if type-of($value) == map {
    @each $property, $property-value in $value {
      // Only support one-level of depth for values that are maps. This is to
      // avoid bringing properties like `breakpoints` on type tokens
      @if type-of($property-value) != map {
        @include custom-property('#{$name}-#{$property}', $property-value);
      }
    }
  } @else {
    --#{$prefix}-#{$name}: #{$value};
  }
}

Group: @carbon/themes
Used by:
- carbon--theme [mixin]

❌should-emit [function]

Source code

@function should-emit() {
  @if $emit-difference == false {
    @return true;
  }
  @return map-get($theme-a, $token) != map-get($theme-b, $token);
}

Group: @carbon/themes
Used by:
- carbon--theme [mixin]

✅carbon--theme [mixin]

Define theme variables from a map of tokens

Source code

@mixin carbon--theme($theme: $carbon--theme, $emit-custom-properties: false) {
  $parent-carbon-theme: $carbon--theme;
  $carbon--theme: $theme !global;
  $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;
  $text-05: map-get($theme, 'text-05') !global;
  $text-error: map-get($theme, 'text-error') !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;
  $inverse-link: map-get($theme, 'inverse-link') !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;
  $danger-01: map-get($theme, 'danger-01') !global;
  $danger-02: map-get($theme, 'danger-02') !global;
  $focus: map-get($theme, 'focus') !global;
  $inverse-focus-ui: map-get($theme, 'inverse-focus-ui') !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;
  $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
  $active-ui: map-get($theme, 'active-ui') !global;
  $active-light-ui: map-get($theme, 'active-light-ui') !global;
  $selected-ui: map-get($theme, 'selected-ui') !global;
  $selected-light-ui: map-get($theme, 'selected-light-ui') !global;
  $inverse-hover-ui: map-get($theme, 'inverse-hover-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;
  $decorative-01: map-get($theme, 'decorative-01') !global;
  $button-separator: map-get($theme, 'button-separator') !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;
  $danger: map-get($theme, 'danger') !global;
  $caption-01: map-get($theme, 'caption-01') !global;
  $label-01: map-get($theme, 'label-01') !global;
  $helper-text-01: map-get($theme, 'helper-text-01') !global;
  $body-short-01: map-get($theme, 'body-short-01') !global;
  $body-long-01: map-get($theme, 'body-long-01') !global;
  $body-short-02: map-get($theme, 'body-short-02') !global;
  $body-long-02: map-get($theme, 'body-long-02') !global;
  $code-01: map-get($theme, 'code-01') !global;
  $code-02: map-get($theme, 'code-02') !global;
  $heading-01: map-get($theme, 'heading-01') !global;
  $productive-heading-01: map-get($theme, 'productive-heading-01') !global;
  $heading-02: map-get($theme, 'heading-02') !global;
  $productive-heading-02: map-get($theme, 'productive-heading-02') !global;
  $productive-heading-03: map-get($theme, 'productive-heading-03') !global;
  $productive-heading-04: map-get($theme, 'productive-heading-04') !global;
  $productive-heading-05: map-get($theme, 'productive-heading-05') !global;
  $productive-heading-06: map-get($theme, 'productive-heading-06') !global;
  $productive-heading-07: map-get($theme, 'productive-heading-07') !global;
  $expressive-heading-01: map-get($theme, 'expressive-heading-01') !global;
  $expressive-heading-02: map-get($theme, 'expressive-heading-02') !global;
  $expressive-heading-03: map-get($theme, 'expressive-heading-03') !global;
  $expressive-heading-04: map-get($theme, 'expressive-heading-04') !global;
  $expressive-heading-05: map-get($theme, 'expressive-heading-05') !global;
  $expressive-heading-06: map-get($theme, 'expressive-heading-06') !global;
  $expressive-paragraph-01: map-get($theme, 'expressive-paragraph-01') !global;
  $quotation-01: map-get($theme, 'quotation-01') !global;
  $quotation-02: map-get($theme, 'quotation-02') !global;
  $display-01: map-get($theme, 'display-01') !global;
  $display-02: map-get($theme, 'display-02') !global;
  $display-03: map-get($theme, 'display-03') !global;
  $display-04: map-get($theme, 'display-04') !global;
  $spacing-01: map-get($theme, 'spacing-01') !global;
  $spacing-02: map-get($theme, 'spacing-02') !global;
  $spacing-03: map-get($theme, 'spacing-03') !global;
  $spacing-04: map-get($theme, 'spacing-04') !global;
  $spacing-05: map-get($theme, 'spacing-05') !global;
  $spacing-06: map-get($theme, 'spacing-06') !global;
  $spacing-07: map-get($theme, 'spacing-07') !global;
  $spacing-08: map-get($theme, 'spacing-08') !global;
  $spacing-09: map-get($theme, 'spacing-09') !global;
  $spacing-10: map-get($theme, 'spacing-10') !global;
  $spacing-11: map-get($theme, 'spacing-11') !global;
  $spacing-12: map-get($theme, 'spacing-12') !global;
  $fluid-spacing-01: map-get($theme, 'fluid-spacing-01') !global;
  $fluid-spacing-02: map-get($theme, 'fluid-spacing-02') !global;
  $fluid-spacing-03: map-get($theme, 'fluid-spacing-03') !global;
  $fluid-spacing-04: map-get($theme, 'fluid-spacing-04') !global;
  $layout-01: map-get($theme, 'layout-01') !global;
  $layout-02: map-get($theme, 'layout-02') !global;
  $layout-03: map-get($theme, 'layout-03') !global;
  $layout-04: map-get($theme, 'layout-04') !global;
  $layout-05: map-get($theme, 'layout-05') !global;
  $layout-06: map-get($theme, 'layout-06') !global;
  $layout-07: map-get($theme, 'layout-07') !global;
  $container-01: map-get($theme, 'container-01') !global;
  $container-02: map-get($theme, 'container-02') !global;
  $container-03: map-get($theme, 'container-03') !global;
  $container-04: map-get($theme, 'container-04') !global;
  $container-05: map-get($theme, 'container-05') !global;
  $icon-size-01: map-get($theme, 'icon-size-01') !global;
  $icon-size-02: map-get($theme, 'icon-size-02') !global;

  @if global-variable-exists('feature-flags') and
    map-get($feature-flags, 'enable-css-custom-properties')
  {
    $interactive-01: var(
      --#{$custom-property-prefix}-interactive-01,
      map-get($theme, 'interactive-01')
    ) !global;
    $interactive-02: var(
      --#{$custom-property-prefix}-interactive-02,
      map-get($theme, 'interactive-02')
    ) !global;
    $interactive-03: var(
      --#{$custom-property-prefix}-interactive-03,
      map-get($theme, 'interactive-03')
    ) !global;
    $interactive-04: var(
      --#{$custom-property-prefix}-interactive-04,
      map-get($theme, 'interactive-04')
    ) !global;
    $ui-background: var(
      --#{$custom-property-prefix}-ui-background,
      map-get($theme, 'ui-background')
    ) !global;
    $ui-01: var(
      --#{$custom-property-prefix}-ui-01,
      map-get($theme, 'ui-01')
    ) !global;
    $ui-02: var(
      --#{$custom-property-prefix}-ui-02,
      map-get($theme, 'ui-02')
    ) !global;
    $ui-03: var(
      --#{$custom-property-prefix}-ui-03,
      map-get($theme, 'ui-03')
    ) !global;
    $ui-04: var(
      --#{$custom-property-prefix}-ui-04,
      map-get($theme, 'ui-04')
    ) !global;
    $ui-05: var(
      --#{$custom-property-prefix}-ui-05,
      map-get($theme, 'ui-05')
    ) !global;
    $text-01: var(
      --#{$custom-property-prefix}-text-01,
      map-get($theme, 'text-01')
    ) !global;
    $text-02: var(
      --#{$custom-property-prefix}-text-02,
      map-get($theme, 'text-02')
    ) !global;
    $text-03: var(
      --#{$custom-property-prefix}-text-03,
      map-get($theme, 'text-03')
    ) !global;
    $text-04: var(
      --#{$custom-property-prefix}-text-04,
      map-get($theme, 'text-04')
    ) !global;
    $text-05: var(
      --#{$custom-property-prefix}-text-05,
      map-get($theme, 'text-05')
    ) !global;
    $text-error: var(
      --#{$custom-property-prefix}-text-error,
      map-get($theme, 'text-error')
    ) !global;
    $icon-01: var(
      --#{$custom-property-prefix}-icon-01,
      map-get($theme, 'icon-01')
    ) !global;
    $icon-02: var(
      --#{$custom-property-prefix}-icon-02,
      map-get($theme, 'icon-02')
    ) !global;
    $icon-03: var(
      --#{$custom-property-prefix}-icon-03,
      map-get($theme, 'icon-03')
    ) !global;
    $link-01: var(
      --#{$custom-property-prefix}-link-01,
      map-get($theme, 'link-01')
    ) !global;
    $inverse-link: var(
      --#{$custom-property-prefix}-inverse-link,
      map-get($theme, 'inverse-link')
    ) !global;
    $field-01: var(
      --#{$custom-property-prefix}-field-01,
      map-get($theme, 'field-01')
    ) !global;
    $field-02: var(
      --#{$custom-property-prefix}-field-02,
      map-get($theme, 'field-02')
    ) !global;
    $inverse-01: var(
      --#{$custom-property-prefix}-inverse-01,
      map-get($theme, 'inverse-01')
    ) !global;
    $inverse-02: var(
      --#{$custom-property-prefix}-inverse-02,
      map-get($theme, 'inverse-02')
    ) !global;
    $support-01: var(
      --#{$custom-property-prefix}-support-01,
      map-get($theme, 'support-01')
    ) !global;
    $support-02: var(
      --#{$custom-property-prefix}-support-02,
      map-get($theme, 'support-02')
    ) !global;
    $support-03: var(
      --#{$custom-property-prefix}-support-03,
      map-get($theme, 'support-03')
    ) !global;
    $support-04: var(
      --#{$custom-property-prefix}-support-04,
      map-get($theme, 'support-04')
    ) !global;
    $inverse-support-01: var(
      --#{$custom-property-prefix}-inverse-support-01,
      map-get($theme, 'inverse-support-01')
    ) !global;
    $inverse-support-02: var(
      --#{$custom-property-prefix}-inverse-support-02,
      map-get($theme, 'inverse-support-02')
    ) !global;
    $inverse-support-03: var(
      --#{$custom-property-prefix}-inverse-support-03,
      map-get($theme, 'inverse-support-03')
    ) !global;
    $inverse-support-04: var(
      --#{$custom-property-prefix}-inverse-support-04,
      map-get($theme, 'inverse-support-04')
    ) !global;
    $overlay-01: var(
      --#{$custom-property-prefix}-overlay-01,
      map-get($theme, 'overlay-01')
    ) !global;
    $danger-01: var(
      --#{$custom-property-prefix}-danger-01,
      map-get($theme, 'danger-01')
    ) !global;
    $danger-02: var(
      --#{$custom-property-prefix}-danger-02,
      map-get($theme, 'danger-02')
    ) !global;
    $focus: var(
      --#{$custom-property-prefix}-focus,
      map-get($theme, 'focus')
    ) !global;
    $inverse-focus-ui: var(
      --#{$custom-property-prefix}-inverse-focus-ui,
      map-get($theme, 'inverse-focus-ui')
    ) !global;
    $hover-primary: var(
      --#{$custom-property-prefix}-hover-primary,
      map-get($theme, 'hover-primary')
    ) !global;
    $active-primary: var(
      --#{$custom-property-prefix}-active-primary,
      map-get($theme, 'active-primary')
    ) !global;
    $hover-primary-text: var(
      --#{$custom-property-prefix}-hover-primary-text,
      map-get($theme, 'hover-primary-text')
    ) !global;
    $hover-secondary: var(
      --#{$custom-property-prefix}-hover-secondary,
      map-get($theme, 'hover-secondary')
    ) !global;
    $active-secondary: var(
      --#{$custom-property-prefix}-active-secondary,
      map-get($theme, 'active-secondary')
    ) !global;
    $hover-tertiary: var(
      --#{$custom-property-prefix}-hover-tertiary,
      map-get($theme, 'hover-tertiary')
    ) !global;
    $active-tertiary: var(
      --#{$custom-property-prefix}-active-tertiary,
      map-get($theme, 'active-tertiary')
    ) !global;
    $hover-ui: var(
      --#{$custom-property-prefix}-hover-ui,
      map-get($theme, 'hover-ui')
    ) !global;
    $hover-light-ui: var(
      --#{$custom-property-prefix}-hover-light-ui,
      map-get($theme, 'hover-light-ui')
    ) !global;
    $hover-selected-ui: var(
      --#{$custom-property-prefix}-hover-selected-ui,
      map-get($theme, 'hover-selected-ui')
    ) !global;
    $active-ui: var(
      --#{$custom-property-prefix}-active-ui,
      map-get($theme, 'active-ui')
    ) !global;
    $active-light-ui: var(
      --#{$custom-property-prefix}-active-light-ui,
      map-get($theme, 'active-light-ui')
    ) !global;
    $selected-ui: var(
      --#{$custom-property-prefix}-selected-ui,
      map-get($theme, 'selected-ui')
    ) !global;
    $selected-light-ui: var(
      --#{$custom-property-prefix}-selected-light-ui,
      map-get($theme, 'selected-light-ui')
    ) !global;
    $inverse-hover-ui: var(
      --#{$custom-property-prefix}-inverse-hover-ui,
      map-get($theme, 'inverse-hover-ui')
    ) !global;
    $hover-danger: var(
      --#{$custom-property-prefix}-hover-danger,
      map-get($theme, 'hover-danger')
    ) !global;
    $active-danger: var(
      --#{$custom-property-prefix}-active-danger,
      map-get($theme, 'active-danger')
    ) !global;
    $hover-row: var(
      --#{$custom-property-prefix}-hover-row,
      map-get($theme, 'hover-row')
    ) !global;
    $visited-link: var(
      --#{$custom-property-prefix}-visited-link,
      map-get($theme, 'visited-link')
    ) !global;
    $disabled-01: var(
      --#{$custom-property-prefix}-disabled-01,
      map-get($theme, 'disabled-01')
    ) !global;
    $disabled-02: var(
      --#{$custom-property-prefix}-disabled-02,
      map-get($theme, 'disabled-02')
    ) !global;
    $disabled-03: var(
      --#{$custom-property-prefix}-disabled-03,
      map-get($theme, 'disabled-03')
    ) !global;
    $highlight: var(
      --#{$custom-property-prefix}-highlight,
      map-get($theme, 'highlight')
    ) !global;
    $decorative-01: var(
      --#{$custom-property-prefix}-decorative-01,
      map-get($theme, 'decorative-01')
    ) !global;
    $button-separator: var(
      --#{$custom-property-prefix}-button-separator,
      map-get($theme, 'button-separator')
    ) !global;
    $skeleton-01: var(
      --#{$custom-property-prefix}-skeleton-01,
      map-get($theme, 'skeleton-01')
    ) !global;
    $skeleton-02: var(
      --#{$custom-property-prefix}-skeleton-02,
      map-get($theme, 'skeleton-02')
    ) !global;
    $brand-01: var(
      --#{$custom-property-prefix}-brand-01,
      map-get($theme, 'brand-01')
    ) !global;
    $brand-02: var(
      --#{$custom-property-prefix}-brand-02,
      map-get($theme, 'brand-02')
    ) !global;
    $brand-03: var(
      --#{$custom-property-prefix}-brand-03,
      map-get($theme, 'brand-03')
    ) !global;
    $active-01: var(
      --#{$custom-property-prefix}-active-01,
      map-get($theme, 'active-01')
    ) !global;
    $hover-field: var(
      --#{$custom-property-prefix}-hover-field,
      map-get($theme, 'hover-field')
    ) !global;
    $danger: var(
      --#{$custom-property-prefix}-danger,
      map-get($theme, 'danger')
    ) !global;
    $spacing-01: var(
      --#{$custom-property-prefix}-spacing-01,
      map-get($theme, 'spacing-01')
    ) !global;
    $spacing-02: var(
      --#{$custom-property-prefix}-spacing-02,
      map-get($theme, 'spacing-02')
    ) !global;
    $spacing-03: var(
      --#{$custom-property-prefix}-spacing-03,
      map-get($theme, 'spacing-03')
    ) !global;
    $spacing-04: var(
      --#{$custom-property-prefix}-spacing-04,
      map-get($theme, 'spacing-04')
    ) !global;
    $spacing-05: var(
      --#{$custom-property-prefix}-spacing-05,
      map-get($theme, 'spacing-05')
    ) !global;
    $spacing-06: var(
      --#{$custom-property-prefix}-spacing-06,
      map-get($theme, 'spacing-06')
    ) !global;
    $spacing-07: var(
      --#{$custom-property-prefix}-spacing-07,
      map-get($theme, 'spacing-07')
    ) !global;
    $spacing-08: var(
      --#{$custom-property-prefix}-spacing-08,
      map-get($theme, 'spacing-08')
    ) !global;
    $spacing-09: var(
      --#{$custom-property-prefix}-spacing-09,
      map-get($theme, 'spacing-09')
    ) !global;
    $spacing-10: var(
      --#{$custom-property-prefix}-spacing-10,
      map-get($theme, 'spacing-10')
    ) !global;
    $spacing-11: var(
      --#{$custom-property-prefix}-spacing-11,
      map-get($theme, 'spacing-11')
    ) !global;
    $spacing-12: var(
      --#{$custom-property-prefix}-spacing-12,
      map-get($theme, 'spacing-12')
    ) !global;
    $fluid-spacing-01: var(
      --#{$custom-property-prefix}-fluid-spacing-01,
      map-get($theme, 'fluid-spacing-01')
    ) !global;
    $fluid-spacing-02: var(
      --#{$custom-property-prefix}-fluid-spacing-02,
      map-get($theme, 'fluid-spacing-02')
    ) !global;
    $fluid-spacing-03: var(
      --#{$custom-property-prefix}-fluid-spacing-03,
      map-get($theme, 'fluid-spacing-03')
    ) !global;
    $fluid-spacing-04: var(
      --#{$custom-property-prefix}-fluid-spacing-04,
      map-get($theme, 'fluid-spacing-04')
    ) !global;
    $layout-01: var(
      --#{$custom-property-prefix}-layout-01,
      map-get($theme, 'layout-01')
    ) !global;
    $layout-02: var(
      --#{$custom-property-prefix}-layout-02,
      map-get($theme, 'layout-02')
    ) !global;
    $layout-03: var(
      --#{$custom-property-prefix}-layout-03,
      map-get($theme, 'layout-03')
    ) !global;
    $layout-04: var(
      --#{$custom-property-prefix}-layout-04,
      map-get($theme, 'layout-04')
    ) !global;
    $layout-05: var(
      --#{$custom-property-prefix}-layout-05,
      map-get($theme, 'layout-05')
    ) !global;
    $layout-06: var(
      --#{$custom-property-prefix}-layout-06,
      map-get($theme, 'layout-06')
    ) !global;
    $layout-07: var(
      --#{$custom-property-prefix}-layout-07,
      map-get($theme, 'layout-07')
    ) !global;
    $container-01: var(
      --#{$custom-property-prefix}-container-01,
      map-get($theme, 'container-01')
    ) !global;
    $container-02: var(
      --#{$custom-property-prefix}-container-02,
      map-get($theme, 'container-02')
    ) !global;
    $container-03: var(
      --#{$custom-property-prefix}-container-03,
      map-get($theme, 'container-03')
    ) !global;
    $container-04: var(
      --#{$custom-property-prefix}-container-04,
      map-get($theme, 'container-04')
    ) !global;
    $container-05: var(
      --#{$custom-property-prefix}-container-05,
      map-get($theme, 'container-05')
    ) !global;
    $icon-size-01: var(
      --#{$custom-property-prefix}-icon-size-01,
      map-get($theme, 'icon-size-01')
    ) !global;
    $icon-size-02: var(
      --#{$custom-property-prefix}-icon-size-02,
      map-get($theme, 'icon-size-02')
    ) !global;
  }
  @if $emit-custom-properties == true {
    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'interactive-01',
      $emit-difference
    )
    {
      @include custom-property(
        'interactive-01',
        map-get($theme, 'interactive-01')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'interactive-02',
      $emit-difference
    )
    {
      @include custom-property(
        'interactive-02',
        map-get($theme, 'interactive-02')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'interactive-03',
      $emit-difference
    )
    {
      @include custom-property(
        'interactive-03',
        map-get($theme, 'interactive-03')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'interactive-04',
      $emit-difference
    )
    {
      @include custom-property(
        'interactive-04',
        map-get($theme, 'interactive-04')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'ui-background',
      $emit-difference
    )
    {
      @include custom-property(
        'ui-background',
        map-get($theme, 'ui-background')
      );
    }

    @if should-emit($theme, $parent-carbon-theme, 'ui-01', $emit-difference) {
      @include custom-property('ui-01', map-get($theme, 'ui-01'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'ui-02', $emit-difference) {
      @include custom-property('ui-02', map-get($theme, 'ui-02'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'ui-03', $emit-difference) {
      @include custom-property('ui-03', map-get($theme, 'ui-03'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'ui-04', $emit-difference) {
      @include custom-property('ui-04', map-get($theme, 'ui-04'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'ui-05', $emit-difference) {
      @include custom-property('ui-05', map-get($theme, 'ui-05'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'text-01', $emit-difference) {
      @include custom-property('text-01', map-get($theme, 'text-01'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'text-02', $emit-difference) {
      @include custom-property('text-02', map-get($theme, 'text-02'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'text-03', $emit-difference) {
      @include custom-property('text-03', map-get($theme, 'text-03'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'text-04', $emit-difference) {
      @include custom-property('text-04', map-get($theme, 'text-04'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'text-05', $emit-difference) {
      @include custom-property('text-05', map-get($theme, 'text-05'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'text-error',
      $emit-difference
    )
    {
      @include custom-property('text-error', map-get($theme, 'text-error'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'icon-01', $emit-difference) {
      @include custom-property('icon-01', map-get($theme, 'icon-01'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'icon-02', $emit-difference) {
      @include custom-property('icon-02', map-get($theme, 'icon-02'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'icon-03', $emit-difference) {
      @include custom-property('icon-03', map-get($theme, 'icon-03'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'link-01', $emit-difference) {
      @include custom-property('link-01', map-get($theme, 'link-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'inverse-link',
      $emit-difference
    )
    {
      @include custom-property('inverse-link', map-get($theme, 'inverse-link'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'field-01', $emit-difference)
    {
      @include custom-property('field-01', map-get($theme, 'field-01'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'field-02', $emit-difference)
    {
      @include custom-property('field-02', map-get($theme, 'field-02'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'inverse-01',
      $emit-difference
    )
    {
      @include custom-property('inverse-01', map-get($theme, 'inverse-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'inverse-02',
      $emit-difference
    )
    {
      @include custom-property('inverse-02', map-get($theme, 'inverse-02'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'support-01',
      $emit-difference
    )
    {
      @include custom-property('support-01', map-get($theme, 'support-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'support-02',
      $emit-difference
    )
    {
      @include custom-property('support-02', map-get($theme, 'support-02'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'support-03',
      $emit-difference
    )
    {
      @include custom-property('support-03', map-get($theme, 'support-03'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'support-04',
      $emit-difference
    )
    {
      @include custom-property('support-04', map-get($theme, 'support-04'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'inverse-support-01',
      $emit-difference
    )
    {
      @include custom-property(
        'inverse-support-01',
        map-get($theme, 'inverse-support-01')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'inverse-support-02',
      $emit-difference
    )
    {
      @include custom-property(
        'inverse-support-02',
        map-get($theme, 'inverse-support-02')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'inverse-support-03',
      $emit-difference
    )
    {
      @include custom-property(
        'inverse-support-03',
        map-get($theme, 'inverse-support-03')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'inverse-support-04',
      $emit-difference
    )
    {
      @include custom-property(
        'inverse-support-04',
        map-get($theme, 'inverse-support-04')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'overlay-01',
      $emit-difference
    )
    {
      @include custom-property('overlay-01', map-get($theme, 'overlay-01'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'danger-01', $emit-difference)
    {
      @include custom-property('danger-01', map-get($theme, 'danger-01'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'danger-02', $emit-difference)
    {
      @include custom-property('danger-02', map-get($theme, 'danger-02'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'focus', $emit-difference) {
      @include custom-property('focus', map-get($theme, 'focus'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'inverse-focus-ui',
      $emit-difference
    )
    {
      @include custom-property(
        'inverse-focus-ui',
        map-get($theme, 'inverse-focus-ui')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'hover-primary',
      $emit-difference
    )
    {
      @include custom-property(
        'hover-primary',
        map-get($theme, 'hover-primary')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'active-primary',
      $emit-difference
    )
    {
      @include custom-property(
        'active-primary',
        map-get($theme, 'active-primary')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'hover-primary-text',
      $emit-difference
    )
    {
      @include custom-property(
        'hover-primary-text',
        map-get($theme, 'hover-primary-text')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'hover-secondary',
      $emit-difference
    )
    {
      @include custom-property(
        'hover-secondary',
        map-get($theme, 'hover-secondary')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'active-secondary',
      $emit-difference
    )
    {
      @include custom-property(
        'active-secondary',
        map-get($theme, 'active-secondary')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'hover-tertiary',
      $emit-difference
    )
    {
      @include custom-property(
        'hover-tertiary',
        map-get($theme, 'hover-tertiary')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'active-tertiary',
      $emit-difference
    )
    {
      @include custom-property(
        'active-tertiary',
        map-get($theme, 'active-tertiary')
      );
    }

    @if should-emit($theme, $parent-carbon-theme, 'hover-ui', $emit-difference)
    {
      @include custom-property('hover-ui', map-get($theme, 'hover-ui'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'hover-light-ui',
      $emit-difference
    )
    {
      @include custom-property(
        'hover-light-ui',
        map-get($theme, 'hover-light-ui')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'hover-selected-ui',
      $emit-difference
    )
    {
      @include custom-property(
        'hover-selected-ui',
        map-get($theme, 'hover-selected-ui')
      );
    }

    @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
    {
      @include custom-property('active-ui', map-get($theme, 'active-ui'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'active-light-ui',
      $emit-difference
    )
    {
      @include custom-property(
        'active-light-ui',
        map-get($theme, 'active-light-ui')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'selected-ui',
      $emit-difference
    )
    {
      @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'selected-light-ui',
      $emit-difference
    )
    {
      @include custom-property(
        'selected-light-ui',
        map-get($theme, 'selected-light-ui')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'inverse-hover-ui',
      $emit-difference
    )
    {
      @include custom-property(
        'inverse-hover-ui',
        map-get($theme, 'inverse-hover-ui')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'hover-danger',
      $emit-difference
    )
    {
      @include custom-property('hover-danger', map-get($theme, 'hover-danger'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'active-danger',
      $emit-difference
    )
    {
      @include custom-property(
        'active-danger',
        map-get($theme, 'active-danger')
      );
    }

    @if should-emit($theme, $parent-carbon-theme, 'hover-row', $emit-difference)
    {
      @include custom-property('hover-row', map-get($theme, 'hover-row'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'visited-link',
      $emit-difference
    )
    {
      @include custom-property('visited-link', map-get($theme, 'visited-link'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'disabled-01',
      $emit-difference
    )
    {
      @include custom-property('disabled-01', map-get($theme, 'disabled-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'disabled-02',
      $emit-difference
    )
    {
      @include custom-property('disabled-02', map-get($theme, 'disabled-02'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'disabled-03',
      $emit-difference
    )
    {
      @include custom-property('disabled-03', map-get($theme, 'disabled-03'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'highlight', $emit-difference)
    {
      @include custom-property('highlight', map-get($theme, 'highlight'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'decorative-01',
      $emit-difference
    )
    {
      @include custom-property(
        'decorative-01',
        map-get($theme, 'decorative-01')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'button-separator',
      $emit-difference
    )
    {
      @include custom-property(
        'button-separator',
        map-get($theme, 'button-separator')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'skeleton-01',
      $emit-difference
    )
    {
      @include custom-property('skeleton-01', map-get($theme, 'skeleton-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'skeleton-02',
      $emit-difference
    )
    {
      @include custom-property('skeleton-02', map-get($theme, 'skeleton-02'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'brand-01', $emit-difference)
    {
      @include custom-property('brand-01', map-get($theme, 'brand-01'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'brand-02', $emit-difference)
    {
      @include custom-property('brand-02', map-get($theme, 'brand-02'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'brand-03', $emit-difference)
    {
      @include custom-property('brand-03', map-get($theme, 'brand-03'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'active-01', $emit-difference)
    {
      @include custom-property('active-01', map-get($theme, 'active-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'hover-field',
      $emit-difference
    )
    {
      @include custom-property('hover-field', map-get($theme, 'hover-field'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) {
      @include custom-property('danger', map-get($theme, 'danger'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'caption-01',
      $emit-difference
    )
    {
      @include custom-property('caption-01', map-get($theme, 'caption-01'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'label-01', $emit-difference)
    {
      @include custom-property('label-01', map-get($theme, 'label-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'helper-text-01',
      $emit-difference
    )
    {
      @include custom-property(
        'helper-text-01',
        map-get($theme, 'helper-text-01')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'body-short-01',
      $emit-difference
    )
    {
      @include custom-property(
        'body-short-01',
        map-get($theme, 'body-short-01')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'body-long-01',
      $emit-difference
    )
    {
      @include custom-property('body-long-01', map-get($theme, 'body-long-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'body-short-02',
      $emit-difference
    )
    {
      @include custom-property(
        'body-short-02',
        map-get($theme, 'body-short-02')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'body-long-02',
      $emit-difference
    )
    {
      @include custom-property('body-long-02', map-get($theme, 'body-long-02'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'code-01', $emit-difference) {
      @include custom-property('code-01', map-get($theme, 'code-01'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'code-02', $emit-difference) {
      @include custom-property('code-02', map-get($theme, 'code-02'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'heading-01',
      $emit-difference
    )
    {
      @include custom-property('heading-01', map-get($theme, 'heading-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'productive-heading-01',
      $emit-difference
    )
    {
      @include custom-property(
        'productive-heading-01',
        map-get($theme, 'productive-heading-01')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'heading-02',
      $emit-difference
    )
    {
      @include custom-property('heading-02', map-get($theme, 'heading-02'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'productive-heading-02',
      $emit-difference
    )
    {
      @include custom-property(
        'productive-heading-02',
        map-get($theme, 'productive-heading-02')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'productive-heading-03',
      $emit-difference
    )
    {
      @include custom-property(
        'productive-heading-03',
        map-get($theme, 'productive-heading-03')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'productive-heading-04',
      $emit-difference
    )
    {
      @include custom-property(
        'productive-heading-04',
        map-get($theme, 'productive-heading-04')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'productive-heading-05',
      $emit-difference
    )
    {
      @include custom-property(
        'productive-heading-05',
        map-get($theme, 'productive-heading-05')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'productive-heading-06',
      $emit-difference
    )
    {
      @include custom-property(
        'productive-heading-06',
        map-get($theme, 'productive-heading-06')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'productive-heading-07',
      $emit-difference
    )
    {
      @include custom-property(
        'productive-heading-07',
        map-get($theme, 'productive-heading-07')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'expressive-heading-01',
      $emit-difference
    )
    {
      @include custom-property(
        'expressive-heading-01',
        map-get($theme, 'expressive-heading-01')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'expressive-heading-02',
      $emit-difference
    )
    {
      @include custom-property(
        'expressive-heading-02',
        map-get($theme, 'expressive-heading-02')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'expressive-heading-03',
      $emit-difference
    )
    {
      @include custom-property(
        'expressive-heading-03',
        map-get($theme, 'expressive-heading-03')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'expressive-heading-04',
      $emit-difference
    )
    {
      @include custom-property(
        'expressive-heading-04',
        map-get($theme, 'expressive-heading-04')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'expressive-heading-05',
      $emit-difference
    )
    {
      @include custom-property(
        'expressive-heading-05',
        map-get($theme, 'expressive-heading-05')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'expressive-heading-06',
      $emit-difference
    )
    {
      @include custom-property(
        'expressive-heading-06',
        map-get($theme, 'expressive-heading-06')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'expressive-paragraph-01',
      $emit-difference
    )
    {
      @include custom-property(
        'expressive-paragraph-01',
        map-get($theme, 'expressive-paragraph-01')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'quotation-01',
      $emit-difference
    )
    {
      @include custom-property('quotation-01', map-get($theme, 'quotation-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'quotation-02',
      $emit-difference
    )
    {
      @include custom-property('quotation-02', map-get($theme, 'quotation-02'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'display-01',
      $emit-difference
    )
    {
      @include custom-property('display-01', map-get($theme, 'display-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'display-02',
      $emit-difference
    )
    {
      @include custom-property('display-02', map-get($theme, 'display-02'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'display-03',
      $emit-difference
    )
    {
      @include custom-property('display-03', map-get($theme, 'display-03'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'display-04',
      $emit-difference
    )
    {
      @include custom-property('display-04', map-get($theme, 'display-04'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'spacing-01',
      $emit-difference
    )
    {
      @include custom-property('spacing-01', map-get($theme, 'spacing-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'spacing-02',
      $emit-difference
    )
    {
      @include custom-property('spacing-02', map-get($theme, 'spacing-02'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'spacing-03',
      $emit-difference
    )
    {
      @include custom-property('spacing-03', map-get($theme, 'spacing-03'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'spacing-04',
      $emit-difference
    )
    {
      @include custom-property('spacing-04', map-get($theme, 'spacing-04'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'spacing-05',
      $emit-difference
    )
    {
      @include custom-property('spacing-05', map-get($theme, 'spacing-05'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'spacing-06',
      $emit-difference
    )
    {
      @include custom-property('spacing-06', map-get($theme, 'spacing-06'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'spacing-07',
      $emit-difference
    )
    {
      @include custom-property('spacing-07', map-get($theme, 'spacing-07'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'spacing-08',
      $emit-difference
    )
    {
      @include custom-property('spacing-08', map-get($theme, 'spacing-08'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'spacing-09',
      $emit-difference
    )
    {
      @include custom-property('spacing-09', map-get($theme, 'spacing-09'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'spacing-10',
      $emit-difference
    )
    {
      @include custom-property('spacing-10', map-get($theme, 'spacing-10'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'spacing-11',
      $emit-difference
    )
    {
      @include custom-property('spacing-11', map-get($theme, 'spacing-11'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'spacing-12',
      $emit-difference
    )
    {
      @include custom-property('spacing-12', map-get($theme, 'spacing-12'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'fluid-spacing-01',
      $emit-difference
    )
    {
      @include custom-property(
        'fluid-spacing-01',
        map-get($theme, 'fluid-spacing-01')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'fluid-spacing-02',
      $emit-difference
    )
    {
      @include custom-property(
        'fluid-spacing-02',
        map-get($theme, 'fluid-spacing-02')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'fluid-spacing-03',
      $emit-difference
    )
    {
      @include custom-property(
        'fluid-spacing-03',
        map-get($theme, 'fluid-spacing-03')
      );
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'fluid-spacing-04',
      $emit-difference
    )
    {
      @include custom-property(
        'fluid-spacing-04',
        map-get($theme, 'fluid-spacing-04')
      );
    }

    @if should-emit($theme, $parent-carbon-theme, 'layout-01', $emit-difference)
    {
      @include custom-property('layout-01', map-get($theme, 'layout-01'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'layout-02', $emit-difference)
    {
      @include custom-property('layout-02', map-get($theme, 'layout-02'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'layout-03', $emit-difference)
    {
      @include custom-property('layout-03', map-get($theme, 'layout-03'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'layout-04', $emit-difference)
    {
      @include custom-property('layout-04', map-get($theme, 'layout-04'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'layout-05', $emit-difference)
    {
      @include custom-property('layout-05', map-get($theme, 'layout-05'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'layout-06', $emit-difference)
    {
      @include custom-property('layout-06', map-get($theme, 'layout-06'));
    }

    @if should-emit($theme, $parent-carbon-theme, 'layout-07', $emit-difference)
    {
      @include custom-property('layout-07', map-get($theme, 'layout-07'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'container-01',
      $emit-difference
    )
    {
      @include custom-property('container-01', map-get($theme, 'container-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'container-02',
      $emit-difference
    )
    {
      @include custom-property('container-02', map-get($theme, 'container-02'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'container-03',
      $emit-difference
    )
    {
      @include custom-property('container-03', map-get($theme, 'container-03'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'container-04',
      $emit-difference
    )
    {
      @include custom-property('container-04', map-get($theme, 'container-04'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'container-05',
      $emit-difference
    )
    {
      @include custom-property('container-05', map-get($theme, 'container-05'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'icon-size-01',
      $emit-difference
    )
    {
      @include custom-property('icon-size-01', map-get($theme, 'icon-size-01'));
    }

    @if should-emit(
      $theme,
      $parent-carbon-theme,
      'icon-size-02',
      $emit-difference
    )
    {
      @include custom-property('icon-size-02', map-get($theme, 'icon-size-02'));
    }
  }

  @content;

  // Reset to default theme after apply in content
  @if $carbon--theme != $parent-carbon-theme {
    $carbon--theme: $parent-carbon-theme !global;

    @include carbon--theme();
  }
}

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:

Example code

// Default usage
@include carbon--theme();

// Alternate styling (not white theme)
@include carbon--theme($carbon--theme--g90) {
  // declarations...
}

// Inline styling
@include carbon--theme($carbon--theme--g90) {
  .my-dark-theme {
    // declarations...
  }
}

Group: @carbon/themes
Content: Pass in your custom declaration blocks to be used after the token maps set theming variables.
Requires:

✅carbon--theme--g10 [variable]

Carbon's g10 color theme

Source code

$carbon--theme--g10: map-merge(
  $carbon--theme--white,
  (
    ui-background: #f4f4f4,
    ui-01: #ffffff,
    ui-02: #f4f4f4,
    field-01: #ffffff,
    field-02: #f4f4f4,
    disabled-01: #ffffff,
    highlight: #edf5ff,
  )
);

Group: @carbon/themes
Type: Map

✅carbon--theme--g90 [variable]

Carbon's g90 color theme

Source code

$carbon--theme--g90: map-merge(
  $carbon--theme--white,
  (
    interactive-02: #6f6f6f,
    interactive-03: #ffffff,
    interactive-04: #4589ff,
    ui-background: #262626,
    ui-01: #393939,
    ui-02: #525252,
    ui-03: #525252,
    ui-05: #f4f4f4,
    text-01: #f4f4f4,
    text-02: #c6c6c6,
    text-03: #6f6f6f,
    text-05: #8d8d8d,
    text-error: #ffb3b8,
    icon-01: #f4f4f4,
    icon-02: #c6c6c6,
    link-01: #78a9ff,
    inverse-link: #0f62fe,
    field-01: #393939,
    field-02: #525252,
    inverse-01: #161616,
    inverse-02: #f4f4f4,
    support-01: #ff8389,
    support-02: #42be65,
    support-04: #4589ff,
    inverse-support-01: #da1e28,
    inverse-support-02: #24a148,
    inverse-support-04: #0f62fe,
    overlay-01: rgba(22, 22, 22, 0.7),
    danger-02: #ff8389,
    focus: #ffffff,
    inverse-focus-ui: #0f62fe,
    hover-primary-text: #a6c8ff,
    hover-secondary: #606060,
    active-secondary: #393939,
    hover-tertiary: #f4f4f4,
    active-tertiary: #c6c6c6,
    hover-ui: #4c4c4c,
    hover-light-ui: #656565,
    active-ui: #6f6f6f,
    active-light-ui: #8d8d8d,
    selected-ui: #525252,
    selected-light-ui: #6f6f6f,
    inverse-hover-ui: #e5e5e5,
    hover-selected-ui: #656565,
    hover-row: #4c4c4c,
    visited-link: #be95ff,
    disabled-01: #393939,
    disabled-02: #6f6f6f,
    disabled-03: #a8a8a8,
    highlight: #0043ce,
    decorative-01: #6f6f6f,
    button-separator: #161616,
    skeleton-01: #353535,
    skeleton-02: #525252,
    brand-02: #6f6f6f,
    brand-03: #ffffff,
    active-01: #6f6f6f,
    hover-field: #4c4c4c,
  )
);

Group: @carbon/themes
Type: Map

✅carbon--theme--g100 [variable]

Carbon's g100 color theme

Source code

$carbon--theme--g100: map-merge(
  $carbon--theme--white,
  (
    interactive-02: #6f6f6f,
    interactive-03: #ffffff,
    interactive-04: #4589ff,
    ui-background: #161616,
    ui-01: #262626,
    ui-02: #393939,
    ui-03: #393939,
    ui-04: #6f6f6f,
    ui-05: #f4f4f4,
    text-01: #f4f4f4,
    text-02: #c6c6c6,
    text-03: #6f6f6f,
    text-05: #8d8d8d,
    text-error: #ff8389,
    icon-01: #f4f4f4,
    icon-02: #c6c6c6,
    link-01: #78a9ff,
    inverse-link: #0f62fe,
    field-01: #262626,
    field-02: #393939,
    inverse-01: #161616,
    inverse-02: #f4f4f4,
    support-01: #fa4d56,
    support-02: #42be65,
    support-04: #4589ff,
    inverse-support-01: #da1e28,
    inverse-support-02: #24a148,
    inverse-support-04: #0f62fe,
    overlay-01: rgba(22, 22, 22, 0.7),
    danger-02: #fa4d56,
    focus: #ffffff,
    inverse-focus-ui: #0f62fe,
    hover-primary-text: #a6c8ff,
    hover-secondary: #606060,
    active-secondary: #393939,
    hover-tertiary: #f4f4f4,
    active-tertiary: #c6c6c6,
    hover-ui: #353535,
    hover-light-ui: #4c4c4c,
    active-ui: #525252,
    active-light-ui: #6f6f6f,
    selected-ui: #393939,
    selected-light-ui: #525252,
    inverse-hover-ui: #e5e5e5,
    hover-selected-ui: #4c4c4c,
    hover-row: #353535,
    visited-link: #be95ff,
    disabled-01: #262626,
    disabled-02: #525252,
    highlight: #002d9c,
    decorative-01: #525252,
    button-separator: #161616,
    skeleton-01: #353535,
    skeleton-02: #393939,
    brand-02: #6f6f6f,
    brand-03: #ffffff,
    active-01: #525252,
    hover-field: #353535,
  )
);

Group: @carbon/themes
Type: Map

✅carbon--theme--v9 [variable]

Carbon's v9 color theme

Source code

$carbon--theme--v9: map-merge(
  $carbon--theme--white,
  (
    interactive-01: #3d70b2,
    interactive-02: #4d5358,
    interactive-03: #3d70b2,
    interactive-04: #3d70b2,
    ui-background: #f4f7fb,
    ui-01: #ffffff,
    ui-02: #f4f7fb,
    ui-03: #dfe3e6,
    ui-04: #8897a2,
    ui-05: #5a6872,
    text-01: #152935,
    text-02: #5a6872,
    text-03: #cdd1d4,
    text-05: #5a6872,
    text-error: #e0182d,
    icon-01: #3d70b2,
    icon-02: #5a6872,
    link-01: #3d70b2,
    inverse-link: #5596e6,
    field-01: #ffffff,
    field-02: #f4f7fb,
    inverse-02: #272d33,
    support-01: #e0182d,
    support-02: #5aa700,
    support-03: #efc100,
    support-04: #5aaafa,
    inverse-support-01: #ff5050,
    inverse-support-02: #8cd211,
    inverse-support-03: #fdd600,
    inverse-support-04: #5aaafa,
    overlay-01: rgba(223, 227, 230, 0.5),
    focus: #3d70b2,
    inverse-focus-ui: #3d70b2,
    hover-primary: #30588c,
    active-primary: #30588c,
    hover-primary-text: #294c86,
    hover-secondary: #4d5b65,
    active-secondary: #414f59,
    hover-tertiary: #5a6872,
    active-tertiary: #414f59,
    hover-ui: #eef4fc,
    hover-light-ui: #eef4fc,
    active-ui: #dfeafa,
    active-light-ui: #dfeafa,
    selected-ui: #eef4fc,
    selected-light-ui: #eef4fc,
    hover-selected-ui: #dfeafa,
    hover-danger: #c70014,
    active-danger: #ad1625,
    hover-row: #eef4fc,
    visited-link: #294c86,
    disabled-01: #fafbfd,
    disabled-02: #dfe3e6,
    disabled-03: #cdd1d4,
    highlight: #f4f7fb,
    decorative-01: #eef4fc,
    skeleton-01: rgba(61, 112, 178, 0.1),
    skeleton-02: rgba(61, 112, 178, 0.1),
    brand-01: #3d70b2,
    brand-02: #4d5358,
    brand-03: #3d70b2,
    active-01: #dfeafa,
    hover-field: #eef4fc,
  )
);

Group: @carbon/themes
Type: Map

✅carbon--theme [variable]

Carbon's default theme

Source code

$carbon--theme: (
  interactive-01: if(global-variable-exists('interactive-01'), $interactive-01, map-get($carbon--theme--white, 'interactive-01')),
  interactive-02: if(global-variable-exists('interactive-02'), $interactive-02, map-get($carbon--theme--white, 'interactive-02')),
  interactive-03: if(global-variable-exists('interactive-03'), $interactive-03, map-get($carbon--theme--white, 'interactive-03')),
  interactive-04: if(global-variable-exists('interactive-04'), $interactive-04, map-get($carbon--theme--white, 'interactive-04')),
  ui-background: if(global-variable-exists('ui-background'), $ui-background, map-get($carbon--theme--white, 'ui-background')),
  ui-01: if(global-variable-exists('ui-01'), $ui-01, map-get($carbon--theme--white, 'ui-01')),
  ui-02: if(global-variable-exists('ui-02'), $ui-02, map-get($carbon--theme--white, 'ui-02')),
  ui-03: if(global-variable-exists('ui-03'), $ui-03, map-get($carbon--theme--white, 'ui-03')),
  ui-04: if(global-variable-exists('ui-04'), $ui-04, map-get($carbon--theme--white, 'ui-04')),
  ui-05: if(global-variable-exists('ui-05'), $ui-05, map-get($carbon--theme--white, 'ui-05')),
  text-01: if(global-variable-exists('text-01'), $text-01, map-get($carbon--theme--white, 'text-01')),
  text-02: if(global-variable-exists('text-02'), $text-02, map-get($carbon--theme--white, 'text-02')),
  text-03: if(global-variable-exists('text-03'), $text-03, map-get($carbon--theme--white, 'text-03')),
  text-04: if(global-variable-exists('text-04'), $text-04, map-get($carbon--theme--white, 'text-04')),
  text-05: if(global-variable-exists('text-05'), $text-05, map-get($carbon--theme--white, 'text-05')),
  text-error: if(global-variable-exists('text-error'), $text-error, map-get($carbon--theme--white, 'text-error')),
  icon-01: if(global-variable-exists('icon-01'), $icon-01, map-get($carbon--theme--white, 'icon-01')),
  icon-02: if(global-variable-exists('icon-02'), $icon-02, map-get($carbon--theme--white, 'icon-02')),
  icon-03: if(global-variable-exists('icon-03'), $icon-03, map-get($carbon--theme--white, 'icon-03')),
  link-01: if(global-variable-exists('link-01'), $link-01, map-get($carbon--theme--white, 'link-01')),
  inverse-link: if(global-variable-exists('inverse-link'), $inverse-link, map-get($carbon--theme--white, 'inverse-link')),
  field-01: if(global-variable-exists('field-01'), $field-01, map-get($carbon--theme--white, 'field-01')),
  field-02: if(global-variable-exists('field-02'), $field-02, map-get($carbon--theme--white, 'field-02')),
  inverse-01: if(global-variable-exists('inverse-01'), $inverse-01, map-get($carbon--theme--white, 'inverse-01')),
  inverse-02: if(global-variable-exists('inverse-02'), $inverse-02, map-get($carbon--theme--white, 'inverse-02')),
  support-01: if(global-variable-exists('support-01'), $support-01, map-get($carbon--theme--white, 'support-01')),
  support-02: if(global-variable-exists('support-02'), $support-02, map-get($carbon--theme--white, 'support-02')),
  support-03: if(global-variable-exists('support-03'), $support-03, map-get($carbon--theme--white, 'support-03')),
  support-04: if(global-variable-exists('support-04'), $support-04, map-get($carbon--theme--white, 'support-04')),
  inverse-support-01: if(global-variable-exists('inverse-support-01'), $inverse-support-01, map-get($carbon--theme--white, 'inverse-support-01')),
  inverse-support-02: if(global-variable-exists('inverse-support-02'), $inverse-support-02, map-get($carbon--theme--white, 'inverse-support-02')),
  inverse-support-03: if(global-variable-exists('inverse-support-03'), $inverse-support-03, map-get($carbon--theme--white, 'inverse-support-03')),
  inverse-support-04: if(global-variable-exists('inverse-support-04'), $inverse-support-04, map-get($carbon--theme--white, 'inverse-support-04')),
  overlay-01: if(global-variable-exists('overlay-01'), $overlay-01, map-get($carbon--theme--white, 'overlay-01')),
  danger-01: if(global-variable-exists('danger-01'), $danger-01, map-get($carbon--theme--white, 'danger-01')),
  danger-02: if(global-variable-exists('danger-02'), $danger-02, map-get($carbon--theme--white, 'danger-02')),
  focus: if(global-variable-exists('focus'), $focus, map-get($carbon--theme--white, 'focus')),
  inverse-focus-ui: if(global-variable-exists('inverse-focus-ui'), $inverse-focus-ui, map-get($carbon--theme--white, 'inverse-focus-ui')),
  hover-primary: if(global-variable-exists('hover-primary'), $hover-primary, map-get($carbon--theme--white, 'hover-primary')),
  active-primary: if(global-variable-exists('active-primary'), $active-primary, map-get($carbon--theme--white, 'active-primary')),
  hover-primary-text: if(global-variable-exists('hover-primary-text'), $hover-primary-text, map-get($carbon--theme--white, 'hover-primary-text')),
  hover-secondary: if(global-variable-exists('hover-secondary'), $hover-secondary, map-get($carbon--theme--white, 'hover-secondary')),
  active-secondary: if(global-variable-exists('active-secondary'), $active-secondary, map-get($carbon--theme--white, 'active-secondary')),
  hover-tertiary: if(global-variable-exists('hover-tertiary'), $hover-tertiary, map-get($carbon--theme--white, 'hover-tertiary')),
  active-tertiary: if(global-variable-exists('active-tertiary'), $active-tertiary, map-get($carbon--theme--white, 'active-tertiary')),
  hover-ui: if(global-variable-exists('hover-ui'), $hover-ui, map-get($carbon--theme--white, 'hover-ui')),
  hover-light-ui: if(global-variable-exists('hover-light-ui'), $hover-light-ui, map-get($carbon--theme--white, 'hover-light-ui')),
  hover-selected-ui: if(global-variable-exists('hover-selected-ui'), $hover-selected-ui, map-get($carbon--theme--white, 'hover-selected-ui')),
  active-ui: if(global-variable-exists('active-ui'), $active-ui, map-get($carbon--theme--white, 'active-ui')),
  active-light-ui: if(global-variable-exists('active-light-ui'), $active-light-ui, map-get($carbon--theme--white, 'active-light-ui')),
  selected-ui: if(global-variable-exists('selected-ui'), $selected-ui, map-get($carbon--theme--white, 'selected-ui')),
  selected-light-ui: if(global-variable-exists('selected-light-ui'), $selected-light-ui, map-get($carbon--theme--white, 'selected-light-ui')),
  inverse-hover-ui: if(global-variable-exists('inverse-hover-ui'), $inverse-hover-ui, map-get($carbon--theme--white, 'inverse-hover-ui')),
  hover-danger: if(global-variable-exists('hover-danger'), $hover-danger, map-get($carbon--theme--white, 'hover-danger')),
  active-danger: if(global-variable-exists('active-danger'), $active-danger, map-get($carbon--theme--white, 'active-danger')),
  hover-row: if(global-variable-exists('hover-row'), $hover-row, map-get($carbon--theme--white, 'hover-row')),
  visited-link: if(global-variable-exists('visited-link'), $visited-link, map-get($carbon--theme--white, 'visited-link')),
  disabled-01: if(global-variable-exists('disabled-01'), $disabled-01, map-get($carbon--theme--white, 'disabled-01')),
  disabled-02: if(global-variable-exists('disabled-02'), $disabled-02, map-get($carbon--theme--white, 'disabled-02')),
  disabled-03: if(global-variable-exists('disabled-03'), $disabled-03, map-get($carbon--theme--white, 'disabled-03')),
  highlight: if(global-variable-exists('highlight'), $highlight, map-get($carbon--theme--white, 'highlight')),
  decorative-01: if(global-variable-exists('decorative-01'), $decorative-01, map-get($carbon--theme--white, 'decorative-01')),
  button-separator: if(global-variable-exists('button-separator'), $button-separator, map-get($carbon--theme--white, 'button-separator')),
  skeleton-01: if(global-variable-exists('skeleton-01'), $skeleton-01, map-get($carbon--theme--white, 'skeleton-01')),
  skeleton-02: if(global-variable-exists('skeleton-02'), $skeleton-02, map-get($carbon--theme--white, 'skeleton-02')),
  brand-01: if(global-variable-exists('brand-01'), $brand-01, map-get($carbon--theme--white, 'brand-01')),
  brand-02: if(global-variable-exists('brand-02'), $brand-02, map-get($carbon--theme--white, 'brand-02')),
  brand-03: if(global-variable-exists('brand-03'), $brand-03, map-get($carbon--theme--white, 'brand-03')),
  active-01: if(global-variable-exists('active-01'), $active-01, map-get($carbon--theme--white, 'active-01')),
  hover-field: if(global-variable-exists('hover-field'), $hover-field, map-get($carbon--theme--white, 'hover-field')),
  danger: if(global-variable-exists('danger'), $danger, map-get($carbon--theme--white, 'danger')),
  caption-01: if(global-variable-exists('caption-01'), $caption-01, map-get($carbon--theme--white, 'caption-01')),
  label-01: if(global-variable-exists('label-01'), $label-01, map-get($carbon--theme--white, 'label-01')),
  helper-text-01: if(global-variable-exists('helper-text-01'), $helper-text-01, map-get($carbon--theme--white, 'helper-text-01')),
  body-short-01: if(global-variable-exists('body-short-01'), $body-short-01, map-get($carbon--theme--white, 'body-short-01')),
  body-long-01: if(global-variable-exists('body-long-01'), $body-long-01, map-get($carbon--theme--white, 'body-long-01')),
  body-short-02: if(global-variable-exists('body-short-02'), $body-short-02, map-get($carbon--theme--white, 'body-short-02')),
  body-long-02: if(global-variable-exists('body-long-02'), $body-long-02, map-get($carbon--theme--white, 'body-long-02')),
  code-01: if(global-variable-exists('code-01'), $code-01, map-get($carbon--theme--white, 'code-01')),
  code-02: if(global-variable-exists('code-02'), $code-02, map-get($carbon--theme--white, 'code-02')),
  heading-01: if(global-variable-exists('heading-01'), $heading-01, map-get($carbon--theme--white, 'heading-01')),
  productive-heading-01: if(global-variable-exists('productive-heading-01'), $productive-heading-01, map-get($carbon--theme--white, 'productive-heading-01')),
  heading-02: if(global-variable-exists('heading-02'), $heading-02, map-get($carbon--theme--white, 'heading-02')),
  productive-heading-02: if(global-variable-exists('productive-heading-02'), $productive-heading-02, map-get($carbon--theme--white, 'productive-heading-02')),
  productive-heading-03: if(global-variable-exists('productive-heading-03'), $productive-heading-03, map-get($carbon--theme--white, 'productive-heading-03')),
  productive-heading-04: if(global-variable-exists('productive-heading-04'), $productive-heading-04, map-get($carbon--theme--white, 'productive-heading-04')),
  productive-heading-05: if(global-variable-exists('productive-heading-05'), $productive-heading-05, map-get($carbon--theme--white, 'productive-heading-05')),
  productive-heading-06: if(global-variable-exists('productive-heading-06'), $productive-heading-06, map-get($carbon--theme--white, 'productive-heading-06')),
  productive-heading-07: if(global-variable-exists('productive-heading-07'), $productive-heading-07, map-get($carbon--theme--white, 'productive-heading-07')),
  expressive-heading-01: if(global-variable-exists('expressive-heading-01'), $expressive-heading-01, map-get($carbon--theme--white, 'expressive-heading-01')),
  expressive-heading-02: if(global-variable-exists('expressive-heading-02'), $expressive-heading-02, map-get($carbon--theme--white, 'expressive-heading-02')),
  expressive-heading-03: if(global-variable-exists('expressive-heading-03'), $expressive-heading-03, map-get($carbon--theme--white, 'expressive-heading-03')),
  expressive-heading-04: if(global-variable-exists('expressive-heading-04'), $expressive-heading-04, map-get($carbon--theme--white, 'expressive-heading-04')),
  expressive-heading-05: if(global-variable-exists('expressive-heading-05'), $expressive-heading-05, map-get($carbon--theme--white, 'expressive-heading-05')),
  expressive-heading-06: if(global-variable-exists('expressive-heading-06'), $expressive-heading-06, map-get($carbon--theme--white, 'expressive-heading-06')),
  expressive-paragraph-01: if(global-variable-exists('expressive-paragraph-01'), $expressive-paragraph-01, map-get($carbon--theme--white, 'expressive-paragraph-01')),
  quotation-01: if(global-variable-exists('quotation-01'), $quotation-01, map-get($carbon--theme--white, 'quotation-01')),
  quotation-02: if(global-variable-exists('quotation-02'), $quotation-02, map-get($carbon--theme--white, 'quotation-02')),
  display-01: if(global-variable-exists('display-01'), $display-01, map-get($carbon--theme--white, 'display-01')),
  display-02: if(global-variable-exists('display-02'), $display-02, map-get($carbon--theme--white, 'display-02')),
  display-03: if(global-variable-exists('display-03'), $display-03, map-get($carbon--theme--white, 'display-03')),
  display-04: if(global-variable-exists('display-04'), $display-04, map-get($carbon--theme--white, 'display-04')),
  spacing-01: if(global-variable-exists('spacing-01'), $spacing-01, map-get($carbon--theme--white, 'spacing-01')),
  spacing-02: if(global-variable-exists('spacing-02'), $spacing-02, map-get($carbon--theme--white, 'spacing-02')),
  spacing-03: if(global-variable-exists('spacing-03'), $spacing-03, map-get($carbon--theme--white, 'spacing-03')),
  spacing-04: if(global-variable-exists('spacing-04'), $spacing-04, map-get($carbon--theme--white, 'spacing-04')),
  spacing-05: if(global-variable-exists('spacing-05'), $spacing-05, map-get($carbon--theme--white, 'spacing-05')),
  spacing-06: if(global-variable-exists('spacing-06'), $spacing-06, map-get($carbon--theme--white, 'spacing-06')),
  spacing-07: if(global-variable-exists('spacing-07'), $spacing-07, map-get($carbon--theme--white, 'spacing-07')),
  spacing-08: if(global-variable-exists('spacing-08'), $spacing-08, map-get($carbon--theme--white, 'spacing-08')),
  spacing-09: if(global-variable-exists('spacing-09'), $spacing-09, map-get($carbon--theme--white, 'spacing-09')),
  spacing-10: if(global-variable-exists('spacing-10'), $spacing-10, map-get($carbon--theme--white, 'spacing-10')),
  spacing-11: if(global-variable-exists('spacing-11'), $spacing-11, map-get($carbon--theme--white, 'spacing-11')),
  spacing-12: if(global-variable-exists('spacing-12'), $spacing-12, map-get($carbon--theme--white, 'spacing-12')),
  fluid-spacing-01: if(global-variable-exists('fluid-spacing-01'), $fluid-spacing-01, map-get($carbon--theme--white, 'fluid-spacing-01')),
  fluid-spacing-02: if(global-variable-exists('fluid-spacing-02'), $fluid-spacing-02, map-get($carbon--theme--white, 'fluid-spacing-02')),
  fluid-spacing-03: if(global-variable-exists('fluid-spacing-03'), $fluid-spacing-03, map-get($carbon--theme--white, 'fluid-spacing-03')),
  fluid-spacing-04: if(global-variable-exists('fluid-spacing-04'), $fluid-spacing-04, map-get($carbon--theme--white, 'fluid-spacing-04')),
  layout-01: if(global-variable-exists('layout-01'), $layout-01, map-get($carbon--theme--white, 'layout-01')),
  layout-02: if(global-variable-exists('layout-02'), $layout-02, map-get($carbon--theme--white, 'layout-02')),
  layout-03: if(global-variable-exists('layout-03'), $layout-03, map-get($carbon--theme--white, 'layout-03')),
  layout-04: if(global-variable-exists('layout-04'), $layout-04, map-get($carbon--theme--white, 'layout-04')),
  layout-05: if(global-variable-exists('layout-05'), $layout-05, map-get($carbon--theme--white, 'layout-05')),
  layout-06: if(global-variable-exists('layout-06'), $layout-06, map-get($carbon--theme--white, 'layout-06')),
  layout-07: if(global-variable-exists('layout-07'), $layout-07, map-get($carbon--theme--white, 'layout-07')),
  container-01: if(global-variable-exists('container-01'), $container-01, map-get($carbon--theme--white, 'container-01')),
  container-02: if(global-variable-exists('container-02'), $container-02, map-get($carbon--theme--white, 'container-02')),
  container-03: if(global-variable-exists('container-03'), $container-03, map-get($carbon--theme--white, 'container-03')),
  container-04: if(global-variable-exists('container-04'), $container-04, map-get($carbon--theme--white, 'container-04')),
  container-05: if(global-variable-exists('container-05'), $container-05, map-get($carbon--theme--white, 'container-05')),
  icon-size-01: if(global-variable-exists('icon-size-01'), $icon-size-01, map-get($carbon--theme--white, 'icon-size-01')),
  icon-size-02: if(global-variable-exists('icon-size-02'), $icon-size-02, map-get($carbon--theme--white, 'icon-size-02')),
);

Group: @carbon/themes
Type: Map
Used by:
- carbon--theme [mixin]

✅interactive-01 [variable]

Primary interactive color; Primary buttons

Source code

$interactive-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'interactive-01'
    ),
  map-get($carbon--theme, 'interactive-01'),
  #0f62fe
);

Group: @carbon/themes
Type: {undefined}
Aliased:
- brand-01
Used by:
- carbon--theme [mixin]

✅interactive-02 [variable]

Secondary interactive color; Secondary button

Source code

$interactive-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'interactive-02'
    ),
  map-get($carbon--theme, 'interactive-02'),
  #393939
);

Group: @carbon/themes
Type: {undefined}
Aliased:
- brand-02
Used by:
- carbon--theme [mixin]

✅interactive-03 [variable]

4.5:1 AA contrast; Tertiary button

Source code

$interactive-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'interactive-03'
    ),
  map-get($carbon--theme, 'interactive-03'),
  #0f62fe
);

Group: @carbon/themes
Type: {undefined}
Aliased:
- brand-03
Used by:
- carbon--theme [mixin]

✅interactive-04 [variable]

3:1 AA contrast; Selected elements; Active elements; Accent icons

Source code

$interactive-04: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'interactive-04'
    ),
  map-get($carbon--theme, 'interactive-04'),
  #0f62fe
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅ui-background [variable]

Default page background

Source code

$ui-background: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'ui-background'
    ),
  map-get($carbon--theme, 'ui-background'),
  #ffffff
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅ui-01 [variable]

Primary container background; Secondary page background

Source code

$ui-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'ui-01'
    ),
  map-get($carbon--theme, 'ui-01'),
  #f4f4f4
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅ui-02 [variable]

Primary page background; Secondary container background

Source code

$ui-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'ui-02'
    ),
  map-get($carbon--theme, 'ui-02'),
  #ffffff
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅ui-03 [variable]

Subtle border; Tertiary background color

Source code

$ui-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'ui-03'
    ),
  map-get($carbon--theme, 'ui-03'),
  #e0e0e0
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅ui-04 [variable]

3:1 AA element contrast; Medium contrast border

Source code

$ui-04: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'ui-04'
    ),
  map-get($carbon--theme, 'ui-04'),
  #8d8d8d
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅ui-05 [variable]

4.5:1 AA element contrast; High contrast border; Emphasis elements

Source code

$ui-05: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'ui-05'
    ),
  map-get($carbon--theme, 'ui-05'),
  #161616
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅text-01 [variable]

Primary text; Body copy; Headers; Hover text color for $text-02

Source code

$text-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'text-01'
    ),
  map-get($carbon--theme, 'text-01'),
  #161616
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅text-02 [variable]

Secondary text; Input labels; Help text

Source code

$text-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'text-02'
    ),
  map-get($carbon--theme, 'text-02'),
  #525252
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅text-03 [variable]

Placeholder text

Source code

$text-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'text-03'
    ),
  map-get($carbon--theme, 'text-03'),
  #a8a8a8
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅text-04 [variable]

Text on interactive colors

Source code

$text-04: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'text-04'
    ),
  map-get($carbon--theme, 'text-04'),
  #ffffff
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅text-05 [variable]

Source code

$text-05: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'text-05'
    ),
  map-get($carbon--theme, 'text-05'),
  #6f6f6f
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅text-error [variable]

Source code

$text-error: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'text-error'
    ),
  map-get($carbon--theme, 'text-error'),
  #da1e28
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅icon-01 [variable]

Primary icons

Source code

$icon-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'icon-01'
    ),
  map-get($carbon--theme, 'icon-01'),
  #161616
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅icon-02 [variable]

Secondary icons

Source code

$icon-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'icon-02'
    ),
  map-get($carbon--theme, 'icon-02'),
  #525252
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅icon-03 [variable]

Tertiary icons; Icons on interactive colors; Icons on non-ui colors

Source code

$icon-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'icon-03'
    ),
  map-get($carbon--theme, 'icon-03'),
  #ffffff
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅link-01 [variable]

Primary links; Ghost button

Source code

$link-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'link-01'
    ),
  map-get($carbon--theme, 'link-01'),
  #0f62fe
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅inverse-link [variable]

Source code

$inverse-link: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'inverse-link'
    ),
  map-get($carbon--theme, 'inverse-link'),
  #78a9ff
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅field-01 [variable]

Default input fields; Field color on $ui-backgrounds

Source code

$field-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'field-01'
    ),
  map-get($carbon--theme, 'field-01'),
  #f4f4f4
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅field-02 [variable]

Input field color on $ui-02 backgrounds

Source code

$field-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'field-02'
    ),
  map-get($carbon--theme, 'field-02'),
  #ffffff
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅inverse-01 [variable]

Inverse text color; Inverse icon color

Source code

$inverse-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'inverse-01'
    ),
  map-get($carbon--theme, 'inverse-01'),
  #ffffff
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅inverse-02 [variable]

High contrast backgrounds; High contrast elements

Source code

$inverse-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'inverse-02'
    ),
  map-get($carbon--theme, 'inverse-02'),
  #393939
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅support-01 [variable]

Error

Source code

$support-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'support-01'
    ),
  map-get($carbon--theme, 'support-01'),
  #da1e28
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅support-02 [variable]

Success

Source code

$support-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'support-02'
    ),
  map-get($carbon--theme, 'support-02'),
  #24a148
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅support-03 [variable]

Warning

Source code

$support-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'support-03'
    ),
  map-get($carbon--theme, 'support-03'),
  #f1c21b
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅support-04 [variable]

Information

Source code

$support-04: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'support-04'
    ),
  map-get($carbon--theme, 'support-04'),
  #0043ce
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅inverse-support-01 [variable]

Error on high contrast backgrounds

Source code

$inverse-support-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'inverse-support-01'
    ),
  map-get($carbon--theme, 'inverse-support-01'),
  #fa4d56
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅inverse-support-02 [variable]

Success on high contrast backgrounds

Source code

$inverse-support-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'inverse-support-02'
    ),
  map-get($carbon--theme, 'inverse-support-02'),
  #42be65
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅inverse-support-03 [variable]

Warning on high contrast backgrounds

Source code

$inverse-support-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'inverse-support-03'
    ),
  map-get($carbon--theme, 'inverse-support-03'),
  #f1c21b
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅inverse-support-04 [variable]

Information on high contrast backgrounds

Source code

$inverse-support-04: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'inverse-support-04'
    ),
  map-get($carbon--theme, 'inverse-support-04'),
  #4589ff
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅overlay-01 [variable]

Background overlay

Source code

$overlay-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'overlay-01'
    ),
  map-get($carbon--theme, 'overlay-01'),
  rgba(22, 22, 22, 0.5)
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅danger-01 [variable]

Source code

$danger-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'danger-01'
    ),
  map-get($carbon--theme, 'danger-01'),
  #da1e28
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅danger-02 [variable]

Source code

$danger-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'danger-02'
    ),
  map-get($carbon--theme, 'danger-02'),
  #da1e28
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅focus [variable]

Focus border; Focus underline

Source code

$focus: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'focus'
    ),
  map-get($carbon--theme, 'focus'),
  #0f62fe
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅inverse-focus-ui [variable]

Source code

$inverse-focus-ui: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'inverse-focus-ui'
    ),
  map-get($carbon--theme, 'inverse-focus-ui'),
  #ffffff
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅hover-primary [variable]

$interactive-01 hover

Source code

$hover-primary: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'hover-primary'
    ),
  map-get($carbon--theme, 'hover-primary'),
  #0353e9
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅active-primary [variable]

$interactive-01 active

Source code

$active-primary: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'active-primary'
    ),
  map-get($carbon--theme, 'active-primary'),
  #002d9c
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅hover-primary-text [variable]

$interactive-01 text hover

Source code

$hover-primary-text: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'hover-primary-text'
    ),
  map-get($carbon--theme, 'hover-primary-text'),
  #0043ce
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅hover-secondary [variable]

$interactive-02 hover

Source code

$hover-secondary: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'hover-secondary'
    ),
  map-get($carbon--theme, 'hover-secondary'),
  #4c4c4c
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅active-secondary [variable]

$interactive-02 active; $inverse-01 active

Source code

$active-secondary: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'active-secondary'
    ),
  map-get($carbon--theme, 'active-secondary'),
  #6f6f6f
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅hover-tertiary [variable]

$interactive-03 hover; $inverse-01 hover

Source code

$hover-tertiary: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'hover-tertiary'
    ),
  map-get($carbon--theme, 'hover-tertiary'),
  #0353e9
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅active-tertiary [variable]

$interactive-03 active

Source code

$active-tertiary: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'active-tertiary'
    ),
  map-get($carbon--theme, 'active-tertiary'),
  #002d9c
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅hover-ui [variable]

$ui-01 hover; $ui-02 hover; Transparent background hover

Source code

$hover-ui: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'hover-ui'
    ),
  map-get($carbon--theme, 'hover-ui'),
  #e5e5e5
);

Group: @carbon/themes
Type: {undefined}
Aliased:
- hover-field
Used by:
- carbon--theme [mixin]

✅hover-light-ui [variable]

Source code

$hover-light-ui: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'hover-light-ui'
    ),
  map-get($carbon--theme, 'hover-light-ui'),
  #e5e5e5
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅hover-selected-ui [variable]

Data table selected row hover

Source code

$hover-selected-ui: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'hover-selected-ui'
    ),
  map-get($carbon--theme, 'hover-selected-ui'),
  #cacaca
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅active-ui [variable]

$ui-01 active; $ui-02 active

Source code

$active-ui: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'active-ui'
    ),
  map-get($carbon--theme, 'active-ui'),
  #c6c6c6
);

Group: @carbon/themes
Type: {undefined}
Aliased:
- active-01
Used by:
- carbon--theme [mixin]

✅active-light-ui [variable]

Source code

$active-light-ui: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'active-light-ui'
    ),
  map-get($carbon--theme, 'active-light-ui'),
  #c6c6c6
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅selected-ui [variable]

Selected UI elements

Source code

$selected-ui: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'selected-ui'
    ),
  map-get($carbon--theme, 'selected-ui'),
  #e0e0e0
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅selected-light-ui [variable]

Source code

$selected-light-ui: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'selected-light-ui'
    ),
  map-get($carbon--theme, 'selected-light-ui'),
  #e0e0e0
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅inverse-hover-ui [variable]

Source code

$inverse-hover-ui: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'inverse-hover-ui'
    ),
  map-get($carbon--theme, 'inverse-hover-ui'),
  #4c4c4c
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅hover-danger [variable]

Danger hover; $support-01 hover

Source code

$hover-danger: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'hover-danger'
    ),
  map-get($carbon--theme, 'hover-danger'),
  #b81921
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅active-danger [variable]

Danger active; $support-01 active

Source code

$active-danger: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'active-danger'
    ),
  map-get($carbon--theme, 'active-danger'),
  #750e13
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅hover-row [variable]

Row hover

Source code

$hover-row: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'hover-row'
    ),
  map-get($carbon--theme, 'hover-row'),
  #e5e5e5
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅visited-link [variable]

Visited links

Source code

$visited-link: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'visited-link'
    ),
  map-get($carbon--theme, 'visited-link'),
  #8a3ffc
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅disabled-01 [variable]

Disabled fields; Disabled backgrounds; Disabled border

Source code

$disabled-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'disabled-01'
    ),
  map-get($carbon--theme, 'disabled-01'),
  #f4f4f4
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅disabled-02 [variable]

Disabled elements on $disabled-01; Disabled label; Disabled text on $disabled-01; Disabled icons; Disabled border

Source code

$disabled-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'disabled-02'
    ),
  map-get($carbon--theme, 'disabled-02'),
  #c6c6c6
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅disabled-03 [variable]

Disabled text on $disabled-02; Disabled icons on $disabled-02

Source code

$disabled-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'disabled-03'
    ),
  map-get($carbon--theme, 'disabled-03'),
  #8d8d8d
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅highlight [variable]

$interactive-01 high light

Source code

$highlight: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'highlight'
    ),
  map-get($carbon--theme, 'highlight'),
  #d0e2ff
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅decorative-01 [variable]

Source code

$decorative-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'decorative-01'
    ),
  map-get($carbon--theme, 'decorative-01'),
  #e0e0e0
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅button-separator [variable]

Source code

$button-separator: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'button-separator'
    ),
  map-get($carbon--theme, 'button-separator'),
  #e0e0e0
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅skeleton-01 [variable]

Skeleton state of graphics

Source code

$skeleton-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'skeleton-01'
    ),
  map-get($carbon--theme, 'skeleton-01'),
  #e5e5e5
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅skeleton-02 [variable]

Skeleton state of text

Source code

$skeleton-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'skeleton-02'
    ),
  map-get($carbon--theme, 'skeleton-02'),
  #c6c6c6
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅⚠️brand-01 [variable]

Source code

$brand-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'brand-01'
    ),
  map-get($carbon--theme, 'brand-01'),
  #0f62fe
);

Group: @carbon/themes
Type: {undefined}
Alias: interactive-01
Used by:
- carbon--theme [mixin]
Deprecated: This may not be available in future releases

✅⚠️brand-02 [variable]

Source code

$brand-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'brand-02'
    ),
  map-get($carbon--theme, 'brand-02'),
  #393939
);

Group: @carbon/themes
Type: {undefined}
Alias: interactive-02
Used by:
- carbon--theme [mixin]
Deprecated: This may not be available in future releases

✅⚠️brand-03 [variable]

Source code

$brand-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'brand-03'
    ),
  map-get($carbon--theme, 'brand-03'),
  #0f62fe
);

Group: @carbon/themes
Type: {undefined}
Alias: interactive-03
Used by:
- carbon--theme [mixin]
Deprecated: This may not be available in future releases

✅⚠️active-01 [variable]

Source code

$active-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'active-01'
    ),
  map-get($carbon--theme, 'active-01'),
  #c6c6c6
);

Group: @carbon/themes
Type: {undefined}
Alias: active-ui
Used by:
- carbon--theme [mixin]
Deprecated: This may not be available in future releases

✅⚠️hover-field [variable]

Source code

$hover-field: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'hover-field'
    ),
  map-get($carbon--theme, 'hover-field'),
  #e5e5e5
);

Group: @carbon/themes
Type: {undefined}
Alias: hover-ui
Used by:
- carbon--theme [mixin]
Deprecated: This may not be available in future releases

✅danger [variable]

Source code

$danger: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'danger'
    ),
  map-get($carbon--theme, 'danger'),
  #da1e28
);

Group: @carbon/themes
Type: {undefined}
Used by:
- carbon--theme [mixin]

✅caption-01 [variable]

Source code

$caption-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'caption-01'
    ),
  map-get($carbon--theme, 'caption-01'),
  (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1.34,
    letter-spacing: 0.32px,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅label-01 [variable]

Source code

$label-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'label-01'
    ),
  map-get($carbon--theme, 'label-01'),
  (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1.34,
    letter-spacing: 0.32px,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅helper-text-01 [variable]

Source code

$helper-text-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'helper-text-01'
    ),
  map-get($carbon--theme, 'helper-text-01'),
  (
    font-size: 0.75rem,
    line-height: 1.34,
    letter-spacing: 0.32px,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅body-short-01 [variable]

Source code

$body-short-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'body-short-01'
    ),
  map-get($carbon--theme, 'body-short-01'),
  (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.29,
    letter-spacing: 0.16px,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅body-long-01 [variable]

Source code

$body-long-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'body-long-01'
    ),
  map-get($carbon--theme, 'body-long-01'),
  (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.43,
    letter-spacing: 0.16px,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅body-short-02 [variable]

Source code

$body-short-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'body-short-02'
    ),
  map-get($carbon--theme, 'body-short-02'),
  (
    font-size: 1rem,
    font-weight: 400,
    line-height: 1.375,
    letter-spacing: 0,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅body-long-02 [variable]

Source code

$body-long-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'body-long-02'
    ),
  map-get($carbon--theme, 'body-long-02'),
  (
    font-size: 1rem,
    font-weight: 400,
    line-height: 1.5,
    letter-spacing: 0,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅code-01 [variable]

Source code

$code-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'code-01'
    ),
  map-get($carbon--theme, 'code-01'),
  (
    font-family: unquote("'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"),
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1.34,
    letter-spacing: 0.32px,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅code-02 [variable]

Source code

$code-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'code-02'
    ),
  map-get($carbon--theme, 'code-02'),
  (
    font-family: unquote("'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"),
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.43,
    letter-spacing: 0.32px,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅heading-01 [variable]

Source code

$heading-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'heading-01'
    ),
  map-get($carbon--theme, 'heading-01'),
  (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.29,
    letter-spacing: 0.16px,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅productive-heading-01 [variable]

Source code

$productive-heading-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'productive-heading-01'
    ),
  map-get($carbon--theme, 'productive-heading-01'),
  (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.29,
    letter-spacing: 0.16px,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅heading-02 [variable]

Source code

$heading-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'heading-02'
    ),
  map-get($carbon--theme, 'heading-02'),
  (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375,
    letter-spacing: 0,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅productive-heading-02 [variable]

Source code

$productive-heading-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'productive-heading-02'
    ),
  map-get($carbon--theme, 'productive-heading-02'),
  (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375,
    letter-spacing: 0,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅productive-heading-03 [variable]

Source code

$productive-heading-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'productive-heading-03'
    ),
  map-get($carbon--theme, 'productive-heading-03'),
  (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 1.4,
    letter-spacing: 0,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅productive-heading-04 [variable]

Source code

$productive-heading-04: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'productive-heading-04'
    ),
  map-get($carbon--theme, 'productive-heading-04'),
  (
    font-size: 1.75rem,
    font-weight: 400,
    line-height: 1.29,
    letter-spacing: 0,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅productive-heading-05 [variable]

Source code

$productive-heading-05: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'productive-heading-05'
    ),
  map-get($carbon--theme, 'productive-heading-05'),
  (
    font-size: 2rem,
    font-weight: 400,
    line-height: 1.25,
    letter-spacing: 0,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅productive-heading-06 [variable]

Source code

$productive-heading-06: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'productive-heading-06'
    ),
  map-get($carbon--theme, 'productive-heading-06'),
  (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 1.199,
    letter-spacing: 0,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅productive-heading-07 [variable]

Source code

$productive-heading-07: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'productive-heading-07'
    ),
  map-get($carbon--theme, 'productive-heading-07'),
  (
    font-size: 3.375rem,
    font-weight: 300,
    line-height: 1.19,
    letter-spacing: 0,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅expressive-heading-01 [variable]

Source code

$expressive-heading-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'expressive-heading-01'
    ),
  map-get($carbon--theme, 'expressive-heading-01'),
  (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.25,
    letter-spacing: 0.16px,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅expressive-heading-02 [variable]

Source code

$expressive-heading-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'expressive-heading-02'
    ),
  map-get($carbon--theme, 'expressive-heading-02'),
  (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.5,
    letter-spacing: 0,
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅expressive-heading-03 [variable]

Source code

$expressive-heading-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'expressive-heading-03'
    ),
  map-get($carbon--theme, 'expressive-heading-03'),
  (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 1.4,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.25rem,
        line-height: 1.25,
      ),
      max: (
        font-size: 1.5rem,
        line-height: 1.334,
      ),
    ),
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅expressive-heading-04 [variable]

Source code

$expressive-heading-04: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'expressive-heading-04'
    ),
  map-get($carbon--theme, 'expressive-heading-04'),
  (
    font-size: 1.75rem,
    font-weight: 400,
    line-height: 1.29,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.75rem,
        line-height: 1.25,
      ),
      max: (
        font-size: 2rem,
      ),
    ),
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅expressive-heading-05 [variable]

Source code

$expressive-heading-05: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'expressive-heading-05'
    ),
  map-get($carbon--theme, 'expressive-heading-05'),
  (
    font-size: 2rem,
    font-weight: 400,
    line-height: 1.25,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 300,
        line-height: 1.22,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 300,
        line-height: 1.19,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 300,
        line-height: 1.17,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 300,
        letter-spacing: 0,
      ),
    ),
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅expressive-heading-06 [variable]

Source code

$expressive-heading-06: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'expressive-heading-06'
    ),
  map-get($carbon--theme, 'expressive-heading-06'),
  (
    font-size: 2rem,
    font-weight: 600,
    line-height: 1.25,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 600,
        line-height: 1.22,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 600,
        line-height: 1.19,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 600,
        line-height: 1.17,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 600,
        letter-spacing: 0,
      ),
    ),
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅expressive-paragraph-01 [variable]

Source code

$expressive-paragraph-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'expressive-paragraph-01'
    ),
  map-get($carbon--theme, 'expressive-paragraph-01'),
  (
    font-size: 1.5rem,
    font-weight: 300,
    line-height: 1.334,
    letter-spacing: 0,
    lg: (
      font-size: 1.75rem,
      line-height: 1.29,
    ),
    max: (
      font-size: 2rem,
      line-height: 1.25,
    ),
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅quotation-01 [variable]

Source code

$quotation-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'quotation-01'
    ),
  map-get($carbon--theme, 'quotation-01'),
  (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 1.3,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 1.25rem,
        font-weight: 400,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 1.5rem,
        font-weight: 400,
        line-height: 1.334,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 1.75rem,
        font-weight: 400,
        line-height: 1.29,
        letter-spacing: 0,
      ),
      max: (
        font-size: 2rem,
        font-weight: 400,
        line-height: 1.25,
        letter-spacing: 0,
      ),
    ),
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅quotation-02 [variable]

Source code

$quotation-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'quotation-02'
    ),
  map-get($carbon--theme, 'quotation-02'),
  (
    font-size: 2rem,
    font-weight: 300,
    line-height: 1.25,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        line-height: 1.22,
      ),
      lg: (
        font-size: 2.625rem,
        line-height: 1.19,
      ),
      xlg: (
        font-size: 3rem,
        line-height: 1.17,
      ),
      max: (
        font-size: 3.75rem,
      ),
    ),
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅display-01 [variable]

Source code

$display-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'display-01'
    ),
  map-get($carbon--theme, 'display-01'),
  (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 1.19,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 1.17,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 1.13,
      ),
    ),
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅display-02 [variable]

Source code

$display-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'display-02'
    ),
  map-get($carbon--theme, 'display-02'),
  (
    font-size: 2.625rem,
    font-weight: 600,
    line-height: 1.19,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 1.16,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 1.13,
      ),
    ),
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅display-03 [variable]

Source code

$display-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'display-03'
    ),
  map-get($carbon--theme, 'display-03'),
  (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 1.19,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 1.15,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 1.11,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 1.07,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 1.05,
        letter-spacing: -0.96px,
      ),
    ),
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅display-04 [variable]

Source code

$display-04: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'display-04'
    ),
  map-get($carbon--theme, 'display-04'),
  (
    font-size: 2.625rem,
    font-weight: 600,
    line-height: 1.19,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 1.15,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 1.11,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 1.07,
        letter-spacing: -0.64px,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 1.05,
        letter-spacing: -0.96px,
      ),
    ),
  )
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅spacing-01 [variable]

Source code

$spacing-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'spacing-01'
    ),
  map-get($carbon--theme, 'spacing-01'),
  0.125rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅spacing-02 [variable]

Source code

$spacing-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'spacing-02'
    ),
  map-get($carbon--theme, 'spacing-02'),
  0.25rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅spacing-03 [variable]

Source code

$spacing-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'spacing-03'
    ),
  map-get($carbon--theme, 'spacing-03'),
  0.5rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅spacing-04 [variable]

Source code

$spacing-04: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'spacing-04'
    ),
  map-get($carbon--theme, 'spacing-04'),
  0.75rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅spacing-05 [variable]

Source code

$spacing-05: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'spacing-05'
    ),
  map-get($carbon--theme, 'spacing-05'),
  1rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅spacing-06 [variable]

Source code

$spacing-06: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'spacing-06'
    ),
  map-get($carbon--theme, 'spacing-06'),
  1.5rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅spacing-07 [variable]

Source code

$spacing-07: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'spacing-07'
    ),
  map-get($carbon--theme, 'spacing-07'),
  2rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅spacing-08 [variable]

Source code

$spacing-08: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'spacing-08'
    ),
  map-get($carbon--theme, 'spacing-08'),
  2.5rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅spacing-09 [variable]

Source code

$spacing-09: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'spacing-09'
    ),
  map-get($carbon--theme, 'spacing-09'),
  3rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅spacing-10 [variable]

Source code

$spacing-10: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'spacing-10'
    ),
  map-get($carbon--theme, 'spacing-10'),
  4rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅spacing-11 [variable]

Source code

$spacing-11: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'spacing-11'
    ),
  map-get($carbon--theme, 'spacing-11'),
  5rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅spacing-12 [variable]

Source code

$spacing-12: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'spacing-12'
    ),
  map-get($carbon--theme, 'spacing-12'),
  6rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅fluid-spacing-01 [variable]

Source code

$fluid-spacing-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'fluid-spacing-01'
    ),
  map-get($carbon--theme, 'fluid-spacing-01'),
  0
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅fluid-spacing-02 [variable]

Source code

$fluid-spacing-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'fluid-spacing-02'
    ),
  map-get($carbon--theme, 'fluid-spacing-02'),
  2vw
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅fluid-spacing-03 [variable]

Source code

$fluid-spacing-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'fluid-spacing-03'
    ),
  map-get($carbon--theme, 'fluid-spacing-03'),
  5vw
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅fluid-spacing-04 [variable]

Source code

$fluid-spacing-04: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'fluid-spacing-04'
    ),
  map-get($carbon--theme, 'fluid-spacing-04'),
  10vw
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅layout-01 [variable]

Source code

$layout-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'layout-01'
    ),
  map-get($carbon--theme, 'layout-01'),
  1rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅layout-02 [variable]

Source code

$layout-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'layout-02'
    ),
  map-get($carbon--theme, 'layout-02'),
  1.5rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅layout-03 [variable]

Source code

$layout-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'layout-03'
    ),
  map-get($carbon--theme, 'layout-03'),
  2rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅layout-04 [variable]

Source code

$layout-04: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'layout-04'
    ),
  map-get($carbon--theme, 'layout-04'),
  3rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅layout-05 [variable]

Source code

$layout-05: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'layout-05'
    ),
  map-get($carbon--theme, 'layout-05'),
  4rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅layout-06 [variable]

Source code

$layout-06: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'layout-06'
    ),
  map-get($carbon--theme, 'layout-06'),
  6rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅layout-07 [variable]

Source code

$layout-07: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'layout-07'
    ),
  map-get($carbon--theme, 'layout-07'),
  10rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅container-01 [variable]

Source code

$container-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'container-01'
    ),
  map-get($carbon--theme, 'container-01'),
  1.5rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅container-02 [variable]

Source code

$container-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'container-02'
    ),
  map-get($carbon--theme, 'container-02'),
  2rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅container-03 [variable]

Source code

$container-03: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'container-03'
    ),
  map-get($carbon--theme, 'container-03'),
  2.5rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅container-04 [variable]

Source code

$container-04: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'container-04'
    ),
  map-get($carbon--theme, 'container-04'),
  3rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅container-05 [variable]

Source code

$container-05: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'container-05'
    ),
  map-get($carbon--theme, 'container-05'),
  4rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅icon-size-01 [variable]

Source code

$icon-size-01: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'icon-size-01'
    ),
  map-get($carbon--theme, 'icon-size-01'),
  1rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

✅icon-size-02 [variable]

Source code

$icon-size-02: if(
  global-variable-exists('carbon--theme') and map-has-key(
      $carbon--theme,
      'icon-size-02'
    ),
  map-get($carbon--theme, 'icon-size-02'),
  1.25rem
);

Group: @carbon/themes
Type: {Number}
Used by:
- carbon--theme [mixin]

Files

sass.md

Latest commit

History

sass.md

File metadata and controls

Sass API

@carbon/themes

❌custom-property-prefix [variable]

❌custom-property [mixin]

❌should-emit [function]

✅carbon--theme [mixin]

✅carbon--theme--g10 [variable]

✅carbon--theme--g90 [variable]

✅carbon--theme--g100 [variable]

✅carbon--theme--v9 [variable]

✅carbon--theme [variable]

✅interactive-01 [variable]

✅interactive-02 [variable]

✅interactive-03 [variable]

✅interactive-04 [variable]

✅ui-background [variable]

✅ui-01 [variable]

✅ui-02 [variable]

✅ui-03 [variable]

✅ui-04 [variable]

✅ui-05 [variable]

✅text-01 [variable]

✅text-02 [variable]

✅text-03 [variable]

✅text-04 [variable]

✅text-05 [variable]

✅text-error [variable]

✅icon-01 [variable]

✅icon-02 [variable]

✅icon-03 [variable]

✅link-01 [variable]

✅inverse-link [variable]

✅field-01 [variable]

✅field-02 [variable]

✅inverse-01 [variable]

✅inverse-02 [variable]

✅support-01 [variable]

✅support-02 [variable]

✅support-03 [variable]

✅support-04 [variable]

✅inverse-support-01 [variable]

✅inverse-support-02 [variable]

✅inverse-support-03 [variable]

✅inverse-support-04 [variable]

✅overlay-01 [variable]

✅danger-01 [variable]

✅danger-02 [variable]

✅focus [variable]

✅inverse-focus-ui [variable]

✅hover-primary [variable]

✅active-primary [variable]

✅hover-primary-text [variable]

✅hover-secondary [variable]

✅active-secondary [variable]

✅hover-tertiary [variable]

✅active-tertiary [variable]

✅hover-ui [variable]

✅hover-light-ui [variable]

✅hover-selected-ui [variable]

✅active-ui [variable]

✅active-light-ui [variable]

✅selected-ui [variable]

✅selected-light-ui [variable]

✅inverse-hover-ui [variable]

✅hover-danger [variable]

✅active-danger [variable]

✅hover-row [variable]

✅visited-link [variable]

✅disabled-01 [variable]

✅disabled-02 [variable]

✅disabled-03 [variable]

✅highlight [variable]

✅decorative-01 [variable]

✅button-separator [variable]