admin/MLBApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Complete visual overhaul: warm light theme, stadium hero, inline pill nav

Browse Source 
Inspired by vtv/Dribbble streaming concept. Every dark surface replaced
with warm off-white (#F5F3F0) and white cards with soft shadows.

Design System: Warm off-white background, white card fills, subtle drop
shadows, dark text hierarchy, warm orange accent (#F27326) replacing
blue as primary interactive color. Added onDark color variants for hero
overlays. Shadow system with card/lifted states.

Navigation: Replaced TabView with inline CategoryPillBar — horizontal
orange pills (Today | Intel | Highlights | Multi-View | Settings).
Single scrolling view, no system chrome. Multi-View as icon button
with stream count badge. Settings as gear icon.

Stadium Hero: Full-bleed stadium photos from MLB CDN
(mlbstatic.com/v1/venue/{id}/spots/1200) as featured game background.
Left gradient overlay for text readability. Live games show score +
inning + DiamondView count/outs. Scheduled games show probable pitchers
with headshots + records. Final games show final score. Warm orange
"Watch Now" CTA pill. Added venue ID mapping for all 30 stadiums to
TeamAssets.

Game Cards: White cards with team color top bar, horizontal team rows,
dark text, soft shadows. Record + streak on every card.

Intel Tab: All dark panels replaced with white cards + shadows.
Replaced dark gradient screen background with flat warm off-white.
58 hardcoded .white.opacity() values replaced with DS.Colors tokens.

Feed Tab: Already used DS.Colors — inherits light theme automatically.

Focus: tvOS focus style uses warm orange border highlight + lifted
shadow instead of white glow on dark.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Trey t
2026-04-12 14:56:26 -05:00
parent 69d84fd09b
commit 65ad41840f
11 changed files with 582 additions and 484 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
mlbTVOS/Views/Components/DesignSystem.swift
View File

@@ -1,25 +1,41 @@
import SwiftUI
// MARK: - The Dugout Design System
// MARK: - The Dugout Design System — Warm Light Theme
enum DS {
// MARK: - Colors
enum Colors {
static let background = Color(red: 0.02, green: 0.03, blue: 0.05)
static let panelFill = Color.white.opacity(0.04)
static let panelStroke = Color.white.opacity(0.06)
static let background = Color(red: 0.96, green: 0.95, blue: 0.94)
static let panelFill = Color.white
static let panelStroke = Color.black.opacity(0.06)
static let live = Color(red: 0.95, green: 0.22, blue: 0.22)
static let positive = Color(red: 0.20, green: 0.78, blue: 0.35)
static let warning = Color(red: 0.95, green: 0.55, blue: 0.15)
static let interactive = Color(red: 0.25, green: 0.52, blue: 0.95)
static let media = Color(red: 0.55, green: 0.35, blue: 0.85)
static let live = Color(red: 0.92, green: 0.18, blue: 0.18)
static let positive = Color(red: 0.15, green: 0.68, blue: 0.32)
static let warning = Color(red: 0.92, green: 0.50, blue: 0.10)
static let interactive = Color(red: 0.95, green: 0.45, blue: 0.15) // warm orange
static let media = Color(red: 0.50, green: 0.30, blue: 0.80)
static let textPrimary = Color.white
static let textSecondary = Color.white.opacity(0.7)
static let textTertiary = Color.white.opacity(0.45)
static let textQuaternary = Color.white.opacity(0.2)
static let textPrimary = Color(red: 0.12, green: 0.12, blue: 0.14)
static let textSecondary = Color(red: 0.12, green: 0.12, blue: 0.14).opacity(0.6)
static let textTertiary = Color(red: 0.12, green: 0.12, blue: 0.14).opacity(0.4)
static let textQuaternary = Color(red: 0.12, green: 0.12, blue: 0.14).opacity(0.2)
// For use on dark/image backgrounds (hero, overlays)
static let onDarkPrimary = Color.white
static let onDarkSecondary = Color.white.opacity(0.7)
static let onDarkTertiary = Color.white.opacity(0.45)
}
// MARK: - Shadows
enum Shadows {
static let card = Color.black.opacity(0.06)
static let cardRadius: CGFloat = 16
static let cardY: CGFloat = 4
static let cardLifted = Color.black.opacity(0.12)
static let cardLiftedRadius: CGFloat = 24
static let cardLiftedY: CGFloat = 8
}
// MARK: - Typography
@@ -42,6 +58,7 @@ enum DS {
// tvOS scaled variants — 22px minimum for readability at 10ft
#if os(tvOS)
static let tvHeroScore = Font.system(size: 96, weight: .black, design: .rounded).monospacedDigit()
static let tvSectionTitle = Font.system(size: 38, weight: .bold, design: .rounded)
static let tvCardTitle = Font.system(size: 28, weight: .bold, design: .rounded)
static let tvScore = Font.system(size: 36, weight: .black, design: .rounded).monospacedDigit()
@@ -94,7 +111,7 @@ struct DataLabelStyle: ViewModifier {
.font(DS.Fonts.caption)
.kerning(1.5)
#endif
.foregroundStyle(DS.Colors.textQuaternary)
.foregroundStyle(DS.Colors.textTertiary)
.textCase(.uppercase)
}
}