open-props (#55)

pmndrs · Aug 5, 2024 · 330f272 · 330f272
1 parent c200b6c
commit 330f272
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 590 deletions.
diff --git a/apps/website/app/demos/[demoname]/page.tsx b/apps/website/app/demos/[demoname]/page.tsx
@@ -50,5 +50,14 @@ export default function Page(props: Props) {
 
   const { embed_url } = demo;
 
-  return <iframe src={embed_url} className="w-full min-h-dvh" />;
+  return (
+    <>
+      <style>{`
+        @scope {
+          iframe {width:100%; min-height:100dvh;}
+        }
+      `}</style>
+      <iframe src={embed_url} />;
+    </>
+  );
 }
diff --git a/apps/website/app/globals.css b/apps/website/app/globals.css
@@ -1,12 +1,8 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* the props */
+@import "open-props/style";
 
-body {
-}
+/* optional imports that use the props */
+@import "open-props/normalize";
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
+@import "open-props/normalize/dark";
+@import "open-props/normalize/light";
diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
@@ -17,8 +17,15 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`bg-[#eee] ${inter.className}`}>
-        <div className="fixed w-full h-dvh">{children}</div>
+      <body className={inter.className}>
+        <style>{`
+        @scope {
+          :scope {background:#eee;}
+          main {position:fixed; width:100%; height:100dvh;}
+        }
+      `}</style>
+
+        <main>{children}</main>
         <Nav />
       </body>
     </html>

diff --git a/apps/website/app/page.tsx b/apps/website/app/page.tsx
@@ -1,6 +1,11 @@
 export default function Page() {
   return (
-    <div className="flex w-full min-h-dvh items-center justify-center">
+    <div>
+      <style>{`
+        @scope {
+          :scope {display:flex; align-items:center; justify-content:center; width:100%; min-height:100dvh;}
+        }
+      `}</style>
       Select a demo
     </div>
   );

diff --git a/apps/website/components/Nav.tsx b/apps/website/components/Nav.tsx
@@ -11,30 +11,44 @@ export default function Nav({
   ...props
 }: ComponentProps<"nav"> & { current?: string }) {
   return (
-    <nav className="inline-block" {...props}>
-      <ul className="flex flex-col gap-4 p-8 relative">
-        {demos.map(({ name, thumb }, i) => {
-          return (
-            <li key={thumb}>
-              <Link
-                href={`/demos/${name}`}
-                className={"block bg-white"}
-                style={{
-                  outline: `2px solid ${name === current ? "black" : "transparent"}`,
-                }}
-              >
-                <Image
-                  src={thumb}
-                  width={16}
-                  height={9}
-                  alt=""
-                  className="object-cover aspect-video w-auto h-28"
-                />
-              </Link>
-            </li>
-          );
-        })}
-      </ul>
-    </nav>
+    <>
+      <style>{`
+        @scope {
+          nav {display:inline-block;}
+
+          ul {
+            padding-inline-start:unset;
+            list-style:none;
+
+            padding:2rem;
+            display:flex; flex-direction:column; gap:1rem; position:relative;
+          }
+
+          a {display:block; background:white;}
+
+          a img {
+            object-fit:cover; aspect:16/9; width:auto; height:7rem;
+          }
+        }
+      `}</style>
+      <nav {...props}>
+        <ul>
+          {demos.map(({ name, thumb }, i) => {
+            return (
+              <li key={thumb}>
+                <Link
+                  href={`/demos/${name}`}
+                  style={{
+                    outline: `2px solid ${name === current ? "black" : "transparent"}`,
+                  }}
+                >
+                  <Image src={thumb} width={16} height={9} alt="" />
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+    </>
   );
 }
diff --git a/apps/website/lib/cn.ts b/apps/website/lib/cn.ts
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -11,12 +11,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "clsx": "^2.1.1",
-    "next": "14.2.5",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-use": "^17.5.1",
-    "tailwind-merge": "^2.4.0",
     "@demo/aquarium": "*",
     "@demo/arkanoid": "*",
     "@demo/arkanoid-under-60-loc": "*",
@@ -173,7 +167,13 @@
     "@demo/volumetric-spotlight": "*",
     "@demo/water-shader": "*",
     "@demo/wobbling-sphere": "*",
-    "@demo/zustand-site": "*"
+    "@demo/zustand-site": "*",
+    "clsx": "^2.1.1",
+    "next": "14.2.5",
+    "open-props": "^1.7.5",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-use": "^17.5.1"
   },
   "devDependencies": {
     "@types/node": "^20",
@@ -182,7 +182,6 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
 }
diff --git a/apps/website/postcss.config.mjs b/apps/website/postcss.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    // tailwindcss: {},
   },
 };
 

diff --git a/apps/website/tailwind.config.ts b/apps/website/tailwind.config.ts