From ef441c24486b4fef17a315316110ea241a08c631 Mon Sep 17 00:00:00 2001 From: Scarce Koi Date: Mon, 6 Apr 2026 22:34:09 -0400 Subject: [PATCH 01/10] feat(palette): update --- .../_components/ColorContextMenu.svelte | 98 ++++++++++++++++ src/pages/palette/index.astro | 108 ++++++++---------- 2 files changed, 148 insertions(+), 58 deletions(-) create mode 100644 src/pages/palette/_components/ColorContextMenu.svelte diff --git a/src/pages/palette/_components/ColorContextMenu.svelte b/src/pages/palette/_components/ColorContextMenu.svelte new file mode 100644 index 00000000..776f6530 --- /dev/null +++ b/src/pages/palette/_components/ColorContextMenu.svelte @@ -0,0 +1,98 @@ + + + + + e.key === "Escape" && openMenuId.set(null)} /> + +
+ {@render children()} +
+ +{#if visible} +
+
{name}
+
+ {#each [["HEX", hex], ["RGB", rgb], ["HSL", hsl], ["OKLCH", oklch]] as [label, value]} + + {label}: + {value} + + {/each} +
+
+{/if} + + diff --git a/src/pages/palette/index.astro b/src/pages/palette/index.astro index 5f139616..26949415 100644 --- a/src/pages/palette/index.astro +++ b/src/pages/palette/index.astro @@ -7,7 +7,8 @@ import Default from "@layouts/Default.astro"; import PageIntro from "@components/PageIntro.astro"; -import CopyToClipboardIcon from "./_components/CopyToClipboardButton.svelte"; +// import CopyToClipboardIcon from "./_components/CopyToClipboardButton.svelte"; +import ColorContextMenu from "./_components/ColorContextMenu.svelte"; import FlavorName from "./_components/FlavorName.astro"; const toRgb = (rgb: ColorFormat["rgb"]) => { @@ -62,46 +63,16 @@ const toOklch = (oklch: ColorFormat["oklch"]) => { - - - - - - - - - - - - {Object.values(flavor.colors).map(({ hex, rgb, hsl, oklch, name }) => ( - - - - - - - - ))} - -
ColorHexRGBHSLOKLCH
-
{name}
- 		- - {hex} - - - - {toRgb(rgb)} - - - - {toHsl(hsl)} - - - - {toOklch(oklch)} - -
+
+ {Object.values(flavor.colors).map(({ hex, rgb, hsl, oklch, name }) => ( + +
+
+ {name} +
+ + ))} +
)) @@ -140,33 +111,54 @@ const toOklch = (oklch: ColorFormat["oklch"]) => { } .color-list { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); margin-block-start: var(--space-md); - margin-inline: auto; } .color-list-entry { - --__current-color: var(--current-color, var(--text)); - } + display: flex; + flex-direction: column; + align-items: center; + border-radius: var(--border-radius-normal); + gap: 1rem; + width: 8rem; + cursor: pointer; + padding: 2px; - .color-name { - position: relative; + &:hover { + background: var(--surface0); + } + } - margin: 0; - padding: 0; - padding-inline-start: 3rem; + .color-swatch { + width: 100%; + aspect-ratio: 1 / 1; + border-radius: var(--border-radius-normal); + background-color: var(--current-color); + border: 2px solid color-mix(in srgb, var(--mantle), var(--surface0) 50%); + } - &::before { - content: ""; + .color-name { + font-size: 1.7rem; + text-align: center; + word-break: normal; + overflow-wrap: normal; + } - position: absolute; - left: 0; + @media (max-width: 600px) { + .color-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); + } - height: 2rem; - aspect-ratio: 1 / 1; + .color-list-entry { + width: 100%; + } - border-radius: 9999px; - border: 1px solid color-mix(in srgb, var(--mantle), var(--surface0) 50%); - background-color: var(--__current-color); + .color-name { + font-size: 1.5rem; } } From a061e3a759f277f693f88ee1808d13cc37de5206 Mon Sep 17 00:00:00 2001 From: Scarce Koi Date: Mon, 6 Apr 2026 23:01:26 -0400 Subject: [PATCH 02/10] feat(palette): update --- src/layouts/components/Head.astro | 1 + .../palette/_components/ColorContextMenu.svelte | 15 ++++++++++++++- src/pages/palette/index.astro | 2 +- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/layouts/components/Head.astro b/src/layouts/components/Head.astro index aa17d59d..21c43fe9 100644 --- a/src/layouts/components/Head.astro +++ b/src/layouts/components/Head.astro @@ -39,4 +39,5 @@ const isProduction = import.meta.env.CATPPUCCIN_PROD; {enableViewTransition && } + {title} diff --git a/src/pages/palette/_components/ColorContextMenu.svelte b/src/pages/palette/_components/ColorContextMenu.svelte index 776f6530..ccaddacf 100644 --- a/src/pages/palette/_components/ColorContextMenu.svelte +++ b/src/pages/palette/_components/ColorContextMenu.svelte @@ -40,7 +40,7 @@ {#if visible} -
+
e.stopPropagation()}>
{name}
{#each [["HEX", hex], ["RGB", rgb], ["HSL", hsl], ["OKLCH", oklch]] as [label, value]} @@ -69,6 +69,7 @@ background: var(--base); border: 1px solid var(--surface0); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); + text-align: left; } .menu-title { @@ -86,12 +87,24 @@ flex-direction: column; } + .menu-items :global(button) { + text-align: left; + } + .menu-label { color: var(--subtext0); min-width: 3.5rem; display: inline-block; } + .menu-items :global(button.success .menu-label) { + color: var(--green); + } + + .menu-items :global(button.failed .menu-label) { + color: var(--red); + } + .menu-value { color: inherit; } diff --git a/src/pages/palette/index.astro b/src/pages/palette/index.astro index 26949415..3562e97c 100644 --- a/src/pages/palette/index.astro +++ b/src/pages/palette/index.astro @@ -137,7 +137,7 @@ const toOklch = (oklch: ColorFormat["oklch"]) => { aspect-ratio: 1 / 1; border-radius: var(--border-radius-normal); background-color: var(--current-color); - border: 2px solid color-mix(in srgb, var(--mantle), var(--surface0) 50%); + border: 2px solid color-mix(in srgb, var(--mantle), var(--text) 50%); } .color-name { From 36d2f1e4c83ee8627501176770811e69caa9aa37 Mon Sep 17 00:00:00 2001 From: Scarce Koi Date: Tue, 7 Apr 2026 13:02:39 -0400 Subject: [PATCH 03/10] feat(palette): update --- .../_components/ColorContextMenu.svelte | 55 +++++++++++++++++-- 1 file changed, 50 insertions(+), 5 deletions(-) diff --git a/src/pages/palette/_components/ColorContextMenu.svelte b/src/pages/palette/_components/ColorContextMenu.svelte index ccaddacf..412453f5 100644 --- a/src/pages/palette/_components/ColorContextMenu.svelte +++ b/src/pages/palette/_components/ColorContextMenu.svelte @@ -27,8 +27,14 @@ const onContextMenu = (e: MouseEvent) => { e.stopPropagation(); - x = e.clientX + window.scrollX; - y = e.clientY + window.scrollY; + const menuWidth = 240; + const menuHeight = 160; + const cx = e.clientX + window.scrollX; + const cy = e.clientY + window.scrollY; + + x = e.clientX + menuWidth > window.innerWidth ? Math.max(0, cx - menuWidth) : cx; + y = e.clientY + menuHeight > window.innerHeight ? cy - menuHeight : cy; + openMenuId.set(id); }; @@ -41,7 +47,10 @@ {#if visible}
e.stopPropagation()}> -
{name}
+
+
{name}
+ +
{#each [["HEX", hex], ["RGB", rgb], ["HSL", hsl], ["OKLCH", oklch]] as [label, value]} @@ -63,7 +72,8 @@ z-index: 1000; display: flex; flex-direction: column; - min-width: 240px; + max-width: calc(100vw - 1rem); + min-width: 200px; padding: 0.5rem; border-radius: var(--border-radius-normal); background: var(--base); @@ -77,9 +87,31 @@ font-weight: bold; padding: 0.25rem 0.5rem 0.5rem; color: var(--text); + font-family: monospace; + } + + .menu-header { + display: flex; + align-items: center; + justify-content: space-between; border-bottom: 1px solid var(--surface0); margin-bottom: 0.25rem; - font-family: monospace; + } + + .close-btn { + background: none; + border: none; + border-radius: var(--border-radius-normal); + color: var(--subtext0); + cursor: pointer; + padding: 0.25rem 0.5rem; + font-size: 2rem; + line-height: 1; + + &:hover { + color: var(--text); + background: var(--surface0); + } } .menu-items { @@ -88,7 +120,12 @@ } .menu-items :global(button) { + background: var(--base); text-align: left; + + &:hover { + background: var(--surface0); + } } .menu-label { @@ -105,6 +142,14 @@ color: var(--red); } + .menu-items :global(button.success) { + background: var(--surface0); + } + + .menu-items :global(button.failed) { + background: var(--surface0); + } + .menu-value { color: inherit; } From 6d97ad27f671a9cef9621404c8e3d00da3bb7872 Mon Sep 17 00:00:00 2001 From: Scarce Koi Date: Tue, 7 Apr 2026 13:19:02 -0400 Subject: [PATCH 04/10] feat(palette): update --- src/pages/palette/index.astro | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/palette/index.astro b/src/pages/palette/index.astro index 3562e97c..2dd21632 100644 --- a/src/pages/palette/index.astro +++ b/src/pages/palette/index.astro @@ -111,8 +111,8 @@ const toOklch = (oklch: ColorFormat["oklch"]) => { } .color-list { - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-sm); margin-block-start: var(--space-md); } @@ -123,7 +123,6 @@ const toOklch = (oklch: ColorFormat["oklch"]) => { align-items: center; border-radius: var(--border-radius-normal); gap: 1rem; - width: 8rem; cursor: pointer; padding: 2px; From eec3f0bd7f8475ef4af9cedc0ffd28f55386da6c Mon Sep 17 00:00:00 2001 From: Scarce Koi Date: Tue, 7 Apr 2026 14:02:35 -0400 Subject: [PATCH 05/10] feat(palette): update --- .../_components/ColorContextMenu.svelte | 53 +++++++++++++++++-- 1 file changed, 49 insertions(+), 4 deletions(-) diff --git a/src/pages/palette/_components/ColorContextMenu.svelte b/src/pages/palette/_components/ColorContextMenu.svelte index 412453f5..61b89c37 100644 --- a/src/pages/palette/_components/ColorContextMenu.svelte +++ b/src/pages/palette/_components/ColorContextMenu.svelte @@ -1,9 +1,22 @@ @@ -25,8 +38,13 @@ let x = $state(0); let y = $state(0); - const onContextMenu = (e: MouseEvent) => { + const LONG_PRESS_MS = 250; + let pressTimer: ReturnType; + let longPress = false; + + const onContextMenu = (e: PointerEvent) => { e.stopPropagation(); + const menuWidth = 240; const menuHeight = 160; const cx = e.clientX + window.scrollX; @@ -36,12 +54,39 @@ y = e.clientY + menuHeight > window.innerHeight ? cy - menuHeight : cy; openMenuId.set(id); + ignoreNextClick = true; + }; + + const handlePointerDown = (e: PointerEvent) => { + longPress = false; + + pressTimer = setTimeout(() => { + longPress = true; + onContextMenu(e); + }, LONG_PRESS_MS); + }; + + const handlePointerUp = async () => { + clearTimeout(pressTimer); + + if (!longPress) { + await navigator.clipboard.writeText(hex); + } + }; + + const handlePointerLeave = () => { + clearTimeout(pressTimer); }; e.key === "Escape" && openMenuId.set(null)} /> -
+
{@render children()}
From 3f159de03b2f52bb6d340d29b135191551e3399a Mon Sep 17 00:00:00 2001 From: Scarce Koi Date: Tue, 7 Apr 2026 14:43:22 -0400 Subject: [PATCH 06/10] feat(palette): update --- .../_components/ColorContextMenu.svelte | 61 ++++++++++++++++++- .../_components/CopyToClipboardButton.svelte | 21 +++++++ src/pages/palette/index.astro | 9 +++ 3 files changed, 88 insertions(+), 3 deletions(-) diff --git a/src/pages/palette/_components/ColorContextMenu.svelte b/src/pages/palette/_components/ColorContextMenu.svelte index 61b89c37..7b2e33fc 100644 --- a/src/pages/palette/_components/ColorContextMenu.svelte +++ b/src/pages/palette/_components/ColorContextMenu.svelte @@ -66,11 +66,24 @@ }, LONG_PRESS_MS); }; + let toastState = $state<"hidden" | "success" | "failed">("hidden"); + let toastTimer: ReturnType; + + const showToast = (success: boolean) => { + toastState = success ? "success" : "failed"; + clearTimeout(toastTimer); + toastTimer = setTimeout(() => (toastState = "hidden"), 2000); + }; + const handlePointerUp = async () => { clearTimeout(pressTimer); - if (!longPress) { - await navigator.clipboard.writeText(hex); + try { + await navigator.clipboard.writeText(hex); + showToast(true); + } catch { + showToast(false); + } } }; @@ -90,6 +103,12 @@ {@render children()}
+{#if toastState !== "hidden"} +
+ {toastState === "success" ? "Hex copied!" : "Failed to copy"} +
+{/if} + {#if visible}
e.stopPropagation()}>
@@ -144,7 +163,7 @@ } .close-btn { - background: none; + background: var(--mantle); border: none; border-radius: var(--border-radius-normal); color: var(--subtext0); @@ -198,4 +217,40 @@ .menu-value { color: inherit; } + + .toast { + position: fixed; + top: 1.5rem; + left: 50%; + transform: translateX(-50%); + z-index: 2000; + padding: 0.75rem 2rem; + border-radius: var(--border-radius-normal); + background: var(--base); + font-family: monospace; + font-size: 2rem; + pointer-events: none; + animation: toast-in 0.2s ease forwards; + + &.success { + color: var(--green); + border: 1px solid var(--green); + } + + &.failed { + color: var(--red); + border: 1px solid var(--red); + } + } + + @keyframes toast-in { + from { + opacity: 0; + transform: translateX(-50%) translateY(-0.5rem); + } + to { + opacity: 1; + transform: translateX(-50%) translateY(0); + } + } diff --git a/src/pages/palette/_components/CopyToClipboardButton.svelte b/src/pages/palette/_components/CopyToClipboardButton.svelte index 5433bafc..5d05c3ea 100644 --- a/src/pages/palette/_components/CopyToClipboardButton.svelte +++ b/src/pages/palette/_components/CopyToClipboardButton.svelte @@ -27,6 +27,27 @@ stateClass = STATE.ready; }, 2000); }; + + let toastState = $state<"hidden" | "success" | "failed">("hidden"); + let toastTimer: ReturnType; + + const showToast = (success: boolean) => { + toastState = success ? "success" : "failed"; + clearTimeout(toastTimer); + toastTimer = setTimeout(() => (toastState = "hidden"), 2000); + }; + + const handlePointerUp = async () => { + clearTimeout(pressTimer); + if (!longPress) { + try { + await navigator.clipboard.writeText(hex); + showToast(true); + } catch { + showToast(false); + } + } + }; @@ -206,13 +222,13 @@ color: var(--red); } - .menu-items :global(button.success) { - background: var(--surface0); - } + .menu-items :global(button.success) { + background: var(--surface0); + } - .menu-items :global(button.failed) { - background: var(--surface0); - } + .menu-items :global(button.failed) { + background: var(--surface0); + } .menu-value { color: inherit; @@ -245,9 +261,16 @@ @media (max-width: 600px) { .context-menu { - font-size: 1.5rem; + position: fixed !important; + bottom: 2rem !important; + left: 2rem !important; + right: 2rem !important; + transform: none !important; + width: auto !important; + max-width: none; + border-radius: var(--border-radius-normal) var(--border-radius-normal) 0 0; + box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4); } - .menu-title { font-size: 1.75rem; } From ce376f0d7df5f1335f13ab3177c4e48a05155e34 Mon Sep 17 00:00:00 2001 From: Scarce Koi Date: Tue, 7 Apr 2026 17:45:00 -0400 Subject: [PATCH 10/10] feat(palette): update --- src/pages/palette/_components/ColorContextMenu.svelte | 9 +++++++-- .../palette/_components/CopyToClipboardButton.svelte | 2 +- src/pages/palette/index.astro | 9 ++++++++- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/pages/palette/_components/ColorContextMenu.svelte b/src/pages/palette/_components/ColorContextMenu.svelte index eb28fa59..363e892e 100644 --- a/src/pages/palette/_components/ColorContextMenu.svelte +++ b/src/pages/palette/_components/ColorContextMenu.svelte @@ -24,13 +24,14 @@ import { type Snippet } from "svelte"; import CopyToClipboardIcon from "./CopyToClipboardButton.svelte"; - let { name, hex, rgb, hsl, oklch, children }: { + let { name, hex, rgb, hsl, oklch, children, flavorName }: { name: string; hex: string; rgb: string; hsl: string; oklch: string; children: Snippet; + flavorName?: string; } = $props(); const id = hex; @@ -128,7 +129,7 @@ onclick={(e) => e.stopPropagation()} >
-
{name}
+
{flavorName ? `${flavorName} ${name}` : name}
@@ -260,6 +261,10 @@ } @media (max-width: 600px) { + .wrapper { + display: block; + } + .context-menu { position: fixed !important; bottom: 2rem !important; diff --git a/src/pages/palette/_components/CopyToClipboardButton.svelte b/src/pages/palette/_components/CopyToClipboardButton.svelte index 5d05c3ea..d2c05278 100644 --- a/src/pages/palette/_components/CopyToClipboardButton.svelte +++ b/src/pages/palette/_components/CopyToClipboardButton.svelte @@ -50,7 +50,7 @@ }; -