@djangocfg/ui-core 2.1.426 → 2.1.427

package/src/styles/README.md

@@ -9,8 +9,9 @@ styles/
 ├── full.css               # Golden path (recommended) — Tailwind + tokens + base + utilities, cascade-layer-safe
 ├── index.css              # Plain entry (no Tailwind, unlayered) — you own layer ordering
 ├── theme.css              # Imports tokens.css → animations → light → dark
-├── base.css               # Resets + `*` border-color + body bg/color
-├── utilities.css          # Custom utilities (.glass-*, .step, animations)
+├── base.css               # Resets + `*` border-color + body bg/color + radius scale + native focus-outline reset
+├── utilities.css          # Custom utilities entry — imports utilities/*
+│   └── utilities/         # display · divider · controls · step · animations · glass · marquee
 ├── sources.css            # @source directives for monorepo class detection
 ├── palette/               # JS-readable color access (Canvas/SVG/Mermaid)
 └── theme/
@@ -53,17 +54,18 @@ This makes opacity modifiers (`bg-card/40`, `border-foreground/20`) resolve thro
 | `bg-card` / `text-card-foreground` | `--card` | Card surface (elevated over background) |
 | `bg-popover` / `text-popover-foreground` | `--popover` | Floating menus, tooltips, dropdowns |
 | `bg-muted` / `text-muted-foreground` | `--muted` | Subtle surface (input rest, chips, secondary text) |
-| `bg-accent` / `text-accent-foreground` | `--accent` | Hover surface |
-| `bg-primary` / `text-primary-foreground` | `--primary` | Brand CTA (filled buttons, links) |
+| `bg-accent` / `text-accent-foreground` | `--accent` | Hover + selected surface — **neutral gray** (no brand tint), quiet like macOS/Claude |
+| `bg-primary` / `text-primary-foreground` | `--primary` | Brand CTA (filled buttons, links) — cyan |
 | `bg-secondary` / `text-secondary-foreground` | `--secondary` | Neutral filled controls |
 | `bg-destructive` / `text-destructive-foreground` | `--destructive` | Error / delete filled controls |
-| `border-border` | `--border` | Dividers, card outlines, separators |
-| `bg-input` | `--input` | Input field border / fill (theme dependent) |
-| `ring-ring` | `--ring` | Focus rings, selected outlines |
+| `border-border` | `--border` | Card outlines, control borders |
+| `border-divider` / `.divider-b` | `--divider` | **Hairline between rows** — deliberately *lighter than `--card`* so it stays visible on elevated surfaces (a `--border` line vanishes on a card) |
+| `bg-input` | `--input` | Input **fill** — a notch off the panel so fields read as real controls (not flush holes). The input *border* uses `--border`, not `--input` |
+| `ring-ring` | `--ring` | Focus rings, selected outlines — **blue** (system-accent feel), independent of the cyan brand |
 
-### Status surface tokens (default + dark themes only)
+### Status surface tokens (light + dark)
 
-Each status has 4 tokens for banners and alerts:
+Each status has the full 4-token set in **both** themes for banners and alerts:
 
 | Role | Class | Token |
 |---|---|---|
@@ -72,7 +74,7 @@ Each status has 4 tokens for banners and alerts:
 | Readable text | `text-warning-foreground` | `--warning-foreground` |
 | Border ring | `border-warning-border` | `--warning-border` |
 
-Available statuses: **`warning`** · **`success`** · **`destructive`** · **`info`**.
+Available statuses: **`warning`** · **`success`** · **`destructive`** · **`info`**. Reference consumers: `feedback/banner`, `specialized/copy`, `forms/button-download`, `data/status`, `data/stat`.
 
 ```tsx
 <div className="flex items-center gap-3 rounded-md border border-warning-border/40
@@ -97,6 +99,43 @@ Most presets don't override `*-background` / `*-border` / `*-foreground`. For pr
 | `bg-sidebar` / `text-sidebar-foreground` / `border-sidebar-border` | App sidebar chrome |
 | `bg-sidebar-accent` / `text-sidebar-accent-foreground` | Sidebar hover state |
 
+## Radius tokens
+
+The radius **scale** (`--radius`, `--radius-sm`, …) is theme-independent and lives in `base.css`; presets that set a semantic `radius` regenerate the scale via `presets/build.ts`. A few named radii are fixed defaults (default preset only):
+
+| Token | Value | Used by |
+|---|---|---|
+| `--radius-control` | `0.625rem` | **Interactive controls** (inputs, nav items, search, value chips) — one shared corner so they round consistently. Class: `.rounded-control` |
+| `--radius-dialog` | `1rem` | Dialog panels. Applied at **all** sizes (was `sm:`-gated, which left phones square) |
+| `--radius-popover` | `0.75rem` | Popovers / menus |
+
+## Focus rings (Vercel / Linear pattern)
+
+Inputs use a **crisp thin accent outline**, not a blurry halo: the border turns `--ring` (blue) plus a tight `ring-1 ring-ring`, `:focus-visible` only.
+
+```
+focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+```
+
+The native browser focus outline (often white/auto, which used to pierce through on click) is reset app-wide in `base.css`:
+
+```css
+:where(input, textarea, select, button, a, [tabindex], [role="button"], [contenteditable]):focus { outline: none; }
+```
+
+So every interactive control relies on its own `focus-visible:ring-*` — keyboard a11y is preserved, the stray native outline is gone. The single source for input styling is `INPUT_CLASS` / `inputClass(size)` exported from `components/forms/input` and **reused by `Editable`**, so standalone inputs and inline-edits focus identically.
+
+## Scan-independent utility classes
+
+Some classes are authored as **plain CSS** in `utilities/*.css` (not Tailwind utilities):
+
+| Class | File | Why plain CSS |
+|---|---|---|
+| `.divider-b` / `.divider-t` | `utilities/divider.css` | Hairline via `--divider` |
+| `.rounded-control` | `utilities/controls.css` | Shared control radius |
+
+> **JIT-scan gotcha.** Tailwind's content scan covers `ui-core/src` but **not always every consumer package** (e.g. the `layouts` package source isn't always scanned by Storybook/apps). A *new* arbitrary Tailwind class used **only** in a consumer (`border-zinc-500/25`, `border-foreground/[0.12]`, `rounded-[var(--x)]`) then produces **no CSS rule** and silently falls back to the global `* { border-color: var(--border) }` — the class is in the DOM but the computed color is wrong. **Fix pattern:** for any token-driven visual that consumers need, add a plain `.class` in `ui-core/styles/utilities/*` and `@import` it, then use that class downstream. Don't invent new Tailwind classes in the `layouts` package.
+
 ## Theme presets — 8 production-ready
 
 | ID | Use case |

package/src/styles/base.css

@@ -8,8 +8,15 @@
 :root {
   --radius: 0.625rem;
   --radius-sm: 0.375rem;
+  /* Control corner — shared by interactive controls (nav items, inputs,
+   * search, value chips) so they round consistently. ~10px reads like
+   * Claude/macOS. Override per preset for a tighter/softer feel. */
+  --radius-control: 0.625rem;
   --radius-popover: 0.75rem;
-  --radius-dialog: 1.5rem;
+  /* Dialog corner — tightened from 1.5rem to read like Claude/macOS panels
+   * (round, but not pill-soft). Default preset only; preset themes that set
+   * their own `radius` are unaffected. */
+  --radius-dialog: 1rem;
   --radius-tooltip: 0.375rem;
 
   /* Typography tokens — overridable per preset */
@@ -29,6 +36,16 @@
   border-color: var(--border);
 }
 
+/* Suppress the native (often white/auto) focus outline app-wide — every
+ * interactive ui-core component provides its own `focus-visible:ring-*` in the
+ * blue `--ring` token. Without this, clicking certain inputs (where the browser
+ * applies `:focus` but not `:focus-visible`) shows an ugly white outline ON TOP
+ * of our ring. Keyboard accessibility is preserved via the ring utilities.
+ */
+:where(input, textarea, select, button, a, [tabindex], [role="button"], [contenteditable]):focus {
+  outline: none;
+}
+
 html {
   font-weight: 400;
 }

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

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.

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 */

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';