Migrate major deps

Author: zerodevx

playwright.config.js

@@ -1,9 +1,9 @@
+import { defineConfig } from '@playwright/test'
 import check from 'is-port-reachable'
 
 const dev = await check(5173, { host: 'localhost' })
 
-/** @type {import('@playwright/test').PlaywrightTestConfig} */
-const config = {
+export default defineConfig({
   webServer: {
     command: 'npx vite build && npx vite preview',
     port: dev ? 5173 : 4173,
@@ -12,7 +12,6 @@ const config = {
   use: {
     baseURL: `http://localhost:${dev ? '5173' : '4173/svelte-toast/'}`
   },
-  testDir: 'tests'
-}
-
-export default config
+  testDir: 'tests',
+  testMatch: '**/*.js'
+})

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-import '@fontsource/inter/variable.css'
+import '@fontsource-variable/inter'
 import 'prismjs/themes/prism-tomorrow.css'
 import '../app.postcss'
 import { dev } from '$app/environment'

src/routes/+page.svelte

@@ -379,7 +379,7 @@ $: formatted = Prism.highlight(code, Prism.languages.javascript, 'javascript')
   <h1 class="text-4xl font-bold text-center mb-2">svelte-toast</h1>
   <div class="text-center mb-6">
     <a
-      class="badge font-mono text-xs px-4 py-3 hover:opacity-80"
+      class="badge font-mono text-xs px-4 py-3 hover:bg-base-300"
       href="https://github.com/zerodevx/svelte-toast"
       title="Visit Github repo"
       target="_blank"
@@ -393,8 +393,10 @@ $: formatted = Prism.highlight(code, Prism.languages.javascript, 'javascript')
     >
     gzipped) or as a Svelte component.
   </p>
-  <div class="mockup-code h-80 mb-4 text-sm overflow-auto">
-    <pre><code class="language-javascript">{@html formatted}</code></pre>
+  <div class="mockup-code mb-6">
+    <pre class="w-full h-64 text-sm overflow-x-auto"><code class="language-javascript"
+        >{@html formatted}</code
+      ></pre>
   </div>
   <div class="flex flex-wrap justify-around">
     {#each buttons as btn}

tailwind.config.cjs

@@ -5,13 +5,27 @@ const config = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['InterVariable', ...dt.fontFamily.sans]
+        sans: ['Inter Variable', ...dt.fontFamily.sans]
       }
     }
   },
   plugins: [require('daisyui')],
   daisyui: {
-    themes: ['light', 'dark']
+    themes: [
+      {
+        light: {
+          ...require('daisyui/src/theming/themes')['[data-theme=light]'],
+          primary: '#1C75BC',
+          'primary-content': 'white'
+        }
+      },
+      {
+        dark: {
+          ...require('daisyui/src/theming/themes')['[data-theme=dark]'],
+          primary: '#1C75BC'
+        }
+      }
+    ]
   }
 }