better color support

website/src/docs/Colors.jsx

@@ -0,0 +1,20 @@
+import { colorMap } from '@strudel.cycles/core/color.mjs';
+import React from 'react';
+
+const Colors = () => {
+  return (
+    <div>
+      {Object.entries(colorMap).map(([name, hex]) => (
+        <div key={name} className="py-1">
+          <div className="grid gap-2 grid-cols-3">
+            <div>{name}</div>
+            <div style={{ backgroundColor: hex }}></div>
+            <div style={{ backgroundColor: name, color: hex }}>{name}</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Colors;

website/src/pages/learn/colors.mdx

@@ -0,0 +1,12 @@
+---
+title: Colors
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+import { JsDoc } from '../../docs/JsDoc';
+import Colors from '../../docs/Colors.jsx';
+
+# Colors
+
+<Colors />