replica(uhr): design tokens and component specs (39 pairs AA)
Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,106 @@
|
||||
// Generated from tokens.json by gen_theme.py. Do not edit by hand.
|
||||
package app.uhr.ui.theme
|
||||
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.text.TextStyle
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
|
||||
object WColor {
|
||||
val bg = Color(0xFFF8F9FF)
|
||||
val surface = Color(0xFFFFFFFF)
|
||||
val card = Color(0xFFEEF0F6)
|
||||
val cardHigh = Color(0xFFE2E5EC)
|
||||
val border = Color(0xFFC3C6CF)
|
||||
val borderInput = Color(0xFF73777F)
|
||||
val text = Color(0xFF191C20)
|
||||
val textMuted = Color(0xFF43474E)
|
||||
val textOff = Color(0xFF5C6068)
|
||||
val accent = Color(0xFF2F5EA8)
|
||||
val onAccent = Color(0xFFFFFFFF)
|
||||
val accentContainer = Color(0xFFD6E3FF)
|
||||
val onAccentContainer = Color(0xFF001B3E)
|
||||
val fab = Color(0xFFA8C7FA)
|
||||
val onFab = Color(0xFF0B2A55)
|
||||
val chipOn = Color(0xFF2F5EA8)
|
||||
val onChipOn = Color(0xFFFFFFFF)
|
||||
val secondaryPill = Color(0xFFDFE2EB)
|
||||
val onSecondaryPill = Color(0xFF191C20)
|
||||
val stop = Color(0xFFFFD8E4)
|
||||
val onStop = Color(0xFF4A1426)
|
||||
val danger = Color(0xFFBA1A1A)
|
||||
val nav = Color(0xFFECEEF4)
|
||||
val navIndicator = Color(0xFFD6E3FF)
|
||||
val darkBg = Color(0xFF111318)
|
||||
val darkSurface = Color(0xFF111318)
|
||||
val darkCard = Color(0xFF1D2024)
|
||||
val darkCardHigh = Color(0xFF272A2F)
|
||||
val darkBorder = Color(0xFF43474E)
|
||||
val darkBorderInput = Color(0xFF8D9199)
|
||||
val darkText = Color(0xFFE2E2E9)
|
||||
val darkTextMuted = Color(0xFFC3C6CF)
|
||||
val darkTextOff = Color(0xFF9A9EA6)
|
||||
val darkAccent = Color(0xFFA8C7FA)
|
||||
val darkOnAccent = Color(0xFF062E6F)
|
||||
val darkAccentContainer = Color(0xFF244A80)
|
||||
val darkOnAccentContainer = Color(0xFFD6E3FF)
|
||||
val darkFab = Color(0xFFA8C7FA)
|
||||
val darkOnFab = Color(0xFF062E6F)
|
||||
val darkChipOn = Color(0xFFA8C7FA)
|
||||
val darkOnChipOn = Color(0xFF062E6F)
|
||||
val darkSecondaryPill = Color(0xFF3A3D43)
|
||||
val darkOnSecondaryPill = Color(0xFFE2E2E9)
|
||||
val darkStop = Color(0xFFF2B8C9)
|
||||
val darkOnStop = Color(0xFF4A1426)
|
||||
val darkDanger = Color(0xFFFFB4AB)
|
||||
val darkNav = Color(0xFF1D2024)
|
||||
val darkNavIndicator = Color(0xFF3A3F47)
|
||||
val ringBg = Color(0xFF1E5A52)
|
||||
val ringOn = Color(0xFFB4F1E6)
|
||||
val ringTrack = Color(0xFF2B6E65)
|
||||
val ringThumb = Color(0xFF3F9A7F)
|
||||
val onRingThumb = Color(0xFFFFFFFF)
|
||||
val timerTrack = Color(0xFF3A3D43)
|
||||
val timerProgress = Color(0xFF7EC4A8)
|
||||
val nightText = Color(0xFFC4433A)
|
||||
val nightBg = Color(0xFF000000)
|
||||
}
|
||||
|
||||
object WType {
|
||||
val labelSm = TextStyle(fontSize = 12.sp, lineHeight = 16.sp, fontWeight = FontWeight.W500)
|
||||
val label = TextStyle(fontSize = 14.sp, lineHeight = 20.sp, fontWeight = FontWeight.W500)
|
||||
val bodySm = TextStyle(fontSize = 14.sp, lineHeight = 20.sp, fontWeight = FontWeight.W400)
|
||||
val body = TextStyle(fontSize = 16.sp, lineHeight = 24.sp, fontWeight = FontWeight.W400)
|
||||
val title = TextStyle(fontSize = 22.sp, lineHeight = 28.sp, fontWeight = FontWeight.W400)
|
||||
val headline = TextStyle(fontSize = 28.sp, lineHeight = 36.sp, fontWeight = FontWeight.W400)
|
||||
val alarmTime = TextStyle(fontSize = 56.sp, lineHeight = 60.sp, fontWeight = FontWeight.W600)
|
||||
val alarmAmpm = TextStyle(fontSize = 20.sp, lineHeight = 24.sp, fontWeight = FontWeight.W600)
|
||||
val timerTime = TextStyle(fontSize = 44.sp, lineHeight = 48.sp, fontWeight = FontWeight.W400)
|
||||
val clockBig = TextStyle(fontSize = 88.sp, lineHeight = 92.sp, fontWeight = FontWeight.W400)
|
||||
val stopwatch = TextStyle(fontSize = 72.sp, lineHeight = 76.sp, fontWeight = FontWeight.W500)
|
||||
val ringing = TextStyle(fontSize = 104.sp, lineHeight = 108.sp, fontWeight = FontWeight.W400)
|
||||
}
|
||||
|
||||
object WSpace {
|
||||
val s0 = 0.dp
|
||||
val s2 = 2.dp
|
||||
val s4 = 4.dp
|
||||
val s8 = 8.dp
|
||||
val s12 = 12.dp
|
||||
val s16 = 16.dp
|
||||
val s20 = 20.dp
|
||||
val s24 = 24.dp
|
||||
val s32 = 32.dp
|
||||
val s48 = 48.dp
|
||||
}
|
||||
|
||||
object WRadius {
|
||||
val xs = 8.dp
|
||||
val sm = 12.dp
|
||||
val md = 16.dp
|
||||
val lg = 24.dp
|
||||
val card = 28.dp
|
||||
val pill = 999.dp
|
||||
val navIndicator = 16.dp
|
||||
}
|
||||
@@ -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)
|
||||
```
|
||||
@@ -0,0 +1,26 @@
|
||||
#!/usr/bin/env python3
|
||||
"""tokens.json -> Tokens.kt (Compose). Re-run after every token change."""
|
||||
import json, re, sys, pathlib
|
||||
src = pathlib.Path(sys.argv[1] if len(sys.argv) > 1 else "tokens.json")
|
||||
out = pathlib.Path(sys.argv[2] if len(sys.argv) > 2 else src.with_name("Tokens.kt"))
|
||||
t = json.loads(src.read_text())
|
||||
camel = lambda s: re.sub(r"-(\w)", lambda m: m.group(1).upper(), s)
|
||||
L = ["// Generated from tokens.json by gen_theme.py. Do not edit by hand.",
|
||||
"package app.uhr.ui.theme", "",
|
||||
"import androidx.compose.ui.graphics.Color",
|
||||
"import androidx.compose.ui.text.TextStyle",
|
||||
"import androidx.compose.ui.text.font.FontWeight",
|
||||
"import androidx.compose.ui.unit.dp",
|
||||
"import androidx.compose.ui.unit.sp", "",
|
||||
"object WColor {"]
|
||||
L += [f" val {camel(k)} = Color(0xFF{v.lstrip('#').upper()})" for k, v in t["color"].items()]
|
||||
L += ["}", "", "object WType {"]
|
||||
for k, v in t["type"].items():
|
||||
L.append(f" val {camel(k)} = TextStyle(fontSize = {v['size']}.sp, lineHeight = {v['line']}.sp, fontWeight = FontWeight.W{v['weight']})")
|
||||
L += ["}", "", "object WSpace {"]
|
||||
L += [f" val s{v} = {v}.dp" for v in t["space"]]
|
||||
L += ["}", "", "object WRadius {"]
|
||||
L += [f" val {camel(k)} = {v}.dp" for k, v in t["radius"].items()]
|
||||
L += ["}", ""]
|
||||
out.write_text("\n".join(L))
|
||||
print("wrote", out)
|
||||
@@ -0,0 +1,78 @@
|
||||
{
|
||||
"_about": "Uhr tokens. Roles read by eye from replica/uhr/screens/ref-01..07 (Pixel Clock, dark first). Own values, no brand colour copied; on Android 12+ dynamic colour (wallpaper) replaces the accent roles. Check: python3 ~/.claude/skills/replica-design/contrast.py replica/uhr/design/tokens.json",
|
||||
"color": {
|
||||
"bg": "#f8f9ff", "surface": "#ffffff", "card": "#eef0f6", "card-high": "#e2e5ec",
|
||||
"border": "#c3c6cf", "border-input": "#73777f",
|
||||
"text": "#191c20", "text-muted": "#43474e", "text-off": "#5c6068",
|
||||
"accent": "#2f5ea8", "on-accent": "#ffffff",
|
||||
"accent-container": "#d6e3ff", "on-accent-container": "#001b3e",
|
||||
"fab": "#a8c7fa", "on-fab": "#0b2a55",
|
||||
"chip-on": "#2f5ea8", "on-chip-on": "#ffffff",
|
||||
"secondary-pill": "#dfe2eb", "on-secondary-pill": "#191c20",
|
||||
"stop": "#ffd8e4", "on-stop": "#4a1426",
|
||||
"danger": "#ba1a1a",
|
||||
"nav": "#eceef4", "nav-indicator": "#d6e3ff",
|
||||
|
||||
"dark-bg": "#111318", "dark-surface": "#111318", "dark-card": "#1d2024", "dark-card-high": "#272a2f",
|
||||
"dark-border": "#43474e", "dark-border-input": "#8d9199",
|
||||
"dark-text": "#e2e2e9", "dark-text-muted": "#c3c6cf", "dark-text-off": "#9a9ea6",
|
||||
"dark-accent": "#a8c7fa", "dark-on-accent": "#062e6f",
|
||||
"dark-accent-container": "#244a80", "dark-on-accent-container": "#d6e3ff",
|
||||
"dark-fab": "#a8c7fa", "dark-on-fab": "#062e6f",
|
||||
"dark-chip-on": "#a8c7fa", "dark-on-chip-on": "#062e6f",
|
||||
"dark-secondary-pill": "#3a3d43", "dark-on-secondary-pill": "#e2e2e9",
|
||||
"dark-stop": "#f2b8c9", "dark-on-stop": "#4a1426",
|
||||
"dark-danger": "#ffb4ab",
|
||||
"dark-nav": "#1d2024", "dark-nav-indicator": "#3a3f47",
|
||||
|
||||
"ring-bg": "#1e5a52", "ring-on": "#b4f1e6", "ring-track": "#2b6e65", "ring-thumb": "#3f9a7f", "on-ring-thumb": "#ffffff",
|
||||
"timer-track": "#3a3d43", "timer-progress": "#7ec4a8",
|
||||
"night-text": "#c4433a", "night-bg": "#000000"
|
||||
},
|
||||
"pairs": [
|
||||
["text","bg"],["text","card"],["text","card-high"],["text-muted","bg"],["text-muted","card"],["text-off","card"],
|
||||
["on-accent","accent"],["on-accent-container","accent-container"],["on-fab","fab"],["on-chip-on","chip-on"],
|
||||
["on-secondary-pill","secondary-pill"],["on-stop","stop"],["accent","card"],["danger","card"],["text","nav"],["text","nav-indicator"],
|
||||
["border-input","surface","ui"],
|
||||
["dark-text","dark-bg"],["dark-text","dark-card"],["dark-text","dark-card-high"],["dark-text-muted","dark-bg"],["dark-text-muted","dark-card"],["dark-text-off","dark-card"],
|
||||
["dark-on-accent","dark-accent"],["dark-on-accent-container","dark-accent-container"],["dark-on-fab","dark-fab"],["dark-on-chip-on","dark-chip-on"],
|
||||
["dark-on-secondary-pill","dark-secondary-pill"],["dark-on-stop","dark-stop"],["dark-accent","dark-card"],["dark-danger","dark-card"],
|
||||
["dark-text","dark-nav"],["dark-text","dark-nav-indicator"],["dark-border-input","dark-card","ui"],
|
||||
["ring-on","ring-bg"],["ring-on","ring-track"],["on-ring-thumb","ring-thumb","large"],
|
||||
["timer-progress","dark-card","ui"],["night-text","night-bg","large"]
|
||||
],
|
||||
"font": {
|
||||
"sans": "Roboto Flex (OFL), system fallback",
|
||||
"display": "Roboto Flex, weight 500-600, tabular numbers, for alarm times",
|
||||
"clock": "Roboto Flex, weight 300-400 for big clocks and the ringing screen",
|
||||
"mono": "tabular figures (fontFeatureSettings tnum) instead of a mono font for the stopwatch"
|
||||
},
|
||||
"type": {
|
||||
"label-sm": {"size": 12, "line": 16, "weight": 500},
|
||||
"label": {"size": 14, "line": 20, "weight": 500},
|
||||
"body-sm": {"size": 14, "line": 20, "weight": 400},
|
||||
"body": {"size": 16, "line": 24, "weight": 400},
|
||||
"title": {"size": 22, "line": 28, "weight": 400},
|
||||
"headline": {"size": 28, "line": 36, "weight": 400},
|
||||
"alarm-time": {"size": 56, "line": 60, "weight": 600},
|
||||
"alarm-ampm": {"size": 20, "line": 24, "weight": 600},
|
||||
"timer-time": {"size": 44, "line": 48, "weight": 400},
|
||||
"clock-big": {"size": 88, "line": 92, "weight": 400},
|
||||
"stopwatch": {"size": 72, "line": 76, "weight": 500},
|
||||
"ringing": {"size": 104, "line": 108, "weight": 400}
|
||||
},
|
||||
"space": [0, 2, 4, 8, 12, 16, 20, 24, 32, 48],
|
||||
"radius": {"xs": 8, "sm": 12, "md": 16, "lg": 24, "card": 28, "pill": 999, "nav-indicator": 16},
|
||||
"shape": {
|
||||
"fab": "circle 96dp (large, centred above the nav bar)",
|
||||
"stopwatch-primary": "pill 72dp tall, full width",
|
||||
"timer-ring": "circle stroke 6dp",
|
||||
"day-chip": "circle 36dp"
|
||||
},
|
||||
"motion": {
|
||||
"card-expand": "spring dampingRatio 0.85 stiffness 380",
|
||||
"slide-act": "spring back dampingRatio 0.7",
|
||||
"fast": "120ms", "base": "250ms"
|
||||
},
|
||||
"layout": {"gutter": 16, "card-gap": 8, "nav-height": 80, "fab-bottom": 16, "card-padding": 20}
|
||||
}
|
||||
Reference in New Issue
Block a user