v10 @carbon/themes| Token | white theme | g10 theme | g80 theme | g90 theme | g100 theme | v9 theme |
|---|---|---|---|---|---|---|
| white-0 | gray-10 | gray-80 | gray-90 | gray-100 | #f4f7fb |
| blue-60 | blue-60 | blue-60 | blue-60 | blue-60 | #3d70b2 |
| gray-80 | gray-80 | gray-60 | gray-60 | gray-60 | cool-gray-70 |
| blue-60 | blue-60 | white-0 | white-0 | white-0 | #3d70b2 |
| blue-60 | blue-60 | blue-40 | blue-50 | blue-50 | #3d70b2 |
| blue-60 | blue-60 | blue-60 | blue-60 | blue-60 | #3d70b2 |
| gray-80 | gray-80 | gray-60 | gray-60 | gray-60 | cool-gray-70 |
| blue-60 | blue-60 | white-0 | white-0 | white-0 | #3d70b2 |
| red-60 | red-60 | red-60 | red-60 | red-60 | red-60 |
| red-60 | red-60 | red-60 | red-60 | red-60 | red-60 |
| red-60 | red-60 | red-40 | red-40 | red-50 | red-60 |
| gray-10 | white-0 | gray-70 | gray-80 | gray-90 | white-0 |
| white-0 | gray-10 | gray-70 | gray-70 | gray-80 | #f4f7fb |
| gray-20 | gray-20 | gray-60 | gray-70 | gray-80 | #dfe3e6 |
| gray-50 | gray-50 | gray-40 | gray-50 | gray-60 | #8897a2 |
| gray-100 | gray-100 | gray-10 | gray-10 | gray-10 | #5a6872 |
| gray-100 | gray-100 | gray-10 | gray-10 | gray-10 | #152935 |
| gray-70 | gray-70 | gray-30 | gray-30 | gray-30 | #5a6872 |
| gray-40 | gray-40 | gray-60 | gray-60 | gray-60 | #cdd1d4 |
| white-0 | white-0 | white-0 | white-0 | white-0 | white-0 |
| gray-60 | gray-60 | gray-40 | gray-50 | gray-50 | #5a6872 |
| red-60 | red-60 | red-30 | red-30 | red-40 | #e0182d |
| blue-60 | blue-60 | blue-40 | blue-40 | blue-40 | #3d70b2 |
| blue-70 | blue-70 | blue-30 | blue-30 | blue-30 | #3d70b2 |
| gray-100 | gray-100 | gray-10 | gray-10 | gray-10 | #3d70b2 |
| gray-70 | gray-70 | gray-30 | gray-30 | gray-30 | #5a6872 |
| white-0 | white-0 | white-0 | white-0 | white-0 | white-0 |
| gray-10 | white-0 | gray-70 | gray-80 | gray-90 | white-0 |
| white-0 | gray-10 | gray-60 | gray-70 | gray-80 | #f4f7fb |
| white-0 | white-0 | gray-100 | gray-100 | gray-100 | white-0 |
| gray-80 | gray-80 | gray-10 | gray-10 | gray-10 | #272d33 |
| blue-40 | blue-40 | blue-60 | blue-60 | blue-60 | #5596e6 |
| red-60 | red-60 | red-40 | red-40 | red-50 | #e0182d |
| green-60 | green-60 | green-40 | green-40 | green-40 | #5aa700 |
| yellow-30 | yellow-30 | yellow-30 | yellow-30 | yellow-30 | #efc100 |
| blue-70 | blue-70 | blue-50 | blue-50 | blue-50 | #5aaafa |
| red-50 | red-50 | red-60 | red-60 | red-60 | #ff5050 |
| green-40 | green-40 | green-50 | green-50 | green-50 | #8cd211 |
| yellow-30 | yellow-30 | yellow-30 | yellow-30 | yellow-30 | #FDD600 |
| blue-50 | blue-50 | blue-60 | blue-60 | blue-60 | #5aaafa |
| rgba(22, 22, 22, 0.5) | rgba(22, 22, 22, 0.5) | rgba(0, 0, 0, 0.65) | rgba(0, 0, 0, 0.65) | rgba(0, 0, 0, 0.65) | rgba(223, 227, 230, 0.5) |
| white-0 | gray-10 | gray-80 | gray-90 | gray-100 | #f4f7fb |
| gray-10 | white-0 | gray-70 | gray-80 | gray-90 | white-0 |
| gray-20 | gray-20 | gray-60 | gray-70 | gray-80 | #dfe3e6 |
| gray-20Hover | gray-20Hover | gray-60Hover | gray-70Hover | gray-80Hover | #ced4d9 |
| gray-40 | gray-40 | gray-70 | gray-50 | gray-60 | gray-40 |
| gray-10 | white-0 | gray-70 | gray-80 | gray-90 | white-0 |
| gray-80 | gray-80 | gray-10 | gray-10 | gray-10 | #272d33 |
| blue-60 | blue-60 | blue-60 | blue-60 | blue-60 | #3d70b2 |
| blue-60 | blue-60 | blue-40 | blue-50 | blue-50 | #3d70b2 |
| gray-20 | gray-20 | gray-60 | gray-70 | gray-80 | #dfe3e6 |
| gray-50 | gray-50 | gray-40 | gray-50 | gray-60 | #8897a2 |
| gray-100 | gray-100 | gray-10 | gray-10 | gray-10 | #5a6872 |
| blue-60 | blue-60 | blue-50 | blue-50 | blue-50 | #3d70b2 |
| gray-100 | gray-100 | gray-10 | gray-10 | gray-10 | #152935 |
| gray-70 | gray-70 | gray-30 | gray-30 | gray-30 | #5a6872 |
| gray-40 | gray-40 | gray-60 | gray-60 | gray-60 | #cdd1d4 |
| gray-60 | gray-60 | gray-40 | gray-50 | gray-50 | #5a6872 |
| white-0 | white-0 | white-0 | white-0 | white-0 | white-0 |
| white-0 | white-0 | gray-100 | gray-100 | gray-100 | white-0 |
| blue-60 | blue-60 | blue-40 | blue-40 | blue-40 | #3d70b2 |
| blue-70 | blue-70 | blue-30 | blue-30 | blue-30 | #3d70b2 |
| purple-60 | purple-60 | purple-40 | purple-40 | purple-40 | #294c86 |
| blue-40 | blue-40 | blue-60 | blue-60 | blue-60 | #5596e6 |
| gray-100 | gray-100 | gray-10 | gray-10 | gray-10 | #3d70b2 |
| gray-70 | gray-70 | gray-30 | gray-30 | gray-30 | #5a6872 |
| white-0 | white-0 | white-0 | white-0 | white-0 | white-0 |
| white-0 | white-0 | gray-100 | gray-100 | gray-100 | white-0 |
| red-60 | red-60 | red-40 | red-40 | red-50 | #e0182d |
| green-60 | green-60 | green-40 | green-40 | green-40 | #5aa700 |
| yellow-30 | yellow-30 | yellow-30 | yellow-30 | yellow-30 | #efc100 |
| blue-70 | blue-70 | blue-50 | blue-50 | blue-50 | #5aaafa |
| red-50 | red-50 | red-60 | red-60 | red-60 | #ff5050 |
| green-40 | green-40 | green-50 | green-50 | green-50 | #8cd211 |
| yellow-30 | yellow-30 | yellow-30 | yellow-30 | yellow-30 | #FDD600 |
| blue-50 | blue-50 | blue-60 | blue-60 | blue-60 | #5aaafa |
| rgba(22, 22, 22, 0.5) | rgba(22, 22, 22, 0.5) | rgba(0, 0, 0, 0.65) | rgba(0, 0, 0, 0.65) | rgba(0, 0, 0, 0.65) | rgba(223, 227, 230, 0.5) |
| gray-50 | gray-50 | gray-50 | gray-50 | gray-60 | #8897a2 |
| rgba(0, 0, 0, 0.3) | rgba(0, 0, 0, 0.3) | rgba(0, 0, 0, 0.8) | rgba(0, 0, 0, 0.8) | rgba(0, 0, 0, 0.8) | rgba(0, 0, 0, 0.3) |
| blue-60 | blue-60 | blue-60 | blue-60 | blue-60 | #3d70b2 |
| gray-80 | gray-80 | gray-60 | gray-60 | gray-60 | cool-gray-70 |
| blue-60 | blue-60 | white-0 | white-0 | white-0 | #3d70b2 |
| red-60 | red-60 | red-60 | red-60 | red-60 | red-60 |
| red-60 | red-60 | red-40 | red-40 | red-50 | red-60 |
| blue-60 | blue-60 | white-0 | white-0 | white-0 | #3d70b2 |
| white-0 | white-0 | blue-60 | blue-60 | blue-60 | #3d70b2 |
| #0353e9 | #0353e9 | #0151e4 | #0353e9 | #0353e9 | #30588c |
| blue-70 | blue-70 | blue-30 | blue-30 | blue-30 | #294c86 |
| #4c4c4c | #4c4c4c | gray-60Hover | #606060 | #606060 | #4d5b65 |
| #0353e9 | #0353e9 | white-0 | gray-10 | gray-10 | #5a6872 |
| #e5e5e5 | #e5e5e5 | gray-80Hover | #4c4c4c | #353535 | #EEF4FC |
| #e5e5e5 | #e5e5e5 | #5E5E5E | #656565 | #4c4c4c | #EEF4FC |
| #cacaca | #cacaca | #616161 | #656565 | #4c4c4c | #DFEAFA |
| #b81921 | #b81921 | #b81921 | #b81921 | #b81921 | #c70014 |
| #e5e5e5 | #e5e5e5 | gray-70Hover | #4c4c4c | #353535 | #eef4fc |
| blue-80 | blue-80 | blue-80 | blue-80 | blue-80 | #30588c |
| gray-60 | gray-60 | gray-70 | gray-80 | gray-80 | #414f59 |
| blue-80 | blue-80 | gray-30 | gray-30 | gray-30 | #414f59 |
| gray-30 | gray-30 | gray-70 | gray-60 | gray-70 | #DFEAFA |
| gray-30 | gray-30 | gray-50 | gray-50 | gray-60 | #DFEAFA |
| red-80 | red-80 | red-80 | red-80 | red-80 | #AD1625 |
| gray-20 | gray-20 | gray-70 | gray-70 | gray-80 | #EEF4FC |
| gray-20 | gray-20 | gray-50 | gray-60 | gray-70 | #EEF4FC |
| blue-20 | blue-20 | blue-70 | blue-70 | blue-80 | #f4f7fb |
| #e5e5e5 | #e5e5e5 | gray-80Hover | #353535 | #353535 | rgba(61, 112, 178, .1) |
| gray-30 | gray-30 | gray-60 | gray-70 | gray-70 | rgba(61, 112, 178, .1) |
| purple-60 | purple-60 | purple-40 | purple-40 | purple-40 | #294c86 |
| gray-10 | white-0 | gray-70 | gray-80 | gray-90 | #fafbfd |
| gray-30 | gray-30 | gray-50 | gray-60 | gray-70 | #dfe3e6 |
| gray-50 | gray-50 | gray-30 | gray-40 | gray-50 | #cdd1d4 |
| #4c4c4c | #4c4c4c | white-hover | #e5e5e5 | #e5e5e5 | #4c4c4c |
| gray-30 | gray-30 | gray-70 | gray-60 | gray-70 | #DFEAFA |
| #e5e5e5 | #e5e5e5 | gray-80Hover | #4c4c4c | #353535 | #EEF4FC |
| gray-20 | gray-20 | gray-60 | gray-60 | gray-70 | #EEF4FC |
| gray-20 | gray-20 | gray-100 | gray-100 | gray-100 | gray-20 |
| gray-30 | gray-30 | gray-70 | gray-60 | gray-70 | #DFEAFA |
| gray-30 | gray-30 | gray-60 | gray-60 | gray-70 | #DFEAFA |
| red-80 | red-80 | red-80 | red-80 | red-80 | #AD1625 |
| blue-80 | blue-80 | blue-80 | blue-80 | blue-80 | #30588c |
| gray-60 | gray-60 | gray-70 | gray-80 | gray-80 | #414f59 |
| blue-80 | blue-80 | gray-30 | gray-30 | gray-30 | #414f59 |
| white-0 | white-0 | gray-100 | gray-100 | gray-100 | white-0 |
| white-0 | white-0 | blue-60 | blue-60 | blue-60 | #3d70b2 |
| #e5e5e5 | #e5e5e5 | gray-80Hover | #4c4c4c | #353535 | #EEF4FC |
| #e5e5e5 | #e5e5e5 | gray-70Hover | #4c4c4c | #353535 | #EEF4FC |
| #e5e5e5 | #e5e5e5 | gray-70Hover | #4c4c4c | #353535 | #EEF4FC |
| #4c4c4c | #4c4c4c | white-hover | #e5e5e5 | #e5e5e5 | #4c4c4c |
| blue-70 | blue-70 | blue-30 | blue-30 | blue-30 | #294c86 |
| #b81921 | #b81921 | #b81921 | #b81921 | #b81921 | #c70014 |
| #0353e9 | #0353e9 | #0151e4 | #0353e9 | #0353e9 | #30588c |
| #4c4c4c | #4c4c4c | gray-60Hover | #606060 | #606060 | #4d5b65 |
| #0353e9 | #0353e9 | white-0 | gray-10 | gray-10 | #5a6872 |
| gray-20 | gray-20 | gray-70 | gray-70 | gray-80 | #EEF4FC |
| #cacaca | #cacaca | gray-70Hover | #656565 | #4c4c4c | #DFEAFA |
| gray-20 | gray-20 | gray-60 | gray-70 | gray-80 | #EEF4FC |
| #cacaca | #cacaca | #616161 | #656565 | #4c4c4c | #DFEAFA |
| gray-100 | gray-100 | gray-10 | gray-10 | gray-10 | #5a6872 |
| gray-30 | gray-30 | gray-50 | gray-60 | gray-70 | #DFEAFA |
| gray-10 | white-0 | gray-70 | gray-80 | gray-90 | #fafbfd |
| gray-30 | gray-30 | gray-50 | gray-60 | gray-70 | #dfe3e6 |
| gray-30 | gray-30 | gray-50 | gray-60 | gray-70 | #dfe3e6 |
| gray-30 | gray-30 | gray-50 | gray-60 | gray-70 | #dfe3e6 |
| gray-50 | gray-50 | gray-30 | gray-40 | gray-50 | #cdd1d4 |
| gray-50 | gray-50 | gray-30 | gray-40 | gray-50 | #cdd1d4 |
| gray-50 | gray-50 | gray-30 | gray-40 | gray-50 | #cdd1d4 |
| #e5e5e5 | #e5e5e5 | gray-80Hover | #353535 | #353535 | rgba(61, 112, 178, .1) |
| gray-30 | gray-30 | gray-60 | gray-70 | gray-70 | rgba(61, 112, 178, .1) |
@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();
}
}
$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();
}
}
Current theme: white
Change theme
Tokens
field-01field-02inverse-01inverse-02