diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index b18ca7a8c3dd..e5825aeb2a68 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -131,6 +131,7 @@
- [❌custom-property [mixin]](#custom-property-mixin)
- [❌should-emit [function]](#should-emit-function)
- [✅carbon--theme [mixin]](#carbon--theme-mixin)
+ - [❌emit-component-tokens [mixin]](#emit-component-tokens-mixin)
- [✅carbon--theme--g10 [variable]](#carbon--theme--g10-variable)
- [✅carbon--theme--g90 [variable]](#carbon--theme--g90-variable)
- [✅carbon--theme--g100 [variable]](#carbon--theme--g100-variable)
@@ -1826,6 +1827,7 @@ $prefix: 'bx';
- [select [mixin]](#select-mixin)
- [slider [mixin]](#slider-mixin)
- [tabs [mixin]](#tabs-mixin)
+ - [tag-theme [mixin]](#tag-theme-mixin)
- [tags [mixin]](#tags-mixin)
- [text-area [mixin]](#text-area-mixin)
- [text-input [mixin]](#text-input-mixin)
@@ -4062,6 +4064,7 @@ $custom-property-prefix: 'cds';
- **Group**: [@carbon/themes](#carbonthemes)
- **Used by**:
- [carbon--theme [mixin]](#carbon--theme-mixin)
+ - [emit-component-tokens [mixin]](#emit-component-tokens-mixin)
- [custom-properties [mixin]](#custom-properties-mixin)
### ❌custom-property [mixin]
@@ -4122,6 +4125,8 @@ Define theme variables from a map of tokens
```scss
@mixin carbon--theme($theme: $carbon--theme, $emit-custom-properties: false) {
+ $parent-carbon-theme: $carbon--theme;
+ $carbon--theme: $theme !global;
$interactive-01: map-get($theme, 'interactive-01') !global;
$interactive-02: map-get($theme, 'interactive-02') !global;
$interactive-03: map-get($theme, 'interactive-03') !global;
@@ -4639,7 +4644,12 @@ Define theme variables from a map of tokens
) !global;
}
@if $emit-custom-properties == true {
- @if should-emit($theme, $carbon--theme, 'interactive-01', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'interactive-01',
+ $emit-difference
+ )
{
@include custom-property(
'interactive-01',
@@ -4647,7 +4657,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'interactive-02', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'interactive-02',
+ $emit-difference
+ )
{
@include custom-property(
'interactive-02',
@@ -4655,7 +4670,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'interactive-03', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'interactive-03',
+ $emit-difference
+ )
{
@include custom-property(
'interactive-03',
@@ -4663,7 +4683,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'interactive-04', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'interactive-04',
+ $emit-difference
+ )
{
@include custom-property(
'interactive-04',
@@ -4671,112 +4696,168 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'ui-background', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'ui-background',
+ $emit-difference
+ )
+ {
@include custom-property(
'ui-background',
map-get($theme, 'ui-background')
);
}
- @if should-emit($theme, $carbon--theme, 'ui-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-01', $emit-difference) {
@include custom-property('ui-01', map-get($theme, 'ui-01'));
}
- @if should-emit($theme, $carbon--theme, 'ui-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-02', $emit-difference) {
@include custom-property('ui-02', map-get($theme, 'ui-02'));
}
- @if should-emit($theme, $carbon--theme, 'ui-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-03', $emit-difference) {
@include custom-property('ui-03', map-get($theme, 'ui-03'));
}
- @if should-emit($theme, $carbon--theme, 'ui-04', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-04', $emit-difference) {
@include custom-property('ui-04', map-get($theme, 'ui-04'));
}
- @if should-emit($theme, $carbon--theme, 'ui-05', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-05', $emit-difference) {
@include custom-property('ui-05', map-get($theme, 'ui-05'));
}
- @if should-emit($theme, $carbon--theme, 'text-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-01', $emit-difference) {
@include custom-property('text-01', map-get($theme, 'text-01'));
}
- @if should-emit($theme, $carbon--theme, 'text-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-02', $emit-difference) {
@include custom-property('text-02', map-get($theme, 'text-02'));
}
- @if should-emit($theme, $carbon--theme, 'text-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-03', $emit-difference) {
@include custom-property('text-03', map-get($theme, 'text-03'));
}
- @if should-emit($theme, $carbon--theme, 'text-04', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-04', $emit-difference) {
@include custom-property('text-04', map-get($theme, 'text-04'));
}
- @if should-emit($theme, $carbon--theme, 'text-05', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-05', $emit-difference) {
@include custom-property('text-05', map-get($theme, 'text-05'));
}
- @if should-emit($theme, $carbon--theme, 'text-error', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'text-error',
+ $emit-difference
+ )
+ {
@include custom-property('text-error', map-get($theme, 'text-error'));
}
- @if should-emit($theme, $carbon--theme, 'icon-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'icon-01', $emit-difference) {
@include custom-property('icon-01', map-get($theme, 'icon-01'));
}
- @if should-emit($theme, $carbon--theme, 'icon-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'icon-02', $emit-difference) {
@include custom-property('icon-02', map-get($theme, 'icon-02'));
}
- @if should-emit($theme, $carbon--theme, 'icon-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'icon-03', $emit-difference) {
@include custom-property('icon-03', map-get($theme, 'icon-03'));
}
- @if should-emit($theme, $carbon--theme, 'link-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'link-01', $emit-difference) {
@include custom-property('link-01', map-get($theme, 'link-01'));
}
- @if should-emit($theme, $carbon--theme, 'inverse-link', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'inverse-link',
+ $emit-difference
+ )
+ {
@include custom-property('inverse-link', map-get($theme, 'inverse-link'));
}
- @if should-emit($theme, $carbon--theme, 'field-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'field-01', $emit-difference)
+ {
@include custom-property('field-01', map-get($theme, 'field-01'));
}
- @if should-emit($theme, $carbon--theme, 'field-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'field-02', $emit-difference)
+ {
@include custom-property('field-02', map-get($theme, 'field-02'));
}
- @if should-emit($theme, $carbon--theme, 'inverse-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'inverse-01',
+ $emit-difference
+ )
+ {
@include custom-property('inverse-01', map-get($theme, 'inverse-01'));
}
- @if should-emit($theme, $carbon--theme, 'inverse-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'inverse-02',
+ $emit-difference
+ )
+ {
@include custom-property('inverse-02', map-get($theme, 'inverse-02'));
}
- @if should-emit($theme, $carbon--theme, 'support-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'support-01',
+ $emit-difference
+ )
+ {
@include custom-property('support-01', map-get($theme, 'support-01'));
}
- @if should-emit($theme, $carbon--theme, 'support-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'support-02',
+ $emit-difference
+ )
+ {
@include custom-property('support-02', map-get($theme, 'support-02'));
}
- @if should-emit($theme, $carbon--theme, 'support-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'support-03',
+ $emit-difference
+ )
+ {
@include custom-property('support-03', map-get($theme, 'support-03'));
}
- @if should-emit($theme, $carbon--theme, 'support-04', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'support-04',
+ $emit-difference
+ )
+ {
@include custom-property('support-04', map-get($theme, 'support-04'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-support-01',
$emit-difference
)
@@ -4789,7 +4870,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-support-02',
$emit-difference
)
@@ -4802,7 +4883,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-support-03',
$emit-difference
)
@@ -4815,7 +4896,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-support-04',
$emit-difference
)
@@ -4826,21 +4907,27 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'overlay-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'overlay-01',
+ $emit-difference
+ )
+ {
@include custom-property('overlay-01', map-get($theme, 'overlay-01'));
}
- @if should-emit($theme, $carbon--theme, 'danger', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) {
@include custom-property('danger', map-get($theme, 'danger'));
}
- @if should-emit($theme, $carbon--theme, 'focus', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'focus', $emit-difference) {
@include custom-property('focus', map-get($theme, 'focus'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-focus-ui',
$emit-difference
)
@@ -4851,14 +4938,25 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-primary', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-primary',
+ $emit-difference
+ )
+ {
@include custom-property(
'hover-primary',
map-get($theme, 'hover-primary')
);
}
- @if should-emit($theme, $carbon--theme, 'active-primary', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'active-primary',
+ $emit-difference
+ )
{
@include custom-property(
'active-primary',
@@ -4868,7 +4966,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'hover-primary-text',
$emit-difference
)
@@ -4879,7 +4977,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-secondary', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-secondary',
+ $emit-difference
+ )
{
@include custom-property(
'hover-secondary',
@@ -4889,7 +4992,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'active-secondary',
$emit-difference
)
@@ -4900,7 +5003,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-tertiary', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-tertiary',
+ $emit-difference
+ )
{
@include custom-property(
'hover-tertiary',
@@ -4908,7 +5016,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'active-tertiary', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'active-tertiary',
+ $emit-difference
+ )
{
@include custom-property(
'active-tertiary',
@@ -4916,21 +5029,29 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-ui', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'hover-ui', $emit-difference)
+ {
@include custom-property('hover-ui', map-get($theme, 'hover-ui'));
}
- @if should-emit($theme, $carbon--theme, 'active-ui', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
+ {
@include custom-property('active-ui', map-get($theme, 'active-ui'));
}
- @if should-emit($theme, $carbon--theme, 'selected-ui', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'selected-ui',
+ $emit-difference
+ )
+ {
@include custom-property('selected-ui', map-get($theme, 'selected-ui'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'selected-light-ui',
$emit-difference
)
@@ -4943,7 +5064,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'hover-selected-ui',
$emit-difference
)
@@ -4956,7 +5077,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-hover-ui',
$emit-difference
)
@@ -4967,85 +5088,163 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-danger', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-danger',
+ $emit-difference
+ )
+ {
@include custom-property('hover-danger', map-get($theme, 'hover-danger'));
}
- @if should-emit($theme, $carbon--theme, 'active-danger', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'active-danger',
+ $emit-difference
+ )
+ {
@include custom-property(
'active-danger',
map-get($theme, 'active-danger')
);
}
- @if should-emit($theme, $carbon--theme, 'hover-row', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'hover-row', $emit-difference)
+ {
@include custom-property('hover-row', map-get($theme, 'hover-row'));
}
- @if should-emit($theme, $carbon--theme, 'visited-link', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'visited-link',
+ $emit-difference
+ )
+ {
@include custom-property('visited-link', map-get($theme, 'visited-link'));
}
- @if should-emit($theme, $carbon--theme, 'disabled-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'disabled-01',
+ $emit-difference
+ )
+ {
@include custom-property('disabled-01', map-get($theme, 'disabled-01'));
}
- @if should-emit($theme, $carbon--theme, 'disabled-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'disabled-02',
+ $emit-difference
+ )
+ {
@include custom-property('disabled-02', map-get($theme, 'disabled-02'));
}
- @if should-emit($theme, $carbon--theme, 'disabled-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'disabled-03',
+ $emit-difference
+ )
+ {
@include custom-property('disabled-03', map-get($theme, 'disabled-03'));
}
- @if should-emit($theme, $carbon--theme, 'highlight', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'highlight', $emit-difference)
+ {
@include custom-property('highlight', map-get($theme, 'highlight'));
}
- @if should-emit($theme, $carbon--theme, 'decorative-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'decorative-01',
+ $emit-difference
+ )
+ {
@include custom-property(
'decorative-01',
map-get($theme, 'decorative-01')
);
}
- @if should-emit($theme, $carbon--theme, 'skeleton-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'skeleton-01',
+ $emit-difference
+ )
+ {
@include custom-property('skeleton-01', map-get($theme, 'skeleton-01'));
}
- @if should-emit($theme, $carbon--theme, 'skeleton-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'skeleton-02',
+ $emit-difference
+ )
+ {
@include custom-property('skeleton-02', map-get($theme, 'skeleton-02'));
}
- @if should-emit($theme, $carbon--theme, 'brand-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'brand-01', $emit-difference)
+ {
@include custom-property('brand-01', map-get($theme, 'brand-01'));
}
- @if should-emit($theme, $carbon--theme, 'brand-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'brand-02', $emit-difference)
+ {
@include custom-property('brand-02', map-get($theme, 'brand-02'));
}
- @if should-emit($theme, $carbon--theme, 'brand-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'brand-03', $emit-difference)
+ {
@include custom-property('brand-03', map-get($theme, 'brand-03'));
}
- @if should-emit($theme, $carbon--theme, 'active-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'active-01', $emit-difference)
+ {
@include custom-property('active-01', map-get($theme, 'active-01'));
}
- @if should-emit($theme, $carbon--theme, 'hover-field', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-field',
+ $emit-difference
+ )
+ {
@include custom-property('hover-field', map-get($theme, 'hover-field'));
}
- @if should-emit($theme, $carbon--theme, 'caption-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'caption-01',
+ $emit-difference
+ )
+ {
@include custom-property('caption-01', map-get($theme, 'caption-01'));
}
- @if should-emit($theme, $carbon--theme, 'label-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'label-01', $emit-difference)
+ {
@include custom-property('label-01', map-get($theme, 'label-01'));
}
- @if should-emit($theme, $carbon--theme, 'helper-text-01', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'helper-text-01',
+ $emit-difference
+ )
{
@include custom-property(
'helper-text-01',
@@ -5053,43 +5252,73 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'body-short-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'body-short-01',
+ $emit-difference
+ )
+ {
@include custom-property(
'body-short-01',
map-get($theme, 'body-short-01')
);
}
- @if should-emit($theme, $carbon--theme, 'body-long-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'body-long-01',
+ $emit-difference
+ )
+ {
@include custom-property('body-long-01', map-get($theme, 'body-long-01'));
}
- @if should-emit($theme, $carbon--theme, 'body-short-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'body-short-02',
+ $emit-difference
+ )
+ {
@include custom-property(
'body-short-02',
map-get($theme, 'body-short-02')
);
}
- @if should-emit($theme, $carbon--theme, 'body-long-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'body-long-02',
+ $emit-difference
+ )
+ {
@include custom-property('body-long-02', map-get($theme, 'body-long-02'));
}
- @if should-emit($theme, $carbon--theme, 'code-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'code-01', $emit-difference) {
@include custom-property('code-01', map-get($theme, 'code-01'));
}
- @if should-emit($theme, $carbon--theme, 'code-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'code-02', $emit-difference) {
@include custom-property('code-02', map-get($theme, 'code-02'));
}
- @if should-emit($theme, $carbon--theme, 'heading-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'heading-01',
+ $emit-difference
+ )
+ {
@include custom-property('heading-01', map-get($theme, 'heading-01'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-01',
$emit-difference
)
@@ -5100,13 +5329,19 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'heading-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'heading-02',
+ $emit-difference
+ )
+ {
@include custom-property('heading-02', map-get($theme, 'heading-02'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-02',
$emit-difference
)
@@ -5119,7 +5354,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-03',
$emit-difference
)
@@ -5132,7 +5367,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-04',
$emit-difference
)
@@ -5145,7 +5380,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-05',
$emit-difference
)
@@ -5158,7 +5393,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-06',
$emit-difference
)
@@ -5171,7 +5406,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-07',
$emit-difference
)
@@ -5184,7 +5419,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-01',
$emit-difference
)
@@ -5197,7 +5432,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-02',
$emit-difference
)
@@ -5210,7 +5445,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-03',
$emit-difference
)
@@ -5223,7 +5458,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-04',
$emit-difference
)
@@ -5236,7 +5471,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-05',
$emit-difference
)
@@ -5249,7 +5484,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-06',
$emit-difference
)
@@ -5262,7 +5497,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-paragraph-01',
$emit-difference
)
@@ -5273,81 +5508,189 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'quotation-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'quotation-01',
+ $emit-difference
+ )
+ {
@include custom-property('quotation-01', map-get($theme, 'quotation-01'));
}
- @if should-emit($theme, $carbon--theme, 'quotation-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'quotation-02',
+ $emit-difference
+ )
+ {
@include custom-property('quotation-02', map-get($theme, 'quotation-02'));
}
- @if should-emit($theme, $carbon--theme, 'display-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'display-01',
+ $emit-difference
+ )
+ {
@include custom-property('display-01', map-get($theme, 'display-01'));
}
- @if should-emit($theme, $carbon--theme, 'display-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'display-02',
+ $emit-difference
+ )
+ {
@include custom-property('display-02', map-get($theme, 'display-02'));
}
- @if should-emit($theme, $carbon--theme, 'display-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'display-03',
+ $emit-difference
+ )
+ {
@include custom-property('display-03', map-get($theme, 'display-03'));
}
- @if should-emit($theme, $carbon--theme, 'display-04', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'display-04',
+ $emit-difference
+ )
+ {
@include custom-property('display-04', map-get($theme, 'display-04'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-01',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-01', map-get($theme, 'spacing-01'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-02',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-02', map-get($theme, 'spacing-02'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-03',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-03', map-get($theme, 'spacing-03'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-04', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-04',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-04', map-get($theme, 'spacing-04'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-05', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-05',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-05', map-get($theme, 'spacing-05'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-06', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-06',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-06', map-get($theme, 'spacing-06'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-07', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-07',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-07', map-get($theme, 'spacing-07'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-08', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-08',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-08', map-get($theme, 'spacing-08'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-09', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-09',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-09', map-get($theme, 'spacing-09'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-10', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-10',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-10', map-get($theme, 'spacing-10'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-11', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-11',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-11', map-get($theme, 'spacing-11'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-12', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-12',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-12', map-get($theme, 'spacing-12'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'fluid-spacing-01',
$emit-difference
)
@@ -5360,7 +5703,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'fluid-spacing-02',
$emit-difference
)
@@ -5373,7 +5716,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'fluid-spacing-03',
$emit-difference
)
@@ -5386,7 +5729,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'fluid-spacing-04',
$emit-difference
)
@@ -5397,66 +5740,118 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'layout-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-01', $emit-difference)
+ {
@include custom-property('layout-01', map-get($theme, 'layout-01'));
}
- @if should-emit($theme, $carbon--theme, 'layout-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-02', $emit-difference)
+ {
@include custom-property('layout-02', map-get($theme, 'layout-02'));
}
- @if should-emit($theme, $carbon--theme, 'layout-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-03', $emit-difference)
+ {
@include custom-property('layout-03', map-get($theme, 'layout-03'));
}
- @if should-emit($theme, $carbon--theme, 'layout-04', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-04', $emit-difference)
+ {
@include custom-property('layout-04', map-get($theme, 'layout-04'));
}
- @if should-emit($theme, $carbon--theme, 'layout-05', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-05', $emit-difference)
+ {
@include custom-property('layout-05', map-get($theme, 'layout-05'));
}
- @if should-emit($theme, $carbon--theme, 'layout-06', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-06', $emit-difference)
+ {
@include custom-property('layout-06', map-get($theme, 'layout-06'));
}
- @if should-emit($theme, $carbon--theme, 'layout-07', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-07', $emit-difference)
+ {
@include custom-property('layout-07', map-get($theme, 'layout-07'));
}
- @if should-emit($theme, $carbon--theme, 'container-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-01',
+ $emit-difference
+ )
+ {
@include custom-property('container-01', map-get($theme, 'container-01'));
}
- @if should-emit($theme, $carbon--theme, 'container-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-02',
+ $emit-difference
+ )
+ {
@include custom-property('container-02', map-get($theme, 'container-02'));
}
- @if should-emit($theme, $carbon--theme, 'container-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-03',
+ $emit-difference
+ )
+ {
@include custom-property('container-03', map-get($theme, 'container-03'));
}
- @if should-emit($theme, $carbon--theme, 'container-04', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-04',
+ $emit-difference
+ )
+ {
@include custom-property('container-04', map-get($theme, 'container-04'));
}
- @if should-emit($theme, $carbon--theme, 'container-05', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-05',
+ $emit-difference
+ )
+ {
@include custom-property('container-05', map-get($theme, 'container-05'));
}
- @if should-emit($theme, $carbon--theme, 'icon-size-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'icon-size-01',
+ $emit-difference
+ )
+ {
@include custom-property('icon-size-01', map-get($theme, 'icon-size-01'));
}
- @if should-emit($theme, $carbon--theme, 'icon-size-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'icon-size-02',
+ $emit-difference
+ )
+ {
@include custom-property('icon-size-02', map-get($theme, 'icon-size-02'));
}
}
@content;
+
// Reset to default theme after apply in content
- @if $theme != $carbon--theme {
+ @if $carbon--theme != $parent-carbon-theme {
+ $carbon--theme: $parent-carbon-theme !global;
+
@include carbon--theme();
}
}
@@ -5501,6 +5896,7 @@ Define theme variables from a map of tokens
- **Requires**:
- [custom-property [mixin]](#custom-property-mixin)
- [should-emit [function]](#should-emit-function)
+ - [carbon--theme [variable]](#carbon--theme-variable)
- [interactive-01 [variable]](#interactive-01-variable)
- [interactive-02 [variable]](#interactive-02-variable)
- [interactive-03 [variable]](#interactive-03-variable)
@@ -5629,7 +6025,57 @@ Define theme variables from a map of tokens
- [icon-size-01 [variable]](#icon-size-01-variable)
- [icon-size-02 [variable]](#icon-size-02-variable)
- [custom-property-prefix [variable]](#custom-property-prefix-variable)
+
+### ❌emit-component-tokens [mixin]
+
+
+Source code
+
+```scss
+@mixin emit-component-tokens($tokens, $theme) {
+ @if type-of($tokens) == 'map' {
+ @each $key, $options in $tokens {
+ @each $option in $options {
+ $theme: map-get($option, 'theme');
+
+ @if ($theme == $carbon--theme) {
+ $value: map-get($option, 'value');
+
+ --#{$custom-property-prefix}-#{$key}: #{$value};
+ }
+ }
+ }
+ } @else {
+ @error 'Unable to find map';
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| --------- | ----------------------- | -------- | ------------- |
+| `$tokens` | Map of component tokens | `Map` | — |
+| `$theme` | Theme identifier | `String` | — |
+
+**Example**:
+
+
+Example code
+
+```scss
+@include emit-component-tokens($component-tokens);
+```
+
+
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Requires**:
+ - [tokens [variable]](#tokens-variable)
- [carbon--theme [variable]](#carbon--theme-variable)
+ - [custom-property-prefix [variable]](#custom-property-prefix-variable)
### ✅carbon--theme--g10 [variable]
@@ -6031,6 +6477,7 @@ $carbon--theme: (
- **Type**: `Map`
- **Used by**:
- [carbon--theme [mixin]](#carbon--theme-mixin)
+ - [emit-component-tokens [mixin]](#emit-component-tokens-mixin)
### ✅interactive-01 [variable]
@@ -6832,7 +7279,6 @@ $inverse-01: if(
- [inline-notifications [mixin]](#inline-notifications-mixin)
- [toast-notifications [mixin]](#toast-notifications-mixin)
- [progress-indicator [mixin]](#progress-indicator-mixin)
- - [tags [mixin]](#tags-mixin)
- [tooltip--icon [mixin]](#tooltip--icon-mixin)
- [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
- [tooltip [mixin]](#tooltip-mixin)
@@ -6864,7 +7310,6 @@ $inverse-02: if(
- [listbox [mixin]](#listbox-mixin)
- [inline-notifications [mixin]](#inline-notifications-mixin)
- [toast-notifications [mixin]](#toast-notifications-mixin)
- - [tags [mixin]](#tags-mixin)
- [tooltip--icon [mixin]](#tooltip--icon-mixin)
- [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
- [tooltip [mixin]](#tooltip-mixin)
@@ -7181,6 +7626,7 @@ $focus: if(
- [modal [mixin]](#modal-mixin)
- [radio-button [mixin]](#radio-button-mixin)
- [search [mixin]](#search-mixin)
+ - [tags [mixin]](#tags-mixin)
- [toggle [mixin]](#toggle-mixin)
### ✅inverse-focus-ui [variable]
@@ -7207,7 +7653,6 @@ $inverse-focus-ui: if(
- [carbon--theme [mixin]](#carbon--theme-mixin)
- [inline-notifications [mixin]](#inline-notifications-mixin)
- [toast-notifications [mixin]](#toast-notifications-mixin)
- - [tags [mixin]](#tags-mixin)
- [tooltip [mixin]](#tooltip-mixin)
### ✅hover-primary [variable]
@@ -7573,7 +8018,6 @@ $inverse-hover-ui: if(
- **Used by**:
- [carbon--theme [mixin]](#carbon--theme-mixin)
- [inline-notifications [mixin]](#inline-notifications-mixin)
- - [tags [mixin]](#tags-mixin)
### ✅hover-danger [variable]
@@ -7705,6 +8149,7 @@ $disabled-01: if(
- [content-switcher [mixin]](#content-switcher-mixin)
- [file-uploader [mixin]](#file-uploader-mixin)
- [slider [mixin]](#slider-mixin)
+ - [tags [mixin]](#tags-mixin)
- [text-input [mixin]](#text-input-mixin)
- [toggle [mixin]](#toggle-mixin)
@@ -12699,6 +13144,7 @@ $tokens: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
- **Used by**:
+ - [emit-component-tokens [mixin]](#emit-component-tokens-mixin)
- [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
@@ -22749,12 +23195,24 @@ Tabs styles
@mixin tag-theme() {
background-color: $bg-color;
color: $text-color;
+
+ .#{$prefix}--tag__close-icon {
+ &:hover {
+ background-color: $filter-hover-color;
+ }
+
+ svg {
+ fill: $text-color;
+ }
+ }
}
```
- **Group**: [tag](#tag)
+- **Requires**:
+ - [prefix [variable]](#prefix-variable)
- **Used by**:
- [tags [mixin]](#tags-mixin)
@@ -22770,7 +23228,11 @@ Tag styles
.#{$prefix}--tag {
@include button-reset($width: false);
@include type-style('label-01');
- @include tag-theme($ibm-color__gray-20, $ibm-color__gray-100);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-gray'),
+ get-token-value($tag-colors, 'tag-color-gray'),
+ get-token-value($tag-colors, 'tag-hover-gray')
+ );
display: inline-flex;
align-items: center;
@@ -22793,48 +23255,88 @@ Tag styles
}
.#{$prefix}--tag--red {
- @include tag-theme($ibm-color__red-20, $ibm-color__red-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-red'),
+ get-token-value($tag-colors, 'tag-color-red'),
+ get-token-value($tag-colors, 'tag-hover-red')
+ );
}
.#{$prefix}--tag--magenta {
- @include tag-theme($ibm-color__magenta-20, $ibm-color__magenta-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-magenta'),
+ get-token-value($tag-colors, 'tag-color-magenta'),
+ get-token-value($tag-colors, 'tag-hover-magenta')
+ );
}
.#{$prefix}--tag--purple {
- @include tag-theme($ibm-color__purple-20, $ibm-color__purple-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-purple'),
+ get-token-value($tag-colors, 'tag-color-purple'),
+ get-token-value($tag-colors, 'tag-hover-purple')
+ );
}
.#{$prefix}--tag--blue {
- @include tag-theme($ibm-color__blue-20, $ibm-color__blue-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-blue'),
+ get-token-value($tag-colors, 'tag-color-blue'),
+ get-token-value($tag-colors, 'tag-hover-blue')
+ );
}
.#{$prefix}--tag--cyan {
- @include tag-theme($ibm-color__cyan-20, $ibm-color__cyan-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-cyan'),
+ get-token-value($tag-colors, 'tag-color-cyan'),
+ get-token-value($tag-colors, 'tag-hover-cyan')
+ );
}
.#{$prefix}--tag--teal {
- @include tag-theme($ibm-color__teal-20, $ibm-color__teal-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-teal'),
+ get-token-value($tag-colors, 'tag-color-teal'),
+ get-token-value($tag-colors, 'tag-hover-teal')
+ );
}
.#{$prefix}--tag--green {
- @include tag-theme($ibm-color__green-20, $ibm-color__green-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-green'),
+ get-token-value($tag-colors, 'tag-color-green'),
+ get-token-value($tag-colors, 'tag-hover-green')
+ );
}
.#{$prefix}--tag--gray {
- @include tag-theme($ibm-color__gray-20, $ibm-color__gray-100);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-gray'),
+ get-token-value($tag-colors, 'tag-color-gray'),
+ get-token-value($tag-colors, 'tag-hover-gray')
+ );
}
.#{$prefix}--tag--cool-gray {
- @include tag-theme($ibm-color__cool-gray-20, $ibm-color__cool-gray-100);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-cool-gray'),
+ get-token-value($tag-colors, 'tag-color-cool-gray'),
+ get-token-value($tag-colors, 'tag-hover-cool-gray')
+ );
}
.#{$prefix}--tag--warm-gray {
- @include tag-theme($ibm-color__warm-gray-20, $ibm-color__warm-gray-100);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-warm-gray'),
+ get-token-value($tag-colors, 'tag-color-warm-gray'),
+ get-token-value($tag-colors, 'tag-hover-warm-gray')
+ );
}
.#{$prefix}--tag--disabled,
.#{$prefix}--tag--filter.#{$prefix}--tag--disabled {
- @include tag-theme($ibm-color__gray-10, $ibm-color__gray-30);
+ @include tag-theme($disabled-01, $disabled-02);
&:hover {
cursor: not-allowed;
@@ -22850,7 +23352,7 @@ Tag styles
// tags used for filtering
.#{$prefix}--tag--filter {
- @include tag-theme($inverse-02, $inverse-01);
+ cursor: pointer;
padding-right: rem(2px);
&:focus,
@@ -22869,19 +23371,11 @@ Tag styles
background-color: transparent;
border-radius: 50%;
cursor: pointer;
-
- &:hover {
- background-color: $inverse-hover-ui;
- }
- }
-
- .#{$prefix}--tag__close-icon svg {
- fill: $inverse-01;
}
.#{$prefix}--tag__close-icon:focus {
outline: none;
- box-shadow: inset 0 0 0 2px $inverse-focus-ui;
+ box-shadow: inset 0 0 0 2px $focus;
border-radius: 50%;
}
@@ -22914,11 +23408,9 @@ Tag styles
- [carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
- [ui-03 [variable]](#ui-03-variable)
- [text-01 [variable]](#text-01-variable)
- - [inverse-02 [variable]](#inverse-02-variable)
- - [inverse-01 [variable]](#inverse-01-variable)
- - [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
- - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
+ - [disabled-01 [variable]](#disabled-01-variable)
- [disabled-02 [variable]](#disabled-02-variable)
+ - [focus [variable]](#focus-variable)
## text-area
diff --git a/packages/components/src/components/tag/_mixins.scss b/packages/components/src/components/tag/_mixins.scss
index c2224b38b710..449d27f1b0f6 100644
--- a/packages/components/src/components/tag/_mixins.scss
+++ b/packages/components/src/components/tag/_mixins.scss
@@ -7,7 +7,17 @@
/// @access private
/// @group tag
-@mixin tag-theme($bg-color, $text-color) {
+@mixin tag-theme($bg-color, $text-color, $filter-hover-color: $bg-color) {
background-color: $bg-color;
color: $text-color;
+
+ .#{$prefix}--tag__close-icon {
+ &:hover {
+ background-color: $filter-hover-color;
+ }
+
+ svg {
+ fill: $text-color;
+ }
+ }
}
diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index 4bec2096ef14..605bf5c27096 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -8,8 +8,10 @@
@import '../../globals/scss/vars';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/typography';
+@import '../../globals/scss/component-tokens';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import 'mixins';
+@import 'tokens';
/// Tag styles
/// @access private
@@ -18,7 +20,11 @@
.#{$prefix}--tag {
@include button-reset($width: false);
@include type-style('label-01');
- @include tag-theme($ibm-color__gray-20, $ibm-color__gray-100);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-gray'),
+ get-token-value($tag-colors, 'tag-color-gray'),
+ get-token-value($tag-colors, 'tag-hover-gray'),
+ );
display: inline-flex;
align-items: center;
@@ -41,48 +47,88 @@
}
.#{$prefix}--tag--red {
- @include tag-theme($ibm-color__red-20, $ibm-color__red-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-red'),
+ get-token-value($tag-colors, 'tag-color-red'),
+ get-token-value($tag-colors, 'tag-hover-red'),
+ );
}
.#{$prefix}--tag--magenta {
- @include tag-theme($ibm-color__magenta-20, $ibm-color__magenta-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-magenta'),
+ get-token-value($tag-colors, 'tag-color-magenta'),
+ get-token-value($tag-colors, 'tag-hover-magenta'),
+ );
}
.#{$prefix}--tag--purple {
- @include tag-theme($ibm-color__purple-20, $ibm-color__purple-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-purple'),
+ get-token-value($tag-colors, 'tag-color-purple'),
+ get-token-value($tag-colors, 'tag-hover-purple'),
+ );
}
.#{$prefix}--tag--blue {
- @include tag-theme($ibm-color__blue-20, $ibm-color__blue-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-blue'),
+ get-token-value($tag-colors, 'tag-color-blue'),
+ get-token-value($tag-colors, 'tag-hover-blue'),
+ );
}
.#{$prefix}--tag--cyan {
- @include tag-theme($ibm-color__cyan-20, $ibm-color__cyan-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-cyan'),
+ get-token-value($tag-colors, 'tag-color-cyan'),
+ get-token-value($tag-colors, 'tag-hover-cyan'),
+ );
}
.#{$prefix}--tag--teal {
- @include tag-theme($ibm-color__teal-20, $ibm-color__teal-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-teal'),
+ get-token-value($tag-colors, 'tag-color-teal'),
+ get-token-value($tag-colors, 'tag-hover-teal'),
+ );
}
.#{$prefix}--tag--green {
- @include tag-theme($ibm-color__green-20, $ibm-color__green-70);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-green'),
+ get-token-value($tag-colors, 'tag-color-green'),
+ get-token-value($tag-colors, 'tag-hover-green'),
+ );
}
.#{$prefix}--tag--gray {
- @include tag-theme($ibm-color__gray-20, $ibm-color__gray-100);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-gray'),
+ get-token-value($tag-colors, 'tag-color-gray'),
+ get-token-value($tag-colors, 'tag-hover-gray'),
+ );
}
.#{$prefix}--tag--cool-gray {
- @include tag-theme($ibm-color__cool-gray-20, $ibm-color__cool-gray-100);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-cool-gray'),
+ get-token-value($tag-colors, 'tag-color-cool-gray'),
+ get-token-value($tag-colors, 'tag-hover-cool-gray'),
+ );
}
.#{$prefix}--tag--warm-gray {
- @include tag-theme($ibm-color__warm-gray-20, $ibm-color__warm-gray-100);
+ @include tag-theme(
+ get-token-value($tag-colors, 'tag-background-warm-gray'),
+ get-token-value($tag-colors, 'tag-color-warm-gray'),
+ get-token-value($tag-colors, 'tag-hover-warm-gray'),
+ );
}
.#{$prefix}--tag--disabled,
.#{$prefix}--tag--filter.#{$prefix}--tag--disabled {
- @include tag-theme($ibm-color__gray-10, $ibm-color__gray-30);
+ @include tag-theme($disabled-01, $disabled-02);
&:hover {
cursor: not-allowed;
@@ -98,7 +144,7 @@
// tags used for filtering
.#{$prefix}--tag--filter {
- @include tag-theme($inverse-02, $inverse-01);
+ cursor: pointer;
padding-right: rem(2px);
&:focus,
@@ -117,19 +163,11 @@
background-color: transparent;
border-radius: 50%;
cursor: pointer;
-
- &:hover {
- background-color: $inverse-hover-ui;
- }
- }
-
- .#{$prefix}--tag__close-icon svg {
- fill: $inverse-01;
}
.#{$prefix}--tag__close-icon:focus {
outline: none;
- box-shadow: inset 0 0 0 2px $inverse-focus-ui;
+ box-shadow: inset 0 0 0 2px $focus;
border-radius: 50%;
}
diff --git a/packages/components/src/components/tag/_tokens.scss b/packages/components/src/components/tag/_tokens.scss
new file mode 100644
index 000000000000..c87d672e3576
--- /dev/null
+++ b/packages/components/src/components/tag/_tokens.scss
@@ -0,0 +1,692 @@
+//
+// Copyright IBM Corp. 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '../../globals/scss/component-tokens';
+@import '../../globals/scss/vendor/@carbon/elements/scss/colors/colors';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+
+$tag-colors: (
+ // red
+ 'tag-background-red': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__red-20,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__red-20,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__red-80,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__red-80,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__red-20,
+ ),
+ ),
+ 'tag-color-red': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__red-70,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__red-70,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__red-30,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__red-30,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__red-70,
+ ),
+ ),
+ 'tag-hover-red': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__red-30,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__red-30,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__red-70,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__red-70,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__red-30,
+ ),
+ ),
+
+ // magenta
+ 'tag-background-magenta': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__magenta-20,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__magenta-20,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__magenta-80,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__magenta-80,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__magenta-20,
+ ),
+ ),
+ 'tag-color-magenta': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__magenta-70,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__magenta-70,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__magenta-30,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__magenta-30,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__magenta-70,
+ ),
+ ),
+ 'tag-hover-magenta': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__magenta-30,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__magenta-30,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__magenta-70,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__magenta-70,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__magenta-30,
+ ),
+ ),
+
+ // purple
+ 'tag-background-purple': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__purple-20,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__purple-20,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__purple-80,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__purple-80,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__purple-20,
+ ),
+ ),
+ 'tag-color-purple': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__purple-70,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__purple-70,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__purple-30,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__purple-30,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__purple-70,
+ ),
+ ),
+ 'tag-hover-purple': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__purple-30,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__purple-30,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__purple-70,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__purple-70,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__purple-30,
+ ),
+ ),
+
+ // blue
+ 'tag-background-blue': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__blue-20,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__blue-20,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__blue-80,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__blue-80,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__blue-20,
+ ),
+ ),
+ 'tag-color-blue': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__blue-70,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__blue-70,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__blue-30,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__blue-30,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__blue-70,
+ ),
+ ),
+ 'tag-hover-blue': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__blue-30,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__blue-30,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__blue-70,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__blue-70,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__blue-30,
+ ),
+ ),
+
+ // cyan
+ 'tag-background-cyan': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__cyan-20,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__cyan-20,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__cyan-80,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__cyan-80,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__cyan-20,
+ ),
+ ),
+ 'tag-color-cyan': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__cyan-70,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__cyan-70,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__cyan-30,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__cyan-30,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__cyan-70,
+ ),
+ ),
+ 'tag-hover-cyan': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__cyan-30,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__cyan-30,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__cyan-70,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__cyan-70,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__cyan-30,
+ ),
+ ),
+
+ // teal
+ 'tag-background-teal': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__teal-20,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__teal-20,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__teal-80,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__teal-80,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__teal-20,
+ ),
+ ),
+ 'tag-color-teal': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__teal-70,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__teal-70,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__teal-30,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__teal-30,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__teal-70,
+ ),
+ ),
+ 'tag-hover-teal': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__teal-30,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__teal-30,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__teal-70,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__teal-70,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__teal-30,
+ ),
+ ),
+
+ // green
+ 'tag-background-green': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__green-20,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__green-20,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__green-80,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__green-80,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__green-20,
+ ),
+ ),
+ 'tag-color-green': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__green-70,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__green-70,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__green-30,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__green-30,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__green-70,
+ ),
+ ),
+ 'tag-hover-green': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__green-30,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__green-30,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__green-70,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__green-70,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__green-30,
+ ),
+ ),
+
+ // gray
+ 'tag-background-gray': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__gray-20,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__gray-20,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__gray-80,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__gray-80,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__gray-20,
+ ),
+ ),
+ 'tag-color-gray': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__gray-70,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__gray-70,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__gray-30,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__gray-30,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__gray-70,
+ ),
+ ),
+ 'tag-hover-gray': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__gray-30,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__gray-30,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__gray-70,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__gray-70,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__gray-30,
+ ),
+ ),
+
+ // cool-gray
+ 'tag-background-cool-gray': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__cool-gray-20,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__cool-gray-20,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__cool-gray-80,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__cool-gray-80,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__cool-gray-20,
+ ),
+ ),
+ 'tag-color-cool-gray': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__cool-gray-70,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__cool-gray-70,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__cool-gray-30,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__cool-gray-30,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__cool-gray-70,
+ ),
+ ),
+ 'tag-hover-cool-gray': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__cool-gray-30,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__cool-gray-30,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__cool-gray-70,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__cool-gray-70,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__cool-gray-30,
+ ),
+ ),
+
+ // warm-gray
+ 'tag-background-warm-gray': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__warm-gray-20,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__warm-gray-20,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__warm-gray-80,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__warm-gray-80,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__warm-gray-20,
+ ),
+ ),
+ 'tag-color-warm-gray': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__warm-gray-70,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__warm-gray-70,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__warm-gray-30,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__warm-gray-30,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__warm-gray-70,
+ ),
+ ),
+ 'tag-hover-warm-gray': (
+ (
+ theme: $carbon--theme--white,
+ value: $carbon__warm-gray-30,
+ ),
+ (
+ theme: $carbon--theme--g10,
+ value: $carbon__warm-gray-30,
+ ),
+ (
+ theme: $carbon--theme--g90,
+ value: $carbon__warm-gray-70,
+ ),
+ (
+ theme: $carbon--theme--g100,
+ value: $carbon__warm-gray-70,
+ ),
+ (
+ theme: $carbon--theme--v9,
+ value: $carbon__warm-gray-30,
+ ),
+ ),
+);
diff --git a/packages/components/src/globals/scss/_component-tokens.scss b/packages/components/src/globals/scss/_component-tokens.scss
new file mode 100644
index 000000000000..8b8905606463
--- /dev/null
+++ b/packages/components/src/globals/scss/_component-tokens.scss
@@ -0,0 +1,43 @@
+//
+// Copyright IBM Corp. 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import 'vars';
+@import 'theme';
+@import 'feature-flags';
+
+$enable-css-custom-properties: feature-flag-enabled('enable-css-custom-properties');
+
+/// Get a component token value.
+/// @access public
+/// @param {Map} $tokens - Map of component tokens
+/// @param {String} $name - Token name
+/// @example get-token-value($component-tokens, 'tag-background-red');
+/// @returns {String} Token value
+/// @group component-tokens
+@function get-token-value($tokens, $name) {
+ $options: map-get($tokens, $name);
+
+ @if type-of($options) == 'list' {
+ @each $option in $options {
+ $theme: map-get($option, 'theme');
+
+ @if $theme == $carbon--theme {
+ $value: map-get($option, 'value');
+
+ @return if(
+ $enable-css-custom-properties == true,
+ var(--#{$custom-property-prefix}-#{$name}, #{$value}),
+ $value
+ )
+ }
+
+ @error 'Unable to find value for theme';
+ }
+ }
+
+ @error 'Unable to find list';
+}
diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md
index f1da2b9b3d9e..d87b4de3459d 100644
--- a/packages/elements/docs/sass.md
+++ b/packages/elements/docs/sass.md
@@ -131,6 +131,7 @@
- [❌custom-property [mixin]](#custom-property-mixin)
- [❌should-emit [function]](#should-emit-function)
- [✅carbon--theme [mixin]](#carbon--theme-mixin)
+ - [❌emit-component-tokens [mixin]](#emit-component-tokens-mixin)
- [✅carbon--theme--g10 [variable]](#carbon--theme--g10-variable)
- [✅carbon--theme--g90 [variable]](#carbon--theme--g90-variable)
- [✅carbon--theme--g100 [variable]](#carbon--theme--g100-variable)
@@ -3693,6 +3694,7 @@ $custom-property-prefix: 'cds';
- **Group**: [@carbon/themes](#carbonthemes)
- **Used by**:
- [carbon--theme [mixin]](#carbon--theme-mixin)
+ - [emit-component-tokens [mixin]](#emit-component-tokens-mixin)
- [custom-properties [mixin]](#custom-properties-mixin)
### ❌custom-property [mixin]
@@ -3753,6 +3755,8 @@ Define theme variables from a map of tokens
```scss
@mixin carbon--theme($theme: $carbon--theme, $emit-custom-properties: false) {
+ $parent-carbon-theme: $carbon--theme;
+ $carbon--theme: $theme !global;
$interactive-01: map-get($theme, 'interactive-01') !global;
$interactive-02: map-get($theme, 'interactive-02') !global;
$interactive-03: map-get($theme, 'interactive-03') !global;
@@ -4270,7 +4274,12 @@ Define theme variables from a map of tokens
) !global;
}
@if $emit-custom-properties == true {
- @if should-emit($theme, $carbon--theme, 'interactive-01', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'interactive-01',
+ $emit-difference
+ )
{
@include custom-property(
'interactive-01',
@@ -4278,7 +4287,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'interactive-02', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'interactive-02',
+ $emit-difference
+ )
{
@include custom-property(
'interactive-02',
@@ -4286,7 +4300,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'interactive-03', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'interactive-03',
+ $emit-difference
+ )
{
@include custom-property(
'interactive-03',
@@ -4294,7 +4313,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'interactive-04', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'interactive-04',
+ $emit-difference
+ )
{
@include custom-property(
'interactive-04',
@@ -4302,112 +4326,168 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'ui-background', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'ui-background',
+ $emit-difference
+ )
+ {
@include custom-property(
'ui-background',
map-get($theme, 'ui-background')
);
}
- @if should-emit($theme, $carbon--theme, 'ui-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-01', $emit-difference) {
@include custom-property('ui-01', map-get($theme, 'ui-01'));
}
- @if should-emit($theme, $carbon--theme, 'ui-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-02', $emit-difference) {
@include custom-property('ui-02', map-get($theme, 'ui-02'));
}
- @if should-emit($theme, $carbon--theme, 'ui-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-03', $emit-difference) {
@include custom-property('ui-03', map-get($theme, 'ui-03'));
}
- @if should-emit($theme, $carbon--theme, 'ui-04', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-04', $emit-difference) {
@include custom-property('ui-04', map-get($theme, 'ui-04'));
}
- @if should-emit($theme, $carbon--theme, 'ui-05', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-05', $emit-difference) {
@include custom-property('ui-05', map-get($theme, 'ui-05'));
}
- @if should-emit($theme, $carbon--theme, 'text-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-01', $emit-difference) {
@include custom-property('text-01', map-get($theme, 'text-01'));
}
- @if should-emit($theme, $carbon--theme, 'text-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-02', $emit-difference) {
@include custom-property('text-02', map-get($theme, 'text-02'));
}
- @if should-emit($theme, $carbon--theme, 'text-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-03', $emit-difference) {
@include custom-property('text-03', map-get($theme, 'text-03'));
}
- @if should-emit($theme, $carbon--theme, 'text-04', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-04', $emit-difference) {
@include custom-property('text-04', map-get($theme, 'text-04'));
}
- @if should-emit($theme, $carbon--theme, 'text-05', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-05', $emit-difference) {
@include custom-property('text-05', map-get($theme, 'text-05'));
}
- @if should-emit($theme, $carbon--theme, 'text-error', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'text-error',
+ $emit-difference
+ )
+ {
@include custom-property('text-error', map-get($theme, 'text-error'));
}
- @if should-emit($theme, $carbon--theme, 'icon-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'icon-01', $emit-difference) {
@include custom-property('icon-01', map-get($theme, 'icon-01'));
}
- @if should-emit($theme, $carbon--theme, 'icon-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'icon-02', $emit-difference) {
@include custom-property('icon-02', map-get($theme, 'icon-02'));
}
- @if should-emit($theme, $carbon--theme, 'icon-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'icon-03', $emit-difference) {
@include custom-property('icon-03', map-get($theme, 'icon-03'));
}
- @if should-emit($theme, $carbon--theme, 'link-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'link-01', $emit-difference) {
@include custom-property('link-01', map-get($theme, 'link-01'));
}
- @if should-emit($theme, $carbon--theme, 'inverse-link', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'inverse-link',
+ $emit-difference
+ )
+ {
@include custom-property('inverse-link', map-get($theme, 'inverse-link'));
}
- @if should-emit($theme, $carbon--theme, 'field-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'field-01', $emit-difference)
+ {
@include custom-property('field-01', map-get($theme, 'field-01'));
}
- @if should-emit($theme, $carbon--theme, 'field-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'field-02', $emit-difference)
+ {
@include custom-property('field-02', map-get($theme, 'field-02'));
}
- @if should-emit($theme, $carbon--theme, 'inverse-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'inverse-01',
+ $emit-difference
+ )
+ {
@include custom-property('inverse-01', map-get($theme, 'inverse-01'));
}
- @if should-emit($theme, $carbon--theme, 'inverse-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'inverse-02',
+ $emit-difference
+ )
+ {
@include custom-property('inverse-02', map-get($theme, 'inverse-02'));
}
- @if should-emit($theme, $carbon--theme, 'support-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'support-01',
+ $emit-difference
+ )
+ {
@include custom-property('support-01', map-get($theme, 'support-01'));
}
- @if should-emit($theme, $carbon--theme, 'support-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'support-02',
+ $emit-difference
+ )
+ {
@include custom-property('support-02', map-get($theme, 'support-02'));
}
- @if should-emit($theme, $carbon--theme, 'support-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'support-03',
+ $emit-difference
+ )
+ {
@include custom-property('support-03', map-get($theme, 'support-03'));
}
- @if should-emit($theme, $carbon--theme, 'support-04', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'support-04',
+ $emit-difference
+ )
+ {
@include custom-property('support-04', map-get($theme, 'support-04'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-support-01',
$emit-difference
)
@@ -4420,7 +4500,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-support-02',
$emit-difference
)
@@ -4433,7 +4513,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-support-03',
$emit-difference
)
@@ -4446,7 +4526,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-support-04',
$emit-difference
)
@@ -4457,21 +4537,27 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'overlay-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'overlay-01',
+ $emit-difference
+ )
+ {
@include custom-property('overlay-01', map-get($theme, 'overlay-01'));
}
- @if should-emit($theme, $carbon--theme, 'danger', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) {
@include custom-property('danger', map-get($theme, 'danger'));
}
- @if should-emit($theme, $carbon--theme, 'focus', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'focus', $emit-difference) {
@include custom-property('focus', map-get($theme, 'focus'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-focus-ui',
$emit-difference
)
@@ -4482,14 +4568,25 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-primary', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-primary',
+ $emit-difference
+ )
+ {
@include custom-property(
'hover-primary',
map-get($theme, 'hover-primary')
);
}
- @if should-emit($theme, $carbon--theme, 'active-primary', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'active-primary',
+ $emit-difference
+ )
{
@include custom-property(
'active-primary',
@@ -4499,7 +4596,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'hover-primary-text',
$emit-difference
)
@@ -4510,7 +4607,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-secondary', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-secondary',
+ $emit-difference
+ )
{
@include custom-property(
'hover-secondary',
@@ -4520,7 +4622,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'active-secondary',
$emit-difference
)
@@ -4531,7 +4633,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-tertiary', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-tertiary',
+ $emit-difference
+ )
{
@include custom-property(
'hover-tertiary',
@@ -4539,7 +4646,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'active-tertiary', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'active-tertiary',
+ $emit-difference
+ )
{
@include custom-property(
'active-tertiary',
@@ -4547,21 +4659,29 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-ui', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'hover-ui', $emit-difference)
+ {
@include custom-property('hover-ui', map-get($theme, 'hover-ui'));
}
- @if should-emit($theme, $carbon--theme, 'active-ui', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
+ {
@include custom-property('active-ui', map-get($theme, 'active-ui'));
}
- @if should-emit($theme, $carbon--theme, 'selected-ui', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'selected-ui',
+ $emit-difference
+ )
+ {
@include custom-property('selected-ui', map-get($theme, 'selected-ui'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'selected-light-ui',
$emit-difference
)
@@ -4574,7 +4694,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'hover-selected-ui',
$emit-difference
)
@@ -4587,7 +4707,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-hover-ui',
$emit-difference
)
@@ -4598,85 +4718,163 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-danger', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-danger',
+ $emit-difference
+ )
+ {
@include custom-property('hover-danger', map-get($theme, 'hover-danger'));
}
- @if should-emit($theme, $carbon--theme, 'active-danger', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'active-danger',
+ $emit-difference
+ )
+ {
@include custom-property(
'active-danger',
map-get($theme, 'active-danger')
);
}
- @if should-emit($theme, $carbon--theme, 'hover-row', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'hover-row', $emit-difference)
+ {
@include custom-property('hover-row', map-get($theme, 'hover-row'));
}
- @if should-emit($theme, $carbon--theme, 'visited-link', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'visited-link',
+ $emit-difference
+ )
+ {
@include custom-property('visited-link', map-get($theme, 'visited-link'));
}
- @if should-emit($theme, $carbon--theme, 'disabled-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'disabled-01',
+ $emit-difference
+ )
+ {
@include custom-property('disabled-01', map-get($theme, 'disabled-01'));
}
- @if should-emit($theme, $carbon--theme, 'disabled-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'disabled-02',
+ $emit-difference
+ )
+ {
@include custom-property('disabled-02', map-get($theme, 'disabled-02'));
}
- @if should-emit($theme, $carbon--theme, 'disabled-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'disabled-03',
+ $emit-difference
+ )
+ {
@include custom-property('disabled-03', map-get($theme, 'disabled-03'));
}
- @if should-emit($theme, $carbon--theme, 'highlight', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'highlight', $emit-difference)
+ {
@include custom-property('highlight', map-get($theme, 'highlight'));
}
- @if should-emit($theme, $carbon--theme, 'decorative-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'decorative-01',
+ $emit-difference
+ )
+ {
@include custom-property(
'decorative-01',
map-get($theme, 'decorative-01')
);
}
- @if should-emit($theme, $carbon--theme, 'skeleton-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'skeleton-01',
+ $emit-difference
+ )
+ {
@include custom-property('skeleton-01', map-get($theme, 'skeleton-01'));
}
- @if should-emit($theme, $carbon--theme, 'skeleton-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'skeleton-02',
+ $emit-difference
+ )
+ {
@include custom-property('skeleton-02', map-get($theme, 'skeleton-02'));
}
- @if should-emit($theme, $carbon--theme, 'brand-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'brand-01', $emit-difference)
+ {
@include custom-property('brand-01', map-get($theme, 'brand-01'));
}
- @if should-emit($theme, $carbon--theme, 'brand-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'brand-02', $emit-difference)
+ {
@include custom-property('brand-02', map-get($theme, 'brand-02'));
}
- @if should-emit($theme, $carbon--theme, 'brand-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'brand-03', $emit-difference)
+ {
@include custom-property('brand-03', map-get($theme, 'brand-03'));
}
- @if should-emit($theme, $carbon--theme, 'active-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'active-01', $emit-difference)
+ {
@include custom-property('active-01', map-get($theme, 'active-01'));
}
- @if should-emit($theme, $carbon--theme, 'hover-field', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-field',
+ $emit-difference
+ )
+ {
@include custom-property('hover-field', map-get($theme, 'hover-field'));
}
- @if should-emit($theme, $carbon--theme, 'caption-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'caption-01',
+ $emit-difference
+ )
+ {
@include custom-property('caption-01', map-get($theme, 'caption-01'));
}
- @if should-emit($theme, $carbon--theme, 'label-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'label-01', $emit-difference)
+ {
@include custom-property('label-01', map-get($theme, 'label-01'));
}
- @if should-emit($theme, $carbon--theme, 'helper-text-01', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'helper-text-01',
+ $emit-difference
+ )
{
@include custom-property(
'helper-text-01',
@@ -4684,43 +4882,73 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'body-short-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'body-short-01',
+ $emit-difference
+ )
+ {
@include custom-property(
'body-short-01',
map-get($theme, 'body-short-01')
);
}
- @if should-emit($theme, $carbon--theme, 'body-long-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'body-long-01',
+ $emit-difference
+ )
+ {
@include custom-property('body-long-01', map-get($theme, 'body-long-01'));
}
- @if should-emit($theme, $carbon--theme, 'body-short-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'body-short-02',
+ $emit-difference
+ )
+ {
@include custom-property(
'body-short-02',
map-get($theme, 'body-short-02')
);
}
- @if should-emit($theme, $carbon--theme, 'body-long-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'body-long-02',
+ $emit-difference
+ )
+ {
@include custom-property('body-long-02', map-get($theme, 'body-long-02'));
}
- @if should-emit($theme, $carbon--theme, 'code-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'code-01', $emit-difference) {
@include custom-property('code-01', map-get($theme, 'code-01'));
}
- @if should-emit($theme, $carbon--theme, 'code-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'code-02', $emit-difference) {
@include custom-property('code-02', map-get($theme, 'code-02'));
}
- @if should-emit($theme, $carbon--theme, 'heading-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'heading-01',
+ $emit-difference
+ )
+ {
@include custom-property('heading-01', map-get($theme, 'heading-01'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-01',
$emit-difference
)
@@ -4731,13 +4959,19 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'heading-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'heading-02',
+ $emit-difference
+ )
+ {
@include custom-property('heading-02', map-get($theme, 'heading-02'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-02',
$emit-difference
)
@@ -4750,7 +4984,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-03',
$emit-difference
)
@@ -4763,7 +4997,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-04',
$emit-difference
)
@@ -4776,7 +5010,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-05',
$emit-difference
)
@@ -4789,7 +5023,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-06',
$emit-difference
)
@@ -4802,7 +5036,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-07',
$emit-difference
)
@@ -4815,7 +5049,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-01',
$emit-difference
)
@@ -4828,7 +5062,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-02',
$emit-difference
)
@@ -4841,7 +5075,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-03',
$emit-difference
)
@@ -4854,7 +5088,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-04',
$emit-difference
)
@@ -4867,7 +5101,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-05',
$emit-difference
)
@@ -4880,7 +5114,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-06',
$emit-difference
)
@@ -4893,7 +5127,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-paragraph-01',
$emit-difference
)
@@ -4904,81 +5138,189 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'quotation-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'quotation-01',
+ $emit-difference
+ )
+ {
@include custom-property('quotation-01', map-get($theme, 'quotation-01'));
}
- @if should-emit($theme, $carbon--theme, 'quotation-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'quotation-02',
+ $emit-difference
+ )
+ {
@include custom-property('quotation-02', map-get($theme, 'quotation-02'));
}
- @if should-emit($theme, $carbon--theme, 'display-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'display-01',
+ $emit-difference
+ )
+ {
@include custom-property('display-01', map-get($theme, 'display-01'));
}
- @if should-emit($theme, $carbon--theme, 'display-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'display-02',
+ $emit-difference
+ )
+ {
@include custom-property('display-02', map-get($theme, 'display-02'));
}
- @if should-emit($theme, $carbon--theme, 'display-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'display-03',
+ $emit-difference
+ )
+ {
@include custom-property('display-03', map-get($theme, 'display-03'));
}
- @if should-emit($theme, $carbon--theme, 'display-04', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'display-04',
+ $emit-difference
+ )
+ {
@include custom-property('display-04', map-get($theme, 'display-04'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-01',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-01', map-get($theme, 'spacing-01'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-02',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-02', map-get($theme, 'spacing-02'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-03',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-03', map-get($theme, 'spacing-03'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-04', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-04',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-04', map-get($theme, 'spacing-04'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-05', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-05',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-05', map-get($theme, 'spacing-05'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-06', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-06',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-06', map-get($theme, 'spacing-06'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-07', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-07',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-07', map-get($theme, 'spacing-07'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-08', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-08',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-08', map-get($theme, 'spacing-08'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-09', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-09',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-09', map-get($theme, 'spacing-09'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-10', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-10',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-10', map-get($theme, 'spacing-10'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-11', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-11',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-11', map-get($theme, 'spacing-11'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-12', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-12',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-12', map-get($theme, 'spacing-12'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'fluid-spacing-01',
$emit-difference
)
@@ -4991,7 +5333,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'fluid-spacing-02',
$emit-difference
)
@@ -5004,7 +5346,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'fluid-spacing-03',
$emit-difference
)
@@ -5017,7 +5359,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'fluid-spacing-04',
$emit-difference
)
@@ -5028,66 +5370,118 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'layout-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-01', $emit-difference)
+ {
@include custom-property('layout-01', map-get($theme, 'layout-01'));
}
- @if should-emit($theme, $carbon--theme, 'layout-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-02', $emit-difference)
+ {
@include custom-property('layout-02', map-get($theme, 'layout-02'));
}
- @if should-emit($theme, $carbon--theme, 'layout-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-03', $emit-difference)
+ {
@include custom-property('layout-03', map-get($theme, 'layout-03'));
}
- @if should-emit($theme, $carbon--theme, 'layout-04', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-04', $emit-difference)
+ {
@include custom-property('layout-04', map-get($theme, 'layout-04'));
}
- @if should-emit($theme, $carbon--theme, 'layout-05', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-05', $emit-difference)
+ {
@include custom-property('layout-05', map-get($theme, 'layout-05'));
}
- @if should-emit($theme, $carbon--theme, 'layout-06', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-06', $emit-difference)
+ {
@include custom-property('layout-06', map-get($theme, 'layout-06'));
}
- @if should-emit($theme, $carbon--theme, 'layout-07', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-07', $emit-difference)
+ {
@include custom-property('layout-07', map-get($theme, 'layout-07'));
}
- @if should-emit($theme, $carbon--theme, 'container-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-01',
+ $emit-difference
+ )
+ {
@include custom-property('container-01', map-get($theme, 'container-01'));
}
- @if should-emit($theme, $carbon--theme, 'container-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-02',
+ $emit-difference
+ )
+ {
@include custom-property('container-02', map-get($theme, 'container-02'));
}
- @if should-emit($theme, $carbon--theme, 'container-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-03',
+ $emit-difference
+ )
+ {
@include custom-property('container-03', map-get($theme, 'container-03'));
}
- @if should-emit($theme, $carbon--theme, 'container-04', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-04',
+ $emit-difference
+ )
+ {
@include custom-property('container-04', map-get($theme, 'container-04'));
}
- @if should-emit($theme, $carbon--theme, 'container-05', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-05',
+ $emit-difference
+ )
+ {
@include custom-property('container-05', map-get($theme, 'container-05'));
}
- @if should-emit($theme, $carbon--theme, 'icon-size-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'icon-size-01',
+ $emit-difference
+ )
+ {
@include custom-property('icon-size-01', map-get($theme, 'icon-size-01'));
}
- @if should-emit($theme, $carbon--theme, 'icon-size-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'icon-size-02',
+ $emit-difference
+ )
+ {
@include custom-property('icon-size-02', map-get($theme, 'icon-size-02'));
}
}
@content;
+
// Reset to default theme after apply in content
- @if $theme != $carbon--theme {
+ @if $carbon--theme != $parent-carbon-theme {
+ $carbon--theme: $parent-carbon-theme !global;
+
@include carbon--theme();
}
}
@@ -5132,6 +5526,7 @@ Define theme variables from a map of tokens
- **Requires**:
- [custom-property [mixin]](#custom-property-mixin)
- [should-emit [function]](#should-emit-function)
+ - [carbon--theme [variable]](#carbon--theme-variable)
- [interactive-01 [variable]](#interactive-01-variable)
- [interactive-02 [variable]](#interactive-02-variable)
- [interactive-03 [variable]](#interactive-03-variable)
@@ -5260,7 +5655,57 @@ Define theme variables from a map of tokens
- [icon-size-01 [variable]](#icon-size-01-variable)
- [icon-size-02 [variable]](#icon-size-02-variable)
- [custom-property-prefix [variable]](#custom-property-prefix-variable)
+
+### ❌emit-component-tokens [mixin]
+
+
+Source code
+
+```scss
+@mixin emit-component-tokens($tokens, $theme) {
+ @if type-of($tokens) == 'map' {
+ @each $key, $options in $tokens {
+ @each $option in $options {
+ $theme: map-get($option, 'theme');
+
+ @if ($theme == $carbon--theme) {
+ $value: map-get($option, 'value');
+
+ --#{$custom-property-prefix}-#{$key}: #{$value};
+ }
+ }
+ }
+ } @else {
+ @error 'Unable to find map';
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| --------- | ----------------------- | -------- | ------------- |
+| `$tokens` | Map of component tokens | `Map` | — |
+| `$theme` | Theme identifier | `String` | — |
+
+**Example**:
+
+
+Example code
+
+```scss
+@include emit-component-tokens($component-tokens);
+```
+
+
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Requires**:
+ - [tokens [variable]](#tokens-variable)
- [carbon--theme [variable]](#carbon--theme-variable)
+ - [custom-property-prefix [variable]](#custom-property-prefix-variable)
### ✅carbon--theme--g10 [variable]
@@ -5662,6 +6107,7 @@ $carbon--theme: (
- **Type**: `Map`
- **Used by**:
- [carbon--theme [mixin]](#carbon--theme-mixin)
+ - [emit-component-tokens [mixin]](#emit-component-tokens-mixin)
### ✅interactive-01 [variable]
@@ -11990,6 +12436,7 @@ $tokens: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
- **Used by**:
+ - [emit-component-tokens [mixin]](#emit-component-tokens-mixin)
- [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
diff --git a/packages/react/.storybook/styles.scss b/packages/react/.storybook/styles.scss
index db57e1236f32..55685d82437e 100644
--- a/packages/react/.storybook/styles.scss
+++ b/packages/react/.storybook/styles.scss
@@ -16,6 +16,7 @@ $prefix: 'bx';
@import '~carbon-components/scss/globals/scss/vars';
@import '~carbon-components/scss/globals/scss/colors';
@import '~carbon-components/scss/globals/scss/theme';
+@import '~carbon-components/scss/globals/scss/component-tokens';
@import '~carbon-components/scss/globals/scss/mixins';
@import '~carbon-components/scss/globals/scss/layout';
@import '~carbon-components/scss/globals/scss/spacing';
@@ -74,18 +75,26 @@ $prefix: 'bx';
@if feature-flag-enabled('enable-css-custom-properties') {
:root {
- @include carbon--theme($carbon--theme--white, true);
+ @include carbon--theme($carbon--theme--white, true) {
+ @include emit-component-tokens($tag-colors);
+ }
}
:root[storybook-carbon-theme='g10'] {
- @include carbon--theme($carbon--theme--g10, true);
+ @include carbon--theme($carbon--theme--g10, true) {
+ @include emit-component-tokens($tag-colors);
+ }
}
:root[storybook-carbon-theme='g90'] {
- @include carbon--theme($carbon--theme--g90, true);
+ @include carbon--theme($carbon--theme--g90, true) {
+ @include emit-component-tokens($tag-colors);
+ }
}
:root[storybook-carbon-theme='g100'] {
- @include carbon--theme($carbon--theme--g100, true);
+ @include carbon--theme($carbon--theme--g100, true) {
+ @include emit-component-tokens($tag-colors);
+ }
}
}
diff --git a/packages/themes/__tests__/mixins-test.js b/packages/themes/__tests__/mixins-test.js
index 77617fd26217..e91bbb3c7393 100644
--- a/packages/themes/__tests__/mixins-test.js
+++ b/packages/themes/__tests__/mixins-test.js
@@ -120,6 +120,24 @@ describe('_mixins.scss', () => {
expect(colors[2]).toBe(`var(--cds-interactive-01, ${colors[0]})`);
});
+ it('should set the global carbon--theme to match the given theme', async () => {
+ const { calls } = await render(`
+ @import '../scss/themes';
+ $carbon--theme: ( value-01: #000000 );
+ $custom-theme: ( value-01: #ffffff );
+
+ @include carbon--theme($custom-theme) {
+ $t: test($carbon--theme);
+ }
+
+ $t: test($carbon--theme);
+ `);
+
+ const [custom, reset] = calls.map(([call]) => convert(call));
+ expect(custom['value-01']).toBe('#ffffff');
+ expect(reset['value-01']).toBe('#000000');
+ });
+
describe('@mixin custom-property', () => {
it('should create a custom property for a given token name and value', async () => {
const { result } = await render(`
diff --git a/packages/themes/docs/sass.md b/packages/themes/docs/sass.md
index d73346a4dfb3..9f6008dd3e56 100644
--- a/packages/themes/docs/sass.md
+++ b/packages/themes/docs/sass.md
@@ -13,6 +13,7 @@
- [❌custom-property [mixin]](#custom-property-mixin)
- [❌should-emit [function]](#should-emit-function)
- [✅carbon--theme [mixin]](#carbon--theme-mixin)
+ - [❌emit-component-tokens [mixin]](#emit-component-tokens-mixin)
- [✅carbon--theme--g10 [variable]](#carbon--theme--g10-variable)
- [✅carbon--theme--g90 [variable]](#carbon--theme--g90-variable)
- [✅carbon--theme--g100 [variable]](#carbon--theme--g100-variable)
@@ -164,6 +165,7 @@ $custom-property-prefix: 'cds';
- **Group**: [@carbon/themes](#carbonthemes)
- **Used by**:
- [carbon--theme [mixin]](#carbon--theme-mixin)
+ - [emit-component-tokens [mixin]](#emit-component-tokens-mixin)
### ❌custom-property [mixin]
@@ -221,6 +223,8 @@ Define theme variables from a map of tokens
```scss
@mixin carbon--theme($theme: $carbon--theme, $emit-custom-properties: false) {
+ $parent-carbon-theme: $carbon--theme;
+ $carbon--theme: $theme !global;
$interactive-01: map-get($theme, 'interactive-01') !global;
$interactive-02: map-get($theme, 'interactive-02') !global;
$interactive-03: map-get($theme, 'interactive-03') !global;
@@ -738,7 +742,12 @@ Define theme variables from a map of tokens
) !global;
}
@if $emit-custom-properties == true {
- @if should-emit($theme, $carbon--theme, 'interactive-01', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'interactive-01',
+ $emit-difference
+ )
{
@include custom-property(
'interactive-01',
@@ -746,7 +755,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'interactive-02', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'interactive-02',
+ $emit-difference
+ )
{
@include custom-property(
'interactive-02',
@@ -754,7 +768,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'interactive-03', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'interactive-03',
+ $emit-difference
+ )
{
@include custom-property(
'interactive-03',
@@ -762,7 +781,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'interactive-04', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'interactive-04',
+ $emit-difference
+ )
{
@include custom-property(
'interactive-04',
@@ -770,112 +794,168 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'ui-background', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'ui-background',
+ $emit-difference
+ )
+ {
@include custom-property(
'ui-background',
map-get($theme, 'ui-background')
);
}
- @if should-emit($theme, $carbon--theme, 'ui-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-01', $emit-difference) {
@include custom-property('ui-01', map-get($theme, 'ui-01'));
}
- @if should-emit($theme, $carbon--theme, 'ui-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-02', $emit-difference) {
@include custom-property('ui-02', map-get($theme, 'ui-02'));
}
- @if should-emit($theme, $carbon--theme, 'ui-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-03', $emit-difference) {
@include custom-property('ui-03', map-get($theme, 'ui-03'));
}
- @if should-emit($theme, $carbon--theme, 'ui-04', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-04', $emit-difference) {
@include custom-property('ui-04', map-get($theme, 'ui-04'));
}
- @if should-emit($theme, $carbon--theme, 'ui-05', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'ui-05', $emit-difference) {
@include custom-property('ui-05', map-get($theme, 'ui-05'));
}
- @if should-emit($theme, $carbon--theme, 'text-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-01', $emit-difference) {
@include custom-property('text-01', map-get($theme, 'text-01'));
}
- @if should-emit($theme, $carbon--theme, 'text-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-02', $emit-difference) {
@include custom-property('text-02', map-get($theme, 'text-02'));
}
- @if should-emit($theme, $carbon--theme, 'text-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-03', $emit-difference) {
@include custom-property('text-03', map-get($theme, 'text-03'));
}
- @if should-emit($theme, $carbon--theme, 'text-04', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-04', $emit-difference) {
@include custom-property('text-04', map-get($theme, 'text-04'));
}
- @if should-emit($theme, $carbon--theme, 'text-05', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'text-05', $emit-difference) {
@include custom-property('text-05', map-get($theme, 'text-05'));
}
- @if should-emit($theme, $carbon--theme, 'text-error', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'text-error',
+ $emit-difference
+ )
+ {
@include custom-property('text-error', map-get($theme, 'text-error'));
}
- @if should-emit($theme, $carbon--theme, 'icon-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'icon-01', $emit-difference) {
@include custom-property('icon-01', map-get($theme, 'icon-01'));
}
- @if should-emit($theme, $carbon--theme, 'icon-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'icon-02', $emit-difference) {
@include custom-property('icon-02', map-get($theme, 'icon-02'));
}
- @if should-emit($theme, $carbon--theme, 'icon-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'icon-03', $emit-difference) {
@include custom-property('icon-03', map-get($theme, 'icon-03'));
}
- @if should-emit($theme, $carbon--theme, 'link-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'link-01', $emit-difference) {
@include custom-property('link-01', map-get($theme, 'link-01'));
}
- @if should-emit($theme, $carbon--theme, 'inverse-link', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'inverse-link',
+ $emit-difference
+ )
+ {
@include custom-property('inverse-link', map-get($theme, 'inverse-link'));
}
- @if should-emit($theme, $carbon--theme, 'field-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'field-01', $emit-difference)
+ {
@include custom-property('field-01', map-get($theme, 'field-01'));
}
- @if should-emit($theme, $carbon--theme, 'field-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'field-02', $emit-difference)
+ {
@include custom-property('field-02', map-get($theme, 'field-02'));
}
- @if should-emit($theme, $carbon--theme, 'inverse-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'inverse-01',
+ $emit-difference
+ )
+ {
@include custom-property('inverse-01', map-get($theme, 'inverse-01'));
}
- @if should-emit($theme, $carbon--theme, 'inverse-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'inverse-02',
+ $emit-difference
+ )
+ {
@include custom-property('inverse-02', map-get($theme, 'inverse-02'));
}
- @if should-emit($theme, $carbon--theme, 'support-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'support-01',
+ $emit-difference
+ )
+ {
@include custom-property('support-01', map-get($theme, 'support-01'));
}
- @if should-emit($theme, $carbon--theme, 'support-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'support-02',
+ $emit-difference
+ )
+ {
@include custom-property('support-02', map-get($theme, 'support-02'));
}
- @if should-emit($theme, $carbon--theme, 'support-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'support-03',
+ $emit-difference
+ )
+ {
@include custom-property('support-03', map-get($theme, 'support-03'));
}
- @if should-emit($theme, $carbon--theme, 'support-04', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'support-04',
+ $emit-difference
+ )
+ {
@include custom-property('support-04', map-get($theme, 'support-04'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-support-01',
$emit-difference
)
@@ -888,7 +968,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-support-02',
$emit-difference
)
@@ -901,7 +981,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-support-03',
$emit-difference
)
@@ -914,7 +994,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-support-04',
$emit-difference
)
@@ -925,21 +1005,27 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'overlay-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'overlay-01',
+ $emit-difference
+ )
+ {
@include custom-property('overlay-01', map-get($theme, 'overlay-01'));
}
- @if should-emit($theme, $carbon--theme, 'danger', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) {
@include custom-property('danger', map-get($theme, 'danger'));
}
- @if should-emit($theme, $carbon--theme, 'focus', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'focus', $emit-difference) {
@include custom-property('focus', map-get($theme, 'focus'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-focus-ui',
$emit-difference
)
@@ -950,14 +1036,25 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-primary', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-primary',
+ $emit-difference
+ )
+ {
@include custom-property(
'hover-primary',
map-get($theme, 'hover-primary')
);
}
- @if should-emit($theme, $carbon--theme, 'active-primary', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'active-primary',
+ $emit-difference
+ )
{
@include custom-property(
'active-primary',
@@ -967,7 +1064,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'hover-primary-text',
$emit-difference
)
@@ -978,7 +1075,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-secondary', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-secondary',
+ $emit-difference
+ )
{
@include custom-property(
'hover-secondary',
@@ -988,7 +1090,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'active-secondary',
$emit-difference
)
@@ -999,7 +1101,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-tertiary', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-tertiary',
+ $emit-difference
+ )
{
@include custom-property(
'hover-tertiary',
@@ -1007,7 +1114,12 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'active-tertiary', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'active-tertiary',
+ $emit-difference
+ )
{
@include custom-property(
'active-tertiary',
@@ -1015,21 +1127,29 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-ui', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'hover-ui', $emit-difference)
+ {
@include custom-property('hover-ui', map-get($theme, 'hover-ui'));
}
- @if should-emit($theme, $carbon--theme, 'active-ui', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
+ {
@include custom-property('active-ui', map-get($theme, 'active-ui'));
}
- @if should-emit($theme, $carbon--theme, 'selected-ui', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'selected-ui',
+ $emit-difference
+ )
+ {
@include custom-property('selected-ui', map-get($theme, 'selected-ui'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'selected-light-ui',
$emit-difference
)
@@ -1042,7 +1162,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'hover-selected-ui',
$emit-difference
)
@@ -1055,7 +1175,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'inverse-hover-ui',
$emit-difference
)
@@ -1066,85 +1186,163 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'hover-danger', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-danger',
+ $emit-difference
+ )
+ {
@include custom-property('hover-danger', map-get($theme, 'hover-danger'));
}
- @if should-emit($theme, $carbon--theme, 'active-danger', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'active-danger',
+ $emit-difference
+ )
+ {
@include custom-property(
'active-danger',
map-get($theme, 'active-danger')
);
}
- @if should-emit($theme, $carbon--theme, 'hover-row', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'hover-row', $emit-difference)
+ {
@include custom-property('hover-row', map-get($theme, 'hover-row'));
}
- @if should-emit($theme, $carbon--theme, 'visited-link', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'visited-link',
+ $emit-difference
+ )
+ {
@include custom-property('visited-link', map-get($theme, 'visited-link'));
}
- @if should-emit($theme, $carbon--theme, 'disabled-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'disabled-01',
+ $emit-difference
+ )
+ {
@include custom-property('disabled-01', map-get($theme, 'disabled-01'));
}
- @if should-emit($theme, $carbon--theme, 'disabled-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'disabled-02',
+ $emit-difference
+ )
+ {
@include custom-property('disabled-02', map-get($theme, 'disabled-02'));
}
- @if should-emit($theme, $carbon--theme, 'disabled-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'disabled-03',
+ $emit-difference
+ )
+ {
@include custom-property('disabled-03', map-get($theme, 'disabled-03'));
}
- @if should-emit($theme, $carbon--theme, 'highlight', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'highlight', $emit-difference)
+ {
@include custom-property('highlight', map-get($theme, 'highlight'));
}
- @if should-emit($theme, $carbon--theme, 'decorative-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'decorative-01',
+ $emit-difference
+ )
+ {
@include custom-property(
'decorative-01',
map-get($theme, 'decorative-01')
);
}
- @if should-emit($theme, $carbon--theme, 'skeleton-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'skeleton-01',
+ $emit-difference
+ )
+ {
@include custom-property('skeleton-01', map-get($theme, 'skeleton-01'));
}
- @if should-emit($theme, $carbon--theme, 'skeleton-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'skeleton-02',
+ $emit-difference
+ )
+ {
@include custom-property('skeleton-02', map-get($theme, 'skeleton-02'));
}
- @if should-emit($theme, $carbon--theme, 'brand-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'brand-01', $emit-difference)
+ {
@include custom-property('brand-01', map-get($theme, 'brand-01'));
}
- @if should-emit($theme, $carbon--theme, 'brand-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'brand-02', $emit-difference)
+ {
@include custom-property('brand-02', map-get($theme, 'brand-02'));
}
- @if should-emit($theme, $carbon--theme, 'brand-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'brand-03', $emit-difference)
+ {
@include custom-property('brand-03', map-get($theme, 'brand-03'));
}
- @if should-emit($theme, $carbon--theme, 'active-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'active-01', $emit-difference)
+ {
@include custom-property('active-01', map-get($theme, 'active-01'));
}
- @if should-emit($theme, $carbon--theme, 'hover-field', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'hover-field',
+ $emit-difference
+ )
+ {
@include custom-property('hover-field', map-get($theme, 'hover-field'));
}
- @if should-emit($theme, $carbon--theme, 'caption-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'caption-01',
+ $emit-difference
+ )
+ {
@include custom-property('caption-01', map-get($theme, 'caption-01'));
}
- @if should-emit($theme, $carbon--theme, 'label-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'label-01', $emit-difference)
+ {
@include custom-property('label-01', map-get($theme, 'label-01'));
}
- @if should-emit($theme, $carbon--theme, 'helper-text-01', $emit-difference)
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'helper-text-01',
+ $emit-difference
+ )
{
@include custom-property(
'helper-text-01',
@@ -1152,43 +1350,73 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'body-short-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'body-short-01',
+ $emit-difference
+ )
+ {
@include custom-property(
'body-short-01',
map-get($theme, 'body-short-01')
);
}
- @if should-emit($theme, $carbon--theme, 'body-long-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'body-long-01',
+ $emit-difference
+ )
+ {
@include custom-property('body-long-01', map-get($theme, 'body-long-01'));
}
- @if should-emit($theme, $carbon--theme, 'body-short-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'body-short-02',
+ $emit-difference
+ )
+ {
@include custom-property(
'body-short-02',
map-get($theme, 'body-short-02')
);
}
- @if should-emit($theme, $carbon--theme, 'body-long-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'body-long-02',
+ $emit-difference
+ )
+ {
@include custom-property('body-long-02', map-get($theme, 'body-long-02'));
}
- @if should-emit($theme, $carbon--theme, 'code-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'code-01', $emit-difference) {
@include custom-property('code-01', map-get($theme, 'code-01'));
}
- @if should-emit($theme, $carbon--theme, 'code-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'code-02', $emit-difference) {
@include custom-property('code-02', map-get($theme, 'code-02'));
}
- @if should-emit($theme, $carbon--theme, 'heading-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'heading-01',
+ $emit-difference
+ )
+ {
@include custom-property('heading-01', map-get($theme, 'heading-01'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-01',
$emit-difference
)
@@ -1199,13 +1427,19 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'heading-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'heading-02',
+ $emit-difference
+ )
+ {
@include custom-property('heading-02', map-get($theme, 'heading-02'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-02',
$emit-difference
)
@@ -1218,7 +1452,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-03',
$emit-difference
)
@@ -1231,7 +1465,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-04',
$emit-difference
)
@@ -1244,7 +1478,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-05',
$emit-difference
)
@@ -1257,7 +1491,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-06',
$emit-difference
)
@@ -1270,7 +1504,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'productive-heading-07',
$emit-difference
)
@@ -1283,7 +1517,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-01',
$emit-difference
)
@@ -1296,7 +1530,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-02',
$emit-difference
)
@@ -1309,7 +1543,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-03',
$emit-difference
)
@@ -1322,7 +1556,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-04',
$emit-difference
)
@@ -1335,7 +1569,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-05',
$emit-difference
)
@@ -1348,7 +1582,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-heading-06',
$emit-difference
)
@@ -1361,7 +1595,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'expressive-paragraph-01',
$emit-difference
)
@@ -1372,81 +1606,189 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'quotation-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'quotation-01',
+ $emit-difference
+ )
+ {
@include custom-property('quotation-01', map-get($theme, 'quotation-01'));
}
- @if should-emit($theme, $carbon--theme, 'quotation-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'quotation-02',
+ $emit-difference
+ )
+ {
@include custom-property('quotation-02', map-get($theme, 'quotation-02'));
}
- @if should-emit($theme, $carbon--theme, 'display-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'display-01',
+ $emit-difference
+ )
+ {
@include custom-property('display-01', map-get($theme, 'display-01'));
}
- @if should-emit($theme, $carbon--theme, 'display-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'display-02',
+ $emit-difference
+ )
+ {
@include custom-property('display-02', map-get($theme, 'display-02'));
}
- @if should-emit($theme, $carbon--theme, 'display-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'display-03',
+ $emit-difference
+ )
+ {
@include custom-property('display-03', map-get($theme, 'display-03'));
}
- @if should-emit($theme, $carbon--theme, 'display-04', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'display-04',
+ $emit-difference
+ )
+ {
@include custom-property('display-04', map-get($theme, 'display-04'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-01',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-01', map-get($theme, 'spacing-01'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-02',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-02', map-get($theme, 'spacing-02'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-03',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-03', map-get($theme, 'spacing-03'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-04', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-04',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-04', map-get($theme, 'spacing-04'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-05', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-05',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-05', map-get($theme, 'spacing-05'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-06', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-06',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-06', map-get($theme, 'spacing-06'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-07', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-07',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-07', map-get($theme, 'spacing-07'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-08', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-08',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-08', map-get($theme, 'spacing-08'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-09', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-09',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-09', map-get($theme, 'spacing-09'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-10', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-10',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-10', map-get($theme, 'spacing-10'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-11', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-11',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-11', map-get($theme, 'spacing-11'));
}
- @if should-emit($theme, $carbon--theme, 'spacing-12', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'spacing-12',
+ $emit-difference
+ )
+ {
@include custom-property('spacing-12', map-get($theme, 'spacing-12'));
}
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'fluid-spacing-01',
$emit-difference
)
@@ -1459,7 +1801,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'fluid-spacing-02',
$emit-difference
)
@@ -1472,7 +1814,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'fluid-spacing-03',
$emit-difference
)
@@ -1485,7 +1827,7 @@ Define theme variables from a map of tokens
@if should-emit(
$theme,
- $carbon--theme,
+ $parent-carbon-theme,
'fluid-spacing-04',
$emit-difference
)
@@ -1496,66 +1838,118 @@ Define theme variables from a map of tokens
);
}
- @if should-emit($theme, $carbon--theme, 'layout-01', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-01', $emit-difference)
+ {
@include custom-property('layout-01', map-get($theme, 'layout-01'));
}
- @if should-emit($theme, $carbon--theme, 'layout-02', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-02', $emit-difference)
+ {
@include custom-property('layout-02', map-get($theme, 'layout-02'));
}
- @if should-emit($theme, $carbon--theme, 'layout-03', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-03', $emit-difference)
+ {
@include custom-property('layout-03', map-get($theme, 'layout-03'));
}
- @if should-emit($theme, $carbon--theme, 'layout-04', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-04', $emit-difference)
+ {
@include custom-property('layout-04', map-get($theme, 'layout-04'));
}
- @if should-emit($theme, $carbon--theme, 'layout-05', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-05', $emit-difference)
+ {
@include custom-property('layout-05', map-get($theme, 'layout-05'));
}
- @if should-emit($theme, $carbon--theme, 'layout-06', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-06', $emit-difference)
+ {
@include custom-property('layout-06', map-get($theme, 'layout-06'));
}
- @if should-emit($theme, $carbon--theme, 'layout-07', $emit-difference) {
+ @if should-emit($theme, $parent-carbon-theme, 'layout-07', $emit-difference)
+ {
@include custom-property('layout-07', map-get($theme, 'layout-07'));
}
- @if should-emit($theme, $carbon--theme, 'container-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-01',
+ $emit-difference
+ )
+ {
@include custom-property('container-01', map-get($theme, 'container-01'));
}
- @if should-emit($theme, $carbon--theme, 'container-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-02',
+ $emit-difference
+ )
+ {
@include custom-property('container-02', map-get($theme, 'container-02'));
}
- @if should-emit($theme, $carbon--theme, 'container-03', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-03',
+ $emit-difference
+ )
+ {
@include custom-property('container-03', map-get($theme, 'container-03'));
}
- @if should-emit($theme, $carbon--theme, 'container-04', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-04',
+ $emit-difference
+ )
+ {
@include custom-property('container-04', map-get($theme, 'container-04'));
}
- @if should-emit($theme, $carbon--theme, 'container-05', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'container-05',
+ $emit-difference
+ )
+ {
@include custom-property('container-05', map-get($theme, 'container-05'));
}
- @if should-emit($theme, $carbon--theme, 'icon-size-01', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'icon-size-01',
+ $emit-difference
+ )
+ {
@include custom-property('icon-size-01', map-get($theme, 'icon-size-01'));
}
- @if should-emit($theme, $carbon--theme, 'icon-size-02', $emit-difference) {
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'icon-size-02',
+ $emit-difference
+ )
+ {
@include custom-property('icon-size-02', map-get($theme, 'icon-size-02'));
}
}
@content;
+
// Reset to default theme after apply in content
- @if $theme != $carbon--theme {
+ @if $carbon--theme != $parent-carbon-theme {
+ $carbon--theme: $parent-carbon-theme !global;
+
@include carbon--theme();
}
}
@@ -1600,6 +1994,7 @@ Define theme variables from a map of tokens
- **Requires**:
- [custom-property [mixin]](#custom-property-mixin)
- [should-emit [function]](#should-emit-function)
+ - [carbon--theme [variable]](#carbon--theme-variable)
- [interactive-01 [variable]](#interactive-01-variable)
- [interactive-02 [variable]](#interactive-02-variable)
- [interactive-03 [variable]](#interactive-03-variable)
@@ -1728,7 +2123,56 @@ Define theme variables from a map of tokens
- [icon-size-01 [variable]](#icon-size-01-variable)
- [icon-size-02 [variable]](#icon-size-02-variable)
- [custom-property-prefix [variable]](#custom-property-prefix-variable)
+
+### ❌emit-component-tokens [mixin]
+
+
+Source code
+
+```scss
+@mixin emit-component-tokens($tokens, $theme) {
+ @if type-of($tokens) == 'map' {
+ @each $key, $options in $tokens {
+ @each $option in $options {
+ $theme: map-get($option, 'theme');
+
+ @if ($theme == $carbon--theme) {
+ $value: map-get($option, 'value');
+
+ --#{$custom-property-prefix}-#{$key}: #{$value};
+ }
+ }
+ }
+ } @else {
+ @error 'Unable to find map';
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| --------- | ----------------------- | -------- | ------------- |
+| `$tokens` | Map of component tokens | `Map` | — |
+| `$theme` | Theme identifier | `String` | — |
+
+**Example**:
+
+
+Example code
+
+```scss
+@include emit-component-tokens($component-tokens);
+```
+
+
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Requires**:
- [carbon--theme [variable]](#carbon--theme-variable)
+ - [custom-property-prefix [variable]](#custom-property-prefix-variable)
### ✅carbon--theme--g10 [variable]
@@ -2130,6 +2574,7 @@ $carbon--theme: (
- **Type**: `Map`
- **Used by**:
- [carbon--theme [mixin]](#carbon--theme-mixin)
+ - [emit-component-tokens [mixin]](#emit-component-tokens-mixin)
### ✅interactive-01 [variable]
diff --git a/packages/themes/scss/_mixins.scss b/packages/themes/scss/_mixins.scss
index 6f1e2adce38d..c3fdfa6c29c7 100644
--- a/packages/themes/scss/_mixins.scss
+++ b/packages/themes/scss/_mixins.scss
@@ -34,6 +34,29 @@ $custom-property-prefix: 'cds' !default;
@return map-get($theme-a, $token) != map-get($theme-b, $token);
}
+/// @access private
+/// @param {Map} $tokens - Map of component tokens
+/// @param {String} $theme - Theme identifier
+/// @example @include emit-component-tokens($component-tokens);
+/// @group @carbon/themes
+@mixin emit-component-tokens($tokens) {
+ @if type-of($tokens) == 'map' {
+ @each $key, $options in $tokens {
+ @each $option in $options {
+ $theme: map-get($option, 'theme');
+
+ @if ($theme == $carbon--theme) {
+ $value: map-get($option, 'value');
+
+ --#{$custom-property-prefix}-#{$key}: #{$value};
+ }
+ }
+ }
+ } @else {
+ @error 'Unable to find map';
+ }
+}
+
// We import mixins last so that these methods are made available to the
// carbon--theme mixin
@import './generated/mixins';
diff --git a/packages/themes/tasks/builders/mixins.js b/packages/themes/tasks/builders/mixins.js
index 6d77f76e4816..903dd645717d 100644
--- a/packages/themes/tasks/builders/mixins.js
+++ b/packages/themes/tasks/builders/mixins.js
@@ -57,6 +57,15 @@ function buildMixinsFile(themes, tokens, defaultTheme, defaultThemeMapName) {
],
body: t.BlockStatement({
body: [
+ t.Assignment({
+ id: t.Identifier('parent-carbon-theme'),
+ init: t.Identifier('carbon--theme'),
+ }),
+ t.Assignment({
+ id: t.Identifier('carbon--theme'),
+ init: t.Identifier('theme'),
+ global: true,
+ }),
...Object.keys(tokens).flatMap(group => {
return tokens[group].flatMap(token => {
const name = formatTokenName(token);
@@ -131,7 +140,7 @@ function buildMixinsFile(themes, tokens, defaultTheme, defaultThemeMapName) {
t.IfStatement({
test: t.SassFunctionCall(t.Identifier('should-emit'), [
t.Identifier('theme'),
- t.Identifier('carbon--theme'),
+ t.Identifier('parent-carbon-theme'),
t.SassString(name),
t.Identifier('emit-difference'),
]),
@@ -151,14 +160,20 @@ function buildMixinsFile(themes, tokens, defaultTheme, defaultThemeMapName) {
),
}),
t.AtContent(),
+ t.Newline(),
t.Comment(' Reset to default theme after apply in content'),
t.IfStatement({
test: t.LogicalExpression({
- left: t.Identifier('theme'),
+ left: t.Identifier('carbon--theme'),
operator: '!=',
- right: t.Identifier(defaultThemeMapName),
+ right: t.Identifier('parent-carbon-theme'),
}),
consequent: t.BlockStatement([
+ t.Assignment({
+ id: t.Identifier('carbon--theme'),
+ init: t.Identifier('parent-carbon-theme'),
+ global: true,
+ }),
t.SassMixinCall(t.Identifier('carbon--theme')),
]),
}),