diff --git a/apps/calendar-macos/CompassUI/Sources/CompassUI/Onboarding/WelcomeModalView.swift b/apps/calendar-macos/CompassUI/Sources/CompassUI/Onboarding/WelcomeModalView.swift index dff2f371e..224ab1e98 100644 --- a/apps/calendar-macos/CompassUI/Sources/CompassUI/Onboarding/WelcomeModalView.swift +++ b/apps/calendar-macos/CompassUI/Sources/CompassUI/Onboarding/WelcomeModalView.swift @@ -16,13 +16,16 @@ struct WelcomeModalView: View { ZStack { PanelBackdropView() .ignoresSafeArea() - ScrollView { - panel - .frame(maxWidth: .infinity, alignment: .top) - .padding(.top, 32) - .padding(.bottom, 32) + // Web `OverlayPanel` centers the panel and scrolls (`py-8`) only + // when it is taller than the window. + GeometryReader { geometry in + ScrollView { + panel + .frame(maxWidth: .infinity) + .padding(.vertical, 32) + .frame(minHeight: geometry.size.height) + } } - .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) } .onAppear { model.onboardingStore.setWelcomeFirstVisitOpen(true) diff --git a/apps/calendar-macos/CompassUI/Sources/CompassUI/PanelBackdropView.swift b/apps/calendar-macos/CompassUI/Sources/CompassUI/PanelBackdropView.swift index 6e6ebcac1..f61821d73 100644 --- a/apps/calendar-macos/CompassUI/Sources/CompassUI/PanelBackdropView.swift +++ b/apps/calendar-macos/CompassUI/Sources/CompassUI/PanelBackdropView.swift @@ -1,7 +1,9 @@ import AppKit import SwiftUI -/// Web `OverlayPanel` backdrop: dimmed background with light blur (`backdrop-blur-sm`). +/// Web `OverlayPanel` backdrop: `bg-background/85` over a light blur +/// (`backdrop-blur-sm`), so the calendar shows faintly through. The dark +/// `overlayBackdrop` dim belongs to menus and confirm dialogs, not panels. struct PanelBackdropView: NSViewRepresentable { @Environment(\.nativeWebTheme) private var theme @@ -10,7 +12,7 @@ struct PanelBackdropView: NSViewRepresentable { container.wantsLayer = true let blur = NSVisualEffectView() - blur.material = .hudWindow + blur.material = .windowBackground blur.blendingMode = .withinWindow blur.state = .active blur.translatesAutoresizingMaskIntoConstraints = false @@ -37,7 +39,7 @@ struct PanelBackdropView: NSViewRepresentable { } func updateNSView(_ container: NSView, context: Context) { - context.coordinator.tintView?.layer?.backgroundColor = NSColor(theme.overlayBackdropColor).cgColor + context.coordinator.tintView?.layer?.backgroundColor = NSColor(theme.panelBackdropColor).cgColor } func makeCoordinator() -> Coordinator { Coordinator() } diff --git a/docs/features/desktop-web-parity-checklist.md b/docs/features/desktop-web-parity-checklist.md index e4609f9ed..7a214c47c 100644 --- a/docs/features/desktop-web-parity-checklist.md +++ b/docs/features/desktop-web-parity-checklist.md @@ -28,7 +28,7 @@ This checklist compares **apps/calendar-web** (reference UI) with **apps/calenda | --- | --- | --- | --- | --- | | Light Beach / Dark Abyss palettes | `[data-theme]` in `index.css` | `ThemeTokens.lightBeach` / `darkAbyss` | ✅ | Generated from same CSS | | SwiftUI accessor coverage | Tailwind `color-*` for all 22 roles | `NativeWebTheme` exposes subset on `ThemeTokenColor+SwiftUI.swift` | 🟡 | Missing convenience colors: `surfaceRaised`, `textSubtle`, `borderStrong`, `accentHover`, `accentStrong`, `accentSecondaryHover`, `onAccent`, `info`, `shadowDefault` | -| Panel modal backdrop | `OverlayPanel` / `bg-background/85` | `panelBackdropColor` = `background` @ 85% opacity | 🟡 | Web uses `--overlay-backdrop` for dimming; panel tint is separate | +| Panel modal backdrop | `OverlayPanel` / `bg-background/85` + `backdrop-blur-sm` | `PanelBackdropView`: `panelBackdropColor` (`background` @ 85%) over a within-window blur | ✅ | Settings and welcome used the dark `overlayBackdrop` dim and read as solid gray; that dim stays for menus and confirm dialogs. Welcome centers vertically like web | | Event default fill hex | `theme.util.ts` / deck | `EventCardView.swift` literals `#454442`, `#82A0B2` | 🟡 | Values align; not read from tokens | | Event focus ring color | `--event-focus-color` + outline | `EventCardView` CALayer border from fill-aware helper | 🟡 | Same intent, different paint model | | Holiday / gradient accents | CSS gradients on chips | Mostly solid fills | 🟡 | Audit per calendar color id |