From 26c045d0ee11c141cce7229b2c96c0e0d6f89bec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 19 Nov 2024 16:14:18 +0100 Subject: [PATCH 1/2] Feat(design-tokens): Add `color` prefix to css-variables mixin --- .../src/scss/themes/theme-light-default/_colors.scss | 2 +- .../src/scss/themes/theme-light-on-brand/_colors.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss index 551b1f010d..98f5f6ebe4 100644 --- a/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss +++ b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss @@ -173,7 +173,7 @@ $text-primary: #202020 !default; $text-secondary: #535353 !default; $text-tertiary: #7f7f7f !default; -@mixin css-variables { +@mixin color-css-variables { --spirit-color-background-backdrop: #{$background-backdrop}; --spirit-color-background-interactive-state-active: #{$background-interactive-state-active}; --spirit-color-background-interactive-state-default: #{$background-interactive-state-default}; diff --git a/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss index 109e404f8f..1bb0bbc19d 100644 --- a/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss +++ b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss @@ -173,7 +173,7 @@ $text-primary: #f9f9f9 !default; $text-secondary: #d9d9d9 !default; $text-tertiary: #b2b2b2 !default; -@mixin css-variables { +@mixin color-css-variables { --spirit-color-background-backdrop: #{$background-backdrop}; --spirit-color-background-interactive-state-active: #{$background-interactive-state-active}; --spirit-color-background-interactive-state-default: #{$background-interactive-state-default}; From 732a62fed20870574ceb9beadf4caf6a6c161c7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 19 Nov 2024 16:17:08 +0100 Subject: [PATCH 2/2] Feat(web): Print all design-tokens mixins to theme selectors --- packages/web/src/scss/tools/_themes.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/web/src/scss/tools/_themes.scss b/packages/web/src/scss/tools/_themes.scss index 21e869e078..40d46fa0c2 100644 --- a/packages/web/src/scss/tools/_themes.scss +++ b/packages/web/src/scss/tools/_themes.scss @@ -13,14 +13,16 @@ @each $theme-name, $theme-token-types in $themes { $selector: if($is-default-theme, ':root, .#{$theme-name}', '.#{$theme-name}'); - $sass-variables: map.get($theme-token-types, variables); - $css-variables: map.get($theme-token-types, mixins, css-variables); + $theme-variables: map.get($theme-token-types, variables); + $theme-mixins: map.get($theme-token-types, mixins); #{$selector} { - @include meta.apply($css-variables); + @each $theme-mixin-name, $theme-mixin in $theme-mixins { + @include meta.apply($theme-mixin); + } @if $add-background-image-urls { - @include generate-background-image-urls($themed-tokens: $sass-variables); + @include generate-background-image-urls($themed-tokens: $theme-variables); } }