Use TS instead of JS to store theme variables@next

packages/grafana-ui/src/themes/dark.js → packages/grafana-ui/src/themes/dark.ts

-const defaultTheme = require('./default');
-const tinycolor = require('tinycolor2');
+import tinycolor  from 'tinycolor2';
+import defaultTheme from './default';
+import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
 
 const basicColors = {
   black: '#000000',
@@ -29,9 +30,9 @@ const basicColors = {
   orange: '#eb7b18',
 };
 
-const darkTheme = {
+const darkTheme: GrafanaTheme = {
   ...defaultTheme,
-  type: 'dark',
+  type: GrafanaThemeType.Dark,
   name: 'Grafana Dark',
   colors: {
     ...basicColors,
@@ -65,4 +66,4 @@ const darkTheme = {
   },
 };
 
-module.exports = darkTheme;
+export default darkTheme;

packages/grafana-ui/src/themes/default.js → packages/grafana-ui/src/themes/default.ts

@@ -59,4 +59,4 @@ const theme = {
   }
 };
 
-module.exports = theme;
+export default theme;

packages/grafana-ui/src/themes/index.d.ts

-import { GrafanaTheme } from "../types";
-
-export function getTheme(themeName?: string): GrafanaTheme
-export function mockTheme(themeMock: (name: string) => object): () => void

packages/grafana-ui/src/themes/index.js

-const darkTheme = require('./dark');
-const lightTheme = require('./light');
-
-let mockedTheme;
-
-let getTheme = name => (mockedTheme && mockedTheme(name)) || (name === 'light' ? lightTheme : darkTheme);
-
-const mockTheme = mock => {
-  mockedTheme = mock;
-  return () => (mockedTheme = null);
-};
-
-module.exports = {
-  getTheme,
-  mockTheme,
-};

packages/grafana-ui/src/themes/index.ts

+import darkTheme from './dark';
+import lightTheme from './light';
+import { GrafanaTheme } from '../types/theme';
+
+let themeMock: ((name?: string) => GrafanaTheme) | null;
+
+export let getTheme = (name?: string) => (themeMock && themeMock(name)) || (name === 'light' ? lightTheme : darkTheme);
+
+export const mockTheme = (mock: (name: string) => GrafanaTheme) => {
+  themeMock = mock;
+  return () => {
+    themeMock = null;
+  };
+};

packages/grafana-ui/src/themes/light.js → packages/grafana-ui/src/themes/light.ts

-// import { GrafanaThemeType } from "../theme";
-
-const defaultTheme = require('./default');
-const tinycolor = require('tinycolor2');
+import tinycolor from 'tinycolor2';
+import defaultTheme from './default';
+import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
 
 const basicColors = {
   black: '#000000',
@@ -31,11 +30,11 @@ const basicColors = {
   orange: '#ff7941',
 };
 
-const lightTheme/*: GrafanaThemeType*/ = {
+const lightTheme: GrafanaTheme = {
   ...defaultTheme,
-  type: 'light',
+  type: GrafanaThemeType.Light,
   name: 'Grafana Light',
-  colors:  {
+  colors: {
     ...basicColors,
     variable: basicColors.blue,
     inputBlack: '#09090b',
@@ -65,7 +64,7 @@ const lightTheme/*: GrafanaThemeType*/ = {
     dropdown: basicColors.white,
     scrollbar: basicColors.gray5,
     scrollbar2: basicColors.gray5,
-  }
-}
+  },
+};
 
-module.exports = lightTheme;
+export default lightTheme;

packages/grafana-ui/src/themes/selectThemeVariant.test.ts

@@ -17,6 +17,7 @@ const darkThemeMock = {
 };
 
 describe('Theme variable variant selector', () => {
+  // @ts-ignore
   const restoreTheme = mockTheme(name => (name === GrafanaThemeType.Light ? lightThemeMock : darkThemeMock));
 
   afterAll(() => {