From 2a577cf6ab536ab1d43a40b684c17e02a1477507 Mon Sep 17 00:00:00 2001 From: taogaetz <59668529+taogaetz@users.noreply.github.com> Date: Thu, 28 Aug 2025 12:45:50 -0400 Subject: [PATCH] search bar fixed refactor all to tailwind add recipe form --- src/app.css | 66 +++++ src/app.html | 23 +- src/lib/assets/logo.webp | Bin 0 -> 4432 bytes src/lib/components/RecipeCard.svelte | 329 +++------------------- src/lib/components/SearchBar.svelte | 262 ++++-------------- src/routes/+layout.svelte | 72 +---- src/routes/+page.svelte | 54 +--- src/routes/recipe/[id]/+page.svelte | 381 +++++++------------------- src/routes/recipe/new/+page.server.ts | 60 ++++ src/routes/recipe/new/+page.svelte | 103 +++++++ 10 files changed, 448 insertions(+), 902 deletions(-) create mode 100644 src/lib/assets/logo.webp create mode 100644 src/routes/recipe/new/+page.server.ts create mode 100644 src/routes/recipe/new/+page.svelte diff --git a/src/app.css b/src/app.css index 4da9cc2..281286b 100644 --- a/src/app.css +++ b/src/app.css @@ -1,6 +1,72 @@ @import 'tailwindcss'; @plugin "daisyui"; +/* Tailwind v4 theme tokens (two-color theme + highlight) */ +@theme { + --color-primary: hsl(var(--text-hsl)); + --color-secondary: hsl(var(--highlight-hsl)); + --color-accent: hsl(var(--text-hsl)); + --color-success: hsl(var(--text-hsl)); + --color-neutral: hsl(var(--text-hsl)); + --color-base-100: hsl(var(--bg-hsl)); + --color-base-200: hsl(var(--bg-2-hsl)); + --color-base-300: hsl(var(--bg-3-hsl)); + --color-base-content: hsl(var(--text-hsl)); +} + +[data-theme='italian'] { + /* DaisyUI theme bridge */ + --p: hsl(var(--text-hsl)); + --pc: hsl(var(--inverse-hsl)); + --s: hsl(var(--highlight-hsl)); + --sc: hsl(var(--inverse-on-highlight-hsl)); + --a: hsl(var(--text-hsl)); + --ac: hsl(var(--inverse-hsl)); + --n: hsl(var(--text-hsl)); + --nc: hsl(var(--inverse-hsl)); + --b1: hsl(var(--bg-hsl)); + --b2: hsl(var(--bg-2-hsl)); + --b3: hsl(var(--bg-3-hsl)); + --bc: hsl(var(--text-hsl)); + + /* Two key colors (RGB → HSL) */ + /* Background: rgb(255, 247, 222) → hsl(45.6 100% 93.53%) */ + --bg-hsl: 45.6 100% 93.53%; + --bg-2-hsl: 45.6 100% 90%; + --bg-3-hsl: 45.6 100% 85%; + /* Text: rgb(123, 34, 30) → hsl(2.5 60.78% 30%) */ + --text-hsl: 2.5 60.78% 30%; + --inverse-hsl: 0 0% 100%; + /* Highlight: hsla(54.9, 89.47%, 33.53%, 1) */ + --highlight-hsl: 54.9 89.47% 33.53%; + --inverse-on-highlight-hsl: 0 0% 0%; +} + +/* Ensure our theme overrides daisyUI's default light tokens */ +[data-theme='italian'] { + /* Base surfaces */ + --color-base-100: hsl(var(--bg-hsl)); + --color-base-200: hsl(var(--bg-2-hsl)); + --color-base-300: hsl(var(--bg-3-hsl)); + --color-base-content: hsl(var(--text-hsl)); + + /* Brand tokens */ + --color-primary: hsl(var(--text-hsl)); + --color-primary-content: hsl(var(--inverse-hsl)); + --color-secondary: hsl(var(--highlight-hsl)); + --color-secondary-content: hsl(var(--inverse-on-highlight-hsl)); + --color-accent: hsl(var(--text-hsl)); + --color-accent-content: hsl(var(--inverse-hsl)); + --color-neutral: hsl(var(--text-hsl)); + --color-neutral-content: hsl(var(--inverse-hsl)); +} + +/* Force page background/text to the theme values */ +html[data-theme='italian'] { + /* Color the browser/OS area behind the page (e.g., device clock) */ + background-color: hsl(var(--bg-hsl)); +} + /* Global styles for Chef Bible */ * { box-sizing: border-box; diff --git a/src/app.html b/src/app.html index f273cc5..08c35c2 100644 --- a/src/app.html +++ b/src/app.html @@ -1,11 +1,14 @@ - -
- - - %sveltekit.head% - - -