tonym
8f77b7c453
Adds a search box (matches name, location, and labels) and a Location/Label grouping toggle to Inventory, and fixes the unstyled Suggestions page. (Renumbered from 0.19.0 → 0.22.0: Pantry work took 0.19–0.21 in parallel.) Hardening from a max-effort code review of the new grid: - Contained items resolve to their container's effective location, so search finds them and the flat view groups them under the right place (not "No location"). - Location/label groups key on id, not name, so same-named places/labels stay separate; synthetic bucket renamed "No labels" to avoid colliding with a real label; fixed duplicate React keys and two empty-state regressions. - deleteItem now reparents a deleted container's contents into its own spot (its place or parent item) instead of orphaning them; the grid also treats any still-orphaned child as top-level so nothing silently vanishes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
109 lines
3.5 KiB
CSS
109 lines
3.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/*
|
|
* Moon Base palette — forest / earth / sky
|
|
*
|
|
* --soil warm dark brown for body text (like rich earth)
|
|
* --leaf fresh green accent
|
|
* --canopy deep forest green sidebar
|
|
* --dew pale sage background
|
|
* --ember warm red for warnings / destructive
|
|
*/
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Force native form controls (input/textarea/select) to the light theme so
|
|
* they don't pick up the OS dark fill — otherwise an unstyled <input> renders
|
|
* with a dark system background in a dark-mode browser, hiding placeholder
|
|
* text. .dark overrides this below. */
|
|
color-scheme: light;
|
|
--dew: 120 18% 94%; /* #EEF3EE — pale sage background */
|
|
--dew-deep: 120 20% 97%; /* slightly lighter for cards */
|
|
--soil: 25 35% 18%; /* #3A2B1A — warm dark brown text */
|
|
--soil-muted: 25 20% 40%; /* softer brown for muted copy */
|
|
--leaf: 130 40% 38%; /* #3D7A48 — forest green accent */
|
|
--leaf-soft: 130 30% 72%; /* lighter green for hovers */
|
|
--canopy: 140 30% 16%; /* #1E3328 — dark forest green sidebar */
|
|
--canopy-foreground: 120 18% 88%;
|
|
--canopy-accent: 140 28% 22%;
|
|
--canopy-accent-foreground: 130 30% 72%;
|
|
--canopy-border: 140 30% 12%;
|
|
--ember: 5 55% 36%; /* #8C3528 — deep red for destructive */
|
|
--ember-foreground: 44 80% 95%;
|
|
|
|
/* shadcn token bindings */
|
|
--background: var(--dew);
|
|
--foreground: var(--soil);
|
|
--card: var(--dew-deep);
|
|
--card-foreground: var(--soil);
|
|
--popover: var(--dew-deep);
|
|
--popover-foreground: var(--soil);
|
|
--primary: 140 30% 16%;
|
|
--primary-foreground: 120 18% 88%;
|
|
--secondary: 120 15% 85%;
|
|
--secondary-foreground: var(--soil);
|
|
--muted: 120 12% 87%;
|
|
--muted-foreground: var(--soil-muted);
|
|
--accent: var(--leaf);
|
|
--accent-foreground: 120 18% 96%;
|
|
--destructive: var(--ember);
|
|
--destructive-foreground: var(--ember-foreground);
|
|
--border: 120 15% 82%;
|
|
--input: 120 15% 82%;
|
|
--ring: var(--leaf);
|
|
--radius: 0.625rem;
|
|
|
|
--sidebar: var(--canopy);
|
|
--sidebar-foreground: var(--canopy-foreground);
|
|
--sidebar-accent: var(--canopy-accent);
|
|
--sidebar-accent-foreground: var(--canopy-accent-foreground);
|
|
--sidebar-border: var(--canopy-border);
|
|
}
|
|
|
|
.dark {
|
|
color-scheme: dark;
|
|
--dew: 140 18% 10%;
|
|
--dew-deep: 140 18% 12%;
|
|
--soil: 120 18% 88%;
|
|
--soil-muted: 120 12% 65%;
|
|
--leaf: 130 40% 50%;
|
|
--leaf-soft: 130 30% 65%;
|
|
--canopy: 140 25% 8%;
|
|
--canopy-foreground: 120 15% 78%;
|
|
--canopy-accent: 140 25% 13%;
|
|
--canopy-accent-foreground: 130 25% 80%;
|
|
--canopy-border: 140 25% 6%;
|
|
--ember: 5 60% 50%;
|
|
--ember-foreground: 120 18% 92%;
|
|
|
|
--background: var(--dew);
|
|
--foreground: var(--soil);
|
|
--card: var(--dew-deep);
|
|
--card-foreground: var(--soil);
|
|
--popover: var(--dew-deep);
|
|
--popover-foreground: var(--soil);
|
|
--primary: 130 40% 50%;
|
|
--primary-foreground: 140 18% 10%;
|
|
--secondary: 140 18% 18%;
|
|
--secondary-foreground: var(--soil);
|
|
--muted: 140 18% 16%;
|
|
--muted-foreground: var(--soil-muted);
|
|
--accent: var(--leaf);
|
|
--accent-foreground: 140 18% 10%;
|
|
--destructive: var(--ember);
|
|
--destructive-foreground: var(--ember-foreground);
|
|
--border: 140 18% 20%;
|
|
--input: 140 18% 20%;
|
|
--ring: var(--leaf);
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|