diff --git a/apps/web/src/charts/funnel-chart.ts b/apps/web/src/charts/funnel-chart.ts index 3af77169ea..cfcffdf75b 100644 --- a/apps/web/src/charts/funnel-chart.ts +++ b/apps/web/src/charts/funnel-chart.ts @@ -202,10 +202,10 @@ export const view = Submodel.defineView((mode const stageBar = (h: H, stage: Stage, fade: number): Html => h.div( - [h.Class("relative h-2.5 w-full overflow-hidden rounded-[3px] bg-foreground/5")], + [h.Class("relative h-2.5 w-full overflow-hidden rounded-xs bg-foreground/5")], [ h.div([ - h.Class("absolute inset-y-0 left-0 rounded-[3px]"), + h.Class("absolute inset-y-0 left-0 rounded-xs"), h.Style({ width: `${stage.widthPct * 100}%`, "background-color": stage.color, diff --git a/apps/web/src/charts/funnel-dropoff-chart.ts b/apps/web/src/charts/funnel-dropoff-chart.ts index 048fd9a6de..9133ec8770 100644 --- a/apps/web/src/charts/funnel-dropoff-chart.ts +++ b/apps/web/src/charts/funnel-dropoff-chart.ts @@ -177,13 +177,13 @@ const groupBars = (h: H, ctx: ColumnContext, step: Step, index: number): Html => ...(index > 0 && capH > 0 ? [ h.div([ - h.Class(cn("absolute inset-x-0 rounded-[3px]", LOST_CLASS)), + h.Class(cn("absolute inset-x-0 rounded-xs", LOST_CLASS)), h.Style({ bottom: `${height * 100}%`, height: `${capH * 100}%` }), ]), ] : []), h.div([ - h.Class("absolute inset-x-0 bottom-0 rounded-[3px]"), + h.Class("absolute inset-x-0 bottom-0 rounded-xs"), h.Style({ height: `${height * 100}%`, "background-color": group.color }), ]), ], diff --git a/apps/web/src/charts/hbar-chart.ts b/apps/web/src/charts/hbar-chart.ts index 4e934bed85..c2864c7147 100644 --- a/apps/web/src/charts/hbar-chart.ts +++ b/apps/web/src/charts/hbar-chart.ts @@ -111,12 +111,12 @@ export const view = Submodel.defineView((model, }), h.div( [ - h.Class("relative w-full overflow-hidden rounded-[3px] bg-foreground/5"), + h.Class("relative w-full overflow-hidden rounded-xs bg-foreground/5"), h.Style({ height: `${barH}px` }), ], [ h.div([ - h.Class("absolute inset-y-0 left-0 rounded-[3px]"), + h.Class("absolute inset-y-0 left-0 rounded-xs"), h.Style({ width: `${bar.widthPct * 100}%`, "background-color": bar.color, diff --git a/apps/web/src/charts/heatmap-chart.ts b/apps/web/src/charts/heatmap-chart.ts index 3d0ba9e499..3b9d1502d4 100644 --- a/apps/web/src/charts/heatmap-chart.ts +++ b/apps/web/src/charts/heatmap-chart.ts @@ -78,7 +78,7 @@ const emptyState = (h: H, inputs: HeatmapChartInputs): Html => { [ h.div( [ - h.Class("grid grid-cols-8 gap-[2px] rounded-sm p-[3px]"), + h.Class("grid grid-cols-8 gap-0.5 rounded-sm p-[3px]"), h.Style({ background: grout(inputs.theme) }), ], Array.from({ length: 32 }, (_, i) => diff --git a/apps/web/src/charts/linked-cursor.ts b/apps/web/src/charts/linked-cursor.ts index ef1d0a6250..c7a9440827 100644 --- a/apps/web/src/charts/linked-cursor.ts +++ b/apps/web/src/charts/linked-cursor.ts @@ -146,7 +146,7 @@ export const linkedCursorOverlay = (h: HtmlBuilder, chartId: string): Html ], [ h.div([ - h.Class("absolute inset-y-0 left-0 w-px bg-muted-foreground/45 will-change-transform"), + h.Class("absolute inset-y-0 left-0 w-px bg-foreground-faint will-change-transform"), h.Style({ transform: "translateX(calc(var(--linked-cursor-ratio) * (100cqw - 1px)))" }), ]), ], diff --git a/apps/web/src/components/infra/severity-tokens.ts b/apps/web/src/components/infra/severity-tokens.ts index 3d75958cbe..4200fdfb62 100644 --- a/apps/web/src/components/infra/severity-tokens.ts +++ b/apps/web/src/components/infra/severity-tokens.ts @@ -45,8 +45,8 @@ export const BAR_VALUE_TONE: Record = { /** Status dot fill. */ export const STATUS_DOT: Record = { active: TONE_FILL.ok, - idle: "bg-muted-foreground/60", - ended: "bg-muted-foreground/40", + idle: "bg-foreground-subtle", + ended: "bg-foreground-faint", } satisfies Record /** Status dot ring. */ diff --git a/apps/web/src/lab/kit/overlays/view.ts b/apps/web/src/lab/kit/overlays/view.ts index d5b513c151..92d54447c5 100644 --- a/apps/web/src/lab/kit/overlays/view.ts +++ b/apps/web/src/lab/kit/overlays/view.ts @@ -83,7 +83,7 @@ const itemLink = (h: H, name: OverlayItem, isActive: boolean): Html => "rounded-md border px-2 py-1 font-mono text-xs transition-colors", isActive ? "active border-foreground/20 bg-accent font-medium text-foreground" - : "border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground", + : "border-border text-muted-foreground hover:bg-surface-sunken hover:text-foreground", ), ), ...(isActive ? [h.DataAttribute("status", "active")] : []), diff --git a/apps/web/src/page/agent-sessions/session/span-popover-messages.ts b/apps/web/src/page/agent-sessions/session/span-popover-messages.ts index 17a35f4d0f..43f43c3b08 100644 --- a/apps/web/src/page/agent-sessions/session/span-popover-messages.ts +++ b/apps/web/src/page/agent-sessions/session/span-popover-messages.ts @@ -207,7 +207,7 @@ const messageBlock = (h: H, model: Model, message: SpanMessage, span: AiSessionS ), ] : []), - h.span([h.AriaHidden(true), h.Class("h-px min-w-4 flex-1 bg-border/60")], []), + h.span([h.AriaHidden(true), h.Class("h-px min-w-4 flex-1 bg-border-subtle")], []), ...(hasText ? [viewSwitch(h, { rendered, isRaw, rawKey: `${key}:raw` })] : []), ], ), diff --git a/apps/web/src/page/agent-sessions/session/span-visuals.ts b/apps/web/src/page/agent-sessions/session/span-visuals.ts index 572c743d3b..2df587472c 100644 --- a/apps/web/src/page/agent-sessions/session/span-visuals.ts +++ b/apps/web/src/page/agent-sessions/session/span-visuals.ts @@ -4,7 +4,7 @@ import type { IconName } from "../../../ui/icon" // Span visuals, as icon names: one token // per kind of work, read by the time breakdown, the waterfall and the flow. -const NO_WORK_FILL = "bg-muted-foreground/40" +const NO_WORK_FILL = "bg-foreground-faint" export const CATEGORY_FILL = { agent: "bg-chart-ai-agent", diff --git a/apps/web/src/page/agent-sessions/session/transcript-lanes.ts b/apps/web/src/page/agent-sessions/session/transcript-lanes.ts index 5af992f530..ec6c5111a6 100644 --- a/apps/web/src/page/agent-sessions/session/transcript-lanes.ts +++ b/apps/web/src/page/agent-sessions/session/transcript-lanes.ts @@ -136,7 +136,7 @@ const parallelRule = (h: H, label: string, range: string): Html => icon(h, "BranchForkIcon", { size: 12, className: "shrink-0" }), truncatedText(h, { text: label, className: "font-medium text-xs" }), h.span([h.Class(cn(META, "shrink-0"))], [range]), - h.span([h.AriaHidden(true), h.Class("h-px min-w-6 grow bg-border/60")], []), + h.span([h.AriaHidden(true), h.Class("h-px min-w-6 grow bg-border-subtle")], []), ], ) diff --git a/apps/web/src/page/agent-sessions/session/transcript-turns.ts b/apps/web/src/page/agent-sessions/session/transcript-turns.ts index 6ec24a308d..f4999f50b6 100644 --- a/apps/web/src/page/agent-sessions/session/transcript-turns.ts +++ b/apps/web/src/page/agent-sessions/session/transcript-turns.ts @@ -20,7 +20,7 @@ const summariseTurn = (chapter: Extract): strin ...(chapter.toolNames.length > 0 ? [chapter.toolNames.join(", ")] : []), ].join(" ยท ") -const rule = (h: H): Html => h.span([h.AriaHidden(true), h.Class("h-px grow bg-border/60")], []) +const rule = (h: H): Html => h.span([h.AriaHidden(true), h.Class("h-px grow bg-border-subtle")], []) export const turnChapter = ( h: H, diff --git a/apps/web/src/page/agent-sessions/session/view-checks.ts b/apps/web/src/page/agent-sessions/session/view-checks.ts index bd1beee75a..695da03983 100644 --- a/apps/web/src/page/agent-sessions/session/view-checks.ts +++ b/apps/web/src/page/agent-sessions/session/view-checks.ts @@ -106,7 +106,7 @@ const evidenceRow = (h: H, model: Model, finding: SessionFinding, status: Sessio [ h.AriaHasPopup("dialog"), h.Class( - "group flex w-full items-baseline gap-2 rounded-sm px-1.5 py-0.5 text-left font-mono text-xs hover:bg-accent/50", + "group flex w-full items-baseline gap-2 rounded-sm px-1.5 py-0.5 text-left font-mono text-xs hover:bg-surface-sunken", ), h.Type("button"), h.OnClick(openSpan(model, finding.spanId)), @@ -268,7 +268,7 @@ const disclosure = ( h.button( [ h.AriaExpanded(isExpanded), - h.Class(cn(ROW_GRID, "w-full py-2.5 text-left hover:bg-accent/50")), + h.Class(cn(ROW_GRID, "w-full py-2.5 text-left hover:bg-surface-sunken")), h.Type("button"), h.OnClick(Message.ToggledChecks({ which: options.which, isOpen: !isExpanded })), ], diff --git a/apps/web/src/page/agent-sessions/session/view-waterfall.ts b/apps/web/src/page/agent-sessions/session/view-waterfall.ts index 250edeea64..0a51c02ef5 100644 --- a/apps/web/src/page/agent-sessions/session/view-waterfall.ts +++ b/apps/web/src/page/agent-sessions/session/view-waterfall.ts @@ -68,7 +68,7 @@ const axisGrid = (h: H, ticks: ReadonlyArray): ReadonlyArray => [ h.Key(String(tick.fraction)), h.AriaHidden(true), - h.Class("absolute inset-y-0 w-px bg-border/40"), + h.Class("absolute inset-y-0 w-px bg-border-subtle"), h.Style({ left: `${tick.fraction * 100}%` }), ], [], @@ -177,7 +177,7 @@ const turnHeader = ( return h.div( [ h.Class( - "flex h-full w-full items-center rounded-md bg-card px-2.5 text-left text-xs hover:bg-accent/50", + "flex h-full w-full items-center rounded-md bg-card px-2.5 text-left text-xs hover:bg-surface-sunken", ), ], [ @@ -326,7 +326,7 @@ const spanRow = ( h.AriaHasPopup("dialog"), h.Class( cn( - "flex h-full w-full cursor-pointer items-center px-2.5 text-left text-xs hover:bg-accent/50", + "flex h-full w-full cursor-pointer items-center px-2.5 text-left text-xs hover:bg-surface-sunken", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", isErrored && "bg-severity-error/6", state.isFocused && "bg-accent/60", diff --git a/apps/web/src/page/agent-sessions/tool/view-charts.ts b/apps/web/src/page/agent-sessions/tool/view-charts.ts index 5fac835ca2..bfb960339e 100644 --- a/apps/web/src/page/agent-sessions/tool/view-charts.ts +++ b/apps/web/src/page/agent-sessions/tool/view-charts.ts @@ -95,7 +95,7 @@ const cell = ( h.Class( cn( "flex min-w-0 flex-col", - "gap-3.5 border-b border-border px-6 pt-[22px] pb-5 @min-[900px]/page:[&:nth-child(odd)]:border-r", + "gap-3.5 border-b border-border px-6 py-5 @min-[900px]/page:[&:nth-child(odd)]:border-r", ), ), ], diff --git a/apps/web/src/page/agent-sessions/tool/view-error-modal-payload.ts b/apps/web/src/page/agent-sessions/tool/view-error-modal-payload.ts index 52ff396dc8..0a731c7d39 100644 --- a/apps/web/src/page/agent-sessions/tool/view-error-modal-payload.ts +++ b/apps/web/src/page/agent-sessions/tool/view-error-modal-payload.ts @@ -61,7 +61,7 @@ const payloadLineView = (h: H, line: PayloadLine): Html => ? h.span( [ h.Class( - "my-0.5 inline-flex items-center gap-2 rounded-[3px] border border-dashed border-severity-error/60 px-1.5 text-2xs leading-4 text-severity-error", + "my-0.5 inline-flex items-center gap-2 rounded-xs border border-dashed border-severity-error/60 px-1.5 text-2xs leading-4 text-severity-error", ), ], ['"', line.missingKey, '"', h.span([h.Class("opacity-80")], ["missing, required"])], @@ -85,7 +85,7 @@ const payloadLineView = (h: H, line: PayloadLine): Html => ? [] : [ h.span( - [h.Class("ml-2 rounded-[3px] bg-muted px-1 text-2xs text-muted-foreground")], + [h.Class("ml-2 rounded-xs bg-muted px-1 text-2xs text-muted-foreground")], [line.folded], ), ]), @@ -101,7 +101,7 @@ const payloadLineView = (h: H, line: PayloadLine): Html => h.span( [ h.Class( - "rounded-[3px] bg-muted px-1 text-2xs text-muted-foreground", + "rounded-xs bg-muted px-1 text-2xs text-muted-foreground", ), ], ["+", formatToolCount(line.note.hiddenBytes), " B not shown"], @@ -253,7 +253,7 @@ export const sampleBody = (h: H, model: Model, row: ToolErrorOccurrenceRow): Htm h.div( [ h.Class( - "flex items-baseline gap-3 rounded-md border border-severity-error/20 bg-severity-error/[0.07] px-3 py-[9px] font-mono", + "flex items-baseline gap-3 rounded-md border border-severity-error/20 bg-severity-error/[0.07] px-3 py-2 font-mono", ), ], [ diff --git a/apps/web/src/page/agent-sessions/tool/view-error-modal-rail.ts b/apps/web/src/page/agent-sessions/tool/view-error-modal-rail.ts index 06f0d5a80b..acbb12f2b3 100644 --- a/apps/web/src/page/agent-sessions/tool/view-error-modal-rail.ts +++ b/apps/web/src/page/agent-sessions/tool/view-error-modal-rail.ts @@ -120,7 +120,7 @@ const variantsSection = ( const whereItHappens = (h: H, rows: ReadonlyArray, isLoading: boolean): Html => h.section( - [h.Class("flex flex-col gap-3.5 border-b border-border px-4 pt-4 pb-[18px]")], + [h.Class("flex flex-col gap-3.5 border-b border-border p-4")], [ h.span([h.Class(RAIL_TITLE)], ["Where it happens"]), ...(isLoading && rows.length === 0 @@ -276,7 +276,7 @@ const sessionsSection = (h: H, model: Model, inputs: ModalInputs, detail: ErrorD [], ), h.span( - [h.Class("flex w-0 min-w-0 grow flex-col items-start gap-[3px]")], + [h.Class("flex w-0 min-w-0 grow flex-col items-start gap-1")], [ sessionLink(h, { tool: inputs.tool, @@ -319,7 +319,7 @@ const sessionsSection = (h: H, model: Model, inputs: ModalInputs, detail: ErrorD ) })), h.div( - [h.Class("flex h-9 shrink-0 items-center gap-[9px] px-4 font-mono text-xs")], + [h.Class("flex h-9 shrink-0 items-center gap-2 px-4 font-mono text-xs")], [ h.span( [h.Class("text-muted-foreground")], diff --git a/apps/web/src/page/agent-sessions/tool/view-error-modal-samples.ts b/apps/web/src/page/agent-sessions/tool/view-error-modal-samples.ts index 82640a3b59..d5f843a5e1 100644 --- a/apps/web/src/page/agent-sessions/tool/view-error-modal-samples.ts +++ b/apps/web/src/page/agent-sessions/tool/view-error-modal-samples.ts @@ -29,7 +29,7 @@ const SAMPLES_PAGE = 25 const footer = (h: H, model: Model, shown: number, total: number): Html => { const paging = pagingOf(model) return h.div( - [h.Class("flex h-9 items-center gap-[9px] px-6 font-mono text-xs")], + [h.Class("flex h-9 items-center gap-2 px-6 font-mono text-xs")], [ h.span( [h.Class("text-muted-foreground")], @@ -217,7 +217,7 @@ const sampleRow = ( }), h.span([h.Class("shrink-0 text-xs text-foreground")], [time]), h.span( - [h.Class("flex min-w-0 shrink items-center gap-[5px] text-xs")], + [h.Class("flex min-w-0 shrink items-center gap-1.5 text-xs")], [ h.span([h.Class("shrink-0 text-foreground-subtle")], ["session"]), sessionLink(h, { @@ -250,7 +250,7 @@ const sampleRow = ( h.span( [ h.Class( - "hidden shrink-0 rounded-sm border border-border px-[5px] text-2xs leading-3.5 text-foreground-subtle md:block", + "hidden shrink-0 rounded-sm border border-border px-1.5 text-2xs leading-3.5 text-foreground-subtle md:block", ), ], ["variant ", h.span([h.Class("text-foreground-soft")], [options.variant])], @@ -285,7 +285,7 @@ const sampleRow = ( )}`, ), h.Class( - "relative flex shrink-0 items-center gap-[5px] text-2xs text-muted-foreground transition-colors hover:text-foreground", + "relative flex shrink-0 items-center gap-1.5 text-2xs text-muted-foreground transition-colors hover:text-foreground", ), ], [ diff --git a/apps/web/src/page/agent-sessions/tool/view-error-modal.ts b/apps/web/src/page/agent-sessions/tool/view-error-modal.ts index e8cd1f172f..3abef2d9e2 100644 --- a/apps/web/src/page/agent-sessions/tool/view-error-modal.ts +++ b/apps/web/src/page/agent-sessions/tool/view-error-modal.ts @@ -135,7 +135,7 @@ const headerLead = (h: H, inputs: ModalInputs): Html => { h.span( [ h.Class( - "ml-1 rounded-sm border border-border px-[5px] text-2xs text-foreground-subtle", + "ml-1 rounded-sm border border-border px-1.5 text-2xs text-foreground-subtle", ), ], ["error.type ", group.errorType], @@ -236,7 +236,7 @@ const content = (h: H, model: Model, inputs: ModalInputs): Html => { h.header( [ h.Class( - "flex shrink-0 items-start gap-8 border-b border-border px-6 pt-5 pb-[18px] max-lg:flex-col max-lg:gap-4", + "flex shrink-0 items-start gap-8 border-b border-border px-6 py-5 max-lg:flex-col max-lg:gap-4", ), ], [ diff --git a/apps/web/src/page/agent-sessions/tool/view-errors.ts b/apps/web/src/page/agent-sessions/tool/view-errors.ts index 3ea4120775..4161021f1f 100644 --- a/apps/web/src/page/agent-sessions/tool/view-errors.ts +++ b/apps/web/src/page/agent-sessions/tool/view-errors.ts @@ -147,7 +147,7 @@ const errorRow = ( [ h.Class( cn( - "flex h-4.5 shrink-0 items-center rounded-sm border border-border px-[5px] text-2xs leading-3.5", + "flex h-4.5 shrink-0 items-center rounded-sm border border-border px-1.5 text-2xs leading-3.5", TONE_TEXT.crit, ), ), @@ -433,7 +433,7 @@ export const errorsTable = (h: H, inputs: ErrorsTableInputs): Html => { ? h.div( [ h.Class( - "flex flex-col gap-2 border-t border-border px-2.5 pt-[22px] pb-5 font-mono", + "flex flex-col gap-2 border-t border-border px-2.5 py-5 font-mono", ), ], [ diff --git a/apps/web/src/page/agent-sessions/tools-kit/error-parts.ts b/apps/web/src/page/agent-sessions/tools-kit/error-parts.ts index 5e8aa81c66..84777b0e52 100644 --- a/apps/web/src/page/agent-sessions/tools-kit/error-parts.ts +++ b/apps/web/src/page/agent-sessions/tools-kit/error-parts.ts @@ -23,7 +23,7 @@ export const maskChip = (h: HtmlBuilder, label: string, raw: string, class inlineCodeClassName( "chip", cn( - "mx-px inline-block rounded-[3px] px-[3px] py-0 align-baseline text-2xs leading-3.75 font-normal text-muted-foreground", + "mx-px inline-block rounded-xs px-1 py-0 align-baseline text-2xs leading-3.75 font-normal text-muted-foreground", className, ), ), diff --git a/apps/web/src/page/agent-sessions/tools-kit/metric-strip.ts b/apps/web/src/page/agent-sessions/tools-kit/metric-strip.ts index 39f33a6294..5992b4a834 100644 --- a/apps/web/src/page/agent-sessions/tools-kit/metric-strip.ts +++ b/apps/web/src/page/agent-sessions/tools-kit/metric-strip.ts @@ -47,7 +47,7 @@ export const selectableTile = (h: HtmlBuilder, options: TileOptions): H }) const sublineText = (h: HtmlBuilder, children: ReadonlyArray): Html => - h.span([h.Class("inline-flex items-center gap-[5px] font-mono tabular-nums")], children) + h.span([h.Class("inline-flex items-center gap-1.5 font-mono tabular-nums")], children) /** `ToolDeltaValue`: the change in the metric's own unit, graded by `toolDelta`. */ const deltaValue = (h: HtmlBuilder, change: ToolDelta): Html => diff --git a/apps/web/src/page/agent-sessions/tools-kit/scope-row.ts b/apps/web/src/page/agent-sessions/tools-kit/scope-row.ts index 577423ba1a..1e4cb79e12 100644 --- a/apps/web/src/page/agent-sessions/tools-kit/scope-row.ts +++ b/apps/web/src/page/agent-sessions/tools-kit/scope-row.ts @@ -21,7 +21,7 @@ const chipButton = (h: HtmlBuilder, chip: ScopeChip, onRemove: M): Html => h.Key(`${chip.kind}:${chip.value}`), h.AriaLabel(`Remove ${chip.kind} ${chip.value}`), h.Class( - "inline-flex h-[22px] max-w-64 items-center gap-[5px] rounded-sm border border-primary/35 bg-primary/10 px-2 transition-colors hover:bg-primary/20", + "inline-flex h-[22px] max-w-64 items-center gap-1.5 rounded-sm border border-primary/35 bg-primary/10 px-2 transition-colors hover:bg-primary/20", ), h.DataAttribute("base-ui-tooltip-trigger", ""), h.DataAttribute("slot", "tooltip-trigger"), diff --git a/apps/web/src/page/agent-sessions/tools-kit/series-chart.ts b/apps/web/src/page/agent-sessions/tools-kit/series-chart.ts index e4f4c5477e..8f5a775eb8 100644 --- a/apps/web/src/page/agent-sessions/tools-kit/series-chart.ts +++ b/apps/web/src/page/agent-sessions/tools-kit/series-chart.ts @@ -154,7 +154,7 @@ export const seriesChart = ( h.Class( cn( "flex min-w-0 flex-col", - "gap-4 border-b border-border px-6 pt-[22px] pb-5", + "gap-4 border-b border-border px-6 py-5", refreshingClass(inputs.isWaiting), ), ), diff --git a/apps/web/src/page/agent-sessions/tools-kit/table.ts b/apps/web/src/page/agent-sessions/tools-kit/table.ts index 236c3c186a..cab2e5c02e 100644 --- a/apps/web/src/page/agent-sessions/tools-kit/table.ts +++ b/apps/web/src/page/agent-sessions/tools-kit/table.ts @@ -138,7 +138,7 @@ export const toolRowClass = (isSelected: boolean): string => export const toolTableFooter = (h: HtmlBuilder, subject: string, detail: string): Html => h.div( - [h.Class("flex h-9 items-center gap-[9px] px-2.5 font-mono text-xs")], + [h.Class("flex h-9 items-center gap-2 px-2.5 font-mono text-xs")], [ h.span([h.Class("text-muted-foreground")], [subject]), h.span([h.Class("text-foreground-subtle")], [detail]), diff --git a/apps/web/src/page/agent-sessions/tools/view-table.ts b/apps/web/src/page/agent-sessions/tools/view-table.ts index cafd817566..88eb6f43b5 100644 --- a/apps/web/src/page/agent-sessions/tools/view-table.ts +++ b/apps/web/src/page/agent-sessions/tools/view-table.ts @@ -112,13 +112,13 @@ const cells = (h: H, row: Prepared, inputs: ToolsTableInputs, maxErrorRate: numb const color = inputs.colorFor(row.key) return [ h.span( - [h.Class("flex w-0 min-w-0 flex-1 items-center gap-[9px]")], + [h.Class("flex w-0 min-w-0 flex-1 items-center gap-2")], [ h.span( [ h.AriaHidden(true), h.Class( - cn("size-2 shrink-0 rounded-xs", color === undefined && "bg-muted-foreground/50"), + cn("size-2 shrink-0 rounded-xs", color === undefined && "bg-foreground-subtle"), ), ...(color === undefined ? [] : [h.Style({ "background-color": color })]), ], diff --git a/apps/web/src/page/alerts/editor/view-condition.ts b/apps/web/src/page/alerts/editor/view-condition.ts index 2ef5fa9c21..c11af7b326 100644 --- a/apps/web/src/page/alerts/editor/view-condition.ts +++ b/apps/web/src/page/alerts/editor/view-condition.ts @@ -108,7 +108,7 @@ const severityPicker = (h: H, value: AlertSeverity): Html => { children: [ statusDot(h, { tone: "custom", - className: isSelected ? option.dot : "bg-muted-foreground/40", + className: isSelected ? option.dot : "bg-foreground-faint", }), option.label, ], diff --git a/apps/web/src/page/alerts/editor/view-hero.ts b/apps/web/src/page/alerts/editor/view-hero.ts index e14a265fb5..c912398999 100644 --- a/apps/web/src/page/alerts/editor/view-hero.ts +++ b/apps/web/src/page/alerts/editor/view-hero.ts @@ -96,7 +96,7 @@ const header = (h: H, model: HeaderView, form: RuleForm, timeZone: string): Html ? [] : [ h.span( - [h.Class("hidden max-w-[360px] truncate text-muted-foreground text-xs md:inline")], + [h.Class("hidden max-w-90 truncate text-muted-foreground text-xs md:inline")], ["per ", summary], ), ]), diff --git a/apps/web/src/page/alerts/editor/view-impact.ts b/apps/web/src/page/alerts/editor/view-impact.ts index 898675a0c9..1efe1788b5 100644 --- a/apps/web/src/page/alerts/editor/view-impact.ts +++ b/apps/web/src/page/alerts/editor/view-impact.ts @@ -222,7 +222,7 @@ const fireRail = ( h.Class( cn( "absolute inset-y-0 min-w-0.5 rounded-[1px]", - tone === "crit" ? "bg-severity-error" : "bg-muted-foreground/60", + tone === "crit" ? "bg-severity-error" : "bg-foreground-subtle", ), ), h.Style({ left: `${mark.left * 100}%`, width: `${mark.width * 100}%` }), diff --git a/apps/web/src/page/alerts/hub/view-inbox.ts b/apps/web/src/page/alerts/hub/view-inbox.ts index 418eefd79b..f4617c0649 100644 --- a/apps/web/src/page/alerts/hub/view-inbox.ts +++ b/apps/web/src/page/alerts/hub/view-inbox.ts @@ -163,7 +163,7 @@ const openIncidentRow = (h: HtmlBuilder, incident: AlertIncidentDocument, cn( "absolute inset-y-2 left-0 w-0.5 rounded-full", isHeld - ? "bg-muted-foreground/50" + ? "bg-foreground-subtle" : incident.severity === "critical" ? "bg-severity-error" : "bg-severity-warn", @@ -324,7 +324,7 @@ const fireLaneRow = (h: HtmlBuilder, lane: FireLane): Html => cn( "absolute inset-y-0 rounded-xs", bar.held - ? "bg-muted-foreground/60" + ? "bg-foreground-subtle" : bar.severity === "critical" ? "bg-severity-error" : "bg-severity-warn", @@ -499,7 +499,7 @@ const headroomRow = (h: HtmlBuilder, row: RuleHeadroom, now: number): Html h.Class( cn( "absolute inset-y-0 left-0 rounded-xs", - isNear ? "bg-severity-warn" : "bg-muted-foreground/45", + isNear ? "bg-severity-warn" : "bg-foreground-faint", ), ), h.Style({ width: `${Math.max(closeness * 100, 1.5)}%` }), diff --git a/apps/web/src/page/alerts/hub/view-routing.ts b/apps/web/src/page/alerts/hub/view-routing.ts index a71a3abb6e..945ccb0165 100644 --- a/apps/web/src/page/alerts/hub/view-routing.ts +++ b/apps/web/src/page/alerts/hub/view-routing.ts @@ -304,8 +304,8 @@ export const destinationRow = (h: H, model: Model, inputs: RoutingInputs, row: R const ATTEMPT_CLASS = new Map([ ["success", "bg-severity-info"], ["failed", "bg-severity-error"], - ["queued", "bg-muted-foreground/40"], - ["processing", "bg-muted-foreground/40"], + ["queued", "bg-foreground-faint"], + ["processing", "bg-foreground-faint"], ]) // TODO(tooltip): the strip's hover tooltip ("Last N attempts delivered") is not drawn yet. diff --git a/apps/web/src/page/alerts/rule/view-query-time.ts b/apps/web/src/page/alerts/rule/view-query-time.ts index cb8c9489f3..cb6db52216 100644 --- a/apps/web/src/page/alerts/rule/view-query-time.ts +++ b/apps/web/src/page/alerts/rule/view-query-time.ts @@ -107,7 +107,7 @@ export const queryTimeCard = ( : [ h.div( [ - h.Class("pointer-events-none absolute inset-x-0 border-t border-dotted border-muted-foreground/50"), + h.Class("pointer-events-none absolute inset-x-0 border-t border-dotted border-foreground-subtle"), h.Style({ bottom: `${(earlierLimitMs / scaleMs) * 100}%` }), ], [], diff --git a/apps/web/src/page/alerts/shared/rule-chart.ts b/apps/web/src/page/alerts/shared/rule-chart.ts index 2e2581be0c..863ff05b70 100644 --- a/apps/web/src/page/alerts/shared/rule-chart.ts +++ b/apps/web/src/page/alerts/shared/rule-chart.ts @@ -65,7 +65,7 @@ type RailStatus = "breached" | "error" | "skipped" | "healthy" | "empty" const RAIL_COLOR = new Map([ ["breached", TONE_FILL.crit], ["error", TONE_FILL.warn], - ["skipped", "bg-muted-foreground/30"], + ["skipped", "bg-foreground-faint"], ["healthy", "bg-chart-apdex/70"], ["empty", "bg-surface-sunken"], ]) diff --git a/apps/web/src/page/alerts/shared/uptime-view.ts b/apps/web/src/page/alerts/shared/uptime-view.ts index 76b9d12440..8aba535ef9 100644 --- a/apps/web/src/page/alerts/shared/uptime-view.ts +++ b/apps/web/src/page/alerts/shared/uptime-view.ts @@ -29,7 +29,7 @@ export const uptimeStatusSquare = (h: HtmlBuilder, monitor: UptimeMonitor) h.AriaHidden(true), h.Class( cn( - "inline-block size-2 shrink-0 rounded-[2px]", + "inline-block size-2 shrink-0 rounded-xs", TONE_FILL[STATUS_TONE[displayStatus(monitor)]], ), ), diff --git a/apps/web/src/page/alerts/uptime-monitor/view-panels.ts b/apps/web/src/page/alerts/uptime-monitor/view-panels.ts index 2e9b2899be..0017cfa9ac 100644 --- a/apps/web/src/page/alerts/uptime-monitor/view-panels.ts +++ b/apps/web/src/page/alerts/uptime-monitor/view-panels.ts @@ -531,7 +531,7 @@ const checkBars = ( h.Href(traceHref(sample.traceId)), h.Attribute("tabindex", "-1"), h.OnMouseEnter(Message.HoveredCheck({ index })), - h.Class("group absolute inset-y-0 -translate-x-1/2 hover:bg-foreground/5"), + h.Class("group absolute inset-y-0 -translate-x-1/2 hover:bg-surface-sunken"), h.Style({ left: `${xShare(isoMs(sample.at), domain) * 100}%`, width }), ], [ @@ -596,7 +596,7 @@ const cardRow = (h: H, key: string, color: string, label: string, value: string) [h.Class("flex items-center gap-1.5 text-muted-foreground")], [ h.span( - [h.Class("inline-block size-2 rounded-[2px]"), h.Style({ background: color })], + [h.Class("inline-block size-2 rounded-xs"), h.Style({ background: color })], [], ), label, @@ -652,7 +652,7 @@ const legendItem = (h: H, key: string, swatch: Html, label: string): Html => h.span([h.Key(key), h.Class("flex items-center gap-1.5")], [swatch, label]) const swatch = (h: H, color: string): Html => - h.span([h.Class("inline-block size-2 rounded-[2px]"), h.Style({ background: color })], []) + h.span([h.Class("inline-block size-2 rounded-xs"), h.Style({ background: color })], []) const barsLegend = (h: H, samples: ReadonlyArray, yMax: number): Html => { const timed = samples.some((sample) => sample.ok && sample.phases !== null) diff --git a/apps/web/src/page/analytics/view-icons.ts b/apps/web/src/page/analytics/view-icons.ts index db107e1384..995443dc73 100644 --- a/apps/web/src/page/analytics/view-icons.ts +++ b/apps/web/src/page/analytics/view-icons.ts @@ -29,7 +29,7 @@ export const favicon = (h: H, model: Model, host: string, className?: string): H h.Decoding("async"), h.Referrerpolicy("no-referrer"), h.OnError(Message.FailedFavicon({ host })), - h.Class(cn(ICON_BOX, "rounded-[3px] object-contain", className)), + h.Class(cn(ICON_BOX, "rounded-xs object-contain", className)), ]) const ICON_KEYS: ReadonlyArray = ["referrerHost", "host", "utmSource", "browserName", "deviceType"] diff --git a/apps/web/src/page/code-review/analytics/view-lists.ts b/apps/web/src/page/code-review/analytics/view-lists.ts index 6e4728229e..5bd9f18a69 100644 --- a/apps/web/src/page/code-review/analytics/view-lists.ts +++ b/apps/web/src/page/code-review/analytics/view-lists.ts @@ -103,7 +103,7 @@ export const outcomesCard = ( tone: TONE_FILL.neutral, }, { key: "failed", label: "Failed", value: current.failedReviews, tone: TONE_FILL.crit }, - { key: "skipped", label: "Skipped", value: current.skippedReviews, tone: "bg-muted-foreground/30" }, + { key: "skipped", label: "Skipped", value: current.skippedReviews, tone: "bg-foreground-faint" }, ] return analyticsPanel(h, { title: "Review outcomes" }, [ barList( diff --git a/apps/web/src/page/dashboards/templates/view-panel.ts b/apps/web/src/page/dashboards/templates/view-panel.ts index a3fa74cd57..14551c8366 100644 --- a/apps/web/src/page/dashboards/templates/view-panel.ts +++ b/apps/web/src/page/dashboards/templates/view-panel.ts @@ -211,7 +211,7 @@ const requirementBlock = ( ? h.span( [ h.Class( - "bg-severity-info flex size-4 shrink-0 items-center justify-center rounded-[3px]", + "bg-severity-info flex size-4 shrink-0 items-center justify-center rounded-xs", ), ], [icon(h, "CheckIcon", { size: 10, className: "text-background" })], diff --git a/apps/web/src/page/dashboards/view/view-grid.ts b/apps/web/src/page/dashboards/view/view-grid.ts index ab10e8ccff..e3bf41118d 100644 --- a/apps/web/src/page/dashboards/view/view-grid.ts +++ b/apps/web/src/page/dashboards/view/view-grid.ts @@ -40,7 +40,7 @@ const resizeHandle = (h: H): Html => h.DataAttribute("grid-resize-handle", ""), h.AriaHidden(true), h.Class( - "absolute right-0 bottom-0 size-5 cursor-se-resize touch-none opacity-0 transition-opacity group-hover/cell:opacity-100 group-[.is-layout-locked]/canvas:hidden after:absolute after:right-1 after:bottom-1 after:size-1.5 after:border-r-2 after:border-b-2 after:border-muted-foreground/60", + "absolute right-0 bottom-0 size-5 cursor-se-resize touch-none opacity-0 transition-opacity group-hover/cell:opacity-100 group-[.is-layout-locked]/canvas:hidden after:absolute after:right-1 after:bottom-1 after:size-1.5 after:border-r-2 after:border-b-2 after:border-foreground-subtle", ), ]) diff --git a/apps/web/src/page/dashboards/view/view-share.ts b/apps/web/src/page/dashboards/view/view-share.ts index cdbcc794a6..63a6606318 100644 --- a/apps/web/src/page/dashboards/view/view-share.ts +++ b/apps/web/src/page/dashboards/view/view-share.ts @@ -112,7 +112,7 @@ const accessOption = ( h.For(`share-${option.value}`), h.Id(`share-${option.value}-label`), h.Class( - "group flex cursor-pointer items-start gap-3 px-3.5 py-3 transition-colors hover:bg-accent/50 has-[[data-checked]]:bg-accent/64", + "group flex cursor-pointer items-start gap-3 px-3.5 py-3 transition-colors hover:bg-surface-sunken has-[[data-checked]]:bg-accent/64", ), ], [ diff --git a/apps/web/src/page/errors/issue/activity-format.ts b/apps/web/src/page/errors/issue/activity-format.ts index 5a1073f2a0..d1c602f9fe 100644 --- a/apps/web/src/page/errors/issue/activity-format.ts +++ b/apps/web/src/page/errors/issue/activity-format.ts @@ -43,13 +43,13 @@ export const DOT_CLASS = { agent_note: AGENT_ACCENT.fill, fix_proposed: TONE_FILL.ok, regression: TONE_FILL.crit, - snooze: "bg-muted-foreground/70", - unsnooze: "bg-muted-foreground/70", + snooze: "bg-foreground-subtle", + unsnooze: "bg-foreground-subtle", ai_triage: AGENT_ACCENT.fill, anomaly_linked: TONE_FILL.warn, severity_change: TONE_FILL.warn, pr_linked: "bg-muted-foreground", - pr_unlinked: "bg-muted-foreground/60", + pr_unlinked: "bg-foreground-subtle", pr_merged: TONE_FILL.ok, verification_started: IN_FLIGHT_FILL, verification_verdict: IN_FLIGHT_FILL, diff --git a/apps/web/src/page/errors/issue/view-activity.ts b/apps/web/src/page/errors/issue/view-activity.ts index aca35dafe7..e1023ba853 100644 --- a/apps/web/src/page/errors/issue/view-activity.ts +++ b/apps/web/src/page/errors/issue/view-activity.ts @@ -47,7 +47,7 @@ const rail = (h: H, marker: Html): Html => h.span( [h.Class("relative flex h-full justify-center")], [ - h.span([h.AriaHidden(true), h.Class("h-full w-px bg-border/60 group-last/row:h-5")]), + h.span([h.AriaHidden(true), h.Class("h-full w-px bg-border-subtle group-last/row:h-5")]), h.span([h.Class("absolute top-2.5 flex justify-center")], [marker]), ], ) diff --git a/apps/web/src/page/errors/issue/view-tables.ts b/apps/web/src/page/errors/issue/view-tables.ts index 8af098f069..546913c606 100644 --- a/apps/web/src/page/errors/issue/view-tables.ts +++ b/apps/web/src/page/errors/issue/view-tables.ts @@ -33,7 +33,7 @@ const incidentRow = (h: HtmlBuilder, incident: ErrorIncidentDocument, cloc [ h.span([ h.AriaHidden(true), - h.Class(cn("block h-full w-[3px]", isOpen ? "bg-severity-error" : "bg-border/60")), + h.Class(cn("block h-full w-[3px]", isOpen ? "bg-severity-error" : "bg-border-subtle")), ]), ], "w-8 p-0", diff --git a/apps/web/src/page/errors/kit/pickers.ts b/apps/web/src/page/errors/kit/pickers.ts index b40d8fe23d..2560d91cc5 100644 --- a/apps/web/src/page/errors/kit/pickers.ts +++ b/apps/web/src/page/errors/kit/pickers.ts @@ -20,7 +20,7 @@ export type PickerKind = "severity" | "state" export const PICKER_HOTKEY = { severity: "P", state: "S" } as const const TRIGGER = - "rounded-md transition-colors hover:bg-foreground/8 data-popup-open:bg-foreground/8 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none" + "rounded-md transition-colors hover:bg-surface-sunken data-popup-open:bg-surface-sunken focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none" /** `PopoverTrigger`'s closed-state attributes; an open popover supplies its own. */ const closedTrigger = (h: HtmlBuilder) => [ diff --git a/apps/web/src/page/errors/kit/severity.ts b/apps/web/src/page/errors/kit/severity.ts index 955a90be6f..13b3a85bce 100644 --- a/apps/web/src/page/errors/kit/severity.ts +++ b/apps/web/src/page/errors/kit/severity.ts @@ -54,7 +54,7 @@ export const severityDot = (h: HtmlBuilder, severity: IssueSeverity | null tone: "custom", size: "lg", className: cn( - severity === null ? "border border-muted-foreground/50" : SEVERITY_FILL[severity], + severity === null ? "border border-foreground-subtle" : SEVERITY_FILL[severity], className, ), }) diff --git a/apps/web/src/page/infra-integrations/aws/list/view-table.ts b/apps/web/src/page/infra-integrations/aws/list/view-table.ts index a9500d9860..c0bd2ae0a7 100644 --- a/apps/web/src/page/infra-integrations/aws/list/view-table.ts +++ b/apps/web/src/page/infra-integrations/aws/list/view-table.ts @@ -399,7 +399,7 @@ const row = (h: H, view: ResourceView, context: TableContext, showTraced: boolea view.health === "idle" ? statusDot(h, { tone: "custom", - className: "mt-1.5 border border-muted-foreground/70", + className: "mt-1.5 border border-foreground-subtle", }) : statusDot(h, { tone: HEALTH_TONE[view.health], className: "mt-1.5" }), h.div( diff --git a/apps/web/src/page/infra-integrations/cloudflare/list/view-accounts.ts b/apps/web/src/page/infra-integrations/cloudflare/list/view-accounts.ts index 418d350fd3..e5652e25ef 100644 --- a/apps/web/src/page/infra-integrations/cloudflare/list/view-accounts.ts +++ b/apps/web/src/page/infra-integrations/cloudflare/list/view-accounts.ts @@ -116,7 +116,7 @@ export const accountsStrip = ( [h.Class("block h-1 w-full overflow-hidden rounded-full bg-muted")], [ h.span([ - h.Class("block h-full rounded-full bg-muted-foreground/60"), + h.Class("block h-full rounded-full bg-foreground-subtle"), h.Style({ width: `${Math.max(fraction * 100, fraction > 0 ? 1.5 : 0)}%` }), ]), ], diff --git a/apps/web/src/page/infra-integrations/cloudflare/list/view-tables.ts b/apps/web/src/page/infra-integrations/cloudflare/list/view-tables.ts index a577974fcb..75b8568500 100644 --- a/apps/web/src/page/infra-integrations/cloudflare/list/view-tables.ts +++ b/apps/web/src/page/infra-integrations/cloudflare/list/view-tables.ts @@ -44,7 +44,7 @@ type H = HtmlBuilder // The server caps the list at 500 rows, so the row area scrolls rather than growing the page. // Capped: a short zone name on a wide page otherwise opens a gulf before its numbers. -const NAME = "w-0 flex-1 min-w-[200px] max-w-[360px]" +const NAME = "w-0 flex-1 min-w-52 max-w-90" const NUMBER = "text-right font-mono text-xs tabular-nums" export type SparkContext = Readonly<{ theme: ThemeColors | null; isChartReady: boolean }> @@ -384,7 +384,7 @@ const workerRow = (h: H, row: WorkerListRow, accounts: ReadonlyMap { { key: status, value: count, - className: success ? "bg-muted-foreground/60" : "bg-severity-error", + className: success ? "bg-foreground-subtle" : "bg-severity-error", }, ], }), diff --git a/apps/web/src/page/infra-integrations/cloudflare/zone/view-breakdown.ts b/apps/web/src/page/infra-integrations/cloudflare/zone/view-breakdown.ts index 8255a1cd11..8042143a46 100644 --- a/apps/web/src/page/infra-integrations/cloudflare/zone/view-breakdown.ts +++ b/apps/web/src/page/infra-integrations/cloudflare/zone/view-breakdown.ts @@ -128,7 +128,7 @@ const table = ( isWaiting: options.isWaiting, }, [ - head(dimension.column, "key", "w-0 flex-1 min-w-[220px]"), + head(dimension.column, "key", "w-0 flex-1 min-w-56"), head("Requests", "requests", "w-28"), head("Error rate", "errorRate", "w-24"), head("Bandwidth", "bytes", "w-24", "hidden md:flex"), @@ -147,7 +147,7 @@ const table = ( ], [ h.div( - [h.Class("w-0 min-w-[220px] flex-1 truncate")], + [h.Class("w-0 min-w-56 flex-1 truncate")], [ options.selected === null ? h.span( diff --git a/apps/web/src/page/infra-integrations/cloudflare/zone/view-sections.ts b/apps/web/src/page/infra-integrations/cloudflare/zone/view-sections.ts index 7d4f1de35e..7e49a1f9ec 100644 --- a/apps/web/src/page/infra-integrations/cloudflare/zone/view-sections.ts +++ b/apps/web/src/page/infra-integrations/cloudflare/zone/view-sections.ts @@ -149,7 +149,7 @@ export const dnsSection = ( h, { ariaLabel: "Top DNS query names", isWaiting }, [ - columnHead(h, { label: "Query name", width: "w-0 flex-1 min-w-[220px]" }), + columnHead(h, { label: "Query name", width: "w-0 flex-1 min-w-56" }), columnHead(h, { label: "Queries", align: "right", width: "w-24" }), columnHead(h, { label: "NXDOMAIN", align: "right", width: "w-28" }), ], @@ -162,7 +162,7 @@ export const dnsSection = ( h.div( [ h.Class( - "w-0 min-w-[220px] flex-1 truncate font-mono text-xs text-foreground", + "w-0 min-w-56 flex-1 truncate font-mono text-xs text-foreground", ), ], [row.queryName], @@ -261,7 +261,7 @@ export const securitySection = ( h, { ariaLabel: "Top security rules", isWaiting }, [ - columnHead(h, { label: "Rule", width: "w-0 flex-1 min-w-[200px]" }), + columnHead(h, { label: "Rule", width: "w-0 flex-1 min-w-52" }), columnHead(h, { label: "Source", width: "w-32", hidden: "hidden md:flex" }), columnHead(h, { label: "Action", width: "w-32" }), columnHead(h, { label: "Host", width: "w-44", hidden: "hidden lg:flex" }), @@ -277,7 +277,7 @@ export const securitySection = ( ], [ cell( - "w-0 min-w-[200px] flex-1 truncate font-mono text-xs text-foreground", + "w-0 min-w-52 flex-1 truncate font-mono text-xs text-foreground", row.ruleId, ), cell( diff --git a/apps/web/src/page/infra-integrations/gcp/list/view-band.ts b/apps/web/src/page/infra-integrations/gcp/list/view-band.ts index a2143a83c2..6aefbd6826 100644 --- a/apps/web/src/page/infra-integrations/gcp/list/view-band.ts +++ b/apps/web/src/page/infra-integrations/gcp/list/view-band.ts @@ -131,7 +131,7 @@ export const healthDot = ( ): Html => { const tone: Tone = health === "ok" ? "ok" : spec.cells[health].tone return tone === "neutral" - ? statusDot(h, { tone: "custom", size: "lg", className: "border border-muted-foreground/70" }) + ? statusDot(h, { tone: "custom", size: "lg", className: "border border-foreground-subtle" }) : statusDot(h, { tone, size: "lg" }) } diff --git a/apps/web/src/page/infra-integrations/gcp/list/view-resources.ts b/apps/web/src/page/infra-integrations/gcp/list/view-resources.ts index 68c1fdf4a0..5fd9a5cf17 100644 --- a/apps/web/src/page/infra-integrations/gcp/list/view-resources.ts +++ b/apps/web/src/page/infra-integrations/gcp/list/view-resources.ts @@ -32,7 +32,7 @@ const ALL = "all" const CELL = "truncate font-mono text-xs text-foreground-soft" const columns = (h: H): ReadonlyArray => [ - columnHead(h, { label: "Resource", width: "w-0 flex-1 min-w-[220px]" }), + columnHead(h, { label: "Resource", width: "w-0 flex-1 min-w-56" }), columnHead(h, { label: "Type", width: "w-44" }), columnHead(h, { label: "Project", width: "w-52" }), columnHead(h, { label: "Location", width: "w-32" }), @@ -46,7 +46,7 @@ const loading = (h: H): Html => { ariaLabel: "Google Cloud resources" }, columns(h), skeletonRows(h, 5, () => [ - skeleton(h, "h-4 w-0 min-w-[220px] flex-1"), + skeleton(h, "h-4 w-0 min-w-56 flex-1"), skeleton(h, "h-3 w-44"), skeleton(h, "h-3 w-52"), skeleton(h, "h-3 w-32"), @@ -95,7 +95,7 @@ const resourceRow = (h: H, resource: Resources["resources"][number], timeSearch: h.div( [ h.Class( - "w-0 min-w-[220px] flex-1 truncate font-mono text-xs font-medium text-foreground transition-colors group-hover:text-primary", + "w-0 min-w-56 flex-1 truncate font-mono text-xs font-medium text-foreground transition-colors group-hover:text-primary", ), h.Title(resource.name), ], diff --git a/apps/web/src/page/infra-integrations/gcp/list/view-rows.ts b/apps/web/src/page/infra-integrations/gcp/list/view-rows.ts index 9c3adc59d3..47c5648ae1 100644 --- a/apps/web/src/page/infra-integrations/gcp/list/view-rows.ts +++ b/apps/web/src/page/infra-integrations/gcp/list/view-rows.ts @@ -30,7 +30,7 @@ export type RowsContext = Readonly<{ locale: string }> -export const NAME = "w-0 min-w-[220px] flex-1" +export const NAME = "w-0 min-w-56 flex-1" export const NUMBER = "text-right font-mono text-xs tabular-nums" export const SUB = "font-mono text-3xs text-muted-foreground" @@ -115,7 +115,7 @@ export const spark = ( ? // All zeros is no traffic, not a flat line of data: a muted dash keeps the slot. h.div( [h.Class("flex h-5 min-w-0 flex-1 items-center")], - [h.span([h.AriaHidden(true), h.Class("h-px w-3 bg-muted-foreground/50")])], + [h.span([h.AriaHidden(true), h.Class("h-px w-3 bg-foreground-subtle")])], ) : h.div( [h.Class("h-5 min-w-0 flex-1")], diff --git a/apps/web/src/page/infra-integrations/gcp/list/view-tables.ts b/apps/web/src/page/infra-integrations/gcp/list/view-tables.ts index fabbdbca98..e4da3e5bdf 100644 --- a/apps/web/src/page/infra-integrations/gcp/list/view-tables.ts +++ b/apps/web/src/page/infra-integrations/gcp/list/view-tables.ts @@ -605,7 +605,7 @@ export const databasesTable = ( // The other services (GKE, Compute Engine, Load Balancing) --------------------------------------- -const GENERIC_NAME = "w-0 flex-1 min-w-[240px]" +const GENERIC_NAME = "w-0 flex-1 min-w-60" const VALUE_WIDTH = "w-28" const genericHead = (h: H, service: GcpInfraServiceId): ReadonlyArray => [ diff --git a/apps/web/src/page/infra-integrations/gcp/list/view.ts b/apps/web/src/page/infra-integrations/gcp/list/view.ts index de13971575..0d653c74d0 100644 --- a/apps/web/src/page/infra-integrations/gcp/list/view.ts +++ b/apps/web/src/page/infra-integrations/gcp/list/view.ts @@ -314,7 +314,7 @@ const projectsStrip = ( [h.Class("block h-1 w-full overflow-hidden rounded-full bg-muted")], [ h.span([ - h.Class("block h-full rounded-full bg-muted-foreground/60"), + h.Class("block h-full rounded-full bg-foreground-subtle"), h.Style({ width: `${Math.max(fraction * 100, fraction > 0 ? 1.5 : 0)}%`, }), diff --git a/apps/web/src/page/infra-integrations/gcp/workload/view-sql.ts b/apps/web/src/page/infra-integrations/gcp/workload/view-sql.ts index 420ad1e568..bc9d05791b 100644 --- a/apps/web/src/page/infra-integrations/gcp/workload/view-sql.ts +++ b/apps/web/src/page/infra-integrations/gcp/workload/view-sql.ts @@ -30,7 +30,7 @@ type H = HtmlBuilder type TimeSearch = Readonly<{ startTime?: string; endTime?: string; timePreset?: string }> const SHOWN = 5 -const STATEMENT = "w-0 min-w-[260px] flex-1" +const STATEMENT = "w-0 min-w-64 flex-1" const NUMBER = "text-right font-mono text-xs tabular-nums" const SUB = "truncate font-mono text-3xs text-muted-foreground" const MANY_ROWS = 10_000 diff --git a/apps/web/src/page/infra-integrations/planetscale/db/view-breakdown.ts b/apps/web/src/page/infra-integrations/planetscale/db/view-breakdown.ts index 2e6177306e..5eba697610 100644 --- a/apps/web/src/page/infra-integrations/planetscale/db/view-breakdown.ts +++ b/apps/web/src/page/infra-integrations/planetscale/db/view-breakdown.ts @@ -146,7 +146,7 @@ const metaChip = (h: H, text: string): Html => const cells = (h: H, row: Row, spec: MeasureSpec, isSelected: boolean): ReadonlyArray => [ h.div( - [h.Class("flex w-0 min-w-[200px] flex-1 items-center gap-2 overflow-hidden")], + [h.Class("flex w-0 min-w-52 flex-1 items-center gap-2 overflow-hidden")], [ h.span( [ @@ -212,7 +212,7 @@ export const breakdownPanel = (h: H, inputs: BreakdownInputs): Html => { [ columnHead(h, { label: "Branch", - width: "w-0 flex-1 min-w-[200px]", + width: "w-0 flex-1 min-w-52", sort: { onSort: Message.ClickedBreakdownSort({ key: "branch" }), isActive: inputs.sort.key === "branch", diff --git a/apps/web/src/page/infra-integrations/planetscale/list/view-table.ts b/apps/web/src/page/infra-integrations/planetscale/list/view-table.ts index e226ba0990..745ec2c5bb 100644 --- a/apps/web/src/page/infra-integrations/planetscale/list/view-table.ts +++ b/apps/web/src/page/infra-integrations/planetscale/list/view-table.ts @@ -53,7 +53,7 @@ const COLUMNS: ReadonlyArray<{ hidden?: string metric?: boolean }> = [ - { label: "Database", key: "name", width: "w-0 flex-1 min-w-[220px]" }, + { label: "Database", key: "name", width: "w-0 flex-1 min-w-56" }, { label: "Branches", key: "branchCount", width: "w-20", align: "right", hidden: "hidden md:flex" }, { label: "Connections", key: "connectionsAvg", width: "w-24", align: "right", metric: true }, { label: "CPU (max)", key: "cpuMaxPercent", width: "w-24", align: "right", metric: true }, @@ -94,7 +94,7 @@ export const databaseTableLoading = (h: H): Html => { ariaLabel: "Databases" }, headerCells(h, undefined, false), skeletonRows(h, 3, () => [ - h.div([h.Class("w-0 min-w-[220px] flex-1")], [skeleton(h, "h-4 w-44")]), + h.div([h.Class("w-0 min-w-56 flex-1")], [skeleton(h, "h-4 w-44")]), skeleton(h, "hidden h-3 w-20 md:block"), skeleton(h, "h-3 w-24"), skeleton(h, "h-3 w-24"), @@ -172,7 +172,7 @@ const databaseRow = (h: H, row: DatabaseRow, metricsPaused: boolean): Html => { ], [ h.div( - [h.Class("flex w-0 min-w-[220px] flex-1 items-center gap-2 overflow-hidden")], + [h.Class("flex w-0 min-w-56 flex-1 items-center gap-2 overflow-hidden")], [ h.span( [ diff --git a/apps/web/src/page/infra-integrations/railway/list/view-table.ts b/apps/web/src/page/infra-integrations/railway/list/view-table.ts index 7f0e5f7ecb..9aa7ec559e 100644 --- a/apps/web/src/page/infra-integrations/railway/list/view-table.ts +++ b/apps/web/src/page/infra-integrations/railway/list/view-table.ts @@ -28,7 +28,7 @@ const COLUMNS: ReadonlyArray<{ hidden?: string limitsOnly?: boolean }> = [ - { label: "Service", key: "displayName", width: "w-0 flex-1 min-w-[240px]" }, + { label: "Service", key: "displayName", width: "w-0 flex-1 min-w-60" }, { label: "Memory", key: "memoryMax", width: "w-36", align: "right" }, { label: "vCPU", key: "cpuMax", width: "w-36", align: "right" }, { label: "Of limit", key: "peakOfLimit", width: "w-40", hidden: "hidden lg:flex", limitsOnly: true }, @@ -60,7 +60,7 @@ export const railwayTableLoading = (h: H): Html => { ariaLabel: "Railway services" }, columns(h, false, undefined), skeletonRows(h, 5, () => [ - h.div([h.Class("w-0 min-w-[240px] flex-1")], [skeleton(h, "h-4 w-36")]), + h.div([h.Class("w-0 min-w-60 flex-1")], [skeleton(h, "h-4 w-36")]), skeleton(h, "ml-auto h-3 w-36"), skeleton(h, "ml-auto h-3 w-36"), skeleton(h, "ml-auto h-3 w-20"), @@ -121,7 +121,7 @@ const row = (h: H, view: RailwayRowView, showLimits: boolean, clock: Clock, trig ], [ h.div( - [h.Class("w-0 min-w-[240px] flex-1")], + [h.Class("w-0 min-w-60 flex-1")], [ h.div( [ diff --git a/apps/web/src/page/infra/containers/list/view-table.ts b/apps/web/src/page/infra/containers/list/view-table.ts index fc42b5a450..572320c214 100644 --- a/apps/web/src/page/infra/containers/list/view-table.ts +++ b/apps/web/src/page/infra/containers/list/view-table.ts @@ -21,7 +21,7 @@ type Sort = Readonly<{ key: string | null; dir: SortDir }> | null const head = (sort: Sort, key: ContainerSortKey) => headSort(sort, key, (k) => Message.ClickedSort({ key: k })) const columns = (h: H, sort: Sort): ReadonlyArray => [ - columnHead(h, { label: "Container", sort: head(sort, "containerName"), width: "w-0 flex-1 min-w-[260px]" }), + columnHead(h, { label: "Container", sort: head(sort, "containerName"), width: "w-0 flex-1 min-w-64" }), columnHead(h, { label: "Peak saturation", sort: head(sort, "saturation"), width: "w-44", hidden: "hidden md:flex" }), columnHead(h, { label: "CPU", sort: head(sort, "cpuPct"), align: "right", width: "w-32", hidden: "hidden lg:flex" }), columnHead(h, { @@ -40,7 +40,7 @@ export const containerTableLoading = (h: H): Html => { ariaLabel: "Containers" }, columns(h, null), skeletonRows(h, 6, () => [ - h.div([h.Class("w-0 min-w-[260px] flex-1")], [skeleton(h, "h-4 w-48"), skeleton(h, "mt-1.5 h-3 w-40")]), + h.div([h.Class("w-0 min-w-64 flex-1")], [skeleton(h, "h-4 w-48"), skeleton(h, "mt-1.5 h-3 w-40")]), h.div( [h.Class("hidden w-44 space-y-1.5 md:block")], [skeleton(h, "h-2.5 w-44"), skeleton(h, "h-2.5 w-44")], @@ -76,7 +76,7 @@ const containerRow = (h: H, container: ContainerRow, inputs: ContainerTableInput ], [ h.div( - [h.Class("w-0 min-w-[260px] flex-1")], + [h.Class("w-0 min-w-64 flex-1")], [ h.div( [h.Class("flex items-center gap-2")], diff --git a/apps/web/src/page/infra/hosts/list/view-table.ts b/apps/web/src/page/infra/hosts/list/view-table.ts index 62e0b851c2..4ab7dbed2e 100644 --- a/apps/web/src/page/infra/hosts/list/view-table.ts +++ b/apps/web/src/page/infra/hosts/list/view-table.ts @@ -30,7 +30,7 @@ const INERT_SORT = { isActive: false, dir: "desc" } satisfies Readonly<{ isActiv const columns = (h: HtmlBuilder, sort: SortState | null, onSort?: OnSort): ReadonlyArray => { const sortOf = (key: HostSortKey) => (onSort === undefined ? INERT_SORT : headSort(sort, key, onSort)) return [ - columnHead(h, { label: "Host", sort: sortOf("hostName"), width: "w-0 flex-1 min-w-[260px]" }), + columnHead(h, { label: "Host", sort: sortOf("hostName"), width: "w-0 flex-1 min-w-64" }), columnHead(h, { label: "Usage", width: "w-52" }), columnHead(h, { label: "Load 15m", @@ -50,7 +50,7 @@ export const hostTableLoading = (h: HtmlBuilder): Html => columns(h, null), skeletonRows(h, 6, () => [ h.div( - [h.Class("w-0 min-w-[260px] flex-1")], + [h.Class("w-0 min-w-64 flex-1")], [skeleton(h, "h-4 w-40"), skeleton(h, "mt-1.5 h-3 w-32")], ), skeleton(h, "h-9 w-52"), @@ -76,7 +76,7 @@ const hostRow = (h: HtmlBuilder, host: HostRow, inputs: HostTableInputs ], [ h.div( - [h.Class("w-0 min-w-[260px] flex-1")], + [h.Class("w-0 min-w-64 flex-1")], [ h.div( [h.Class("flex items-center gap-2")], diff --git a/apps/web/src/page/infra/kubernetes/lens/rail-view.ts b/apps/web/src/page/infra/kubernetes/lens/rail-view.ts index eb1a6a5ae5..3d9452a4da 100644 --- a/apps/web/src/page/infra/kubernetes/lens/rail-view.ts +++ b/apps/web/src/page/infra/kubernetes/lens/rail-view.ts @@ -128,7 +128,7 @@ const railRow = (h: HtmlBuilder, service: RailService, isActive: boolean, cn( "flex h-[34px] items-center gap-2.5 rounded-md px-2 transition-colors", rowSelectedClass(isActive), - !isActive && "hover:bg-accent/50", + !isActive && "hover:bg-surface-sunken", ), ), ], diff --git a/apps/web/src/page/infra/kubernetes/nodes/view-table.ts b/apps/web/src/page/infra/kubernetes/nodes/view-table.ts index 9468e6cb3e..fc09f47930 100644 --- a/apps/web/src/page/infra/kubernetes/nodes/view-table.ts +++ b/apps/web/src/page/infra/kubernetes/nodes/view-table.ts @@ -20,7 +20,7 @@ type H = HtmlBuilder const columns = (h: H, sort: SortState | null): ReadonlyArray => { const head = (key: NodeSortKey) => headSort(sort, key, (k) => Message.ClickedSort({ key: k })) return [ - columnHead(h, { label: "Node", sort: head("nodeName"), width: "w-0 flex-1 min-w-[260px]" }), + columnHead(h, { label: "Node", sort: head("nodeName"), width: "w-0 flex-1 min-w-64" }), columnHead(h, { label: "CPU / allocatable", sort: head("cpuUtilization"), width: "w-44", hidden: "hidden md:flex" }), columnHead(h, { label: "Memory / allocatable", @@ -39,7 +39,7 @@ export const nodeTableLoading = (h: H): Html => { ariaLabel: "Nodes" }, columns(h, null), skeletonRows(h, 4, () => [ - h.div([h.Class("w-0 min-w-[260px] flex-1")], [skeleton(h, "h-4 w-48"), skeleton(h, "mt-1.5 h-3 w-32")]), + h.div([h.Class("w-0 min-w-64 flex-1")], [skeleton(h, "h-4 w-48"), skeleton(h, "mt-1.5 h-3 w-32")]), skeleton(h, "hidden h-3 w-44 md:block"), skeleton(h, "hidden h-3 w-44 lg:block"), skeleton(h, "hidden h-3 w-24 md:block"), @@ -74,7 +74,7 @@ const nodeRow = (h: H, node: NodeRow, inputs: NodeTableInputs): Html => ], [ h.div( - [h.Class("w-0 min-w-[260px] flex-1")], + [h.Class("w-0 min-w-64 flex-1")], [ h.div( [h.Class("flex items-center gap-2")], diff --git a/apps/web/src/page/infra/kubernetes/nodes/view.ts b/apps/web/src/page/infra/kubernetes/nodes/view.ts index 8208931468..0122986571 100644 --- a/apps/web/src/page/infra/kubernetes/nodes/view.ts +++ b/apps/web/src/page/infra/kubernetes/nodes/view.ts @@ -47,7 +47,7 @@ const STATUS_CELLS: ReadonlyArray([ ["active", TONE_FILL.info], ["idle", TONE_FILL.warn], - ["ended", "bg-muted-foreground/40"], + ["ended", "bg-foreground-faint"], ]) const NODE_SORT_ACCESSORS: SortAccessors = new Map string | number>([ diff --git a/apps/web/src/page/infra/kubernetes/pod-restarts-view.ts b/apps/web/src/page/infra/kubernetes/pod-restarts-view.ts index af9ee7d0a1..fce2ea311e 100644 --- a/apps/web/src/page/infra/kubernetes/pod-restarts-view.ts +++ b/apps/web/src/page/infra/kubernetes/pod-restarts-view.ts @@ -51,7 +51,7 @@ const containerRow = (h: HtmlBuilder, row: RestartRow): Html => ], [ h.span( - [h.Class("w-0 min-w-[200px] flex-1 truncate font-mono text-xs text-foreground")], + [h.Class("w-0 min-w-52 flex-1 truncate font-mono text-xs text-foreground")], [row.containerName || EMPTY_VALUE], ), h.span( @@ -88,7 +88,7 @@ export const podContainerRestarts = (h: HtmlBuilder, restarts: Restarts): h, { ariaLabel: "Container restarts" }, [ - columnHead(h, { label: "Container", width: "w-0 flex-1 min-w-[200px]" }), + columnHead(h, { label: "Container", width: "w-0 flex-1 min-w-52" }), columnHead(h, { label: "In window", align: "right", width: "w-24" }), columnHead(h, { label: "Total", align: "right", width: "w-24" }), columnHead(h, { label: "Last terminated", align: "right", width: "w-40" }), diff --git a/apps/web/src/page/infra/kubernetes/pod-table.ts b/apps/web/src/page/infra/kubernetes/pod-table.ts index 683e5ebca7..70b1873709 100644 --- a/apps/web/src/page/infra/kubernetes/pod-table.ts +++ b/apps/web/src/page/infra/kubernetes/pod-table.ts @@ -64,7 +64,7 @@ const columns = ( ? { isActive: sort !== null && sort.key === key, dir: sort?.dir ?? "desc" } : headSort(sort, key, onSort) return [ - columnHead(h, { label: "Pod", sort: head("podName"), width: "w-0 flex-1 min-w-[260px]" }), + columnHead(h, { label: "Pod", sort: head("podName"), width: "w-0 flex-1 min-w-64" }), columnHead(h, { label: "Peak saturation", sort: head("saturation"), @@ -96,7 +96,7 @@ export const podTableLoading = (h: HtmlBuilder): Html => columns(h, null, undefined), skeletonRows(h, 6, () => [ h.div( - [h.Class("w-0 min-w-[260px] flex-1")], + [h.Class("w-0 min-w-64 flex-1")], [skeleton(h, "h-4 w-48"), skeleton(h, "mt-1.5 h-3 w-40")], ), h.div( @@ -165,7 +165,7 @@ const podRow = (h: HtmlBuilder, pod: PodRow, inputs: PodTableInputs): H ], [ h.div( - [h.Class("w-0 min-w-[260px] flex-1")], + [h.Class("w-0 min-w-64 flex-1")], [ h.div( [h.Class("flex items-center gap-2")], diff --git a/apps/web/src/page/infra/kubernetes/service/view.ts b/apps/web/src/page/infra/kubernetes/service/view.ts index dcef359379..43a389e1e1 100644 --- a/apps/web/src/page/infra/kubernetes/service/view.ts +++ b/apps/web/src/page/infra/kubernetes/service/view.ts @@ -254,7 +254,7 @@ const podDistribution = (h: H, pods: ReadonlyArray, isWaiting: boolean): h.Key(node), h.Href(hrefOf(AppRoute.InfraKubernetesNode({ nodeName: node, search: {} }))), h.Class( - "flex items-center gap-2.5 rounded-md border px-2.5 py-1.5 font-mono text-2xs transition-colors hover:bg-accent/50", + "flex items-center gap-2.5 rounded-md border px-2.5 py-1.5 font-mono text-2xs transition-colors hover:bg-surface-sunken", ), ], [ diff --git a/apps/web/src/page/infra/kubernetes/workloads/view-table.ts b/apps/web/src/page/infra/kubernetes/workloads/view-table.ts index 6057b7107c..f2f2f0cd47 100644 --- a/apps/web/src/page/infra/kubernetes/workloads/view-table.ts +++ b/apps/web/src/page/infra/kubernetes/workloads/view-table.ts @@ -22,7 +22,7 @@ type H = HtmlBuilder const columns = (h: H, sort: SortState | null, kind: WorkloadKind | undefined): ReadonlyArray => { const head = (key: WorkloadSortKey) => headSort(sort, key, (k) => Message.ClickedSort({ key: k })) return [ - columnHead(h, { label: "Workload", sort: head("workloadName"), width: "w-0 flex-1 min-w-[260px]" }), + columnHead(h, { label: "Workload", sort: head("workloadName"), width: "w-0 flex-1 min-w-64" }), columnHead(h, { label: kind === "job" ? "Completions" : "Ready", width: "w-28" }), columnHead(h, { label: "Pods", sort: head("podCount"), align: "right", width: "w-[60px]" }), columnHead(h, { label: "Restarts", sort: head("restarts"), align: "right", width: "w-36" }), @@ -44,7 +44,7 @@ export const workloadTableLoading = (h: H): Html => { ariaLabel: "Workloads" }, columns(h, null, undefined), skeletonRows(h, 4, () => [ - h.div([h.Class("w-0 min-w-[260px] flex-1")], [skeleton(h, "h-4 w-48"), skeleton(h, "mt-1.5 h-3 w-32")]), + h.div([h.Class("w-0 min-w-64 flex-1")], [skeleton(h, "h-4 w-48"), skeleton(h, "mt-1.5 h-3 w-32")]), skeleton(h, "h-3 w-28"), skeleton(h, "h-3 w-[60px]"), skeleton(h, "h-3 w-36"), @@ -106,7 +106,7 @@ const workloadRow = (h: H, wl: WorkloadRow, inputs: WorkloadTableInputs): Html = ], [ h.div( - [h.Class("w-0 min-w-[260px] flex-1")], + [h.Class("w-0 min-w-64 flex-1")], [ h.div( [h.Class("flex items-center gap-2")], diff --git a/apps/web/src/page/infra/overview/view-sources.ts b/apps/web/src/page/infra/overview/view-sources.ts index 7d02e0a66c..dd2b928be5 100644 --- a/apps/web/src/page/infra/overview/view-sources.ts +++ b/apps/web/src/page/infra/overview/view-sources.ts @@ -25,7 +25,7 @@ const SEGMENT_CLASS = { unbounded: "bg-[repeating-linear-gradient(135deg,var(--muted-foreground)_0_1.5px,transparent_1.5px_4px)] opacity-60", // Healthy but barely used: muted, not a warning. - idle: "bg-muted-foreground/40", + idle: "bg-foreground-faint", } satisfies Record const SEGMENT_LABEL = { diff --git a/apps/web/src/page/integrations/view-gcp-configure-status.ts b/apps/web/src/page/integrations/view-gcp-configure-status.ts index 32bad28e50..7755309c96 100644 --- a/apps/web/src/page/integrations/view-gcp-configure-status.ts +++ b/apps/web/src/page/integrations/view-gcp-configure-status.ts @@ -29,7 +29,7 @@ const rowMarker = (h: H, state: RowState): Html => ? spinner(h, "size-3.5 text-muted-foreground") : h.span([ h.AriaHidden(true), - h.Class("size-3.5 rounded-full border border-dashed border-muted-foreground/60"), + h.Class("size-3.5 rounded-full border border-dashed border-foreground-subtle"), ]) const overdueHelp = (h: H): Html => diff --git a/apps/web/src/page/integrations/view-gcp-parts.ts b/apps/web/src/page/integrations/view-gcp-parts.ts index cc90106f51..1bce7f05fa 100644 --- a/apps/web/src/page/integrations/view-gcp-parts.ts +++ b/apps/web/src/page/integrations/view-gcp-parts.ts @@ -219,7 +219,7 @@ export const step = ( cn( "flex size-5 shrink-0 items-center justify-center rounded-full border text-2xs font-medium", options.state === "current" - ? "border-foreground/40 text-foreground" + ? "border-border-strong text-foreground" : "border-border text-muted-foreground", ), ), diff --git a/apps/web/src/page/integrations/view-planetscale-picker.ts b/apps/web/src/page/integrations/view-planetscale-picker.ts index 2397c0406d..ba8092e126 100644 --- a/apps/web/src/page/integrations/view-planetscale-picker.ts +++ b/apps/web/src/page/integrations/view-planetscale-picker.ts @@ -25,7 +25,7 @@ const drawnCheck = (h: H, isChecked: boolean, className: string): Html => "flex size-4 shrink-0 items-center justify-center rounded-sm border transition-[color,background-color,border-color,opacity] duration-150 motion-reduce:transition-none", isChecked ? "border-primary bg-primary text-primary-foreground" - : "border-input bg-background group-hover:border-foreground/40", + : "border-input bg-background group-hover:border-border-strong", className, ), ), @@ -70,7 +70,7 @@ const optionCard = (h: H, name: string, isChecked: boolean): Html => "flex h-full rounded-md border transition-colors duration-150 motion-reduce:transition-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background", "items-start gap-3 p-4", !isChecked - ? "border-border group-hover:border-foreground/30 group-hover:bg-foreground/[0.02]" + ? "border-border group-hover:border-border-strong group-hover:bg-surface-faint" : "border-primary bg-primary/5", ), ), diff --git a/apps/web/src/page/investigations/conversation/kit/turn-minimap.ts b/apps/web/src/page/investigations/conversation/kit/turn-minimap.ts index 118ef07007..d2f1317026 100644 --- a/apps/web/src/page/investigations/conversation/kit/turn-minimap.ts +++ b/apps/web/src/page/investigations/conversation/kit/turn-minimap.ts @@ -146,7 +146,7 @@ const step = (h: HtmlBuilder, direction: "previous" | "next", target: Opti } const markerWidth = (distance: number | null): string => - distance === 0 ? "w-6 bg-muted-foreground/75" : distance === 1 ? "w-4" : distance === 2 ? "w-2.5" : "w-2" + distance === 0 ? "w-6 bg-foreground-subtle" : distance === 1 ? "w-4" : distance === 2 ? "w-2.5" : "w-2" /** The rail, or nothing below two turns. `mount` is `MountTurnMinimap` lifted to the host. */ export const turnMinimap = ( @@ -212,7 +212,7 @@ export const turnMinimap = ( h.DataAttribute("turn-current", String(currentIndex ?? 0)), ], [ - h.div([h.Class("absolute top-0 start-3 h-full w-px bg-border/20")], []), + h.div([h.Class("absolute top-0 start-3 h-full w-px bg-border-subtle")], []), ...items.map((item, index) => h.span( [ @@ -222,7 +222,7 @@ export const turnMinimap = ( "pointer-events-none absolute start-0 h-0.5 -translate-y-1/2 rounded-full transition-[background-color,width] duration-150", visibleTurns.has(index) ? "bg-foreground/80" - : "bg-muted-foreground/35", + : "bg-foreground-faint", markerWidth( active === null ? null : Math.abs(index - active), ), diff --git a/apps/web/src/page/investigations/detail/view-sections.ts b/apps/web/src/page/investigations/detail/view-sections.ts index 2424373d77..8ece68e719 100644 --- a/apps/web/src/page/investigations/detail/view-sections.ts +++ b/apps/web/src/page/investigations/detail/view-sections.ts @@ -439,7 +439,7 @@ export const followUpComposer = (h: H): Html => h.Type("button"), h.OnClick(Message.ClickedFollowUp()), h.Class( - "flex h-10.5 w-full items-center gap-3 rounded-md border border-input bg-card px-3.5 text-left transition-colors hover:border-ring hover:bg-accent/50", + "flex h-10.5 w-full items-center gap-3 rounded-md border border-input bg-card px-3.5 text-left transition-colors hover:border-ring hover:bg-surface-sunken", ), ], [ diff --git a/apps/web/src/page/investigations/detail/view-verdict.ts b/apps/web/src/page/investigations/detail/view-verdict.ts index d4890f9a04..89cbc5fb41 100644 --- a/apps/web/src/page/investigations/detail/view-verdict.ts +++ b/apps/web/src/page/investigations/detail/view-verdict.ts @@ -284,7 +284,7 @@ const runProgress = ( const isLast = index === steps.length - 1 return h.keyed("li")( `${step.at}-${step.tool}-${index}`, - [h.Class("flex items-baseline gap-2.5 py-[3px] text-xs")], + [h.Class("flex items-baseline gap-2.5 py-1 text-xs")], [ statusDot(h, { tone: "custom", @@ -295,7 +295,7 @@ const runProgress = ( ? "bg-primary" : isLast && isStalled ? TONE_FILL.warn - : "bg-muted-foreground/35", + : "bg-foreground-faint", ), }), h.span( diff --git a/apps/web/src/page/investigations/list/view.ts b/apps/web/src/page/investigations/list/view.ts index b9e4ea8c20..61f476f52e 100644 --- a/apps/web/src/page/investigations/list/view.ts +++ b/apps/web/src/page/investigations/list/view.ts @@ -408,7 +408,7 @@ const hubHero = (h: H, model: Model): Html => { ...(model.isCreating ? [h.Disabled(true)] : []), h.OnClick(Message.ClickedSuggestion({ title: suggestion })), h.Class( - "flex w-full items-center gap-3 rounded-md border bg-card px-3.5 py-2.5 text-left text-sm text-foreground transition-colors hover:border-ring hover:bg-accent/50 disabled:opacity-60", + "flex w-full items-center gap-3 rounded-md border bg-card px-3.5 py-2.5 text-left text-sm text-foreground transition-colors hover:border-ring hover:bg-surface-sunken disabled:opacity-60", ), ], [ diff --git a/apps/web/src/page/kit/connect-flow.ts b/apps/web/src/page/kit/connect-flow.ts index ff9fe24a30..4d7f379f71 100644 --- a/apps/web/src/page/kit/connect-flow.ts +++ b/apps/web/src/page/kit/connect-flow.ts @@ -100,7 +100,7 @@ export const choiceTiles = (h: HtmlBuilder, tiles: ReadonlyArray( ? "border-primary text-primary" : "border-primary bg-primary/10 text-primary" : compact - ? "border-border text-muted-foreground hover:text-foreground hover:border-foreground/30" - : "border-border hover:border-foreground/30", + ? "border-border text-muted-foreground hover:text-foreground hover:border-border-strong" + : "border-border hover:border-border-strong", ), ), ], @@ -335,7 +335,7 @@ export const connectInstructions = (h: HtmlBuilder, parts: InstructionsPar h.a( [ h.Class( - "mt-3 flex items-center justify-between gap-3 rounded-md border border-border p-3 text-xs text-muted-foreground transition-colors hover:border-foreground/30 hover:text-foreground", + "mt-3 flex items-center justify-between gap-3 rounded-md border border-border p-3 text-xs text-muted-foreground transition-colors hover:border-border-strong hover:text-foreground", ), h.Href(docsUrl(docs.page)), h.Target("_blank"), diff --git a/apps/web/src/page/kit/message-response.ts b/apps/web/src/page/kit/message-response.ts index 048e93971b..dce15d8f55 100644 --- a/apps/web/src/page/kit/message-response.ts +++ b/apps/web/src/page/kit/message-response.ts @@ -293,7 +293,7 @@ const viewsFor = ( h.blockquote( streamdown( "blockquote", - "my-4 border-muted-foreground/30 border-l-4 pl-4 text-muted-foreground italic", + "my-4 border-foreground-faint border-l-4 pl-4 text-muted-foreground italic", )(h), blocks, ), diff --git a/apps/web/src/page/kit/time-range-picker.ts b/apps/web/src/page/kit/time-range-picker.ts index 9effa4f5a9..382f3a6b4b 100644 --- a/apps/web/src/page/kit/time-range-picker.ts +++ b/apps/web/src/page/kit/time-range-picker.ts @@ -347,7 +347,7 @@ const presetList = (h: HtmlBuilder, inputs: ViewInputs): Html => ) }), ), - h.div([h.Class("mx-3 mt-1 h-px bg-border/60")], []), + h.div([h.Class("mx-3 mt-1 h-px bg-border-subtle")], []), h.button( [ h.Type("button"), diff --git a/apps/web/src/page/kit/underline-tabs.ts b/apps/web/src/page/kit/underline-tabs.ts index 90ae17edbb..820ceb4540 100644 --- a/apps/web/src/page/kit/underline-tabs.ts +++ b/apps/web/src/page/kit/underline-tabs.ts @@ -77,7 +77,7 @@ export const linkTabStrip = (h: HtmlBuilder, label: string, tabs: Readonly h.Class( cn( underlineTabClass(tab.isCurrent), - "h-9 gap-[7px] px-3 first:pl-0.5", + "h-9 gap-2 px-3 first:pl-0.5", tab.isCurrent ? "[&_svg]:text-foreground" : "[&_svg]:text-muted-foreground", tab.isRouteActive && "active", ), diff --git a/apps/web/src/page/onboarding/option-card.ts b/apps/web/src/page/onboarding/option-card.ts index fe5816ae2b..9c0c05df65 100644 --- a/apps/web/src/page/onboarding/option-card.ts +++ b/apps/web/src/page/onboarding/option-card.ts @@ -43,7 +43,7 @@ const drawnCheck = (h: HtmlBuilder, isChecked: boolean, className: string "flex size-4 shrink-0 items-center justify-center rounded-sm border transition-[color,background-color,border-color,opacity] duration-150 motion-reduce:transition-none", isChecked ? "border-primary bg-primary text-primary-foreground" - : "border-input bg-background group-hover:border-foreground/40", + : "border-input bg-background group-hover:border-border-strong", className, ), ), @@ -141,7 +141,7 @@ export const optionCard = (h: HtmlBuilder, options: OptionCardOptions): "flex h-full rounded-md border transition-colors duration-150 motion-reduce:transition-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background", layout === "row" ? "items-start gap-3 p-4" : "flex-col gap-5 p-5", !options.isChecked - ? "border-border group-hover:border-foreground/30 group-hover:bg-foreground/[0.02]" + ? "border-border group-hover:border-border-strong group-hover:bg-surface-faint" : options.accent === undefined && "border-primary bg-primary/5", ), ), diff --git a/apps/web/src/page/onboarding/pricing-cards-view.ts b/apps/web/src/page/onboarding/pricing-cards-view.ts index 9af3c388a1..736dd5fd67 100644 --- a/apps/web/src/page/onboarding/pricing-cards-view.ts +++ b/apps/web/src/page/onboarding/pricing-cards-view.ts @@ -163,7 +163,7 @@ const planCard = (h: H, plan: CatalogPlan, loadingPlanId: string | null): Html = h, [ ...(features.length > 0 ? [dataIncluded(h, features, true)] : []), - separator(h, "horizontal", "bg-border/60"), + separator(h, "horizontal", "bg-border-subtle"), platformFeatures(h, getPlanSlug(plan)), ], "flex flex-col gap-5 flex-1", @@ -235,7 +235,7 @@ const enterpriseCard = (h: H): Html => h, [ dataIncluded(h, ENTERPRISE_DATA_FEATURES, false), - separator(h, "horizontal", "bg-border/60"), + separator(h, "horizontal", "bg-border-subtle"), platformFeatures(h, "enterprise"), ], "flex flex-col gap-5 flex-1", diff --git a/apps/web/src/page/onboarding/quick-start-region-view.ts b/apps/web/src/page/onboarding/quick-start-region-view.ts index 55ebe9b473..aa6409a328 100644 --- a/apps/web/src/page/onboarding/quick-start-region-view.ts +++ b/apps/web/src/page/onboarding/quick-start-region-view.ts @@ -126,7 +126,7 @@ export const regionStep = (h: H, choice: RegionChoice): Html => h, { size: "lg", - className: "min-w-[180px]", + className: "min-w-44", isLoading: choice.isSaving, attributes: [h.OnClick(Message.ClickedRegionContinue())], }, diff --git a/apps/web/src/page/onboarding/quick-start-view.ts b/apps/web/src/page/onboarding/quick-start-view.ts index 4b7eab7fa9..8a35f52292 100644 --- a/apps/web/src/page/onboarding/quick-start-view.ts +++ b/apps/web/src/page/onboarding/quick-start-view.ts @@ -260,7 +260,7 @@ const stackCard = (h: H, item: StackItem, isChecked: boolean, onChange: Message) "flex items-center gap-3 rounded-md border p-3 transition-colors duration-150 motion-reduce:transition-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background", isChecked ? "border-primary bg-primary/5" - : "border-border group-hover:border-foreground/30", + : "border-border group-hover:border-border-strong", ), ), ], diff --git a/apps/web/src/page/releases/list/view-table.ts b/apps/web/src/page/releases/list/view-table.ts index b25e72d220..d4e6c6884a 100644 --- a/apps/web/src/page/releases/list/view-table.ts +++ b/apps/web/src/page/releases/list/view-table.ts @@ -155,7 +155,7 @@ const pillId = (...parts: ReadonlyArray): string => `releases-pill-${parts.join("-").replace(/[^A-Za-z0-9_-]/g, "_")}` const HEADERS: ReadonlyArray = [ - ["Release", "w-[46%] min-w-[260px]"], + ["Release", "w-[46%] min-w-64"], ["Services", undefined], ["Deployed", "whitespace-nowrap"], ["Error rate", "whitespace-nowrap"], diff --git a/apps/web/src/page/releases/list/view.ts b/apps/web/src/page/releases/list/view.ts index 61fc754faa..e773f0772d 100644 --- a/apps/web/src/page/releases/list/view.ts +++ b/apps/web/src/page/releases/list/view.ts @@ -53,7 +53,7 @@ const loadingSkeleton = (h: H): Html => tableSkeleton(h, { rows: 8, columns: [ - { header: "Release", headClassName: "w-[46%] min-w-[260px]", skeleton: "w-48" }, + { header: "Release", headClassName: "w-[46%] min-w-64", skeleton: "w-48" }, { header: "Services" }, { header: "Deployed", headClassName: "whitespace-nowrap" }, { header: "Error rate", headClassName: "whitespace-nowrap", skeleton: "w-12" }, diff --git a/apps/web/src/page/replays/detail/view-rail.ts b/apps/web/src/page/replays/detail/view-rail.ts index 51cbf65293..71c2c22560 100644 --- a/apps/web/src/page/replays/detail/view-rail.ts +++ b/apps/web/src/page/replays/detail/view-rail.ts @@ -518,7 +518,7 @@ const traceListRow = (h: H, model: RailView, summary: TraceSummary): Html => { ], ), h.div( - [h.Class("flex items-center gap-2 pl-[3.125rem]")], + [h.Class("flex items-center gap-2 pl-[50px]")], [ h.span( [h.Class("min-w-0 truncate text-2xs text-muted-foreground")], diff --git a/apps/web/src/page/replays/detail/view-session.ts b/apps/web/src/page/replays/detail/view-session.ts index fa7684651c..b7522314e6 100644 --- a/apps/web/src/page/replays/detail/view-session.ts +++ b/apps/web/src/page/replays/detail/view-session.ts @@ -134,7 +134,7 @@ const summary = (h: H, session: ReplayDetail): Html => { segmentedBar(h, { segments: [ { key: "active", value: share.active, className: "bg-primary" }, - { key: "idle", value: share.idle, className: "bg-muted-foreground/40" }, + { key: "idle", value: share.idle, className: "bg-foreground-faint" }, ], total: 100, className: "mt-3 h-1 gap-px bg-muted", @@ -150,7 +150,7 @@ const summary = (h: H, session: ReplayDetail): Html => { : [ legend( h, - "bg-muted-foreground/40", + "bg-foreground-faint", "Idle", formatSessionDuration(idle), ), diff --git a/apps/web/src/page/replays/kit/session-list-row.ts b/apps/web/src/page/replays/kit/session-list-row.ts index af191c5a7e..63d41c6cf1 100644 --- a/apps/web/src/page/replays/kit/session-list-row.ts +++ b/apps/web/src/page/replays/kit/session-list-row.ts @@ -176,7 +176,7 @@ export const sessionListRow = ( h.OnClick(open), h.Class( cn( - "group relative flex w-full cursor-pointer items-center gap-3 border-b border-border px-3 transition-colors hover:bg-accent/50 @2xl:gap-4", + "group relative flex w-full cursor-pointer items-center gap-3 border-b border-border px-3 transition-colors hover:bg-surface-sunken @2xl:gap-4", lowSignal ? "py-1.5" : "py-2.5", ), ), diff --git a/apps/web/src/page/security/kit/add-target-view.ts b/apps/web/src/page/security/kit/add-target-view.ts index a59e725369..a1c015d71f 100644 --- a/apps/web/src/page/security/kit/add-target-view.ts +++ b/apps/web/src/page/security/kit/add-target-view.ts @@ -182,7 +182,7 @@ const profileField = (h: H, model: Model): Html => { h.Class( cn( "flex cursor-pointer items-start gap-2.5 rounded-md border p-3 transition-colors", - isChecked ? "border-foreground/40 bg-accent/50" : "hover:bg-accent/30", + isChecked ? "border-border-strong bg-accent/50" : "hover:bg-accent/30", ), ), ], diff --git a/apps/web/src/page/security/kit/findings-view.ts b/apps/web/src/page/security/kit/findings-view.ts index 62b8104d99..caa346273e 100644 --- a/apps/web/src/page/security/kit/findings-view.ts +++ b/apps/web/src/page/security/kit/findings-view.ts @@ -28,11 +28,11 @@ export const bucketDot = (h: HtmlBuilder, bucket: SeverityBucket, classNam cn( "inline-block size-2.5 shrink-0 rounded-full", bucket === "informational" - ? "border-2 border-muted-foreground/60" + ? "border-2 border-foreground-subtle" : bucket === "needs_validation" ? "border-2 border-dashed border-muted-foreground" : bucket === "rejected" - ? "bg-muted-foreground/30" + ? "bg-foreground-faint" : SECURITY_SEVERITY_FILL[bucket], className, ), @@ -83,7 +83,7 @@ export const unverifiedChip = (h: HtmlBuilder): Html => [ h.Title("Severity estimated from the source; not proven by running the code"), h.Class( - "rounded-sm border border-dashed border-muted-foreground/50 px-1.5 py-px text-2xs text-muted-foreground", + "rounded-sm border border-dashed border-foreground-subtle px-1.5 py-px text-2xs text-muted-foreground", ), ], ["Unverified"], diff --git a/apps/web/src/page/security/run/view-header.ts b/apps/web/src/page/security/run/view-header.ts index c75176c651..96c23d17e0 100644 --- a/apps/web/src/page/security/run/view-header.ts +++ b/apps/web/src/page/security/run/view-header.ts @@ -227,7 +227,7 @@ const phaseMark = (h: H, state: PhaseState): Html => { case "skipped": return h.span([ h.AriaHidden(true), - h.Class("size-4 rounded-full border-2 border-muted-foreground/40"), + h.Class("size-4 rounded-full border-2 border-foreground-faint"), ]) } } diff --git a/apps/web/src/page/services/detail/endpoint-peek/view.ts b/apps/web/src/page/services/detail/endpoint-peek/view.ts index 5924beaa9a..da4bc39075 100644 --- a/apps/web/src/page/services/detail/endpoint-peek/view.ts +++ b/apps/web/src/page/services/detail/endpoint-peek/view.ts @@ -300,7 +300,7 @@ const distributionCard = (h: H, detail: EndpointDetail): Html => { bins.map((bin, index) => h.div([ h.Key(String(index)), - h.Class(cn("flex-1 rounded-t-[2px]", BAND_CLASS[bin.band])), + h.Class(cn("flex-1 rounded-t-xs", BAND_CLASS[bin.band])), h.Style({ height: `${peak > 0 ? Math.max((bin.share / peak) * 100, 2) : 2}%`, }), diff --git a/apps/web/src/page/services/detail/view-api-tab.ts b/apps/web/src/page/services/detail/view-api-tab.ts index c0422cc596..990a6b87ba 100644 --- a/apps/web/src/page/services/detail/view-api-tab.ts +++ b/apps/web/src/page/services/detail/view-api-tab.ts @@ -222,7 +222,7 @@ const legendItem = (h: H, swatch: Html, label: string): Html => h.div([h.Key(label), h.Class("flex items-center gap-1.5")], [swatch, h.span([], [label])]) const swatch = (h: H, color: string) => - h.span([h.Class("size-2 rounded-[2px]"), h.Style({ background: color })]) + h.span([h.Class("size-2 rounded-xs"), h.Style({ background: color })]) const responsesChart = ( h: H, @@ -617,7 +617,7 @@ const loadingState = (h: H): Html => /** `ApiEmptyState`: names the two conditions an endpoint needs. */ const emptyState = (h: H, serviceName: string): Html => { const mono = (text: string) => h.span([h.Class("text-foreground-soft")], [text]) - return panel(h, { className: "items-center gap-3.5 px-[18px] py-11 text-center" }, [ + return panel(h, { className: "items-center gap-3.5 px-4 py-11 text-center" }, [ h.span([h.Class("text-title font-medium text-foreground-soft")], ["No HTTP endpoints in this window"]), h.span( [h.Class("max-w-[620px] text-ui leading-[21px] text-muted-foreground")], diff --git a/apps/web/src/page/services/detail/view-markers.ts b/apps/web/src/page/services/detail/view-markers.ts index e1ebe20483..12dca2b2b0 100644 --- a/apps/web/src/page/services/detail/view-markers.ts +++ b/apps/web/src/page/services/detail/view-markers.ts @@ -98,7 +98,7 @@ export const markersOverlay = ( [ h.Class( cn( - "shrink-0 rounded-[3px] px-1 text-3xs tabular-nums", + "shrink-0 rounded-xs px-1 text-3xs tabular-nums", "bg-surface-strong text-muted-foreground", ), ), diff --git a/apps/web/src/page/settings/keys/view-table.ts b/apps/web/src/page/settings/keys/view-table.ts index 58e7c996e0..0928a2917f 100644 --- a/apps/web/src/page/settings/keys/view-table.ts +++ b/apps/web/src/page/settings/keys/view-table.ts @@ -36,7 +36,7 @@ const TYPE_BADGE = { } as const satisfies { readonly [Type in KeyType]: "muted" | "ok" } const COL = { - name: "w-0 min-w-[180px] flex-1", + name: "w-0 min-w-44 flex-1", access: "hidden w-36 shrink-0 @xl:block", createdBy: "hidden w-36 shrink-0 @min-[820px]:block", lastUsed: "hidden w-20 shrink-0 @2xl:block", @@ -210,7 +210,7 @@ export const keysTable = (h: H, model: Model, rows: ReadonlyArray, input } const DEVICE_COL = { - name: "w-0 min-w-[180px] flex-1", + name: "w-0 min-w-44 flex-1", owner: "hidden w-44 shrink-0 @xl:block", created: "hidden w-28 shrink-0 @2xl:block", lastUsed: "hidden w-20 shrink-0 @lg:block", diff --git a/apps/web/src/page/settings/kit/nav-shell.ts b/apps/web/src/page/settings/kit/nav-shell.ts index b95afed71d..2154fb0a85 100644 --- a/apps/web/src/page/settings/kit/nav-shell.ts +++ b/apps/web/src/page/settings/kit/nav-shell.ts @@ -21,7 +21,7 @@ const rowClass = (isActive: boolean) => "group relative flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors text-left", isActive ? "bg-accent text-accent-foreground font-medium" - : "text-muted-foreground hover:bg-accent/50 hover:text-foreground", + : "text-muted-foreground hover:bg-surface-sunken hover:text-foreground", ) const activeIndicator = (h: HtmlBuilder): Html => diff --git a/apps/web/src/page/traces/detail/depth-controls.ts b/apps/web/src/page/traces/detail/depth-controls.ts index 05f3465b37..f5128f7fb1 100644 --- a/apps/web/src/page/traces/detail/depth-controls.ts +++ b/apps/web/src/page/traces/detail/depth-controls.ts @@ -27,7 +27,7 @@ const depthButton = ( variant: "ghost", size: "sm", className: - "h-5 w-6 rounded-[3px] p-0 text-muted-foreground hover:text-foreground pointer-coarse:h-7 pointer-coarse:w-8", + "h-5 w-6 rounded-xs p-0 text-muted-foreground hover:text-foreground pointer-coarse:h-7 pointer-coarse:w-8", slot: "tooltip-trigger", attributes: [ h.AriaLabel(label), diff --git a/apps/web/src/page/traces/detail/timeline/view.ts b/apps/web/src/page/traces/detail/timeline/view.ts index a5e2b92fba..84d0b03fa4 100644 --- a/apps/web/src/page/traces/detail/timeline/view.ts +++ b/apps/web/src/page/traces/detail/timeline/view.ts @@ -120,7 +120,7 @@ const body = ( [ h.Attribute( "class", - "pointer-events-none absolute inset-y-0 w-px bg-border/40", + "pointer-events-none absolute inset-y-0 w-px bg-border-subtle", ), h.Style({ left: tickLeft(offset, model) }), ], diff --git a/apps/web/src/page/traces/detail/waterfall/row.ts b/apps/web/src/page/traces/detail/waterfall/row.ts index 50c5f166a3..1829d69dc4 100644 --- a/apps/web/src/page/traces/detail/waterfall/row.ts +++ b/apps/web/src/page/traces/detail/waterfall/row.ts @@ -130,7 +130,7 @@ const toggle = (h: HtmlBuilder, span: SpanNodeData, isExpanded: boolean [ h.span( [ - h.Class(cn("size-2 rounded-[2px]", statusFill(span.statusCode))), + h.Class(cn("size-2 rounded-xs", statusFill(span.statusCode))), h.Title(span.statusCode === "" ? "Unset" : span.statusCode), ], [], diff --git a/apps/web/src/service-map/map/node-card.ts b/apps/web/src/service-map/map/node-card.ts index e106164df7..70d2abd43d 100644 --- a/apps/web/src/service-map/map/node-card.ts +++ b/apps/web/src/service-map/map/node-card.ts @@ -58,7 +58,7 @@ export const HEALTH_TONE = { crit: "crit", warn: "warn", neutral: "ok" } satisfi const SELECTED_BORDER_CLASS = { crit: "border-severity-error ring-[3px] ring-severity-error/15", warn: "border-severity-warn ring-[3px] ring-severity-warn/15", - neutral: "border-foreground/40 ring-[3px] ring-foreground/15", + neutral: "border-border-strong ring-[3px] ring-foreground/15", } satisfies Record export const selectedBorderClass = (errorRate: number): string => diff --git a/apps/web/src/service-map/map/nodes.ts b/apps/web/src/service-map/map/nodes.ts index 81f89e256d..8091d9f565 100644 --- a/apps/web/src/service-map/map/nodes.ts +++ b/apps/web/src/service-map/map/nodes.ts @@ -103,7 +103,7 @@ const serviceNode = (h: HtmlBuilder, id: string, data: ServiceNodeData): R "flex w-56 cursor-pointer overflow-hidden rounded-r-lg border bg-card transition-[border-color,box-shadow] duration-150", selected ? selectedBorderClass(errorRate) - : "border-border hover:border-foreground/30", + : "border-border hover:border-border-strong", ), ), ], diff --git a/apps/web/src/service-map/trace-flow/node-card.ts b/apps/web/src/service-map/trace-flow/node-card.ts index 8f8149dfd3..368e0053be 100644 --- a/apps/web/src/service-map/trace-flow/node-card.ts +++ b/apps/web/src/service-map/trace-flow/node-card.ts @@ -151,7 +151,7 @@ const missingCard = ( [ h.Class( cn( - "relative w-[280px] rounded-lg border-2 border-dashed border-muted-foreground/30 bg-card/50", + "relative w-[280px] rounded-lg border-2 border-dashed border-foreground-faint bg-card/50", "flex flex-col gap-1 px-3 py-2 transition-all duration-200", isSelected && "ring-2 ring-primary ring-offset-2 ring-offset-background", ), diff --git a/apps/web/src/shell/clerk-org-switcher-view.ts b/apps/web/src/shell/clerk-org-switcher-view.ts index 8e98ed9ac1..7d0db94bda 100644 --- a/apps/web/src/shell/clerk-org-switcher-view.ts +++ b/apps/web/src/shell/clerk-org-switcher-view.ts @@ -318,7 +318,7 @@ const regionField = (h: H, model: Model): Html => { [ h.Id(RadioGroup.labelId(`${regionIdOf(model, region)}-input`)), h.Class( - "flex cursor-pointer items-center gap-3 px-3.5 py-2.5 transition-colors hover:bg-accent/50 has-[[data-checked]]:bg-accent/64", + "flex cursor-pointer items-center gap-3 px-3.5 py-2.5 transition-colors hover:bg-surface-sunken has-[[data-checked]]:bg-accent/64", ), ], [ diff --git a/apps/web/src/shell/onboarding-checklist-view.ts b/apps/web/src/shell/onboarding-checklist-view.ts index cdd64c420f..faaf987bd8 100644 --- a/apps/web/src/shell/onboarding-checklist-view.ts +++ b/apps/web/src/shell/onboarding-checklist-view.ts @@ -118,7 +118,7 @@ const stepRow = (h: H, step: V2OnboardingChecklistStep, index: number): Html => h.span( [ h.Class( - "flex size-4.5 shrink-0 items-center justify-center rounded-full border border-muted-foreground/40 font-mono text-3xs text-muted-foreground transition-colors group-hover:border-primary group-hover:text-primary", + "flex size-4.5 shrink-0 items-center justify-center rounded-full border border-foreground-faint font-mono text-3xs text-muted-foreground transition-colors group-hover:border-primary group-hover:text-primary", ), h.AriaHidden(true), ], diff --git a/apps/web/src/ui/chart-skeleton-shapes.ts b/apps/web/src/ui/chart-skeleton-shapes.ts index 5dd9ce9119..cb12a729a0 100644 --- a/apps/web/src/ui/chart-skeleton-shapes.ts +++ b/apps/web/src/ui/chart-skeleton-shapes.ts @@ -41,9 +41,9 @@ export const hbarGhost = (h: HtmlBuilder): Html => [ stub(h, "h-2.5 rounded-xs bg-foreground/10", { width: `${[72, 88, 60, 48, 66][i] ?? 0}%` }), h.div( - [h.Class("h-3 overflow-hidden rounded-[3px] bg-foreground/5")], + [h.Class("h-3 overflow-hidden rounded-xs bg-foreground/5")], [ - stub(h, "h-full rounded-[3px] bg-foreground/10 animate-pulse", { + stub(h, "h-full rounded-xs bg-foreground/10 animate-pulse", { width: `${w}%`, "animation-delay": `${-i * 0.13}s`, }), @@ -70,9 +70,9 @@ export const funnelGhost = (h: HtmlBuilder): Html => ], ), h.div( - [h.Class("h-2.5 overflow-hidden rounded-[3px] bg-foreground/5")], + [h.Class("h-2.5 overflow-hidden rounded-xs bg-foreground/5")], [ - stub(h, "h-full rounded-[3px] bg-foreground/10 animate-pulse", { + stub(h, "h-full rounded-xs bg-foreground/10 animate-pulse", { width: `${w}%`, "animation-delay": `${-i * 0.13}s`, }), @@ -271,7 +271,7 @@ export const dropoffGhost = (h: HtmlBuilder): Html => stub(h, "h-2.5 rounded-xs bg-foreground/10", { width: `${[60, 72, 56, 64][i] ?? 0}%`, }), - stub(h, "h-4 w-12 rounded-[3px] bg-foreground/15"), + stub(h, "h-4 w-12 rounded-xs bg-foreground/15"), stub(h, "h-2.5 w-8 rounded-xs bg-foreground/10"), ], ), diff --git a/packages/ui/src/components/traces/flow-node.tsx b/packages/ui/src/components/traces/flow-node.tsx index a359e33c68..f01ebf77b5 100644 --- a/packages/ui/src/components/traces/flow-node.tsx +++ b/packages/ui/src/components/traces/flow-node.tsx @@ -162,7 +162,7 @@ export const FlowSpanNode = memo(function FlowSpanNode({ data }: FlowSpanNodePro />
= { export const ERROR_RATE_FILL: Record = { crit: TONE_FILL.crit, warn: TONE_FILL.warn, - neutral: "bg-muted-foreground/30", + neutral: "bg-foreground-faint", } satisfies Record export const ERROR_RATE_COLOR: Record = { diff --git a/packages/ui/src/lib/tone.ts b/packages/ui/src/lib/tone.ts index 1eaa8d6f88..bb58a314ce 100644 --- a/packages/ui/src/lib/tone.ts +++ b/packages/ui/src/lib/tone.ts @@ -22,7 +22,7 @@ export const TONE_FILL: Record = { ok: "bg-severity-info", info: "bg-severity-info", done: "bg-severity-debug", - neutral: "bg-muted-foreground/50", + neutral: "bg-foreground-subtle", } satisfies Record /** Tinted surface + text: chips, badges, row highlights. */ diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css index b5f4bf11a4..e655281126 100644 --- a/packages/ui/src/styles/tokens.css +++ b/packages/ui/src/styles/tokens.css @@ -433,6 +433,8 @@ --color-surface-sunken: color-mix(in oklab, var(--muted) 50%, transparent); --color-surface-strong: color-mix(in oklab, var(--muted) 60%, transparent); --color-border-subtle: color-mix(in oklab, var(--border) 60%, transparent); + /* Hover and selected outline on pickable cards. */ + --color-border-strong: color-mix(in oklab, var(--foreground) 30%, transparent); --color-avatar-1: var(--avatar-1); --color-avatar-2: var(--avatar-2); --color-avatar-3: var(--avatar-3);