diff --git a/docs/superpowers/specs/2026-05-18-animal-crossing-theme-design.md b/docs/superpowers/specs/2026-05-18-animal-crossing-theme-design.md new file mode 100644 index 0000000..19a9827 --- /dev/null +++ b/docs/superpowers/specs/2026-05-18-animal-crossing-theme-design.md @@ -0,0 +1,93 @@ +# Animal Crossing Theme — Sunny Meadow + +**Date:** 2026-05-18 +**Status:** Approved + +## Summary + +Add a fifth design theme ("animal-crossing") to the hyyzhome IoT learning portal. The theme captures the warm, cozy Animal Crossing aesthetic: leaf greens, cream backgrounds in light mode, and deep forest tones in dark mode. + +Reference: https://guokaigdg.github.io/animal-island-ui/ + +## Behavior + +- Supports both light and dark modes (no forced mode, unlike Terminal/Cyberpunk) +- Default: follows the user's current light/dark preference +- Slug: `"animal-crossing"` (kebab-case, consistent with `"material-you"`) + +## Color Palette + +### Light mode (Sunny Island Day) + +| Token | Value | Role | +|---|---|---| +| `--accent` | `#6dbc7e` | Primary leaf green | +| `--accent-rgb` | `109, 188, 126` | | +| `--accent-2` | `#5aad6d` | Darker green | +| `--accent-3` | `#4a9e5d` | Deepest green | +| `--accent-secondary-rgb` | `244, 200, 66` | Warm yellow for texture | +| `--page-gradient` | Warm cream `#fdf6e3` base with soft radial blobs | Background | +| `--page-texture` | Soft radial green/yellow gradients | Overlay layer | +| `--title-gradient` | `#6dbc7e` → `#5aad6d` → `#f4c842` | Title text fill | +| `--control-bg` | `rgba(255, 252, 240, 0.82)` | Button/dropdown backgrounds | +| `--control-border` | `rgba(109, 188, 126, 0.35)` | Button borders | +| `--control-inset` | `rgba(255, 255, 255, 0.85)` | Inner highlight | +| `--control-fg` | `#5c4824` | Warm brown text | +| Card bg | `rgba(255, 252, 240, 0.85)` | Creamy white | +| Card border | `rgba(109, 188, 126, 0.25)` | Soft green border | +| Body text | `#5c4824` | Warm brown | +| Muted text (card p) | `#7a6040` | Lighter warm brown | + +### Dark mode (Night on the Island) + +| Token | Value | Role | +|---|---|---| +| `--accent` | `#9ed98a` | Soft lime | +| `--accent-rgb` | `158, 217, 138` | | +| `--accent-2` | `#86cb72` | | +| `--accent-3` | `#6dbc5e` | | +| `--accent-secondary-rgb` | `245, 210, 90` | Lantern yellow | +| `--page-gradient` | Deep forest `#1e2d1e` solid | Background | +| `--page-texture` | Subtle radial lime/yellow glows | Overlay layer | +| `--title-gradient` | `#9ed98a` → `#86cb72` → `#f5d25a` | Title text fill | +| `--control-bg` | `rgba(25, 40, 25, 0.82)` | Dark forest controls | +| `--control-border` | `rgba(158, 217, 138, 0.25)` | | +| `--control-inset` | `rgba(255, 255, 255, 0.04)` | | +| `--control-fg` | `#e8f4d8` | Off-white | +| Card bg | `rgba(30, 48, 30, 0.82)` | Dark forest green | +| Card border | `rgba(158, 217, 138, 0.18)` | | +| Body text | `#e8f4d8` | Off-white | +| Muted text | `#b0c8a0` | Muted sage | + +## Visual Style + +- **Border radius:** `16px` on cards (vs Fluent's `12px`), `14px` on controls — slightly softer +- **Hover:** gentle `translateY(-2px)` lift + green glow shadow matching accent +- **Backdrop filter:** same acrylic blur as Fluent (20px blur, 180% saturate) +- **No special font override** — system sans-serif for legibility +- **No animations** — keeps the theme calm and lightweight + +## Files Changed + +| File | Change | +|---|---| +| `theme.js` | Add `"animal-crossing"` to `DESIGN_THEMES` array | +| `style.css` | Add light + dark CSS variable blocks; card/hover overrides scoped to `[data-design-theme="animal-crossing"]` | +| `i18n.js` | Add label in all 11 language variants in `DESIGN_THEME_LABELS` | +| `index.html` | Add `