feat: add solid-ui

Tailwind + Kobalte ui toolkit
https://solid-ui-components.vercel.app

package.json

@@ -16,10 +16,16 @@
     "vite": "^4.1.4"
   },
   "dependencies": {
+    "@kobalte/core": "^0.12.1",
     "@solidjs/meta": "^0.28.2",
     "@solidjs/router": "^0.8.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "solid-js": "^1.7.2",
     "solid-start": "^0.2.26",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
     "undici": "^5.15.1"
   },
   "engines": {

src/layouts/default.tsx

@@ -4,8 +4,10 @@ import { A } from "solid-start";
 export default function DefaultLayout({ children }: ParentProps) {
   return (
     <main>
-      <A href="/">Index</A>
-      <A href="/about">About</A>
+      <nav>
+        <A href="/">Index</A>
+        <A href="/about">About</A>
+      </nav>
       {children}
     </main>
   );

src/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

src/root.css

@@ -1,40 +1,111 @@
-body {
-  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
-    "Helvetica Neue", sans-serif;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-a {
-  margin-right: 1rem;
-}
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
 
-main {
-  text-align: center;
-  padding: 1em;
-  margin: 0 auto;
-}
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
 
-h1 {
-  color: #335d92;
-  text-transform: uppercase;
-  font-size: 4rem;
-  font-weight: 100;
-  line-height: 1.1;
-  margin: 4rem auto;
-  max-width: 14rem;
-}
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --info: 204 94% 94%;
+    --info-foreground: 199 89% 48%;
+
+    --success: 149 80% 90%;
+    --success-foreground: 160 84% 39%;
+
+    --warning: 48 96% 89%;
+    --warning-foreground: 25 95% 53%;
+
+    --error: 0 93% 94%;
+    --error-foreground: 0 84% 60%;
+
+    --ring: 240 5.9% 10%;
+
+    --radius: 0.5rem;
+  }
 
-p {
-  max-width: 14rem;
-  margin: 2rem auto;
-  line-height: 1.35;
+  [data-kb-theme="dark"] {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --info: 204 94% 94%;
+    --info-foreground: 199 89% 48%;
+
+    --success: 149 80% 90%;
+    --success-foreground: 160 84% 39%;
+
+    --warning: 48 96% 89%;
+    --warning-foreground: 25 95% 53%;
+
+    --error: 0 93% 94%;
+    --error-foreground: 0 84% 60%;
+
+    --ring: 240 4.9% 83.9%;
+
+    --radius: 0.5rem;
+  }
 }
 
-@media (min-width: 480px) {
-  h1 {
-    max-width: none;
+@layer base {
+  * {
+    @apply border-border;
   }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
 
-  p {
-    max-width: none;
+@media (max-width: 640px) {
+  .container {
+    @apply px-4;
   }
 }

src/root.tsx

@@ -1,5 +1,10 @@
 // @refresh reload
-import { Suspense } from "solid-js";
+import {
+  ColorModeProvider,
+  ColorModeScript,
+  cookieStorageManagerSSR,
+} from "@kobalte/core";
+import { Suspense, useContext } from "solid-js";
 import {
   Body,
   ErrorBoundary,
@@ -9,11 +14,18 @@ import {
   Meta,
   Routes,
   Scripts,
+  ServerContext,
   Title,
 } from "solid-start";
 import "./root.css";
+import { isServer } from "solid-js/web";
 
 export default function Root() {
+  const event = useContext(ServerContext);
+
+  const storageManager = cookieStorageManagerSSR(
+    isServer ? event?.request.headers.get("cookie") ?? "" : document.cookie
+  );
   return (
     <Html lang="en">
       <Head>
@@ -22,13 +34,16 @@ export default function Root() {
         <Meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
       <Body>
-        <Suspense>
-          <ErrorBoundary>
-            <Routes>
-              <FileRoutes />
-            </Routes>
-          </ErrorBoundary>
-        </Suspense>
+        <ErrorBoundary>
+          <ColorModeScript storageType={storageManager.type} />
+          <Suspense>
+            <ColorModeProvider storageManager={storageManager}>
+              <Routes>
+                <FileRoutes />
+              </Routes>
+            </ColorModeProvider>
+          </Suspense>
+        </ErrorBoundary>
         <Scripts />
       </Body>
     </Html>

src/routes/about.tsx

@@ -0,0 +1,12 @@
+import { Title } from "solid-start";
+import { HttpStatusCode } from "solid-start/server";
+import DefaultLayout from "~/layouts/default";
+
+export default function About() {
+  return (
+    <DefaultLayout>
+      <Title>About</Title>
+      <h1>About</h1>
+    </DefaultLayout>
+  );
+}

tailwind.config.cjs

@@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class", '[data-kb-theme="dark"]'],
+  content: ["./src/**/*.{html,js,jsx,md,mdx,ts,tsx}"],
+  presets: [require("./ui.preset.js")],
+};

tsconfig.json

@@ -8,10 +8,14 @@
     "jsxImportSource": "solid-js",
     "jsx": "preserve",
     "strict": true,
-    "types": ["solid-start/env"],
+    "types": [
+      "solid-start/env"
+    ],
     "baseUrl": "./",
     "paths": {
-      "~/*": ["./src/*"]
+      "~/*": [
+        "./src/*"
+      ]
     }
   }
-}
+}

ui.config.json

@@ -0,0 +1,11 @@
+{
+  "tsx": true,
+  "componentDir": "./src/components/ui",
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/root.css"
+  },
+  "aliases": {
+    "path": "~/*"
+  }
+}

ui.preset.js

@@ -0,0 +1,102 @@
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
+/**@type {import("tailwindcss").Config} */
+module.exports = {
+  darkMode: ["class", '[data-kb-theme="dark"]'],
+  content: ["./src/**/*.{js,jsx,md,mdx,ts,tsx}"],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+        error: {
+          DEFAULT: "hsl(var(--error))",
+          foreground: "hsl(var(--error-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["Inter", ...fontFamily.sans],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--kb-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--kb-accordion-content-height)" },
+          to: { height: 0 },
+        },
+        "content-show": {
+          from: { opacity: 0, transform: "scale(0.96)" },
+          to: { opacity: 1, transform: "scale(1)" },
+        },
+        "content-hide": {
+          from: { opacity: 1, transform: "scale(1)" },
+          to: { opacity: 0, transform: "scale(0.96)" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "content-show": "content-show 0.2s ease-out",
+        "content-hide": "content-hide 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};