aboutsummaryrefslogtreecommitdiffstats
path: root/language-web/src/main/js/theme
diff options
context:
space:
mode:
authorLibravatar Kristóf Marussy <kristof@marussy.com>2021-12-12 17:48:47 +0100
committerLibravatar Kristóf Marussy <kristof@marussy.com>2021-12-12 17:48:47 +0100
commitfc7e9312d00e60171ed77c477ed91231d3dbfff9 (patch)
treecc185dd088b5fa6e9357aab3c9062a70626d1953 /language-web/src/main/js/theme
parentbuild: refactor java-application conventions (diff)
downloadrefinery-fc7e9312d00e60171ed77c477ed91231d3dbfff9.tar.gz
refinery-fc7e9312d00e60171ed77c477ed91231d3dbfff9.tar.zst
refinery-fc7e9312d00e60171ed77c477ed91231d3dbfff9.zip
build: move modules into subproject directory
Diffstat (limited to 'language-web/src/main/js/theme')
-rw-r--r--language-web/src/main/js/theme/EditorTheme.ts47
-rw-r--r--language-web/src/main/js/theme/ThemeProvider.tsx15
-rw-r--r--language-web/src/main/js/theme/ThemeStore.ts64
3 files changed, 0 insertions, 126 deletions
diff --git a/language-web/src/main/js/theme/EditorTheme.ts b/language-web/src/main/js/theme/EditorTheme.ts
deleted file mode 100644
index 1b0dd5de..00000000
--- a/language-web/src/main/js/theme/EditorTheme.ts
+++ /dev/null
@@ -1,47 +0,0 @@
1import type { PaletteMode } from '@mui/material';
2
3import cssVariables from '../../css/themeVariables.module.scss';
4
5export enum EditorTheme {
6 Light,
7 Dark,
8}
9
10export class EditorThemeData {
11 className: string;
12
13 paletteMode: PaletteMode;
14
15 toggleDarkMode: EditorTheme;
16
17 foreground!: string;
18
19 foregroundHighlight!: string;
20
21 background!: string;
22
23 primary!: string;
24
25 secondary!: string;
26
27 constructor(className: string, paletteMode: PaletteMode, toggleDarkMode: EditorTheme) {
28 this.className = className;
29 this.paletteMode = paletteMode;
30 this.toggleDarkMode = toggleDarkMode;
31 Reflect.ownKeys(this).forEach((key) => {
32 if (!Reflect.get(this, key)) {
33 const cssKey = `${this.className}--${key.toString()}`;
34 if (cssKey in cssVariables) {
35 Reflect.set(this, key, cssVariables[cssKey]);
36 }
37 }
38 });
39 }
40}
41
42export const DEFAULT_THEME = EditorTheme.Dark;
43
44export const EDITOR_THEMES: { [key in EditorTheme]: EditorThemeData } = {
45 [EditorTheme.Light]: new EditorThemeData('light', 'light', EditorTheme.Dark),
46 [EditorTheme.Dark]: new EditorThemeData('dark', 'dark', EditorTheme.Light),
47};
diff --git a/language-web/src/main/js/theme/ThemeProvider.tsx b/language-web/src/main/js/theme/ThemeProvider.tsx
deleted file mode 100644
index f5b50be1..00000000
--- a/language-web/src/main/js/theme/ThemeProvider.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
1import { observer } from 'mobx-react-lite';
2import { ThemeProvider as MaterialUiThemeProvider } from '@mui/material/styles';
3import React from 'react';
4
5import { useRootStore } from '../RootStore';
6
7export const ThemeProvider: React.FC = observer(({ children }) => {
8 const { themeStore } = useRootStore();
9
10 return (
11 <MaterialUiThemeProvider theme={themeStore.materialUiTheme}>
12 {children}
13 </MaterialUiThemeProvider>
14 );
15});
diff --git a/language-web/src/main/js/theme/ThemeStore.ts b/language-web/src/main/js/theme/ThemeStore.ts
deleted file mode 100644
index ffaf6dde..00000000
--- a/language-web/src/main/js/theme/ThemeStore.ts
+++ /dev/null
@@ -1,64 +0,0 @@
1import { makeAutoObservable } from 'mobx';
2import {
3 Theme,
4 createTheme,
5 responsiveFontSizes,
6} from '@mui/material/styles';
7
8import {
9 EditorTheme,
10 EditorThemeData,
11 DEFAULT_THEME,
12 EDITOR_THEMES,
13} from './EditorTheme';
14
15export class ThemeStore {
16 currentTheme: EditorTheme = DEFAULT_THEME;
17
18 constructor() {
19 makeAutoObservable(this);
20 }
21
22 toggleDarkMode(): void {
23 this.currentTheme = this.currentThemeData.toggleDarkMode;
24 }
25
26 private get currentThemeData(): EditorThemeData {
27 return EDITOR_THEMES[this.currentTheme];
28 }
29
30 get materialUiTheme(): Theme {
31 const themeData = this.currentThemeData;
32 const materialUiTheme = createTheme({
33 palette: {
34 mode: themeData.paletteMode,
35 background: {
36 default: themeData.background,
37 paper: themeData.background,
38 },
39 primary: {
40 main: themeData.primary,
41 },
42 secondary: {
43 main: themeData.secondary,
44 },
45 error: {
46 main: themeData.secondary,
47 },
48 text: {
49 primary: themeData.foregroundHighlight,
50 secondary: themeData.foreground,
51 },
52 },
53 });
54 return responsiveFontSizes(materialUiTheme);
55 }
56
57 get darkMode(): boolean {
58 return this.currentThemeData.paletteMode === 'dark';
59 }
60
61 get className(): string {
62 return this.currentThemeData.className;
63 }
64}