From 0818a48ff449bffffe19c262698e07346769fc93 Mon Sep 17 00:00:00 2001 From: Makisuo Date: Sat, 31 Oct 2026 11:02:13 +0100 Subject: [PATCH] fix(web): status pages pass the design lint The status-pages stack landed after the design rules became lint (#2002), so main's effect-lint fails on 11 errors. Map each onto the token it names: radius tokens for hand-picked corners, active: twins for hover states, tone alpha steps (-a1, -a4) for /NN tones, shadow-popup for the floating save bar. --- apps/web/src/page/status-pages/builder/view.ts | 2 +- apps/web/src/page/status-pages/editor/view-canvas.ts | 4 ++-- apps/web/src/page/status-pages/editor/view-live.ts | 2 +- apps/web/src/page/status-pages/editor/view-settings.ts | 2 +- apps/web/src/page/status-pages/list/view.ts | 2 +- apps/web/src/page/status-pages/shared/look.ts | 4 ++-- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/web/src/page/status-pages/builder/view.ts b/apps/web/src/page/status-pages/builder/view.ts index 85e985de61..551ee1961f 100644 --- a/apps/web/src/page/status-pages/builder/view.ts +++ b/apps/web/src/page/status-pages/builder/view.ts @@ -250,7 +250,7 @@ const footerBar = (h: H, model: Model): Html => { return h.div( [ h.Class( - "sticky bottom-4 z-10 flex flex-wrap items-center justify-between gap-3 rounded-lg border bg-popover py-2 pr-2 pl-4 shadow-lg", + "sticky bottom-4 z-10 flex flex-wrap items-center justify-between gap-3 rounded-lg border bg-popover py-2 pr-2 pl-4 shadow-popup", ), ], [ diff --git a/apps/web/src/page/status-pages/editor/view-canvas.ts b/apps/web/src/page/status-pages/editor/view-canvas.ts index 554abffd94..9742b4f86f 100644 --- a/apps/web/src/page/status-pages/editor/view-canvas.ts +++ b/apps/web/src/page/status-pages/editor/view-canvas.ts @@ -114,7 +114,7 @@ const statusDot = (h: H, status: StatusPageComponentStatus): Html => [ h.AriaHidden(true), h.Class( - cn("inline-block size-2 shrink-0 rounded-[2px]", TONE_FILL[COMPONENT_STATUS_TONE[status]]), + cn("inline-block size-2 shrink-0 rounded-xs", TONE_FILL[COMPONENT_STATUS_TONE[status]]), ), ], [], @@ -125,7 +125,7 @@ const itemClass = (isSelected: boolean) => "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring", isSelected ? "bg-muted font-medium text-foreground" - : "text-muted-foreground hover:bg-muted/50 hover:text-foreground", + : "text-muted-foreground hover:bg-muted/50 hover:text-foreground active:bg-muted/50 active:text-foreground", ) const componentItem = ( diff --git a/apps/web/src/page/status-pages/editor/view-live.ts b/apps/web/src/page/status-pages/editor/view-live.ts index 28fbcc484d..1238fac942 100644 --- a/apps/web/src/page/status-pages/editor/view-live.ts +++ b/apps/web/src/page/status-pages/editor/view-live.ts @@ -30,7 +30,7 @@ export const addressLine = (h: H, model: Model, page: V2StatusPage): Html => { h.Target("_blank"), h.Rel("noopener"), h.Class( - "font-mono text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline", + "font-mono text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline active:text-foreground active:underline", ), ], [url], diff --git a/apps/web/src/page/status-pages/editor/view-settings.ts b/apps/web/src/page/status-pages/editor/view-settings.ts index 8754834a04..a77363ecc8 100644 --- a/apps/web/src/page/status-pages/editor/view-settings.ts +++ b/apps/web/src/page/status-pages/editor/view-settings.ts @@ -264,7 +264,7 @@ const breakGlassSection = (h: H, model: Model, page: V2StatusPage): Html => { const dangerZone = (h: H): Html => settingsSection(h, { id: "status-page-settings-danger", title: "Danger zone", framed: false }, [ - panel(h, { className: "border-destructive/40" }, [ + panel(h, { className: "border-destructive-a4" }, [ h.div( [h.Class("flex items-start justify-between gap-6 p-4")], [ diff --git a/apps/web/src/page/status-pages/list/view.ts b/apps/web/src/page/status-pages/list/view.ts index 34fe933795..aa99a2b979 100644 --- a/apps/web/src/page/status-pages/list/view.ts +++ b/apps/web/src/page/status-pages/list/view.ts @@ -77,7 +77,7 @@ const lastPublished = (h: H, summary: StatusPageSummary, inputs: ViewInputs): Ht const pageRow = (h: H, summary: StatusPageSummary, inputs: ViewInputs): Html => { const page = summary.page return h.li( - [h.Key(page.id), h.Class("relative py-3 pr-4 pl-4 hover:bg-muted/25")], + [h.Key(page.id), h.Class("relative py-3 pr-4 pl-4 hover:bg-muted/25 active:bg-muted/25")], [ h.div( [h.Class(ROW_GRID)], diff --git a/apps/web/src/page/status-pages/shared/look.ts b/apps/web/src/page/status-pages/shared/look.ts index e7507459c9..281b376782 100644 --- a/apps/web/src/page/status-pages/shared/look.ts +++ b/apps/web/src/page/status-pages/shared/look.ts @@ -45,7 +45,7 @@ const presetCard = ( h.span( [h.Class("flex gap-0.5")], [scheme.ok, scheme.ok, scheme.degraded, scheme.ok].map((color) => - h.span([h.Class("h-2 w-1.5 rounded-[1px]"), h.Style({ backgroundColor: color })], []), + h.span([h.Class("h-2 w-1.5 rounded-2xs"), h.Style({ backgroundColor: color })], []), ), ), ], @@ -60,7 +60,7 @@ const presetCard = ( h.Class( cn( "flex flex-col gap-1.5 rounded-lg border p-1.5 text-left text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-60", - isSelected ? "border-primary/70 bg-primary/5" : "hover:bg-muted/50", + isSelected ? "border-primary/70 bg-primary-a1" : "hover:bg-muted/50 active:bg-muted/50", ), ), ],