Skip to content

Commit 91d569a

Browse files
GoodDayForSurfGoodDayForSurf
committed
refactor using theme variables (angular, react)
1 parent a6396ee commit 91d569a

File tree

4 files changed

+66
-34
lines changed

4 files changed

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

0 commit comments

Comments
 (0)