feat(ios): comprehensive iPhone+iPad UX polish — refined-native design system
Freeze a shared design system (DesignSystem/{Tokens,Typography,StatusStyle,
Primitives}.swift): indigo #7C8CFF accent (root .tint), semantic status colors,
2-4-8-12-16-20-24 spacing + sm8/md12/lg16 radii scale, SF Mono tabular numbers,
reduce-motion-gated animations, haptics, reusable StatusBadge/TelemetryChip/Card/
SectionHeader/DSButtonStyle/ContinueLastBanner. Every changed view consumes tokens
— no hardcoded colors/spacing.
Applied across all surfaces (visual only — zero behavior/logic change, all suites
green): session list rows + status system (shape+color, not color-alone) +
telemetry chips + thumbnail placeholders; terminal gate card (≥44pt approve/reject)
+ keybar + reconnect + quick-reply + digest + SwiftTerm accent theme; pairing hero
+ warning tiers + Projects cards + Timeline/Diff; nav chrome + iPad split placeholder
+ privacy shade + motion. Chinese gate copy. UX finding fixed: timeline class colors
now via DS.Palette (+timelineTool/timelineUser tokens).
Design review 8.5/10. Verified: iPhone 16 290 + iPad Pro 11 290 tests green;
packages + integration green; consistency audit ~clean; zero changes under
ios/Packages, src/, public/.
This commit is contained in:
Yaojia Wang
197
ios/App/WebTerm/DesignSystem/Tokens.swift
Normal file
197
ios/App/WebTerm/DesignSystem/Tokens.swift
Normal file
@@ -0,0 +1,197 @@
|
||||
import SwiftUI
|
||||
import UIKit
|
||||
|
||||
/// # WebTerm Design System — token vocabulary (FROZEN public surface)
|
||||
///
|
||||
/// The single source of truth for every visual constant in the App layer.
|
||||
/// Screens/components must reference these tokens — never inline colors,
|
||||
/// spacings, radii, opacities, durations or haptics. Direction: "精致原生"
|
||||
/// (refined native, Apple HIG), dark-mode-first, indigo/violet accent
|
||||
/// continuing the web selection color.
|
||||
///
|
||||
/// Vocabulary (all under `DS.`):
|
||||
/// - `Palette` — adaptive `accent` (indigo) · semantic `status*` colors
|
||||
/// (color is NEVER the only status signal — pair with a symbol,
|
||||
/// see `StatusStyle`) · `surface`/`card`/`hairline` surfaces ·
|
||||
/// `textPrimary`/`textSecondary`/`textTertiary`.
|
||||
/// - `Space` — 2·4·8·12·16·20·24 scale (`xs2`…`xxl24`). No off-scale gaps.
|
||||
/// - `Radius` — `sm8`/`md12`/`lg16`/`pill`.
|
||||
/// - `Stroke` — `hairline` (1pt border width).
|
||||
/// - `Opacity` — `stale`/`exited`/`pressed` dimming multipliers.
|
||||
/// - `Layout` — `minHitTarget` (44pt HIG minimum).
|
||||
/// - `Motion` — `fast`/`base` eased animations + `gated(_:reduceMotion:)`
|
||||
/// which collapses to `nil` under Reduce Motion.
|
||||
/// - `Haptics` — `selection`/`success`/`warning` (`@MainActor`).
|
||||
///
|
||||
/// Companion files: `Typography.swift` (`DS.Typography`), `StatusStyle.swift`
|
||||
/// (`StatusStyle` / `DisplayStatus`), `Primitives.swift` (reusable views).
|
||||
enum DS {
|
||||
|
||||
// MARK: - Palette
|
||||
|
||||
/// Colors. `accent` is asset-free adaptive (no `.xcassets`); the semantic
|
||||
/// status colors use the direction's exact hex so light/dark stay on-brand.
|
||||
enum Palette {
|
||||
|
||||
// ── Accent (indigo/violet — web selection color #7C8CFF) ────────────
|
||||
// Adaptive: dark ≈ #7C8CFF, light ≈ #4F5BD5. Used sparingly — primary
|
||||
// actions, selection, active state only.
|
||||
|
||||
/// The one accent token. Inject once at the root via `.tint(DS.Palette.accent)`.
|
||||
static let accent = Color(uiColor: accentUIColor())
|
||||
|
||||
/// The accent as a dynamic `UIColor`. Exposed so tests can resolve the
|
||||
/// two schemes deterministically (`resolvedColor(with:)`) without going
|
||||
/// through the SwiftUI→UIKit bridge.
|
||||
static func accentUIColor() -> UIColor {
|
||||
UIColor { trait in
|
||||
trait.userInterfaceStyle == .dark
|
||||
? UIColor(red: 0x7C / 255.0, green: 0x8C / 255.0, blue: 0xFF / 255.0, alpha: 1)
|
||||
: UIColor(red: 0x4F / 255.0, green: 0x5B / 255.0, blue: 0xD5 / 255.0, alpha: 1)
|
||||
}
|
||||
}
|
||||
|
||||
// ── Semantic status colors (exact hex from the direction) ───────────
|
||||
// These are the ONLY status colors. `StatusStyle` pairs each with a
|
||||
// distinct SF Symbol so status is never conveyed by color alone.
|
||||
|
||||
/// working — #34C759 (green).
|
||||
static let statusWorking = rgb(52, 199, 89)
|
||||
/// waiting / needs-me — #FF9F0A (amber).
|
||||
static let statusWaiting = rgb(255, 159, 10)
|
||||
/// stuck — #FF453A (red).
|
||||
static let statusStuck = rgb(255, 69, 58)
|
||||
/// idle — quiet secondary gray (distinguished from `unknown` by shape).
|
||||
static let statusIdle = Color.secondary
|
||||
/// unknown / no signal yet — gray.
|
||||
static let statusUnknown = Color.gray
|
||||
/// exited — dimmed secondary (apply `Opacity.exited` on the container).
|
||||
static let statusExited = Color.secondary
|
||||
|
||||
// ── Timeline event classes (T-iOS-24) ──────────────────────────────
|
||||
// Semantic colors for the activity-timeline event classes. `waiting`
|
||||
// and `stuck` reuse the status tokens above (same meaning); `done`
|
||||
// reuses `statusWorking` (a completed run). `tool`/`user` get their own
|
||||
// tokens so nothing in the app hardcodes a raw SwiftUI color.
|
||||
/// tool run — indigo, tied to the app accent family (#5E9EFF-ish).
|
||||
static let timelineTool = rgb(94, 158, 255)
|
||||
/// user message — violet (#AF7BFF), distinct from accent & tool.
|
||||
static let timelineUser = rgb(175, 123, 255)
|
||||
|
||||
// ── Surfaces & text ────────────────────────────────────────────────
|
||||
|
||||
/// Base screen background.
|
||||
static let surface = Color(uiColor: .systemBackground)
|
||||
/// Card / grouped-content background (a step up from `surface`).
|
||||
static let card = Color(uiColor: .secondarySystemBackground)
|
||||
/// Hairline separator/border color.
|
||||
static let hairline = Color(uiColor: .separator)
|
||||
/// Primary label color.
|
||||
static let textPrimary = Color.primary
|
||||
/// Secondary label color (meta, captions).
|
||||
static let textSecondary = Color.secondary
|
||||
/// Tertiary label color (de-emphasized detail).
|
||||
static let textTertiary = Color(uiColor: .tertiaryLabel)
|
||||
|
||||
/// Build an opaque sRGB color from 0–255 components.
|
||||
private static func rgb(_ r: Double, _ g: Double, _ b: Double) -> Color {
|
||||
Color(.sRGB, red: r / 255, green: g / 255, blue: b / 255, opacity: 1)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Space
|
||||
|
||||
/// Spacing scale — 2·4·8·12·16·20·24. Every gap/padding picks one of these;
|
||||
/// there are no in-between values (the audit's 3/5/6/10/14 all round here).
|
||||
enum Space {
|
||||
static let xs2: CGFloat = 2
|
||||
static let xs4: CGFloat = 4
|
||||
static let sm8: CGFloat = 8
|
||||
static let md12: CGFloat = 12
|
||||
static let lg16: CGFloat = 16
|
||||
static let xl20: CGFloat = 20
|
||||
static let xxl24: CGFloat = 24
|
||||
}
|
||||
|
||||
// MARK: - Radius
|
||||
|
||||
/// Corner radii. Legacy 6/10 both fold into `sm8`/`md12`.
|
||||
enum Radius {
|
||||
static let sm8: CGFloat = 8
|
||||
static let md12: CGFloat = 12
|
||||
static let lg16: CGFloat = 16
|
||||
/// Fully-rounded (capsule/pill).
|
||||
static let pill: CGFloat = 999
|
||||
}
|
||||
|
||||
// MARK: - Stroke
|
||||
|
||||
/// Border widths.
|
||||
enum Stroke {
|
||||
/// Hairline card/overlay border.
|
||||
static let hairline: CGFloat = 1
|
||||
}
|
||||
|
||||
// MARK: - Opacity
|
||||
|
||||
/// Dimming multipliers (used with `.opacity()`, sometimes `.grayscale()`).
|
||||
enum Opacity {
|
||||
/// Telemetry gone stale (past its TTL).
|
||||
static let stale: Double = 0.45
|
||||
/// A session that has exited.
|
||||
static let exited: Double = 0.55
|
||||
/// Pressed-state feedback on buttons.
|
||||
static let pressed: Double = 0.72
|
||||
}
|
||||
|
||||
// MARK: - Layout
|
||||
|
||||
/// Layout constants that are not spacings.
|
||||
enum Layout {
|
||||
/// HIG minimum touch target (44×44pt).
|
||||
static let minHitTarget: CGFloat = 44
|
||||
}
|
||||
|
||||
// MARK: - Motion
|
||||
|
||||
/// Animation tokens. Subtle, eased (~0.18–0.25s). ALWAYS route through
|
||||
/// `gated(_:reduceMotion:)` so Reduce Motion collapses to no motion.
|
||||
enum Motion {
|
||||
static let fastDuration: Double = 0.18
|
||||
static let baseDuration: Double = 0.25
|
||||
|
||||
/// Quick affordance (chips, presses).
|
||||
static let fast = Animation.easeInOut(duration: fastDuration)
|
||||
/// Standard transition (banners, sheets, list changes).
|
||||
static let base = Animation.easeInOut(duration: baseDuration)
|
||||
|
||||
/// Returns `animation` normally, or `nil` (instant, no motion) when
|
||||
/// Reduce Motion is enabled. Callers pass the environment flag.
|
||||
static func gated(_ animation: Animation, reduceMotion: Bool) -> Animation? {
|
||||
reduceMotion ? nil : animation
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Haptics
|
||||
|
||||
/// Tactile feedback for key interactions. `@MainActor` — the underlying
|
||||
/// UIKit generators must be touched on the main thread. Additive to the
|
||||
/// existing `GateViewModel` gate-arrival haptic (different call sites).
|
||||
@MainActor
|
||||
enum Haptics {
|
||||
/// Light selection tap — opening a session, tapping a key.
|
||||
static func selection() {
|
||||
UIImpactFeedbackGenerator(style: .light).impactOccurred()
|
||||
}
|
||||
|
||||
/// Success notification — a gate approve resolved.
|
||||
static func success() {
|
||||
UINotificationFeedbackGenerator().notificationOccurred(.success)
|
||||
}
|
||||
|
||||
/// Warning notification — a destructive/reject decision.
|
||||
static func warning() {
|
||||
UINotificationFeedbackGenerator().notificationOccurred(.warning)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user