From 68e304a23b40149867b4205e20cb1e1fb0bb6154 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 2 Apr 2020 09:51:30 -0500 Subject: [PATCH 1/4] fix(themes): correctly set carbon--theme when nesting themes (#5760) * fix(themes): correctly set carbon--theme when nesting themes * fix(themes): add parent-carbon-theme to should-emit --- packages/themes/__tests__/mixins-test.js | 18 ++++++++++++++++++ packages/themes/tasks/builders/mixins.js | 21 ++++++++++++++++++--- 2 files changed, 36 insertions(+), 3 deletions(-) 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/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')), ]), }), From 5bda2974d7032c2c05c6a26071cd57df8d8df8ab Mon Sep 17 00:00:00 2001 From: carbon-bot Date: Thu, 2 Apr 2020 15:01:46 +0000 Subject: [PATCH 2/4] chore(project): sync generated files --- packages/components/docs/sass.md | 650 +++++++++++++++++++++++++------ packages/elements/docs/sass.md | 650 +++++++++++++++++++++++++------ packages/themes/docs/sass.md | 650 +++++++++++++++++++++++++------ 3 files changed, 1563 insertions(+), 387 deletions(-) diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index b18ca7a8c3dd..a4f00e859a93 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -4122,6 +4122,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 +4641,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 +4654,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 +4667,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 +4680,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 +4693,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 +4867,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 +4880,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 +4893,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 +4904,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 +4935,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 +4963,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 +4974,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 +4989,7 @@ Define theme variables from a map of tokens @if should-emit( $theme, - $carbon--theme, + $parent-carbon-theme, 'active-secondary', $emit-difference ) @@ -4900,7 +5000,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 +5013,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 +5026,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 +5061,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 +5074,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 +5085,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 +5249,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 +5326,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 +5351,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 +5364,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 +5377,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 +5390,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 +5403,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 +5416,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 +5429,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 +5442,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 +5455,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 +5468,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 +5481,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 +5494,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 +5505,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 +5700,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 +5713,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 +5726,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 +5737,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 +5893,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 +6022,6 @@ 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) - - [carbon--theme [variable]](#carbon--theme-variable) ### ✅carbon--theme--g10 [variable] diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md index f1da2b9b3d9e..0d6eb3eae953 100644 --- a/packages/elements/docs/sass.md +++ b/packages/elements/docs/sass.md @@ -3753,6 +3753,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 +4272,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 +4285,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 +4298,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 +4311,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 +4324,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 +4498,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 +4511,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 +4524,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 +4535,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 +4566,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 +4594,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 +4605,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 +4620,7 @@ Define theme variables from a map of tokens @if should-emit( $theme, - $carbon--theme, + $parent-carbon-theme, 'active-secondary', $emit-difference ) @@ -4531,7 +4631,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 +4644,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 +4657,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 +4692,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 +4705,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 +4716,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 +4880,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 +4957,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 +4982,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 +4995,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 +5008,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 +5021,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 +5034,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 +5047,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 +5060,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 +5073,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 +5086,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 +5099,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 +5112,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 +5125,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 +5136,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 +5331,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 +5344,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 +5357,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 +5368,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 +5524,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 +5653,6 @@ 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) - - [carbon--theme [variable]](#carbon--theme-variable) ### ✅carbon--theme--g10 [variable] diff --git a/packages/themes/docs/sass.md b/packages/themes/docs/sass.md index d73346a4dfb3..74130b205434 100644 --- a/packages/themes/docs/sass.md +++ b/packages/themes/docs/sass.md @@ -221,6 +221,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 +740,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 +753,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 +766,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 +779,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 +792,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 +966,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 +979,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 +992,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 +1003,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 +1034,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 +1062,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 +1073,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 +1088,7 @@ Define theme variables from a map of tokens @if should-emit( $theme, - $carbon--theme, + $parent-carbon-theme, 'active-secondary', $emit-difference ) @@ -999,7 +1099,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 +1112,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 +1125,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 +1160,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 +1173,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 +1184,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 +1348,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 +1425,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 +1450,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 +1463,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 +1476,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 +1489,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 +1502,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 +1515,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 +1528,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 +1541,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 +1554,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 +1567,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 +1580,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 +1593,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 +1604,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 +1799,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 +1812,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 +1825,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 +1836,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 +1992,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 +2121,6 @@ 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) - - [carbon--theme [variable]](#carbon--theme-variable) ### ✅carbon--theme--g10 [variable] From c59e8f4f5a1cc4a7b6f6e167c8b374fae9289e0a Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Thu, 2 Apr 2020 18:53:55 +0200 Subject: [PATCH 3/4] feat(tag): respect type prop for filter tag (#5382) * feat(tag): respect type prop for filter tag * feat(tag): add support for dark theme colors * fix(tag): import css vars helper * fix(tag): expose tag colors in themes * fix(tag): fix prettier issues * fix(tag): use correct focus color for filterable tag * fix(tag): build new component tokens structure * fix: identify theme for component-tokens * fix: use emit-component-tokens in react stroybook style * fix(tag): emit component tokens on carbon--theme mixin * fix(themes): only emit component tokens if they exist * chore(themes): satisfy prettier issue * fix: roll back to $carbon--theme comparison, remove $theme-identifier * fix: simplify storybook theme mixin * refactor: revert obsolete changes * chore(storybook): revert obsolete explicit theme for component tokens * fix(tag): apply component tokens to default tag Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> --- packages/components/docs/sass.md | 154 +++- .../src/components/tag/_mixins.scss | 12 +- .../components/src/components/tag/_tag.scss | 82 ++- .../src/components/tag/_tokens.scss | 692 ++++++++++++++++++ .../src/globals/scss/_component-tokens.scss | 43 ++ packages/elements/docs/sass.md | 55 ++ packages/react/.storybook/styles.scss | 17 +- packages/themes/docs/sass.md | 53 ++ packages/themes/scss/_mixins.scss | 23 + 9 files changed, 1075 insertions(+), 56 deletions(-) create mode 100644 packages/components/src/components/tag/_tokens.scss create mode 100644 packages/components/src/globals/scss/_component-tokens.scss diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index a4f00e859a93..8db45f7f62d5 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] @@ -6023,6 +6026,57 @@ Define theme variables from a map of tokens - [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] Carbon's g10 color theme @@ -6423,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] @@ -7224,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) @@ -7256,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) @@ -7573,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] @@ -7599,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] @@ -7965,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] @@ -8097,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) @@ -13091,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) @@ -23141,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) @@ -23185,48 +23251,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; @@ -23242,7 +23348,7 @@ Tag styles // tags used for filtering .#{$prefix}--tag--filter { - @include tag-theme($inverse-02, $inverse-01); + cursor: pointer; padding-right: rem(2px); &:focus, @@ -23261,19 +23367,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%; } @@ -23306,11 +23404,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 0d6eb3eae953..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] @@ -5654,6 +5656,57 @@ Define theme variables from a map of tokens - [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] Carbon's g10 color theme @@ -6054,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] @@ -12382,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/docs/sass.md b/packages/themes/docs/sass.md index 74130b205434..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] @@ -2122,6 +2124,56 @@ Define theme variables from a map of tokens - [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] Carbon's g10 color theme @@ -2522,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'; From 33bc00b8af2a2750e273fe8a95389cd2a84b4d55 Mon Sep 17 00:00:00 2001 From: carbon-bot Date: Thu, 2 Apr 2020 17:06:25 +0000 Subject: [PATCH 4/4] chore(project): sync generated files --- packages/components/docs/sass.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 8db45f7f62d5..e5825aeb2a68 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -23228,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;