Add colors in JS and Color Palette (#18)

.vscode/settings.json

@@ -41,7 +41,11 @@
   "files.eol": "\n",
   "[markdown]": {
     "editor.wordWrap": "on",
-    "editor.quickSuggestions": false,
+    "editor.quickSuggestions": {
+      "comments": "off",
+      "strings": "off",
+      "other": "off"
+    },
     "editor.tabSize": 4
   }
 }

components/ColorPalette.module.css

@@ -0,0 +1,21 @@
+.box {
+  width: calc(100rem / 16);
+  height: calc(100rem / 16);
+  margin-bottom: calc(10rem / 16);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  margin: calc(10rem / 16);
+  width: calc(150rem / 16);
+}

components/ColorPalette.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Color } from "utils/Color";
+
+import styles from "./ColorPalette.module.css";
+
+export function ColorPalette() {
+  return (
+    <>
+      <h2>Color Palette</h2>
+      <div className={styles.wrapper}>
+        {Object.entries(Color).map(([colorName, colorCSSName]) => (
+          <div key={colorName} className={styles.item}>
+            <div
+              className={styles.box}
+              style={{ backgroundColor: colorCSSName }}
+              key={colorName}
+            />
+            <span>{colorName}</span>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

pages/playground.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 
+import { ColorPalette } from "../components/ColorPalette";
+
 export default function Home() {
   return (
     <>
       <h1>Playground</h1>
       <p>Show off your components here!</p>
+      <ColorPalette />
     </>
   );
 }

utils/Color.ts

@@ -0,0 +1,38 @@
+const colorNames = [
+  "primaryBackground",
+  "secondaryBackground",
+  "tertiaryBackground",
+  "primaryAccent",
+  "primaryAccentLight",
+  "primaryAccentLighter",
+  "secondaryAccent",
+  "secondaryAccentLight",
+  "primaryHeading",
+  "secondaryHeading",
+  "link",
+  "linkHover",
+  "primaryText",
+  "cardBackground",
+  "label",
+] as const;
+
+// This type is needed for smart autocomplete
+type ColorName = typeof colorNames[number];
+
+export const Color: { [key in ColorName]: string } = {
+  primaryBackground: "var(--primary-background)",
+  secondaryBackground: "var(--secondary-background)",
+  tertiaryBackground: "var(--tertiary-background)",
+  primaryAccent: "var(--primary-accent)",
+  primaryAccentLight: "var(--primary-accent-light)",
+  primaryAccentLighter: "var(--primary-accent-lighter)",
+  secondaryAccent: "var(--secondary-accent)",
+  secondaryAccentLight: "var(--secondary-accent-light)",
+  primaryHeading: "var(--primary-heading)",
+  secondaryHeading: "var(--secondary-heading)",
+  link: "var(--link)",
+  linkHover: "var(--link-hover)",
+  primaryText: "var(--primary-text)",
+  cardBackground: "var(--card-background)",
+  label: "var(--label)",
+};