update

2026-05-18 03:44:07 -06:00
parent ce3be0143a
commit c46cd06954
1 changed files with 485 additions and 0 deletions
--- a/docs/superpowers/plans/2026-05-18-animal-crossing-theme.md
+++ b/docs/superpowers/plans/2026-05-18-animal-crossing-theme.md
@@ -0,0 +1,485 @@
+# Animal Crossing Theme Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add an "animal-crossing" design theme (warm cream light / deep forest dark) to the hyyzhome IoT portal.
+
+**Architecture:** Four small, independent file edits. No new files created. The theme slug is registered in `theme.js`, a dropdown option added in `index.html`, CSS variables + component overrides added in `style.css`, and display labels added in `i18n.js`. Changes are order-independent but committing theme.js + index.html first lets you visually verify the option appears before styling is complete.
+
+**Tech Stack:** Vanilla JS, Vite, CSS custom properties. No framework. No test suite — verification is manual in the dev server (`npm start`).
+
+---
+
+## Files Modified
+
+| File | Change |
+|---|---|
+| `theme.js:1` | Add `"animal-crossing"` to `DESIGN_THEMES` array |
+| `index.html:45` | Add `<li role="option" data-value="animal-crossing">` after the Nord option |
+| `i18n.js:136–213` | Add `"animal-crossing"` key to every language in `DESIGN_THEME_LABELS` |
+| `style.css` | Append light + dark variable blocks and component overrides at end of file |
+
+---
+
+## Task 1: Register the theme slug
+
+**Files:**
+- Modify: `theme.js:1`
+- Modify: `index.html:45`
+
+- [ ] **Step 1: Add slug to DESIGN_THEMES**
+
+In `theme.js`, change line 1 from:
+```js
+const DESIGN_THEMES = ["fluent", "material-you", "terminal", "cyberpunk", "nord"]
+```
+to:
+```js
+const DESIGN_THEMES = ["fluent", "material-you", "terminal", "cyberpunk", "nord", "animal-crossing"]
+```
+
+- [ ] **Step 2: Add dropdown option in index.html**
+
+In `index.html`, after the Nord `<li>` (currently line 45):
+```html
+<li role="option" data-value="nord" aria-selected="false">
+  Nord
+</li>
+```
+add immediately after:
+```html
+<li role="option" data-value="animal-crossing" aria-selected="false">
+  动森
+</li>
+```
+
+- [ ] **Step 3: Start dev server and verify option appears**
+
+```bash
+npm start
+```
+
+Open the app in a browser. Click the design theme dropdown — "动森" should appear as a new option. Selecting it will show unstyled (inherits Fluent variables) — that's expected at this stage.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add theme.js index.html
+git commit -m "feat: register animal-crossing theme slug"
+```
+
+---
+
+## Task 2: Add i18n labels
+
+**Files:**
+- Modify: `i18n.js:136–213`
+
+- [ ] **Step 1: Add label to every language in DESIGN_THEME_LABELS**
+
+In `i18n.js`, add `"animal-crossing"` to each language object inside `DESIGN_THEME_LABELS`. The full updated constant (lines 136–214) should be:
+
+```js
+export const DESIGN_THEME_LABELS = {
+  "zh-Hans": {
+    fluent: "Fluent",
+    "material-you": "Material You",
+    terminal: "终端",
+    cyberpunk: "赛博朋克",
+    nord: "Nord",
+    "animal-crossing": "动森",
+  },
+  "zh-Hant": {
+    fluent: "Fluent",
+    "material-you": "Material You",
+    terminal: "終端",
+    cyberpunk: "賽博龐克",
+    nord: "Nord",
+    "animal-crossing": "動森",
+  },
+  en: {
+    fluent: "Fluent",
+    "material-you": "Material You",
+    terminal: "Terminal",
+    cyberpunk: "Cyberpunk",
+    nord: "Nord",
+    "animal-crossing": "Animal Crossing",
+  },
+  ja: {
+    fluent: "Fluent",
+    "material-you": "Material You",
+    terminal: "ターミナル",
+    cyberpunk: "サイバーパンク",
+    nord: "Nord",
+    "animal-crossing": "どうぶつの森",
+  },
+  ko: {
+    fluent: "Fluent",
+    "material-you": "Material You",
+    terminal: "터미널",
+    cyberpunk: "사이버펑크",
+    nord: "Nord",
+    "animal-crossing": "동물의 숲",
+  },
+  wenyan: {
+    fluent: "流光",
+    "material-you": "物材",
+    terminal: "终端",
+    cyberpunk: "赛博",
+    nord: "清寒",
+    "animal-crossing": "森友",
+  },
+  mars: {
+    fluent: "流↗光",
+    "material-you": "材↘質",
+    terminal: "終↗★端",
+    cyberpunk: "賽↘！博",
+    nord: "清↗寒★",
+    "animal-crossing": "动↗森★",
+  },
+  garbled: {
+    fluent: "◼è▦",
+    "material-you": "拷▤屯ä锟◽",
+    terminal: "¥¬▤▨¿¿",
+    cyberpunk: "◼çæ¥烫¥",
+    nord: "æ◽屯¿",
+    "animal-crossing": "ä◼▤è",
+  },
+  bin: {
+    fluent: "0101",
+    "material-you": "010101",
+    terminal: "01010101",
+    cyberpunk: "0101010101",
+    nord: "0101010",
+    "animal-crossing": "01010101",
+  },
+  meow: {
+    fluent: "喵喵",
+    "material-you": "喵喵喵",
+    terminal: "喵喵",
+    cyberpunk: "喵喵喵喵",
+    nord: "喵喵喵",
+    "animal-crossing": "喵喵喵喵",
+  },
+  emoji: {
+    fluent: "💧",
+    "material-you": "🧱",
+    terminal: "⌨️",
+    cyberpunk: "⚡",
+    nord: "❄️",
+    "animal-crossing": "🌿",
+  },
+}
+```
+
+- [ ] **Step 2: Verify labels in browser**
+
+With the dev server still running, switch language to English — the dropdown option should now read "Animal Crossing" instead of "动森". Switch to Japanese — should read "どうぶつの森". Switch to emoji — should read "🌿".
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add i18n.js
+git commit -m "feat: add animal-crossing labels for all 11 languages"
+```
+
+---
+
+## Task 3: Add CSS — light mode
+
+**Files:**
+- Modify: `style.css` (append after the Nord section, before the `@media (max-width: 600px)` block)
+
+- [ ] **Step 1: Append light-mode CSS block**
+
+At the end of the Nord section in `style.css` (before the `@media (max-width: 600px)` rule), append:
+
+```css
+/* ─── Animal Crossing — Sunny Meadow ───────────────────────── */
+html[data-design-theme="animal-crossing"] {
+  color-scheme: light;
+
+  --accent: #6dbc7e;
+  --accent-rgb: 109, 188, 126;
+  --accent-2: #5aad6d;
+  --accent-3: #4a9e5d;
+  --accent-secondary-rgb: 244, 200, 66;
+
+  --page-gradient: linear-gradient(
+    135deg,
+    #fdf6e3 0%,
+    #f5f0d8 25%,
+    #fdf6e3 50%,
+    #f8f2e0 75%,
+    #fdf6e3 100%
+  );
+  --page-texture:
+    radial-gradient(
+      circle at 20% 50%,
+      rgba(109, 188, 126, 0.08) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 80% 80%,
+      rgba(244, 200, 66, 0.06) 0%,
+      transparent 50%
+    );
+  --title-gradient: linear-gradient(
+    135deg,
+    #6dbc7e 0%,
+    #5aad6d 40%,
+    #f4c842 100%
+  );
+
+  --control-bg: rgba(255, 252, 240, 0.82);
+  --control-border: rgba(109, 188, 126, 0.35);
+  --control-inset: rgba(255, 255, 255, 0.85);
+  --control-fg: #5c4824;
+}
+
+html[data-design-theme="animal-crossing"] body {
+  color: #5c4824;
+}
+
+html[data-design-theme="animal-crossing"] .design-theme-button,
+html[data-design-theme="animal-crossing"] .theme-toggle {
+  border-radius: 14px;
+}
+
+html[data-design-theme="animal-crossing"] .card {
+  background: rgba(255, 252, 240, 0.85);
+  border: 1px solid rgba(109, 188, 126, 0.25);
+  border-radius: 16px;
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.06),
+    0 1px 2px rgba(0, 0, 0, 0.03),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+html[data-design-theme="animal-crossing"] .card::before {
+  display: none;
+}
+
+html[data-design-theme="animal-crossing"] .card.pin {
+  background: rgba(245, 242, 228, 0.88);
+}
+
+html[data-design-theme="animal-crossing"] .card h2 {
+  color: #5c4824;
+}
+
+html[data-design-theme="animal-crossing"] .card p {
+  color: #7a6040;
+}
+
+html[data-design-theme="animal-crossing"] .card:hover,
+html[data-design-theme="animal-crossing"] .card:focus {
+  color: var(--accent);
+  transform: translateY(-2px);
+  border-color: rgba(109, 188, 126, 0.45);
+  box-shadow:
+    0 8px 24px rgba(109, 188, 126, 0.2),
+    0 4px 8px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.95);
+}
+
+html[data-design-theme="animal-crossing"] .card:hover h2,
+html[data-design-theme="animal-crossing"] .card:focus h2 {
+  color: var(--accent);
+}
+
+html[data-design-theme="animal-crossing"] .card:hover p,
+html[data-design-theme="animal-crossing"] .card:focus p {
+  color: #5c4824;
+}
+
+html[data-design-theme="animal-crossing"] .beian a {
+  color: #7a6040;
+}
+
+html[data-design-theme="animal-crossing"] .beian a:hover {
+  color: var(--accent);
+}
+```
+
+- [ ] **Step 2: Verify light mode in browser**
+
+Select "Animal Crossing" / "动森" in the dropdown with light mode active. Verify:
+- Background is warm cream (not white/dark)
+- Title has green-to-yellow gradient
+- Cards are creamy with rounded corners (16px)
+- Card hover shows green glow and lifts up
+- Control buttons have 14px border radius
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add style.css
+git commit -m "feat: add animal-crossing light mode CSS"
+```
+
+---
+
+## Task 4: Add CSS — dark mode
+
+**Files:**
+- Modify: `style.css` (append immediately after the light-mode block from Task 3)
+
+- [ ] **Step 1: Append dark-mode CSS block**
+
+Immediately after the light-mode block (still before `@media (max-width: 600px)`), append:
+
+```css
+html[data-theme="dark"][data-design-theme="animal-crossing"] {
+  color-scheme: dark;
+
+  --accent: #9ed98a;
+  --accent-rgb: 158, 217, 138;
+  --accent-2: #86cb72;
+  --accent-3: #6dbc5e;
+  --accent-secondary-rgb: 245, 210, 90;
+
+  --page-gradient: #1e2d1e;
+  --page-texture:
+    radial-gradient(
+      circle at 20% 50%,
+      rgba(158, 217, 138, 0.06) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 80% 80%,
+      rgba(245, 210, 90, 0.04) 0%,
+      transparent 50%
+    );
+  --title-gradient: linear-gradient(
+    135deg,
+    #9ed98a 0%,
+    #86cb72 40%,
+    #f5d25a 100%
+  );
+
+  --control-bg: rgba(25, 40, 25, 0.82);
+  --control-border: rgba(158, 217, 138, 0.25);
+  --control-inset: rgba(255, 255, 255, 0.04);
+  --control-fg: #e8f4d8;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] body {
+  color: #e8f4d8;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card {
+  background: rgba(30, 48, 30, 0.82);
+  border: 1px solid rgba(158, 217, 138, 0.18);
+  border-radius: 16px;
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.3),
+    0 1px 2px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card::before {
+  display: none;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card.pin {
+  background: rgba(38, 58, 38, 0.88);
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card h2 {
+  color: #e8f4d8;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card p {
+  color: #b0c8a0;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover,
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus {
+  border-color: rgba(158, 217, 138, 0.45);
+  box-shadow:
+    0 8px 24px rgba(158, 217, 138, 0.2),
+    0 4px 8px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover h2,
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus h2 {
+  color: var(--accent);
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover p,
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus p {
+  color: #c8deb8;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .design-theme-list {
+  background: rgba(22, 36, 22, 0.9);
+  box-shadow:
+    0 12px 30px rgba(0, 0, 0, 0.55),
+    0 6px 12px rgba(0, 0, 0, 0.35),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a {
+  color: #b0c8a0;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a:hover {
+  color: var(--accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-design-theme="animal-crossing"] .card,
+  html[data-design-theme="animal-crossing"] .design-theme-button,
+  html[data-design-theme="animal-crossing"] .theme-toggle {
+    transition-duration: 0.01ms !important;
+    transform: none !important;
+  }
+}
+```
+
+- [ ] **Step 2: Verify dark mode in browser**
+
+Toggle to dark mode while "Animal Crossing" theme is active. Verify:
+- Background is deep forest green `#1e2d1e` (not generic dark grey)
+- Title has soft lime-to-yellow gradient
+- Cards are dark forest green with subtle lime border
+- Card hover shows lime glow
+- Toggling back to light mode restores the cream palette
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add style.css
+git commit -m "feat: add animal-crossing dark mode CSS"
+```
+
+---
+
+## Task 5: Final verification
+
+- [ ] **Step 1: Check theme persists across reload**
+
+Select "Animal Crossing" in dark mode. Reload the page. Theme and dark/light preference should both be restored from `localStorage`.
+
+- [ ] **Step 2: Check theme switching is clean**
+
+Cycle through all 6 themes (Fluent → Material You → Terminal → Cyberpunk → Nord → Animal Crossing → Fluent). No visual artifacts or broken styles should appear at any step.
+
+- [ ] **Step 3: Check forced-dark themes restore correctly**
+
+While on Animal Crossing (light mode), switch to Terminal (forces dark). Then switch back to Animal Crossing — it should restore the light mode you had before.
+
+- [ ] **Step 4: Run formatter**
+
+```bash
+npm run fmt
+```
+
+Confirm no diff beyond whitespace normalisation. Commit if formatter changed anything:
+
+```bash
+git add -p
+git commit -m "style: run prettier after animal-crossing theme"
+```