diff --git a/web/docs/code-standards.md b/web/docs/code-standards.md index f282256..1442933 100644 --- a/web/docs/code-standards.md +++ b/web/docs/code-standards.md @@ -52,7 +52,7 @@ Use the `.svelte.js` extension for modules that export rune-based reactive state ### Gradients - Player page: `from-indigo-500 to-purple-500`. - Host page: `from-orange-500 to-red-500`. -- Completed rows: `bg-emerald-100` + `text-emerald-500`. +- Completed rows: `bg-sky-100` + `text-sky-700`. - Shadows: `shadow-lg shadow-indigo-500/25`. ## localStorage Patterns diff --git a/web/docs/design-guidelines.md b/web/docs/design-guidelines.md index ffb79cd..4db7522 100644 --- a/web/docs/design-guidelines.md +++ b/web/docs/design-guidelines.md @@ -19,24 +19,26 @@ hierarchy via solid weights; emphasis via type weight + scale. - Semantic: festive, energetic **Draw / Go** -- Solid: emerald-600 `#059669` (light) / emerald-400 `#34D399` (dark) -- Use for: "Xổ số", "Bắt đầu", master grid token ring (≥50) +- Solid: sky-700 `#0369A1`, with white text at WCAG AA contrast +- Use for: "Xổ số" and "Bắt đầu" + +**Active controls and called numbers** +- Rings: sky-600 `#0284C7` (light) / sky-400 `#38BDF8` (dark) +- Token text: sky-700 `#0369A1` on the light amber token fill +- Use for: enabled switches and called-number rings **Stop / Active-running** - Solid: rose-600 (same as primary). Distinguished by context (only appears as the running auto-call toggle). -**Master low-half marker (≤49)** +**Master called-number marker** - Solid: sky-600 `#0284C7` (light) / sky-400 `#38BDF8` (dark) -- Paired with emerald-600 (≥50) for an elegant cool/warm binary -- Replaces the previous pink — kept clearly distinct from the rose - primary so the eye doesn't read "low-number" and "primary action" as - the same brand color. +- All called numbers use one light-blue treatment for a simpler board. **Success (Completed Rows)** -- Background: emerald-100 (light) / emerald-900/60 (dark) -- Text: emerald-700 (light) / emerald-200 (dark) -- Slash: solid emerald-600 stroke +- Background: sky-100 (light) / sky-900/60 (dark) +- Text: sky-700 (light) / sky-200 (dark) +- Slash: solid sky-600 stroke **Attention (Waiting Toast / "Chờ" ring)** - Background: amber-500/95 (toast); amber-500/45→0.85 inset ring (label) @@ -145,7 +147,7 @@ to a darker step (`-700`). @@ -175,7 +177,7 @@ on any cell aspect ratio; `vector-effect="non-scaling-stroke"` keeps the visual width constant. - Standard slash: `stroke: #ef4444` (red-500) -- Winning-row slash (in `.cross-slash-win`): `stroke: #10b981` (emerald-500) +- Winning-row slash (in `.cross-slash-win`): `stroke: #0284c7` (sky-600) - Draw animation: `stroke-dashoffset` 200→0 over 200ms (skipped under `prefers-reduced-motion`) @@ -242,7 +244,7 @@ Keep emojis decorative only. Functional UI uses SVG glyphs. `aria-label="Số {n}, đã đánh dấu"` and `aria-pressed`. - Focus states: `focus:ring-2 focus:ring-rose-400` (interactive controls). -- Contrast: Tailwind slate/rose/amber/emerald combos meet WCAG AA; +- Contrast: Tailwind slate/rose/amber/sky combos meet WCAG AA; text-on-button pairs at 4.5:1 minimum. - Dark mode: respects `prefers-color-scheme`, not forced. - SVG glyphs: Simple, high-contrast shapes; keyboard-navigable via diff --git a/web/docs/project-overview-pdr.md b/web/docs/project-overview-pdr.md index 759286c..9c0981d 100644 --- a/web/docs/project-overview-pdr.md +++ b/web/docs/project-overview-pdr.md @@ -32,8 +32,8 @@ That format is intentionally out of scope. may keep playing further rows (game does not end). - **Waiting state**: when a row needs only 1 number, app announces **"Chờ N"**. - **Host (quản trò)** draws numbers from a shuffled 1–90 deck, tracks them on - a master board with circular tokens (pink ring for 1–49, green for 50–90, - cream fill on called, dim on uncalled, red ring + scale on the most + a master board with circular tokens (light-blue ring and cream fill when + called, dim when uncalled, red ring + scale on the most recent draw), and may also play their own card. - **Settings**: gear icon in headers opens a modal with 5 fieldsets: - Giao diện: theme switcher (auto / light / dark; auto mirrors OS pref) @@ -129,7 +129,7 @@ State is entirely client-side. Each card / panel instance uses a unique localSto - **Wordmark gradient**: rose → amber → rose, italic + drop-shadow — vintage carnival marquee feel. - **Player accent**: indigo → purple (primary brand, positive action). - **Host accent**: orange (subordinate to wordmark; not gradient). -- **Completed rows**: emerald (success indicator). +- **Completed rows**: sky blue (success indicator). - **Waiting toast**: amber (attention, ephemeral). - **Emojis**: 🎉 ✨ 🎊 🥳 ❤️ (celebration, joy). Confetti rain on 3rd+ bingo per card. - **Haptic**: 10 ms vibration on cell tap (mobile only, where supported).