daniil/smart-home-tablet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(design): FocusCard hero, CountdownCard, data-* palette, swipe, touch-targets
All checks were successful
Deploy / deploy (push) Successful in 3m8s
Details

Browse Source 
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:
Cosmo
2026-04-23 18:24:23 +00:00
parent f78daffd5b
commit e328055851
13 changed files with 1146 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
app/globals.css
View File

@@ -26,11 +26,32 @@
--text-secondary: rgba(255, 255, 255, 0.6);
--text-tertiary: rgba(255, 255, 255, 0.38);
/* Accents */
/* Accents — UI */
--accent: #818cf8;
--accent-strong: #6366f1;
--accent-secondary: #22d3ee;
--accent-glow: rgba(129, 140, 248, 0.22);
/* Data palette — semantic, theme-aware */
--data-cool: #38bdf8; /* небо, влажность, охлаждение */
--data-info: #60a5fa; /* ссылки, second-accent */
--data-good: #34d399; /* успех, здоровье, streak */
--data-warm: #fbbf24; /* свет, тепло, утро */
--data-hot: #fb923c; /* обострение, urgent-minor */
--data-danger: #f87171; /* критичное, истёк, ошибка */
--data-rose: #f472b6; /* Света, романтика */
--data-violet: #a78bfa; /* Cosmo, индиго-вариант */
--data-mood: #8b5cf6; /* секреты, события 2-го уровня */
/* Soft backgrounds for data (color-mix with surface-2) */
--data-cool-bg: color-mix(in srgb, var(--data-cool) 12%, var(--surface-2));
--data-good-bg: color-mix(in srgb, var(--data-good) 12%, var(--surface-2));
--data-warm-bg: color-mix(in srgb, var(--data-warm) 12%, var(--surface-2));
--data-hot-bg: color-mix(in srgb, var(--data-hot) 14%, var(--surface-2));
--data-danger-bg: color-mix(in srgb, var(--data-danger) 12%, var(--surface-2));
--data-rose-bg: color-mix(in srgb, var(--data-rose) 12%, var(--surface-2));
--data-violet-bg: color-mix(in srgb, var(--data-violet) 12%, var(--surface-2));
/* Brand gradients */
--gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
--gradient-warm: linear-gradient(135deg, #f59e0b, #ef4444);
@@ -54,6 +75,18 @@
--radius-lg: 22px;
--radius-xl: 28px;
/* Layout rhythm */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 22px;
--space-6: 28px;
/* Touch */
--touch-min: 44px;
--touch-comfy: 56px;
/* Legacy aliases */
--sidebar-bg: var(--bg);
--card-bg: var(--surface-1);
@@ -84,9 +117,30 @@
--text-tertiary: rgba(15, 20, 40, 0.38);
--accent: #5b63e0;
--accent-strong: #4f46e5;
--accent-secondary: #0891b2;
--accent-glow: rgba(91, 99, 224, 0.14);
/* Data palette — slightly darker in light theme for contrast */
--data-cool: #0284c7;
--data-info: #2563eb;
--data-good: #059669;
--data-warm: #d97706;
--data-hot: #ea580c;
--data-danger: #dc2626;
--data-rose: #db2777;
--data-violet: #7c3aed;
--data-mood: #6d28d9;
/* Soft backgrounds — lighter mix for light theme */
--data-cool-bg: color-mix(in srgb, var(--data-cool) 9%, var(--surface-1));
--data-good-bg: color-mix(in srgb, var(--data-good) 9%, var(--surface-1));
--data-warm-bg: color-mix(in srgb, var(--data-warm) 9%, var(--surface-1));
--data-hot-bg: color-mix(in srgb, var(--data-hot) 10%, var(--surface-1));
--data-danger-bg: color-mix(in srgb, var(--data-danger) 9%, var(--surface-1));
--data-rose-bg: color-mix(in srgb, var(--data-rose) 9%, var(--surface-1));
--data-violet-bg: color-mix(in srgb, var(--data-violet) 9%, var(--surface-1));
--shadow-sm: 0 1px 2px rgba(15, 20, 40, 0.05);
--shadow-md: 0 2px 6px rgba(15, 20, 40, 0.06), 0 12px 28px -8px rgba(15, 20, 40, 0.1);
--shadow-lg: 0 4px 10px rgba(15, 20, 40, 0.06), 0 24px 60px -12px rgba(15, 20, 40, 0.14);
@@ -112,6 +166,41 @@ html, body {
#__next, main { height: 100%; }
/* Better tabular numbers across the app */
.num, .num-display {
font-variant-numeric: tabular-nums slashed-zero;
font-feature-settings: "tnum", "zero";
}
.num-display {
letter-spacing: -0.02em;
font-weight: 800;
line-height: 0.95;
}
/* ——————————————————————————————
Grain overlay
——— subtle SVG-noise; cheap, no image asset needed
—————————————————————————————— */
.grain {
position: relative;
}
.grain::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
background-size: 120px 120px;
}
.light .grain::after {
opacity: 0.05;
mix-blend-mode: multiply;
filter: invert(1);
}
/* ——————————————————————————————
Aurora
—————————————————————————————— */
@@ -178,6 +267,23 @@ html, body {
box-shadow: var(--shadow-lg);
}
/* Focus-card styling — for the context-aware hero */
.focus-card {
position: relative;
background: var(--surface-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.focus-card-accent::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, var(--accent-glow), transparent 60%);
pointer-events: none;
}
.glass-card {
background: var(--surface-1);
border: 1px solid var(--border-subtle);
@@ -186,6 +292,32 @@ html, body {
}
.glass-card:hover { background: var(--surface-hover); }
/* Hairline divider helper */
.divider {
height: 1px;
width: 100%;
background: var(--hairline);
}
/* Chip / hit-zone — wraps small icons into 44px tap surface */
.hit-zone {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--touch-min);
min-height: var(--touch-min);
border-radius: 12px;
}
/* Small uppercase label */
.eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.gradient-text {
background: var(--gradient-primary);
-webkit-background-clip: text;
@@ -205,7 +337,8 @@ button {
}
button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
outline-offset: 3px;
border-radius: 14px;
}
::-webkit-scrollbar { width: 6px; height: 6px; }