Use colors from ui-components theme.

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/

client/app/styles/_colors.scss

@@ -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;

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;

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,
+};

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'),

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'),