@heyramzi/ui 2.20.0 → 2.21.1

package/src/thread/thread.svelte

@@ -6,6 +6,8 @@
 	import { AgentAvatar } from "../agents/index.js";
 	import RichRenderer from "../editor/renderer.svelte";
 	import { Skeleton } from "../shadcn/skeleton/index.js";
+	import { Button } from "../shadcn/button/index.js";
+	import { TagChip } from "../components/chip/index.js";
 	import ThreadBody from "./thread-body.svelte";
 	import ThreadEvents from "./thread-events.svelte";
 	import {
@@ -152,20 +154,15 @@
 			class="block max-h-60 min-h-16 w-full resize-none border-0 bg-transparent px-3 py-2 text-sm leading-relaxed outline-none [field-sizing:content] placeholder:text-muted-foreground"
 		></textarea>
 		<div class="flex justify-end px-2 pb-2">
-			<button
-				type="button"
-				class="thread-button thread-primary"
-				onclick={onSend}
-				disabled={!value.trim() || sending}
-			>
+			<Button size="sm" onclick={onSend} disabled={!value.trim() || sending}>
 				{sending ? labels.sending : isReply ? labels.reply : labels.send}
-			</button>
+			</Button>
 		</div>
 	</div>
 {/snippet}
 
 {#snippet row(comment: ThreadComment, isRoot: boolean)}
-	<div class="group/row relative flex gap-3">
+	<div class="group/row hover-row relative flex gap-3">
 		<span class="relative size-6 shrink-0">
 			{#if avatar}
 				{@render avatar(comment)}
@@ -185,7 +182,7 @@
 
 		<div class="min-w-0 flex-1">
 			<div class="flex min-h-6 flex-wrap items-center gap-x-2">
-				<span class="truncate text-[13px] font-medium">{comment.author.name}</span>
+				<span class="truncate text-(length:--text-control) font-medium">{comment.author.name}</span>
 				{#if comment.author.kind === "agent"}
 					<span class="sr-only">{labels.agent}</span>
 				{/if}
@@ -197,35 +194,40 @@
 					{#if anchorChip}
 						{@render anchorChip(comment)}
 					{:else if onAnchor}
-						<button type="button" class="thread-chip" onclick={() => onAnchor(comment)}>
-							<MapPin class="size-3" aria-hidden="true" />{labels.pinned}
-						</button>
+						<button
+							type="button"
+							class="rounded-sm outline-none focus-visible:shadow-[var(--ring-focus)]"
+							onclick={() => onAnchor(comment)}
+							><TagChip
+								>{#snippet icon()}<MapPin aria-hidden="true" />{/snippet}{labels.pinned}</TagChip
+							></button
+						>
 					{:else}
-						<span class="thread-chip"
-							><MapPin class="size-3" aria-hidden="true" />{labels.pinned}</span
+						<TagChip
+							>{#snippet icon()}<MapPin aria-hidden="true" />{/snippet}{labels.pinned}</TagChip
 						>
 					{/if}
 				{/if}
 				{#if editingId !== comment.id}
-					<span
-						class="ms-auto flex gap-0.5 opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100"
-					>
+					<span class="row-action ms-auto flex gap-0.5">
 						{#if isRoot && onResolve}
-							<button
-								type="button"
-								class="thread-icon"
+							<Button
+								variant="ghost"
+								size="sm"
+								icon
 								aria-label={comment.resolved ? labels.unresolve : labels.resolve}
 								aria-pressed={comment.resolved ?? false}
 								onclick={() => onResolve(comment, !comment.resolved)}
 							>
 								<Check class="size-3.5" aria-hidden="true" />
-							</button>
+							</Button>
 						{/if}
 						{#if canEdit(comment)}
 							{#if onEdit && !comment.content}
-								<button
-									type="button"
-									class="thread-icon"
+								<Button
+									variant="ghost"
+									size="sm"
+									icon
 									aria-label={labels.edit}
 									onclick={() => {
 										editingId = comment.id;
@@ -233,17 +235,18 @@
 									}}
 								>
 									<PencilSimple class="size-3.5" aria-hidden="true" />
-								</button>
+								</Button>
 							{/if}
 							{#if onDelete}
-								<button
-									type="button"
-									class="thread-icon"
+								<Button
+									variant="ghost"
+									size="sm"
+									icon
 									aria-label={labels.delete}
 									onclick={() => onDelete?.(comment)}
 								>
 									<Trash class="size-3.5" aria-hidden="true" />
-								</button>
+								</Button>
 							{/if}
 						{/if}
 					</span>
@@ -255,20 +258,20 @@
 					bind:value={editDraft}
 					rows={3}
 					aria-label={labels.edit}
-					class="mt-1 w-full resize-y rounded-md border border-input bg-transparent px-2.5 py-2 text-sm leading-relaxed outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
+					class="mt-1 w-full resize-y rounded-md border border-input bg-transparent px-2.5 py-2 text-sm leading-relaxed outline-none focus-visible:border-ring focus-visible:shadow-(--ring-focus)"
 				></textarea>
 				<div class="mt-2 flex justify-end gap-1.5">
-					<button type="button" class="thread-button" onclick={() => (editingId = null)}
-						>{labels.cancel}</button
-					>
-					<button
-						type="button"
-						class="thread-button thread-primary"
-						onclick={() => saveEdit(comment)}>{labels.save}</button
+					<Button variant="ghost" size="sm" onclick={() => (editingId = null)}
+						>{labels.cancel}</Button
 					>
+					<Button size="sm" onclick={() => saveEdit(comment)}>{labels.save}</Button>
 				</div>
 			{:else if comment.content}
-				<div class="text-sm leading-relaxed"><RichRenderer content={comment.content} /></div>
+				<div
+					class="text-sm leading-relaxed [--content-gap:0.5em] [--content-leading:1.625] [--content-size:var(--text-sm)]"
+				>
+					<RichRenderer content={comment.content} />
+				</div>
 			{:else}
 				<ThreadBody text={comment.body} more={labels.showMore} less={labels.showLess} />
 			{/if}
@@ -280,16 +283,18 @@
 
 <section aria-label={labels.title} class={cn("flex flex-col gap-3", className)}>
 	<div class={cn("flex h-7 items-center justify-between", !heading && resolved === 0 && "sr-only")}>
-		<h2 class={cn("text-xs font-medium text-muted-foreground", !heading && "sr-only")}>{labels.title}</h2>
+		<h2 class={cn("text-xs font-medium text-muted-foreground", !heading && "sr-only")}>
+			{labels.title}
+		</h2>
 		{#if resolved > 0}
-			<button
-				type="button"
-				class="thread-button"
+			<Button
+				variant="ghost"
+				size="sm"
 				aria-expanded={showResolved}
 				onclick={() => (showResolved = !showResolved)}
 			>
 				{showResolved ? labels.hideResolved : fillCount(labels.showResolved, resolved)}
-			</button>
+			</Button>
 		{/if}
 	</div>
 
@@ -339,16 +344,17 @@
 									)}
 								</div>
 							{:else}
-								<button
-									type="button"
-									class="thread-button ms-9 flex w-fit items-center gap-1.5"
+								<Button
+									variant="ghost"
+									size="sm"
+									class="ms-9 w-fit"
 									onclick={() => {
 										replyTo = node.comment.id;
 										replyDraft = "";
 									}}
 								>
 									<ArrowBendDownRight class="size-3.5" aria-hidden="true" />{labels.reply}
-								</button>
+								</Button>
 							{/if}
 						{/if}
 					</li>
@@ -356,7 +362,7 @@
 			{/each}
 		</ol>
 	{:else if !onPost}
-		<p class="text-[13px] text-muted-foreground">{labels.empty}</p>
+		<p class="text-(length:--text-control) text-muted-foreground">{labels.empty}</p>
 	{/if}
 
 	{@render footer?.()}
@@ -365,91 +371,3 @@
 		{@render composer(draft, labels.placeholder, sendRoot, (next) => (draft = next), false)}
 	{/if}
 </section>
-
-<style>
-	.thread-icon {
-		display: grid;
-		place-items: center;
-		width: 1.75rem;
-		height: 1.75rem;
-		border-radius: var(--radius-md, 0.5rem);
-		color: var(--color-muted-foreground);
-		outline: none;
-		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
-	}
-
-	.thread-chip {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.25rem;
-		height: 1.25rem;
-		padding-inline: 0.375rem;
-		border-radius: var(--radius-sm, 0.25rem);
-		background: var(--color-muted);
-		color: var(--color-muted-foreground);
-		font-size: 0.75rem;
-		outline: none;
-	}
-
-	button.thread-chip:focus-visible {
-		box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 50%, transparent);
-	}
-
-	@media (hover: hover) and (pointer: fine) {
-		.thread-icon:hover {
-			background: var(--color-muted);
-			color: var(--color-foreground);
-		}
-	}
-
-	.thread-icon:focus-visible,
-	.thread-button:focus-visible {
-		box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 50%, transparent);
-	}
-
-	.thread-button {
-		height: 1.75rem;
-		padding-inline: 0.75rem;
-		border-radius: var(--radius-md, 0.5rem);
-		font-size: 0.8125rem;
-		font-weight: 500;
-		outline: none;
-		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
-	}
-
-	@media (hover: hover) and (pointer: fine) {
-		.thread-button:hover:not(:disabled) {
-			background: var(--color-muted);
-		}
-	}
-
-	.thread-button:disabled {
-		opacity: 0.5;
-		pointer-events: none;
-	}
-
-	.thread-primary {
-		background: var(--color-primary);
-		color: var(--color-primary-foreground);
-	}
-
-	/* An empty draft reads as an outlined button, not a faded fill. */
-	.thread-primary:disabled {
-		opacity: 1;
-		background: transparent;
-		box-shadow: inset 0 0 0 1px var(--color-border);
-		color: var(--color-muted-foreground);
-	}
-
-	@media (hover: hover) and (pointer: fine) {
-		.thread-primary:hover:not(:disabled) {
-			background: color-mix(in oklab, var(--color-primary) 90%, transparent);
-		}
-	}
-
-	@media (any-pointer: coarse) {
-		.thread-button {
-			height: 2.5rem;
-		}
-	}
-</style>

package/src/tokens/craft.css

@@ -1,25 +1,31 @@
 /* ── Radius, by role not by size ─────────────────────────────
-   These override Tailwind's own names, so `rounded-lg` on a button already
-   resolves to the control radius. */
+   Tailwind's names, so `rounded-lg` is the control radius. Five steps, 4px
+   apart; xs and md fold into sm. */
 @theme {
-  --radius-xs: 4px; /* tag, dot, inline code */
-  --radius-sm: 6px; /* chip, badge, small pill */
-  --radius-md: 7px; /* between a chip and a control */
-  --radius-lg: 8px; /* control: button, input, select, menu item */
-  --radius-xl: 10px; /* card, panel, stage */
-  --radius-2xl: 14px; /* overlay: dialog, sheet, command palette */
-  --radius-3xl: 20px; /* hero surface, full-bleed panel */
+  --radius-sm: 6px; /* chip, badge, tag, inline code */
+  --radius-xs: var(--radius-sm); /* folded, was 4px */
+  --radius-md: var(--radius-sm); /* folded, was 7px */
+  --radius-lg: 10px; /* control: button, input, select, menu item */
+  --radius-xl: 14px; /* card, panel, stage */
+  --radius-2xl: 18px; /* overlay: dialog, sheet, popover, command palette */
+  --radius-3xl: 22px; /* shell panel, the inset page */
 }
 
 /* ── Type, by role ───────────────────────────────────────────
-   Tailwind's own `text-xs` to `text-base` cover the rest. */
+   Tailwind's own `text-xs` to `text-base` cover the rest. Control text sits
+   between them: 13px at weight 500 is Linear's property row, measured 31 Aug
+   2026 on a 16px root, where 14px reads looser. No line height of its own, so
+   it inherits like the `text-[13px]` it replaces. Write it
+   `text-(length:--text-control)`: tailwind-merge takes a bare `text-control`
+   for a colour and drops it beside `text-muted-foreground`. */
 @theme {
+  --text-control: 0.8125rem; /* a picker trigger, a property value */
   --text-2xs: 0.6875rem; /* a count, a kbd hint, a meta line under a tile; the floor */
 }
 
 /* ── Elevation ───────────────────────────────────────────────
-   The steps carry no ring, since a bordered box would get two edges a pixel
-   apart; a borderless one adds `var(--elev-hairline)` in front. */
+   `--elev-card` and its hover carry their own hairline, so a box that also
+   draws `border` gets a 2px edge. The other steps carry none. */
 :root {
   /* Resting on the page. A button, a chip, a row. */
   --elev-btn:
@@ -28,21 +34,28 @@
 
   /* Sitting on the page. A card, a stage, a panel. */
   --elev-card:
-    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 7%, transparent),
-    0 4px 9px -3px color-mix(in oklab, var(--elev-tint) 6%, transparent),
-    0 14px 28px -10px color-mix(in oklab, var(--elev-tint) 7%, transparent);
-
-  /* Lifted off the page. A hovered card, a popover, a menu. */
+    var(--elev-hairline), 0 1px 2px color-mix(in oklab, var(--elev-tint) 4%, transparent);
+
+  /* A hovered card: the edge darkens 3% toward the text and a soft shadow lifts it.
+     Pair it with a 1px rise, as `.t-lift` does. */
+  --elev-card-hover:
+    0 0 0 1px
+      color-mix(
+        in oklab,
+        var(--color-border, var(--border)),
+        var(--color-foreground, var(--foreground)) 3%
+      ),
+    0 6px 16px -4px color-mix(in oklab, var(--elev-tint) 8%, transparent);
+
+  /* Lifted off the page. A popover, a menu, a hovered bordered card. */
   --elev-raised:
-    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
-    0 6px 13px -4px color-mix(in oklab, var(--elev-tint) 9%, transparent),
-    0 20px 40px -12px color-mix(in oklab, var(--elev-tint) 12%, transparent);
+    0 2px 4px -1px color-mix(in oklab, var(--elev-tint) 5%, transparent),
+    0 8px 20px -6px color-mix(in oklab, var(--elev-tint) 10%, transparent);
 
   /* Floating over a dimmed page. A dialog, a sheet, a command palette. */
   --elev-overlay:
-    0 2px 4px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
-    0 12px 26px -8px color-mix(in oklab, var(--elev-tint) 12%, transparent),
-    0 40px 72px -20px color-mix(in oklab, var(--elev-tint) 20%, transparent);
+    0 4px 8px -2px color-mix(in oklab, var(--elev-tint) 6%, transparent),
+    0 24px 48px -12px color-mix(in oklab, var(--elev-tint) 16%, transparent);
 
   /* A hairline separates a surface from what's behind it; a rim is light on the
      top edge, which makes a filled control read as a key. */
@@ -58,8 +71,11 @@
 .dark {
   --elev-btn: 0 1px 2px color-mix(in oklab, black 30%, transparent);
   --elev-card:
-    0 1px 2px color-mix(in oklab, black 24%, transparent),
-    0 4px 12px -4px color-mix(in oklab, black 30%, transparent);
+    0 0 0 1px color-mix(in oklab, white 10%, transparent),
+    0 1px 2px color-mix(in oklab, black 24%, transparent);
+  --elev-card-hover:
+    0 0 0 1px color-mix(in oklab, white 16%, transparent),
+    0 8px 20px -6px color-mix(in oklab, black 40%, transparent);
   --elev-raised:
     0 2px 6px color-mix(in oklab, black 30%, transparent),
     0 10px 24px -6px color-mix(in oklab, black 38%, transparent);
@@ -77,10 +93,12 @@
    then a soft halo. */
 :root {
   --ring-color: var(--color-ring, var(--ring));
-  --ring-halo: color-mix(in oklab, var(--ring-color) 16%, transparent);
-  /* The halo is 16% over 4px, not 30% over 2px, because a stronger band reads
-     as a second border instead of a glow. */
-  --ring-focus: 0 0 0 1px var(--ring-color), 0 0 0 5px var(--ring-halo);
+  --ring-halo: color-mix(in oklab, var(--ring-color) 10%, transparent);
+  /* The 1px edge carries the 3:1 contrast alone; a 5px 16% halo read as a thick grey band
+     (Ramzi, 24 Oct 2026), so it's 2px at 10%. */
+  --ring-focus: 0 0 0 1px var(--ring-color), 0 0 0 3px var(--ring-halo);
+  /* Rows inside a clipped list focus inward, where an outer ring would be cut off. */
+  --ring-focus-inset: inset 0 0 0 1px var(--ring-color), inset 0 0 0 3px var(--ring-halo);
 }
 
 /* ── Motion ──────────────────────────────────────────────────
@@ -124,6 +142,7 @@
   --shadow-hairline: var(--elev-hairline);
   --shadow-btn: var(--elev-btn);
   --shadow-card: var(--elev-card);
+  --shadow-card-hover: var(--elev-card-hover);
   --shadow-raised: var(--elev-raised);
   --shadow-overlay: var(--elev-overlay);
   --shadow-field: var(--elev-field);
@@ -132,7 +151,7 @@
      because the two never appear apart and utilities cannot be stacked. */
   --shadow-key: var(--elev-rim), var(--elev-btn);
   /* The composed pair, for a surface that draws no border of its own. */
-  --shadow-edge-card: var(--elev-hairline), var(--elev-card);
+  --shadow-edge-card: var(--elev-card); /* the card step carries its own hairline */
   --shadow-edge-raised: var(--elev-hairline), var(--elev-raised);
   --shadow-edge-overlay: var(--elev-hairline), var(--elev-overlay);
 
@@ -161,12 +180,12 @@
 
   .hover-row:has(:focus-visible) .row-action,
   .row-action:is(
-      :focus-visible,
-      :has(:focus-visible),
-      [data-state="open"],
-      [aria-expanded="true"],
-      :has([data-state="open"], [aria-expanded="true"])
-    ) {
+    :focus-visible,
+    :has(:focus-visible),
+    [data-state="open"],
+    [aria-expanded="true"],
+    :has([data-state="open"], [aria-expanded="true"])
+  ) {
     opacity: 1;
   }
 

package/src/tokens/palette.css

@@ -31,11 +31,13 @@
 
   /* Dark surfaces. Light pendants are surface-light, line-light and paper. */
   --brand-ink: oklch(0.145 0 0); /* Page background */
-  --brand-surface: oklch(0.19 0 0); /* Cards, panels */
+  --brand-surface: oklch(0.2 0 0); /* Cards, panels: 0.055 over the page, the light step */
   --brand-line: oklch(0.29 0 0); /* Borders, dividers */
   --brand-raised: oklch(0.24 0 0); /* Hover surfaces, inputs, between surface and line */
   --brand-paper: oklch(0.97 0 0); /* Text on dark, light backgrounds */
-  --brand-surface-light: oklch(0.99 0 0); /* Cards on a light page */
+  /* Two levels, grey canvas and white card: the 0.055 step dark uses, and muted text keeps 6.3:1. */
+  --brand-canvas-light: oklch(0.945 0 0); /* The page, the sidebar under it */
+  --brand-surface-light: oklch(1 0 0); /* Cards, popovers, the shell panel on a light page */
   --brand-line-light: oklch(0.91 0 0); /* Borders on a light page */
 
   /* The key button. Each theme has its own pair, since a hue lifted for dark needs dark text. */
@@ -111,12 +113,12 @@
   --black: oklch(0 0 0);
 
   /* === Sidebar Colors === */
-  /* Sidebar is one shade darker than content — Linear-style depth */
-  --sidebar: oklch(0.96 0 0);
+  /* The sidebar sits on the canvas, not on a third grey, and the active item is a card on it. */
+  --sidebar: var(--brand-canvas-light);
   --sidebar-foreground: oklch(0.45 0 0);
   --sidebar-primary: oklch(0.15 0 0);
   --sidebar-primary-foreground: oklch(0.98 0 0);
-  --sidebar-accent: oklch(0.92 0 0);
+  --sidebar-accent: var(--brand-surface-light);
   --sidebar-accent-foreground: oklch(0.15 0 0);
   --sidebar-border: oklch(0.91 0 0);
   --sidebar-ring: var(--brand);
@@ -146,6 +148,7 @@
   --color-line: var(--brand-line);
   --color-raised: var(--brand-raised);
   --color-paper: var(--brand-paper);
+  --color-canvas-light: var(--brand-canvas-light);
   --color-surface-light: var(--brand-surface-light);
   --color-line-light: var(--brand-line-light);
 
@@ -216,7 +219,7 @@
   );
 
   /* Light theme color system: the light surfaces and lines of the brand roles */
-  --color-background: var(--gray-50);
+  --color-background: var(--brand-canvas-light);
   --color-foreground: var(--gray-900);
   --color-foreground-muted: var(--gray-700);
 
@@ -342,14 +345,18 @@
   --color-destructive-foreground: var(--brand-paper);
 
   --color-border: var(--brand-line);
-  --color-input: var(--brand-raised);
+  /* WHY not raised: raised equals muted, so an input's edge vanished on the card. Mixed from the
+     brand's own paper and surface so a brand that moves them keeps the step. Neutral defaults:
+     L 0.547, 3.7:1 on the card (L 0.2), 4.0:1 on the canvas (L 0.145), past the 3:1 for an edge.
+     Fills read it at /30 (L 0.30), a step over the card. */
+  --color-input: color-mix(in oklab, var(--brand-paper) 45%, var(--brand-surface));
   --color-ring: var(--brand-on-dark);
 
   /* The brand colour lifts for contrast on the dark page. */
   --color-brand: var(--brand-on-dark);
 
-  /* Dark sidebar */
-  --sidebar: var(--brand-surface);
+  /* Dark sidebar: on the page, like light, so the cards are the only raised level */
+  --sidebar: var(--brand-ink);
   --sidebar-foreground: var(--brand-paper);
   --sidebar-primary: var(--brand-on-dark);
   --sidebar-primary-foreground: oklch(1 0 0);