@djangocfg/ui-core 2.1.426 → 2.1.428

package/src/styles/theme/dark.css

@@ -13,30 +13,42 @@
  */
 
 .dark {
-  /* Base colors - True black background with subtle grays */
-  --background: hsl(0 0% 4%);
-  --foreground: hsl(0 0% 98%);
-  --card: hsl(0 0% 8%);
-  --card-foreground: hsl(0 0% 98%);
-  --popover: hsl(0 0% 12%);
-  --popover-foreground: hsl(0 0% 98%);
+  /* Warm-gray surface ladder mapped from Claude's dark theme (hue ~48–60, a
+   * faint warm tint instead of pure neutral). The VISIBLE page background is
+   * Claude's bg-100 (~14.5%) — NOT near-black; card/popover lift above it so
+   * panels and menus read as raised. muted recesses below the page.
+   *   page ≈ bg-100   card ≈ bg-000(18.4%)   popover ≈ slightly above card */
+  --background: hsl(60 2.7% 14.5%);
+  --foreground: hsl(48 33% 97%);
+  --card: hsl(60 2.1% 18.4%);
+  --card-foreground: hsl(48 33% 97%);
+  --popover: hsl(48 2.5% 21%);
+  --popover-foreground: hsl(48 33% 97%);
   /* Exact brand: #00d9ff (same HSL as :root light primary) */
   --primary: hsl(189 100% 50%);
   /* Dark label on bright cyan — stronger contrast than white on #00d9ff */
   --primary-foreground: hsl(0 0% 9%);
-  /* Secondary: dark elevated surface + light label (matches typical shadcn dark “secondary” role) */
-  --secondary: hsl(0 0% 16%);
-  --secondary-foreground: hsl(0 0% 96%);
-  --muted: hsl(0 0% 10%);
-  --muted-foreground: hsl(0 0% 60%);
-  /* Cyan-tinted elevated surface */
-  --accent: hsl(189 18% 17%);
-  --accent-foreground: hsl(0 0% 98%);
-  --destructive: hsl(0 84% 60%);
+  /* Secondary: elevated warm-gray control surface + light label */
+  --secondary: hsl(60 2.1% 18.4%);
+  --secondary-foreground: hsl(48 33% 97%);
+  /* Recessed surface — below the page (Claude bg-200), for input rest / chips. */
+  --muted: hsl(30 3.3% 11.8%);
+  --muted-foreground: hsl(48 5% 59%);
+  /* Hover/active surface (rails, menus, tabs) — a quiet warm lift above the page. */
+  --accent: hsl(48 3% 24%);
+  --accent-foreground: hsl(48 33% 97%);
+  --destructive: hsl(0 67% 60%);
   --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(0 0% 15%);
-  --input: hsl(0 0% 15%);
-  --ring: hsl(189 100% 50%);
+  /* Soft warm border — Claude draws hairlines from a light border at low
+   * contrast, so a mid warm-gray keeps lines visible but never harsh. */
+  --border: hsl(48 3% 28%);
+  /* Input surface — a notch above card so fields read as raised controls. */
+  --input: hsl(48 2.5% 24%);
+  /* Divider — hairline; slightly softer than --border so rows don't read as a
+   * hard rule (Claude menus/rows). */
+  --divider: hsl(48 3% 24%);
+  /* Focus ring — blue (system-accent feel), independent of the cyan brand. */
+  --ring: hsl(217 91% 60%);
   --shadow-card: none;
 
   /* Code surface — see light.css for the rationale. On dark we want
@@ -49,15 +61,17 @@
   --code-border: hsl(0 0% 18%);
   --code-inline: hsl(0 0% 14%);
   --code-inline-foreground: hsl(0 0% 92%);
-  /* Sidebar Dark Theme - Darker black sidebar */
-  --sidebar-background: hsl(0 0% 0%);
-  --sidebar-foreground: hsl(0 0% 98%);
+  /* Sidebar — same warm-gray family as the page (Claude has NO black sidebar
+   * block; rail and page share one tone). A hair darker than --background for
+   * subtle separation, not a hard black slab. */
+  --sidebar-background: hsl(30 3% 11.8%);
+  --sidebar-foreground: hsl(48 33% 97%);
   --sidebar-primary: hsl(189 100% 50%);
   --sidebar-primary-foreground: hsl(0 0% 9%);
-  --sidebar-accent: hsl(189 14% 12%);
-  --sidebar-accent-foreground: hsl(0 0% 98%);
-  --sidebar-border: hsl(0 0% 15%);
-  --sidebar-ring: hsl(189 100% 50%);
+  --sidebar-accent: hsl(48 3% 24%);
+  --sidebar-accent-foreground: hsl(48 33% 97%);
+  --sidebar-border: hsl(48 3% 28%);
+  --sidebar-ring: hsl(217 91% 60%);
   /* ── Status surfaces (dark) ──────────────────────────────────────
    * Dark variants: dim backgrounds (~8-12% lightness) so banners
    * don't blow out against the near-black page. Foreground raised
@@ -85,10 +99,12 @@
   /* Surface gradient dark */
   --surface-gradient: linear-gradient(to bottom, var(--background), color-mix(in oklab, var(--background) 80%, transparent));
 
-  /* Chart colors — chart-1 aligned with brand */
-  --chart-1: 189 100% 50%;
-  --chart-2: 142 76% 36%;
-  --chart-3: 262 83% 58%;
-  --chart-4: 26 90% 57%;
-  --chart-5: 346 77% 50%;
+  /* Chart colors — chart-1 aligned with brand.
+   * Fully-wrapped hsl() like every other token (consume via `bg-chart-N` or
+   * `var(--chart-N)`, never `hsl(var(--chart-N))`). */
+  --chart-1: hsl(189 100% 50%);
+  --chart-2: hsl(142 76% 36%);
+  --chart-3: hsl(262 83% 58%);
+  --chart-4: hsl(26 90% 57%);
+  --chart-5: hsl(346 77% 50%);
 }

package/src/styles/theme/light.css

@@ -24,14 +24,20 @@
   --secondary-foreground: hsl(0 0% 98%);
   --muted: hsl(0 0% 96%);
   --muted-foreground: hsl(0 0% 45%);
-  /* Subtle cyan-tinted hover surface (not gray-only) */
-  --accent: hsl(192 18% 94%);
+  /* Neutral hover/active surface — quiet gray lift, no hue tint
+   * (Claude/macOS settings convention). */
+  --accent: hsl(0 0% 94%);
   --accent-foreground: hsl(0 0% 9%);
   --destructive: hsl(0 84% 60%);
   --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(0 0% 90%);
-  --input: hsl(0 0% 90%);
-  --ring: hsl(192 90% 35%);
+  --border: hsl(0 0% 87%);
+  /* Input surface — faint gray fill so fields are visible on white cards. */
+  --input: hsl(0 0% 97%);
+  /* Divider — hairline between rows; slightly darker than --border so it reads
+   * on white cards. */
+  --divider: hsl(0 0% 88%);
+  /* Focus ring — blue (system-accent feel), independent of the cyan brand. */
+  --ring: hsl(217 91% 55%);
   --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
 
   /* Code surface — used by markdown code fences, terminal blocks,
@@ -54,10 +60,10 @@
   --sidebar-foreground: hsl(0 0% 9%);
   --sidebar-primary: hsl(192 90% 35%);
   --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(189 16% 95%);
+  --sidebar-accent: hsl(0 0% 95%);
   --sidebar-accent-foreground: hsl(0 0% 9%);
   --sidebar-border: hsl(0 0% 90%);
-  --sidebar-ring: hsl(192 90% 35%);
+  --sidebar-ring: hsl(217 91% 55%);
   /* ── Status surfaces ─────────────────────────────────────────────
    * Each status has 4 tokens: icon/accent color, page background,
    * readable foreground text, and border ring.
@@ -86,10 +92,12 @@
   /* Surface gradient */
   --surface-gradient: linear-gradient(to bottom, var(--background), color-mix(in oklab, var(--background) 80%, transparent));
 
-  /* Chart colors — chart-1 aligned with brand hue */
-  --chart-1: 192 90% 35%;
-  --chart-2: 142 76% 36%;
-  --chart-3: 262 83% 58%;
-  --chart-4: 26 90% 57%;
-  --chart-5: 346 77% 50%;
+  /* Chart colors — chart-1 aligned with brand hue.
+   * Fully-wrapped hsl() like every other token (consume via `bg-chart-N` or
+   * `var(--chart-N)`, never `hsl(var(--chart-N))`). */
+  --chart-1: hsl(192 90% 35%);
+  --chart-2: hsl(142 76% 36%);
+  --chart-3: hsl(262 83% 58%);
+  --chart-4: hsl(26 90% 57%);
+  --chart-5: hsl(346 77% 50%);
 }

package/src/styles/theme/tokens.css

@@ -44,6 +44,7 @@
   --color-destructive-foreground: var(--destructive-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
+  --color-divider: var(--divider);
   --color-ring: var(--ring);
 
   /* Status surfaces */
@@ -82,6 +83,28 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Charts — categorical series. `--chart-N` are fully-wrapped colors in
+   * light/dark/preset, so this is a plain reference (NOT `hsl(var(...))`).
+   * Backs the `bg-chart-1` / `text-chart-2` / `border-chart-3` utilities and
+   * their opacity modifiers (`bg-chart-1/40`). For Recharts/shadcn `color:`
+   * props pass `var(--chart-N)` directly. */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Typography — `font-sans` / `font-mono` utilities read `--font-sans` /
+   * `--font-mono` directly (those live in base.css, retinted per preset), so
+   * no binding is needed for them. Tailwind's text scale reads `--text-*`,
+   * which we bridge to the preset-overridable `--font-size-*` tokens so
+   * `text-xs…text-xl` follow the active preset instead of Tailwind defaults. */
+  --text-xs: var(--font-size-xs);
+  --text-sm: var(--font-size-sm);
+  --text-base: var(--font-size-base);
+  --text-lg: var(--font-size-lg);
+  --text-xl: var(--font-size-xl);
 }
 
 @theme {

package/src/styles/utilities/controls.css

@@ -0,0 +1,12 @@
+/**
+ * Control utilities
+ *
+ * Shared corner radius for interactive controls (nav items, inputs, search,
+ * value chips) via the `--radius-control` token, so they round consistently
+ * and stay themeable per preset. Plain CSS class — compiles regardless of the
+ * Tailwind content scan.
+ */
+
+.rounded-control {
+  border-radius: var(--radius-control);
+}

package/src/styles/utilities/divider.css

@@ -0,0 +1,23 @@
+/**
+ * Divider utilities
+ *
+ * Hairline separators that use the dedicated `--divider` token (lighter than
+ * `--border` on elevated surfaces, so rows inside cards/dialogs stay visible).
+ *
+ * Plain CSS classes — NOT JIT-scanned Tailwind utilities — so they compile
+ * regardless of which package's source files the Tailwind content scan covers.
+ * Use these for settings rows, list items, and any inset divider.
+ */
+
+.divider-b {
+  border-bottom: 1px solid var(--divider);
+}
+
+.divider-t {
+  border-top: 1px solid var(--divider);
+}
+
+/* Suppress the divider on the last child in a list of `.divider-b` rows. */
+.divider-b:last-child {
+  border-bottom: 0;
+}

package/src/styles/utilities.css

@@ -7,6 +7,8 @@
  */
 
 @import './utilities/display.css';
+@import './utilities/divider.css';
+@import './utilities/controls.css';
 @import './utilities/step.css';
 @import './utilities/animations.css';
 @import './utilities/glass.css';

package/src/theme/ThemeSegmented.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+/**
+ * ThemeSegmented — a 3-way System / Light / Dark segmented control
+ * (Claude / macOS settings style), as opposed to the binary `ThemeToggle`.
+ *
+ * Reads/writes the full theme via `useThemeContext` (`theme` + `setTheme`,
+ * which support `'system'`). Must be used within ThemeProvider. SSR-safe:
+ * renders a stable placeholder until mounted to avoid hydration mismatch.
+ */
+
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+import { cn } from '../lib/utils';
+import { useThemeContext, type Theme } from './ThemeProvider';
+
+export interface ThemeSegmentedProps {
+  className?: string;
+  /** Compact paddings for tight rows. */
+  size?: 'default' | 'compact';
+}
+
+const OPTIONS: Array<{ value: Theme; icon: React.ComponentType<{ className?: string }>; label: string }> = [
+  { value: 'system', icon: Monitor, label: 'System' },
+  { value: 'light', icon: Sun, label: 'Light' },
+  { value: 'dark', icon: Moon, label: 'Dark' },
+];
+
+export function ThemeSegmented({ className, size = 'default' }: ThemeSegmentedProps) {
+  const { theme, setTheme } = useThemeContext();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  const active: Theme = mounted ? (theme ?? 'system') : 'system';
+  const btn = size === 'compact' ? 'h-7 w-7' : 'h-8 w-8';
+  const icon = size === 'compact' ? 'size-3.5' : 'size-4';
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label="Theme"
+      className={cn(
+        'rounded-control inline-flex items-center gap-0.5 border border-border bg-muted p-0.5',
+        className,
+      )}
+    >
+      {OPTIONS.map(({ value, icon: Icon, label }) => {
+        const selected = active === value;
+        return (
+          <button
+            key={value}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            aria-label={label}
+            title={label}
+            onClick={() => setTheme(value)}
+            className={cn(
+              'inline-flex items-center justify-center rounded-[calc(var(--radius-control)-0.25rem)] transition-colors',
+              btn,
+              selected
+                ? 'bg-background text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground',
+            )}
+          >
+            <Icon className={icon} />
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/theme/index.ts

@@ -4,6 +4,8 @@ export { ThemeProvider, useThemeContext } from './ThemeProvider';
 export type { Theme, ThemeProviderProps } from './ThemeProvider';
 export { ThemeToggle } from './ThemeToggle';
 export type { ThemeToggleProps, ThemeLockBehavior } from './ThemeToggle';
+export { ThemeSegmented } from './ThemeSegmented';
+export type { ThemeSegmentedProps } from './ThemeSegmented';
 export { ForceTheme } from './ForceTheme';
 export { ThemeOverride, resolveForcedTheme } from './ThemeOverride';
 export type { ThemeOverrideRule, ThemeOverrideProps, ForcedTheme } from './ThemeOverride';