Do not use js theme variables in sass (poor dev experience for now)

package.json

@@ -76,7 +76,6 @@
     "ng-annotate-webpack-plugin": "^0.3.0",
     "ngtemplate-loader": "^2.0.1",
     "node-sass": "^4.11.0",
-    "node-sass-utils": "^1.1.2",
     "npm": "^5.4.2",
     "optimize-css-assets-webpack-plugin": "^4.0.2",
     "phantomjs-prebuilt": "^2.1.15",

packages/grafana-ui/.storybook/webpack.config.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const getThemeVariable = require('../../../scripts/webpack/getThemeVariable');
 
 module.exports = (baseConfig, env, config) => {
   config.module.rules.push({
@@ -36,10 +35,7 @@ module.exports = (baseConfig, env, config) => {
       {
         loader: 'sass-loader',
         options: {
-          sourceMap: false,
-          functions: {
-            'getThemeVariable($themeVar, $themeName: dark)': getThemeVariable,
-          },
+          sourceMap: false
         },
       },
     ],

public/sass/_variables.dark.scss

@@ -3,69 +3,67 @@
 
 $theme-name: dark;
 
+// Grays
 // -------------------------
-$black: getThemeVariable('colors.black', $theme-name);
-$dark-1: getThemeVariable('colors.dark1', $theme-name);
-$dark-2: getThemeVariable('colors.dark2', $theme-name);
-$dark-3: getThemeVariable('colors.dark3', $theme-name);
-$dark-4: getThemeVariable('colors.dark4', $theme-name);
-$dark-5: getThemeVariable('colors.dark5', $theme-name);
-$gray-1: getThemeVariable('colors.gray1', $theme-name);
-$gray-2: getThemeVariable('colors.gray2', $theme-name);
-$gray-3: getThemeVariable('colors.gray3', $theme-name);
-$gray-4: getThemeVariable('colors.gray4', $theme-name);
-$gray-5: getThemeVariable('colors.gray5', $theme-name);
-$gray-6: getThemeVariable('colors.gray6', $theme-name);
-$gray-7: getThemeVariable('colors.gray7', $theme-name);
-
-$gray-blue: getThemeVariable('colors.grayBlue', $theme-name);
-$input-black: getThemeVariable('colors.inputBlack', $theme-name);
-
-$white: getThemeVariable('colors.white', $theme-name);
+$black: #000;
+$dark-1: #141414;
+$dark-2: #1f1f20;
+$dark-3: #262628;
+$dark-4: #333333;
+$dark-5: #444444;
+$gray-1: #555555;
+$gray-2: #8e8e8e;
+$gray-3: #b3b3b3;
+$gray-4: #d8d9da;
+$gray-5: #ececec;
+$gray-7: #fbfbfb;
+
+$gray-blue: #212327;
+$input-black: #09090b;
+
+$white: #fff;
 
 // Accent colors
 // -------------------------
-$blue: getThemeVariable('colors.blue', $theme-name);
-$blue-dark: getThemeVariable('colors.blueDark', $theme-name);
-$green: getThemeVariable('colors.green', $theme-name);
-$red: getThemeVariable('colors.red', $theme-name);
-$yellow: getThemeVariable('colors.yellow', $theme-name);
-$pink: getThemeVariable('colors.pink', $theme-name);
-$purple: getThemeVariable('colors.purple', $theme-name);
-$variable: getThemeVariable('colors.variable', $theme-name);
-$orange: getThemeVariable('colors.orange', $theme-name);
+$blue: #33b5e5;
+$blue-dark: #005f81;
+$green: #299c46;
+$red: #d44a3a;
+$yellow: #ecbb13;
+$purple: #9933cc;
+$variable: #32d1df;
+$orange: #eb7b18;
 
 $brand-primary: $orange;
 $brand-success: $green;
 $brand-warning: $brand-primary;
 $brand-danger: $red;
 
-$query-red: getThemeVariable('colors.queryRed', $theme-name);
-$query-green: getThemeVariable('colors.queryGreen', $theme-name);
-$query-purple: getThemeVariable('colors.queryPurple', $theme-name);
-$query-keyword: getThemeVariable('colors.queryKeyword', $theme-name);
-$query-orange: getThemeVariable('colors.queryOrange', $theme-name);
+$query-red: #e24d42;
+$query-green: #74e680;
+$query-purple: #fe85fc;
+$query-keyword: #66d9ef;
+$query-orange: $orange;
 
 // Status colors
 // -------------------------
-$online: getThemeVariable('colors.online', $theme-name);
-$warn: getThemeVariable('colors.warn', $theme-name);
-$critical: getThemeVariable('colors.critical', $theme-name);
+$online: #10a345;
+$warn: #f79520;
+$critical: #ed2e18;
 
 // Scaffolding
 // -------------------------
-$body-bg: getThemeVariable('colors.bodyBg', $theme-name);
-$page-bg: getThemeVariable('colors.pageBg', $theme-name);
-
-$body-color: getThemeVariable('colors.bodyColor', $theme-name);
-$text-color: getThemeVariable('colors.textColor', $theme-name);
-$text-color-strong: getThemeVariable('colors.textColorStrong', $theme-name);
-$text-color-weak: getThemeVariable('colors.textColorWeak', $theme-name);
-$text-color-faint: getThemeVariable('colors.textColorFaint', $theme-name);
-$text-color-emphasis: getThemeVariable('colors.textColorEmphasis', $theme-name);
-
-$text-shadow-strong: 1px 1px 4px getThemeVariable('colors.black', $theme-name);
-$text-shadow-faint: 1px 1px 4px #2d2d2d;
+$body-bg: rgb(23, 24, 25);
+$page-bg: rgb(22, 23, 25);
+
+$body-color: $gray-4;
+$text-color: $gray-4;
+$text-color-strong: $white;
+$text-color-weak: $gray-2;
+$text-color-faint: $dark-5;
+$text-color-emphasis: $gray-5;
+
+$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 $textShadow: none;
 
 // gradients
@@ -81,11 +79,10 @@ $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909);
 
 // Links
 // -------------------------
-$link-color: getThemeVariable('colors.linkColor', $theme-name);
-$link-color-disabled: getThemeVariable('colors.linkColorDisabled', $theme-name);
-$link-hover-color: getThemeVariable('colors.linkColorHover', $theme-name);
-
-$external-link-color: getThemeVariable('colors.linkColorExternal', $theme-name);
+$link-color: darken($white, 11%);
+$link-color-disabled: darken($link-color, 30%);
+$link-hover-color: $white;
+$external-link-color: $blue;
 
 // Typography
 // -------------------------
@@ -132,7 +129,7 @@ $list-item-shadow: $card-shadow;
 $empty-list-cta-bg: $gray-blue;
 
 // Scrollbars
-$scrollbarBackground: #aeb5df;
+$scrollbarBackground: #404357;
 $scrollbarBackground2: #3a3a3a;
 $scrollbarBorder: black;
 

public/sass/_variables.light.scss

@@ -6,66 +6,59 @@ $theme-name: light;
 // Grays
 // -------------------------
 $black: #000;
-
-// -------------------------
-$black: getThemeVariable('colors.black', $theme-name);
-$dark-1: getThemeVariable('colors.dark1', $theme-name);
-$dark-2: getThemeVariable('colors.dark2', $theme-name);
-$dark-3: getThemeVariable('colors.dark3', $theme-name);
-$dark-4: getThemeVariable('colors.dark4', $theme-name);
-$dark-5: getThemeVariable('colors.dark5', $theme-name);
-$gray-1: getThemeVariable('colors.gray1', $theme-name);
-$gray-2: getThemeVariable('colors.gray2', $theme-name);
-$gray-3: getThemeVariable('colors.gray3', $theme-name);
-$gray-4: getThemeVariable('colors.gray4', $theme-name);
-$gray-5: getThemeVariable('colors.gray5', $theme-name);
-$gray-6: getThemeVariable('colors.gray6', $theme-name);
-$gray-7: getThemeVariable('colors.gray7', $theme-name);
-
-$white: getThemeVariable('colors.white', $theme-name);
+$dark-2: #1e2028;
+$dark-3: #303133;
+$dark-4: #35373f;
+$dark-5: #41444b;
+$gray-1: #52545c;
+$gray-2: #767980;
+$gray-3: #acb6bf;
+$gray-4: #c7d0d9;
+$gray-5: #dde4ed;
+$gray-6: #e9edf2;
+$gray-7: #f7f8fa;
+
+$white: #fff;
 
 // Accent colors
 // -------------------------
-$blue: getThemeVariable('colors.blue', $theme-name);
-$blue-dark: getThemeVariable('colors.blueDark', $theme-name);
-$blue-light: getThemeVariable('colors.blueLight', $theme-name);
-$green: getThemeVariable('colors.green', $theme-name);
-$red: getThemeVariable('colors.red', $theme-name);
-$yellow: getThemeVariable('colors.yellow', $theme-name);
-$orange: getThemeVariable('colors.orange', $theme-name);
-$pink: getThemeVariable('colors.pink', $theme-name);
-$purple: getThemeVariable('colors.purple', $theme-name);
-$variable: getThemeVariable('colors.variable', $theme-name);
+$blue: #0083b3;
+$blue-light: #00a8e6;
+$green: #3aa655;
+$red: #d44939;
+$yellow: #ff851b;
+$orange: #ff7941;
+$purple: #9954bb;
+$variable: $blue;
 
 $brand-primary: $orange;
 $brand-success: $green;
 $brand-warning: $orange;
 $brand-danger: $red;
 
-$query-red: getThemeVariable('colors.queryRed', $theme-name);
-$query-green: getThemeVariable('colors.queryGreen', $theme-name);
-$query-purple: getThemeVariable('colors.queryPurple', $theme-name);
-$query-keyword: getThemeVariable('colors.queryKeyword', $theme-name);
-$query-orange: getThemeVariable('colors.queryOrange', $theme-name);
+$query-red: $red;
+$query-green: $green;
+$query-purple: $purple;
+$query-orange: $orange;
+$query-keyword: $blue;
 
 // Status colors
 // -------------------------
-$online: getThemeVariable('colors.online', $theme-name);
-$warn: getThemeVariable('colors.warn', $theme-name);
-$critical: getThemeVariable('colors.critical', $theme-name);
+$online: #01a64f;
+$warn: #f79520;
+$critical: #ec2128;
 
 // Scaffolding
 // -------------------------
+$body-bg: $gray-7;
+$page-bg: $gray-7;
 
-$body-bg: getThemeVariable('colors.bodyBg', $theme-name);
-$page-bg: getThemeVariable('colors.pageBg', $theme-name);
-
-$body-color: getThemeVariable('colors.bodyColor', $theme-name);
-$text-color: getThemeVariable('colors.textColor', $theme-name);
-$text-color-strong: getThemeVariable('colors.textColorStrong', $theme-name);
-$text-color-weak: getThemeVariable('colors.textColorWeak', $theme-name);
-$text-color-faint: getThemeVariable('colors.textColorFaint', $theme-name);
-$text-color-emphasis: getThemeVariable('colors.textColorEmphasis', $theme-name);
+$body-color: $gray-1;
+$text-color: $gray-1;
+$text-color-strong: $dark-2;
+$text-color-weak: $gray-2;
+$text-color-faint: $gray-4;
+$text-color-emphasis: $dark-5;
 
 $text-shadow-faint: none;
 $textShadow: none;
@@ -83,15 +76,14 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
 
 // Links
 // -------------------------
-$link-color: getThemeVariable('colors.linkColor', $theme-name);
-$link-color-disabled: getThemeVariable('colors.linkColorDisabled', $theme-name);
-$link-hover-color: getThemeVariable('colors.linkColorHover', $theme-name);
-
-$external-link-color: getThemeVariable('colors.linkColorExternal', $theme-name);
+$link-color: $gray-1;
+$link-color-disabled: lighten($link-color, 30%);
+$link-hover-color: darken($link-color, 20%);
+$external-link-color: $blue-light;
 
 // Typography
 // -------------------------
-$headings-color: getThemeVariable('colors.headingColor', $theme-name);
+$headings-color: $text-color;
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 

public/sass/_variables.scss

@@ -47,45 +47,45 @@ $enable-flex: true;
 // Typography
 // -------------------------
 
-$font-family-sans-serif: getThemeVariable('typography.fontFamily.sansSerif');
-$font-family-serif: getThemeVariable('typography.fontFamily.serif');
-$font-family-monospace: getThemeVariable('typography.fontFamily.monospace');
+$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
+$font-family-serif: Georgia, 'Times New Roman', Times, serif;
+$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
 $font-family-base: $font-family-sans-serif !default;
 
-$font-size-root: getThemeVariable('typography.size.m') !default;
-$font-size-base: getThemeVariable('typography.size.base') !default;
+$font-size-root: 14px !default;
+$font-size-base: 13px !default;
 
-$font-size-lg: getThemeVariable('typography.size.l') !default;
-$font-size-md: getThemeVariable('typography.size.m') !default;
-$font-size-sm: getThemeVariable('typography.size.s') !default;
-$font-size-xs: getThemeVariable('typography.size.xs') !default;
+$font-size-lg: 18px !default;
+$font-size-md: 14px !default;
+$font-size-sm: 12px !default;
+$font-size-xs: 10px !default;
 
-$line-height-base: getThemeVariable('typography.lineHeight.l')  !default;
-$font-weight-semi-bold: getThemeVariable('typography.weight.semibold');
+$line-height-base: 1.5 !default;
+$font-weight-semi-bold: 500;
 
-$font-size-h1: getThemeVariable('typography.heading.h1') !default;
-$font-size-h2: getThemeVariable('typography.heading.h2') !default;
-$font-size-h3: getThemeVariable('typography.heading.h3') !default;
-$font-size-h4: getThemeVariable('typography.heading.h4') !default;
-$font-size-h5: getThemeVariable('typography.heading.h5') !default;
-$font-size-h6: getThemeVariable('typography.heading.h6') !default;
+$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: getThemeVariable('typography.weight.normal') !default;
-$display2-weight: getThemeVariable('typography.weight.normal') !default;
-$display3-weight: getThemeVariable('typography.weight.normal') !default;
-$display4-weight: getThe1meVariable('typography.weight.normal') !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: getThemeVariable('typography.weight.normal') !default;
+$headings-font-weight: 400 !default;
 $headings-line-height: 1.1 !default;
 
 $hr-border-width: $border-width !default;

scripts/webpack/getThemeVariable.js

@@ -1,50 +0,0 @@
-const sass = require('node-sass');
-const sassUtils = require('node-sass-utils')(sass);
-const { get } = require('lodash');
-const tinycolor = require('tinycolor2');
-const { getTheme } = require('@grafana/ui/src/themes');
-
-const units = ['rem', 'em', 'vh', 'vw', 'vmin', 'vmax', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch'];
-const matchDimension = value => value.match(/[a-zA-Z]+|[0-9]+/g);
-
-const isHex = value => {
-  const hexRegex = /^((0x){0,1}|#{0,1})([0-9A-F]{8}|[0-9A-F]{6})$/gi;
-  return hexRegex.test(value);
-};
-
-const isDimension = value => {
-  if (typeof value !== 'string') {
-    return false;
-  }
-  const [val, unit] = matchDimension(value);
-  return units.indexOf(unit) > -1;
-};
-
-/**
- * @param {SassString} variablePath
- * @param {"dark"|"light"} themeName
- */
-function getThemeVariable(variablePath, themeName) {
-  const theme = getTheme(themeName.getValue());
-  const variable = get(theme, variablePath.getValue());
-
-  if (!variable) {
-    throw new Error(`${variablePath.getValue()} is not defined for ${themeName.getValue()}`);
-  }
-
-  if (isHex(variable)) {
-    const rgb = new tinycolor(variable).toRgb();
-    const color = new sass.types.Color(rgb.r, rgb.g, rgb.b);
-    return color;
-  }
-
-  if (isDimension(variable)) {
-    const [value, unit] = matchDimension(variable);
-    const dimension = new sassUtils.SassDimension(parseInt(value, 10), unit);
-    return sassUtils.castToSass(dimension);
-  }
-
-  return sassUtils.castToSass(variable);
-}
-
-module.exports = getThemeVariable;

scripts/webpack/getThemeVariable.test.js

@@ -1,40 +0,0 @@
-const sass = require('node-sass');
-const getThemeVariable = require('./getThemeVariable');
-const { mockTheme } = require('@grafana/ui');
-
-const themeMock = {
-  color: {
-    background: '#ff0000',
-  },
-  spacing: {
-    padding: '2em',
-  },
-  typography: {
-    fontFamily: 'Arial, sans-serif',
-  },
-};
-
-describe('Variables retrieval', () => {
-  const restoreTheme = mockTheme(() => themeMock);
-
-  afterAll(() => {
-    restoreTheme();
-  });
-
-  it('returns sass Color for color values', () => {
-    const result = getThemeVariable({ getValue: () => 'color.background' }, { getValue: () => {} });
-    expect(result).toBeInstanceOf(sass.types.Color);
-  });
-  it('returns sass Number for dimension values', () => {
-    const result = getThemeVariable({ getValue: () => 'spacing.padding' }, { getValue: () => {} });
-    expect(result).toBeInstanceOf(sass.types.Number);
-  });
-  it('returns sass String for string values', () => {
-    const result = getThemeVariable({ getValue: () => 'typography.fontFamily' }, { getValue: () => {} });
-    expect(result).toBeInstanceOf(sass.types.String);
-  });
-
-  it('throws for unknown theme paths', () => {
-    expect(() => getThemeVariable({ getValue: () => 'what.ever' }, { getValue: () => {} })).toThrow();
-  });
-});

scripts/webpack/sass.rule.js

@@ -1,7 +1,6 @@
 'use strict';
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const getThemeVariable = require('./getThemeVariable');
 
 module.exports = function(options) {
   return {
@@ -27,10 +26,7 @@ module.exports = function(options) {
       {
         loader: 'sass-loader',
         options: {
-          sourceMap: options.sourceMap,
-          functions: {
-            'getThemeVariable($themeVar, $themeName: dark)': getThemeVariable,
-          },
+          sourceMap: options.sourceMap
         },
       },
     ],

scripts/webpack/webpack.hot.js

@@ -8,7 +8,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const IgnoreNotFoundExportPlugin = require("./IgnoreNotFoundExportPlugin.js");
-const getThemeVariable = require("./getThemeVariable");
 
 module.exports = merge(common, {
   entry: {
@@ -87,12 +86,7 @@ module.exports = merge(common, {
             },
           },
           {
-            loader: 'sass-loader',
-            options: {
-              functions: {
-                "getThemeVariable($themeVar, $themeName: dark)": getThemeVariable
-              }
-            }
+            loader: 'sass-loader'
           }
         ],
       },

yarn.lock

@@ -11910,11 +11910,6 @@ node-releases@^1.0.0-alpha.11, node-releases@^1.1.3:
   dependencies:
     semver "^5.3.0"
 
-node-sass-utils@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/node-sass-utils/-/node-sass-utils-1.1.2.tgz#d03639cfa4fc962398ba3648ab466f0db7cc2131"
-  integrity sha1-0DY5z6T8liOYujZIq0ZvDbfMITE=
-
 node-sass@^4.11.0:
   version "4.11.0"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.11.0.tgz#183faec398e9cbe93ba43362e2768ca988a6369a"