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

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

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;

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

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 {

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 {

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> {
  /**

src/colors/colors.ts

@@ -11,149 +11,151 @@ 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.
  *
  * This can be used to restrict a prop to only be a color value from one of our
  * 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"]];

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);
 }

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

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

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