rocky/OSGKeyboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: light-mode accent + keyboard preview textbox

Browse Source 
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
This commit is contained in:
Rocky
2026-06-18 19:19:57 +08:00
parent 3c11ce2903
commit 23689925dd
3 changed files with 167 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
OSGKeyboardShared/DesignSystem/Theme.swift
+82 -33
View File
@@ -49,7 +49,7 @@ public enum Palette {
public static let surfaceMuted = Color(red: 0.071, green: 0.071, blue: 0.082) // #121215
// Accents
public static let accent = Color(red: 0.353, green: 0.784, blue: 0.980) // #5AC8FA
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)
@@ -97,14 +97,24 @@ public enum Palette {
/// 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), // iOS systemBlue
accentMuted: Color(red: 0.000, green: 0.478, blue: 1.000).opacity(0.14),
accentGlow: Color(red: 0.000, green: 0.478, blue: 1.000).opacity(0.32),
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
@@ -188,48 +198,87 @@ public enum Motion {
}
// 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 {
self
.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)
)
modifier(CardSurfaceModifier(padding: padding))
}
/// Muted pill (used for tags, locale indicators, etc.).
func pillChip(foreground: Color = Palette.textSecondary) -> some View {
self
.padding(.horizontal, Spacing.xs)
.padding(.vertical, 4)
.background(Palette.surfaceElevated, in: Capsule())
.foregroundStyle(foreground)
/// 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 {
self
.font(TypeStyle.headline)
.frame(maxWidth: .infinity, minHeight: 50)
.background(Palette.accent, in: RoundedRectangle(cornerRadius: Radius.large, style: .continuous))
.foregroundStyle(Palette.textOnAccent)
modifier(PrimaryButtonModifier())
}
/// Secondary CTA button.
func secondaryButton() -> some View {
self
.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)
}
modifier(SecondaryButtonModifier())
}
}