/** * macOS Sequoia/Sonoma: pixel-accurate Apple system colors. * * Light surfaces: systemGroupedBackground #F2F2F7, cards on pure white. * Dark surfaces: #141414 (deeper than stock #1C1C1E — matches Sequoia finder/mail dark chrome), * card #1E1E20, popover #2C2C2E, sidebar #0D0D0F (near-black vibrancy floor). * Borders: Apple uses a hairline separator — rgba(60,60,67,0.29) light / rgba(84,84,88,0.36) dark. * At HSL that's ~82% L light / ~22% L dark. Kept razor-thin intentionally. * Primary: #007AFF light / #0A84FF dark — exact Apple systemBlue. * Radius: 10px (HIG standard component), 12px popovers, 20px dialogs. * Source: Apple HIG Color — developer.apple.com/design/human-interface-guidelines/color */ import type { ThemePreset } from './types'; // SF Pro Text/Display + SF Mono — available natively in WebKit/Wails embedded views. // Size scale: Apple HIG points (1pt ≈ 1px at 1×). const appleTypography = { 'font-sans': '"SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif', 'font-mono': '"SF Mono", ui-monospace, Menlo, "Courier New", monospace', 'font-size-base': '0.8125rem', // 13pt — HIG default body 'font-size-sm': '0.75rem', // 12pt — footnotes, secondary labels 'font-size-xs': '0.6875rem', // 11pt — captions, timestamps 'font-size-lg': '0.9375rem', // 15pt — subheadings 'font-size-xl': '1.0625rem', // 17pt — titles, nav bar 'line-height-base': '1.47', // HIG recommended for body text 'letter-spacing-base': '-0.022em', // SF Pro optical tracking at small sizes } as const; export const macosPreset: ThemePreset = { light: { // systemGroupedBackground #F2F2F7 — main page canvas background: 'hsl(240 17% 97%)', foreground: 'hsl(0 0% 7%)', // Cards: pure white elevated surface — standard Apple insetGrouped cell card: 'hsl(0 0% 100%)', 'card-foreground': 'hsl(0 0% 7%)', // Popovers / context menus: white with system drop shadow popover: 'hsl(0 0% 100%)', 'popover-foreground': 'hsl(0 0% 7%)', // systemBlue #007AFF primary: 'hsl(211 100% 50%)', 'primary-foreground': 'hsl(0 0% 100%)', // secondarySystemGroupedBackground #EFEFF4 — section headers, nested surfaces secondary: 'hsl(240 12% 95%)', 'secondary-foreground': 'hsl(0 0% 7%)', // tertiarySystemGroupedBackground #E5E5EA — chips, tag pills, disabled fills muted: 'hsl(240 8% 91%)', 'muted-foreground': 'hsl(240 3% 44%)', // Blue-tinted hover state — Apple uses a subtle blue wash, never plain grey accent: 'hsl(211 50% 96%)', 'accent-foreground': 'hsl(211 100% 36%)', // systemRed #FF3B30 destructive: 'hsl(2 100% 59%)', 'destructive-foreground': 'hsl(0 0% 100%)', // Apple opaque separator: rgba(60,60,67,0.29) on white ≈ #C6C6C8 → HSL 240 3% 78% // Kept intentionally light — Apple hairline, not a thick rule border: 'hsl(240 3% 78%)', input: 'hsl(240 8% 93%)', // Row hairline — a touch lighter than border so it reads on white cards divider: 'hsl(240 4% 85%)', ring: 'hsl(211 100% 50%)', radius: '0.625rem', // Sidebar: slighly darker than page, matches macOS sidebar material 'sidebar-background': 'hsl(240 12% 94%)', 'sidebar-foreground': 'hsl(0 0% 7%)', 'sidebar-primary': 'hsl(211 100% 50%)', 'sidebar-primary-foreground': 'hsl(0 0% 100%)', 'sidebar-accent': 'hsl(211 50% 93%)', 'sidebar-accent-foreground': 'hsl(211 100% 36%)', 'sidebar-border': 'hsl(240 3% 82%)', 'sidebar-ring': 'hsl(211 100% 50%)', // Chart: systemBlue + Apple tint palette 'chart-1': 'hsl(211 100% 50%)', 'chart-2': 'hsl(142 52% 40%)', 'chart-3': 'hsl(262 60% 56%)', 'chart-4': 'hsl(35 100% 48%)', 'chart-5': 'hsl(2 100% 59%)', // Status surfaces — Apple system colors (systemOrange/Green/Red/Blue) with // faint tinted banner fills that sit on the #F2F2F7 grouped canvas. warning: 'hsl(35 100% 48%)', // systemOrange #FF9500 'warning-background': 'hsl(35 100% 95%)', 'warning-foreground': 'hsl(28 80% 30%)', 'warning-border': 'hsl(35 90% 78%)', success: 'hsl(142 71% 45%)', // systemGreen #34C759 'success-background': 'hsl(142 60% 95%)', 'success-foreground': 'hsl(142 60% 24%)', 'success-border': 'hsl(142 55% 76%)', 'destructive-background': 'hsl(2 100% 96%)', 'destructive-border': 'hsl(2 90% 80%)', info: 'hsl(211 100% 50%)', // systemBlue #007AFF 'info-background': 'hsl(211 100% 96%)', 'info-foreground': 'hsl(211 80% 30%)', 'info-border': 'hsl(211 90% 80%)', ...appleTypography, }, dark: { // Deeper than stock #1C1C1E — matches Sequoia dark finder/mail chrome (#141414) background: 'hsl(240 5% 8%)', foreground: 'hsl(0 0% 95%)', // secondarySystemBackground #1E1E20 — cards slightly elevated card: 'hsl(240 3% 12%)', 'card-foreground': 'hsl(0 0% 95%)', // #2C2C2E — popovers, menus, dropdowns popover: 'hsl(240 3% 17%)', 'popover-foreground': 'hsl(0 0% 95%)', // systemBlue dark #0A84FF primary: 'hsl(211 100% 58%)', 'primary-foreground': 'hsl(0 0% 100%)', // Elevated neutral surface — slightly lighter than card secondary: 'hsl(240 3% 20%)', 'secondary-foreground': 'hsl(0 0% 88%)', // tertiarySystemBackground #3A3A3C — chips, tags, muted fills muted: 'hsl(240 3% 23%)', 'muted-foreground': 'hsl(240 4% 58%)', // Blue-tinted hover (Apple active state in dark) accent: 'hsl(211 25% 19%)', 'accent-foreground': 'hsl(211 100% 72%)', // systemRed dark #FF453A destructive: 'hsl(3 100% 62%)', 'destructive-foreground': 'hsl(0 0% 100%)', // Separator dark: rgba(84,84,88,0.36) — ultra-thin, almost invisible border: 'hsl(240 3% 22%)', input: 'hsl(240 3% 19%)', // Row hairline — softer than border so dark rows don't read as a hard rule divider: 'hsl(240 3% 18%)', ring: 'hsl(211 100% 58%)', radius: '0.625rem', // Sidebar: near-black floor — #0D0D0F 'sidebar-background': 'hsl(240 5% 5%)', 'sidebar-foreground': 'hsl(0 0% 90%)', 'sidebar-primary': 'hsl(211 100% 58%)', 'sidebar-primary-foreground': 'hsl(0 0% 100%)', 'sidebar-accent': 'hsl(211 22% 16%)', 'sidebar-accent-foreground': 'hsl(211 100% 72%)', 'sidebar-border': 'hsl(240 3% 15%)', 'sidebar-ring': 'hsl(211 100% 58%)', // Chart: brighter variants for contrast on dark 'chart-1': 'hsl(211 100% 58%)', 'chart-2': 'hsl(142 52% 50%)', 'chart-3': 'hsl(262 60% 65%)', 'chart-4': 'hsl(35 100% 56%)', 'chart-5': 'hsl(3 100% 62%)', // Status surfaces (dark) — Apple dark system colors, dim banner fills on the // #141414 canvas with raised foregrounds for contrast. warning: 'hsl(35 100% 56%)', // systemOrange dark #FF9F0A 'warning-background': 'hsl(35 70% 10%)', 'warning-foreground': 'hsl(35 95% 70%)', 'warning-border': 'hsl(35 50% 26%)', success: 'hsl(142 60% 50%)', // systemGreen dark #30D158 'success-background': 'hsl(142 50% 9%)', 'success-foreground': 'hsl(142 65% 68%)', 'success-border': 'hsl(142 40% 24%)', 'destructive-background': 'hsl(3 70% 11%)', 'destructive-border': 'hsl(3 55% 30%)', info: 'hsl(211 100% 58%)', // systemBlue dark #0A84FF 'info-background': 'hsl(211 70% 11%)', 'info-foreground': 'hsl(211 90% 72%)', 'info-border': 'hsl(211 50% 30%)', ...appleTypography, }, };