feat: proper radix colors typing

packages/website/package.json

@@ -14,6 +14,7 @@
     "@nanostores/persistent": "^0.10.2",
     "@nanostores/react": "^0.7.3",
     "@nivo/core": "^0.87.0",
+    "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.3",
     "@react-three/drei": "^9.111.5",

packages/website/src/core/radix/var.ts

@@ -1,7 +1,14 @@
+import * as ColorsRaw from '@radix-ui/colors';
+
+type ExcludeSuffix<T> =
+  T extends `${string}${'A' | `${'P3' | 'Dark'}${'' | 'A'}`}` ? never : T;
+type RadixColor = ExcludeSuffix<keyof typeof ColorsRaw>;
+
 type Name =
   | `color-${'background' | `panel-${'solid' | 'translucent'}` | 'surface' | 'overlay'}`
   | `radius-${1 | 2 | 3 | 4 | 5 | 6 | 'full'}`
   | `space-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
+  | `${RadixColor}-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`;
 
 export function Var(name: Name) {
   return `var(--${name})`;