update dependencies, run format

Author: tireymorris

bun.lockb

@@ -13,18 +13,18 @@
     "update-deps": "bunx npm-check-updates -u && bun install"
   },
   "dependencies": {
-    "@unocss/preset-web-fonts": "^0.61.5",
-    "hono": "^4.5.1",
-    "nodemon": "^3.1.4",
-    "unocss": "^0.61.5",
+    "@unocss/preset-web-fonts": "^0.61.9",
+    "hono": "^4.6.9",
+    "nodemon": "^3.1.7",
+    "unocss": "^0.61.9",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@unocss/cli": "^0.61.5",
-    "bun-types": "^1.1.20",
+    "@unocss/cli": "^0.61.9",
+    "bun-types": "^1.1.34",
     "concurrently": "^8.2.2",
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.5"
+    "prettier-plugin-tailwindcss": "^0.6.8"
   },
   "module": "src/server.tsx"
 }

package.json

@@ -7,7 +7,7 @@
   font-weight: 400;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
@@ -16,7 +16,7 @@
   font-weight: 400;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* layer: default */
@@ -43,12 +43,10 @@
 .bg-gray-300{--un-bg-opacity:1;background-color:rgb(209 213 219 / var(--un-bg-opacity)) /* #d1d5db */;}
 .bg-indigo-200{--un-bg-opacity:1;background-color:rgb(199 210 254 / var(--un-bg-opacity)) /* #c7d2fe */;}
 .bg-transparent{background-color:transparent /* transparent */;}
-.bg-white,
-[bg-white=""]{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity)) /* #fff */;}
+.bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity)) /* #fff */;}
 .dark .dark\:bg-blue-600{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity)) /* #2563eb */;}
 .dark .dark\:bg-gray-700{--un-bg-opacity:1;background-color:rgb(55 65 81 / var(--un-bg-opacity)) /* #374151 */;}
-.dark .dark\:bg-gray-900,
-.dark [dark\:bg-gray-900=""]{--un-bg-opacity:1;background-color:rgb(17 24 39 / var(--un-bg-opacity)) /* #111827 */;}
+.dark .dark\:bg-gray-900{--un-bg-opacity:1;background-color:rgb(17 24 39 / var(--un-bg-opacity)) /* #111827 */;}
 .dark .dark\:bg-indigo-600{--un-bg-opacity:1;background-color:rgb(79 70 229 / var(--un-bg-opacity)) /* #4f46e5 */;}
 .hover\:bg-blue-400:hover{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity)) /* #60a5fa */;}
 .p-0{padding:0;}
@@ -66,8 +64,7 @@
 .text-5xl{font-size:3rem;line-height:1;}
 .text-base{font-size:1rem;line-height:1.5rem;}
 .text-sm{font-size:0.875rem;line-height:1.25rem;}
-.dark .dark\:text-white,
-.dark [dark\:text-white=""]{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
+.dark .dark\:text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
 .text-black{--un-text-opacity:1;color:rgb(0 0 0 / var(--un-text-opacity)) /* #000 */;}
 .text-neutral-500{--un-text-opacity:1;color:rgb(115 115 115 / var(--un-text-opacity)) /* #737373 */;}
 .text-slate-900{--un-text-opacity:1;color:rgb(15 23 42 / var(--un-text-opacity)) /* #0f172a */;}

public/styles/uno.css

@@ -7,7 +7,7 @@ type Props = {
 export default function Button({ class: className, children, ...rest }: Props) {
   return (
     <button
-      class={`text-slate-900 flex cursor-pointer items-center justify-center gap-3 rounded-md border-none bg-blue-300 px-4 py-2 text-base font-bold shadow-md hover:bg-blue-400  ${className}`}
+      class={`flex cursor-pointer items-center justify-center gap-3 rounded-md border-none bg-blue-300 px-4 py-2 text-base font-bold text-slate-900 shadow-md hover:bg-blue-400 ${className}`}
       {...rest}
     >
       {children}

src/components/Button.tsx

@@ -10,7 +10,7 @@ function Layout({ title, children }: LayoutProps) {
   return (
     <html
       lang="en"
-      className="dark:bg-gray-900 bg-white dark:text-white text-black"
+      className="bg-white text-black dark:bg-gray-900 dark:text-white"
     >
       <head>
         <meta charSet="utf-8" />
@@ -28,7 +28,7 @@ function Layout({ title, children }: LayoutProps) {
         <EnableDarkMode />
       </head>
       <style>{`* { box-sizing: border-box; margin: 0; outline: none; color: unset; }`}</style>
-      <body className="font-lato m-0 bg-white dark:bg-gray-900 p-0 text-black dark:text-white">
+      <body className="font-lato m-0 bg-white p-0 text-black dark:bg-gray-900 dark:text-white">
         {children}
       </body>
     </html>

src/components/Layout.tsx

@@ -12,16 +12,16 @@ app.get("/", (c) =>
   c.html(
     <Layout title="hyperwave">
       <main class="m-auto flex h-full flex-col items-center gap-8 px-10 py-8 text-center">
-        <h1 class="text-5xl font-extrabold text-black dark:text-white drop-shadow-lg">
+        <h1 class="text-5xl font-extrabold text-black drop-shadow-lg dark:text-white">
           🌊 hyperwave
         </h1>
-        <pre class="rounded-md bg-indigo-200 dark:bg-indigo-600 px-6 py-3 text-black dark:text-white shadow-lg">
+        <pre class="rounded-md bg-indigo-200 px-6 py-3 text-black shadow-lg dark:bg-indigo-600 dark:text-white">
           ⌨️ edit&nbsp;
-          <code class="bg-gray-300 dark:bg-gray-700 text-black dark:text-white rounded px-2 py-1">
+          <code class="rounded bg-gray-300 px-2 py-1 text-black dark:bg-gray-700 dark:text-white">
             src/server.tsx
           </code>
         </pre>
-        <pre class="rounded-md bg-blue-200 dark:bg-blue-600 px-6 py-3 text-black dark:text-white shadow-lg">
+        <pre class="rounded-md bg-blue-200 px-6 py-3 text-black shadow-lg dark:bg-blue-600 dark:text-white">
           📚 read the&nbsp;
           <a
             href="https://github.com/tireymorris/hyperwave?tab=readme-ov-file#hyperwave-"