Theming: Make new theme exposed by ThemeContext and make new theme include v1 for compatability (to pass to useTheme) (#33207)

* WIP: Making new theme the default

* Progress

* Updates, lots of updates

* Things are working

* Fixed issues with storybook

* Fixed tests
This commit is contained in:
Torkel Ödegaard
2021-04-21 14:25:43 +02:00
committed by GitHub
parent 569fb3f112
commit 7e2bf4f6c3
111 changed files with 1505 additions and 1534 deletions

View File

@@ -1,10 +1,8 @@
import * as fs from 'fs';
import darkTheme from '@grafana/ui/src/themes/dark';
import lightTheme from '@grafana/ui/src/themes/light';
import defaultTheme from '@grafana/ui/src/themes/default';
import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.scss.tmpl';
import { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl';
import { commonThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.scss.tmpl';
import { createTheme } from '@grafana/data';
const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.generated.scss';
const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.generated.scss';
@@ -23,11 +21,14 @@ const writeVariablesFile = async (path: string, data: string) => {
};
const generateSassVariableFiles = async () => {
const darkTheme = createTheme();
const lightTheme = createTheme({ palette: { mode: 'light' } });
try {
await Promise.all([
writeVariablesFile(darkThemeVariablesPath, darkThemeVarsTemplate(darkTheme)),
writeVariablesFile(lightThemeVariablesPath, lightThemeVarsTemplate(lightTheme)),
writeVariablesFile(defaultThemeVariablesPath, commonThemeVarsTemplate(defaultTheme)),
writeVariablesFile(defaultThemeVariablesPath, commonThemeVarsTemplate(darkTheme)),
]);
console.log('\nSASS variable files generated');
} catch (error) {