Kaloyan DanchevandClaude Opus 4.6
86191ba5f3
Panel fixes: tall card row_span, room tab styling, vacuum card image+value, AC airflow labels, AC fan speed sections (auto 3-btn + manual 5-step slider), light subtitle fallback, curtain pane dividers, dimmable light presets, LED panel brightness + reorder. New assets: 34 ui-icons (climate modes, cover, effects, battery, led-strip, switch states), 3 logos, 90 app surface PNGs, design system specs (components, ux-mechanics, tokens). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
102 lines
7.5 KiB
Markdown
102 lines
7.5 KiB
Markdown
# Luma Home — components
|
||
|
||
Layout and look of every building block. All sizes are logical px on the 1920 × 1080 canvas;
|
||
named values are in `tokens.json`. Behaviour lives in `ux-mechanics.md` — this file only says
|
||
what things look like. Each section names the screen render to compare against.
|
||
|
||
## Screen shell
|
||
Render: `screens/Main.png`, `screens/Home.png`
|
||
|
||
| Part | Spec |
|
||
|---|---|
|
||
| Background | Wallpaper photo + scrim `color.background.scrim` (8,11,18 @ 80%). |
|
||
| Clock | x 84, centred in the 72 px top bar at y 36; 20 px / 500. |
|
||
| Top nav | Centred pill, fill `nav.pill`, 6 px padding, items 10 × 28 px padding, 20 px. Active item: fill `nav.activeTab`, ink `text.tabActiveInk`, 600. |
|
||
| Settings button | 56 px circle, right edge at x 1836. |
|
||
| Room tabs | Row at y 124, height 60, gap 8. Tab padding 10 × 22, 17 px. Active: fill `nav.activeRoom`, 600. Inactive ink `nav.inactive`. |
|
||
| Grid | x 84, y 206, 1752 × 756; 3 rows of 240, gap 18; 4 columns of 424 or 3 of 572 (`grid` tokens). |
|
||
| Hint bar | x 84, 30 px from the bottom; items 40 px apart. Key cap: 2 px border white 60%, radius 6, 11 px / 700, padding 2 × 8. Label 14 px / 500, white 80%. |
|
||
|
||
## DeviceCard (1×1)
|
||
Render: `screens/Main.png`, `screens/*States.png`
|
||
|
||
- Box: fills the cell; radius 22; padding 18; border 2 px; fill/border/shadow from `color.card` (focus variants when focused).
|
||
- Glow (on): radial gradient at (42, 42) of the accent at 38% → transparent at 72%.
|
||
- **Top row** (gap 14): 48 px icon circle (24 px icon) · name 19 px / 600, single line, ellipsis · value 20 px / 700, right-aligned.
|
||
- **Middle band** (flex, margin 12 top / 10 bottom), one of:
|
||
- `spark` — 64 px tall polyline, 3 px stroke in the accent (grey `lineOff` when off), labels "24 h" / "now" 12 px below.
|
||
- `bar` — 12 px track `barTrack`, radius 6, fill = accent at the level %.
|
||
- `swatch` — 34 px strip, radius 10: solid colour or the effect gradient.
|
||
- `curtain` — 5 px rail, three window panes (2 px outline white 22%), two fabric panels each `(100 − position) / 2` % wide with a 4 px edge in the accent.
|
||
- `image` — appliance photo on the **right** (max 120 px, square, contain), facts on the left: label 12 px white 60%, value 14 px / 700 (highlight = accent, `warn` = `accent.warning`).
|
||
- none — empty band (on/off lights, switches).
|
||
- **Warning subtitle** (`subWarn`): amber `#F2B84B`, 600 — battery low, window open, dock needs attention.
|
||
- **Offline**: whole card at 50 % opacity, value "Offline".
|
||
- **Subtitle**: 14 px / 500, white 72%, single line, at the bottom.
|
||
- 3-column grid: same layout in the 572 px cell.
|
||
|
||
## WeatherCard
|
||
Render: `screens/WeatherStates.png`
|
||
|
||
- 1×1: weather icon, current temperature (large), condition, humidity, wind, high/low.
|
||
- 1×2 (498 tall): the 1×1 content on top, the **5-day forecast** below (day, icon, low–high).
|
||
|
||
## MediaCard
|
||
Render: `screens/MediaStates.png`, `screens/MediaSpec.png`
|
||
|
||
- Background: card fill + purple radial glow (128, 96, 192 @ 42%) from the top-left.
|
||
- **1×1**: 84 px artwork (radius 10) · status "Playing · Spotify" 13 px / 600 `accent.mediaLabel` with the volume readout right-aligned on the same line (15 px volume icon + "24%" 14 px / 700) · title 19 px / 700 · artist 15 px.
|
||
- **1×2**: 220 px artwork centred (radius 14) · status + volume line (20 px tall) · title 24 px · artist 17 px · elapsed / remaining 13 px under the progress bar.
|
||
- Progress: 4 px track white 22%, fill white.
|
||
- Buttons (gap 26, centred): Previous 52 px · Play/Pause 62 px filled `accent.media` with dark icon · Next 52 px; idle buttons white 10%.
|
||
- Focus: ring on the focused button (4 px, offset 4, dark gap), never on the card.
|
||
- Seeking: the held button turns white with dark icon; 16 px playhead dot with a 4 px purple halo; white bubble 14 px / 700 above it.
|
||
- Volume change: readout becomes a white pill (dark ink, padding 0 8, radius 9–10).
|
||
|
||
## VacuumCard
|
||
Render: `screens/VacuumStates.png`
|
||
|
||
DeviceCard with the `image` band: photo `assets/roborock-s7.png` (transparent cut-out, in this folder).
|
||
Cleaning facts: Mode (highlighted), Now in. Docked facts: Battery, Water · clean / dirty.
|
||
|
||
## RoomCard
|
||
Render: `screens/RoomStates.png`, `screens/Home.png`
|
||
|
||
- Box: as DeviceCard. Background: the Home Assistant area photo (fetched from HA, never bundled — `ux-mechanics.md` §B11), cover-cropped, under a gradient
|
||
`rgba(8,11,18,.78) 0% → 0 at 32% → 0 at 40% → .84 at 66% → .94 at 100%`. Lights off: photo `brightness(0.45) saturate(0.2)`.
|
||
No photo: glass fill + gold glow while any light is on.
|
||
- Top row as DeviceCard; text gets a soft shadow `0 1px 6px rgba(0,0,0,.75)` over a photo.
|
||
- Bottom line (8 px above the subtitle): three stats, gap 22, each a 20 px icon + value 18 px / 700. Colours: lights `accent.light`, curtains `accent.curtain` (white 75 % when closed), air `aqGood` / `aqFair` / `aqPoor`.
|
||
- Subtitle 14 px, white 78 %; warnings `warning` 600.
|
||
|
||
## Panel (shared)
|
||
Renders: every `*States.png` (right side)
|
||
|
||
- 620 × 1080 at the right edge, radius 28, fill `panel.fill`, shadow `shadow.panel`, padding 56 / 56 / 48.
|
||
- Header: eyebrow (room) 16 px white 72% · 56 px icon circle (accent fill, 30 px icon) · title 34 px / 700 · state line 18 px / 600 in the accent.
|
||
- Sections: label 19 px / 600, 44 px below the header, 40 px between sections, control 14 px below its label.
|
||
- Slider: 72 px tall, radius 18, track white 12%, fill accent, value 28 px / 700 inside on the left. Help line 15 px white 74% below.
|
||
- Buttons / presets: 64 px tall, radius 16, gap 12, 20 px / 600, fill white 10%. Selected: accent at 26% fill + 3 px inset accent edge (or solid accent with dark ink for the primary choice).
|
||
- Focus inside panels: 4 px white ring, offset 5, with a 5 px dark gap.
|
||
- Hint bar pinned to the bottom of the panel (same style as the screen hint bar).
|
||
|
||
### Panel contents
|
||
| Panel | Sections (top → bottom) | Render |
|
||
|---|---|---|
|
||
| Dimmable light | Brightness · Presets (Off, 25, 50, 100 %) | `LightStates.png` |
|
||
| Colour light | Brightness · Light type (White / Colour) · White temperature or Hue · Swatches | `LightColorStates.png` |
|
||
| LED / TV lights | Brightness · Light · Temperature or Hue · White or Colour presets · Effects (6 pinned + All effects) | `LedStates.png` (colour, white, all effects) |
|
||
| All effects | Pinned group (numbered, "Not on panel" tag after 6) · All effects A–Z; gold star = pinned | `LedStates.png` (right) |
|
||
| AC | Target · Mode (5 icons) · Fan speed · auto (Auto, Quiet, Turbo) · Fan speed · manual (5 steps) · Up–down airflow · Left–right airflow (Swing + 5, icon-only) | `ClimateStates.png` |
|
||
| Heating | Target dial (with room temp) · Mode (Off / Heat) · Preset · Temperature sensor (thermostat) · Settings toggles · battery / info line | `HeatingStates.png` |
|
||
| Curtain | Window drawing + position · Open / Stop / Close · Presets (Open, 60, 45, 30, Closed) | `CurtainStates.png` |
|
||
| Weather | Now · Humidity · Wind · Next hours · Next days | `WeatherStates.png` |
|
||
| Media | Now playing · Play on · Up next · Search | `MediaStates.png` |
|
||
| Room quick panel | Header (temperature · humidity · air) · Lights with All off + one switch row each · Curtains rows with Open / Stop / Close · Climate rows with switches | `RoomStates.png` |
|
||
| Vacuum | Rooms (3-column grid, check + green edge when picked) · Mode · Routines + Dock · primary "Clean N rooms" (solid green, 64 px) | `VacuumStates.png` |
|
||
|
||
## Icons
|
||
`icons/` — 58 single-colour SVGs (Uicons Regular Rounded + two custom), tinted at render time:
|
||
dark ink `#15181E` on an accent circle when on, white 80% on a grey circle when off.
|
||
See `icons/README.md` for the name map and the required attribution.
|