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')), ]), }),