WIP Enable js defined theme to be used in SASS

scripts/webpack/getThemeVariable.js

@@ -0,0 +1,53 @@
+const sass = require('node-sass');
+const sassUtils = require('node-sass-utils')(sass);
+const { getTheme } = require('../../packages/grafana-ui/src/theme');
+const { get } = require('lodash');
+const tinycolor = require('tinycolor2');
+
+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} is not defined fo ${themeName}`);
+  }
+
+  if (isHex(variable)) {
+    const rgb = new tinycolor(variable).toRgb();
+    const color = sass.types.Color(rgb.r, rgb.g, rgb.b);
+    return color;
+  }
+
+  if (isDimension(variable)) {
+    const [value, unit] = matchDimension(variable)
+
+    const tmp = new sassUtils.SassDimension(parseInt(value,10), unit);
+    // debugger
+    return sassUtils.castToSass(tmp)
+  }
+
+  return sassUtils.castToSass(variable);
+}
+
+module.exports = getThemeVariable;