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};
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);
             }
         }