Skip to content

Commit 9794fed

Browse files
GoodDayForSurfGoodDayForSurf
authored
Fix theme variables (#918)
Move app CSS variables for additional theme under .dx-swatch-additional selector
1 parent fd136b1 commit 9794fed

File tree

7 files changed

+99
-51
lines changed

7 files changed

+99
-51
lines changed

‎packages/devextreme-cli/src/templates/react/application/src/components/header/Header.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../../dx-styles.scss";
1+
@use "../../dx-styles.scss" as *;
22

33
header {
44
background-color: var(--base-bg);

‎packages/devextreme-cli/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../../dx-styles.scss";
1+
@use "../../dx-styles.scss" as *;
22

33
.dx-swatch-additional, .dx-swatch-additional-dark {
44
&.side-navigation-menu {

‎packages/devextreme-cli/src/templates/react/application/src/variables.scss‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,28 @@
1+
@use 'sass:meta';
2+
@use 'sass:color';
3+
@use 'sass:map';
4+
@use "./themes/generated/variables.base.scss" as variablesBase;
5+
@use "./themes/generated/variables.base.dark.scss" as variablesBaseDark;
6+
@use "./themes/generated/variables.additional.scss" as variablesAdditional;
7+
@use "./themes/generated/variables.additional.dark.scss" as variablesAdditionalDark;
8+
9+
@mixin theme-variables($theme-name) {
10+
$theme: meta.module-variables($theme-name);
11+
$base-text-color: map.get($theme, 'base-text-color');
12+
$base-bg: map.get($theme, 'base-bg');
13+
14+
--base-text-color: #{$base-text-color};
15+
--base-bg: #{$base-bg};
16+
--base-bg-darken-5: #{color.adjust($base-bg, $lightness: -5%)};
17+
--base-accent: #{map.get($theme, 'base-accent')};
18+
--base-text-color-alpha-7: #{rgba($base-text-color, color.alpha($base-text-color) * 0.7)};
19+
}
20+
121
:root {
2-
.dx-swatch-light, .dx-swatch-additional {
3-
@import "./themes/generated/variables.base.scss";
4-
5-
--base-text-color: #{$base-text-color};
6-
--base-bg: #{$base-bg};
7-
--base-bg-darken-5: #{darken($base-bg, 5)};
8-
--base-accent: #{$base-accent};
9-
--base-text-color-alpha-7: #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
10-
--footer-border-color: rgba(224, 224, 224, 1);
22+
body {
23+
@include theme-variables('variablesBase');
1124

25+
--footer-border-color: rgba(224, 224, 224, 1);
1226
--plus-icon-color: #242424;
1327
--devextreme-logo-color: #596C7D;
1428
--vue-logo-text-color: #35495E;
@@ -17,14 +31,12 @@
1731
--shadow-color-second: rgba(0, 0, 0, 0.12);
1832
}
1933

20-
.dx-swatch-dark, .dx-swatch-additional-dark {
21-
@import "./themes/generated/variables.base.dark.scss";
34+
.dx-swatch-additional {
35+
@include theme-variables('variablesAdditional');
36+
}
2237

23-
--base-text-color: #{$base-text-color};
24-
--base-bg: #{$base-bg};
25-
--base-bg-darken-5: #{darken($base-bg, 5)};
26-
--base-accent: #{$base-accent};
27-
--base-text-color-alpha-7: #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
38+
.dx-swatch-dark {
39+
@include theme-variables('variablesBaseDark');;
2840

2941
--plus-icon-color: #fff;
3042
--devextreme-logo-color: #fff;
@@ -34,4 +46,8 @@
3446
--shadow-color-second: rgba(0, 0, 0, 0.24);
3547
--footer-border-color: rgba(97, 97, 97, 1);
3648
}
49+
50+
.dx-swatch-additional-dark {
51+
@include theme-variables('variablesAdditionalDark');
52+
}
3753
}

‎packages/devextreme-cli/src/templates/vue-v3/application/src/components/header-toolbar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export default {
111111
</script>
112112

113113
<style lang="scss">
114-
@import "../dx-styles.scss";
114+
@use "../dx-styles.scss" as *;
115115
116116
header {
117117
background-color: var(--base-bg);

‎packages/devextreme-cli/src/templates/vue-v3/application/src/components/side-nav-menu.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,8 @@ export default {
119119
</script>
120120

121121
<style lang="scss">
122-
@import "../variables.scss";
123-
@import "../dx-styles.scss";
122+
@use "../variables.scss" as *;
123+
@use "../dx-styles.scss" as *;
124124
125125
.dx-swatch-additional, .dx-swatch-additional-dark {
126126
&.side-navigation-menu {

‎packages/devextreme-cli/src/templates/vue-v3/application/src/variables.scss‎

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,28 @@
1+
@use 'sass:meta';
2+
@use 'sass:color';
3+
@use 'sass:map';
4+
@use "./themes/generated/variables.base.scss" as variablesBase;
5+
@use "./themes/generated/variables.base.dark.scss" as variablesBaseDark;
6+
@use "./themes/generated/variables.additional.scss" as variablesAdditional;
7+
@use "./themes/generated/variables.additional.dark.scss" as variablesAdditionalDark;
8+
9+
@mixin theme-variables($theme-name) {
10+
$theme: meta.module-variables($theme-name);
11+
$base-text-color: map.get($theme, 'base-text-color');
12+
$base-bg: map.get($theme, 'base-bg');
13+
14+
--base-text-color: #{$base-text-color};
15+
--base-bg: #{$base-bg};
16+
--base-bg-darken-5: #{color.adjust($base-bg, $lightness: -5%)};
17+
--base-accent: #{map.get($theme, 'base-accent')};
18+
--base-text-color-alpha-7: #{rgba($base-text-color, color.alpha($base-text-color) * 0.7)};
19+
}
20+
121
:root {
222
body {
3-
@import "./themes/generated/variables.base.scss";
23+
@include theme-variables('variablesBase');
424

5-
--base-text-color: #{$base-text-color};
6-
--base-bg: #{$base-bg};
7-
--base-bg-darken-5: #{darken($base-bg, 5)};
8-
--base-accent: #{$base-accent};
9-
--base-text-color-alpha-7: #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
1025
--footer-border-color: rgba(224, 224, 224, 1);
11-
1226
--plus-icon-color: #242424;
1327
--devextreme-logo-color: #596C7D;
1428
--vue-logo-text-color: #35495E;
@@ -17,14 +31,12 @@
1731
--shadow-color-second: rgba(0, 0, 0, 0.12);
1832
}
1933

20-
.dx-swatch-dark, .dx-swatch-additional-dark {
21-
@import "./themes/generated/variables.base.dark.scss";
34+
.dx-swatch-additional {
35+
@include theme-variables('variablesAdditional');
36+
}
2237

23-
--base-text-color: #{$base-text-color};
24-
--base-bg: #{$base-bg};
25-
--base-bg-darken-5: #{darken($base-bg, 5)};
26-
--base-accent: #{$base-accent};
27-
--base-text-color-alpha-7: #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
38+
.dx-swatch-dark {
39+
@include theme-variables('variablesBaseDark');;
2840

2941
--plus-icon-color: #fff;
3042
--devextreme-logo-color: #fff;
@@ -34,4 +46,8 @@
3446
--shadow-color-second: rgba(0, 0, 0, 0.24);
3547
--footer-border-color: rgba(97, 97, 97, 1);
3648
}
49+
50+
.dx-swatch-additional-dark {
51+
@include theme-variables('variablesAdditionalDark');
52+
}
3753
}

‎packages/devextreme-schematics/src/add-layout/files/src/variables.scss‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,28 @@
1+
@use 'sass:meta';
2+
@use 'sass:color';
3+
@use 'sass:map';
4+
@use "./themes/generated/variables.base.scss" as variablesBase;
5+
@use "./themes/generated/variables.base.dark.scss" as variablesBaseDark;
6+
@use "./themes/generated/variables.additional.scss" as variablesAdditional;
7+
@use "./themes/generated/variables.additional.dark.scss" as variablesAdditionalDark;
8+
9+
@mixin theme-variables($theme-name) {
10+
$theme: meta.module-variables($theme-name);
11+
$base-text-color: map.get($theme, 'base-text-color');
12+
$base-bg: map.get($theme, 'base-bg');
13+
14+
--base-text-color: #{$base-text-color};
15+
--base-bg: #{$base-bg};
16+
--base-bg-darken-5: #{color.adjust($base-bg, $lightness: -5%)};
17+
--base-accent: #{map.get($theme, 'base-accent')};
18+
--base-text-color-alpha-7: #{rgba($base-text-color, color.alpha($base-text-color) * 0.7)};
19+
}
20+
121
:root {
2-
.dx-swatch-light, .dx-swatch-additional {
3-
@import "./themes/generated/variables.base.scss";
4-
5-
--base-text-color: #{$base-text-color};
6-
--base-bg: #{$base-bg};
7-
--base-bg-darken-5: #{darken($base-bg, 5)};
8-
--base-accent: #{$base-accent};
9-
--base-text-color-alpha-7: #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
10-
--footer-border-color: rgba(224, 224, 224, 1);
22+
body {
23+
@include theme-variables('variablesBase');
1124

25+
--footer-border-color: rgba(224, 224, 224, 1);
1226
--plus-icon-color: #242424;
1327
--devextreme-logo-color: #596C7D;
1428
--vue-logo-text-color: #35495E;
@@ -17,14 +31,12 @@
1731
--shadow-color-second: rgba(0, 0, 0, 0.12);
1832
}
1933

20-
.dx-swatch-dark, .dx-swatch-additional-dark {
21-
@import "./themes/generated/variables.base.dark.scss";
34+
.dx-swatch-additional {
35+
@include theme-variables('variablesAdditional');
36+
}
2237

23-
--base-text-color: #{$base-text-color};
24-
--base-bg: #{$base-bg};
25-
--base-bg-darken-5: #{darken($base-bg, 5)};
26-
--base-accent: #{$base-accent};
27-
--base-text-color-alpha-7: #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
38+
.dx-swatch-dark {
39+
@include theme-variables('variablesBaseDark');;
2840

2941
--plus-icon-color: #fff;
3042
--devextreme-logo-color: #fff;
@@ -34,4 +46,8 @@
3446
--shadow-color-second: rgba(0, 0, 0, 0.24);
3547
--footer-border-color: rgba(97, 97, 97, 1);
3648
}
49+
50+
.dx-swatch-additional-dark {
51+
@include theme-variables('variablesAdditionalDark');
52+
}
3753
}

0 commit comments

Comments
 (0)