sass.md

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
  • ❌custom-property-prefix [variable]
  • ❌custom-property [mixin]
  • ❌should-emit [function]
  • ✅carbon--theme [mixin]
  • ✅carbon--theme--white [variable]
  • ✅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]
  • ✅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 [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]
  • ✅active-ui [variable]
  • ✅selected-ui [variable]
  • ✅hover-selected-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]
  • ✅skeleton-01 [variable]
  • ✅skeleton-02 [variable]
  • ✅⚠️brand-01 [variable]
  • ✅⚠️brand-02 [variable]
  • ✅⚠️brand-03 [variable]
  • ✅⚠️active-01 [variable]
  • ✅⚠️hover-field [variable]
  • ✅caption-01 [variable]
  • ✅label-01 [variable]
  • ✅helper-text-01 [variable]
  • ✅body-short-01 [variable]
  • ✅body-long-01 [variable]
  • ✅body-short-02 [variable]
  • ✅body-long-02 [variable]
  • ✅code-01 [variable]
  • ✅code-02 [variable]
  • ✅heading-01 [variable]
  • ✅productive-heading-01 [variable]
  • ✅heading-02 [variable]
  • ✅productive-heading-02 [variable]
  • ✅productive-heading-03 [variable]
  • ✅productive-heading-04 [variable]
  • ✅productive-heading-05 [variable]
  • ✅productive-heading-06 [variable]
  • ✅productive-heading-07 [variable]
  • ✅expressive-heading-01 [variable]
  • ✅expressive-heading-02 [variable]
  • ✅expressive-heading-03 [variable]
  • ✅expressive-heading-04 [variable]
  • ✅expressive-heading-05 [variable]
  • ✅expressive-heading-06 [variable]
  • ✅expressive-paragraph-01 [variable]
  • ✅quotation-01 [variable]
  • ✅quotation-02 [variable]
  • ✅display-01 [variable]
  • ✅display-02 [variable]
  • ✅display-03 [variable]
  • ✅display-04 [variable]

@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) {
  $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;
  $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: map-get($theme, 'danger') !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;
  $active-ui: map-get($theme, 'active-ui') !global;
  $selected-ui: map-get($theme, 'selected-ui') !global;
  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
  $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;
  $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;
  $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;

  @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;
    $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: var(
      --#{$custom-property-prefix}-danger,
      map-get($theme, 'danger')
    ) !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;
    $active-ui: var(
      --#{$custom-property-prefix}-active-ui,
      map-get($theme, 'active-ui')
    ) !global;
    $selected-ui: var(
      --#{$custom-property-prefix}-selected-ui,
      map-get($theme, 'selected-ui')
    ) !global;
    $hover-selected-ui: var(
      --#{$custom-property-prefix}-hover-selected-ui,
      map-get($theme, 'hover-selected-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;
    $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;
  }
  @if $emit-custom-properties == true {
    @if should-emit($theme, $carbon--theme, 'interactive-01', $emit-difference)
    {
      @include custom-property(
        'interactive-01',
        map-get($theme, 'interactive-01')
      );
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  @content;
  // Reset to default theme after apply in content
  @if $theme != $carbon--theme {
    @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:
  • custom-property [mixin]
  • should-emit [function]
  • 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]
  • 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 [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]
  • active-ui [variable]
  • selected-ui [variable]
  • hover-selected-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]
  • skeleton-01 [variable]
  • skeleton-02 [variable]
  • brand-01 [variable]
  • brand-02 [variable]
  • brand-03 [variable]
  • active-01 [variable]
  • hover-field [variable]
  • caption-01 [variable]
  • label-01 [variable]
  • helper-text-01 [variable]
  • body-short-01 [variable]
  • body-long-01 [variable]
  • body-short-02 [variable]
  • body-long-02 [variable]
  • code-01 [variable]
  • code-02 [variable]
  • heading-01 [variable]
  • productive-heading-01 [variable]
  • heading-02 [variable]
  • productive-heading-02 [variable]
  • productive-heading-03 [variable]
  • productive-heading-04 [variable]
  • productive-heading-05 [variable]
  • productive-heading-06 [variable]
  • productive-heading-07 [variable]
  • expressive-heading-01 [variable]
  • expressive-heading-02 [variable]
  • expressive-heading-03 [variable]
  • expressive-heading-04 [variable]
  • expressive-heading-05 [variable]
  • expressive-heading-06 [variable]
  • expressive-paragraph-01 [variable]
  • quotation-01 [variable]
  • quotation-02 [variable]
  • display-01 [variable]
  • display-02 [variable]
  • display-03 [variable]
  • display-04 [variable]
  • custom-property-prefix [variable]
  • carbon--theme [variable]

✅carbon--theme--white [variable]

Carbon's white color theme

Source code

$carbon--theme--white: (
  interactive-01: #0f62fe,
  interactive-02: #393939,
  interactive-03: #0f62fe,
  interactive-04: #0f62fe,
  ui-background: #ffffff,
  ui-01: #f4f4f4,
  ui-02: #ffffff,
  ui-03: #e0e0e0,
  ui-04: #8d8d8d,
  ui-05: #161616,
  text-01: #161616,
  text-02: #393939,
  text-03: #a8a8a8,
  text-04: #ffffff,
  text-05: #6f6f6f,
  icon-01: #161616,
  icon-02: #525252,
  icon-03: #ffffff,
  link-01: #0f62fe,
  inverse-link: #78a9ff,
  field-01: #f4f4f4,
  field-02: #ffffff,
  inverse-01: #ffffff,
  inverse-02: #393939,
  support-01: #da1e28,
  support-02: #24a148,
  support-03: #f1c21b,
  support-04: #0043ce,
  inverse-support-01: #fa4d56,
  inverse-support-02: #42be65,
  inverse-support-03: #f1c21b,
  inverse-support-04: #4589ff,
  overlay-01: rgba(22, 22, 22, 0.5),
  danger: #da1e28,
  focus: #0f62fe,
  inverse-focus-ui: #ffffff,
  hover-primary: #0353e9,
  active-primary: #002d9c,
  hover-primary-text: #0043ce,
  hover-secondary: #4c4c4c,
  active-secondary: #6f6f6f,
  hover-tertiary: #0353e9,
  active-tertiary: #002d9c,
  hover-ui: #e5e5e5,
  active-ui: #c6c6c6,
  selected-ui: #e0e0e0,
  inverse-hover-ui: #4c4c4c,
  hover-selected-ui: #cacaca,
  hover-danger: #ba1b23,
  active-danger: #750e13,
  hover-row: #e5e5e5,
  visited-link: #8a3ffc,
  disabled-01: #f4f4f4,
  disabled-02: #c6c6c6,
  disabled-03: #8d8d8d,
  highlight: #d0e2ff,
  skeleton-01: #e5e5e5,
  skeleton-02: #c6c6c6,
  brand-01: #0f62fe,
  brand-02: #393939,
  brand-03: #0f62fe,
  active-01: #c6c6c6,
  hover-field: #e5e5e5,
  caption-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  label-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  helper-text-01: (
    font-size: 0.75rem,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  body-short-01: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  body-long-01: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.25rem,
    letter-spacing: 0.16px,
  ),
  body-short-02: (
    font-size: 1rem,
    font-weight: 400,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  body-long-02: (
    font-size: 1rem,
    font-weight: 400,
    line-height: 1.5rem,
    letter-spacing: 0,
  ),
  code-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  code-02: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.25rem,
    letter-spacing: 0.32px,
  ),
  heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  productive-heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  productive-heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  productive-heading-03: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 1.625rem,
    letter-spacing: 0,
  ),
  productive-heading-04: (
    font-size: 1.75rem,
    font-weight: 400,
    line-height: 2.25rem,
    letter-spacing: 0,
  ),
  productive-heading-05: (
    font-size: 2rem,
    font-weight: 400,
    line-height: 2.5rem,
    letter-spacing: 0,
  ),
  productive-heading-06: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 3.125rem,
    letter-spacing: 0,
  ),
  productive-heading-07: (
    font-size: 3.375rem,
    font-weight: 300,
    line-height: 4rem,
    letter-spacing: 0,
  ),
  expressive-heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  expressive-heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  expressive-heading-03: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 130%,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.25rem,
        line-height: 125%,
      ),
      max: (
        font-size: 1.5rem,
      ),
    ),
  ),
  expressive-heading-04: (
    font-size: 1.75rem,
    font-weight: 400,
    line-height: 129%,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.75rem,
        line-height: 125%,
      ),
      max: (
        font-size: 2rem,
      ),
    ),
  ),
  expressive-heading-05: (
    font-size: 2rem,
    font-weight: 400,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 300,
        line-height: 122%,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 300,
        line-height: 119%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 300,
        line-height: 117%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 300,
        line-height: 4.375rem,
        letter-spacing: 0,
      ),
    ),
  ),
  expressive-heading-06: (
    font-size: 2rem,
    font-weight: 600,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 600,
        line-height: 122%,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 600,
        line-height: 119%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 600,
        line-height: 117%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 600,
        line-height: 4.375rem,
        letter-spacing: 0,
      ),
    ),
  ),
  expressive-paragraph-01: (
    font-size: 1.5rem,
    font-weight: 300,
    line-height: 125%,
    letter-spacing: 0,
    lg: (
      font-size: 1.75rem,
      line-height: 129%,
    ),
    max: (
      font-size: 2rem,
      line-height: 125%,
    ),
  ),
  quotation-01: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 130%,
    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: 125%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 1.75rem,
        font-weight: 400,
        line-height: 129%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 2rem,
        font-weight: 400,
        line-height: 125%,
        letter-spacing: 0,
      ),
    ),
  ),
  quotation-02: (
    font-size: 2rem,
    font-weight: 300,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        line-height: 122%,
      ),
      lg: (
        font-size: 2.625rem,
        line-height: 119%,
      ),
      xlg: (
        font-size: 3rem,
        line-height: 117%,
      ),
      max: (
        font-size: 3.75rem,
      ),
    ),
  ),
  display-01: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 117%,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 113%,
      ),
    ),
  ),
  display-02: (
    font-size: 2.625rem,
    font-weight: 600,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 116%,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 113%,
      ),
    ),
  ),
  display-03: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 115%,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 111%,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 107%,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 105%,
        letter-spacing: -0.96px,
      ),
    ),
  ),
  display-04: (
    font-size: 2.625rem,
    font-weight: 600,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 115%,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 111%,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 107%,
        letter-spacing: -0.64px,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 105%,
        letter-spacing: -0.96px,
      ),
    ),
  ),
);

• Group: @carbon/themes
• Type: Map
• Aliased:
  • carbon--theme

✅carbon--theme--g10 [variable]

Carbon's g10 color theme

Source code

$carbon--theme--g10: (
  interactive-01: #0f62fe,
  interactive-02: #393939,
  interactive-03: #0f62fe,
  interactive-04: #0f62fe,
  ui-background: #f4f4f4,
  ui-01: #ffffff,
  ui-02: #f4f4f4,
  ui-03: #e0e0e0,
  ui-04: #8d8d8d,
  ui-05: #161616,
  text-01: #161616,
  text-02: #393939,
  text-03: #a8a8a8,
  text-04: #ffffff,
  text-05: #6f6f6f,
  icon-01: #161616,
  icon-02: #525252,
  icon-03: #ffffff,
  link-01: #0f62fe,
  inverse-link: #78a9ff,
  field-01: #ffffff,
  field-02: #f4f4f4,
  inverse-01: #ffffff,
  inverse-02: #393939,
  support-01: #da1e28,
  support-02: #24a148,
  support-03: #f1c21b,
  support-04: #0043ce,
  inverse-support-01: #fa4d56,
  inverse-support-02: #42be65,
  inverse-support-03: #f1c21b,
  inverse-support-04: #4589ff,
  overlay-01: rgba(22, 22, 22, 0.5),
  danger: #da1e28,
  focus: #0f62fe,
  inverse-focus-ui: #ffffff,
  hover-primary: #0353e9,
  active-primary: #002d9c,
  hover-primary-text: #0043ce,
  hover-secondary: #4c4c4c,
  active-secondary: #6f6f6f,
  hover-tertiary: #0353e9,
  active-tertiary: #002d9c,
  hover-ui: #e5e5e5,
  active-ui: #c6c6c6,
  selected-ui: #e0e0e0,
  inverse-hover-ui: #4c4c4c,
  hover-selected-ui: #cacaca,
  hover-danger: #ba1b23,
  active-danger: #750e13,
  hover-row: #e5e5e5,
  visited-link: #8a3ffc,
  disabled-01: #ffffff,
  disabled-02: #c6c6c6,
  disabled-03: #8d8d8d,
  highlight: #d0e2ff,
  skeleton-01: #e5e5e5,
  skeleton-02: #c6c6c6,
  brand-01: #0f62fe,
  brand-02: #393939,
  brand-03: #0f62fe,
  active-01: #c6c6c6,
  hover-field: #e5e5e5,
  caption-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  label-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  helper-text-01: (
    font-size: 0.75rem,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  body-short-01: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  body-long-01: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.25rem,
    letter-spacing: 0.16px,
  ),
  body-short-02: (
    font-size: 1rem,
    font-weight: 400,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  body-long-02: (
    font-size: 1rem,
    font-weight: 400,
    line-height: 1.5rem,
    letter-spacing: 0,
  ),
  code-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  code-02: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.25rem,
    letter-spacing: 0.32px,
  ),
  heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  productive-heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  productive-heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  productive-heading-03: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 1.625rem,
    letter-spacing: 0,
  ),
  productive-heading-04: (
    font-size: 1.75rem,
    font-weight: 400,
    line-height: 2.25rem,
    letter-spacing: 0,
  ),
  productive-heading-05: (
    font-size: 2rem,
    font-weight: 400,
    line-height: 2.5rem,
    letter-spacing: 0,
  ),
  productive-heading-06: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 3.125rem,
    letter-spacing: 0,
  ),
  productive-heading-07: (
    font-size: 3.375rem,
    font-weight: 300,
    line-height: 4rem,
    letter-spacing: 0,
  ),
  expressive-heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  expressive-heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  expressive-heading-03: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 130%,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.25rem,
        line-height: 125%,
      ),
      max: (
        font-size: 1.5rem,
      ),
    ),
  ),
  expressive-heading-04: (
    font-size: 1.75rem,
    font-weight: 400,
    line-height: 129%,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.75rem,
        line-height: 125%,
      ),
      max: (
        font-size: 2rem,
      ),
    ),
  ),
  expressive-heading-05: (
    font-size: 2rem,
    font-weight: 400,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 300,
        line-height: 122%,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 300,
        line-height: 119%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 300,
        line-height: 117%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 300,
        line-height: 4.375rem,
        letter-spacing: 0,
      ),
    ),
  ),
  expressive-heading-06: (
    font-size: 2rem,
    font-weight: 600,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 600,
        line-height: 122%,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 600,
        line-height: 119%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 600,
        line-height: 117%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 600,
        line-height: 4.375rem,
        letter-spacing: 0,
      ),
    ),
  ),
  expressive-paragraph-01: (
    font-size: 1.5rem,
    font-weight: 300,
    line-height: 125%,
    letter-spacing: 0,
    lg: (
      font-size: 1.75rem,
      line-height: 129%,
    ),
    max: (
      font-size: 2rem,
      line-height: 125%,
    ),
  ),
  quotation-01: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 130%,
    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: 125%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 1.75rem,
        font-weight: 400,
        line-height: 129%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 2rem,
        font-weight: 400,
        line-height: 125%,
        letter-spacing: 0,
      ),
    ),
  ),
  quotation-02: (
    font-size: 2rem,
    font-weight: 300,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        line-height: 122%,
      ),
      lg: (
        font-size: 2.625rem,
        line-height: 119%,
      ),
      xlg: (
        font-size: 3rem,
        line-height: 117%,
      ),
      max: (
        font-size: 3.75rem,
      ),
    ),
  ),
  display-01: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 117%,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 113%,
      ),
    ),
  ),
  display-02: (
    font-size: 2.625rem,
    font-weight: 600,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 116%,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 113%,
      ),
    ),
  ),
  display-03: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 115%,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 111%,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 107%,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 105%,
        letter-spacing: -0.96px,
      ),
    ),
  ),
  display-04: (
    font-size: 2.625rem,
    font-weight: 600,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 115%,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 111%,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 107%,
        letter-spacing: -0.64px,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 105%,
        letter-spacing: -0.96px,
      ),
    ),
  ),
);

• Group: @carbon/themes
• Type: Map

✅carbon--theme--g90 [variable]

Carbon's g90 color theme

Source code

$carbon--theme--g90: (
  interactive-01: #0f62fe,
  interactive-02: #6f6f6f,
  interactive-03: #ffffff,
  interactive-04: #4589ff,
  ui-background: #262626,
  ui-01: #393939,
  ui-02: #525252,
  ui-03: #525252,
  ui-04: #8d8d8d,
  ui-05: #f4f4f4,
  text-01: #f4f4f4,
  text-02: #c6c6c6,
  text-03: #6f6f6f,
  text-04: #ffffff,
  text-05: #8d8d8d,
  icon-01: #f4f4f4,
  icon-02: #c6c6c6,
  icon-03: #ffffff,
  link-01: #78a9ff,
  inverse-link: #0f62fe,
  field-01: #393939,
  field-02: #525252,
  inverse-01: #161616,
  inverse-02: #f4f4f4,
  support-01: #fa4d56,
  support-02: #42be65,
  support-03: #f1c21b,
  support-04: #4589ff,
  inverse-support-01: #da1e28,
  inverse-support-02: #24a148,
  inverse-support-03: #f1c21b,
  inverse-support-04: #0f62fe,
  overlay-01: rgba(22, 22, 22, 0.7),
  danger: #da1e28,
  focus: #ffffff,
  inverse-focus-ui: #0f62fe,
  hover-primary: #0353e9,
  active-primary: #002d9c,
  hover-primary-text: #a6c8ff,
  hover-secondary: #606060,
  active-secondary: #393939,
  hover-tertiary: #f4f4f4,
  active-tertiary: #c6c6c6,
  hover-ui: #4c4c4c,
  active-ui: #6f6f6f,
  selected-ui: #525252,
  inverse-hover-ui: #e5e5e5,
  hover-selected-ui: #656565,
  hover-danger: #ba1b23,
  active-danger: #750e13,
  hover-row: #4c4c4c,
  visited-link: #be95ff,
  disabled-01: #393939,
  disabled-02: #6f6f6f,
  disabled-03: #8d8d8d,
  highlight: #0043ce,
  skeleton-01: #353535,
  skeleton-02: #525252,
  brand-01: #0f62fe,
  brand-02: #6f6f6f,
  brand-03: #ffffff,
  active-01: #6f6f6f,
  hover-field: #4c4c4c,
  caption-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  label-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  helper-text-01: (
    font-size: 0.75rem,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  body-short-01: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  body-long-01: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.25rem,
    letter-spacing: 0.16px,
  ),
  body-short-02: (
    font-size: 1rem,
    font-weight: 400,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  body-long-02: (
    font-size: 1rem,
    font-weight: 400,
    line-height: 1.5rem,
    letter-spacing: 0,
  ),
  code-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  code-02: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.25rem,
    letter-spacing: 0.32px,
  ),
  heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  productive-heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  productive-heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  productive-heading-03: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 1.625rem,
    letter-spacing: 0,
  ),
  productive-heading-04: (
    font-size: 1.75rem,
    font-weight: 400,
    line-height: 2.25rem,
    letter-spacing: 0,
  ),
  productive-heading-05: (
    font-size: 2rem,
    font-weight: 400,
    line-height: 2.5rem,
    letter-spacing: 0,
  ),
  productive-heading-06: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 3.125rem,
    letter-spacing: 0,
  ),
  productive-heading-07: (
    font-size: 3.375rem,
    font-weight: 300,
    line-height: 4rem,
    letter-spacing: 0,
  ),
  expressive-heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  expressive-heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  expressive-heading-03: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 130%,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.25rem,
        line-height: 125%,
      ),
      max: (
        font-size: 1.5rem,
      ),
    ),
  ),
  expressive-heading-04: (
    font-size: 1.75rem,
    font-weight: 400,
    line-height: 129%,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.75rem,
        line-height: 125%,
      ),
      max: (
        font-size: 2rem,
      ),
    ),
  ),
  expressive-heading-05: (
    font-size: 2rem,
    font-weight: 400,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 300,
        line-height: 122%,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 300,
        line-height: 119%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 300,
        line-height: 117%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 300,
        line-height: 4.375rem,
        letter-spacing: 0,
      ),
    ),
  ),
  expressive-heading-06: (
    font-size: 2rem,
    font-weight: 600,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 600,
        line-height: 122%,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 600,
        line-height: 119%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 600,
        line-height: 117%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 600,
        line-height: 4.375rem,
        letter-spacing: 0,
      ),
    ),
  ),
  expressive-paragraph-01: (
    font-size: 1.5rem,
    font-weight: 300,
    line-height: 125%,
    letter-spacing: 0,
    lg: (
      font-size: 1.75rem,
      line-height: 129%,
    ),
    max: (
      font-size: 2rem,
      line-height: 125%,
    ),
  ),
  quotation-01: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 130%,
    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: 125%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 1.75rem,
        font-weight: 400,
        line-height: 129%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 2rem,
        font-weight: 400,
        line-height: 125%,
        letter-spacing: 0,
      ),
    ),
  ),
  quotation-02: (
    font-size: 2rem,
    font-weight: 300,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        line-height: 122%,
      ),
      lg: (
        font-size: 2.625rem,
        line-height: 119%,
      ),
      xlg: (
        font-size: 3rem,
        line-height: 117%,
      ),
      max: (
        font-size: 3.75rem,
      ),
    ),
  ),
  display-01: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 117%,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 113%,
      ),
    ),
  ),
  display-02: (
    font-size: 2.625rem,
    font-weight: 600,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 116%,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 113%,
      ),
    ),
  ),
  display-03: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 115%,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 111%,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 107%,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 105%,
        letter-spacing: -0.96px,
      ),
    ),
  ),
  display-04: (
    font-size: 2.625rem,
    font-weight: 600,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 115%,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 111%,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 107%,
        letter-spacing: -0.64px,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 105%,
        letter-spacing: -0.96px,
      ),
    ),
  ),
);

• Group: @carbon/themes
• Type: Map

✅carbon--theme--g100 [variable]

Carbon's g100 color theme

Source code

$carbon--theme--g100: (
  interactive-01: #0f62fe,
  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-04: #ffffff,
  text-05: #8d8d8d,
  icon-01: #f4f4f4,
  icon-02: #c6c6c6,
  icon-03: #ffffff,
  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-03: #f1c21b,
  support-04: #4589ff,
  inverse-support-01: #da1e28,
  inverse-support-02: #24a148,
  inverse-support-03: #f1c21b,
  inverse-support-04: #0f62fe,
  overlay-01: rgba(22, 22, 22, 0.7),
  danger: #da1e28,
  focus: #ffffff,
  inverse-focus-ui: #0f62fe,
  hover-primary: #0353e9,
  active-primary: #002d9c,
  hover-primary-text: #a6c8ff,
  hover-secondary: #606060,
  active-secondary: #393939,
  hover-tertiary: #f4f4f4,
  active-tertiary: #c6c6c6,
  hover-ui: #353535,
  active-ui: #525252,
  selected-ui: #393939,
  inverse-hover-ui: #e5e5e5,
  hover-selected-ui: #4c4c4c,
  hover-danger: #ba1b23,
  active-danger: #750e13,
  hover-row: #353535,
  visited-link: #be95ff,
  disabled-01: #262626,
  disabled-02: #525252,
  disabled-03: #6f6f6f,
  highlight: #002d9c,
  skeleton-01: #353535,
  skeleton-02: #393939,
  brand-01: #0f62fe,
  brand-02: #6f6f6f,
  brand-03: #ffffff,
  active-01: #525252,
  hover-field: #353535,
  caption-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  label-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  helper-text-01: (
    font-size: 0.75rem,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  body-short-01: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  body-long-01: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.25rem,
    letter-spacing: 0.16px,
  ),
  body-short-02: (
    font-size: 1rem,
    font-weight: 400,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  body-long-02: (
    font-size: 1rem,
    font-weight: 400,
    line-height: 1.5rem,
    letter-spacing: 0,
  ),
  code-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  code-02: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.25rem,
    letter-spacing: 0.32px,
  ),
  heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  productive-heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  productive-heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  productive-heading-03: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 1.625rem,
    letter-spacing: 0,
  ),
  productive-heading-04: (
    font-size: 1.75rem,
    font-weight: 400,
    line-height: 2.25rem,
    letter-spacing: 0,
  ),
  productive-heading-05: (
    font-size: 2rem,
    font-weight: 400,
    line-height: 2.5rem,
    letter-spacing: 0,
  ),
  productive-heading-06: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 3.125rem,
    letter-spacing: 0,
  ),
  productive-heading-07: (
    font-size: 3.375rem,
    font-weight: 300,
    line-height: 4rem,
    letter-spacing: 0,
  ),
  expressive-heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  expressive-heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  expressive-heading-03: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 130%,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.25rem,
        line-height: 125%,
      ),
      max: (
        font-size: 1.5rem,
      ),
    ),
  ),
  expressive-heading-04: (
    font-size: 1.75rem,
    font-weight: 400,
    line-height: 129%,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.75rem,
        line-height: 125%,
      ),
      max: (
        font-size: 2rem,
      ),
    ),
  ),
  expressive-heading-05: (
    font-size: 2rem,
    font-weight: 400,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 300,
        line-height: 122%,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 300,
        line-height: 119%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 300,
        line-height: 117%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 300,
        line-height: 4.375rem,
        letter-spacing: 0,
      ),
    ),
  ),
  expressive-heading-06: (
    font-size: 2rem,
    font-weight: 600,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 600,
        line-height: 122%,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 600,
        line-height: 119%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 600,
        line-height: 117%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 600,
        line-height: 4.375rem,
        letter-spacing: 0,
      ),
    ),
  ),
  expressive-paragraph-01: (
    font-size: 1.5rem,
    font-weight: 300,
    line-height: 125%,
    letter-spacing: 0,
    lg: (
      font-size: 1.75rem,
      line-height: 129%,
    ),
    max: (
      font-size: 2rem,
      line-height: 125%,
    ),
  ),
  quotation-01: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 130%,
    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: 125%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 1.75rem,
        font-weight: 400,
        line-height: 129%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 2rem,
        font-weight: 400,
        line-height: 125%,
        letter-spacing: 0,
      ),
    ),
  ),
  quotation-02: (
    font-size: 2rem,
    font-weight: 300,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        line-height: 122%,
      ),
      lg: (
        font-size: 2.625rem,
        line-height: 119%,
      ),
      xlg: (
        font-size: 3rem,
        line-height: 117%,
      ),
      max: (
        font-size: 3.75rem,
      ),
    ),
  ),
  display-01: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 117%,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 113%,
      ),
    ),
  ),
  display-02: (
    font-size: 2.625rem,
    font-weight: 600,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 116%,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 113%,
      ),
    ),
  ),
  display-03: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 115%,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 111%,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 107%,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 105%,
        letter-spacing: -0.96px,
      ),
    ),
  ),
  display-04: (
    font-size: 2.625rem,
    font-weight: 600,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 115%,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 111%,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 107%,
        letter-spacing: -0.64px,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 105%,
        letter-spacing: -0.96px,
      ),
    ),
  ),
);

• Group: @carbon/themes
• Type: Map

✅carbon--theme--v9 [variable]

Carbon's v9 color theme

Source code

$carbon--theme--v9: (
  interactive-01: #3d70b2,
  interactive-02: #5a6872,
  interactive-03: #5a6872,
  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-04: #ffffff,
  text-05: #5a6872,
  icon-01: #3d70b2,
  icon-02: #5a6872,
  icon-03: #ffffff,
  link-01: #3d70b2,
  inverse-link: #5596e6,
  field-01: #ffffff,
  field-02: #f4f7fb,
  inverse-01: #ffffff,
  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),
  danger: #da1e28,
  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,
  active-ui: #dfeafa,
  selected-ui: #eef4fc,
  inverse-hover-ui: #4c4c4c,
  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,
  skeleton-01: rgba(61, 112, 178, 0.1),
  skeleton-02: rgba(61, 112, 178, 0.1),
  brand-01: #3d70b2,
  brand-02: #5a6872,
  brand-03: #5a6872,
  active-01: #dfeafa,
  hover-field: #eef4fc,
  caption-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  label-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  helper-text-01: (
    font-size: 0.75rem,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  body-short-01: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  body-long-01: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.25rem,
    letter-spacing: 0.16px,
  ),
  body-short-02: (
    font-size: 1rem,
    font-weight: 400,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  body-long-02: (
    font-size: 1rem,
    font-weight: 400,
    line-height: 1.5rem,
    letter-spacing: 0,
  ),
  code-01: (
    font-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  ),
  code-02: (
    font-size: 0.875rem,
    font-weight: 400,
    line-height: 1.25rem,
    letter-spacing: 0.32px,
  ),
  heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  productive-heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  productive-heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  productive-heading-03: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 1.625rem,
    letter-spacing: 0,
  ),
  productive-heading-04: (
    font-size: 1.75rem,
    font-weight: 400,
    line-height: 2.25rem,
    letter-spacing: 0,
  ),
  productive-heading-05: (
    font-size: 2rem,
    font-weight: 400,
    line-height: 2.5rem,
    letter-spacing: 0,
  ),
  productive-heading-06: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 3.125rem,
    letter-spacing: 0,
  ),
  productive-heading-07: (
    font-size: 3.375rem,
    font-weight: 300,
    line-height: 4rem,
    letter-spacing: 0,
  ),
  expressive-heading-01: (
    font-size: 0.875rem,
    font-weight: 600,
    line-height: 1.125rem,
    letter-spacing: 0.16px,
  ),
  expressive-heading-02: (
    font-size: 1rem,
    font-weight: 600,
    line-height: 1.375rem,
    letter-spacing: 0,
  ),
  expressive-heading-03: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 130%,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.25rem,
        line-height: 125%,
      ),
      max: (
        font-size: 1.5rem,
      ),
    ),
  ),
  expressive-heading-04: (
    font-size: 1.75rem,
    font-weight: 400,
    line-height: 129%,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.75rem,
        line-height: 125%,
      ),
      max: (
        font-size: 2rem,
      ),
    ),
  ),
  expressive-heading-05: (
    font-size: 2rem,
    font-weight: 400,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 300,
        line-height: 122%,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 300,
        line-height: 119%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 300,
        line-height: 117%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 300,
        line-height: 4.375rem,
        letter-spacing: 0,
      ),
    ),
  ),
  expressive-heading-06: (
    font-size: 2rem,
    font-weight: 600,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 600,
        line-height: 122%,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 600,
        line-height: 119%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 600,
        line-height: 117%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 600,
        line-height: 4.375rem,
        letter-spacing: 0,
      ),
    ),
  ),
  expressive-paragraph-01: (
    font-size: 1.5rem,
    font-weight: 300,
    line-height: 125%,
    letter-spacing: 0,
    lg: (
      font-size: 1.75rem,
      line-height: 129%,
    ),
    max: (
      font-size: 2rem,
      line-height: 125%,
    ),
  ),
  quotation-01: (
    font-size: 1.25rem,
    font-weight: 400,
    line-height: 130%,
    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: 125%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 1.75rem,
        font-weight: 400,
        line-height: 129%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 2rem,
        font-weight: 400,
        line-height: 125%,
        letter-spacing: 0,
      ),
    ),
  ),
  quotation-02: (
    font-size: 2rem,
    font-weight: 300,
    line-height: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        line-height: 122%,
      ),
      lg: (
        font-size: 2.625rem,
        line-height: 119%,
      ),
      xlg: (
        font-size: 3rem,
        line-height: 117%,
      ),
      max: (
        font-size: 3.75rem,
      ),
    ),
  ),
  display-01: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 117%,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 113%,
      ),
    ),
  ),
  display-02: (
    font-size: 2.625rem,
    font-weight: 600,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 116%,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 113%,
      ),
    ),
  ),
  display-03: (
    font-size: 2.625rem,
    font-weight: 300,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 115%,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 111%,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 107%,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 105%,
        letter-spacing: -0.96px,
      ),
    ),
  ),
  display-04: (
    font-size: 2.625rem,
    font-weight: 600,
    line-height: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 115%,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 111%,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 107%,
        letter-spacing: -0.64px,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 105%,
        letter-spacing: -0.96px,
      ),
    ),
  ),
);

• 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')),
  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: if(global-variable-exists('danger'), $danger, map-get($carbon--theme--white, 'danger')),
  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')),
  active-ui: if(global-variable-exists('active-ui'), $active-ui, map-get($carbon--theme--white, 'active-ui')),
  selected-ui: if(global-variable-exists('selected-ui'), $selected-ui, map-get($carbon--theme--white, 'selected-ui')),
  hover-selected-ui: if(global-variable-exists('hover-selected-ui'), $hover-selected-ui, map-get($carbon--theme--white, 'hover-selected-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')),
  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')),
  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')),
);

• Group: @carbon/themes
• Type: Map
• Alias: carbon--theme--white
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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'),
  #393939
);

• Group: @carbon/themes
• Type: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• Used by:
  • carbon--theme [mixin]

✅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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• Aliased:
  • hover-field
• 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: Color
• Aliased:
  • active-01
• 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: Color
• 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: Color
• 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: Color
• 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'),
  #ba1b23
);

• Group: @carbon/themes
• Type: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• 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: Color
• Alias: hover-ui
• Used by:
  • carbon--theme [mixin]
• Deprecated: This may not be available in future releases

✅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: 1rem,
    letter-spacing: 0.32px,
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 1rem,
    letter-spacing: 0.32px,
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 1rem,
    letter-spacing: 0.32px,
  )
);

• Group: @carbon/themes
• Type: Color
• 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.125rem,
    letter-spacing: 0.16px,
  )
);

• Group: @carbon/themes
• Type: Color
• 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.25rem,
    letter-spacing: 0.16px,
  )
);

• Group: @carbon/themes
• Type: Color
• 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.375rem,
    letter-spacing: 0,
  )
);

• Group: @carbon/themes
• Type: Color
• 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.5rem,
    letter-spacing: 0,
  )
);

• Group: @carbon/themes
• Type: Color
• 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-size: 0.75rem,
    font-weight: 400,
    line-height: 1rem,
    letter-spacing: 0.32px,
  )
);

• Group: @carbon/themes
• Type: Color
• 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-size: 0.875rem,
    font-weight: 400,
    line-height: 1.25rem,
    letter-spacing: 0.32px,
  )
);

• Group: @carbon/themes
• Type: Color
• 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.125rem,
    letter-spacing: 0.16px,
  )
);

• Group: @carbon/themes
• Type: Color
• 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.125rem,
    letter-spacing: 0.16px,
  )
);

• Group: @carbon/themes
• Type: Color
• 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.375rem,
    letter-spacing: 0,
  )
);

• Group: @carbon/themes
• Type: Color
• 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.375rem,
    letter-spacing: 0,
  )
);

• Group: @carbon/themes
• Type: Color
• 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.625rem,
    letter-spacing: 0,
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 2.25rem,
    letter-spacing: 0,
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 2.5rem,
    letter-spacing: 0,
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 3.125rem,
    letter-spacing: 0,
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 4rem,
    letter-spacing: 0,
  )
);

• Group: @carbon/themes
• Type: Color
• 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.125rem,
    letter-spacing: 0.16px,
  )
);

• Group: @carbon/themes
• Type: Color
• 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.375rem,
    letter-spacing: 0,
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 130%,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.25rem,
        line-height: 125%,
      ),
      max: (
        font-size: 1.5rem,
      ),
    ),
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 129%,
    letter-spacing: 0,
    breakpoints: (
      xlg: (
        font-size: 1.75rem,
        line-height: 125%,
      ),
      max: (
        font-size: 2rem,
      ),
    ),
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 300,
        line-height: 122%,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 300,
        line-height: 119%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 300,
        line-height: 117%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 300,
        line-height: 4.375rem,
        letter-spacing: 0,
      ),
    ),
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        font-weight: 600,
        line-height: 122%,
        letter-spacing: 0,
      ),
      lg: (
        font-size: 2.625rem,
        font-weight: 600,
        line-height: 119%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 3rem,
        font-weight: 600,
        line-height: 117%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 3.75rem,
        font-weight: 600,
        line-height: 4.375rem,
        letter-spacing: 0,
      ),
    ),
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 125%,
    letter-spacing: 0,
    lg: (
      font-size: 1.75rem,
      line-height: 129%,
    ),
    max: (
      font-size: 2rem,
      line-height: 125%,
    ),
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 130%,
    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: 125%,
        letter-spacing: 0,
      ),
      xlg: (
        font-size: 1.75rem,
        font-weight: 400,
        line-height: 129%,
        letter-spacing: 0,
      ),
      max: (
        font-size: 2rem,
        font-weight: 400,
        line-height: 125%,
        letter-spacing: 0,
      ),
    ),
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 125%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.25rem,
        line-height: 122%,
      ),
      lg: (
        font-size: 2.625rem,
        line-height: 119%,
      ),
      xlg: (
        font-size: 3rem,
        line-height: 117%,
      ),
      max: (
        font-size: 3.75rem,
      ),
    ),
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 117%,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 113%,
      ),
    ),
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 2.625rem,
      ),
      lg: (
        font-size: 3.375rem,
      ),
      xlg: (
        font-size: 3.75rem,
        line-height: 116%,
      ),
      max: (
        font-size: 4.75rem,
        line-height: 113%,
      ),
    ),
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 115%,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 111%,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 107%,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 105%,
        letter-spacing: -0.96px,
      ),
    ),
  )
);

• Group: @carbon/themes
• Type: Color
• 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: 119%,
    letter-spacing: 0,
    breakpoints: (
      md: (
        font-size: 4.25rem,
        line-height: 115%,
      ),
      lg: (
        font-size: 5.75rem,
        line-height: 111%,
        letter-spacing: -0.64px,
      ),
      xlg: (
        font-size: 7.625rem,
        line-height: 107%,
        letter-spacing: -0.64px,
      ),
      max: (
        font-size: 9.75rem,
        line-height: 105%,
        letter-spacing: -0.96px,
      ),
    ),
  )
);

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