WIP Enable js defined theme to be used in SASS

packages/grafana-ui/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './types';
 export * from './utils';
+export * from './theme';

packages/grafana-ui/src/theme.d.ts

@@ -0,0 +1,116 @@
+export interface GrafanaThemeType {
+  name: string;
+  // TODO: not sure if should be a part of theme
+  brakpoints: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+  };
+  typography: {
+    fontFamily: {
+      sansSerif: string;
+      serif: string;
+      monospace: string;
+    };
+    size: {
+      base: string;
+      xs: string;
+      s: string;
+      m: string;
+      l: string;
+    };
+    weight: {
+      light: number;
+      normal: number;
+      semibold: number;
+    };
+    lineHeight: {
+      xs: number; //1
+      s: number; //1.1
+      m: number; // 4/3
+      l: number; // 1.5
+    };
+    // TODO: Refactor to use size instead of custom defs
+    heading: {
+      h1: string;
+      h2: string;
+      h3: string;
+      h4: string;
+      h5: string;
+      h6: string;
+    };
+  };
+  spacing: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    gutter: string;
+  };
+  border: {
+    radius: {
+      xs: string;
+      s: string;
+      m: string;
+    };
+  };
+  colors: {
+    black: string;
+    white: string;
+    dark1: string;
+    dark2: string;
+    dark3: string;
+    dark4: string;
+    dark5: string;
+    gray1: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    gray5: string;
+    gray6: string;
+    gray7: string;
+    grayBlue: string;
+    inputBlack: string;
+
+    // Accent colors
+    blue: string;
+    blueLight: string;
+    blueDark: string;
+    green: string;
+    red: string;
+    yellow: string;
+    pink: string;
+    purple: string;
+    variable: string;
+    orange: string;
+    queryRed: string;
+    queryGreen: string;
+    queryPurple: string;
+    queryKeyword: string;
+    queryOrange: string;
+
+    // Status colors
+    online: string;
+    warn: string;
+    critical: string;
+
+    // TODO: should this be a part of theme?
+    bodyBg: string;
+    pageBg: string;
+    bodyColor: string;
+    textColor: string;
+    textColorStrong: string;
+    textColorWeak: string;
+    textColorFaint: string;
+    textColorEmphasis: string;
+    linkColor: string;
+    linkColorDisabled: string;
+    linkColorHover: string;
+    linkColorExternal: string;
+    headingColor: string;
+  };
+}
+export function getTheme(): GrafanaThemeType
+export function mockTheme(themeMock: Partial<GrafanaThemeType>): () => void

packages/grafana-ui/src/theme.js

@@ -0,0 +1,15 @@
+const darkTheme = require('./themes/dark');
+const lightTheme = require('./themes/light');
+
+const getTheme = name => (name === 'light' ? lightTheme : darkTheme);
+
+const mockTheme = mock => {
+  const originalGetTheme = getTheme;
+  getTheme = () => mock;
+  return () => (getTheme = originalGetTheme);
+};
+
+module.exports = {
+  getTheme,
+  mockTheme,
+};

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

@@ -0,0 +1,64 @@
+
+
+const defaultTheme = require('./default');
+const tinycolor = require('tinycolor2');
+
+const basicColors = {
+  black: '#00ff00',
+  white: '#ffffff',
+  dark1: '#141414',
+  dark2: '#1f1f20',
+  dark3: '#262628',
+  dark4: '#333333',
+  dark5: '#444444',
+  gray1: '#555555',
+  gray2: '#8e8e8e',
+  gray3: '#b3b3b3',
+  gray4: '#d8d9da',
+  gray5: '#ececec',
+  gray6: '#f4f5f8',
+  gray7: '#fbfbfb',
+  grayBlue: '#212327',
+  blue: '#33b5e5',
+  blueDark: '#005f81',
+  blueLight: '#00a8e6', // not used in dark theme
+  green: '#299c46',
+  red: '#d44a3a',
+  yellow: '#ecbb13',
+  pink: '#ff4444',
+  purple: '#9933cc',
+  variable: '#32d1df',
+  orange: '#eb7b18',
+};
+
+const darkTheme = {
+  ...defaultTheme,
+  name: 'Grafana Dark',
+  colors:  {
+    ...basicColors,
+    inputBlack: '#09090b',
+    queryRed: '#e24d42',
+    queryGreen: '#74e680',
+    queryPurple: '#fe85fc',
+    queryKeyword: '#66d9ef',
+    queryOrange: 'eb7b18',
+    online: '#10a345',
+    warn: '#f79520',
+    critical: '#ed2e18',
+    bodyBg: '#171819',
+    pageBg: '#161719',
+    bodyColor: basicColors.gray4,
+    textColor: basicColors.gray4,
+    textColorStrong: basicColors.white,
+    textColorWeak: basicColors.gray2,
+    textColorEmphasis: basicColors.gray5,
+    textColorFaint: basicColors.dark5,
+    linkColor: new tinycolor(basicColors.white).darken(11).toString(),
+    linkColorDisabled: new tinycolor(basicColors.white).darken(11).toString(),
+    linkColorHover: basicColors.white,
+    linkColorExternal: basicColors.blue,
+    headingColor: new tinycolor(basicColors.white).darken(11).toString(),
+  }
+}
+
+module.exports = darkTheme;

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

@@ -0,0 +1,47 @@
+
+
+const theme = {
+  name: 'Grafana Default',
+  typography: {
+    fontFamily: {
+      sansSerif: "'Roboto', Helvetica, Arial, sans-serif;",
+      serif: "Georgia, 'Times New Roman', Times, serif;",
+      monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace;"
+    },
+    size: {
+      base: '13px',
+      xs: '10px',
+      s: '12px',
+      m: '14px',
+      l: '18px',
+    },
+    heading: {
+      h1: '2rem',
+      h2: '1.75rem',
+      h3: '1.5rem',
+      h4: '1.3rem',
+      h5: '1.2rem',
+      h6: '1rem',
+    },
+    weight: {
+      light: 300,
+      normal: 400,
+      semibold: 500,
+    },
+    lineHeight: {
+      xs: 1,
+      s: 1.1,
+      m: 4/3,
+      l: 1.5
+    }
+  },
+  brakpoints: {
+    xs: '0',
+    s: '544px',
+    m: '768px',
+    l: '992px',
+    xl: '1200px'
+  }
+};
+
+module.exports = theme;

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

@@ -0,0 +1,65 @@
+// import { GrafanaThemeType } from "../theme";
+
+const defaultTheme = require('./default');
+const tinycolor = require('tinycolor2');
+
+const basicColors = {
+  black: '#000000',
+  white: '#ffffff',
+  dark1: '#13161d',
+  dark2: '#1e2028',
+  dark3: '#303133',
+  dark4: '#35373f',
+  dark5: '#41444b',
+  gray1: '#52545c',
+  gray2: '#767980',
+  gray3: '#acb6bf',
+  gray4: '#c7d0d9',
+  gray5: '#dde4ed',
+  gray6: '#e9edf2',
+  gray7: '#f7f8fa',
+  grayBlue: '#212327', // not used in light theme
+  blue: '#0083b3',
+  blueDark: '#005f81',
+  blueLight: '#00a8e6',
+  green: '#3aa655',
+  red: '#d44939',
+  yellow: '#ff851b',
+  pink: '#e671b8',
+  purple: '#9954bb',
+  variable: '#0083b3',
+  orange: '#ff7941',
+};
+
+const lightTheme/*: GrafanaThemeType*/ = {
+  ...defaultTheme,
+  name: 'Grafana Light',
+  colors:  {
+    ...basicColors,
+    variable: basicColors.blue,
+    inputBlack: '#09090b',
+    queryRed: basicColors.red,
+    queryGreen: basicColors.green,
+    queryPurple: basicColors.purple,
+    queryKeyword: basicColors.blue,
+    queryOrange: basicColors.orange,
+    online: '#01a64f',
+    warn: '#f79520',
+    critical: '#ec2128',
+    bodyBg: basicColors.gray7,
+    pageBg: basicColors.gray7,
+    bodyColor: basicColors.gray1,
+    textColor: basicColors.gray1,
+    textColorStrong: basicColors.dark2,
+    textColorWeak: basicColors.gray2,
+    textColorEmphasis: basicColors.gray5,
+    textColorFaint: basicColors.dark4,
+    linkColor: basicColors.gray1,
+    linkColorDisabled: new tinycolor(basicColors.gray1).lighten(30).toString(),
+    linkColorHover: new tinycolor(basicColors.gray1).darken(20).toString(),
+    linkColorExternal: basicColors.blueLight,
+    headingColor: basicColors.gray1,
+  }
+}
+
+module.exports = lightTheme;