@heyramzi/ui 2.20.0 → 2.21.0

package/src/work/detail/task-thread.svelte

@@ -4,6 +4,9 @@
 	import { initial } from "../../lib/initials.js";
 	import { AgentAvatar } from "../../agents/index.js";
 	import { Skeleton } from "../../shadcn/skeleton/index.js";
+	import { Button } from "../../shadcn/button/index.js";
+	import { Textarea } from "../../shadcn/textarea/index.js";
+	import * as Avatar from "../../shadcn/avatar/index.js";
 	import {
 		DEFAULT_TASK_DETAIL_LABELS,
 		type TaskComment,
@@ -103,7 +106,7 @@
 	{:else if comments.length > 0}
 		<ol class="flex flex-col gap-4">
 			{#each comments as comment (comment.id)}
-				<li class="group relative flex gap-3">
+				<li class="group hover-row relative flex gap-3">
 					<!-- The rail that ties one avatar to the next, as in an activity feed. -->
 					<span
 						class="absolute start-[11.5px] top-8 -bottom-3 w-px bg-border group-last:hidden"
@@ -119,18 +122,18 @@
 						{:else if avatar}
 							{@render avatar(comment)}
 						{:else}
-							<span
-								class="grid size-6 place-items-center rounded-full bg-muted text-xs font-medium text-muted-foreground"
-								aria-hidden="true"
-							>
-								{initial(comment.author)}
-							</span>
+							<Avatar.Root class="size-6" aria-hidden="true">
+								<Avatar.Fallback class="text-xs font-medium"
+									>{initial(comment.author)}</Avatar.Fallback
+								>
+							</Avatar.Root>
 						{/if}
 					</span>
 
 					<div class="min-w-0 flex-1">
 						<div class="flex h-6 items-center gap-2">
-							<span class="truncate text-[13px] font-medium">{comment.author}</span>
+							<span class="truncate text-(length:--text-control) font-medium">{comment.author}</span
+							>
 							{#if comment.agent}
 								<span class="sr-only">{labels.ai}</span>
 							{/if}
@@ -139,49 +142,47 @@
 								<span class="text-xs text-muted-foreground">{labels.commentEdited}</span>
 							{/if}
 							{#if canEdit(comment) && editingId !== comment.id}
-								<span
-									class="ms-auto flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100"
-								>
+								<span class="row-action ms-auto flex gap-0.5">
 									{#if onEdit}
-										<button
-											type="button"
-											class="thread-icon"
+										<Button
+											variant="ghost"
+											size="sm"
+											icon
+											class="text-muted-foreground"
 											aria-label={labels.commentEdit}
 											onclick={() => startEdit(comment)}
 										>
-											<PencilSimple class="size-3.5" aria-hidden="true" />
-										</button>
+											<PencilSimple aria-hidden="true" />
+										</Button>
 									{/if}
 									{#if onDelete}
-										<button
-											type="button"
-											class="thread-icon"
+										<Button
+											variant="ghost"
+											size="sm"
+											icon
+											class="text-muted-foreground"
 											aria-label={labels.commentDelete}
 											onclick={() => onDelete?.(comment)}
 										>
-											<Trash class="size-3.5" aria-hidden="true" />
-										</button>
+											<Trash aria-hidden="true" />
+										</Button>
 									{/if}
 								</span>
 							{/if}
 						</div>
 
 						{#if editingId === comment.id}
-							<textarea
+							<Textarea
 								bind:value={editDraft}
 								rows={3}
 								aria-label={labels.comments}
-								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"
-							></textarea>
+								class="mt-1 resize-y leading-relaxed"
+							/>
 							<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}
 							<p class="text-sm leading-relaxed whitespace-pre-wrap text-pretty">{comment.body}</p>
@@ -191,102 +192,30 @@
 			{/each}
 		</ol>
 	{:else if !onSend}
-		<p class="text-[13px] text-muted-foreground">{labels.commentsEmpty}</p>
+		<p class="text-(length:--text-control) text-muted-foreground">{labels.commentsEmpty}</p>
 	{/if}
 
 	{#if onSend}
-		<div
-			class="rounded-lg border border-input transition-shadow focus-within:ring-3 focus-within:ring-ring/50"
-		>
-			<textarea
+		<!-- The send button sits inside the field's bottom edge, so the composer reads as one box. -->
+		<div class="relative">
+			<Textarea
 				bind:value={draft}
 				onkeydown={onComposerKeydown}
 				rows={2}
 				placeholder={labels.commentPlaceholder}
 				aria-label={labels.commentPlaceholder}
-				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={send}
-					disabled={!canSend}
-				>
-					{sending ? labels.saving : labels.commentSend}
-				</button>
-			</div>
+				class="max-h-60 resize-none px-3 pb-11 leading-relaxed"
+			/>
+			<!-- An empty draft reads as an outlined button, not a faded fill. -->
+			<Button
+				size="sm"
+				variant={canSend ? "default" : "outline"}
+				class="absolute end-2 bottom-2 disabled:opacity-100"
+				onclick={send}
+				disabled={!canSend}
+			>
+				{sending ? labels.saving : labels.commentSend}
+			</Button>
 		</div>
 	{/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);
-	}
-
-	@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/work/docs/doc-editor-page.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { docLooks } from "../../components/work-parts/looks.js";
 	import type { Editor } from "@tiptap/core";
 	import { FileText } from "phosphor-svelte";
 	import type { Snippet } from "svelte";
@@ -105,11 +106,11 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<div class="@container/doc flex h-full min-h-0 flex-col bg-background text-foreground">
+<div class="@container/doc flex h-full min-h-0 flex-col bg-card text-foreground">
 	<header
 		class="flex h-11 shrink-0 items-center gap-2 border-b border-border/70 px-3 @2xl/doc:px-4"
 	>
-		<div class="flex min-w-0 flex-1 items-center gap-1 text-[13px]">
+		<div class="flex min-w-0 flex-1 items-center gap-1 text-(length:--text-control)">
 			{#if breadcrumb}{@render breadcrumb()}{/if}
 			{#if menu}{@render menu()}{/if}
 		</div>
@@ -133,7 +134,7 @@
 			</div>
 			<!-- Narrow: the strip the reading pages use, since a phone has no gutter. -->
 			<div
-				class="absolute inset-x-0 top-0 z-20 border-b border-border/70 bg-background/95 backdrop-blur @4xl/doc:hidden"
+				class="absolute inset-x-0 top-0 z-20 border-b border-border/70 bg-card/95 backdrop-blur @4xl/doc:hidden"
 			>
 				<OnThisPage
 					variant="bar"
@@ -152,7 +153,7 @@
 					: 'pt-8 @2xl/doc:pt-14'}"
 			>
 				<div
-					class="mb-4 flex size-12 items-center justify-center rounded-xl border border-border bg-muted/40 text-muted-foreground"
+					class="mb-4 flex size-12 items-center justify-center {docLooks.tile} border border-border bg-muted/40 text-muted-foreground"
 				>
 					{#if icon}{@render icon()}{:else}<FileText size={22} aria-hidden="true" />{/if}
 				</div>

package/src/work/docs/doc-menu.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { docLooks } from "../../components/work-parts/looks.js";
 	import {
 		ArrowsOutCardinal,
 		CaretLeft,
@@ -238,7 +239,7 @@
 				<button
 					{...props}
 					type="button"
-					class="t-press inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/6 hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 aria-expanded:bg-foreground/6 aria-expanded:text-foreground any-pointer-coarse:size-10"
+					class="t-press inline-flex size-7 items-center justify-center {docLooks.control} text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/6 hover:text-foreground focus-visible:shadow-(--ring-focus) aria-expanded:bg-foreground/6 aria-expanded:text-foreground any-pointer-coarse:size-10"
 				>
 					<DotsThree size={18} weight="bold" aria-hidden="true" />
 				</button>
@@ -246,7 +247,7 @@
 		{/snippet}
 	</PopoverTrigger>
 	<PopoverContent align="start" sideOffset={6} class="w-64 gap-0 overflow-hidden p-0">
-		<Command shouldFilter={false} onkeydown={onListKey} class="rounded-xl">
+		<Command shouldFilter={false} onkeydown={onListKey}>
 			<CommandInput
 				bind:value={query}
 				placeholder={page === "copy" ? t.copy : t.filter}
@@ -284,7 +285,9 @@
 						</CommandGroup>
 					{/each}
 					{#if visible.length === 0}
-						<CommandEmpty class="py-6 text-center text-[13px] text-muted-foreground">
+						<CommandEmpty
+							class="py-6 text-center text-(length:--text-control) text-muted-foreground"
+						>
 							{t.noResults}
 						</CommandEmpty>
 					{/if}
@@ -304,7 +307,9 @@
 						{/each}
 					</CommandGroup>
 					{#if copies.length === 0}
-						<CommandEmpty class="py-6 text-center text-[13px] text-muted-foreground">
+						<CommandEmpty
+							class="py-6 text-center text-(length:--text-control) text-muted-foreground"
+						>
 							{t.noResults}
 						</CommandEmpty>
 					{/if}

package/src/work/docs/docs-demo.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { docLooks } from "../../components/work-parts/looks.js";
 	import { Bell, FileText, LinkSimple, Star } from "phosphor-svelte";
 	import DocEditorPage from "./doc-editor-page.svelte";
 	import DocMenu from "./doc-menu.svelte";
@@ -139,7 +140,7 @@
 <!-- =========================== -->
 <div class="flex flex-col gap-2">
 	<div
-		class="h-[min(48rem,calc(100svh-9rem))] overflow-hidden rounded-xl border border-border bg-background"
+		class="h-[min(48rem,calc(100svh-9rem))] overflow-hidden {docLooks.frame} border border-border bg-card"
 	>
 		<DocEditorPage
 			bind:title
@@ -165,7 +166,7 @@
 					aria-label={favorited ? "Remove from favorites" : "Favorite"}
 					aria-pressed={favorited}
 					onclick={() => (favorited = !favorited)}
-					class="t-press inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/6 hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 any-pointer-coarse:size-10"
+					class="t-press inline-flex size-7 items-center justify-center {docLooks.control} text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/6 hover:text-foreground focus-visible:shadow-(--ring-focus) any-pointer-coarse:size-10"
 				>
 					<Star
 						size={15}
@@ -202,8 +203,7 @@
 			{/snippet}
 
 			{#snippet actions()}
-				{@const button =
-					"t-press inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/6 hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 any-pointer-coarse:size-10"}
+				{@const button = `t-press inline-flex size-7 items-center justify-center ${docLooks.control} text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/6 hover:text-foreground focus-visible:shadow-(--ring-focus) any-pointer-coarse:size-10`}
 				<button
 					type="button"
 					aria-label="Copy link"

package/src/work/docs/edited-chip.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { docLooks } from "../../components/work-parts/looks.js";
 	import { ClockCounterClockwise, SlidersHorizontal } from "phosphor-svelte";
 	import { Avatar, AvatarFallback, AvatarImage } from "../../shadcn/avatar/index.js";
 	import { Popover, PopoverContent, PopoverTrigger } from "../../shadcn/popover/index.js";
@@ -70,13 +71,17 @@
 {#if hasDetails}
 	<Popover>
 		<PopoverTrigger
-			class="t-press inline-flex h-7 items-center gap-1.5 rounded-md bg-foreground/5 px-2 @max-xl/doc:px-1.5 text-[13px] font-medium text-foreground/90 tabular-nums transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/8 focus-visible:ring-3 focus-visible:ring-ring/50 aria-expanded:bg-foreground/8 any-pointer-coarse:h-10"
+			class="t-press inline-flex h-7 items-center gap-1.5 {docLooks.chip} bg-foreground/5 px-2 @max-xl/doc:px-1.5 text-(length:--text-control) font-medium text-foreground/90 tabular-nums transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/8 focus-visible:shadow-(--ring-focus) aria-expanded:bg-foreground/8 any-pointer-coarse:h-10"
 		>
 			<SlidersHorizontal size={14} class="text-muted-foreground" aria-hidden="true" />
 			<!-- On a narrow page the glyph stands alone, so the title keeps the bar. -->
 			<span class="@max-xl/doc:sr-only">{chip}</span>
 		</PopoverTrigger>
-		<PopoverContent align="end" sideOffset={6} class="w-[21.5rem] gap-0 p-0 text-[13px]">
+		<PopoverContent
+			align="end"
+			sideOffset={6}
+			class="w-[21.5rem] gap-0 p-0 text-(length:--text-control)"
+		>
 			<div class="divide-y divide-border/70">
 				{#if onshowauthors}
 					<div class="flex items-center justify-between px-4 py-3">
@@ -108,7 +113,7 @@
 						<button
 							type="button"
 							onclick={onhistory}
-							class="t-press flex h-8 w-full items-center justify-center gap-2 rounded-lg bg-foreground/5 font-medium transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/8 focus-visible:ring-3 focus-visible:ring-ring/50"
+							class="t-press flex h-8 w-full items-center justify-center gap-2 {docLooks.control} bg-foreground/5 font-medium transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/8 focus-visible:shadow-(--ring-focus)"
 						>
 							<ClockCounterClockwise size={14} aria-hidden="true" />
 							{t.showHistory}
@@ -119,7 +124,9 @@
 		</PopoverContent>
 	</Popover>
 {:else}
-	<span class="inline-flex h-7 items-center text-[13px] text-muted-foreground tabular-nums">
+	<span
+		class="inline-flex h-7 items-center text-(length:--text-control) text-muted-foreground tabular-nums"
+	>
 		{chip}
 	</span>
 {/if}

package/src/work/gantt/gantt-bar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ganttLooks } from "../../components/work-parts/looks.js";
 	import { cn } from "../../lib/utils.js";
 	import { isoFromDay } from "../dates.js";
 	import type { GanttChange } from "../task-types.js";
@@ -101,7 +102,8 @@
 		? ' Arrow keys move it a day, Shift plus arrow keys change its end.'
 		: ''}"
 	class={cn(
-		"g-bar g-enter absolute top-1/2 flex -translate-y-1/2 items-center rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+		"g-bar g-enter absolute top-1/2 flex -translate-y-1/2 items-center outline-none focus-visible:shadow-(--ring-focus)",
+		ganttLooks.bar,
 		editable && "cursor-grab",
 		dragging && "g-bar-dragging cursor-grabbing",
 	)}
@@ -120,7 +122,7 @@
 >
 	{#if progress > 0}
 		<!-- The clip keeps the bar's rounded corners while the fill scales. -->
-		<span class="absolute inset-0 overflow-hidden rounded-lg" aria-hidden="true">
+		<span class={cn("absolute inset-0 overflow-hidden", ganttLooks.bar)} aria-hidden="true">
 			<span class="g-progress absolute inset-0 origin-left" style:transform="scaleX({progress})"
 			></span>
 		</span>
@@ -140,7 +142,8 @@
 	{#if dragging && drag && drag.dx !== 0}
 		<span
 			class={cn(
-				"g-tip pointer-events-none absolute left-0 z-20 rounded-md bg-foreground px-2 py-1 text-[11px] font-medium whitespace-nowrap text-background tabular-nums shadow-md",
+				"g-tip pointer-events-none absolute left-0 z-20",
+				ganttLooks.tip,
 				tipBelow ? "top-full mt-1.5" : "bottom-full mb-1.5",
 			)}
 		>
@@ -150,7 +153,10 @@
 </div>
 {#if width < inlineTitleMin}
 	<span
-		class="pointer-events-none absolute top-1/2 -translate-y-1/2 truncate rounded-sm bg-card/90 px-1 text-xs text-muted-foreground"
+		class={cn(
+			"pointer-events-none absolute top-1/2 -translate-y-1/2 truncate",
+			ganttLooks.outsideLabel,
+		)}
 		style:left="{dayX(layout, span.end + 1) + 16}px"
 		style:max-width="200px"
 	>
@@ -165,9 +171,9 @@
 		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 34%, transparent);
 		/* Snapping to whole days reads as a glide, not a jump. */
 		transition:
-			left var(--duration-quick, 150ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
-			width var(--duration-quick, 150ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
-			box-shadow var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+			left var(--duration-quick) var(--ease-smooth-out),
+			width var(--duration-quick) var(--ease-smooth-out),
+			box-shadow var(--duration-quick) var(--ease-smooth-out);
 	}
 
 	@media (hover: hover) and (pointer: fine) {
@@ -192,8 +198,7 @@
 
 	.g-progress {
 		background: color-mix(in oklab, var(--g-hue) 32%, var(--color-card, white));
-		transition: transform var(--duration-fast, 250ms)
-			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+		transition: transform var(--duration-fast) var(--ease-smooth-out);
 	}
 
 	/* Resize grips: a wide invisible hit area, a slim pill that shows on hover. */
@@ -214,10 +219,9 @@
 		left: 50%;
 		width: 3px;
 		translate: -50% 0;
-		border-radius: 999px;
-		background: color-mix(in oklab, var(--g-hue) 70%, var(--color-foreground, black));
+		background: color-mix(in oklab, var(--g-hue) 70%, var(--color-foreground));
 		opacity: 0;
-		transition: opacity var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+		transition: opacity var(--duration-quick) var(--ease-smooth-out);
 	}
 
 	@media (hover: hover) and (pointer: fine) {
@@ -232,13 +236,13 @@
 	}
 
 	.g-tip {
-		animation: g-tip-in var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out) both;
+		animation: g-tip-in var(--duration-quick) var(--ease-smooth-out) both;
 	}
 
 	@keyframes g-tip-in {
 		from {
 			opacity: 0;
-			translate: 0 var(--distance-micro, 4px);
+			translate: 0 var(--distance-micro);
 		}
 	}
 

package/src/work/gantt/gantt-grid.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { ganttLooks } from "../../components/work-parts/looks.js";
+	import { cn } from "../../lib/utils.js";
 	import { dayX, type Arrow, type GanttDay, type Layout } from "./logic.js";
 
 	interface Props {
@@ -41,7 +43,7 @@
 			class="g-today absolute inset-y-0 w-px bg-primary"
 			style:left="{dayX(layout, layout.todayDay) + layout.dayWidth / 2}px"
 		>
-			<span class="absolute -top-1 -left-[3px] size-[7px] rounded-full bg-primary"></span>
+			<span class={cn("absolute -top-1 -left-[3px] size-[7px] bg-primary", ganttLooks.day)}></span>
 		</div>
 	{/if}
 	<svg
@@ -73,13 +75,12 @@
 <style>
 	.g-today {
 		transform-origin: top;
-		animation: g-today-in var(--duration-slow, 300ms)
-			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
+		animation: g-today-in var(--duration-slow) var(--ease-smooth-out) backwards;
 	}
 
 	.g-arrow {
 		stroke: color-mix(in oklab, var(--color-muted-foreground, gray) 55%, transparent);
-		transition: stroke var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+		transition: stroke var(--duration-quick) var(--ease-smooth-out);
 	}
 
 	.g-arrow-lit {
@@ -89,12 +90,11 @@
 	.g-arrow-line {
 		stroke-dasharray: 1;
 		stroke-dashoffset: 0;
-		animation: g-draw var(--duration-slow, 300ms)
-			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) 300ms backwards;
+		animation: g-draw var(--duration-slow) var(--ease-smooth-out) 300ms backwards;
 	}
 
 	.g-arrow-head {
-		animation: g-fade var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out) 700ms backwards;
+		animation: g-fade var(--duration-quick) var(--ease-smooth-out) 700ms backwards;
 	}
 
 	@keyframes g-today-in {

package/src/work/gantt/gantt-group-row.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { ganttLooks } from "../../components/work-parts/looks.js";
+	import { cn } from "../../lib/utils.js";
+	import GroupHead from "../../components/work-parts/group-head.svelte";
 	import { barWidth, dayX, type GroupRow, type Layout } from "./logic.js";
 	import "./gantt.css";
 
@@ -23,19 +26,13 @@
 	<!-- Opaque card under the row's muted tint, so bars never show through the pinned column. -->
 	<div class="sticky left-0 z-10 w-(--g-label) shrink-0 border-r border-border bg-card">
 		<div class="flex h-full items-center gap-2 bg-muted/30 px-3">
-			<span class="size-2 shrink-0 rounded-full" style:background={hue}></span>
-			<span class="truncate text-sm font-medium text-foreground">{row.group.label}</span>
-			<span
-				class="grid h-5 min-w-5 place-items-center rounded-sm bg-foreground/5 px-1 text-xs font-medium text-muted-foreground tabular-nums"
-			>
-				{row.count.toLocaleString()}
-			</span>
+			<GroupHead label={row.group.label} {hue} count={row.count} />
 		</div>
 	</div>
 	<div class="relative shrink-0" style:width="{layout.timelineWidth}px">
 		{#if row.span}
 			<div
-				class="g-summary g-enter absolute top-1/2 h-1.5 -translate-y-1/2 rounded-full"
+				class={cn("g-summary g-enter absolute top-1/2 h-1.5 -translate-y-1/2", ganttLooks.track)}
 				style:--g-hue={hue}
 				style:--g-i={Math.min(index, staggerCap)}
 				style:left="{dayX(layout, row.span.start) + layout.inset}px"
@@ -49,8 +46,8 @@
 	.g-summary {
 		background: color-mix(in oklab, var(--g-hue) 45%, transparent);
 		transition:
-			left var(--duration-quick, 150ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
-			width var(--duration-quick, 150ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+			left var(--duration-quick) var(--ease-smooth-out),
+			width var(--duration-quick) var(--ease-smooth-out);
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/src/work/gantt/gantt-header.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ganttLooks } from "../../components/work-parts/looks.js";
 	import { cn } from "../../lib/utils.js";
 	import type { GanttDay, Layout } from "./logic.js";
 
@@ -62,7 +63,8 @@
 					{#if showNumber}
 						<span
 							class={cn(
-								"grid h-4 min-w-4 place-items-center rounded-full px-1 font-medium",
+								"grid h-4 min-w-4 place-items-center px-1 font-medium",
+								ganttLooks.day,
 								layout.dayWidth < 18 && "absolute left-1 whitespace-nowrap",
 								isToday && "bg-primary text-primary-foreground",
 							)}