Radix, request methods, and theme stuff

tailwind.config.cjs

@@ -1,11 +1,41 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {},
+        borderRadius: {
+            none: '0px',
+            sm: 'var(--border-radius-sm)',
+            DEFAULT: 'var(--border-radius)',
+            md: 'var(--border-radius-md)',
+            lg: 'var(--border-radius-lg)',
+            full: '9999px',
+        },
+        colors: {
+            white: 'hsl(var(--color-white) / <alpha-value>)',
+            background: 'hsl(var(--color-background) / <alpha-value>)',
+            gray: color('gray'),
+            blue: color('blue'),
+            violet: color('violet'),
+        }
+    },
+    plugins: [],
+}
+
+function color(name) {
+    return {
+        50: `hsl(var(--color-${name}-50) / <alpha-value>)`,
+        100: `hsl(var(--color-${name}-100) / <alpha-value>)`,
+        200: `hsl(var(--color-${name}-200) / <alpha-value>)`,
+        300: `hsl(var(--color-${name}-300) / <alpha-value>)`,
+        400: `hsl(var(--color-${name}-400) / <alpha-value>)`,
+        500: `hsl(var(--color-${name}-500) / <alpha-value>)`,
+        600: `hsl(var(--color-${name}-600) / <alpha-value>)`,
+        700: `hsl(var(--color-${name}-700) / <alpha-value>)`,
+        800: `hsl(var(--color-${name}-800) / <alpha-value>)`,
+        900: `hsl(var(--color-${name}-900) / <alpha-value>)`,
+    }
 }