Preview

Token	white theme	g10 theme	g90 theme	g100 theme	v9 theme
`interactive-01`	`blue-60`	`blue-60`	`blue-60`	`blue-60`	`#3d70b2`
`interactive-02`	`gray-80`	`gray-80`	`gray-60`	`gray-60`	`cool-gray-70`
`interactive-03`	`blue-60`	`blue-60`	`white-0`	`white-0`	`#3d70b2`
`interactive-04`	`blue-60`	`blue-60`	`blue-50`	`blue-50`	`#3d70b2`
`ui-background`	`white-0`	`gray-10`	`gray-90`	`gray-100`	`#f4f7fb`
`ui-01`	`gray-10`	`white-0`	`gray-80`	`gray-90`	`white-0`
`ui-02`	`white-0`	`gray-10`	`gray-70`	`gray-80`	`#f4f7fb`
`ui-03`	`gray-20`	`gray-20`	`gray-70`	`gray-80`	`#dfe3e6`
`ui-04`	`gray-50`	`gray-50`	`gray-50`	`gray-60`	`#8897a2`
`ui-05`	`gray-100`	`gray-100`	`gray-10`	`gray-10`	`#5a6872`
`text-01`	`gray-100`	`gray-100`	`gray-10`	`gray-10`	`#152935`
`text-02`	`gray-80`	`gray-80`	`gray-30`	`gray-30`	`#5a6872`
`text-03`	`gray-40`	`gray-40`	`gray-60`	`gray-60`	`#cdd1d4`
`text-04`	`white-0`	`white-0`	`white-0`	`white-0`	`white-0`
`text-05`	`gray-60`	`gray-60`	`gray-50`	`gray-50`	`#5a6872`
`text-error`	`red-60`	`red-60`	`red-30`	`red-40`	`#e0182d`
`icon-01`	`gray-100`	`gray-100`	`gray-10`	`gray-10`	`#3d70b2`
`icon-02`	`gray-70`	`gray-70`	`gray-30`	`gray-30`	`#5a6872`
`icon-03`	`white-0`	`white-0`	`white-0`	`white-0`	`white-0`
`link-01`	`blue-60`	`blue-60`	`blue-40`	`blue-40`	`#3d70b2`
`inverse-link`	`blue-40`	`blue-40`	`blue-60`	`blue-60`	`#5596e6`
`field-01`	`gray-10`	`white-0`	`gray-80`	`gray-90`	`white-0`
`field-02`	`white-0`	`gray-10`	`gray-70`	`gray-80`	`#f4f7fb`
`inverse-01`	`white-0`	`white-0`	`gray-100`	`gray-100`	`white-0`
`inverse-02`	`gray-80`	`gray-80`	`gray-10`	`gray-10`	`#272d33`
`support-01`	`red-60`	`red-60`	`red-40`	`red-50`	`#e0182d`
`support-02`	`green-50`	`green-50`	`green-40`	`green-40`	`#5aa700`
`support-03`	`yellow-30`	`yellow-30`	`yellow-30`	`yellow-30`	`#efc100`
`support-04`	`blue-70`	`blue-70`	`blue-50`	`blue-50`	`#5aaafa`
`inverse-support-01`	`red-50`	`red-50`	`red-60`	`red-60`	`#ff5050`
`inverse-support-02`	`green-40`	`green-40`	`green-50`	`green-50`	`#8cd211`
`inverse-support-03`	`yellow-30`	`yellow-30`	`yellow-30`	`yellow-30`	`#FDD600`
`inverse-support-04`	`blue-50`	`blue-50`	`blue-60`	`blue-60`	`#5aaafa`
`overlay-01`	`rgba(22, 22, 22, 0.5)`	`rgba(22, 22, 22, 0.5)`	`rgba(22, 22, 22, 0.7)`	`rgba(22, 22, 22, 0.7)`	`rgba(223, 227, 230, 0.5)`
`danger`	`red-60`	`red-60`	`red-60`	`red-60`	`red-60`
`focus`	`blue-60`	`blue-60`	`white-0`	`white-0`	`#3d70b2`
`inverse-focus-ui`	`white-0`	`white-0`	`blue-60`	`blue-60`	`#3d70b2`
`hover-primary`	`#0353e9`	`#0353e9`	`#0353e9`	`#0353e9`	`#30588c`
`active-primary`	`blue-80`	`blue-80`	`blue-80`	`blue-80`	`#30588c`
`hover-primary-text`	`blue-70`	`blue-70`	`blue-30`	`blue-30`	`#294c86`
`hover-secondary`	`#4c4c4c`	`#4c4c4c`	`#606060`	`#606060`	`#4d5b65`
`active-secondary`	`gray-60`	`gray-60`	`gray-80`	`gray-80`	`#414f59`
`hover-tertiary`	`#0353e9`	`#0353e9`	`gray-10`	`gray-10`	`#5a6872`
`active-tertiary`	`blue-80`	`blue-80`	`gray-30`	`gray-30`	`#414f59`
`hover-ui`	`#e5e5e5`	`#e5e5e5`	`#4c4c4c`	`#353535`	`#EEF4FC`
`active-ui`	`gray-30`	`gray-30`	`gray-60`	`gray-70`	`#DFEAFA`
`selected-ui`	`gray-20`	`gray-20`	`gray-70`	`gray-80`	`#EEF4FC`
`inverse-hover-ui`	`#4c4c4c`	`#4c4c4c`	`#e5e5e5`	`#e5e5e5`	`#4c4c4c`
`hover-selected-ui`	`#cacaca`	`#cacaca`	`#656565`	`#4c4c4c`	`#DFEAFA`
`hover-danger`	`#ba1b23`	`#ba1b23`	`#ba1b23`	`#ba1b23`	`#c70014`
`active-danger`	`red-80`	`red-80`	`red-80`	`red-80`	`#AD1625`
`hover-row`	`#e5e5e5`	`#e5e5e5`	`#4c4c4c`	`#353535`	`#eef4fc`
`visited-link`	`purple-60`	`purple-60`	`purple-40`	`purple-40`	`#294c86`
`disabled-01`	`gray-10`	`white-0`	`gray-80`	`gray-90`	`#fafbfd`
`disabled-02`	`gray-30`	`gray-30`	`gray-60`	`gray-70`	`#dfe3e6`
`disabled-03`	`gray-50`	`gray-50`	`gray-50`	`gray-60`	`#cdd1d4`
`highlight`	`blue-20`	`blue-20`	`blue-70`	`blue-80`	`#f4f7fb`
`skeleton-01`	`#e5e5e5`	`#e5e5e5`	`#353535`	`#353535`	`rgba(61, 112, 178, .1)`
`skeleton-02`	`gray-30`	`gray-30`	`gray-70`	`gray-80`	`rgba(61, 112, 178, .1)`
`brand-01`	`blue-60`	`blue-60`	`blue-60`	`blue-60`	`#3d70b2`
`brand-02`	`gray-80`	`gray-80`	`gray-60`	`gray-60`	`cool-gray-70`
`brand-03`	`blue-60`	`blue-60`	`white-0`	`white-0`	`#3d70b2`
`active-01`	`gray-30`	`gray-30`	`gray-60`	`gray-70`	`#DFEAFA`
`hover-field`	`#e5e5e5`	`#e5e5e5`	`#4c4c4c`	`#353535`	`#EEF4FC`
`caption-01`	`colors`	`colors`	`colors`	`colors`	`colors`
`label-01`	`colors`	`colors`	`colors`	`colors`	`colors`
`helper-text-01`	`colors`	`colors`	`colors`	`colors`	`colors`
`body-short-01`	`colors`	`colors`	`colors`	`colors`	`colors`
`body-long-01`	`colors`	`colors`	`colors`	`colors`	`colors`
`body-short-02`	`colors`	`colors`	`colors`	`colors`	`colors`
`body-long-02`	`colors`	`colors`	`colors`	`colors`	`colors`
`code-01`	`colors`	`colors`	`colors`	`colors`	`colors`
`code-02`	`colors`	`colors`	`colors`	`colors`	`colors`
`heading-01`	`colors`	`colors`	`colors`	`colors`	`colors`
`productive-heading-01`	`colors`	`colors`	`colors`	`colors`	`colors`
`heading-02`	`colors`	`colors`	`colors`	`colors`	`colors`
`productive-heading-02`	`colors`	`colors`	`colors`	`colors`	`colors`
`productive-heading-03`	`colors`	`colors`	`colors`	`colors`	`colors`
`productive-heading-04`	`colors`	`colors`	`colors`	`colors`	`colors`
`productive-heading-05`	`colors`	`colors`	`colors`	`colors`	`colors`
`productive-heading-06`	`colors`	`colors`	`colors`	`colors`	`colors`
`productive-heading-07`	`colors`	`colors`	`colors`	`colors`	`colors`
`expressive-heading-01`	`colors`	`colors`	`colors`	`colors`	`colors`
`expressive-heading-02`	`colors`	`colors`	`colors`	`colors`	`colors`
`expressive-heading-03`	`colors`	`colors`	`colors`	`colors`	`colors`
`expressive-heading-04`	`colors`	`colors`	`colors`	`colors`	`colors`
`expressive-heading-05`	`colors`	`colors`	`colors`	`colors`	`colors`
`expressive-heading-06`	`colors`	`colors`	`colors`	`colors`	`colors`
`expressive-paragraph-01`	`colors`	`colors`	`colors`	`colors`	`colors`
`quotation-01`	`colors`	`colors`	`colors`	`colors`	`colors`
`quotation-02`	`colors`	`colors`	`colors`	`colors`	`colors`
`display-01`	`colors`	`colors`	`colors`	`colors`	`colors`
`display-02`	`colors`	`colors`	`colors`	`colors`	`colors`
`display-03`	`colors`	`colors`	`colors`	`colors`	`colors`
`display-04`	`colors`	`colors`	`colors`	`colors`	`colors`
`spacing-01`	`0.125rem`	`0.125rem`	`0.125rem`	`0.125rem`	`0.125rem`
`spacing-02`	`0.25rem`	`0.25rem`	`0.25rem`	`0.25rem`	`0.25rem`
`spacing-03`	`0.5rem`	`0.5rem`	`0.5rem`	`0.5rem`	`0.5rem`
`spacing-04`	`0.75rem`	`0.75rem`	`0.75rem`	`0.75rem`	`0.75rem`
`spacing-05`	`1rem`	`1rem`	`1rem`	`1rem`	`1rem`
`spacing-06`	`1.5rem`	`1.5rem`	`1.5rem`	`1.5rem`	`1.5rem`
`spacing-07`	`2rem`	`2rem`	`2rem`	`2rem`	`2rem`
`spacing-08`	`2.5rem`	`2.5rem`	`2.5rem`	`2.5rem`	`2.5rem`
`spacing-09`	`3rem`	`3rem`	`3rem`	`3rem`	`3rem`
`spacing-10`	`4rem`	`4rem`	`4rem`	`4rem`	`4rem`
`spacing-11`	`5rem`	`5rem`	`5rem`	`5rem`	`5rem`
`spacing-12`	`6rem`	`6rem`	`6rem`	`6rem`	`6rem`
`fluid-spacing-01`	`0`	`0`	`0`	`0`	`0`
`fluid-spacing-02`	`2vw`	`2vw`	`2vw`	`2vw`	`2vw`
`fluid-spacing-03`	`5vw`	`5vw`	`5vw`	`5vw`	`5vw`
`fluid-spacing-04`	`10vw`	`10vw`	`10vw`	`10vw`	`10vw`
`layout-01`	`1rem`	`1rem`	`1rem`	`1rem`	`1rem`
`layout-02`	`1.5rem`	`1.5rem`	`1.5rem`	`1.5rem`	`1.5rem`
`layout-03`	`2rem`	`2rem`	`2rem`	`2rem`	`2rem`
`layout-04`	`3rem`	`3rem`	`3rem`	`3rem`	`3rem`
`layout-05`	`4rem`	`4rem`	`4rem`	`4rem`	`4rem`
`layout-06`	`6rem`	`6rem`	`6rem`	`6rem`	`6rem`
`layout-07`	`10rem`	`10rem`	`10rem`	`10rem`	`10rem`
`container-01`	`1.5rem`	`1.5rem`	`1.5rem`	`1.5rem`	`1.5rem`
`container-02`	`2rem`	`2rem`	`2rem`	`2rem`	`2rem`
`container-03`	`2.5rem`	`2.5rem`	`2.5rem`	`2.5rem`	`2.5rem`
`container-04`	`3rem`	`3rem`	`3rem`	`3rem`	`3rem`
`container-05`	`4rem`	`4rem`	`4rem`	`4rem`	`4rem`
`icon-size-01`	`1rem`	`1rem`	`1rem`	`1rem`	`1rem`
`icon-size-02`	`1.25rem`	`1.25rem`	`1.25rem`	`1.25rem`	`1.25rem`

Token

white theme

g10 theme

g90 theme

g100 theme

v9 theme

interactive-01

blue-60

#3d70b2

interactive-02

gray-80

gray-60

cool-gray-70

interactive-03

blue-60

white-0

#3d70b2

interactive-04

blue-60

blue-50

#3d70b2

ui-background

white-0

gray-10

gray-90

gray-100

#f4f7fb

ui-01

gray-10

white-0

gray-80

gray-90

white-0

ui-02

white-0

gray-10

gray-70

gray-80

#f4f7fb

ui-03

gray-20

gray-70

gray-80

#dfe3e6

ui-04

gray-50

gray-60

#8897a2

ui-05

gray-100

gray-10

#5a6872

text-01

gray-100

gray-10

#152935

text-02

gray-80

gray-30

#5a6872

text-03

gray-40

gray-60

#cdd1d4

text-04

white-0

text-05

gray-60

gray-50

#5a6872

text-error

red-60

red-30

red-40

#e0182d

icon-01

gray-100

gray-10

#3d70b2

icon-02

gray-70

gray-30

#5a6872

icon-03

white-0

link-01

blue-60

blue-40

#3d70b2

inverse-link

blue-40

blue-60

#5596e6

field-01

gray-10

white-0

gray-80

gray-90

white-0

field-02

white-0

gray-10

gray-70

gray-80

#f4f7fb

inverse-01

white-0

gray-100

white-0

inverse-02

gray-80

gray-10

#272d33

support-01

red-60

red-40

red-50

#e0182d

support-02

green-50

green-40

#5aa700

support-03

yellow-30

#efc100

support-04

blue-70

blue-50

#5aaafa

inverse-support-01

red-50

red-60

#ff5050

inverse-support-02

green-40

green-50

#8cd211

inverse-support-03

yellow-30

#FDD600

inverse-support-04

blue-50

blue-60

#5aaafa

overlay-01

rgba(22, 22, 22, 0.5)

rgba(22, 22, 22, 0.7)

rgba(223, 227, 230, 0.5)

danger

red-60

focus

blue-60

white-0

#3d70b2

inverse-focus-ui

white-0

blue-60

#3d70b2

hover-primary

#0353e9

#30588c

active-primary

blue-80

#30588c

hover-primary-text

blue-70

blue-30

#294c86

hover-secondary

#4c4c4c

#606060

#4d5b65

active-secondary

gray-60

gray-80

#414f59

hover-tertiary

#0353e9

gray-10

#5a6872

active-tertiary

blue-80

gray-30

#414f59

hover-ui

#e5e5e5

#4c4c4c

#353535

#EEF4FC

active-ui

gray-30

gray-60

gray-70

#DFEAFA

selected-ui

gray-20

gray-70

gray-80

#EEF4FC

inverse-hover-ui

#4c4c4c

#e5e5e5

#4c4c4c

hover-selected-ui

#cacaca

#656565

#4c4c4c

#DFEAFA

hover-danger

#ba1b23

#c70014

active-danger

red-80

#AD1625

hover-row

#e5e5e5

#4c4c4c

#353535

#eef4fc

visited-link

purple-60

purple-40

#294c86

disabled-01

gray-10

white-0

gray-80

gray-90

#fafbfd

disabled-02

gray-30

gray-60

gray-70

#dfe3e6

disabled-03

gray-50

gray-60

#cdd1d4

highlight

blue-20

blue-70

blue-80

#f4f7fb

skeleton-01

#e5e5e5

#353535

rgba(61, 112, 178, .1)

skeleton-02

gray-30

gray-70

gray-80

rgba(61, 112, 178, .1)

brand-01

blue-60

#3d70b2

brand-02

gray-80

gray-60

cool-gray-70

brand-03

blue-60

white-0

#3d70b2

active-01

gray-30

gray-60

gray-70

#DFEAFA

hover-field

#e5e5e5

#4c4c4c

#353535

#EEF4FC

caption-01

colors

label-01

colors

helper-text-01

colors

body-short-01

colors

body-long-01

colors

body-short-02

colors

body-long-02

colors

code-01

colors

code-02

colors

heading-01

colors

productive-heading-01

colors

heading-02

colors

productive-heading-02

colors

productive-heading-03

colors

productive-heading-04

colors

productive-heading-05

colors

productive-heading-06

colors

productive-heading-07

colors

expressive-heading-01

colors

expressive-heading-02

colors

expressive-heading-03

colors

expressive-heading-04

colors

expressive-heading-05

colors

expressive-heading-06

colors

expressive-paragraph-01

colors

quotation-01

colors

quotation-02

colors

display-01

colors

display-02

colors

display-03

colors

display-04

colors

spacing-01

0.125rem

spacing-02

0.25rem

spacing-03

0.5rem

spacing-04

0.75rem

spacing-05

1rem

spacing-06

1.5rem

spacing-07

2rem

spacing-08

2.5rem

spacing-09

3rem

spacing-10

4rem

spacing-11

5rem

spacing-12

6rem

fluid-spacing-01

0

fluid-spacing-02

2vw

fluid-spacing-03

5vw

fluid-spacing-04

10vw

layout-01

1rem

layout-02

1.5rem

layout-03

2rem

layout-04

3rem

layout-05

4rem

layout-06

6rem

layout-07

10rem

container-01

1.5rem

container-02

2rem

container-03

2.5rem

container-04

3rem

container-05

4rem

icon-size-01

1rem

icon-size-02

1.25rem

@mixin my-component() { .my-component { color: $interactive-02; } } // Include default `$interactive-02` styling @include my-component(); // Include themed `$interactive-02` styling from g100 theme @include carbon--theme($carbon--theme--g100) { .theme { @include my-component(); } }

Custom tokens

My custom token component

Code


$default-custom-theme: map-merge(
  $carbon--theme--white,
  (
    custom-token-01: #171717,
  )
);
$custom-token-01: map-get(
  $default-custom-theme,
  custom-token-01
) !default !global;

@mixin my-custom-token-component() {
  .my-custom-token-component {
    color: $interactive-01;
  }

  .my-custom-token-component .custom-token {
    color: $custom-token-01;
  }
}

@include my-custom-token-component();

@mixin custom-theme($theme: $default-custom-theme) {
  @include carbon--theme($theme) {
    $custom-token-01: map-get($theme, custom-token-01) !global;
    @content;
  }

  @if $theme != $default-custom-theme {
    @include custom-theme($default-custom-theme);
  }
}

$custom-theme: map-merge(
  $default-custom-theme,
  (
    interactive-01: #ee538b,
    custom-token-01: #8a3ffc,
  )
);

.theme {
  @include custom-theme($custom-theme) {
    @include my-custom-token-component();
  }
}

`@carbon/themes`

Themes

Theming

Basic component theming

Custom tokens

Custom Properties