Rocky
23689925dd
Two review-driven fixes, scoped narrowly to the two files the user
flagged. The broader uncommitted changes (Engine mode wiring,
SpeechAnalyzer, locale picker, etc.) belong to a prior agent pass and
are intentionally left out of this commit.
1. Light-mode accent is no longer the dark-mode green (#3AA05A).
Both the system `AccentColor` asset and `Palette.light.accent`
(plus `.accentMuted` / `.accentGlow`) now use Apple system blue
(#007AFF). On a near-white surface the green read as "garden
centre" and clashed with every iOS HIG-styled control. Dark
palette's accent stays green — the keyboard extension is always
dark, and green-on-dark is the more legible pairing for the
polish/active affordance.
2. The keyboard preview's "textbox" is now a real `TextField` and
the recognized text actually lands in it.
Before: `mockTextField` was a static `HStack` (icon + "Type
here…" placeholder). `cyclePhase()` had a comment
"// Local engine skips processing — insert happens
immediately." but the insert was never wired up — the user
tapped the disc, the stub transcript appeared briefly in the
transcript line, then vanished on the next tap with nothing
landing in the top box.
After:
- `mockTextField` is a real `TextField(text: $typedText, axis: .vertical)`
with a clear-X button, vertical growth (1-4 lines), and the
accent-coloured cursor. The user can also type into it directly.
- `cyclePhase()` calls `insertRecognizedText()` on the
recording→idle (local) and processing→idle (cloud) transitions,
so the (mock) recognized transcript appends to the textbox with
a leading space when the existing text doesn't already end in
whitespace — matches what `textDocumentProxy.insertText` does
for the real keyboard.
This only changes the in-app preview; the real keyboard extension
already inserts via `textDocumentProxy` and is untouched.
Build: BUILD SUCCEEDED on iPhone 17 Pro / iOS 26 simulator.
Tests: 21/21 pass (no test changes — visual + App-Group code paths
already covered).
🤖 Generated with Claude Code
285 lines
12 KiB
Swift
285 lines
12 KiB
Swift
// Theme.swift
|
|
// OSGKeyboard · Design System
|
|
//
|
|
// Single source of truth for colour, spacing, corner radius, typography.
|
|
// Inspired by Dieter Rams ("less but better") and Apple Human Interface:
|
|
// every surface has a single purpose, every token earns its place, and
|
|
// the visual hierarchy is carried by *whitespace + one accent*, never by
|
|
// extra colour.
|
|
|
|
import SwiftUI
|
|
|
|
// MARK: - Theme palette (light / dark)
|
|
|
|
/// Single source of truth for *one* colour scheme. The active palette is
|
|
/// injected via the `\.themePalette` environment key — see
|
|
/// `DesignSystem/ThemedRoot.swift`. Token names mirror the previous
|
|
/// `Palette` static API so existing call sites (`Palette.background` etc.)
|
|
/// still compile and resolve through the legacy static accessors below.
|
|
public struct ThemePalette: Sendable {
|
|
public let background: Color
|
|
public let surface: Color
|
|
public let surfaceElevated: Color
|
|
public let surfaceMuted: Color
|
|
|
|
public let accent: Color
|
|
public let accentMuted: Color
|
|
public let accentGlow: Color
|
|
|
|
public let danger: Color
|
|
public let success: Color
|
|
public let warning: Color
|
|
|
|
public let textPrimary: Color
|
|
public let textSecondary: Color
|
|
public let textTertiary: Color
|
|
public let textOnAccent: Color
|
|
|
|
public let divider: Color
|
|
public let dividerStrong: Color
|
|
|
|
public let recordRed: Color
|
|
}
|
|
|
|
public enum Palette {
|
|
// Backgrounds
|
|
public static let background = Color(red: 0.039, green: 0.039, blue: 0.043) // #0A0A0B
|
|
public static let surface = Color(red: 0.094, green: 0.094, blue: 0.106) // #18181B
|
|
public static let surfaceElevated = Color(red: 0.153, green: 0.153, blue: 0.169) // #27272A
|
|
public static let surfaceMuted = Color(red: 0.071, green: 0.071, blue: 0.082) // #121215
|
|
|
|
// Accents
|
|
public static let accent = Color(red: 0.227, green: 0.627, blue: 0.353) // #3AA05A
|
|
public static let accentMuted = accent.opacity(0.18)
|
|
public static let accentGlow = accent.opacity(0.42)
|
|
|
|
// Semantic
|
|
public static let danger = Color(red: 1.000, green: 0.271, blue: 0.227) // #FF453A
|
|
public static let success = Color(red: 0.157, green: 0.812, blue: 0.412) // #28CF69
|
|
public static let warning = Color(red: 1.000, green: 0.749, blue: 0.094) // #FFBF18
|
|
|
|
// Text
|
|
public static let textPrimary = Color.white
|
|
public static let textSecondary = Color(white: 0.7)
|
|
public static let textTertiary = Color(white: 0.50)
|
|
public static let textOnAccent = Color.black
|
|
|
|
// Lines
|
|
public static let divider = Color.white.opacity(0.06)
|
|
public static let dividerStrong = Color.white.opacity(0.10)
|
|
|
|
// Recording state
|
|
public static let recordRed = Color(red: 1.000, green: 0.231, blue: 0.188) // #FF3B30
|
|
|
|
/// Canonical dark palette — preserves every legacy literal above so
|
|
/// existing call sites that read `Palette.background` directly keep
|
|
/// getting the dark value (important for the keyboard extension, which
|
|
/// deliberately stays dark regardless of system appearance).
|
|
public static let dark = ThemePalette(
|
|
background: background,
|
|
surface: surface,
|
|
surfaceElevated: surfaceElevated,
|
|
surfaceMuted: surfaceMuted,
|
|
accent: accent,
|
|
accentMuted: accentMuted,
|
|
accentGlow: accentGlow,
|
|
danger: danger,
|
|
success: success,
|
|
warning: warning,
|
|
textPrimary: textPrimary,
|
|
textSecondary: textSecondary,
|
|
textTertiary: textTertiary,
|
|
textOnAccent: textOnAccent,
|
|
divider: divider,
|
|
dividerStrong: dividerStrong,
|
|
recordRed: recordRed
|
|
)
|
|
|
|
/// Light palette — iOS system light mode defaults. Used by the main app
|
|
/// when the user is in light mode; the keyboard extension stays dark.
|
|
///
|
|
/// Accent: Apple system blue (#007AFF), matching the AccentColor asset
|
|
/// and the iOS HIG default. We deliberately do NOT use the dark-mode
|
|
/// green here — a bright green CTA on a near-white background reads as
|
|
/// "go to a garden centre" rather than "tap me to enable your
|
|
/// keyboard", and a Typeless/Apple-style design system expects the
|
|
/// accent to follow the system tint in light mode. The keyboard
|
|
/// extension always renders dark and keeps its green accent for the
|
|
/// "polish / on-device" affordances, where green-on-dark is the more
|
|
/// legible pairing.
|
|
public static let light = ThemePalette(
|
|
background: Color(red: 0.980, green: 0.980, blue: 0.988), // #FAFAFC
|
|
surface: Color(red: 1.000, green: 1.000, blue: 1.000), // #FFFFFF
|
|
surfaceElevated: Color(red: 0.941, green: 0.941, blue: 0.961), // #F0F0F5
|
|
surfaceMuted: Color(red: 0.953, green: 0.953, blue: 0.965), // #F3F3F6
|
|
accent: Color(red: 0.000, green: 0.478, blue: 1.000), // #007AFF
|
|
accentMuted: Color(red: 0.000, green: 0.478, blue: 1.000).opacity(0.12),
|
|
accentGlow: Color(red: 0.000, green: 0.478, blue: 1.000).opacity(0.28),
|
|
danger: Color(red: 1.000, green: 0.231, blue: 0.188), // #FF3B30
|
|
success: Color(red: 0.157, green: 0.812, blue: 0.412), // #28CF69
|
|
warning: Color(red: 1.000, green: 0.620, blue: 0.094), // #FF9E18
|
|
textPrimary: Color(red: 0.067, green: 0.067, blue: 0.094), // #111118
|
|
textSecondary: Color(red: 0.392, green: 0.392, blue: 0.435), // #64646F
|
|
textTertiary: Color(red: 0.557, green: 0.557, blue: 0.604), // #8E8E9A
|
|
textOnAccent: Color.white,
|
|
divider: Color.black.opacity(0.06),
|
|
dividerStrong: Color.black.opacity(0.10),
|
|
recordRed: Color(red: 1.000, green: 0.231, blue: 0.188) // #FF3B30
|
|
)
|
|
}
|
|
|
|
// MARK: - Environment key
|
|
|
|
private struct ThemePaletteKey: EnvironmentKey {
|
|
/// Default falls back to the legacy dark palette so views that haven't
|
|
/// been wrapped in `ThemedRoot` continue to look identical to today.
|
|
static let defaultValue: ThemePalette = Palette.dark
|
|
}
|
|
|
|
public extension EnvironmentValues {
|
|
/// The palette currently active for this view. Reads from the nearest
|
|
/// `ThemedRoot` ancestor (or `Palette.dark` if none).
|
|
var themePalette: ThemePalette {
|
|
get { self[ThemePaletteKey.self] }
|
|
set { self[ThemePaletteKey.self] = newValue }
|
|
}
|
|
}
|
|
|
|
// MARK: - Spacing scale (4 pt grid)
|
|
|
|
public enum Spacing {
|
|
public static let xxs: CGFloat = 4
|
|
public static let xs: CGFloat = 8
|
|
public static let sm: CGFloat = 12
|
|
public static let md: CGFloat = 16
|
|
public static let lg: CGFloat = 20
|
|
public static let xl: CGFloat = 24
|
|
public static let xxl: CGFloat = 32
|
|
public static let xxxl: CGFloat = 40
|
|
public static let hero: CGFloat = 48
|
|
}
|
|
|
|
// MARK: - Corner radius scale
|
|
|
|
public enum Radius {
|
|
public static let small: CGFloat = 8
|
|
public static let medium: CGFloat = 12
|
|
public static let large: CGFloat = 16
|
|
public static let xl: CGFloat = 20
|
|
public static let xxl: CGFloat = 24
|
|
public static let pill: CGFloat = 999
|
|
}
|
|
|
|
// MARK: - Typography
|
|
|
|
public enum TypeStyle {
|
|
public static let caption2 = Font.system(size: 11, weight: .medium)
|
|
public static let caption = Font.system(size: 12, weight: .medium)
|
|
public static let footnote = Font.system(size: 13, weight: .regular)
|
|
public static let body = Font.system(size: 15, weight: .regular)
|
|
public static let bodyEmph = Font.system(size: 15, weight: .medium)
|
|
public static let headline = Font.system(size: 17, weight: .semibold)
|
|
public static let title3 = Font.system(size: 20, weight: .semibold)
|
|
public static let title2 = Font.system(size: 22, weight: .bold)
|
|
public static let title = Font.system(size: 28, weight: .bold)
|
|
public static let largeTitle = Font.system(size: 34, weight: .bold)
|
|
public static let mono = Font.system(size: 13, weight: .regular, design: .monospaced)
|
|
public static let monoSmall = Font.system(size: 11, weight: .regular, design: .monospaced)
|
|
}
|
|
|
|
// MARK: - Animation
|
|
|
|
public enum Motion {
|
|
public static let quick = Animation.spring(response: 0.25, dampingFraction: 0.85)
|
|
public static let soft = Animation.spring(response: 0.40, dampingFraction: 0.80)
|
|
public static let deliberate = Animation.spring(response: 0.55, dampingFraction: 0.78)
|
|
public static let breath = Animation.easeInOut(duration: 1.6).repeatForever(autoreverses: true)
|
|
public static let instant = Animation.linear(duration: 0.12)
|
|
}
|
|
|
|
// MARK: - Reusable view modifiers
|
|
//
|
|
// Each modifier is a proper ViewModifier struct so it can read the
|
|
// active ThemePalette from @Environment. This is the ONLY way to make
|
|
// shared modifiers respect light/dark mode — plain View extension
|
|
// methods cannot access environment values.
|
|
|
|
private struct CardSurfaceModifier: ViewModifier {
|
|
@Environment(\.themePalette) private var palette
|
|
let padding: CGFloat
|
|
|
|
func body(content: Content) -> some View {
|
|
content
|
|
.padding(padding)
|
|
.background(palette.surface, in: RoundedRectangle(cornerRadius: Radius.large, style: .continuous))
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: Radius.large, style: .continuous)
|
|
.stroke(palette.divider, lineWidth: 0.5)
|
|
)
|
|
}
|
|
}
|
|
|
|
private struct PillChipModifier: ViewModifier {
|
|
@Environment(\.themePalette) private var palette
|
|
let foreground: Color?
|
|
|
|
func body(content: Content) -> some View {
|
|
content
|
|
.padding(.horizontal, Spacing.xs)
|
|
.padding(.vertical, 4)
|
|
.background(palette.surfaceElevated, in: Capsule())
|
|
.foregroundStyle(foreground ?? palette.textSecondary)
|
|
}
|
|
}
|
|
|
|
private struct PrimaryButtonModifier: ViewModifier {
|
|
@Environment(\.themePalette) private var palette
|
|
|
|
func body(content: Content) -> some View {
|
|
content
|
|
.font(TypeStyle.headline)
|
|
.frame(maxWidth: .infinity, minHeight: 50)
|
|
.background(palette.accent, in: RoundedRectangle(cornerRadius: Radius.large, style: .continuous))
|
|
.foregroundStyle(palette.textOnAccent)
|
|
}
|
|
}
|
|
|
|
private struct SecondaryButtonModifier: ViewModifier {
|
|
@Environment(\.themePalette) private var palette
|
|
|
|
func body(content: Content) -> some View {
|
|
content
|
|
.font(TypeStyle.headline)
|
|
.frame(maxWidth: .infinity, minHeight: 50)
|
|
.background(palette.surface, in: RoundedRectangle(cornerRadius: Radius.large, style: .continuous))
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: Radius.large, style: .continuous)
|
|
.stroke(palette.dividerStrong, lineWidth: 0.5)
|
|
)
|
|
.foregroundStyle(palette.textPrimary)
|
|
}
|
|
}
|
|
|
|
public extension View {
|
|
/// Standard card surface used in the main app.
|
|
func cardSurface(padding: CGFloat = Spacing.md) -> some View {
|
|
modifier(CardSurfaceModifier(padding: padding))
|
|
}
|
|
|
|
/// Muted pill (used for tags, locale indicators, etc.).
|
|
/// Pass nil to inherit palette.textSecondary automatically.
|
|
func pillChip(foreground: Color? = nil) -> some View {
|
|
modifier(PillChipModifier(foreground: foreground))
|
|
}
|
|
|
|
/// Primary CTA button.
|
|
func primaryButton() -> some View {
|
|
modifier(PrimaryButtonModifier())
|
|
}
|
|
|
|
/// Secondary CTA button.
|
|
func secondaryButton() -> some View {
|
|
modifier(SecondaryButtonModifier())
|
|
}
|
|
}
|