From 8cc4399815dd432c7b9fe98413f63d81f22b3d37 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Mon, 15 Jun 2020 15:40:31 -0700
Subject: [PATCH] feat: import theme colors (#601)

---
 .../superset-ui-style/ThemeStories.jsx        | 30 +++++++++++
 .../packages/superset-ui-style/src/index.ts   | 52 +++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-style/ThemeStories.jsx

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-style/ThemeStories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-style/ThemeStories.jsx
new file mode 100644
index 0000000000..ca02df4d8f
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-style/ThemeStories.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { supersetTheme } from '@superset-ui/style/src/';
+
+export default {
+  title: 'Core Packages|@superset-ui/style',
+};
+
+export const ThemeColors = () => {
+  const colors = supersetTheme.colors;
+  return Object.keys(colors).map(collection => (
+    <div>
+      <h2>{collection}</h2>
+      <table style={{ width: '300px' }}>
+        {Object.keys(colors[collection]).map(k => {
+          const hex = colors[collection][k];
+          return (
+            <tr>
+              <td>{k}</td>
+              <td>
+                <code>{hex}</code>
+              </td>
+              <td style={{ width: '150px', backgroundColor: hex }}></td>
+            </tr>
+          );
+        })}
+      </table>
+    </div>
+  ));
+};
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/src/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/src/index.ts
index d076a47607..400dc5ccec 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/src/index.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/src/index.ts
@@ -25,6 +25,13 @@ const defaultTheme = {
   colors: {
     primary: {
       base: '#20A7C9',
+      dark1: '#1A85A0',
+      dark2: '#156378',
+      light1: '#79CADE',
+      light2: '#A5DAE9',
+      light3: '#D2EDF4',
+      light4: '#E9F6F9',
+      light5: '#F3F8FA',
     },
     secondary: {
       base: '#444E7C',
@@ -37,6 +44,51 @@ const defaultTheme = {
       light4: '#ECEEF2',
       light5: '#F5F5F8',
     },
+    grayscale: {
+      base: '#666666',
+      dark1: '#323232',
+      dark2: '#000000',
+      light1: '#B2B2B2',
+      light2: '#E0E0E0',
+      light3: '#F0F0F0',
+      light4: '#F7F7F7',
+      light5: '#FFFFFF',
+    },
+    error: {
+      base: '#E04355',
+      dark1: '#A7323F',
+      dark2: '#6F212A',
+      light1: '#EFA1AA',
+      light2: '#FAEDEE',
+    },
+    warning: {
+      base: '#FF7F44',
+      dark1: '#BF5E33',
+      dark2: '#7F3F21',
+      light1: '#FEC0A1',
+      light2: '#FFF2EC',
+    },
+    alert: {
+      base: '#FCC700',
+      dark1: '#BC9501',
+      dark2: '#7D6300',
+      light1: '#FDE380',
+      light2: '#FEF9E6',
+    },
+    success: {
+      base: '#5AC189',
+      dark1: '#439066',
+      dark2: '#2B6144',
+      light1: '#ACE1C4',
+      light2: '#EEF8F3',
+    },
+    info: {
+      base: '#66BCFE',
+      dark1: '#4D8CBE',
+      dark2: '#315E7E',
+      light1: '#B3DEFE',
+      light2: '#EFF8FE',
+    },
   },
   typography: {
     families: {