From 1c6980ba3f02b00f3482d845cf19b016d203d027 Mon Sep 17 00:00:00 2001
From: Justin Anastos <justin.anastos@gmail.com>
Date: Tue, 30 Jul 2019 11:34:44 -0400
Subject: [PATCH] colors: export a `colors` const instead of a bunch of
 constants

Remembering to use `import * as` is silly; let's stop doing that.
---
 components-util/Color.jsx              |   2 +-
 components-util/Column.tsx             |   2 +-
 src/Button/Button.tsx                  |   4 +-
 src/Modal/Modal.story.tsx              |   2 +-
 src/Modal/Modal.tsx                    |   2 +-
 src/Table/Table.tsx                    |   2 +-
 src/colors/colors.ts                   | 276 +++++++++++++------------
 src/colors/utils/findPaletteByColor.ts |  13 +-
 src/icons/Icons.story.jsx              |   2 +-
 src/typography/Typography.story.tsx    |   2 +-
 stories/Color.stories.js               |   2 +-
 stories/theme.ts                       |   2 +-
 12 files changed, 159 insertions(+), 152 deletions(-)

diff --git a/components-util/Color.jsx b/components-util/Color.jsx
index cf2c32d2..a92469c5 100644
--- a/components-util/Color.jsx
+++ b/components-util/Color.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import classnames from "classnames";
-import * as colors from "../src/colors";
+import { colors } from "../src/colors";
 
 export const Flag = ({ small, light, pass }) => (
   <div
diff --git a/components-util/Column.tsx b/components-util/Column.tsx
index 24766391..f74252c3 100644
--- a/components-util/Column.tsx
+++ b/components-util/Column.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import * as colors from "../src/colors";
+import { colors } from "../src/colors";
 
 export const Column: React.FC<{
   title?: string;
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index 9c6ffee1..2f7165de 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import * as colors from "../colors";
+import { colors, PaletteColor } from "../colors";
 import * as CSS from "csstype";
 import { base } from "../typography";
 import { jsx } from "@emotion/core";
@@ -127,7 +127,7 @@ interface Props
    * This has no meaning with a feel of "secondary", so this component will
    * `throw` if you pass a color for a secondary button.
    */
-  color?: colors.PaletteColor;
+  color?: PaletteColor;
 
   /**
    * Which feel to display
diff --git a/src/Modal/Modal.story.tsx b/src/Modal/Modal.story.tsx
index db5369bb..70ce4ccd 100644
--- a/src/Modal/Modal.story.tsx
+++ b/src/Modal/Modal.story.tsx
@@ -3,7 +3,7 @@ import { jsx } from "@emotion/core";
 import { storiesOf } from "@storybook/react";
 import { Modal } from "../Modal";
 import React, { useState } from "react";
-import * as colors from "../colors";
+import { colors } from "../colors";
 import { Button } from "../Button";
 
 interface Props {
diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
index 9b159044..1f1d4933 100644
--- a/src/Modal/Modal.tsx
+++ b/src/Modal/Modal.tsx
@@ -2,7 +2,7 @@
 import { jsx, css } from "@emotion/core";
 import React, { useEffect } from "react";
 import * as typography from "../typography";
-import * as colors from "../colors";
+import { colors } from "../colors";
 import * as CSS from "csstype";
 
 interface Props {
diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx
index 92bbdb29..38788fbe 100644
--- a/src/Table/Table.tsx
+++ b/src/Table/Table.tsx
@@ -2,7 +2,7 @@
 import { jsx } from "@emotion/core";
 import React from "react";
 import * as typography from "../typography";
-import * as colors from "../colors";
+import { colors } from "../colors";
 
 interface Props<RowShape> {
   /**
diff --git a/src/colors/colors.ts b/src/colors/colors.ts
index 4c3ee2bd..ed4c5a6a 100644
--- a/src/colors/colors.ts
+++ b/src/colors/colors.ts
@@ -11,132 +11,134 @@ export interface ColorPalette extends MonochromePalette {
   lightest: string;
 }
 
-export const pink = {
-  darkest: "#661f4e",
-  darker: "#832363",
-  dark: "#c43997",
-  base: "#f25cc1",
-  light: "#ffa3e0",
-  lighter: "#ffd4f1",
-  lightest: "#ffe6f7",
+export const colors = {
+  pink: {
+    darkest: "#661f4e",
+    darker: "#832363",
+    dark: "#c43997",
+    base: "#f25cc1",
+    light: "#ffa3e0",
+    lighter: "#ffd4f1",
+    lightest: "#ffe6f7",
+  },
+
+  teal: {
+    darkest: "#1f6664",
+    darker: "#1d7b78",
+    dark: "#26a29d",
+    base: "#41d9d3",
+    light: "#8bf6f2",
+    lighter: "#c6fffd",
+    lightest: "#e6fffe",
+  },
+
+  indigo: {
+    darkest: "#2d1f66",
+    darker: "#311c87",
+    dark: "#3f20ba",
+    base: "#7156d9",
+    light: "#ad9bf6",
+    lighter: "#d9cfff",
+    lightest: "#ebe6ff",
+  },
+
+  black: {
+    darker: "#12151A",
+    dark: "#14171C",
+    base: "#191C23",
+    light: "#22262E",
+    lighter: "#2F353F",
+  },
+
+  grey: {
+    darker: "#424855",
+    dark: "#5A6270",
+    base: "#777F8E",
+    light: "#959DAA",
+    lighter: "#B2B9C3",
+  },
+
+  silver: {
+    darker: "#CAD0D8",
+    dark: "#DEE2E7",
+    base: "#EBEEF0",
+    light: "#F4F6F8",
+    lighter: "#FCFDFF",
+  },
+
+  red: {
+    darkest: "#661f1f",
+    darker: "#781c1c",
+    dark: "#9c2323",
+    base: "#d13b3b",
+    light: "#f18686",
+    lighter: "#ffc3c3",
+    lightest: "#ffe6e6",
+  },
+
+  green: {
+    darkest: "#145e33",
+    darker: "#136c38",
+    dark: "#1c8448",
+    base: "#36ad68",
+    light: "#7ed9a4",
+    lighter: "#bef4d5",
+    lightest: "#e6fff0",
+  },
+
+  blue: {
+    darkest: "#163c66",
+    darker: "#0f417a",
+    dark: "#1053a0",
+    base: "#2075d6",
+    light: "#74b0f4",
+    lighter: "#bbdbff",
+    lightest: "#f0f7ff",
+  },
+
+  orange: {
+    darkest: "#663f1f",
+    darker: "#884c1e",
+    dark: "#b46626",
+    base: "#f59140",
+    light: "#ffc18f",
+    lighter: "#ffe2ca",
+    lightest: "#fff1e6",
+  },
+
+  yellow: {
+    darkest: "#66501f",
+    darker: "#84671d",
+    dark: "#b48f25",
+    base: "#f4d03f",
+    light: "#ffe88e",
+    lighter: "#fff4ca",
+    lightest: "#fffae6",
+  },
+
+  purple: {
+    darkest: "#421666",
+    darker: "#521584",
+    dark: "#711eb4",
+    base: "#a23df5",
+    light: "#cd8fff",
+    lighter: "#e8ccff",
+    lightest: "#f4e6ff",
+  },
+
+  blilet: {
+    darkest: "#1B2240",
+    darker: "#252E50",
+    dark: "#3C4A85",
+    base: "#5168C2",
+    light: "#7A92F0",
+    lighter: "#B0BEF7",
+    lightest: "#E6EBFF",
+  },
+
+  white: "#ffffff",
 } as const;
 
-export const teal = {
-  darkest: "#1f6664",
-  darker: "#1d7b78",
-  dark: "#26a29d",
-  base: "#41d9d3",
-  light: "#8bf6f2",
-  lighter: "#c6fffd",
-  lightest: "#e6fffe",
-} as const;
-
-export const indigo = {
-  darkest: "#2d1f66",
-  darker: "#311c87",
-  dark: "#3f20ba",
-  base: "#7156d9",
-  light: "#ad9bf6",
-  lighter: "#d9cfff",
-  lightest: "#ebe6ff",
-} as const;
-
-export const black = {
-  darker: "#12151A",
-  dark: "#14171C",
-  base: "#191C23",
-  light: "#22262E",
-  lighter: "#2F353F",
-} as const;
-
-export const grey = {
-  darker: "#424855",
-  dark: "#5A6270",
-  base: "#777F8E",
-  light: "#959DAA",
-  lighter: "#B2B9C3",
-} as const;
-
-export const silver = {
-  darker: "#CAD0D8",
-  dark: "#DEE2E7",
-  base: "#EBEEF0",
-  light: "#F4F6F8",
-  lighter: "#FCFDFF",
-} as const;
-
-export const red = {
-  darkest: "#661f1f",
-  darker: "#781c1c",
-  dark: "#9c2323",
-  base: "#d13b3b",
-  light: "#f18686",
-  lighter: "#ffc3c3",
-  lightest: "#ffe6e6",
-} as const;
-
-export const green = {
-  darkest: "#145e33",
-  darker: "#136c38",
-  dark: "#1c8448",
-  base: "#36ad68",
-  light: "#7ed9a4",
-  lighter: "#bef4d5",
-  lightest: "#e6fff0",
-} as const;
-
-export const blue = {
-  darkest: "#163c66",
-  darker: "#0f417a",
-  dark: "#1053a0",
-  base: "#2075d6",
-  light: "#74b0f4",
-  lighter: "#bbdbff",
-  lightest: "#f0f7ff",
-} as const;
-
-export const orange = {
-  darkest: "#663f1f",
-  darker: "#884c1e",
-  dark: "#b46626",
-  base: "#f59140",
-  light: "#ffc18f",
-  lighter: "#ffe2ca",
-  lightest: "#fff1e6",
-} as const;
-
-export const yellow = {
-  darkest: "#66501f",
-  darker: "#84671d",
-  dark: "#b48f25",
-  base: "#f4d03f",
-  light: "#ffe88e",
-  lighter: "#fff4ca",
-  lightest: "#fffae6",
-} as const;
-
-export const purple = {
-  darkest: "#421666",
-  darker: "#521584",
-  dark: "#711eb4",
-  base: "#a23df5",
-  light: "#cd8fff",
-  lighter: "#e8ccff",
-  lightest: "#f4e6ff",
-} as const;
-
-export const blilet = {
-  darkest: "#1B2240",
-  darker: "#252E50",
-  dark: "#3C4A85",
-  base: "#5168C2",
-  light: "#7A92F0",
-  lighter: "#B0BEF7",
-  lightest: "#E6EBFF",
-} as const;
-
-export const white = "#ffffff";
-
 /**
  * An enumeration of all colors in all palettes.
  *
@@ -144,16 +146,16 @@ export const white = "#ffffff";
  * palettes.
  */
 export type PaletteColor =
-  | typeof pink[keyof typeof pink]
-  | typeof teal[keyof typeof teal]
-  | typeof indigo[keyof typeof indigo]
-  | typeof black[keyof typeof black]
-  | typeof grey[keyof typeof grey]
-  | typeof silver[keyof typeof silver]
-  | typeof red[keyof typeof red]
-  | typeof green[keyof typeof green]
-  | typeof blue[keyof typeof blue]
-  | typeof orange[keyof typeof orange]
-  | typeof yellow[keyof typeof yellow]
-  | typeof purple[keyof typeof purple]
-  | typeof blilet[keyof typeof blilet];
+  | typeof colors["pink"][keyof typeof colors["pink"]]
+  | typeof colors["teal"][keyof typeof colors["teal"]]
+  | typeof colors["indigo"][keyof typeof colors["indigo"]]
+  | typeof colors["black"][keyof typeof colors["black"]]
+  | typeof colors["grey"][keyof typeof colors["grey"]]
+  | typeof colors["silver"][keyof typeof colors["silver"]]
+  | typeof colors["red"][keyof typeof colors["red"]]
+  | typeof colors["green"][keyof typeof colors["green"]]
+  | typeof colors["blue"][keyof typeof colors["blue"]]
+  | typeof colors["orange"][keyof typeof colors["orange"]]
+  | typeof colors["yellow"][keyof typeof colors["yellow"]]
+  | typeof colors["purple"][keyof typeof colors["purple"]]
+  | typeof colors["blilet"][keyof typeof colors["blilet"]];
diff --git a/src/colors/utils/findPaletteByColor.ts b/src/colors/utils/findPaletteByColor.ts
index a5bd493d..cd011dcc 100644
--- a/src/colors/utils/findPaletteByColor.ts
+++ b/src/colors/utils/findPaletteByColor.ts
@@ -1,8 +1,13 @@
-import * as colors from "../index";
+import {
+  colors,
+  ColorPalette,
+  MonochromePalette,
+  PaletteColor,
+} from "../index";
 
 export function findPaletteByColor(
-  searchColor: colors.PaletteColor
-): colors.MonochromePalette | colors.ColorPalette {
+  searchColor: PaletteColor
+): MonochromePalette | ColorPalette {
   const result = Object.values(colors)
     .filter(color => typeof color !== "string")
     .find(
@@ -23,5 +28,5 @@ export function findPaletteByColor(
   // We know that the interface conforms to one of these, but we can't infer
   // this because we defined all the palettes `as const` so we can restrict
   // input to only values in those palettes.
-  return result as (colors.MonochromePalette | colors.ColorPalette);
+  return result as (MonochromePalette | ColorPalette);
 }
diff --git a/src/icons/Icons.story.jsx b/src/icons/Icons.story.jsx
index 2843ad16..e919a252 100644
--- a/src/icons/Icons.story.jsx
+++ b/src/icons/Icons.story.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import { withKnobs, select } from "@storybook/addon-knobs/react";
-import * as colors from "../colors";
+import { colors } from "../colors";
 import camelcase from "camelcase";
 import { Page } from "../../components-util/Page";
 import { Column } from "../../components-util/Column";
diff --git a/src/typography/Typography.story.tsx b/src/typography/Typography.story.tsx
index 8b396e32..60889fe4 100644
--- a/src/typography/Typography.story.tsx
+++ b/src/typography/Typography.story.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import * as typographyDefinitions from "./index";
-import * as colors from "../colors";
+import { colors } from "../colors";
 import { Page } from "../../components-util/Page";
 import { Column } from "../../components-util/Column";
 
diff --git a/stories/Color.stories.js b/stories/Color.stories.js
index 11e9c8e3..9e714738 100644
--- a/stories/Color.stories.js
+++ b/stories/Color.stories.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-import * as colors from "../src/colors";
+import { colors } from "../src/colors";
 import { Page } from "../components-util/Page";
 import { Column } from "../components-util/Column";
 import { Patch } from "../components-util/Color";
diff --git a/stories/theme.ts b/stories/theme.ts
index 2aff703c..c2161d98 100644
--- a/stories/theme.ts
+++ b/stories/theme.ts
@@ -1,5 +1,5 @@
 import { create } from "@storybook/theming";
-import * as colors from "../src/colors";
+import { colors } from "../src/colors";
 import * as fonts from "../src/fonts";
 
 export default create({