Fix theme variables (#918)

Move app CSS variables for additional theme under .dx-swatch-additional selector
DevExpress · Feb 5, 2025 · 9794fed · 9794fed
1 parent fd136b1
commit 9794fed
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 51 deletions.
diff --git a/packages/devextreme-cli/src/templates/react/application/src/components/header/Header.scss b/packages/devextreme-cli/src/templates/react/application/src/components/header/Header.scss
@@ -1,4 +1,4 @@
-@import "../../dx-styles.scss";
+@use "../../dx-styles.scss" as *;
 
 header {
   background-color: var(--base-bg);

diff --git a/...c/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.scss b/...c/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.scss
@@ -1,4 +1,4 @@
-@import "../../dx-styles.scss";
+@use "../../dx-styles.scss" as *;
 
 .dx-swatch-additional, .dx-swatch-additional-dark {
   &.side-navigation-menu {

diff --git a/packages/devextreme-cli/src/templates/react/application/src/variables.scss b/packages/devextreme-cli/src/templates/react/application/src/variables.scss
@@ -1,14 +1,28 @@
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:map';
+@use "./themes/generated/variables.base.scss" as variablesBase;
+@use "./themes/generated/variables.base.dark.scss" as variablesBaseDark;
+@use "./themes/generated/variables.additional.scss" as variablesAdditional;
+@use "./themes/generated/variables.additional.dark.scss" as variablesAdditionalDark;
+
+@mixin theme-variables($theme-name) {
+  $theme: meta.module-variables($theme-name);
+  $base-text-color: map.get($theme, 'base-text-color');
+  $base-bg: map.get($theme, 'base-bg');
+
+  --base-text-color:  #{$base-text-color};
+  --base-bg: #{$base-bg};
+  --base-bg-darken-5: #{color.adjust($base-bg, $lightness: -5%)};
+  --base-accent:  #{map.get($theme, 'base-accent')};
+  --base-text-color-alpha-7: #{rgba($base-text-color, color.alpha($base-text-color) * 0.7)};
+}
+
 :root {
-  .dx-swatch-light, .dx-swatch-additional {
-    @import "./themes/generated/variables.base.scss";
-
-    --base-text-color:  #{$base-text-color};
-    --base-bg: #{$base-bg};
-    --base-bg-darken-5: #{darken($base-bg, 5)};
-    --base-accent:  #{$base-accent};
-    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
-    --footer-border-color: rgba(224, 224, 224, 1);
+  body {
+    @include theme-variables('variablesBase');
 
+    --footer-border-color: rgba(224, 224, 224, 1);
     --plus-icon-color: #242424;
     --devextreme-logo-color: #596C7D;
     --vue-logo-text-color: #35495E;
@@ -17,14 +31,12 @@
     --shadow-color-second: rgba(0, 0, 0, 0.12);
   }
 
-  .dx-swatch-dark, .dx-swatch-additional-dark {
-    @import "./themes/generated/variables.base.dark.scss";
+  .dx-swatch-additional {
+    @include theme-variables('variablesAdditional');
+  }
 
-    --base-text-color:  #{$base-text-color};
-    --base-bg: #{$base-bg};
-    --base-bg-darken-5: #{darken($base-bg, 5)};
-    --base-accent:  #{$base-accent};
-    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
+  .dx-swatch-dark {
+    @include theme-variables('variablesBaseDark');;
 
     --plus-icon-color: #fff;
     --devextreme-logo-color: #fff;
@@ -34,4 +46,8 @@
     --shadow-color-second: rgba(0, 0, 0, 0.24);
     --footer-border-color: rgba(97, 97, 97, 1);
   }
+
+  .dx-swatch-additional-dark {
+    @include theme-variables('variablesAdditionalDark');
+  }
 }
diff --git a/packages/devextreme-cli/src/templates/vue-v3/application/src/components/header-toolbar.vue b/packages/devextreme-cli/src/templates/vue-v3/application/src/components/header-toolbar.vue
@@ -111,7 +111,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../dx-styles.scss";
+@use "../dx-styles.scss" as *;
 
 header {
   background-color: var(--base-bg);

diff --git a/packages/devextreme-cli/src/templates/vue-v3/application/src/components/side-nav-menu.vue b/packages/devextreme-cli/src/templates/vue-v3/application/src/components/side-nav-menu.vue
@@ -119,8 +119,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../variables.scss";
-@import "../dx-styles.scss";
+@use "../variables.scss" as *;
+@use "../dx-styles.scss" as *;
 
 .dx-swatch-additional, .dx-swatch-additional-dark {
   &.side-navigation-menu {

diff --git a/packages/devextreme-cli/src/templates/vue-v3/application/src/variables.scss b/packages/devextreme-cli/src/templates/vue-v3/application/src/variables.scss
@@ -1,14 +1,28 @@
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:map';
+@use "./themes/generated/variables.base.scss" as variablesBase;
+@use "./themes/generated/variables.base.dark.scss" as variablesBaseDark;
+@use "./themes/generated/variables.additional.scss" as variablesAdditional;
+@use "./themes/generated/variables.additional.dark.scss" as variablesAdditionalDark;
+
+@mixin theme-variables($theme-name) {
+  $theme: meta.module-variables($theme-name);
+  $base-text-color: map.get($theme, 'base-text-color');
+  $base-bg: map.get($theme, 'base-bg');
+
+  --base-text-color:  #{$base-text-color};
+  --base-bg: #{$base-bg};
+  --base-bg-darken-5: #{color.adjust($base-bg, $lightness: -5%)};
+  --base-accent:  #{map.get($theme, 'base-accent')};
+  --base-text-color-alpha-7: #{rgba($base-text-color, color.alpha($base-text-color) * 0.7)};
+}
+
 :root {
   body {
-    @import "./themes/generated/variables.base.scss";
+    @include theme-variables('variablesBase');
 
-    --base-text-color:  #{$base-text-color};
-    --base-bg: #{$base-bg};
-    --base-bg-darken-5: #{darken($base-bg, 5)};
-    --base-accent:  #{$base-accent};
-    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
     --footer-border-color: rgba(224, 224, 224, 1);
-
     --plus-icon-color: #242424;
     --devextreme-logo-color: #596C7D;
     --vue-logo-text-color: #35495E;
@@ -17,14 +31,12 @@
     --shadow-color-second: rgba(0, 0, 0, 0.12);
   }
 
-  .dx-swatch-dark, .dx-swatch-additional-dark {
-    @import "./themes/generated/variables.base.dark.scss";
+  .dx-swatch-additional {
+    @include theme-variables('variablesAdditional');
+  }
 
-    --base-text-color:  #{$base-text-color};
-    --base-bg: #{$base-bg};
-    --base-bg-darken-5: #{darken($base-bg, 5)};
-    --base-accent:  #{$base-accent};
-    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
+  .dx-swatch-dark {
+    @include theme-variables('variablesBaseDark');;
 
     --plus-icon-color: #fff;
     --devextreme-logo-color: #fff;
@@ -34,4 +46,8 @@
     --shadow-color-second: rgba(0, 0, 0, 0.24);
     --footer-border-color: rgba(97, 97, 97, 1);
   }
+
+  .dx-swatch-additional-dark {
+    @include theme-variables('variablesAdditionalDark');
+  }
 }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/variables.scss b/packages/devextreme-schematics/src/add-layout/files/src/variables.scss
@@ -1,14 +1,28 @@
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:map';
+@use "./themes/generated/variables.base.scss" as variablesBase;
+@use "./themes/generated/variables.base.dark.scss" as variablesBaseDark;
+@use "./themes/generated/variables.additional.scss" as variablesAdditional;
+@use "./themes/generated/variables.additional.dark.scss" as variablesAdditionalDark;
+
+@mixin theme-variables($theme-name) {
+  $theme: meta.module-variables($theme-name);
+  $base-text-color: map.get($theme, 'base-text-color');
+  $base-bg: map.get($theme, 'base-bg');
+
+  --base-text-color:  #{$base-text-color};
+  --base-bg: #{$base-bg};
+  --base-bg-darken-5: #{color.adjust($base-bg, $lightness: -5%)};
+  --base-accent:  #{map.get($theme, 'base-accent')};
+  --base-text-color-alpha-7: #{rgba($base-text-color, color.alpha($base-text-color) * 0.7)};
+}
+
 :root {
-  .dx-swatch-light, .dx-swatch-additional {
-    @import "./themes/generated/variables.base.scss";
-
-    --base-text-color:  #{$base-text-color};
-    --base-bg: #{$base-bg};
-    --base-bg-darken-5: #{darken($base-bg, 5)};
-    --base-accent:  #{$base-accent};
-    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
-    --footer-border-color: rgba(224, 224, 224, 1);
+  body {
+    @include theme-variables('variablesBase');
 
+    --footer-border-color: rgba(224, 224, 224, 1);
     --plus-icon-color: #242424;
     --devextreme-logo-color: #596C7D;
     --vue-logo-text-color: #35495E;
@@ -17,14 +31,12 @@
     --shadow-color-second: rgba(0, 0, 0, 0.12);
   }
 
-  .dx-swatch-dark, .dx-swatch-additional-dark {
-    @import "./themes/generated/variables.base.dark.scss";
+  .dx-swatch-additional {
+    @include theme-variables('variablesAdditional');
+  }
 
-    --base-text-color:  #{$base-text-color};
-    --base-bg: #{$base-bg};
-    --base-bg-darken-5: #{darken($base-bg, 5)};
-    --base-accent:  #{$base-accent};
-    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
+  .dx-swatch-dark {
+    @include theme-variables('variablesBaseDark');;
 
     --plus-icon-color: #fff;
     --devextreme-logo-color: #fff;
@@ -34,4 +46,8 @@
     --shadow-color-second: rgba(0, 0, 0, 0.24);
     --footer-border-color: rgba(97, 97, 97, 1);
   }
+
+  .dx-swatch-additional-dark {
+    @include theme-variables('variablesAdditionalDark');
+  }
 }