@estiva-app/ui 0.37.2 → 0.39.0

package/src/MenuItem.stories.tsx

@@ -48,15 +48,10 @@ export const WithAShortcut: Story = {
   args: { label: 'Copy link', leading: <IconCopy size={16} stroke={1.5} className="text-text-secondary" />, shortcut: 'Ctrl+C' },
 }
 
-/** The row opens another menu. */
-export const Submenu: Story = {
-  args: { label: 'Move to…', submenu: true },
-}
-
 /**
- * The submenu, working. The story above draws the row at rest — the chevron is
- * the whole affordance — but a row that opens another menu can only be tried
- * inside a real one, so here is one.
+ * A row that opens another menu, working: such a row can only be tried inside
+ * a real menu, so this is one (Katerina, 28 September: one story, the working
+ * one; the chevron is the row's whole affordance).
  *
  * Hover **Move to…**, or arrow onto it and press →. The panel opens beside the
  * row, flips to the other side at a screen edge, and stays open while you
@@ -66,7 +61,7 @@ export const Submenu: Story = {
  * into it, and ← closes it and puts the highlight back on the row. Measured in
  * that order — → then ← alone does nothing, because focus has not entered yet.
  */
-export const SubmenuLive: Story = {
+export const Submenu: Story = {
   parameters: { controls: { disable: true } },
   decorators: [(Story) => <Story />],
   render: () => (

package/src/Popover.stories.tsx

@@ -190,6 +190,9 @@ export const FromASelection: Story = {
           side="top"
           ariaLabel="Formatting"
           className="w-auto min-w-0 p-1"
+          /* No padding of the popup's own: the panel's 4px is the Toolbar's, and
+             the default 8px on top of it drew the panel 16px taller (Katerina, 28 September). */
+          contentClassName="p-0"
         >
           <Toolbar aria-label="Formatting" surface={false}>
             <ToolbarButton aria-label="Bold" tooltip="Bold">

package/src/SectionLabel.tsx

@@ -39,6 +39,8 @@ export function SectionLabel({
     <span
       className={cn(
         'text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest',
+        // Leaf's section labels are Signal's type (Katerina, 28 September).
+        'leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest',
         tone === 'secondary' ? 'text-text-secondary' : tone === 'muted' ? 'text-text-muted' : 'text-text-primary',
         truncate && 'min-w-0 truncate',
         className,

package/src/Select.tsx

@@ -88,8 +88,8 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
            * `truncate` from ever engaging; in a block container max-w-full is
            * the cap. Full-width callers are unaffected.
            */
-          'flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left',
-          'border-border-default outline-none transition-colors',
+          'flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-field shadow-field text-left',
+          'border-border-field outline-none transition-colors',
           FIELD_TEXT_CLASSES,
           // The focused border survives a hover: hover alone strengthens the
           // hairline, but hover while focused must not grey the focus colour —

package/src/Sidebar.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import { createContext, useContext, type ReactNode } from 'react'
 import { cn } from './cn'
 import { ScrollArea } from './ScrollArea'
 
@@ -10,6 +10,10 @@ import { ScrollArea } from './ScrollArea'
  * What goes inside is the caller's: NavItem rows, a SectionLabel heading
  * in a 32px row over a group. Desktop only — there is no narrow-screen
  * drawer.
+ *
+ * In AppShell's `inset` frame it stands on the ground instead: no hairline,
+ * no surface, the content's card beside it (Katerina, 28 September). The
+ * frame tells it so; the caller passes nothing.
  */
 export interface SidebarProps {
   /** Names the navigation region for assistive tech. */
@@ -18,11 +22,15 @@ export interface SidebarProps {
   className?: string
 }
 
+/** Set by AppShell's `inset` frame: the sidebar stands on the ground, with no line or surface of its own. */
+export const SidebarOnGround = createContext(false)
+
 export function Sidebar({ 'aria-label': ariaLabel = 'Workspace', children, className }: SidebarProps) {
+  const onGround = useContext(SidebarOnGround)
   return (
     <nav
       aria-label={ariaLabel}
-      className={cn('flex w-60 shrink-0 flex-col border-r border-border-default bg-bg-surface', className)}
+      className={cn('flex w-60 shrink-0 flex-col', !onGround && 'border-r border-border-default bg-bg-surface', className)}
     >
       {/* The rows scroll in a ScrollArea: the bar takes no width, so the
           column's padding reads the same with a long list as with a short

package/src/TextInput.test.tsx

@@ -40,6 +40,6 @@ describe('TextInput', () => {
     render(<TextInput aria-label="Title" />)
     const classes = screen.getByRole('textbox').className.split(' ')
     // Both survive cn(); Tailwind emits focus after hover, so the order in CSS decides, not here.
-    for (const c of ['border-border-default', 'hover:border-border-strong', 'focus:border-border-focus']) expect(classes).toContain(c)
+    for (const c of ['border-border-field', 'hover:border-border-strong', 'focus:border-border-focus']) expect(classes).toContain(c)
   })
 })

package/src/Toast.tsx

@@ -44,13 +44,14 @@ export interface ToastProps {
 }
 
 // Signal: every toast is the same dark overlay pill (v3) — the type lives in
-// the icon color + glow, not the surface.
+// the icon color + glow, not the surface. Leaf draws them the same way, on its
+// own greys (Katerina, 28 September).
 const SURFACE_STYLES: Record<ToastType, string> = {
-  success: 'bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md',
-  brand: 'bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md',
-  neutral: 'bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md',
-  warning: 'bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md',
-  error: 'bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md',
+  success: 'bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md',
+  brand: 'bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md',
+  neutral: 'bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md',
+  warning: 'bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md',
+  error: 'bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md',
 }
 
 /**

package/src/Tooltip.stories.tsx

@@ -3,7 +3,7 @@ import { IconArchive, IconPin, IconTrash } from '@tabler/icons-react'
 import { Button } from './Button'
 import { IconButton } from './IconButton'
 import { Tooltip, WithTooltip } from './Tooltip'
-import { Card } from './Card'
+import { Toolbar, ToolbarButton } from './Toolbar'
 
 const meta = {
   title: 'Primitives/Tooltip',
@@ -100,16 +100,16 @@ export const OnADisabledControl: Story = {
 export const InAToolbar: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <Card fill="elevated" className="flex items-center gap-1 p-1">
-      <IconButton aria-label="Pin" tooltip="Pin">
+    <Toolbar aria-label="Actions">
+      <ToolbarButton aria-label="Pin" tooltip="Pin">
         <IconPin size={16} stroke={1.5} />
-      </IconButton>
-      <IconButton aria-label="Archive" tooltip="Archive">
+      </ToolbarButton>
+      <ToolbarButton aria-label="Archive" tooltip="Archive">
         <IconArchive size={16} stroke={1.5} />
-      </IconButton>
-      <IconButton aria-label="Delete" tooltip="Delete" tooltipShortcut="Del">
+      </ToolbarButton>
+      <ToolbarButton aria-label="Delete" tooltip="Delete" tooltipShortcut="Del">
         <IconTrash size={16} stroke={1.5} />
-      </IconButton>
-    </Card>
+      </ToolbarButton>
+    </Toolbar>
   ),
 }

package/src/Tooltip.test.tsx

@@ -39,7 +39,7 @@ describe('Tooltip, the surface', () => {
     render(<Tooltip label="Bold" className="w-40" />)
     const tip = screen.getByRole('tooltip')
     expect(tip.className).toContain('w-40')
-    expect(tip.className).toContain('bg-bg-elevated')
+    expect(tip.className).toContain('bg-bg-tooltip')
   })
 })
 

package/src/Tooltip.tsx

@@ -73,9 +73,9 @@ export interface TooltipProps extends Omit<ComponentPropsWithRef<'div'>, 'childr
  */
 export function Tooltip({ label, shortcut, className, ...props }: TooltipProps) {
   return (
-    <div role="tooltip" className={cn(FLOATING_SURFACE_CLASSES, 'min-h-[30px] max-w-80 flex items-center justify-center gap-1.5 px-2 py-1', className)} {...props}>
-      <span className="min-w-0 text-caption text-text-primary break-words">{label}</span>
-      {shortcut && <Kbd>{shortcut}</Kbd>}
+    <div role="tooltip" className={cn(FLOATING_SURFACE_CLASSES, 'border-border-tooltip bg-bg-tooltip', 'min-h-[30px] max-w-80 flex items-center justify-center gap-1.5 px-2 py-1', className)} {...props}>
+      <span className="min-w-0 text-caption text-text-tooltip break-words">{label}</span>
+      {shortcut && <Kbd tone="tooltip">{shortcut}</Kbd>}
     </div>
   )
 }

package/src/TopBar.mdx

@@ -6,10 +6,10 @@ import * as TopBarStories from './TopBar.stories'
 # TopBar
 
 The 52px top bar: `menu` and `logo` on the left, a `search` slot in the
-centre, the identity cluster on the right. Two manners — **`solid`**, in
-flow with a hairline and a surface, and **`floating`**, an overlay with
-neither, whose bar ignores the pointer so the content underneath stays
-reachable.
+centre, the identity cluster on the right. Three manners — **`solid`**,
+in flow with a hairline and a surface; **`inset`**, in flow with neither,
+standing on the ground; and **`floating`**, an overlay with neither, whose
+bar ignores the pointer so the content underneath stays reachable.
 
 <Canvas of={TopBarStories.Solid} />
 
@@ -19,6 +19,8 @@ reachable.
 
 - **`solid`** — the structured frame's first row, above the sidebar
   (AppShell's `solid` variant wires exactly this).
+- **`inset`** — the first row of AppShell's `inset` frame, on the ground
+  above a sidebar that is on the ground too.
 - **`floating`** — an app whose content runs to the top edge; the bar
   floats over it and only its clusters catch clicks (AppShell's
   `floating` variant).

package/src/TopBar.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import { cn } from './cn'
 
 /**
- * The 52px top bar, in two manners:
+ * The 52px top bar, in three manners:
  *
  * - `solid` — in flow: a hairline under it, the surface behind it, the
  *   frame's first row (2026-09-02, verbatim from the structured app; its
@@ -11,6 +11,9 @@ import { cn } from './cn'
  *   background, and the bar itself ignores the pointer — only its clusters
  *   catch clicks, so the content underneath stays reachable (2026-09-02,
  *   verbatim from the floating app).
+ * - `inset` — in flow like `solid`, but standing on the ground: no hairline
+ *   and no surface, above a sidebar on the ground and the content's card
+ *   (Katerina, 28 September).
  *
  * Geometry both apps agreed on before extraction: 52px tall, `pl-5
  * pr-[26px]`, right cluster `gap-[6px]`. The left region is two slots
@@ -20,7 +23,7 @@ import { cn } from './cn'
  * searched; it only knows where those go.
  */
 export interface TopBarProps {
-  variant?: 'solid' | 'floating'
+  variant?: 'solid' | 'floating' | 'inset'
   /** Far left: the menu button, in an app whose navigation collapses. Stays the caller's — the bar only places it. */
   menu?: ReactNode
   /** Beside the menu button: the app's logo mark, or its name as text. */
@@ -40,7 +43,7 @@ export function TopBar({ variant = 'solid', menu, logo, search, right, className
         'flex h-[52px] items-center pl-5 pr-[26px]',
         floating
           ? 'pointer-events-none absolute left-0 right-0 top-0 z-10'
-          : 'shrink-0 gap-4 border-b border-border-default bg-bg-surface',
+          : cn('shrink-0 gap-4', variant === 'solid' && 'border-b border-border-default bg-bg-surface'),
         className,
       )}
     >

package/src/cn.ts

@@ -29,7 +29,7 @@ const FONT_SIZE_TOKENS = [
  * `shadow-glow-warning` beside `shadow-md` kept both (measured 2026-09-06).
  * `cn.test.ts` pins these to the preset too.
  */
-const BOX_SHADOW_TOKENS = ['sm', 'md', 'lg', 'focus-ring', 'glow-warning', 'glow-success', 'glow-accent', 'highlight-inset']
+const BOX_SHADOW_TOKENS = ['sm', 'md', 'lg', 'focus-ring', 'field', 'glow-warning', 'glow-success', 'glow-accent', 'highlight-inset']
 const DROP_SHADOW_TOKENS = ['glow-success', 'glow-accent', 'glow-warning']
 
 const twMerge = extendTailwindMerge({

package/src/eslint/no-restyled-part.ts

@@ -118,6 +118,7 @@ export const PART_LOOK_PROPS: Record<string, string[]> = {
   FieldLine: ['tone'],
   IconButton: ['variant', 'pressed', 'glow'],
   InputChip: ['truncate'],
+  Kbd: ['tone'],
   Link: ['variant', 'truncate'],
   MenuItem: ['size', 'selected', 'destructive'],
   MenuSub: ['selected'],

package/src/looks.ts

@@ -12,7 +12,7 @@
  */
 
 /** A field's box: TextInput and Textarea. The hairline strengthens on hover; focus comes after it, so a focused field keeps its colour under the pointer. */
-export const FIELD_BOX_CLASSES = 'bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg'
+export const FIELD_BOX_CLASSES = 'bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg'
 
 /** What a field's words look like, typed or waiting: TextInput, Textarea and Select. */
 export const FIELD_TEXT_CLASSES = 'text-text-primary placeholder:text-text-muted'
@@ -30,7 +30,7 @@ export const FIELD_SIZE_CLASSES = {
 } as const
 
 /** The box around an input that sits inside it, before its focus look: SearchInput and ChipInput. */
-export const FIELD_SHELL_CLASSES = 'bg-bg-inset border border-border-default hover:border-border-strong rounded-lg transition-colors'
+export const FIELD_SHELL_CLASSES = 'bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors'
 
 /** A panel that floats over the page: Menu's panel and Tooltip. */
 export const FLOATING_SURFACE_CLASSES = 'rounded-lg border border-border-default bg-bg-elevated shadow-lg'

package/stories/TokensPage.tsx

@@ -55,14 +55,14 @@ function resolveVar(name: string): string {
 
 /* ── The vocabulary (mirrors tailwind-preset.js; tokens.test.ts holds the two together) ── */
 
-type Swatch = 'fill' | 'text' | 'text-inverse' | 'border' | 'outline' | 'shadow' | 'drop-shadow'
+type Swatch = 'fill' | 'text' | 'text-inverse' | 'text-tooltip' | 'border' | 'outline' | 'shadow' | 'drop-shadow'
 type Token = { key: string; cssVar: string; cls: string; swatch: Swatch; note?: string }
 type Family = { label: string; blurb: string; utilities: string; tokens: Token[] }
 
 const colour = (prefix: string, key: string, swatch: Swatch, note?: string): Token => ({
   key: `${prefix}-${key}`,
   cssVar: `--${prefix}-${key}`,
-  cls: `${swatch === 'text' || swatch === 'text-inverse' ? 'text' : swatch === 'border' || swatch === 'outline' ? 'border' : 'bg'}-${prefix}-${key}`,
+  cls: `${swatch === 'text' || swatch === 'text-inverse' || swatch === 'text-tooltip' ? 'text' : swatch === 'border' || swatch === 'outline' ? 'border' : 'bg'}-${prefix}-${key}`,
   swatch,
   note,
 })
@@ -86,6 +86,18 @@ const FAMILIES: Family[] = [
     utilities: COLOUR_UTILITIES,
     tokens: ['subtle', 'default', 'strong', 'focus'].map((k) => colour('border', k, 'border')),
   },
+  {
+    label: 'Tooltip',
+    blurb: "A tooltip's own colours, so a theme can draw it apart from its menus and popups: its ground, its text and its edge, then the same three for a shortcut key shown on it.",
+    utilities: COLOUR_UTILITIES,
+    tokens: [colour('bg', 'tooltip', 'fill'), colour('text', 'tooltip', 'text-tooltip'), colour('border', 'tooltip', 'border'), colour('bg', 'tooltip-key', 'fill'), colour('text', 'tooltip-key', 'text-tooltip'), colour('border', 'tooltip-key', 'border')],
+  },
+  {
+    label: 'Field',
+    blurb: "A field's own box, so a theme can draw its text boxes apart from the ground it uses for chips and keys: its fill, its line and its shadow.",
+    utilities: COLOUR_UTILITIES,
+    tokens: [colour('bg', 'field', 'fill'), colour('border', 'field', 'border')],
+  },
   {
     label: 'Accent',
     blurb: 'The brand colour: the primary button, the checked box, the brand chip. Muted is its opaque wash, wash the translucent one a row tints with on hover, outline its thin border.',
@@ -121,6 +133,7 @@ const FAMILIES: Family[] = [
       { key: 'md', cssVar: '--shadow-md', cls: 'shadow-md', swatch: 'shadow' },
       { key: 'lg', cssVar: '--shadow-lg', cls: 'shadow-lg', swatch: 'shadow' },
       { key: 'focus-ring', cssVar: '--focus-ring', cls: 'shadow-focus-ring', swatch: 'shadow' },
+      { key: 'field', cssVar: '--shadow-field', cls: 'shadow-field', swatch: 'shadow' },
       { key: 'glow-warning', cssVar: '--glow-warning', cls: 'shadow-glow-warning', swatch: 'shadow' },
       { key: 'highlight-inset', cssVar: '--highlight-inset', cls: 'shadow-highlight-inset', swatch: 'shadow' },
       { key: 'glow-success', cssVar: '--glow-success', cls: 'drop-shadow-glow-success', swatch: 'drop-shadow' },
@@ -180,8 +193,9 @@ function SwatchBox({ token }: { token: Token }) {
       return <div className={`${base} border border-border-subtle`} style={{ background: v }} />
     case 'text':
     case 'text-inverse':
+    case 'text-tooltip':
       return (
-        <div className={`${base} flex items-center justify-center border border-border-subtle ${token.swatch === 'text-inverse' ? 'bg-accent-primary' : 'bg-bg-surface'}`}>
+        <div className={`${base} flex items-center justify-center border border-border-subtle ${token.swatch === 'text-inverse' ? 'bg-accent-primary' : token.swatch === 'text-tooltip' ? 'bg-bg-tooltip' : 'bg-bg-surface'}`}>
           <span className="text-body-2-strong leading-none" style={{ color: v }}>Ag</span>
         </div>
       )

package/tailwind-preset.js

@@ -70,6 +70,7 @@ export default {
     plugin(({ addVariant, addComponents }) => {
       addVariant('signal', '.signal &')
       addVariant('ship', "[data-theme='ship'] &")
+      addVariant('leaf', "[data-theme='leaf'] &")
       // The Signal canvas: the control-room dot grid on the app's dark ground,
       // in the Signal theme only. AppShell's floating frame carries
       // `signal-canvas`. Peek's, verbatim (UIG-14, Katerina, 19 September: the
@@ -149,6 +150,9 @@ export default {
         'bg-selected':  'var(--bg-selected)',
         'bg-active':    'var(--bg-active)',
         'bg-disabled':  'var(--bg-disabled)',
+        'bg-tooltip':   'var(--bg-tooltip)',
+        'bg-tooltip-key': 'var(--bg-tooltip-key)',
+        'bg-field':     'var(--bg-field)',
         // text
         'text-primary':   'var(--text-primary)',
         'text-secondary': 'var(--text-secondary)',
@@ -156,11 +160,16 @@ export default {
         'text-disabled':  'var(--text-disabled)',
         'text-inverse':   'var(--text-inverse)',
         'text-interactive': 'var(--text-interactive)',
+        'text-tooltip':   'var(--text-tooltip)',
+        'text-tooltip-key': 'var(--text-tooltip-key)',
         // border
         'border-subtle':  'var(--border-subtle)',
         'border-default': 'var(--border-default)',
         'border-strong':  'var(--border-strong)',
         'border-focus':   'var(--border-focus)',
+        'border-tooltip': 'var(--border-tooltip)',
+        'border-tooltip-key': 'var(--border-tooltip-key)',
+        'border-field': 'var(--border-field)',
         // accent
         'accent-primary': 'var(--accent-primary)',
         'accent-hover':   'var(--accent-hover)',
@@ -199,6 +208,7 @@ export default {
         // The ring a focused control wears where a theme wants one: Signal's
         // glow. Every theme defines it; the shared inputs use it under `signal:`.
         'focus-ring': 'var(--focus-ring)',
+        'field':      'var(--shadow-field)',
         // Signal's glow and inner highlight (D16); the components use them under `signal:`.
         // All three glows are here as box shadows, and the two below are also
         // drop shadows: a glow on a surface is a box shadow, a glow on an icon

package/tokens.css

@@ -80,6 +80,20 @@
   --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
   --scrim:           rgba(0, 0, 0, 0.5);
   --scrim-strong:    rgba(0, 0, 0, 0.8);
+  /* Tooltips have their own colours (Katerina, 27 September); here, the ones they
+     always had: the elevated surface, primary text, the default border. */
+  --bg-tooltip:     #FAFAFA;
+  --text-tooltip:   #18181B;
+  --border-tooltip: #E4E4E7;
+  /* A shortcut key on a tooltip: what Kbd always drew here. */
+  --bg-tooltip-key:     #F4F4F5;
+  --border-tooltip-key: #D4D4D8;
+  --text-tooltip-key:   #52525B;
+  /* A field has its own colours (Katerina, 28 September); here, the ones it always had:
+     the inset ground, the default line, no shadow. */
+  --bg-field:     #F4F4F5;
+  --border-field: #E4E4E7;
+  --shadow-field: 0 0 #0000;
 }
 
 /* ─── dark ─── Peek's dark theme (peek/src/index.css .dark, 2026-08-28). */
@@ -144,6 +158,20 @@
   --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
   --scrim:           rgba(0, 0, 0, 0.5);
   --scrim-strong:    rgba(0, 0, 0, 0.8);
+  /* Tooltips have their own colours (Katerina, 27 September); here, the ones they
+     always had: the elevated surface, primary text, the default border. */
+  --bg-tooltip:     #1C1C1F;
+  --text-tooltip:   #FAFAFA;
+  --border-tooltip: #2D2D31;
+  /* A shortcut key on a tooltip: what Kbd always drew here. */
+  --bg-tooltip-key:     #27272A;
+  --border-tooltip-key: #52525B;
+  --text-tooltip-key:   #AEAEB6;
+  /* A field has its own colours (Katerina, 28 September); here, the ones it always had:
+     the inset ground, the default line, no shadow. */
+  --bg-field:     #27272A;
+  --border-field: #2D2D31;
+  --shadow-field: 0 0 #0000;
 }
 
 
@@ -212,6 +240,20 @@
   --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
   --scrim:           rgba(0, 0, 0, 0.5);
   --scrim-strong:    rgba(0, 0, 0, 0.8);
+  /* Tooltips have their own colours (Katerina, 27 September); here, the ones they
+     always had: the elevated surface, primary text, the default border. */
+  --bg-tooltip:     #191d24;
+  --text-tooltip:   #eef1f6;
+  --border-tooltip: rgba(255, 255, 255, 0.12);
+  /* A shortcut key on a tooltip: what Kbd always drew here. */
+  --bg-tooltip-key:     rgba(255, 255, 255, 0.05);
+  --border-tooltip-key: rgba(255, 255, 255, 0.22);
+  --text-tooltip-key:   #b2b9c6;
+  /* A field has its own colours (Katerina, 28 September); here, the ones it always had:
+     the inset ground, the default line, no shadow. */
+  --bg-field:     #20242d;
+  --border-field: rgba(255, 255, 255, 0.12);
+  --shadow-field: 0 0 #0000;
 }
 
 /* ─── ship ─── Ship's palette (Katerina's ruling, 2026-08-28; ship/web/src/index.css). */
@@ -286,4 +328,106 @@
   --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
   --scrim:           rgba(0, 0, 0, 0.5);
   --scrim-strong:    rgba(0, 0, 0, 0.8);
+  /* Tooltips have their own colours (Katerina, 27 September); here, the ones they
+     always had: the elevated surface, primary text, the default border. */
+  --bg-tooltip:     #1c1f28;
+  --text-tooltip:   #e6e8ee;
+  --border-tooltip: rgba(255, 255, 255, 0.12);
+  /* A shortcut key on a tooltip: what Kbd always drew here. */
+  --bg-tooltip-key:     rgba(255, 255, 255, 0.05);
+  --border-tooltip-key: rgba(255, 255, 255, 0.22);
+  --text-tooltip-key:   #b3b9c7;
+  /* A field has its own colours (Katerina, 28 September); here, the ones it always had:
+     the inset ground, the default line, no shadow. */
+  --bg-field:     #1f2330;
+  --border-field: rgba(255, 255, 255, 0.12);
+  --shadow-field: 0 0 #0000;
+}
+
+/* ─── leaf ─── Leaf's theme: Linear's light theme on these same tokens (Katerina,
+   27–28 September: "I like Linear's theme more", and "get it right, not by
+   screenshot"). Read from the Linear app itself: its named colours
+   (--color-bg-*, --color-border-*, --color-text-*, --focus-ring-color), dumped
+   from a signed-in tab on 28 September and turned from LCH into sRGB by Chrome.
+   Where Linear names no colour for one of these tokens, the light theme's stays
+   (marked "light"); menus, the toolbar and tooltips follow her rulings. */
+:root[data-theme='leaf'] {
+  color-scheme: light;
+
+  /* bg */
+  --bg-base:     #efeff0; /* --color-bg-quaternary, the app's ground and sidebar */
+  --bg-surface:  #f9f9fa; /* --color-bg-primary, the content panel and header */
+  --bg-elevated: #ffffff; /* menus and the toolbar are white (Katerina, 27 September) */
+  --bg-inset:    #e9e9ea; /* --color-bg-secondary: not the ground, or an inset card and a skeleton vanish on it (Katerina, 28 September) */
+  /* See-through, so a hover shows on a row that is itself hovered or grey (Katerina, 28 September):
+     6.4% black is Linear's --color-bg-secondary (#e9e9ea) on its content panel. */
+  --bg-hover:    rgba(0, 0, 0, 0.064);
+  --bg-selected: #e5e5e6; /* --color-bg-tertiary */
+  --bg-active:   #e1e1e2; /* the selected sidebar row (lch 89.54%) */
+  --bg-disabled: #efeff0; /* the base, as light has it */
+
+  /* text */
+  --text-primary:   #1b1b1b; /* --color-text-primary */
+  --text-secondary: #5c5c5e; /* --color-text-tertiary: labels, descriptions, icons */
+  --text-muted:     #9c9d9f; /* --color-text-quaternary: placeholders, counts */
+  --text-disabled:  #D4D4D8; /* light */
+  --text-inverse:   #ffffff;
+  --text-interactive: #1b1b1b; /* --app-link-color: a link is the text colour */
+
+  /* borders */
+  /* One step darker than Linear's own faintest line (Katerina, 28 September): our cards, chips and
+     toasts draw their edge with subtle, and Linear's #f1f1f1 vanished on white and on the ground. */
+  --border-subtle:  #e5e5e6; /* --color-bg-tertiary */
+  --border-default: #dedede; /* --color-border-secondary */
+  --border-strong:  #d3d3d3; /* --color-border-tertiary */
+  --border-focus:   #5e69d1; /* --focus-ring-color */
+
+  /* accent — Linear's indigo */
+  --accent-primary: #5e69d1; /* --focus-ring-color, the selection's colour */
+  --accent-hover:   #6b75df; /* not named in Linear's set: the indigo beside it in the app's own values */
+  --accent-muted:   #EDE9FE; /* light */
+
+  /* semantic — light, until Linear's are read */
+  --info-default:    #3B82F6;
+  --info-muted:      #DBEAFE;
+  --warning-default: #967000; /* Linear's darkest yellow: readable on the warning wash (Katerina, 28 September) */
+  --warning-muted:   #FEF3C7;
+  --success-default: #0EA06F;
+  --success-muted:   #D1FAE5;
+  --error-default:   #EF4444;
+  --error-muted:     #FEE2E2;
+
+  /* shadows — light */
+  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
+  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
+  --focus-ring: 0 0 0 1px #5e69d1; /* --focus-ring-outline: 1px of the accent */
+  /* Transparent colours (D16): light's strengths, on Linear's indigo. */
+  --bg-wash:         rgba(0, 0, 0, 0.04);
+  --accent-outline:  rgba(94, 105, 209, 0.3);
+  --info-outline:    rgba(59, 130, 246, 0.3);
+  --warning-outline: rgba(245, 158, 11, 0.3);
+  --success-outline: rgba(14, 160, 111, 0.3);
+  --error-outline:   rgba(239, 68, 68, 0.3);
+  --accent-wash:     rgba(94, 105, 209, 0.11);
+  --success-wash:    rgba(14, 160, 111, 0.11);
+  --glow-warning:    0 0 5px rgba(245, 158, 11, 0.4);
+  --glow-success:    0 0 5px rgba(14, 160, 111, 0.7);
+  --glow-accent:     0 0 5px rgba(94, 105, 209, 0.6);
+  --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
+  --scrim:           rgba(0, 0, 0, 0.5);
+  --scrim-strong:    rgba(0, 0, 0, 0.8);
+  /* Tooltips are dark on the light page (Katerina, 27 September): Linear's text colour as the ground. */
+  --bg-tooltip:     #1b1b1b;
+  --text-tooltip:   #ffffff;
+  --border-tooltip: #1b1b1b;
+  /* A shortcut key on the dark tooltip: a faint light key. */
+  --bg-tooltip-key:     rgba(255, 255, 255, 0.1);
+  --border-tooltip-key: rgba(255, 255, 255, 0.18);
+  --text-tooltip-key:   rgba(255, 255, 255, 0.75);
+  /* A field is Linear's: white, a faint line, a soft two-layer shadow (read from its
+     comment box, 28 September: lch(100), lch(97.3), 0 3px 6px -2px at 2% and 0 1px 1px at 4%). */
+  --bg-field:     #ffffff;
+  --border-field: #dedede; /* the default line, so a field shows on a white dialog (Katerina, 28 September); Linear's own is #f7f7f7 */
+  --shadow-field: 0 3px 6px -2px rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.04);
 }