@djangocfg/ui-core 2.1.394 → 2.1.395

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

@@ -2,73 +2,73 @@ import type { ThemePreset } from './types';
 
 export const iosPreset: ThemePreset = {
   light: {
-    background: '0 0% 98%',
-    foreground: '220 9% 12%',
-    card: '0 0% 100%',
-    'card-foreground': '220 9% 12%',
-    popover: '0 0% 100%',
-    'popover-foreground': '220 9% 12%',
-    primary: '211 100% 50%',
-    'primary-foreground': '0 0% 100%',
-    secondary: '220 9% 92%',
-    'secondary-foreground': '220 9% 12%',
-    muted: '220 9% 94%',
-    'muted-foreground': '220 9% 40%',
-    accent: '220 9% 94%',
-    'accent-foreground': '220 9% 12%',
-    destructive: '0 100% 58%',
-    'destructive-foreground': '0 0% 100%',
-    border: '220 9% 88%',
-    input: '220 9% 88%',
-    ring: '211 100% 50%',
+    background: 'hsl(0 0% 98%)',
+    foreground: 'hsl(220 9% 12%)',
+    card: 'hsl(0 0% 100%)',
+    'card-foreground': 'hsl(220 9% 12%)',
+    popover: 'hsl(0 0% 100%)',
+    'popover-foreground': 'hsl(220 9% 12%)',
+    primary: 'hsl(211 100% 50%)',
+    'primary-foreground': 'hsl(0 0% 100%)',
+    secondary: 'hsl(220 9% 92%)',
+    'secondary-foreground': 'hsl(220 9% 12%)',
+    muted: 'hsl(220 9% 94%)',
+    'muted-foreground': 'hsl(220 9% 40%)',
+    accent: 'hsl(220 9% 94%)',
+    'accent-foreground': 'hsl(220 9% 12%)',
+    destructive: 'hsl(0 100% 58%)',
+    'destructive-foreground': 'hsl(0 0% 100%)',
+    border: 'hsl(220 9% 88%)',
+    input: 'hsl(220 9% 88%)',
+    ring: 'hsl(211 100% 50%)',
     radius: '0.75rem',
-    'sidebar-background': '0 0% 99%',
-    'sidebar-foreground': '220 9% 12%',
-    'sidebar-primary': '211 100% 50%',
-    'sidebar-primary-foreground': '0 0% 100%',
-    'sidebar-accent': '220 9% 94%',
-    'sidebar-accent-foreground': '220 9% 12%',
-    'sidebar-border': '220 9% 88%',
-    'sidebar-ring': '211 100% 50%',
-    'chart-1': '211 100% 50%',
-    'chart-2': '145 63% 42%',
-    'chart-3': '262 83% 58%',
-    'chart-4': '35 100% 50%',
-    'chart-5': '346 77% 50%',
+    'sidebar-background': 'hsl(0 0% 99%)',
+    'sidebar-foreground': 'hsl(220 9% 12%)',
+    'sidebar-primary': 'hsl(211 100% 50%)',
+    'sidebar-primary-foreground': 'hsl(0 0% 100%)',
+    'sidebar-accent': 'hsl(220 9% 94%)',
+    'sidebar-accent-foreground': 'hsl(220 9% 12%)',
+    'sidebar-border': 'hsl(220 9% 88%)',
+    'sidebar-ring': 'hsl(211 100% 50%)',
+    'chart-1': 'hsl(211 100% 50%)',
+    'chart-2': 'hsl(145 63% 42%)',
+    'chart-3': 'hsl(262 83% 58%)',
+    'chart-4': 'hsl(35 100% 50%)',
+    'chart-5': 'hsl(346 77% 50%)',
   },
   dark: {
-    background: '240 6% 10%',
-    foreground: '0 0% 96%',
-    card: '240 6% 14%',
-    'card-foreground': '0 0% 96%',
-    popover: '240 6% 16%',
-    'popover-foreground': '0 0% 96%',
-    primary: '211 100% 55%',
-    'primary-foreground': '0 0% 100%',
-    secondary: '240 5% 26%',
-    'secondary-foreground': '0 0% 96%',
-    muted: '240 5% 16%',
-    'muted-foreground': '240 5% 64%',
-    accent: '240 5% 18%',
-    'accent-foreground': '0 0% 96%',
-    destructive: '0 100% 67%',
-    'destructive-foreground': '0 0% 100%',
-    border: '240 5% 22%',
-    input: '240 5% 22%',
-    ring: '211 100% 55%',
+    background: 'hsl(240 6% 10%)',
+    foreground: 'hsl(0 0% 96%)',
+    card: 'hsl(240 6% 14%)',
+    'card-foreground': 'hsl(0 0% 96%)',
+    popover: 'hsl(240 6% 16%)',
+    'popover-foreground': 'hsl(0 0% 96%)',
+    primary: 'hsl(211 100% 55%)',
+    'primary-foreground': 'hsl(0 0% 100%)',
+    secondary: 'hsl(240 5% 26%)',
+    'secondary-foreground': 'hsl(0 0% 96%)',
+    muted: 'hsl(240 5% 16%)',
+    'muted-foreground': 'hsl(240 5% 64%)',
+    accent: 'hsl(240 5% 18%)',
+    'accent-foreground': 'hsl(0 0% 96%)',
+    destructive: 'hsl(0 100% 67%)',
+    'destructive-foreground': 'hsl(0 0% 100%)',
+    border: 'hsl(240 5% 22%)',
+    input: 'hsl(240 5% 22%)',
+    ring: 'hsl(211 100% 55%)',
     radius: '0.75rem',
-    'sidebar-background': '240 6% 8%',
-    'sidebar-foreground': '0 0% 96%',
-    'sidebar-primary': '211 100% 55%',
-    'sidebar-primary-foreground': '0 0% 100%',
-    'sidebar-accent': '240 5% 16%',
-    'sidebar-accent-foreground': '0 0% 96%',
-    'sidebar-border': '240 5% 22%',
-    'sidebar-ring': '211 100% 55%',
-    'chart-1': '211 100% 55%',
-    'chart-2': '145 65% 52%',
-    'chart-3': '262 83% 65%',
-    'chart-4': '35 100% 58%',
-    'chart-5': '346 77% 58%',
+    'sidebar-background': 'hsl(240 6% 8%)',
+    'sidebar-foreground': 'hsl(0 0% 96%)',
+    'sidebar-primary': 'hsl(211 100% 55%)',
+    'sidebar-primary-foreground': 'hsl(0 0% 100%)',
+    'sidebar-accent': 'hsl(240 5% 16%)',
+    'sidebar-accent-foreground': 'hsl(0 0% 96%)',
+    'sidebar-border': 'hsl(240 5% 22%)',
+    'sidebar-ring': 'hsl(211 100% 55%)',
+    'chart-1': 'hsl(211 100% 55%)',
+    'chart-2': 'hsl(145 65% 52%)',
+    'chart-3': 'hsl(262 83% 65%)',
+    'chart-4': 'hsl(35 100% 58%)',
+    'chart-5': 'hsl(346 77% 58%)',
   },
 };

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

@@ -29,97 +29,97 @@ const appleTypography = {
 export const macosPreset: ThemePreset = {
   light: {
     // systemGroupedBackground #F2F2F7 — main page canvas
-    background: '240 17% 97%',
-    foreground: '0 0% 7%',
+    background: 'hsl(240 17% 97%)',
+    foreground: 'hsl(0 0% 7%)',
     // Cards: pure white elevated surface — standard Apple insetGrouped cell
-    card: '0 0% 100%',
-    'card-foreground': '0 0% 7%',
+    card: 'hsl(0 0% 100%)',
+    'card-foreground': 'hsl(0 0% 7%)',
     // Popovers / context menus: white with system drop shadow
-    popover: '0 0% 100%',
-    'popover-foreground': '0 0% 7%',
+    popover: 'hsl(0 0% 100%)',
+    'popover-foreground': 'hsl(0 0% 7%)',
     // systemBlue #007AFF
-    primary: '211 100% 50%',
-    'primary-foreground': '0 0% 100%',
+    primary: 'hsl(211 100% 50%)',
+    'primary-foreground': 'hsl(0 0% 100%)',
     // secondarySystemGroupedBackground #EFEFF4 — section headers, nested surfaces
-    secondary: '240 12% 95%',
-    'secondary-foreground': '0 0% 7%',
+    secondary: 'hsl(240 12% 95%)',
+    'secondary-foreground': 'hsl(0 0% 7%)',
     // tertiarySystemGroupedBackground #E5E5EA — chips, tag pills, disabled fills
-    muted: '240 8% 91%',
-    'muted-foreground': '240 3% 44%',
+    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: '211 50% 96%',
-    'accent-foreground': '211 100% 36%',
+    accent: 'hsl(211 50% 96%)',
+    'accent-foreground': 'hsl(211 100% 36%)',
     // systemRed #FF3B30
-    destructive: '2 100% 59%',
-    'destructive-foreground': '0 0% 100%',
+    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: '240 3% 78%',
-    input: '240 8% 93%',
-    ring: '211 100% 50%',
+    border: 'hsl(240 3% 78%)',
+    input: 'hsl(240 8% 93%)',
+    ring: 'hsl(211 100% 50%)',
     radius: '0.625rem',
     // Sidebar: slighly darker than page, matches macOS sidebar material
-    'sidebar-background': '240 12% 94%',
-    'sidebar-foreground': '0 0% 7%',
-    'sidebar-primary': '211 100% 50%',
-    'sidebar-primary-foreground': '0 0% 100%',
-    'sidebar-accent': '211 50% 93%',
-    'sidebar-accent-foreground': '211 100% 36%',
-    'sidebar-border': '240 3% 82%',
-    'sidebar-ring': '211 100% 50%',
+    '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': '211 100% 50%',
-    'chart-2': '142 52% 40%',
-    'chart-3': '262 60% 56%',
-    'chart-4': '35 100% 48%',
-    'chart-5': '2 100% 59%',
+    '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%)',
     ...appleTypography,
   },
   dark: {
     // Deeper than stock #1C1C1E — matches Sequoia dark finder/mail chrome (#141414)
-    background: '240 5% 8%',
-    foreground: '0 0% 95%',
+    background: 'hsl(240 5% 8%)',
+    foreground: 'hsl(0 0% 95%)',
     // secondarySystemBackground #1E1E20 — cards slightly elevated
-    card: '240 3% 12%',
-    'card-foreground': '0 0% 95%',
+    card: 'hsl(240 3% 12%)',
+    'card-foreground': 'hsl(0 0% 95%)',
     // #2C2C2E — popovers, menus, dropdowns
-    popover: '240 3% 17%',
-    'popover-foreground': '0 0% 95%',
+    popover: 'hsl(240 3% 17%)',
+    'popover-foreground': 'hsl(0 0% 95%)',
     // systemBlue dark #0A84FF
-    primary: '211 100% 58%',
-    'primary-foreground': '0 0% 100%',
+    primary: 'hsl(211 100% 58%)',
+    'primary-foreground': 'hsl(0 0% 100%)',
     // Elevated neutral surface — slightly lighter than card
-    secondary: '240 3% 20%',
-    'secondary-foreground': '0 0% 88%',
+    secondary: 'hsl(240 3% 20%)',
+    'secondary-foreground': 'hsl(0 0% 88%)',
     // tertiarySystemBackground #3A3A3C — chips, tags, muted fills
-    muted: '240 3% 23%',
-    'muted-foreground': '240 4% 58%',
+    muted: 'hsl(240 3% 23%)',
+    'muted-foreground': 'hsl(240 4% 58%)',
     // Blue-tinted hover (Apple active state in dark)
-    accent: '211 25% 19%',
-    'accent-foreground': '211 100% 72%',
+    accent: 'hsl(211 25% 19%)',
+    'accent-foreground': 'hsl(211 100% 72%)',
     // systemRed dark #FF453A
-    destructive: '3 100% 62%',
-    'destructive-foreground': '0 0% 100%',
+    destructive: 'hsl(3 100% 62%)',
+    'destructive-foreground': 'hsl(0 0% 100%)',
     // Separator dark: rgba(84,84,88,0.36) — ultra-thin, almost invisible
-    border: '240 3% 22%',
-    input: '240 3% 19%',
-    ring: '211 100% 58%',
+    border: 'hsl(240 3% 22%)',
+    input: 'hsl(240 3% 19%)',
+    ring: 'hsl(211 100% 58%)',
     radius: '0.625rem',
     // 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 22% 16%',
-    'sidebar-accent-foreground': '211 100% 72%',
-    'sidebar-border': '240 3% 15%',
-    'sidebar-ring': '211 100% 58%',
+    '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': '211 100% 58%',
-    'chart-2': '142 52% 50%',
-    'chart-3': '262 60% 65%',
-    'chart-4': '35 100% 56%',
-    'chart-5': '3 100% 62%',
+    '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%)',
     ...appleTypography,
   },
 };

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

@@ -2,34 +2,34 @@ import type { ThemePreset } from './types';
 
 export const softPreset: ThemePreset = {
   light: {
-    background: '0 0% 98%',
-    foreground: '240 6% 10%',
-    card: '0 0% 100%',
-    'card-foreground': '240 6% 10%',
-    muted: '240 5% 96%',
-    'muted-foreground': '240 4% 46%',
-    accent: '240 5% 94%',
-    'accent-foreground': '240 6% 10%',
-    border: '240 5% 91%',
-    input: '240 5% 91%',
+    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%)',
     radius: '1rem',
-    'sidebar-accent': '240 5% 94%',
-    'sidebar-border': '240 5% 91%',
+    'sidebar-accent': 'hsl(240 5% 94%)',
+    'sidebar-border': 'hsl(240 5% 91%)',
   },
   dark: {
-    background: '240 6% 8%',
-    foreground: '0 0% 96%',
-    card: '240 5% 12%',
-    'card-foreground': '0 0% 96%',
-    muted: '240 4% 16%',
-    'muted-foreground': '240 5% 64%',
-    accent: '240 5% 16%',
-    'accent-foreground': '0 0% 96%',
-    border: '240 5% 20%',
-    input: '240 5% 20%',
+    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%)',
     radius: '1rem',
-    'sidebar-background': '240 6% 6%',
-    'sidebar-accent': '240 5% 14%',
-    'sidebar-border': '240 5% 20%',
+    'sidebar-background': 'hsl(240 6% 6%)',
+    'sidebar-accent': 'hsl(240 5% 14%)',
+    'sidebar-border': 'hsl(240 5% 20%)',
   },
 };

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

@@ -21,87 +21,87 @@ const fluentTypography = {
 export const windowsPreset: ThemePreset = {
   light: {
     // #F3F3F3 — LayerFillColorDefault
-    background: '0 0% 95%',
-    foreground: '0 0% 9%',
+    background: 'hsl(0 0% 95%)',
+    foreground: 'hsl(0 0% 9%)',
     // CardBackgroundFillColorDefault
-    card: '0 0% 100%',
-    'card-foreground': '0 0% 9%',
-    popover: '0 0% 100%',
-    'popover-foreground': '0 0% 9%',
+    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: '210 100% 38%',
-    'primary-foreground': '0 0% 100%',
+    primary: 'hsl(210 100% 38%)',
+    'primary-foreground': 'hsl(0 0% 100%)',
     // SubtleFillColorSecondaryBackground #F0F0F0
-    secondary: '0 0% 94%',
-    'secondary-foreground': '0 0% 9%',
+    secondary: 'hsl(0 0% 94%)',
+    'secondary-foreground': 'hsl(0 0% 9%)',
     // SubtleFillColorTertiaryBackground #EBEBEB
-    muted: '0 0% 92%',
-    'muted-foreground': '0 0% 42%',
-    accent: '210 60% 94%',
-    'accent-foreground': '210 100% 28%',
-    destructive: '0 90% 55%',
-    'destructive-foreground': '0 0% 100%',
+    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: '0 0% 87%',
-    input: '0 0% 90%',
-    ring: '210 100% 45%',
+    border: 'hsl(0 0% 87%)',
+    input: 'hsl(0 0% 90%)',
+    ring: 'hsl(210 100% 45%)',
     // WinUI 3: 4px controls, 8px cards/dialogs
     radius: '0.375rem',
-    'sidebar-background': '0 0% 92%',
-    'sidebar-foreground': '0 0% 9%',
-    'sidebar-primary': '210 100% 38%',
-    'sidebar-primary-foreground': '0 0% 100%',
-    'sidebar-accent': '210 50% 93%',
-    'sidebar-accent-foreground': '210 100% 28%',
-    'sidebar-border': '0 0% 86%',
-    'sidebar-ring': '210 100% 45%',
-    'chart-1': '210 100% 38%',
-    'chart-2': '145 63% 38%',
-    'chart-3': '262 83% 55%',
-    'chart-4': '35 100% 48%',
-    'chart-5': '346 77% 50%',
+    '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%)',
     ...fluentTypography,
   },
   dark: {
     // #202020 — SolidBackgroundFillColorBase dark
-    background: '0 0% 13%',
-    foreground: '0 0% 96%',
+    background: 'hsl(0 0% 13%)',
+    foreground: 'hsl(0 0% 96%)',
     // #2B2B2B — CardBackgroundFillColorDefault dark
-    card: '0 0% 17%',
-    'card-foreground': '0 0% 96%',
+    card: 'hsl(0 0% 17%)',
+    'card-foreground': 'hsl(0 0% 96%)',
     // #323232 — elevated surface
-    popover: '0 0% 20%',
-    'popover-foreground': '0 0% 96%',
+    popover: 'hsl(0 0% 20%)',
+    'popover-foreground': 'hsl(0 0% 96%)',
     // #60CDFF — AccentLight2 dark mode
-    primary: '200 100% 69%',
-    'primary-foreground': '0 0% 9%',
-    secondary: '0 0% 22%',
-    'secondary-foreground': '0 0% 90%',
-    muted: '0 0% 18%',
-    'muted-foreground': '0 0% 62%',
-    accent: '210 25% 20%',
-    'accent-foreground': '200 100% 75%',
-    destructive: '0 90% 62%',
-    'destructive-foreground': '0 0% 100%',
+    primary: 'hsl(200 100% 69%)',
+    'primary-foreground': 'hsl(0 0% 9%)',
+    secondary: 'hsl(0 0% 22%)',
+    'secondary-foreground': 'hsl(0 0% 90%)',
+    muted: 'hsl(0 0% 18%)',
+    '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: '0 0% 28%',
-    input: '0 0% 24%',
-    ring: '200 100% 69%',
+    border: 'hsl(0 0% 28%)',
+    input: 'hsl(0 0% 24%)',
+    ring: 'hsl(200 100% 69%)',
     radius: '0.375rem',
     // NavigationView pane background
-    'sidebar-background': '0 0% 10%',
-    'sidebar-foreground': '0 0% 90%',
-    'sidebar-primary': '200 100% 69%',
-    'sidebar-primary-foreground': '0 0% 9%',
-    'sidebar-accent': '210 20% 18%',
-    'sidebar-accent-foreground': '200 100% 75%',
-    'sidebar-border': '0 0% 22%',
-    'sidebar-ring': '200 100% 69%',
-    'chart-1': '200 100% 69%',
-    'chart-2': '145 65% 50%',
-    'chart-3': '262 83% 65%',
-    'chart-4': '35 100% 58%',
-    'chart-5': '346 77% 58%',
+    '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%)',
     ...fluentTypography,
   },
 };

package/src/styles/presets/types.ts

@@ -3,7 +3,16 @@
  * non-Next.js consumer can use presets without pulling in @djangocfg/layouts.
  */
 
-/** Core semantic colors (HSL triplets, no hsl() wrapper) */
+/**
+ * Core semantic colors — **fully-wrapped CSS colors** (`hsl(...)`, `oklch(...)`, `#rrggbb`, …).
+ *
+ * Required by the `@theme inline { --color-X: var(--X); }` shape so Tailwind's
+ * opacity modifier (`bg-card/40`) can resolve through `color-mix`. Bare HSL
+ * triplets (`240 17% 97%`) silently break every opacity modifier — they used
+ * to work via a manual `hsl(var(--X))` wrapper in tokens.css; that wrapper is
+ * gone after the v4 refactor. Same rule for `border` / `ring` / `chart-*` /
+ * `sidebar-*` (every color-typed key). `radius` + typography keys stay raw.
+ */
 export type ThemeCssVarColorKey =
   | 'background'
   | 'foreground'
@@ -63,7 +72,21 @@ export type ThemeCssVarKey =
 /** Partial map of semantic variables for one color mode */
 export type ThemeCssVarMap = Partial<Record<ThemeCssVarKey, string>>;
 
-/** Built-in preset IDs */
+/**
+ * Built-in preset IDs.
+ *
+ * Two families:
+ *   - Brand / OS-native: default, django-cfg, ios, macos, windows
+ *     (pixel-accurate Apple HIG / Microsoft Fluent tokens — useful for
+ *     Wails/Electron desktop and mobile web).
+ *   - Density / accessibility: soft (radius 1rem), dense (0.25rem),
+ *     high-contrast (a11y).
+ *
+ * The earlier code-editor vibe palette (catppuccin / dracula / github /
+ * gruvbox / material / nord / one-dark / solarized / tokyo-night) was
+ * removed in May 2026 — those are for IDE skins, not admin/desktop UI.
+ * Re-add a preset only when a real product needs it.
+ */
 export type ThemeStylePresetId =
   | 'default'
   | 'django-cfg'
@@ -72,16 +95,7 @@ export type ThemeStylePresetId =
   | 'windows'
   | 'soft'
   | 'dense'
-  | 'high-contrast'
-  | 'catppuccin'
-  | 'dracula'
-  | 'github'
-  | 'gruvbox'
-  | 'material'
-  | 'nord'
-  | 'one-dark'
-  | 'solarized'
-  | 'tokyo-night';
+  | 'high-contrast';
 
 /**
  * Optional style layer: named preset + per-mode overrides.