components/ColorPalette.module.css

@@ -0,0 +1,20 @@
+.box {
+	width: 100px;
+	height: 100px;
+}
+
+.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: 10px;
+	width: 150px;
+}

components/ColorPalette.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Colors } from "utils/Colors";
+
+import styles from "./ColorPalette.module.css";
+
+export function ColorPalette() {
+  return (
+    <>
+      <h2>Color Palette</h2>
+      <div className={styles.wrapper}>
+        {Object.entries(Colors).map(([colorName, colorCSSName]) => (
+          <div key={colorName} className={styles.item}>
+            <div
+              className={styles.box}
+              // in this case typescript does not keep the correct types since we are looping through colors.
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              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/Colors.ts

@@ -0,0 +1,38 @@
+export 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 Colors: { [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)",
+};