feat(ui): m5 shard-website design pass #10

wtclaude · 2026-07-20T06:52:47Z

wtclaude commented

2026-07-20 06:52:47 +00:00

M5 — shard-website design pass

Restyles every screen with the shard-website theme from the Runic Gateway Screens design (docs/android/PLAN.md §M5): deep blue-black surfaces, a slate-blue accent, parchment serif body copy, and an engraved Cinzel serif display face. The app is now dark-only, matching the design (all mockups are dark).

Because the ~20 M0–M4 screens already route styling through MaterialTheme tokens, most of the restyle lands in the theme layer and propagates automatically; a small set of reusable components covers the recurring motifs.

Theme layer

Color.kt — placeholder purple palette → named shard tokens (surfaces, lines, text, accent/CTA, semantic pills).
Theme.kt — one dark ColorScheme mapped onto the palette + 8/12/16 dp shapes; light branch dropped; optional per-shard brand-accent seeding retained (a shard's accent still tints primary/secondary).
Type.kt — full type scale: Cinzel display/headline/title, serif body, letter-spaced sans labels/buttons.
Font.kt + res/font/cinzel_variable.ttf — Cinzel display family, pinned to 500/600/700 via FontVariation. Font is SIL OFL (app/licenses/Cinzel-OFL.txt).

Shared components — `ui/components/ThemeComponents.kt`

StatusPill (semantic tones), OnlineDot, SectionLabel, FeatureCard (gradient), StatBar. Adopted across Home (status card), Account (role + 2FA pills), Shard hub (online banner + section labels), Champs / Characters / Falling-houses (status pills), and the character sheet (vitals + skills meters).

Shell

Dark top-bar + drawer styling (Cinzel uppercase title, slate selected-item); dark launch theme + light system-bar icons so the first frame matches (no white flash).

Verification

./gradlew :app:assembleDebug :app:testDebugUnitTest -Pksp.incremental=false → BUILD SUCCESSFUL, unit tests green.
⚠️ Not yet eyeballed on an emulator — visual QA against the mockup (Connect → Home → Shard hub → Champs → Character sheet → Account) is worth a pass before merge.

Notes

No ViewModel / repository / DTO / API changes — pure presentation.
Companion docs update (docs/ repo: mark M5 done) to follow separately.

AI-assisted contribution disclosure: this PR was authored with Claude Code (Claude Opus 4.8). Commits carry a Co-Authored-By: Claude trailer. Please review accordingly.

🤖 Generated with Claude Code

## M5 — shard-website design pass Restyles **every** screen with the shard-website theme from the *Runic Gateway Screens* design (`docs/android/PLAN.md` §M5): deep blue-black surfaces, a slate-blue accent, parchment serif body copy, and an engraved **Cinzel** serif display face. The app is now **dark-only**, matching the design (all mockups are dark). Because the ~20 M0–M4 screens already route styling through `MaterialTheme` tokens, most of the restyle lands in the theme layer and propagates automatically; a small set of reusable components covers the recurring motifs. ### Theme layer - **`Color.kt`** — placeholder purple palette → named shard tokens (surfaces, lines, text, accent/CTA, semantic pills). - **`Theme.kt`** — one dark `ColorScheme` mapped onto the palette + 8/12/16 dp shapes; light branch dropped; optional per-shard **brand-accent seeding** retained (a shard's accent still tints primary/secondary). - **`Type.kt`** — full type scale: Cinzel display/headline/title, serif body, letter-spaced sans labels/buttons. - **`Font.kt` + `res/font/cinzel_variable.ttf`** — Cinzel display family, pinned to 500/600/700 via `FontVariation`. Font is **SIL OFL** (`app/licenses/Cinzel-OFL.txt`). ### Shared components — `ui/components/ThemeComponents.kt` `StatusPill` (semantic tones), `OnlineDot`, `SectionLabel`, `FeatureCard` (gradient), `StatBar`. Adopted across Home (status card), Account (role + 2FA pills), Shard hub (online banner + section labels), Champs / Characters / Falling-houses (status pills), and the character sheet (vitals + skills meters). ### Shell Dark top-bar + drawer styling (Cinzel uppercase title, slate selected-item); dark launch theme + light system-bar icons so the first frame matches (no white flash). ### Verification - `./gradlew :app:assembleDebug :app:testDebugUnitTest -Pksp.incremental=false` → **BUILD SUCCESSFUL**, unit tests green. - ⚠️ Not yet eyeballed on an emulator — visual QA against the mockup (Connect → Home → Shard hub → Champs → Character sheet → Account) is worth a pass before merge. ### Notes - No ViewModel / repository / DTO / API changes — pure presentation. - Companion docs update (`docs/` repo: mark M5 done) to follow separately. --- **AI-assisted contribution disclosure:** this PR was authored with **Claude Code** (Claude Opus 4.8). Commits carry a `Co-Authored-By: Claude` trailer. Please review accordingly. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

wtclaude added 1 commit 2026-07-20 06:52:48 +00:00

feat(ui): m5 shard-website design pass

PR Checks / android-build (pull_request) Successful in 10m6s

Details

52e06da8fc

Restyle every Android screen with the shard-website theme from the
"Runic Gateway Screens" design (docs/android/PLAN.md §M5): deep blue-black
surfaces, a slate-blue accent, parchment serif body copy, and an engraved
Cinzel serif display face. The app is now dark-only, matching the design.

Theme layer (propagates to all token-based screens):
- Color.kt: replace the placeholder purple palette with named shard tokens.
- Theme.kt: one dark color scheme mapped onto the palette + 8/12/16dp shapes;
  drop the light branch; keep optional per-shard brand-accent seeding.
- Type.kt: full type scale — Cinzel display/headline/title, serif body,
  letter-spaced sans labels/buttons.
- Font.kt + res/font/cinzel_variable.ttf (SIL OFL, app/licenses/Cinzel-OFL.txt):
  the Cinzel display family, pinned to 500/600/700 via FontVariation.

Shared components (ui/components/ThemeComponents.kt): StatusPill (semantic
tones), OnlineDot, SectionLabel, FeatureCard (gradient), StatBar — adopted
across Home, Account, Shard hub, Champs, Characters, Houses, and the
character sheet (vitals/skills meters).

Shell: dark top-bar + drawer styling; dark launch theme and light system-bar
icons so the first frame matches (no white flash).

Build (assembleDebug) and unit tests green.

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NgyHnrNa8WwG3doxvxjuCr

whitlocktech approved these changes 2026-07-20 06:55:56 +00:00

whitlocktech scheduled this pull request to auto merge when all checks succeed 2026-07-20 06:56:01 +00:00

wtclaude referenced this issue from a commit

2026-07-20 06:56:32 +00:00

docs(android): record M5 (design pass) landed

whitlocktech merged commit e497e6c8a7 into main

2026-07-20 07:48:32 +00:00

whitlocktech deleted branch feat/m5-design-pass

2026-07-20 07:48:33 +00:00

whitlocktech referenced this issue from a commit

2026-07-20 07:48:34 +00:00

Merge pull request 'feat(ui): m5 shard-website design pass' (#10) from feat/m5-design-pass into main

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: RunicGateway/Android-app#10