mirror of
https://github.com/oxynote/oxynote.git
synced 2026-10-17 02:49:18 +02:00
update hook colours
This commit is contained in:
swithek
parent
8348e6f611
commit
1d027cc929
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ describe("<HookMenuHeader>", { 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("<HookMenuHeader>", { 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("<HookMenuHeader>", { 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("<HookMenuHeader>", { 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("<HookMenuHeader>", { 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"),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,10 @@ describe("<HookNotice>", () => {
|
|||
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("<HookNotice>", () => {
|
|||
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("<HookNotice>", () => {
|
|||
"w-full",
|
||||
"border-t",
|
||||
"rounded-none",
|
||||
"text-status-info-foreground",
|
||||
"text-hook-status-triggered-foreground",
|
||||
]),
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,10 +11,11 @@ export const HOOK_STATUS_DOT_CLASS: Record<HookStatus, string> = {
|
|||
|
||||
// a pill tints its ground with the status colour and darkens its text
|
||||
export const HOOK_STATUS_PILL_CLASS: Record<HookStatus, string> = {
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user