@djangocfg/ui-core 2.1.460 → 2.1.463

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

@@ -1,190 +0,0 @@
-/**
- * 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 at the Apple hairline value (78%). An earlier build nudged this darker
-    // (78→74) to force outlines onto white cards, but that over-contrasted every
-    // panel/header `border-b` on the grouped canvas — back to the HIG hairline.
-    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% 83%)',
-    ring: 'hsl(211 100% 50%)',
-    radius: '0.625rem',
-    // Modal scrim — lighter than the base 0.6 so the light grouped canvas still
-    // reads behind the dialog (Apple sheets dim, they don't black out).
-    overlay: 'hsl(240 6% 10% / 0.32)',
-    // 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 lifted above the #141414 page.
-    // Bumped 12→15 so panels (dialog body, settings cards) visibly float off the
-    // near-black canvas; on L≈8 a +4 lift is too subtle for the eye (Weber).
-    card: 'hsl(240 3% 15%)',
-    'card-foreground': 'hsl(0 0% 95%)',
-    // #2C2C2E — popovers, menus, dropdowns; kept a clear step above card.
-    popover: 'hsl(240 3% 20%)',
-    '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%)',
-    // Recessed surface — a notch BELOW the page (bg 8%), like default's muted.
-    // `--muted` is the "sunk" surface (input rest, nav rails, chips): it must
-    // read as recessed vs `--card` (15%), not raised. Apple's #3A3A3C
-    // tertiary fill (23%) sat *above* card and inverted the depth — the
-    // SettingsDialog nav rail (bg-muted) then looked lighter than its panel.
-    muted: 'hsl(240 3% 11%)',
-    '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%)',
-    // Control/panel OUTLINE — input & card frames, not separators. Opaque 22%
-    // reads cleanly as a control edge on card (L15) surfaces. Structural
-    // separators (shell columns, headers, list rows) do NOT use this — they use
-    // `--divider`, which is a softer translucent hairline (see below), so the
-    // outline weight here never turns the chrome into a hard grid.
-    border: 'hsl(240 3% 22%)',
-    input: 'hsl(240 3% 22%)',
-    // Separator hairline — TRANSLUCENT, mirroring Apple's rgba(84,84,88,0.36):
-    // a light grey at low alpha that dissolves into whatever sits behind it
-    // instead of a fixed opaque line. This is the token for ALL structural
-    // separators — shell columns (rail↔list↔chat), header `border-b` rules, and
-    // list-row hairlines — deliberately softer than the opaque `--border`
-    // outline so the chrome never reads as a hard grid on the near-black canvas.
-    // 46% L @ 0.18 alpha picked live in cmdop-web: a quiet, self-adapting
-    // hairline (heavier over an elevated card, lighter on the page).
-    divider: 'hsl(240 4% 46% / 0.18)',
-    ring: 'hsl(211 100% 58%)',
-    radius: '0.625rem',
-    // Modal scrim — a touch lighter than the base 0.7. The page is already near
-    // black (L≈8); 0.55 dims it enough to separate the dialog without crushing
-    // the backdrop into a flat black slab the panel can't lift off of.
-    overlay: 'hsl(0 0% 0% / 0.55)',
-    // 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%)',
-    // 22 — the sidebar rail floor is #0D0D0F (L5), darker than the page (L8), so
-    // its edge needs a touch more lift than the page-calibrated `--border` (18)
-    // to read at all. Still a hairline, not the hard rule an outline weight draws.
-    'sidebar-border': 'hsl(240 3% 22%)',
-    '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,
-  },
-};

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

@@ -1,48 +0,0 @@
-/**
- * soft — density/feel modifier (NOT a full color theme).
- *
- * Larger radius (1rem) + gently lifted neutral surfaces for friendly marketing
- * UIs. It deliberately only overrides the neutral chrome (background/card/muted/
- * accent/border/input/divider/radius + sidebar surfaces) and inherits brand
- * colors (primary/ring/charts/status) from whatever base or brand preset is
- * active, so `soft` composes with `django-cfg` etc. Light and dark are kept
- * symmetric — every key set in one mode is set in the other.
- */
-import type { ThemePreset } from './types';
-
-export const softPreset: ThemePreset = {
-  light: {
-    background: 'hsl(0 0% 98%)',
-    foreground: 'hsl(240 6% 10%)',
-    card: 'hsl(0 0% 100%)',
-    'card-foreground': 'hsl(240 6% 10%)',
-    muted: 'hsl(240 5% 96%)',
-    'muted-foreground': 'hsl(240 4% 46%)',
-    accent: 'hsl(240 5% 94%)',
-    'accent-foreground': 'hsl(240 6% 10%)',
-    border: 'hsl(240 5% 91%)',
-    input: 'hsl(240 5% 91%)',
-    divider: 'hsl(240 5% 93%)',
-    radius: '1rem',
-    'sidebar-background': 'hsl(0 0% 99%)',
-    'sidebar-accent': 'hsl(240 5% 94%)',
-    'sidebar-border': 'hsl(240 5% 91%)',
-  },
-  dark: {
-    background: 'hsl(240 6% 8%)',
-    foreground: 'hsl(0 0% 96%)',
-    card: 'hsl(240 5% 12%)',
-    'card-foreground': 'hsl(0 0% 96%)',
-    muted: 'hsl(240 4% 16%)',
-    'muted-foreground': 'hsl(240 5% 64%)',
-    accent: 'hsl(240 5% 16%)',
-    'accent-foreground': 'hsl(0 0% 96%)',
-    border: 'hsl(240 5% 20%)',
-    input: 'hsl(240 5% 20%)',
-    divider: 'hsl(240 5% 48% / 0.18)',  // translucent hairline — dissolves into the page
-    radius: '1rem',
-    'sidebar-background': 'hsl(240 6% 6%)',
-    'sidebar-accent': 'hsl(240 5% 14%)',
-    'sidebar-border': 'hsl(240 5% 20%)',
-  },
-};

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

@@ -1,6 +0,0 @@
-import type { ThemeCssVarMap } from '../types';
-
-export interface ThemePreset {
-  light: ThemeCssVarMap;
-  dark: ThemeCssVarMap;
-}

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

@@ -1,154 +0,0 @@
-/**
- * Windows 11 Fluent Design: LayerFillColorDefault (#F3F3F3), AccentDark1 (#0067C0),
- * 6px radius (WinUI 3 cards), subtle Mica-style chrome.
- * Source: Microsoft Fluent 2 Design Tokens — https://fluent2.microsoft.design/color
- */
-import type { ThemePreset } from './types';
-
-/** Segoe UI Variable typography (Fluent Design: 14pt base, neutral spacing) */
-const fluentTypography = {
-  'font-sans': '"Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif',
-  'font-mono': '"Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace',
-  'font-size-base': '0.875rem',
-  'font-size-sm': '0.8125rem',
-  'font-size-xs': '0.75rem',
-  'font-size-lg': '1rem',
-  'font-size-xl': '1.125rem',
-  'line-height-base': '1.5',
-  'letter-spacing-base': '0em',
-} as const;
-
-export const windowsPreset: ThemePreset = {
-  light: {
-    // #F3F3F3 — LayerFillColorDefault
-    background: 'hsl(0 0% 95%)',
-    foreground: 'hsl(0 0% 9%)',
-    // CardBackgroundFillColorDefault
-    card: 'hsl(0 0% 100%)',
-    'card-foreground': 'hsl(0 0% 9%)',
-    popover: 'hsl(0 0% 100%)',
-    'popover-foreground': 'hsl(0 0% 9%)',
-    // #0067C0 — AccentDark1 (WCAG AA on white)
-    primary: 'hsl(210 100% 38%)',
-    'primary-foreground': 'hsl(0 0% 100%)',
-    // SubtleFillColorSecondaryBackground #F0F0F0
-    secondary: 'hsl(0 0% 94%)',
-    'secondary-foreground': 'hsl(0 0% 9%)',
-    // SubtleFillColorTertiaryBackground #EBEBEB
-    muted: 'hsl(0 0% 92%)',
-    'muted-foreground': 'hsl(0 0% 42%)',
-    accent: 'hsl(210 60% 94%)',
-    'accent-foreground': 'hsl(210 100% 28%)',
-    destructive: 'hsl(0 90% 55%)',
-    'destructive-foreground': 'hsl(0 0% 100%)',
-    // ControlStrokeColorDefault: rgba(0,0,0,0.0578)
-    border: 'hsl(0 0% 87%)',
-    input: 'hsl(0 0% 90%)',
-    // Hairline between rows — slightly lighter than border
-    divider: 'hsl(0 0% 84%)',
-    ring: 'hsl(210 100% 45%)',
-    // Fluent SmokeFillColorDefault — content dialogs dim the layer beneath.
-    overlay: 'hsl(0 0% 0% / 0.4)',
-    // WinUI 3: 4px controls, 8px cards/dialogs
-    radius: '0.375rem',
-    'sidebar-background': 'hsl(0 0% 92%)',
-    'sidebar-foreground': 'hsl(0 0% 9%)',
-    'sidebar-primary': 'hsl(210 100% 38%)',
-    'sidebar-primary-foreground': 'hsl(0 0% 100%)',
-    'sidebar-accent': 'hsl(210 50% 93%)',
-    'sidebar-accent-foreground': 'hsl(210 100% 28%)',
-    'sidebar-border': 'hsl(0 0% 86%)',
-    'sidebar-ring': 'hsl(210 100% 45%)',
-    'chart-1': 'hsl(210 100% 38%)',
-    'chart-2': 'hsl(145 63% 38%)',
-    'chart-3': 'hsl(262 83% 55%)',
-    'chart-4': 'hsl(35 100% 48%)',
-    'chart-5': 'hsl(346 77% 50%)',
-    // Status surfaces — Fluent system colors
-    warning: 'hsl(38 92% 50%)',
-    'warning-background': 'hsl(38 100% 95%)',
-    'warning-foreground': 'hsl(30 80% 28%)',
-    'warning-border': 'hsl(38 85% 78%)',
-    success: 'hsl(120 78% 27%)',
-    'success-background': 'hsl(120 55% 95%)',
-    'success-foreground': 'hsl(120 60% 28%)',
-    'success-border': 'hsl(120 45% 78%)',
-    'destructive-background': 'hsl(0 90% 96%)',
-    'destructive-border': 'hsl(0 85% 78%)',
-    info: 'hsl(210 100% 38%)',
-    'info-background': 'hsl(210 100% 95%)',
-    'info-foreground': 'hsl(210 90% 28%)',
-    'info-border': 'hsl(210 80% 78%)',
-    // On-fill ink: Fluent's light success/info fills are DARK (27%/38% L), so
-    // near-black (base --on-*) fails — these two need WHITE ink instead.
-    //   on-success vs success (120 78% 27%) → 5.5:1 (AA)
-    //   on-info    vs info    (210 100% 38%) → 6.0:1 (AA)
-    // warning/destructive light fills stay near-black (base value is correct).
-    'on-success': 'hsl(0 0% 100%)',
-    'on-info': 'hsl(0 0% 100%)',
-    ...fluentTypography,
-  },
-  dark: {
-    // #202020 — SolidBackgroundFillColorBase dark
-    background: 'hsl(0 0% 13%)',
-    foreground: 'hsl(0 0% 96%)',
-    // #2B2B2B — CardBackgroundFillColorDefault dark
-    card: 'hsl(0 0% 17%)',
-    'card-foreground': 'hsl(0 0% 96%)',
-    // #323232 — elevated surface
-    popover: 'hsl(0 0% 20%)',
-    'popover-foreground': 'hsl(0 0% 96%)',
-    // #60CDFF — AccentLight2 dark mode
-    primary: 'hsl(200 100% 69%)',
-    'primary-foreground': 'hsl(0 0% 9%)',
-    secondary: 'hsl(0 0% 22%)',
-    'secondary-foreground': 'hsl(0 0% 90%)',
-    // Recessed surface — below the page (bg 13%) and below card (17%), so
-    // bg-muted rails/chips read as sunk, not raised above the panel.
-    muted: 'hsl(0 0% 15%)',
-    'muted-foreground': 'hsl(0 0% 62%)',
-    accent: 'hsl(210 25% 20%)',
-    'accent-foreground': 'hsl(200 100% 75%)',
-    destructive: 'hsl(0 90% 62%)',
-    'destructive-foreground': 'hsl(0 0% 100%)',
-    // ControlStrokeColorDefault dark: rgba(255,255,255,0.0837)
-    border: 'hsl(0 0% 28%)',
-    input: 'hsl(0 0% 24%)',
-    // Hairline between rows — softer than border
-    divider: 'hsl(0 0% 46% / 0.18)',  // translucent hairline — dissolves into the page
-    ring: 'hsl(200 100% 69%)',
-    // Fluent SmokeFillColorDefault dark — dims the dark page behind the dialog.
-    overlay: 'hsl(0 0% 0% / 0.55)',
-    radius: '0.375rem',
-    // NavigationView pane background
-    'sidebar-background': 'hsl(0 0% 10%)',
-    'sidebar-foreground': 'hsl(0 0% 90%)',
-    'sidebar-primary': 'hsl(200 100% 69%)',
-    'sidebar-primary-foreground': 'hsl(0 0% 9%)',
-    'sidebar-accent': 'hsl(210 20% 18%)',
-    'sidebar-accent-foreground': 'hsl(200 100% 75%)',
-    'sidebar-border': 'hsl(0 0% 22%)',
-    'sidebar-ring': 'hsl(200 100% 69%)',
-    'chart-1': 'hsl(200 100% 69%)',
-    'chart-2': 'hsl(145 65% 50%)',
-    'chart-3': 'hsl(262 83% 65%)',
-    'chart-4': 'hsl(35 100% 58%)',
-    'chart-5': 'hsl(346 77% 58%)',
-    // Status surfaces — Fluent system colors
-    warning: 'hsl(38 95% 58%)',
-    'warning-background': 'hsl(38 60% 10%)',
-    'warning-foreground': 'hsl(38 90% 72%)',
-    'warning-border': 'hsl(38 50% 28%)',
-    success: 'hsl(120 60% 55%)',
-    'success-background': 'hsl(120 40% 10%)',
-    'success-foreground': 'hsl(120 55% 72%)',
-    'success-border': 'hsl(120 35% 28%)',
-    'destructive-background': 'hsl(0 60% 11%)',
-    'destructive-border': 'hsl(0 50% 30%)',
-    info: 'hsl(200 100% 69%)',
-    'info-background': 'hsl(200 60% 11%)',
-    'info-foreground': 'hsl(200 90% 74%)',
-    'info-border': 'hsl(200 50% 30%)',
-    ...fluentTypography,
-  },
-};