List colors for reference palette in theme tool

2023-02-09 00:39:57 -05:00
parent 6f342bb2c6
commit f787f6054b
6 changed files with 124 additions and 45 deletions
@@ -1,3 +1,46 @@
+/* eslint-disable import/no-relative-packages */
+import { Scale } from 'chroma-js';
+
+import { color } from '../../src/system/reference';
+
+function ColorChips({ colorScale }: { colorScale: Scale }) {
+    const colors = colorScale.colors(11);
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '1px',
+            }}
+        >
+            {colors.map((c) => (
+                <div
+                    key={c}
+                    style={{
+                        backgroundColor: c,
+                        width: '80px',
+                        height: '40px',
+                    }}
+                >
+                    {c}
+                </div>
+            ))}
+        </div>
+    );
+}
+
 export default function Home() {
-  return <main>Hello World</main>;
+    const { red, gray, rose } = color;
+    return (
+        <main>
+            <div style={{ display: 'flex', gap: '1px' }}>
+                <ColorChips colorScale={gray} />
+                <ColorChips colorScale={rose} />
+                <ColorChips colorScale={red} />
+            </div>
+        </main>
+    );
 }