@djangocfg/ui-core 2.1.373 → 2.1.374

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.373",
+  "version": "2.1.374",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -96,7 +96,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.373",
+    "@djangocfg/i18n": "^2.1.374",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -166,9 +166,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.373",
+    "@djangocfg/i18n": "^2.1.374",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.373",
+    "@djangocfg/typescript-config": "^2.1.374",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/styles/presets/themes/macos.ts

@@ -1,123 +1,124 @@
 /**
- * macOS Sonoma: systemGroupedBackground (#F2F2F7), systemBlue (#007AFF / #0A84FF),
- * 10px radius, hairline borders, vibrancy-ready surfaces.
- * Source: Apple HIG Color — https://developer.apple.com/design/human-interface-guidelines/color
+ * 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';
 
-/**
- * Apple HIG typography for Wails/WebKit embedded WebView.
- *
- * In native WebKit (Wails, Electron macOS) system fonts are accessible directly.
- * SF Pro Text  — optimised for 11–19 pt (UI text, body, labels)
- * SF Pro Display — optimised for 20 pt+ (headlines); browser/WebKit switches automatically
- *   via -apple-system, but in embedded WebView naming it explicitly helps some engines.
- * SF Mono — Apple's monospaced companion, available system-wide on macOS 10.12+
- *
- * Size scale matches Apple HIG points → rem (1pt ≈ 1px at 1x):
- *   xs  11pt → 0.6875rem  (captions, timestamps)
- *   sm  12pt → 0.75rem    (footnotes, secondary labels)
- *   base 13pt → 0.8125rem  (body, default UI text — HIG "default")
- *   lg  15pt → 0.9375rem  (subheadings, emphasized body)
- *   xl  17pt → 1.0625rem  (titles, navigation bar)
- *
- * line-height 1.4 matches HIG recommended tight leading for UI elements.
- * letter-spacing -0.01em matches SF Pro's optical tracking at small sizes.
- */
+// 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',
-  'font-size-sm': '0.75rem',
-  'font-size-xs': '0.6875rem',
-  'font-size-lg': '0.9375rem',
-  'font-size-xl': '1.0625rem',
-  'line-height-base': '1.4',
-  'letter-spacing-base': '-0.01em',
+  '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: {
-    // #F2F2F7 — systemGroupedBackground
+    // systemGroupedBackground #F2F2F7
     background: '240 17% 97%',
-    foreground: '220 9% 10%',
+    foreground: '0 0% 8%',
+    // Cards sit on pure white — standard Apple elevated surface
     card: '0 0% 100%',
-    'card-foreground': '220 9% 10%',
+    'card-foreground': '0 0% 8%',
+    // Popovers / menus: white with system shadow
     popover: '0 0% 100%',
-    'popover-foreground': '220 9% 10%',
-    // #007AFF — systemBlue
+    'popover-foreground': '0 0% 8%',
+    // systemBlue #007AFF
     primary: '211 100% 50%',
     'primary-foreground': '0 0% 100%',
     // secondarySystemGroupedBackground #EFEFF4
-    secondary: '240 17% 95%',
-    'secondary-foreground': '220 9% 10%',
-    // tertiarySystemGroupedBackground #E5E5EA
+    secondary: '240 14% 96%',
+    'secondary-foreground': '0 0% 8%',
+    // tertiarySystemGroupedBackground #E5E5EA — muted fills, tag backgrounds
     muted: '240 6% 90%',
-    'muted-foreground': '220 9% 40%',
-    accent: '211 60% 95%',
-    'accent-foreground': '211 100% 35%',
-    destructive: '0 100% 58%',
+    'muted-foreground': '220 4% 46%',
+    // Light blue-tinted hover surface (not grey)
+    accent: '211 55% 96%',
+    'accent-foreground': '211 100% 38%',
+    // systemRed #FF3B30
+    destructive: '2 100% 59%',
     'destructive-foreground': '0 0% 100%',
-    // Separator: rgba(60,60,67,0.29) → HSL approx
-    border: '240 6% 82%',
-    input: '240 6% 88%',
+    // Separator: rgba(60,60,67,0.29) — hairline only, not a thick line
+    border: '240 5% 84%',
+    input: '240 6% 92%',
     ring: '211 100% 50%',
     radius: '0.625rem',
-    'sidebar-background': '240 17% 94%',
-    'sidebar-foreground': '220 9% 10%',
+    // Sidebar: secondarySystemGroupedBackground tinted slightly cooler
+    'sidebar-background': '240 14% 95%',
+    'sidebar-foreground': '0 0% 8%',
     'sidebar-primary': '211 100% 50%',
     'sidebar-primary-foreground': '0 0% 100%',
-    'sidebar-accent': '211 60% 93%',
-    'sidebar-accent-foreground': '211 100% 35%',
-    'sidebar-border': '240 6% 86%',
+    'sidebar-accent': '211 55% 94%',
+    'sidebar-accent-foreground': '211 100% 38%',
+    'sidebar-border': '240 5% 88%',
     'sidebar-ring': '211 100% 50%',
+    // Chart: systemBlue + Apple system colors
     'chart-1': '211 100% 50%',
-    'chart-2': '146 50% 36%',
-    'chart-3': '262 83% 58%',
-    'chart-4': '35 100% 50%',
-    'chart-5': '346 77% 50%',
+    'chart-2': '142 52% 40%',
+    'chart-3': '262 60% 56%',
+    'chart-4': '35 100% 48%',
+    'chart-5': '2 100% 59%',
     ...appleTypography,
   },
   dark: {
-    // #1C1C1E — systemBackground dark
-    background: '240 5% 11%',
-    foreground: '0 0% 96%',
-    // #2C2C2E — secondarySystemBackground dark
-    card: '240 4% 18%',
-    'card-foreground': '0 0% 96%',
-    // #3A3A3C — popover elevated surface
-    popover: '240 4% 23%',
-    'popover-foreground': '0 0% 96%',
-    // #0A84FF — systemBlue dark
+    // Deeper than stock #1C1C1E — matches Sequoia dark finder/mail chrome (#141414)
+    background: '240 5% 8%',
+    foreground: '0 0% 95%',
+    // secondarySystemBackground #1E1E20 — cards slightly elevated
+    card: '240 3% 12%',
+    'card-foreground': '0 0% 95%',
+    // #2C2C2E — popovers, menus, dropdowns
+    popover: '240 3% 17%',
+    'popover-foreground': '0 0% 95%',
+    // systemBlue dark #0A84FF
     primary: '211 100% 58%',
     'primary-foreground': '0 0% 100%',
-    secondary: '240 5% 24%',
-    'secondary-foreground': '0 0% 90%',
-    // #3A3A3C — tertiarySystemBackground dark
-    muted: '240 4% 23%',
-    'muted-foreground': '240 5% 60%',
-    accent: '211 30% 20%',
-    'accent-foreground': '211 100% 70%',
-    destructive: '0 100% 65%',
+    // Elevated neutral surface — slightly lighter than card
+    secondary: '240 3% 20%',
+    'secondary-foreground': '0 0% 88%',
+    // tertiarySystemBackground #3A3A3C — chips, tags, muted fills
+    muted: '240 3% 23%',
+    'muted-foreground': '240 4% 58%',
+    // Blue-tinted hover (Apple active state in dark)
+    accent: '211 25% 19%',
+    'accent-foreground': '211 100% 72%',
+    // systemRed dark #FF453A
+    destructive: '3 100% 62%',
     'destructive-foreground': '0 0% 100%',
-    // Separator dark: rgba(84,84,88,0.65)
-    border: '240 4% 30%',
-    input: '240 4% 26%',
+    // Separator dark: rgba(84,84,88,0.36) — ultra-thin, almost invisible
+    border: '240 3% 22%',
+    input: '240 3% 19%',
     ring: '211 100% 58%',
     radius: '0.625rem',
-    'sidebar-background': '240 5% 8%',
+    // Sidebar: near-black floor — #0D0D0F
+    'sidebar-background': '240 5% 5%',
     'sidebar-foreground': '0 0% 90%',
     'sidebar-primary': '211 100% 58%',
     'sidebar-primary-foreground': '0 0% 100%',
-    'sidebar-accent': '211 25% 18%',
-    'sidebar-accent-foreground': '211 100% 70%',
-    'sidebar-border': '240 4% 20%',
+    'sidebar-accent': '211 22% 16%',
+    'sidebar-accent-foreground': '211 100% 72%',
+    'sidebar-border': '240 3% 15%',
     'sidebar-ring': '211 100% 58%',
+    // Chart: brighter variants for contrast on dark
     'chart-1': '211 100% 58%',
-    'chart-2': '146 50% 48%',
-    'chart-3': '262 83% 65%',
-    'chart-4': '35 100% 58%',
-    'chart-5': '346 77% 58%',
+    'chart-2': '142 52% 50%',
+    'chart-3': '262 60% 65%',
+    'chart-4': '35 100% 56%',
+    'chart-5': '3 100% 62%',
     ...appleTypography,
   },
 };