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

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>
2026-04-12 14:56:26 -05:00
parent 69d84fd09b
commit 65ad41840f
11 changed files with 582 additions and 484 deletions
--- a/mlbTVOS/Views/Components/CategoryPillBar.swift
+++ b/mlbTVOS/Views/Components/CategoryPillBar.swift
@@ -0,0 +1,98 @@
+import SwiftUI
+
+struct CategoryPillBar: View {
+    @Binding var selected: AppSection
+    var streamCount: Int = 0
+
+    var body: some View {
+        HStack(spacing: pillSpacing) {
+            ForEach(AppSection.allCases) { section in
+                if section == .multiView {
+                    // Multi-View as a separate icon button with badge
+                    Button {
+                        selected = .multiView
+                    } label: {
+                        HStack(spacing: 6) {
+                            Image(systemName: "rectangle.split.2x2.fill")
+                                .font(.system(size: iconSize, weight: .semibold))
+                            if streamCount > 0 {
+                                Text("\(streamCount)")
+                                    .font(pillFont.weight(.black))
+                            }
+                        }
+                        .foregroundStyle(selected == .multiView ? .white : DS.Colors.textTertiary)
+                        .padding(.horizontal, pillPadH)
+                        .padding(.vertical, pillPadV)
+                        .background(
+                            Capsule().fill(selected == .multiView ? DS.Colors.interactive : .clear)
+                        )
+                    }
+                    .platformCardStyle()
+                } else if section == .settings {
+                    Spacer()
+                    Button {
+                        selected = .settings
+                    } label: {
+                        Image(systemName: "gearshape.fill")
+                            .font(.system(size: iconSize, weight: .semibold))
+                            .foregroundStyle(selected == .settings ? .white : DS.Colors.textTertiary)
+                            .padding(.horizontal, pillPadH)
+                            .padding(.vertical, pillPadV)
+                            .background(
+                                Capsule().fill(selected == .settings ? DS.Colors.interactive : .clear)
+                            )
+                    }
+                    .platformCardStyle()
+                } else {
+                    Button {
+                        selected = section
+                    } label: {
+                        Text(section.title)
+                            .font(pillFont)
+                            .foregroundStyle(selected == section ? .white : DS.Colors.textTertiary)
+                            .padding(.horizontal, pillPadH)
+                            .padding(.vertical, pillPadV)
+                            .background(
+                                Capsule().fill(selected == section ? DS.Colors.interactive : .clear)
+                            )
+                    }
+                    .platformCardStyle()
+                }
+            }
+        }
+    }
+
+    #if os(tvOS)
+    private var pillSpacing: CGFloat { 8 }
+    private var pillPadH: CGFloat { 28 }
+    private var pillPadV: CGFloat { 14 }
+    private var pillFont: Font { .system(size: 24, weight: .bold, design: .rounded) }
+    private var iconSize: CGFloat { 22 }
+    #else
+    private var pillSpacing: CGFloat { 4 }
+    private var pillPadH: CGFloat { 18 }
+    private var pillPadV: CGFloat { 10 }
+    private var pillFont: Font { .system(size: 15, weight: .bold, design: .rounded) }
+    private var iconSize: CGFloat { 16 }
+    #endif
+}
+
+enum AppSection: String, CaseIterable, Identifiable {
+    case today
+    case intel
+    case highlights
+    case multiView
+    case settings
+
+    var id: String { rawValue }
+
+    var title: String {
+        switch self {
+        case .today: "Today"
+        case .intel: "Intel"
+        case .highlights: "Highlights"
+        case .multiView: "Multi-View"
+        case .settings: "Settings"
+        }
+    }
+}
--- a/mlbTVOS/Views/Components/DataPanel.swift
+++ b/mlbTVOS/Views/Components/DataPanel.swift
@@ -46,6 +46,7 @@ struct DataPanel<Content: View>: View {
        .background(
            RoundedRectangle(cornerRadius: density.cornerRadius)
                .fill(DS.Colors.panelFill)
+                .shadow(color: DS.Shadows.card, radius: DS.Shadows.cardRadius, y: DS.Shadows.cardY)
        )
        .overlay(
            RoundedRectangle(cornerRadius: density.cornerRadius)
@@ -54,8 +55,6 @@ struct DataPanel<Content: View>: View {
    }
 }

-// MARK: - Convenience initializers
-
 extension DataPanel {
    init(
        _ density: DataPanelDensity = .standard,
--- a/mlbTVOS/Views/Components/DesignSystem.swift
+++ b/mlbTVOS/Views/Components/DesignSystem.swift
@@ -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)
    }
 }
--- a/mlbTVOS/Views/Components/PlatformUI.swift
+++ b/mlbTVOS/Views/Components/PlatformUI.swift
@@ -11,7 +11,7 @@ struct PlatformPressButtonStyle: ButtonStyle {
    }
 }

-// MARK: - tvOS Focus Style
+// MARK: - tvOS Focus Style (Light Theme)

 #if os(tvOS)
 struct TVFocusButtonStyle: ButtonStyle {
@@ -21,14 +21,14 @@ struct TVFocusButtonStyle: ButtonStyle {
        configuration.label
            .scaleEffect(configuration.isPressed ? 0.97 : isFocused ? 1.04 : 1.0)
            .opacity(configuration.isPressed ? 0.85 : 1.0)
-            .overlay(
-                RoundedRectangle(cornerRadius: 24, style: .continuous)
-                    .strokeBorder(.white.opacity(isFocused ? 0.3 : 0), lineWidth: 2)
-            )
            .shadow(
-                color: isFocused ? .white.opacity(0.12) : .clear,
-                radius: isFocused ? 20 : 0,
-                y: isFocused ? 8 : 0
+                color: isFocused ? DS.Shadows.cardLifted : .clear,
+                radius: isFocused ? DS.Shadows.cardLiftedRadius : 0,
+                y: isFocused ? DS.Shadows.cardLiftedY : 0
+            )
+            .overlay(
+                RoundedRectangle(cornerRadius: 22, style: .continuous)
+                    .strokeBorder(DS.Colors.interactive.opacity(isFocused ? 0.5 : 0), lineWidth: 2.5)
            )
            .animation(.easeInOut(duration: 0.2), value: isFocused)
            .animation(.easeOut(duration: 0.12), value: configuration.isPressed)