refactor using theme variables

Author: GoodDayForSurf

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

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 {

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 themeVars($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 themeVars('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 themeVars('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 themeVars('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 themeVars('variablesAdditionalDark');
+  }
 }