feat: setup daisy, tailwind configs (#43)

* feat: ✨ install daisyui * feat: ✨ disable skeleton * style: 🎨 set global theme * feat: ✨ create playground * style: 🎨 setup emerald theme * style: 🎨 add tailwind gray/slate to theme * style: 🎨 swap primary (green) and secondary (blue)
icssc · Feb 12, 2024 · 4091184 · 4091184
1 parent cb3a728
commit 4091184
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "aws-cdk-lib": "2.110.1",
     "constructs": "10.3.0",
     "cz-conventional-changelog": "3.3.0",
+    "daisyui": "^4.6.2",
     "devmoji": "2.3.0",
     "eslint": "8.54.0",
     "eslint-config-prettier": "9.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>
-  <body data-sveltekit-preload-data="hover" data-theme="zotmeet-theme">
+  <body data-sveltekit-preload-data="hover" data-theme="emerald">
     <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/src/routes/playground/+page.svelte b/src/routes/playground/+page.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+</script>
+
+<div>
+  <input
+    type="text"
+    placeholder="Type here"
+    class="input input-bordered input-primary w-full max-w-xs bg-slate-base"
+  />
+</div>
+
+<div class="card w-96 bg-base-100 shadow-xl">
+  <figure>
+    <img src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" />
+  </figure>
+  <div class="card-body">
+    <h2 class="card-title">Shoes!</h2>
+    <p>If a dog chews shoes whose shoes does he choose?</p>
+    <div class="card-actions justify-end">
+      <button class="btn btn-primary">Buy Now</button>
+    </div>
+  </div>
+</div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,10 +1,12 @@
 // @ts-check
 import { join } from "path";
 
-import { skeleton } from "@skeletonlabs/tw-plugin";
+// import { skeleton } from "@skeletonlabs/tw-plugin";
 import forms from "@tailwindcss/forms";
+import daisyui from "daisyui";
+import emerald from "daisyui/src/theming/themes";
 
-import { zotmeetTheme } from "./theme";
+// import { zotmeetTheme } from "./theme";
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -16,12 +18,38 @@ export default {
     join(require.resolve("@skeletonlabs/skeleton"), "../**/*.{html,js,svelte,ts}"),
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        gray: {
+          light: "#F3F4F6" /* maps to gray-100 */,
+          base: "#D1D5DB" /* gray-300 */,
+          medium: "#9CA3AF" /* gray-400 */,
+          dark: "#1F2937" /* gray-800 */,
+        },
+        slate: {
+          base: "#CBD5E1" /* slate-300 */,
+        },
+      },
+    },
+    default: "daisy",
+  },
+  daisyui: {
+    themes: [
+      "emerald",
+      {
+        emerald: {
+          ...emerald["emerald"],
+          primary: "#367BFB",
+          secondary: "#65CC8A",
+        },
+      },
+    ],
   },
   plugins: [
+    daisyui,
     forms,
-    skeleton({
-      themes: { custom: [zotmeetTheme] },
-    }),
+    // skeleton({
+    //   themes: { custom: [zotmeetTheme] },
+    // }),
   ],
 };