feat: uno attributify

2025-01-26 15:10:57 -05:00 · 2025-01-26 15:10:57 -05:00 · 205cd90104
commit 205cd90104
parent c78e96994d
6 changed files with 18 additions and 11 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/index.html
+++ b/index.html
@ -3,9 +3,10 @@
  <head>
    <style>
      :root {
-        --bg: #181115;
-        --on-bg: #eddfe4;
+        --surface: black;
+        --on-surface: white;
        --root-color: #F9A8D4;
+
        --primary: #fbb1d8;
        --on-primary: #511d3e;
        --outline: #9c8d93;
@ -16,8 +17,8 @@
        font-family: "Atkinson Hyperlegible", sans-serif;
      }
      body {
-        background-color: var(--bg);
-        color: var(--on-bg);
+        background-color: var(--surface);
+        color: var(--on-surface);
      }
    </style>

--- a/package.json
+++ b/package.json
@ -18,7 +18,6 @@
    "@unocss/preset-wind": "^0.65.3",
    "eslint": "^9.17.0",
    "eslint-plugin-solid": "^0.14.5",
-    "globals": "^15.14.0",
    "typescript": "^5.7.2",
    "typescript-eslint": "^8.19.0",
    "unocss": "^0.65.3",
@ -28,8 +27,8 @@
  "dependencies": {
    "@solidjs/router": "^0.15.2",
    "@tanstack/solid-query": "^5.62.10",
+    "@unocss/preset-attributify": "^65.4.3",
    "@unocss/reset": "^0.65.3",
-    "add": "^2.0.6",
    "solid-js": "^1.9.3"
  },
  "module": "index.ts"
--- a/shims.d.ts
+++ b/shims.d.ts
@ -0,0 +1,7 @@
+import type { AttributifyAttributes } from "@unocss/preset-attributify"
+
+declare module "solid-js" {
+	namespace JSX {
+		interface HTMLAttributes<T> extends AttributifyAttributes { }
+	}
+}
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@ -14,7 +14,7 @@ export function LoginPage()

 	return (
 		<div>
-			<h1 class="font-bold">
+			<h1 font="bold" >
 				Login to Reezer
 			</h1>

--- a/uno.config.ts
+++ b/uno.config.ts
@ -1,15 +1,15 @@
 import presetWind from "@unocss/preset-wind"
-import { defineConfig } from "unocss"
+import { defineConfig, presetAttributify } from "unocss"

 export default defineConfig({
-	// ...UnoCSS options
 	presets: [
+		presetAttributify({}),
 		presetWind(),
 	],
 	theme: {
 		colors: {
-			"c-bg": "var(--bg)",
-			"c-on-bg": "var(--on-bg)",
+			"c-surface": "var(--surface)",
+			"c-on-surface": "var(--on-surface)",
 			"c-root-color": "var(--root-color)",
 			"c-primary": "var(--primary)",
 			"c-on-primary": "var(--on-primary)",