feat(cdr): Initial UI scaffolding

This is testing out [Approach 3](https://www.notion.so/coderhq/Workspaces-v2-Initial-UI-Scaffolding-3b07d2847eed48839a7e6f0f2bb9bf56#56256f25d2954897a8ee315f0820cedd) in the UI scaffolding RFC.

Fixes https://github.com/coder/coder/issues/11

The folder structure looks like:
- `site`
    - `components` (buttons, empty state, etc)
    - `pages` (large sections of UI -> composition of components)
    - `theme` (files defining our palette)

Several components were able to be brought in essentially unmodified:
- `SplitButton`
- `EmptyState`
- `Footer`
-  All the icons / logos
- Theming (removed several items that aren't necessary, yet, though)

Other components had more coupling, and need more refactoring:
- `NavBar`
- `Confetti`

Current State:

![2022-01-06 17 16 31](https://user-images.githubusercontent.com/88213859/148475521-96e080cc-1d33-4b8e-a434-29e388936e3f.gif)

For a full working app, there's potentially a lot more to bring in:
- User / Account Settings Stuff
- Users Page
- Organizations Page
(and all the supporting dependencies)

site/theme/constants.ts

@@ -0,0 +1,8 @@
+export const spacing = 8
+export const borderRadius = 4
+export const buttonBorderWidth = 2
+export const MONOSPACE_FONT_FAMILY =
+  "'Fira Code', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace"
+export const BODY_FONT_FAMILY = `"Inter", sans-serif`
+export const lightButtonShadow = "0 2px 2px rgba(0, 23, 121, 0.08)"
+export const emptyBoxShadow = "none"

site/theme/index.ts

@@ -0,0 +1 @@
+export { light, dark } from "./theme"

site/theme/palettes.ts

@@ -0,0 +1,118 @@
+import { Palette } from "@material-ui/core/styles/createPalette"
+/**
+ * Augment MUI Palette with Coder-specific design system
+ */
+declare module "@material-ui/core/styles/createPalette" {
+  interface Palette {
+    navbar: {
+      main: string
+    }
+  }
+
+  interface PaletteOptions {
+    navbar: {
+      main: string
+    }
+  }
+}
+/**
+ * CustomPalette implements a minimal subset of MUI Palette interface for our
+ * light and dark themes.
+ */
+export type CustomPalette = Pick<
+  Palette,
+  "action" | "background" | "divider" | "error" | "info" | "navbar" | "primary" | "secondary" | "text" | "type"
+>
+
+/**
+ * Light theme color palette, the default
+ *
+ * This maps to our design system at:
+ * https://www.figma.com/file/VkXU4873QOsSprMQV02GgR/Design-System?node-id=3%3A2
+ */
+export const lightPalette: CustomPalette = {
+  type: "light",
+  background: {
+    default: "#F3F3F3",
+    paper: "#FFF",
+  },
+
+  primary: {
+    main: "#519A54",
+    light: "#A2E0A5",
+    dark: "#3A783D",
+    contrastText: "#FFF",
+  },
+  info: {
+    main: "#000",
+    light: "#000",
+    dark: "#000",
+    contrastText: "#FFF",
+  },
+  navbar: {
+    main: "#242424",
+  },
+  secondary: {
+    main: "#F7CD6F",
+    light: "#FFE7A0",
+    dark: "#BF9331",
+    contrastText: "#FFF",
+  },
+  error: {
+    main: "#DD4764",
+    light: "#A14E5E",
+    dark: "#912F42",
+    contrastText: "#FFF",
+  },
+  text: {
+    primary: "#000",
+    secondary: "#747474",
+    disabled: "#749367",
+    hint: "#749367",
+  },
+  action: {
+    active: "#242424",
+    hover: "rgba(0, 0, 0, 0.1)",
+    hoverOpacity: 0.08,
+    selected: "#D0EFD2",
+    disabled: "#DDE2EC",
+    disabledBackground: "#F3F3F3",
+  },
+  divider: "#DDE2EC",
+}
+
+/**
+ * Dark theme color palette
+ *
+ * This maps to our design system at:
+ * https://www.figma.com/file/VkXU4873QOsSprMQV02GgR/Design-System?node-id=219%3A40
+ */
+export const darkPalette: CustomPalette = {
+  type: "dark",
+  primary: lightPalette.primary,
+  secondary: lightPalette.secondary,
+  info: lightPalette.info,
+  error: lightPalette.error,
+  navbar: {
+    main: "rgb(8, 9, 10)",
+  },
+  background: {
+    default: "rgb(24, 26, 27)",
+    paper: "rgb(31, 33, 35)",
+  },
+  text: {
+    primary: "rgba(255, 255, 255, 0.95)",
+    secondary: "#BDBDBD",
+    disabled: "#BDBDBD",
+    hint: "#BDBDBD",
+  },
+  action: {
+    active: "#FFF",
+    hover: "rgba(255, 255, 255, 0.1)",
+    hoverOpacity: 0.1,
+    selected: "rgba(255, 255, 255, 0.2)",
+    disabled: "rgba(255, 255, 255, 0.1)",
+    disabledBackground: "rgba(255, 255, 255, 0.12)",
+  },
+  divider: "rgba(255, 255, 255, 0.12)",
+}

site/theme/theme.tsx

@@ -0,0 +1,20 @@
+import { createMuiTheme } from "@material-ui/core/styles"
+import { borderRadius } from "./constants"
+import { CustomPalette, darkPalette, lightPalette } from "./palettes"
+import { typography } from "./typography"
+
+const makeTheme = (palette: CustomPalette) => {
+  // Grab defaults to re-use in overrides
+  const { breakpoints } = createMuiTheme()
+
+  return createMuiTheme({
+    palette,
+    typography,
+    shape: {
+      borderRadius,
+    },
+  })
+}
+
+export const light = makeTheme(lightPalette)
+export const dark = makeTheme(darkPalette)

site/theme/typography.ts

@@ -0,0 +1,72 @@
+import { TypographyOptions } from "@material-ui/core/styles/createTypography"
+import { BODY_FONT_FAMILY } from "./constants"
+
+export const typography: TypographyOptions = {
+  fontFamily: BODY_FONT_FAMILY,
+  fontSize: 16,
+  fontWeightLight: 300,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  h1: {
+    fontSize: 72,
+    fontWeight: 400,
+    letterSpacing: -2,
+  },
+  h2: {
+    fontSize: 64,
+    letterSpacing: -2,
+    fontWeight: 400,
+  },
+  h3: {
+    fontSize: 32,
+    letterSpacing: -0.3,
+    fontWeight: 400,
+  },
+  h4: {
+    fontSize: 24,
+    letterSpacing: -0.3,
+    fontWeight: 400,
+  },
+  h5: {
+    fontSize: 20,
+    letterSpacing: -0.3,
+    fontWeight: 400,
+  },
+  h6: {
+    fontSize: 16,
+    fontWeight: 600,
+  },
+  body1: {
+    fontSize: 16,
+    lineHeight: "24px",
+  },
+  body2: {
+    fontSize: 14,
+    lineHeight: "20px",
+  },
+  subtitle1: {
+    fontSize: 18,
+    lineHeight: "28px",
+  },
+  subtitle2: {
+    fontSize: 16,
+    lineHeight: "24px",
+  },
+  caption: {
+    fontSize: 12,
+    lineHeight: "16px",
+  },
+  overline: {
+    fontSize: 12,
+    fontWeight: 500,
+    lineHeight: "16px",
+    letterSpacing: 1.5,
+    textTransform: "uppercase",
+  },
+  button: {
+    fontSize: 13,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: 1.5,
+  },
+}