From 6cf3c75275cac377239af852b178e467e384f589 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 29 Jan 2026 06:53:49 +0000 Subject: [PATCH 01/17] Initial plan From dca73049f04d8b3ff3b7b2d060eb220aa3e77d3c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 29 Jan 2026 06:58:57 +0000 Subject: [PATCH 02/17] Add CSS appearance: base-select styling for customizable select elements Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> --- src/components/Gradient.svelte | 104 +++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) diff --git a/src/components/Gradient.svelte b/src/components/Gradient.svelte index f68991f..0b63051 100644 --- a/src/components/Gradient.svelte +++ b/src/components/Gradient.svelte @@ -997,6 +997,110 @@ let user_gradient = $derived(gensyntax[$gradient_type]( cursor: not-allowed; } + /* ----------------------------------------------- + * Customizable Select (base-select) Styles + * ----------------------------------------------- */ + @supports (appearance: base-select) { + :global(select) { + appearance: base-select; + background-image: none; + padding-inline-end: 1.75ch; + } + + :global(select::picker(select)) { + --_picker-bg-light: #fff; + --_picker-bg-dark: var(--surface-3); + --_picker-bg: var(--_picker-bg-light); + + background: var(--_picker-bg); + border: 1px solid var(--surface-4); + border-radius: var(--radius-2); + box-shadow: var(--shadow-4); + padding: var(--size-1); + margin-block-start: var(--size-1); + + /* Transitions */ + opacity: 0; + transform: translateY(-8px) scale(0.96); + transition: + opacity 150ms var(--ease-3), + transform 150ms var(--ease-3), + overlay 150ms var(--ease-3) allow-discrete, + display 150ms var(--ease-3) allow-discrete; + } + + :global(select:open::picker(select)) { + opacity: 1; + transform: translateY(0) scale(1); + } + + @starting-style { + :global(select:open::picker(select)) { + opacity: 0; + transform: translateY(-8px) scale(0.96); + } + } + + :global(select option) { + padding: var(--size-2) var(--size-3); + border-radius: var(--radius-2); + cursor: pointer; + transition: + background-color 100ms var(--ease-2), + color 100ms var(--ease-2); + } + + :global(select option:hover) { + background-color: var(--surface-2); + } + + :global(select option:checked), + :global(select option:focus) { + background-color: var(--link); + color: white; + } + + :global(select option::checkmark) { + display: none; + } + + :global(select optgroup) { + padding-block: var(--size-1); + } + + :global(select optgroup::before) { + content: attr(label); + display: block; + font-size: var(--font-size-0); + font-weight: var(--font-weight-6); + color: var(--text-2); + padding: var(--size-1) var(--size-3); + text-transform: uppercase; + letter-spacing: var(--font-letterspacing-2); + } + + :global(select optgroup:not(:first-of-type)) { + border-block-start: 1px solid var(--surface-3); + margin-block-start: var(--size-1); + padding-block-start: var(--size-2); + } + + @media (prefers-color-scheme: dark) { + :global(select::picker(select)) { + --_picker-bg: var(--_picker-bg-dark); + border-color: var(--surface-4); + } + + :global(select option:hover) { + background-color: var(--surface-4); + } + + :global(select optgroup:not(:first-of-type)) { + border-block-start-color: var(--surface-4); + } + } + } + :global(.sr-only) { inline-size: 0; block-size: 0; From 62d8d53c4e4a59e246a66dc61738dfbc8aa70e86 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 29 Jan 2026 17:21:18 +0000 Subject: [PATCH 03/17] Add 1px gap between option elements in base-select dropdown Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> --- src/components/Gradient.svelte | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Gradient.svelte b/src/components/Gradient.svelte index 0b63051..9f3943e 100644 --- a/src/components/Gradient.svelte +++ b/src/components/Gradient.svelte @@ -1050,6 +1050,10 @@ let user_gradient = $derived(gensyntax[$gradient_type]( color 100ms var(--ease-2); } + :global(select option:not(:last-child)) { + margin-block-end: 1px; + } + :global(select option:hover) { background-color: var(--surface-2); } From 6672921510d0ddb0111baec4914e739359cedd63 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 29 Jan 2026 22:44:00 +0000 Subject: [PATCH 04/17] Fix overflow: hidden blocking base-select anchor positioning Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> --- src/components/Gradient.svelte | 6 +++--- src/components/LayersPanel.svelte | 2 +- src/routes/+page.svelte | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Gradient.svelte b/src/components/Gradient.svelte index 9f3943e..a1b74f9 100644 --- a/src/components/Gradient.svelte +++ b/src/components/Gradient.svelte @@ -622,7 +622,7 @@ let user_gradient = $derived(gensyntax[$gradient_type]( display: grid; border-radius: var(--radius-3); box-shadow: var(--shadow-3); - overflow: hidden; + overflow: clip; } @media (prefers-color-scheme: light) { @@ -743,7 +743,7 @@ let user_gradient = $derived(gensyntax[$gradient_type]( display: grid; place-content: center; inline-size: 100cqi; - overflow: hidden; + overflow: clip; position: relative; } @@ -1170,7 +1170,7 @@ let user_gradient = $derived(gensyntax[$gradient_type]( .global-actions { position: relative; inline-size: var(--size-7); - overflow: hidden; + overflow: clip; border-radius: var(--radius-round); padding-inline: 0; aspect-ratio: 1; diff --git a/src/components/LayersPanel.svelte b/src/components/LayersPanel.svelte index c6a1fe2..f55fced 100644 --- a/src/components/LayersPanel.svelte +++ b/src/components/LayersPanel.svelte @@ -193,7 +193,7 @@ .layer-actions { position: relative; inline-size: var(--size-5); - overflow: hidden; + overflow: clip; border-radius: var(--radius-round); padding-inline: 0; aspect-ratio: 1; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 7cdae76..f34f6fa 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -21,7 +21,7 @@ @media (min-width: 1024px) { :global(html) { - overflow: hidden; + overflow: clip; } } From 45ff98a0b74ec1a1f72561e8a9f21b34d0d99ae0 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:13:47 +0000 Subject: [PATCH 05/17] Add button and selectedcontent elements for base-select activation Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> --- src/components/ColorPicker.svelte | 3 +++ src/components/ConicPosition.svelte | 3 +++ src/components/Gradient.svelte | 30 +++++++++++++++++++++++- src/components/GradientColorSpace.svelte | 3 +++ src/components/HueInterpolation.svelte | 3 +++ src/components/LinearAngle.svelte | 3 +++ src/components/RadialPosition.svelte | 3 +++ src/components/RadialSize.svelte | 3 +++ 8 files changed, 50 insertions(+), 1 deletion(-) diff --git a/src/components/ColorPicker.svelte b/src/components/ColorPicker.svelte index 3f95412..32531d3 100644 --- a/src/components/ColorPicker.svelte +++ b/src/components/ColorPicker.svelte @@ -259,6 +259,9 @@ let gamut = $derived(whatsTheGamutDamnit($picker_value))
+ {#each gradient_positions as pos} diff --git a/src/components/Gradient.svelte b/src/components/Gradient.svelte index a1b74f9..7d41ec4 100644 --- a/src/components/Gradient.svelte +++ b/src/components/Gradient.svelte @@ -1004,7 +1004,35 @@ let user_gradient = $derived(gensyntax[$gradient_type]( :global(select) { appearance: base-select; background-image: none; - padding-inline-end: 1.75ch; + } + + /* Style the button that activates the picker */ + :global(select > button) { + all: unset; + display: flex; + align-items: center; + gap: 0.5ch; + cursor: pointer; + padding-inline: 1.75ch 0; + padding-block: 0.75ch; + } + + /* Style the selected content display */ + :global(select selectedcontent) { + display: inline; + } + + /* Style the picker icon to use the same arrow icons */ + :global(select::picker-icon) { + content: var(--icon-arrow-down); + inline-size: 3ex; + block-size: 3ex; + padding-inline: 0.5ch; + transition: rotate 150ms var(--ease-3); + } + + :global(select:open::picker-icon) { + rotate: 180deg; } :global(select::picker(select)) { diff --git a/src/components/GradientColorSpace.svelte b/src/components/GradientColorSpace.svelte index 9e49480..73a241f 100644 --- a/src/components/GradientColorSpace.svelte +++ b/src/components/GradientColorSpace.svelte @@ -17,6 +17,9 @@ Color Space + diff --git a/src/components/LinearAngle.svelte b/src/components/LinearAngle.svelte index f01257f..856ce05 100644 --- a/src/components/LinearAngle.svelte +++ b/src/components/LinearAngle.svelte @@ -32,6 +32,9 @@
+ {#each gradient_positions as pos} diff --git a/src/components/RadialSize.svelte b/src/components/RadialSize.svelte index 2c06eee..bc5a899 100644 --- a/src/components/RadialSize.svelte +++ b/src/components/RadialSize.svelte @@ -64,6 +64,9 @@
-
-
@@ -1060,13 +1058,6 @@ let user_gradient = $derived(gensyntax[$gradient_type]( display 150ms var(--ease-3) allow-discrete; } - /* Style hr elements inside the picker */ - :global(select::picker(select) hr) { - margin-block: var(--size-1); - border: none; - border-block-start: 1px solid var(--surface-3); - } - :global(select:open::picker(select)) { opacity: 1; transform: translateY(0) scale(1); @@ -1079,6 +1070,11 @@ let user_gradient = $derived(gensyntax[$gradient_type]( } } + /* Hide disabled options in base-select mode */ + :global(select option[disabled]) { + display: none; + } + :global(select option) { display: flex; align-items: center; diff --git a/src/components/GradientStops.svelte b/src/components/GradientStops.svelte index 3b27405..045da42 100644 --- a/src/components/GradientStops.svelte +++ b/src/components/GradientStops.svelte @@ -330,11 +330,9 @@ diff --git a/src/components/GradientColorSpace.svelte b/src/components/GradientColorSpace.svelte index 73a241f..15cebc8 100644 --- a/src/components/GradientColorSpace.svelte +++ b/src/components/GradientColorSpace.svelte @@ -16,7 +16,7 @@ Color Space - $gradient_space = e.currentTarget.value}> diff --git a/src/components/HueInterpolation.svelte b/src/components/HueInterpolation.svelte index af7540c..f7a7455 100644 --- a/src/components/HueInterpolation.svelte +++ b/src/components/HueInterpolation.svelte @@ -11,7 +11,7 @@ Hue Path - $gradient_interpolation = e.currentTarget.value}> diff --git a/src/components/LinearAngle.svelte b/src/components/LinearAngle.svelte index 856ce05..ab1428a 100644 --- a/src/components/LinearAngle.svelte +++ b/src/components/LinearAngle.svelte @@ -31,7 +31,7 @@
- $linear_named_angle = e.currentTarget.value}> diff --git a/src/components/RadialPosition.svelte b/src/components/RadialPosition.svelte index 90f6ebc..106618d 100644 --- a/src/components/RadialPosition.svelte +++ b/src/components/RadialPosition.svelte @@ -28,7 +28,7 @@
- $radial_named_position = e.currentTarget.value}> diff --git a/src/components/RadialSize.svelte b/src/components/RadialSize.svelte index bc5a899..78a062a 100644 --- a/src/components/RadialSize.svelte +++ b/src/components/RadialSize.svelte @@ -63,7 +63,7 @@
- $radial_size = e.currentTarget.value}> From 156347ad3edb8d7d98e3d2f07612a952f6dfa99f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 31 Jan 2026 06:36:10 +0000 Subject: [PATCH 15/17] Add meaningful icons to action menu options with accessibility support Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> --- src/components/Gradient.svelte | 22 +++++++++++++++------- src/components/GradientStops.svelte | 10 +++++----- src/components/LayersPanel.svelte | 12 ++++++------ 3 files changed, 26 insertions(+), 18 deletions(-) diff --git a/src/components/Gradient.svelte b/src/components/Gradient.svelte index 416f7d2..0ceb191 100644 --- a/src/components/Gradient.svelte +++ b/src/components/Gradient.svelte @@ -560,15 +560,15 @@ let user_gradient = $derived(gensyntax[$gradient_type](
@@ -1078,6 +1078,7 @@ let user_gradient = $derived(gensyntax[$gradient_type]( :global(select option) { display: flex; align-items: center; + gap: var(--size-2); padding: var(--size-2) var(--size-3); border-radius: var(--radius-2); cursor: pointer; @@ -1086,6 +1087,13 @@ let user_gradient = $derived(gensyntax[$gradient_type]( color 100ms var(--ease-2); } + /* Style icons inside options */ + :global(select option > svg) { + inline-size: 1.25em; + block-size: 1.25em; + flex-shrink: 0; + } + :global(select option:not(:last-child)) { margin-block-end: 1px; } diff --git a/src/components/GradientStops.svelte b/src/components/GradientStops.svelte index 045da42..a7e716e 100644 --- a/src/components/GradientStops.svelte +++ b/src/components/GradientStops.svelte @@ -330,11 +330,11 @@
beginDrag(e, i)} role="button" aria-label="Drag to reorder" tabindex="0">
diff --git a/src/components/LayersPanel.svelte b/src/components/LayersPanel.svelte index 97e19fb..250ed98 100644 --- a/src/components/LayersPanel.svelte +++ b/src/components/LayersPanel.svelte @@ -58,12 +58,12 @@
From 73e741ecdac4b9998ce836e55a4036fea833d4b6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 31 Jan 2026 06:39:40 +0000 Subject: [PATCH 16/17] Fix Move to top/bottom icons to use vertical align icons Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> --- src/components/LayersPanel.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/LayersPanel.svelte b/src/components/LayersPanel.svelte index 250ed98..f111af3 100644 --- a/src/components/LayersPanel.svelte +++ b/src/components/LayersPanel.svelte @@ -60,8 +60,8 @@ - - + + From b8728ba44094e0a5f168770aa6f55fcacaa4d7b1 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 31 Jan 2026 06:44:33 +0000 Subject: [PATCH 17/17] Update option spacing and add padding: 0 for selects inside buttons Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> --- src/components/Gradient.svelte | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Gradient.svelte b/src/components/Gradient.svelte index 0ceb191..5baaaa9 100644 --- a/src/components/Gradient.svelte +++ b/src/components/Gradient.svelte @@ -1035,6 +1035,11 @@ let user_gradient = $derived(gensyntax[$gradient_type]( opacity: 0; } + /* Selects inside buttons should have no padding */ + :global(button > select) { + padding: 0; + } + :global(select::picker(select)) { appearance: base-select; --_picker-bg-light: #fff; @@ -1078,8 +1083,8 @@ let user_gradient = $derived(gensyntax[$gradient_type]( :global(select option) { display: flex; align-items: center; - gap: var(--size-2); - padding: var(--size-2) var(--size-3); + gap: var(--size-3); + padding: var(--size-2) var(--size-2); border-radius: var(--radius-2); cursor: pointer; transition: