Added common theme variabless generation, created GrafanaThemeCommons interface

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -1,3 +1,5 @@
+/* tslint:disable:max-line-length */
+
 import { GrafanaTheme } from '../types';
 
 export const darkThemeVarsTemplate = (theme: GrafanaTheme) => `

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -1,3 +1,5 @@
+/* tslint:disable:max-line-length */
+
 import { GrafanaTheme } from '../types';
 
 export const lightThemeVarsTemplate = (theme: GrafanaTheme) => `

packages/grafana-ui/src/themes/_variables.scss.tmpl.ts

@@ -0,0 +1,217 @@
+/* tslint:disable:max-line-length */
+
+import { GrafanaThemeCommons } from '../types';
+
+export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) => `
+  // Options
+  //
+  // Quickly modify global styling by enabling or disabling optional features.
+
+  $enable-flex: true !default;
+  $enable-hover-media-query: false !default;
+
+  // Spacing
+  //
+  // Control the default styling of most Bootstrap elements by modifying these
+  // variables. Mostly focused on spacing.
+
+  $spacer: 1rem !default;
+  $spacer-x: $spacer !default;
+  $spacer-y: $spacer !default;
+  $spacers: (
+      0: (x: 0, y: 0),
+      1: (x: $spacer-x, y: $spacer-y),
+      2: (x: ($spacer-x * 1.5), y: ($spacer-y * 1.5)),
+      3: (x: ($spacer-x * 3), y: ($spacer-y * 3))
+    )
+    !default;
+  $border-width: 1px !default;
+
+  // Grid breakpoints
+  //
+  // Define the minimum and maximum dimensions at which your layout will change,
+  // adapting to different screen sizes, for use in media queries.
+
+  $grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default;
+
+  // Grid containers
+  //
+  // Define the maximum width of .container for different screen sizes.
+
+  $container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default;
+
+  // Grid columns
+  //
+  // Set the number of columns and specify the width of the gutters.
+
+  $grid-columns: 12 !default;
+  $grid-gutter-width: 30px !default;
+
+  $enable-flex: true;
+
+  // Typography
+  // -------------------------
+
+  $font-family-sans-serif: ${theme.typography.fontFamily.sansSerif};
+  $font-family-serif: ${theme.typography.fontFamily.serif};
+  $font-family-monospace: ${theme.typography.fontFamily.monospace};
+  $font-family-base: $font-family-sans-serif !default;
+
+  $font-size-root: 14px !default;
+  $font-size-base: 13px !default;
+
+  $font-size-lg: 18px !default;
+  $font-size-md: 14px !default;
+  $font-size-sm: 12px !default;
+  $font-size-xs: 10px !default;
+
+  $line-height-base: 1.5 !default;
+  $font-weight-semi-bold: 500;
+
+  $font-size-h1: 2rem !default;
+  $font-size-h2: 1.75rem !default;
+  $font-size-h3: 1.5rem !default;
+  $font-size-h4: 1.3rem !default;
+  $font-size-h5: 1.2rem !default;
+  $font-size-h6: 1rem !default;
+
+  $display1-size: 6rem !default;
+  $display2-size: 5.5rem !default;
+  $display3-size: 4.5rem !default;
+  $display4-size: 3.5rem !default;
+
+  $display1-weight: 400 !default;
+  $display2-weight: 400 !default;
+  $display3-weight: 400 !default;
+  $display4-weight: 400 !default;
+
+  $lead-font-size: 1.25rem !default;
+  $lead-font-weight: 300 !default;
+
+  $headings-margin-bottom: ($spacer / 2) !default;
+  $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  $headings-font-weight: 400 !default;
+  $headings-line-height: 1.1 !default;
+
+  $hr-border-width: $border-width !default;
+  $dt-font-weight: bold !default;
+
+  // Components
+  //
+  // Define common padding and border radius sizes and more.
+
+  $line-height-lg: (4 / 3) !default;
+  $line-height-sm: 1.5 !default;
+
+  $border-radius: 3px !default;
+  $border-radius-lg: 5px !default;
+  $border-radius-sm: 2px!default;
+
+  // Page
+
+  $page-sidebar-width: 11rem;
+  $page-sidebar-margin: 4rem;
+
+  // Links
+  // -------------------------
+  $link-decoration: none !default;
+  $link-hover-decoration: none !default;
+
+  // Tables
+  //
+  // Customizes the table component with basic values, each used across all table variations.
+
+  $table-cell-padding: 4px 10px !default;
+
+  // Forms
+  $input-padding-x: 10px !default;
+  $input-padding-y: 8px !default;
+  $input-line-height: 18px !default;
+
+  $input-btn-border-width: 1px;
+  $input-border-radius: 0 $border-radius $border-radius 0 !default;
+  $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
+
+  $label-border-radius: $border-radius 0 0 $border-radius !default;
+  $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
+
+  $input-padding-y-sm: 4px !default;
+
+  $input-padding-x-lg: 20px !default;
+  $input-padding-y-lg: 10px !default;
+
+  $input-height: 35px !default;
+
+  $gf-form-margin: 0.2rem;
+  $gf-form-input-height: 35px;
+
+  $cursor-disabled: not-allowed !default;
+
+  // Form validation icons
+  $form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E")
+    !default;
+  $form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E")
+    !default;
+  $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E")
+    !default;
+
+  // Z-index master list
+  // -------------------------
+  // Used for a bird's eye view of components dependent on the z-axis
+  // Try to avoid customizing these :)
+  $zindex-dropdown: 1000;
+  $zindex-navbar-fixed: 1020;
+  $zindex-sidemenu: 1025;
+  $zindex-tooltip: 1030;
+  $zindex-modal-backdrop: 1040;
+  $zindex-modal: 1050;
+  $zindex-typeahead: 1060;
+
+  // Buttons
+  //
+
+  $btn-padding-x: 1rem !default;
+  $btn-padding-y: 0.7rem !default;
+  $btn-line-height: 1 !default;
+  $btn-font-weight: 500 !default;
+
+  $btn-padding-x-sm: 0.5rem !default;
+  $btn-padding-y-sm: 0.25rem !default;
+
+  $btn-padding-x-lg: 21px !default;
+  $btn-padding-y-lg: 11px !default;
+
+  $btn-padding-x-xl: 21px !default;
+  $btn-padding-y-xl: 11px !default;
+
+  $btn-border-radius: 2px;
+
+  $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
+
+  // sidemenu
+  $side-menu-width: 60px;
+
+  // dashboard
+  $panel-margin: 10px;
+  $dashboard-padding: $panel-margin * 2;
+  $panel-horizontal-padding: 10;
+  $panel-vertical-padding: 5;
+  $panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px;
+
+  // tabs
+  $tabs-padding: 10px 15px 9px;
+
+  $external-services: (
+      github: (bgColor: #464646, borderColor: #393939, icon: ''),
+      gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''),
+      google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''),
+      grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''),
+      oauth: (bgColor: #262628, borderColor: #393939, icon: '')
+    )
+    !default;
+
+  :export {
+    panelHorizontalPadding: $panel-horizontal-padding;
+    panelVerticalPadding: $panel-vertical-padding;
+  }
+`;

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

@@ -1,12 +1,12 @@
+import { GrafanaThemeCommons } from '../types/theme';
 
-
+const theme: GrafanaThemeCommons = {
-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;"
+      monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace;",
     },
     size: {
       base: '13px',
@@ -31,23 +31,22 @@ const theme = {
     lineHeight: {
       xs: 1,
       s: 1.1,
-      m: 4/3,
+      m: 4 / 3,
-      l: 1.5
+      l: 1.5,
-    }
+    },
   },
   brakpoints: {
     xs: '0',
     s: '544px',
     m: '768px',
     l: '992px',
-    xl: '1200px'
+    xl: '1200px',
   },
   spacing: {
     xs: '0',
     s: '0.2rem',
     m: '1rem',
     l: '1.5rem',
-    xl: '3rem',
     gutter: '30px',
   },
   border: {
@@ -55,8 +54,8 @@ const theme = {
       xs: '2px',
       s: '3px',
       m: '5px',
-    }
+    },
-  }
+  },
 };
 
 export default theme;

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

@@ -3,8 +3,7 @@ export enum GrafanaThemeType {
   Dark = 'dark',
 }
 
-export interface GrafanaTheme {
+export interface GrafanaThemeCommons {
-  type: GrafanaThemeType;
   name: string;
   // TODO: not sure if should be a part of theme
   brakpoints: {
@@ -62,6 +61,10 @@ export interface GrafanaTheme {
       m: string;
     };
   };
+}
+
+export interface GrafanaTheme extends GrafanaThemeCommons {
+  type: GrafanaThemeType;
   background: {
     dropdown: string;
     scrollbar: string;

public/sass/_variables.scss

@@ -31,7 +31,7 @@ $grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default
 
 // Grid containers
 //
-// Define the maximum width of `.container` for different screen sizes.
+// Define the maximum width of .container for different screen sizes.
 
 $container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default;
 
@@ -114,7 +114,7 @@ $link-hover-decoration: none !default;
 
 // Tables
 //
-// Customizes the `.table` component with basic values, each used across all table variations.
+// Customizes the table component with basic values, each used across all table variations.
 
 $table-cell-padding: 4px 10px !default;
 
@@ -206,6 +206,6 @@ $external-services: (
   !default;
 
 :export {
-  panelHorizontalPadding: $panel-horizontal-padding;
+  panelhorizontalpadding: $panel-horizontal-padding;
-  panelVerticalPadding: $panel-vertical-padding;
+  panelverticalpadding: $panel-vertical-padding;
 }

scripts/cli/generateSassVariableFiles.ts

@@ -1,11 +1,14 @@
 import 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';
 
 const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.scss';
 const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.scss';
+const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.scss';
 
 const writeVariablesFile = async (path: string, data: string) => {
   return new Promise((resolve, reject) => {
@@ -24,6 +27,7 @@ const generateSassVariableFiles = async () => {
     await Promise.all([
       writeVariablesFile(darkThemeVariablesPath, darkThemeVarsTemplate(darkTheme)),
       writeVariablesFile(lightThemeVariablesPath, lightThemeVarsTemplate(lightTheme)),
+      writeVariablesFile(defaultThemeVariablesPath, commonThemeVarsTemplate(defaultTheme)),
     ]);
     console.log('\nSASS variable files generated');
   } catch (error) {