From 1d027cc9293df3f0e4bc552c53c2d7e4026053e5 Mon Sep 17 00:00:00 2001 From: swithek <52840391+swithek@users.noreply.github.com> Date: Sat, 3 Oct 2026 23:31:21 +0200 Subject: [PATCH] update hook colours --- web/app/assets/css/main.css | 36 +++++++++++-------- .../editor/hooks/HookMenuHeader.nuxt.test.ts | 20 +++++++---- .../editor/hooks/HookNotice.nuxt.test.ts | 9 +++-- .../components/editor/hooks/HookNotice.vue | 8 ++--- .../components/editor/hooks/hook-status.ts | 7 ++-- 5 files changed, 48 insertions(+), 32 deletions(-) diff --git a/web/app/assets/css/main.css b/web/app/assets/css/main.css index 687f555f..49e2c24e 100644 --- a/web/app/assets/css/main.css +++ b/web/app/assets/css/main.css @@ -36,17 +36,18 @@ --radius: 0.35rem; --status-info: oklch(0.5309 0.1628 244.25); - --status-info-foreground: oklch(0.42 0.13 244.25); --status-success: oklch(0.6371 0.1749 146.7); - --status-success-foreground: oklch(0.42 0.13 146.7); --status-warning: oklch(0.7074 0.1455 95.22); - --status-warning-foreground: oklch(0.45 0.095 85); --status-error: oklch(0.577 0.245 27.325); --drag-target: oklch(0.8985 0.0419 244.63); - --hook-status-fresh: var(--status-success); - --hook-status-triggered: var(--status-info); - --hook-status-needs-attention: var(--status-warning); + + --hook-status-fresh: oklch(0.6 0.15 150); + --hook-status-fresh-foreground: oklch(0.38 0.095 150); + --hook-status-triggered: var(--primary); + --hook-status-triggered-foreground: var(--primary); + --hook-status-needs-attention: oklch(0.65 0.13 76); + --hook-status-needs-attention-foreground: oklch(0.42 0.085 72); --comment-highlight: oklch(0.8633 0.1764 89.91); --http-method-get: oklch(0.5002 0.1962 259.56); @@ -216,12 +217,13 @@ --ring: oklch(0.439 0 0); --drag-target: oklch(0.6603 0.1406 244.63 / 35.99%); - --status-info-foreground: oklch(0.8 0.1 244.25); - --status-success-foreground: oklch(0.82 0.15 146.7); - --status-warning-foreground: oklch(0.85 0.13 95.22); - --hook-status-fresh: var(--status-success); - --hook-status-triggered: var(--status-info); - --hook-status-needs-attention: var(--status-warning); + + --hook-status-fresh: oklch(0.78 0.14 150); + --hook-status-fresh-foreground: oklch(0.89 0.09 150); + --hook-status-triggered: oklch(0.75 0.1 258.28); + --hook-status-triggered-foreground: oklch(0.88 0.055 258.28); + --hook-status-needs-attention: oklch(0.83 0.13 82); + --hook-status-needs-attention-foreground: oklch(0.91 0.08 85); --http-method-get: oklch(0.6773 0.1637 247.59); --http-method-post: oklch(0.6613 0.1999 140.25); @@ -326,17 +328,21 @@ --radius-xl: calc(var(--radius) + 4px); --color-status-info: var(--status-info); - --color-status-info-foreground: var(--status-info-foreground); --color-status-success: var(--status-success); - --color-status-success-foreground: var(--status-success-foreground); --color-status-warning: var(--status-warning); - --color-status-warning-foreground: var(--status-warning-foreground); --color-status-error: var(--status-error); --color-drag-target: var(--drag-target); --color-hook-status-fresh: var(--hook-status-fresh); + --color-hook-status-fresh-foreground: var(--hook-status-fresh-foreground); --color-hook-status-triggered: var(--hook-status-triggered); + --color-hook-status-triggered-foreground: var( + --hook-status-triggered-foreground + ); --color-hook-status-needs-attention: var(--hook-status-needs-attention); + --color-hook-status-needs-attention-foreground: var( + --hook-status-needs-attention-foreground + ); --color-comment-highlight: var(--comment-highlight); --color-http-method-get: var(--http-method-get); diff --git a/web/app/components/editor/hooks/HookMenuHeader.nuxt.test.ts b/web/app/components/editor/hooks/HookMenuHeader.nuxt.test.ts index d4009efa..ea609b3e 100644 --- a/web/app/components/editor/hooks/HookMenuHeader.nuxt.test.ts +++ b/web/app/components/editor/hooks/HookMenuHeader.nuxt.test.ts @@ -26,7 +26,7 @@ describe("", { concurrent: false }, () => { t("editor.hooks.status.fresh"), ]) expect(pillColours()).toEqual([ - ["bg-hook-status-fresh/15", "text-status-success-foreground"], + ["bg-hook-status-fresh/15", "text-hook-status-fresh-foreground"], ]) }) @@ -40,7 +40,10 @@ describe("", { concurrent: false }, () => { input: ["triggered", "fresh", "triggered"], expected: { label: () => t("editor.hooks.status.triggered", { count: 2 }), - colours: ["bg-hook-status-triggered/15", "text-status-info-foreground"], + colours: [ + "bg-hook-status-triggered/15", + "text-hook-status-triggered-foreground", + ], }, }, { @@ -50,7 +53,7 @@ describe("", { concurrent: false }, () => { label: () => t("editor.hooks.status.needs-attention.one", { count: 1 }), colours: [ "bg-hook-status-needs-attention/25", - "text-status-warning-foreground", + "text-hook-status-needs-attention-foreground", ], }, }, @@ -62,7 +65,7 @@ describe("", { concurrent: false }, () => { t("editor.hooks.status.needs-attention.other", { count: 2 }), colours: [ "bg-hook-status-needs-attention/25", - "text-status-warning-foreground", + "text-hook-status-needs-attention-foreground", ], }, }, @@ -104,8 +107,11 @@ describe("", { concurrent: false }, () => { shown.map((pill) => pill.getAttribute("data-slot") === "tooltip-trigger"), ).toEqual([true, true]) expect(pillColours()).toEqual([ - ["bg-hook-status-needs-attention/25", "text-status-warning-foreground"], - ["bg-hook-status-triggered/15", "text-status-info-foreground"], + [ + "bg-hook-status-needs-attention/25", + "text-hook-status-needs-attention-foreground", + ], + ["bg-hook-status-triggered/15", "text-hook-status-triggered-foreground"], ]) expect(dotColours()).toEqual([ ["bg-hook-status-needs-attention"], @@ -153,7 +159,7 @@ function pills(): HTMLElement[] { function pillColours(): string[][] { return pills().map((pill) => Array.from(pill.classList).filter( - (c) => c.startsWith("bg-") || c.startsWith("text-status"), + (c) => c.startsWith("bg-") || c.startsWith("text-hook-status"), ), ) } diff --git a/web/app/components/editor/hooks/HookNotice.nuxt.test.ts b/web/app/components/editor/hooks/HookNotice.nuxt.test.ts index 56f658e2..23861989 100644 --- a/web/app/components/editor/hooks/HookNotice.nuxt.test.ts +++ b/web/app/components/editor/hooks/HookNotice.nuxt.test.ts @@ -24,7 +24,10 @@ describe("", () => { name: "triggered", input: "triggered", expected: { - box: ["bg-hook-status-triggered/10", "text-status-info-foreground"], + box: [ + "bg-hook-status-triggered/10", + "text-hook-status-triggered-foreground", + ], icon: "text-hook-status-triggered", }, }, @@ -34,7 +37,7 @@ describe("", () => { expected: { box: [ "bg-hook-status-needs-attention/15", - "text-status-warning-foreground", + "text-hook-status-needs-attention-foreground", ], icon: "text-hook-status-needs-attention", }, @@ -79,7 +82,7 @@ describe("", () => { "w-full", "border-t", "rounded-none", - "text-status-info-foreground", + "text-hook-status-triggered-foreground", ]), ) }) diff --git a/web/app/components/editor/hooks/HookNotice.vue b/web/app/components/editor/hooks/HookNotice.vue index bea6ea14..72e2a2a7 100644 --- a/web/app/components/editor/hooks/HookNotice.vue +++ b/web/app/components/editor/hooks/HookNotice.vue @@ -24,16 +24,16 @@ const STATUS_CLASSES: Record< "border-border bg-accent/40 text-foreground [&:not(:disabled):hover:not(:active)]:bg-accent/70 [&:not(:disabled):active]:bg-accent", }, triggered: { - box: "bg-hook-status-triggered/10 text-status-info-foreground", + box: "bg-hook-status-triggered/10 text-hook-status-triggered-foreground", icon: "text-hook-status-triggered", action: - "border-hook-status-triggered/20 bg-hook-status-triggered/5 text-status-info-foreground [&:not(:disabled):hover:not(:active)]:bg-hook-status-triggered/15 [&:not(:disabled):active]:bg-hook-status-triggered/25", + "border-hook-status-triggered/20 bg-hook-status-triggered/5 text-hook-status-triggered-foreground [&:not(:disabled):hover:not(:active)]:bg-hook-status-triggered/15 [&:not(:disabled):active]:bg-hook-status-triggered/25", }, "needs-attention": { - box: "bg-hook-status-needs-attention/15 text-status-warning-foreground", + box: "bg-hook-status-needs-attention/15 text-hook-status-needs-attention-foreground", icon: "text-hook-status-needs-attention", action: - "border-hook-status-needs-attention/30 bg-hook-status-needs-attention/5 text-status-warning-foreground [&:not(:disabled):hover:not(:active)]:bg-hook-status-needs-attention/15 [&:not(:disabled):active]:bg-hook-status-needs-attention/30", + "border-hook-status-needs-attention/30 bg-hook-status-needs-attention/5 text-hook-status-needs-attention-foreground [&:not(:disabled):hover:not(:active)]:bg-hook-status-needs-attention/15 [&:not(:disabled):active]:bg-hook-status-needs-attention/30", }, } diff --git a/web/app/components/editor/hooks/hook-status.ts b/web/app/components/editor/hooks/hook-status.ts index 6de8e85a..fd4ac200 100644 --- a/web/app/components/editor/hooks/hook-status.ts +++ b/web/app/components/editor/hooks/hook-status.ts @@ -11,10 +11,11 @@ export const HOOK_STATUS_DOT_CLASS: Record = { // a pill tints its ground with the status colour and darkens its text export const HOOK_STATUS_PILL_CLASS: Record = { - fresh: "bg-hook-status-fresh/15 text-status-success-foreground", - triggered: "bg-hook-status-triggered/15 text-status-info-foreground", + fresh: "bg-hook-status-fresh/15 text-hook-status-fresh-foreground", + triggered: + "bg-hook-status-triggered/15 text-hook-status-triggered-foreground", "needs-attention": - "bg-hook-status-needs-attention/25 text-status-warning-foreground", + "bg-hook-status-needs-attention/25 text-hook-status-needs-attention-foreground", } // HookGroupStatus sums up the hooks of one block, or the page's own. It is