feat: shadcn solid ui and cal-sans

package.json

@@ -11,6 +11,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@types/node": "^22.10.5",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.16",
@@ -19,7 +20,13 @@
     "vite-plugin-solid": "^2.11.0"
   },
   "dependencies": {
+    "@kobalte/core": "^0.13.7",
+    "cal-sans": "^1.0.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "gsap": "^3.12.5",
-    "solid-js": "^1.9.3"
+    "solid-js": "^1.9.3",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7"
   }
 }

src/App.tsx

@@ -1,21 +1,22 @@
 import type { Component } from 'solid-js';
 import { onMount } from 'solid-js';
 import gsap from 'gsap';
-import NavBar from './components/NavBar';
+import NavBar from '@/components/NavBar';
 
-import hero1 from "./assets/hero1.png"
-import hero2 from "./assets/hero2.webp"
-import hero7 from "./assets/hero7.webp"
+import hero1 from "@/assets/hero1.png"
+import hero2 from "@/assets/hero2.webp"
+import hero7 from "@/assets/hero7.webp"
 
-import hero3 from "./assets/hero3.webp"
-import hero4 from "./assets/hero4.webp"
-import hero8 from "./assets/hero8.webp"
+import hero3 from "@/assets/hero3.webp"
+import hero4 from "@/assets/hero4.webp"
+import hero8 from "@/assets/hero8.webp"
 
-import hero5 from "./assets/hero5.webp"
-import hero9 from "./assets/hero9.webp"
-import hero10 from "./assets/hero10.webp"
+import hero5 from "@/assets/hero5.webp"
+import hero9 from "@/assets/hero9.webp"
+import hero10 from "@/assets/hero10.webp"
 
-import ocean from "./assets/ocean.webp"
+import ocean from "@/assets/ocean.webp"
+import { Button } from './components/ui/button';
 
 const App: Component = () => {
 
@@ -83,7 +84,6 @@ const App: Component = () => {
             </div>
             <div id='about'></div>
             <div class='flex flex-col w-full h-screen'>
-
             </div>
         </div>
     );

src/components/ui/button.tsx

@@ -0,0 +1,54 @@
+import type { JSX, ValidComponent } from "solid-js"
+import { splitProps } from "solid-js"
+
+import * as ButtonPrimitive from "@kobalte/core/button"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        tedx: "bg-tedx text-white hover:bg-tedx/90 rounded-none cal-sans"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3 text-xs",
+        lg: "h-11 px-8",
+        icon: "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+)
+
+type ButtonProps<T extends ValidComponent = "button"> = ButtonPrimitive.ButtonRootProps<T> &
+  VariantProps<typeof buttonVariants> & { class?: string | undefined; children?: JSX.Element }
+
+const Button = <T extends ValidComponent = "button">(
+  props: PolymorphicProps<T, ButtonProps<T>>
+) => {
+  const [local, others] = splitProps(props as ButtonProps, ["variant", "size", "class"])
+  return (
+    <ButtonPrimitive.Root
+      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...others}
+    />
+  )
+}
+
+export type { ButtonProps }
+export { Button, buttonVariants }

src/index.css

@@ -1,3 +1,145 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilitie
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --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;
+  }
+
+  .dark,
+  [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;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+}
+
+@layer utilities {
+  .step {
+    counter-increment: step;
+  }
+
+  .step:before {
+    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
+    @apply ml-[-50px] mt-[-4px];
+    content: counter(step);
+  }
+}
+
+@media (max-width: 640px) {
+  .container {
+    @apply px-4;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 16px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  border: 4px solid transparent;
+  background-clip: content-box;
+  @apply bg-accent;
+}
+
+::-webkit-scrollbar-corner {
+  display: none;
+}
+
+.cal-sans {
+  font-family: "Cal Sans";
+}

src/index.tsx

@@ -1,8 +1,10 @@
 /* @refresh reload */
 import { render } from 'solid-js/web';
 
-import './index.css';
+import "cal-sans";
+
 import App from './App';
+import './index.css';
 
 const root = document.getElementById('root');
 

src/lib/utils.ts

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