feat(design): FocusCard hero, CountdownCard, data-* palette, swipe, touch-targets
All checks were successful
Deploy / deploy (push) Successful in 3m8s
All checks were successful
Deploy / deploy (push) Successful in 3m8s
Big design pass across Home + tokens + components. — globals.css: new data-* palette (cool/warm/hot/good/info/rose/violet/mood) with theme-aware variants, .grain overlay utility, .num-display typography helper, .hit-zone 44px wrapper, .eyebrow label, .focus-card base, focus-visible outline-offset 3px, space/touch scale vars. — FocusCard.tsx: context engine — пять состояний (morning-outfit, tram-imminent, event-upcoming, countdown, bill-due, night, quiet). Auto-rotates by hour + live data. 96px display numbers, accent-mixed surfaces, grain overlay. — CountdownCard.tsx + /api/countdowns: rotating 8s list, persistent /data/tablet-countdowns.json, full CRUD. Default seeded with Токио. — HomeTab: replaced plain Weather hero with FocusCard, added Row 4 with CountdownCard. Pulls trams + countdowns for the Focus context. — Swipe between tabs: pointer-level detection on <main>, data-swipe-ignore bails out inside modals + note swipe-to-delete + voice overlay. — Touch-target sweep: TopBar HA dot → 44px hit-zone, sensor chip 44px min-height, forecast day buttons 92px min, DeviceCard toggle 60x36, CalendarTab prev/next/close/list all 44x44, NotesTab buttons 44x44, TimerHomeWidget + 44x44, WeatherDayModal chevrons 48x48, close 48. — Hardcoded hex → data-* tokens: TopBar sensors, TransportWidget routes (via color-mix), DeviceCard full rewrite (per-kind accent, glass removed in favor of color-mix surfaces + proper mock-state treatment), NotesTab palette refreshed to match dark theme. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -125,15 +125,15 @@ export default function TimerHomeWidget() {
|
||||
onClick={() => setModal({ type: 'create' })}
|
||||
aria-label="Новый таймер"
|
||||
style={{
|
||||
width: 32, height: 32, borderRadius: 10,
|
||||
background: 'color-mix(in srgb, #818cf8 12%, var(--surface-2))',
|
||||
border: '1px solid color-mix(in srgb, #818cf8 30%, var(--border-subtle))',
|
||||
color: '#a5b4fc',
|
||||
width: 44, height: 44, borderRadius: 14,
|
||||
background: 'color-mix(in srgb, var(--accent) 14%, var(--surface-2))',
|
||||
border: '1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle))',
|
||||
color: 'var(--accent)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<Plus size={15} />
|
||||
<Plus size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user