Skip to content

Commit d031eb9

Browse files
GoodDayForSurfGoodDayForSurf
committed
React:
add fluent as default theme add theme switching
1 parent ef871af commit d031eb9

File tree

26 files changed

+341
-158
lines changed

26 files changed

+341
-158
lines changed

‎packages/devextreme-cli/src/applications/application.react.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const preparePackageJsonForTemplate = (appPath, appName, isTypeScript) => {
3232
{ name: 'sass', version: '^1.34.1' },
3333
{ name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true },
3434
{ name: 'react-router-dom', version: '^6.3.0' },
35+
{ name: 'ajv', version: '^7.2.4' },
3536
];
3637
const scripts = [
3738
{ name: 'build-themes', value: 'devextreme build' },
@@ -100,7 +101,9 @@ const addTemplate = (appPath, appName, templateOptions) => {
100101

101102
const styles = [
102103
'./themes/generated/theme.additional.css',
104+
'./themes/generated/theme.additional.dark.css',
103105
'./themes/generated/theme.base.css',
106+
'./themes/generated/theme.base.dark.css',
104107
'devextreme/dist/css/dx.common.css'
105108
];
106109

‎packages/devextreme-cli/src/templates/react/application/devextreme.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,55 @@
99
"outputFile": "src/themes/generated/theme.base.css"
1010
}
1111
},
12+
{
13+
"command": "build-theme",
14+
"options": {
15+
"inputFile": "src/themes/metadata.base.dark.json",
16+
"outputFile": "src/themes/generated/theme.base.dark.css"
17+
}
18+
},
1219
{
1320
"command": "build-theme",
1421
"options": {
1522
"inputFile": "src/themes/metadata.additional.json",
1623
"outputFile": "src/themes/generated/theme.additional.css"
1724
}
1825
},
26+
{
27+
"command": "build-theme",
28+
"options": {
29+
"inputFile": "src/themes/metadata.additional.dark.json",
30+
"outputFile": "src/themes/generated/theme.additional.dark.css"
31+
}
32+
},
1933
{
2034
"command": "export-theme-vars",
2135
"options": {
2236
"inputFile": "src/themes/metadata.base.json",
2337
"outputFile": "src/themes/generated/variables.base.scss"
2438
}
2539
},
40+
{
41+
"command": "export-theme-vars",
42+
"options": {
43+
"inputFile": "src/themes/metadata.base.dark.json",
44+
"outputFile": "src/themes/generated/variables.base.dark.scss"
45+
}
46+
},
2647
{
2748
"command": "export-theme-vars",
2849
"options": {
2950
"inputFile": "src/themes/metadata.additional.json",
3051
"outputFile": "src/themes/generated/variables.additional.scss"
3152
}
53+
},
54+
{
55+
"command": "export-theme-vars",
56+
"options": {
57+
"inputFile": "src/themes/metadata.additional.dark.json",
58+
"outputFile": "src/themes/generated/variables.additional.dark.scss"
3259
}
60+
}
3361
]
3462
}
3563
}

‎packages/devextreme-cli/src/templates/react/application/src/App.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { AuthProvider, useAuth } from './contexts/auth';
77
import { useScreenSizeClass } from './utils/media-query';
88
import Content from './Content';
99
import UnauthenticatedContent from './UnauthenticatedContent';
10+
import { ThemeContext, useThemeContext} from "./theme";
1011

1112
function App() {
1213
const { user, loading } = useAuth();
@@ -24,16 +25,19 @@ function App() {
2425

2526
export default function Root() {
2627
const screenSizeClass = useScreenSizeClass();
28+
const themeContext = useThemeContext();
2729

2830
return (
2931
<Router>
30-
<AuthProvider>
31-
<NavigationProvider>
32-
<div className={`app ${screenSizeClass}`}>
33-
<App />
34-
</div>
35-
</NavigationProvider>
36-
</AuthProvider>
32+
<ThemeContext.Provider value={themeContext}>
33+
<AuthProvider>
34+
<NavigationProvider>
35+
<div className={`app ${screenSizeClass}`}>
36+
<App />
37+
</div>
38+
</NavigationProvider>
39+
</AuthProvider>
40+
</ThemeContext.Provider>
3741
</Router>
3842
);
3943
}

‎packages/devextreme-cli/src/templates/react/application/src/components/create-account-form/CreateAccountForm.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
.create-account-form {
44
.policy-info {
55
margin: 10px 0;
6-
color: rgba($base-text-color, alpha($base-text-color) * 0.7);
6+
color: var(--base-text-color-alpha-7);
77
font-size: 14px;
88
font-style: normal;
99

1010
a {
11-
color: rgba($base-text-color, alpha($base-text-color) * 0.7);
11+
color: var(--base-text-color-alpha-7);
1212
}
1313
}
1414

1515
.login-link {
16-
color: $base-accent;
16+
color: var(--base-accent);
1717
font-size: 16px;
1818
text-align: center;
1919
}

‎packages/devextreme-cli/src/templates/react/application/src/components/footer/Footer.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
@import "../../themes/generated/variables.base.scss";
2-
31
.footer {
42
display: block;
5-
color: rgba($base-text-color, alpha($base-text-color) * 0.7);
6-
border-top: 1px solid var(--dx-color-border);
3+
color: var(--base-text-color-alpha-7);
4+
border-top: 1px solid var(--footer-border-color);
75
padding-top: 20px;
86
padding-bottom: 24px;
97
margin: 0 40px;

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
@import "../../themes/generated/variables.base.scss";
21
@import "../../dx-styles.scss";
32

43
header {
5-
background-color: $base-bg;
4+
background-color: var(--base-bg);
65
}
76

87
.header-component {
98
flex: 0 0 auto;
10-
z-index: 1;
9+
z-index: 1505;
1110
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1211
}
1312

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Button from 'devextreme-react/button';
44
import UserPanel from '../user-panel/UserPanel';
55
import './Header.scss';
66
import { Template } from 'devextreme-react/core/template';
7+
import { ThemeSwitcher } from '../theme-switcher/ThemeSwitcher';
78
<%=#isTypeScript%>import type { HeaderProps } from '../../types';<%=/isTypeScript%>
89

910
export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTypeScript%>: HeaderProps<%=/isTypeScript%>) {
@@ -24,6 +25,11 @@ export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTyp
2425
text={title}
2526
visible={!!title}
2627
/>
28+
<Item
29+
location={'after'}
30+
>
31+
<ThemeSwitcher />
32+
</Item>
2733
<Item
2834
location={'after'}
2935
locateInMenu={'auto'}

‎packages/devextreme-cli/src/templates/react/application/src/components/login-form/LoginForm.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@
1313

1414
.form-text {
1515
margin: 10px 0;
16-
color: rgba($base-text-color, alpha($base-text-color) * 0.7);
16+
color: var(--base-text-color-alpha-7);
1717
}
1818
}

‎packages/devextreme-cli/src/templates/react/application/src/components/reset-password-form/ResetPasswordForm.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
}
77

88
.login-link {
9-
color: $base-accent;
9+
color: var(--base-accent);
1010
font-size: 16px;
1111
text-align: center;
1212
}

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

Lines changed: 51 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,67 @@
11
@import "../../dx-styles.scss";
2-
@import "../../themes/generated/variables.additional.scss";
32

4-
.side-navigation-menu {
5-
display: flex;
6-
flex-direction: column;
7-
min-height: 100%;
8-
height: 100%;
9-
width: 250px !important;
10-
11-
.menu-container {
12-
min-height: 100%;
3+
.dx-swatch-additional, .dx-swatch-additional-dark {
4+
&.side-navigation-menu {
135
display: flex;
14-
flex: 1;
6+
flex-direction: column;
7+
min-height: 100%;
8+
height: 100%;
9+
width: 250px !important;
10+
background-color: var(--base-bg);
11+
12+
.menu-container {
13+
min-height: 100%;
14+
display: flex;
15+
flex: 1;
1516

16-
.dx-treeview {
17-
// ## Long text positioning
18-
white-space: nowrap;
19-
// ##
17+
.dx-treeview {
18+
// ## Long text positioning
19+
white-space: nowrap;
20+
// ##
2021

21-
// ## Icon width customization
22-
.dx-treeview-item {
23-
padding-left: 0;
24-
flex-direction: row-reverse;
22+
// ## Icon width customization
23+
.dx-treeview-item {
24+
padding-left: 0;
25+
border-radius: 0;
26+
flex-direction: row-reverse;
2527

26-
.dx-icon {
27-
width: $side-panel-min-width !important;
28-
margin: 0 !important;
28+
.dx-icon {
29+
width: $side-panel-min-width !important;
30+
margin: 0 !important;
31+
}
2932
}
30-
}
31-
// ##
32-
33-
// ## Arrow customization
34-
.dx-treeview-node {
35-
padding: 0 0 !important;
36-
}
3733

38-
.dx-treeview-toggle-item-visibility {
39-
right: 10px;
40-
left: auto;
41-
}
34+
// ##
4235

43-
.dx-rtl .dx-treeview-toggle-item-visibility {
44-
left: 10px;
45-
right: auto;
46-
}
47-
// ##
36+
// ## Arrow customization
37+
.dx-treeview-node {
38+
padding: 0 0 !important;
39+
}
40+
41+
.dx-treeview-toggle-item-visibility {
42+
right: 10px;
43+
left: auto;
44+
}
4845

49-
// ## Item levels customization
50-
.dx-treeview-node {
51-
&[aria-level='1'] {
52-
font-weight: bold;
53-
border-bottom: 1px solid var(--dx-color-border);
46+
.dx-rtl .dx-treeview-toggle-item-visibility {
47+
left: 10px;
48+
right: auto;
5449
}
55-
56-
&[aria-level='2'] .dx-treeview-item-content {
57-
font-weight: normal;
58-
padding: 0 $side-panel-min-width;
50+
// ##
51+
52+
// ## Item levels customization
53+
.dx-treeview-node {
54+
&[aria-level="1"] {
55+
font-weight: bold;
56+
}
57+
58+
&[aria-level="2"] .dx-treeview-item-content {
59+
font-weight: normal;
60+
padding: 0 $side-panel-min-width;
61+
}
5962
}
63+
// ##
6064
}
61-
// ##
6265
}
6366
}
6467
}

0 commit comments

Comments
 (0)