replica(uhr): design tokens and component specs (39 pairs AA)

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-17 14:59:51 +02:00
parent c163a6d578
commit 887299a3a7
4 changed files with 289 additions and 0 deletions
@@ -0,0 +1,79 @@
+# Komponenten: Uhr (Compose, Material 3 Expressive)
+
+Tokens: `tokens.json` → `Tokens.kt` (`gen_theme.py`). On Android 12+ the accent roles come from dynamic colour (wallpaper), the rest from tokens.
+Icons: Material Symbols Rounded (Apache 2.0). Clock faces, launcher icon and bundled sounds are our own. All labels written fresh, in German.
+
+```
+BottomNav
+  items     Wecker, Uhr, Timer, Stoppuhr, Schlafenszeit (icon + label)
+  states    selected: pill indicator 64×32 (nav-indicator) behind the icon, label bold
+  a11y      NavigationBar items with role tab, selected state announced
+  used on   S01, S06, S08, S09, S10
+
+TopBar
+  content   screen title (title 22sp) left, overflow menu (Einstellungen, Bildschirmschoner) right
+  used on   all tabs
+
+AlarmCard
+  collapsed label (label 14sp, muted) + chevron in a small tonal circle; big time "6:00" (alarm-time 56sp/600) + "AM" (alarm-ampm) when 12h;
+            bottom row: next ring text ("Morgen", "Heute", "Mo, Di, Mi") + Switch
+  expanded  label field with tag icon, time, day text + switch, day chips row, rows: Pausieren (+), Ton (name), Vibration (check), Löschen
+  states    on, off (time text-off), snoozed ("Schlummert bis 7:10" chip), skipping ("Übersprungen bis …"), expanding (spring)
+  tokens    card / dark-card, radius card 28, padding 20, gap 8
+  a11y      card is one button "Wecker 6 Uhr, Morgen, an"; switch separate; expand state announced
+  used on   S01, S02
+
+DayChips
+  7 circles 36dp, letters by locale and week start; selected chip-on, unselected outline
+  a11y      toggleable, full weekday name
+  used on   S02, S10
+
+Fab
+  96dp circle, fab colour, "+" icon; centred above the nav bar
+  used on   S01, S06, S08
+
+TimePicker
+  M3 TimePicker dial with toggle to TimeInput; 24h by system setting
+  used on   S03, S10
+
+SoundPicker (S04)
+  sections  Eigene Töne (picked files, + "Datei hinzufügen"), Wecktöne (system), Mitgeliefert (bundled); radio list, tap previews, playing shows equalizer icon
+  states    playing, selected, missing file (fallback note)
+
+RingingScreen (S11)
+  bg        ring-bg (or dynamic tertiary container), full screen over lock screen
+  content   time (ringing 104sp, light), label; slide control at the bottom
+  SlideToAct  track pill (ring-track) with "Schlummern" left, "Stopp" right, thumb circle with alarm icon in the middle;
+              drag past 40 % to act, spring back otherwise; tap the side labels also works (accessibility)
+  a11y      custom actions Schlummern / Stopp; volume keys per settings
+
+TimerCard
+  content   label, ring (timer-track / timer-progress, 6dp) with remaining time inside (timer-time) and reset icon, +1:00 secondary pill, play/pause primary pill, close ×
+  states    running (ring shrinks), paused (time blinks), ringing (pulsing, time counts up negative), finished
+  used on   S08
+
+Keypad
+  display   "00h 00m 00s", typed digits fill from the right; 3×4 keys circle 72dp, 00 and backspace; start FAB appears when not empty
+  used on   S08
+
+Stopwatch (S09)
+  time      mm:ss.cc (stopwatch 72sp, tabular), hours appear when needed
+  buttons   full-width pills, primary (stop/start: stop colour), secondaries (Zurücksetzen, Runde: secondary-pill)
+  laps      list "Runde 3  00:12.34  01:02.56", fastest/slowest marked
+  states    idle (Start only), running (Stopp, Runde), stopped (Start, Zurücksetzen)
+
+ClockHeader (S06)
+  big time clock-big with optional seconds, date, next alarm line; analog face variant (own design: round face, accent hour hand, light minute hand, dot)
+CityCard
+  name, "Morgen · +7 Std.", time; swipe to delete, long press to reorder
+  used on   S06
+
+SettingsKit
+  same grouped tiles as Wetter (SettingsGroup / Item / Switch / Choice)
+
+Notifications
+  upcoming (Jetzt beenden), snoozed (Beenden), missed, timer running (chronometer, Pause, +1:00), stopwatch running (chronometer, Runde, Pause)
+
+Widgets
+  Digital (TextClock big + date + next alarm), Analog (own face as AnalogClock drawables), Next alarm pill; style options like Wetter (palette, theme, opacity)
+```