Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

tailwind.config.cjs

@@ -1,37 +1,44 @@
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: ["class", '[data-theme="dark"]'],
   content: ["./index.html", "./src/**/*.{ts,tsx}"],
   theme: {
-    fontFamily: {
-      mono: [
-        "Cascadia Code",
-        "ui-monospace",
-        "SFMono-Regular",
-        "Menlo",
-        "Monaco",
-        "Consolas",
-        "Liberation Mono",
-        "Courier New",
-        "monospace"
-      ]
-    },
-    colors: {
-      transparent: "transparent",
-      current: "currentColor",
-      backgroundPrimary: "var(--backgroundPrimary)",
-      backgroundSecondary: "var(--backgroundSecondary)",
-      accent: "var(--accent)",
-      accentMuted: "var(--accentMuted)",
-      textPrimary: "var(--textPrimary)",
-      textSecondary: "var(--textSecondary)",
-      link: "var(--link)"
-    },
-    brightness: {
-      hover: "var(--brighnessHover)",
-      press: "var(--brightnessPress)",
-      disabled: "var(--brightnessDisabled)"
-    },
-    extend: {}
+    extend: {
+      fontFamily: {
+        mono: ["Cascadia Code", ...fontFamily.mono],
+        sans: ["Inter var", ...fontFamily.sans]
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" }
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 }
+        }
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out"
+      },
+      colors: {
+        backgroundPrimary: "var(--backgroundPrimary)",
+        backgroundSecondary: "var(--backgroundSecondary)",
+        accent: "var(--accent)",
+        accentMuted: "var(--accentMuted)",
+        textPrimary: "var(--textPrimary)",
+        textSecondary: "var(--textSecondary)",
+        link: "var(--link)"
+      },
+      brightness: {
+        hover: "var(--brighnessHover)",
+        press: "var(--brightnessPress)",
+        disabled: "var(--brightnessDisabled)"
+      }
+    }
   },
-  plugins: [require("@tailwindcss/forms")]
+  plugins: [require("@tailwindcss/forms"), require("tailwindcss-animate")]
 };