Skip to content

revert(bricks): remove SF colour border/box-shadow fixes #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackgranatowski merged 1 commit into from
Jun 3, 2026
Merged

revert(bricks): remove SF colour border/box-shadow fixes #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions plugins/SLASHED-for-WP/integrations/bricks/assets/editor-app/app.js
View file
Open in desktop

Large diffs are not rendered by default.

59 changes: 1 addition & 58 deletions plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/ColorPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,6 @@
const brandGroups = $derived(fullModel.groups.filter(g => g.type === 'brand'));
const statusGroups = $derived(fullModel.groups.filter(g => g.type === 'status'));

// ── Panel element ref (used for the direct mousedown listener below) ────
let panelEl;

// ── Canvas theme preview ─────────────────────────────────────────────────
let _canvasOriginal;
function canvasRoot() {
Expand Down Expand Up @@ -116,47 +113,6 @@
function setMode(next) { mode = next; applyCanvasTheme(next); }
onMount(() => () => restoreCanvasTheme());

// Attach a direct (non-Svelte-delegated) mousedown listener on the panel
// element. Svelte 5 delegates onclick/onmousedown to document, which fires
// AFTER Bricks' own document-level click-outside handlers. For border and
// box-shadow colour controls, Bricks' handler closes the sub-panel (and
// disconnects colorInputEl) before our Svelte delegation can run, causing
// the "input not found" error. A direct listener fires at element level —
// before the event bubbles to document — so stopPropagation actually
// prevents Bricks from seeing the event and preventDefault actually prevents
// focus loss. In picker mode we also apply the colour value here (on
// mousedown) so the input is still connected at the moment of writing.
onMount(() => {
function handlePanelMouseDown(e) {
if (e.target?.tagName !== 'INPUT' && e.target?.tagName !== 'TEXTAREA') {
e.preventDefault();
}
e.stopPropagation();

if (!pickerMode) return;

const btn = e.target?.closest?.('button[data-cp-pick-var]');
if (!btn) return;

// Mark the button so the Svelte-delegated click handler (pick()) skips
// this gesture — prevents a double onPickValue call if the component
// is still mounted when the subsequent click event fires.
btn.dataset.cpSuppressClick = '1';

const value = `var(${btn.dataset.cpPickVar})`;
const ok = onPickValue(value);
if (ok === false) {
toast = { kind: 'error', message: `Couldn't apply ${value} — input not found` };
return;
}
delete btn.dataset.cpSuppressClick;
onPick?.();
}

panelEl?.addEventListener('mousedown', handlePanelMouseDown);
return () => panelEl?.removeEventListener('mousedown', handlePanelMouseDown);
});

// ── Clipboard ────────────────────────────────────────────────────────────
async function copyText(text) {
try {
Expand All @@ -182,12 +138,6 @@
const value = swatchValue(swatch);

if (pickerMode) {
// The direct mousedown handler may have already applied this token and
// set a suppress flag on the button. If so, skip to avoid a double call.
// (Keyboard-activated clicks never set the flag, so they always proceed.)
const btn = panelEl?.querySelector(`button[data-cp-pick-var="${swatch.var}"][data-cp-suppress-click]`);
if (btn) { delete btn.dataset.cpSuppressClick; return; }

const ok = onPickValue(value);
if (ok === false) {
toast = { kind: 'error', message: `Couldn't apply ${value} — input not found` };
Expand Down Expand Up @@ -241,7 +191,6 @@
<svelte:window onkeydown={handleKeydown} />

<div
bind:this={panelEl}
class="slashed-cp"
class:slashed-cp--docked={pickerMode}
data-mode={mode}
Expand All @@ -251,6 +200,7 @@
aria-label="SLASHED Color System"
tabindex="-1"
onclick={(e) => e.stopPropagation()}
onmousedown={(e) => e.stopPropagation()}
>
<header class="slashed-cp__header">
<h2 class="slashed-cp__title">Color System</h2>
Expand Down Expand Up @@ -335,7 +285,6 @@
type="button"
class="slashed-cp__qu-cell"
title={swatch.name}
data-cp-pick-var={swatch.var}
onclick={() => pick(swatch)}
>
<span
Expand Down Expand Up @@ -394,7 +343,6 @@
class="slashed-cp__fam-banner"
style="--sw-l: {base.light}; --sw-d: {base.dark}"
title="{grp.label} base — {base.name}"
data-cp-pick-var={base.var}
onclick={() => pick(base)}
>
<span class="slashed-cp__fam-banner-lbl">{grp.label}</span>
Expand Down Expand Up @@ -422,7 +370,6 @@
class="slashed-cp__strip-sw"
title="{s.label} — {s.name}"
style="--sw-l: {s.light}; --sw-d: {s.dark}"
data-cp-pick-var={s.var}
onclick={() => pick(s)}
></button>
{/each}
Expand All @@ -442,7 +389,6 @@
class="slashed-cp__strip-sw slashed-cp__strip-sw--alpha"
title="{s.label} — {s.name}"
style="--sw-l: {s.light}; --sw-d: {s.dark}"
data-cp-pick-var={s.var}
onclick={() => pick(s)}
></button>
{/each}
Expand Down Expand Up @@ -494,7 +440,6 @@
class="slashed-cp__fam-banner"
style="--sw-l: {base.light}; --sw-d: {base.dark}"
title="{grp.label} base — {base.name}"
data-cp-pick-var={base.var}
onclick={() => pick(base)}
>
<span class="slashed-cp__fam-banner-lbl">{grp.label}</span>
Expand Down Expand Up @@ -522,7 +467,6 @@
class="slashed-cp__strip-sw"
title="{s.label} — {s.name}"
style="--sw-l: {s.light}; --sw-d: {s.dark}"
data-cp-pick-var={s.var}
onclick={() => pick(s)}
></button>
{/each}
Expand All @@ -542,7 +486,6 @@
class="slashed-cp__strip-sw slashed-cp__strip-sw--alpha"
title="{s.label} — {s.name}"
style="--sw-l: {s.light}; --sw-d: {s.dark}"
data-cp-pick-var={s.var}
onclick={() => pick(s)}
></button>
{/each}
Expand Down
1 change: 0 additions & 1 deletion plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/ColorSwatch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
style="--cp-l:{swatch.light}; --cp-d:{swatch.dark}; --cp-solid:{swatchHex(swatch, mode === 'dark' ? 'dark' : 'light')};"
{title}
aria-label={swatch.name}
data-cp-pick-var={swatch.var}
onclick={() => onPick?.(swatch)}
>
<span class="slashed-cp-swatch__fill" aria-hidden="true"></span>
Expand Down
8 changes: 0 additions & 8 deletions plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,14 +120,6 @@ function injectSFButton(colorControl) {
dot.setAttribute('aria-hidden', 'true');
btn.appendChild(dot);

btn.addEventListener('mousedown', (e) => {
e.stopPropagation();
// Prevent focus from leaving the Bricks colour input on button press.
// For border/box-shadow controls the colour input lives inside a Bricks
// colour-picker popover that closes on blur — without preventDefault the
// popover shuts before the click handler runs, disconnecting colorInput.
e.preventDefault();
});
btn.addEventListener('click', (e) => {
e.stopPropagation();
// Pass the wrapper so the picker re-queries the live input at pick time,
Expand Down