From 631077b68a70679d3c295e317dd9f64fd9d2ff60 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Wed, 21 Mar 2018 15:49:52 +0100
Subject: [PATCH] Use colors from ui-components theme.

---
 client/Dockerfile                   |  2 +-
 client/app/styles/_colors.scss      | 31 -----------------------------
 client/app/styles/_variables.scss   |  2 --
 client/webpack-common.js            | 25 +++++++++++++++++++++++
 client/webpack.local.config.js      |  4 ++++
 client/webpack.production.config.js |  3 +++
 6 files changed, 33 insertions(+), 34 deletions(-)
 delete mode 100644 client/app/styles/_colors.scss
 create mode 100644 client/webpack-common.js

diff --git a/client/Dockerfile b/client/Dockerfile
index ef2e17ea1..c6c05fa72 100644
--- a/client/Dockerfile
+++ b/client/Dockerfile
@@ -3,4 +3,4 @@ WORKDIR /home/weave
 COPY package.json yarn.lock /home/weave/
 ENV NPM_CONFIG_LOGLEVEL=warn NPM_CONFIG_PROGRESS=false
 RUN yarn --pure-lockfile
-COPY webpack.local.config.js webpack.production.config.js server.js .babelrc .eslintrc .eslintignore .sass-lint.yml /home/weave/
+COPY webpack-common.js webpack.local.config.js webpack.production.config.js server.js .babelrc .eslintrc .eslintignore .sass-lint.yml /home/weave/
diff --git a/client/app/styles/_colors.scss b/client/app/styles/_colors.scss
deleted file mode 100644
index 377311694..000000000
--- a/client/app/styles/_colors.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/* Theme colors */
-$color-white: #fff;
-$color-black: #000;
-$color-lightgray: #f8f8f8;
-$color-kimberly-dark: #656597;
-$color-weaveblue: #00d2ff;
-$color-primary-charcoal: #32324b;
-$color-japanese-laurel: #008000;
-$color-silver: #ccc;
-$color-lavender: #8383ac;
-$color-gray: #aaa;
-$color-gallery: #eee;
-$color-athens-gray: #eeeef4;
-$color-alabaster: #fcfcfc;
-$color-dim-gray: #666;
-$color-mercury: #e8e8e8;
-$color-mischka: #dfdfea;
-$color-comet: #5b5b88;
-$color-gunpowder: #3c3c5a;
-$color-blue-haze: #c0c0d5;
-$color-neutral-black: #1a1a1a;
-$color-tundora: #444;
-$color-cerulean: #00a8cc;
-/* New theme colors */
-$color-athens-gray-dark: #e9e9f1;
-$color-red-berry: #8b0000;
-$color-olivine: #a0be7e;
-$color-link-water: #d7ecf5;
-$color-dusty-gray: #969696;
-$color-solid-gray: #808080;
-$color-anakiwa: #99edff;
diff --git a/client/app/styles/_variables.scss b/client/app/styles/_variables.scss
index bdfccf5f0..af2a47b20 100644
--- a/client/app/styles/_variables.scss
+++ b/client/app/styles/_variables.scss
@@ -1,5 +1,3 @@
-@import "colors";
-
 $fa-font-path: "~font-awesome/fonts";
 $base-font: "Roboto", sans-serif;
 $mono-font: "Menlo", "DejaVu Sans Mono", "Liberation Mono", monospace;
diff --git a/client/webpack-common.js b/client/webpack-common.js
new file mode 100644
index 000000000..72cf9f02b
--- /dev/null
+++ b/client/webpack-common.js
@@ -0,0 +1,25 @@
+const { isString, kebabCase, forEach } = require('lodash');
+const theme = require('weaveworks-ui-components/lib/theme').default;
+
+// Flattens and collects all theme colors, names them
+// as Scss vars and returns them as query string
+// TODO: Move this helper to ui-components repo as
+// it's currently used both here and in service-ui.
+function themeColorsAsScss() {
+  const colors = [];
+  forEach(theme.colors, (value, name) => {
+    const colorPrefix = `$color-${kebabCase(name)}`;
+    if (isString(value)) {
+      colors.push(`${colorPrefix}: ${value}`);
+    } else {
+      forEach(value, (innerValue, subname) => {
+        colors.push(`${colorPrefix}-${kebabCase(subname)}: ${innerValue}`);
+      });
+    }
+  });
+  return `${colors.join('; ')};`;
+}
+
+module.exports = {
+  themeColorsAsScss,
+};
diff --git a/client/webpack.local.config.js b/client/webpack.local.config.js
index 52d206601..67f00d1a9 100644
--- a/client/webpack.local.config.js
+++ b/client/webpack.local.config.js
@@ -5,6 +5,9 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const SassLintPlugin = require('sasslint-webpack-plugin');
 const ContrastStyleCompiler = require('./app/scripts/contrast-compiler');
+
+const { themeColorsAsScss } = require('./webpack-common');
+
 /**
  * This is the Webpack configuration file for local development.
  * It contains local-specific configuration which includes:
@@ -129,6 +132,7 @@ module.exports = {
           }, {
             loader: 'sass-loader',
             options: {
+              data: themeColorsAsScss(),
               includePaths: [
                 path.resolve(__dirname, './node_modules/xterm'),
                 path.resolve(__dirname, './node_modules/font-awesome'),
diff --git a/client/webpack.production.config.js b/client/webpack.production.config.js
index df489f73e..f04a20e8d 100644
--- a/client/webpack.production.config.js
+++ b/client/webpack.production.config.js
@@ -7,6 +7,8 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ContrastStyleCompiler = require('./app/scripts/contrast-compiler');
 
+const { themeColorsAsScss } = require('./webpack-common');
+
 const GLOBALS = {
   'process.env': {NODE_ENV: '"production"'}
 };
@@ -133,6 +135,7 @@ module.exports = {
             loader: 'sass-loader',
             options: {
               minimize: true,
+              data: themeColorsAsScss(),
               includePaths: [
                 path.resolve(__dirname, './node_modules/xterm'),
                 path.resolve(__dirname, './node_modules/font-awesome'),