From df7048d51634d60669241383e315dd8a8e50aaa3 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Sun, 9 Aug 2026 01:50:45 -0400
Subject: [PATCH 1/4] feat(studio): show every colour of a mixed selection in
 the text swatch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Selecting text painted in more than one colour showed a white swatch. The
toolbar reads a property only when the whole selection agrees on it, which is
right for bold and italic (a toggle is on or off) but wrong for a swatch: with
nothing to report it fell back to the default, so a red-and-green selection
claimed to be white.

The swatch now reads the colours as they run through the selection and draws
one band per run, sized by how many characters carry it. Hard stops, not a
fade — it reports the colours that are there, and a blend would draw colours
that are not. A single-colour selection is a plain swatch, as before, and
picking a colour still applies it to everything selected.
---
 .../editor/InlineTextToolbar.test.tsx         | 48 ++++++++++++++++-
 .../components/editor/InlineTextToolbar.tsx   | 31 +++++++++--
 .../editor/inlineTextStyleRange.test.ts       | 39 +++++++++++++-
 .../components/editor/inlineTextStyleRange.ts | 54 +++++++++++++++----
 4 files changed, 156 insertions(+), 16 deletions(-)

diff --git a/packages/studio/src/components/editor/InlineTextToolbar.test.tsx b/packages/studio/src/components/editor/InlineTextToolbar.test.tsx
index 148d786f41..8093bd4633 100644
--- a/packages/studio/src/components/editor/InlineTextToolbar.test.tsx
+++ b/packages/studio/src/components/editor/InlineTextToolbar.test.tsx
@@ -3,7 +3,7 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it } from "vitest";
-import { InlineTextToolbar } from "./InlineTextToolbar";
+import { InlineTextToolbar, swatchBackground } from "./InlineTextToolbar";
 import type { InlineTextEditSession } from "../../hooks/useInlineTextEdit";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -191,4 +191,50 @@ describe("InlineTextToolbar", () => {
     expect(toolbar.style.left).toBe(`${100 + (20 + 50) * scale}px`);
     expect(toolbar.style.top).toBe(`${50 + 40 * scale - 10}px`);
   });
+  it("shows the selection's colours in the swatch when they differ", () => {
+    const { element, session, iframe } = scene(
+      '<span style="color: red">Hello</span><span style="color: lime">world</span>',
+    );
+    const { host } = render(session, iframe);
+
+    selectAll(element);
+
+    const swatch = toolbarIn(host)!.querySelector<HTMLElement>("span[aria-hidden]")!;
+    expect(swatch.style.background).toBe(
+      "linear-gradient(90deg, red 0.00% 50.00%, lime 50.00% 100.00%)",
+    );
+  });
+
+  it("shows a plain swatch when the whole selection is one colour", () => {
+    const { element, session, iframe } = scene('<span style="color: red">Hello world</span>');
+    const { host } = render(session, iframe);
+
+    selectAll(element);
+
+    const swatch = toolbarIn(host)!.querySelector<HTMLElement>("span[aria-hidden]")!;
+    expect(swatch.style.background).toBe("red");
+  });
+});
+
+describe("swatchBackground", () => {
+  it("shows every colour in the selection, sized by how much text carries it", () => {
+    expect(
+      swatchBackground(
+        [
+          { value: "red", chars: 5 },
+          { value: "lime", chars: 15 },
+        ],
+        undefined,
+      ),
+    ).toBe("linear-gradient(90deg, red 0.00% 25.00%, lime 25.00% 100.00%)");
+  });
+
+  it("stays a plain swatch when the selection is one colour", () => {
+    expect(swatchBackground([{ value: "red", chars: 5 }], "red")).toBe("red");
+  });
+
+  it("falls back to the agreed colour when the characters carry none", () => {
+    expect(swatchBackground([], "rgb(1, 2, 3)")).toBe("rgb(1, 2, 3)");
+    expect(swatchBackground([], undefined)).toBe("#ffffff");
+  });
 });
diff --git a/packages/studio/src/components/editor/InlineTextToolbar.tsx b/packages/studio/src/components/editor/InlineTextToolbar.tsx
index 8ecc2b43f7..505d6609db 100644
--- a/packages/studio/src/components/editor/InlineTextToolbar.tsx
+++ b/packages/studio/src/components/editor/InlineTextToolbar.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
-import { applyInlineStyle, readInlineStyle } from "./inlineTextStyleRange";
+import { applyInlineStyle, readInlineStyle, readInlineStyleSpread } from "./inlineTextStyleRange";
 import type { InlineTextEditSession } from "../../hooks/useInlineTextEdit";
 
 /**
@@ -24,6 +24,7 @@ interface ToolbarPlacement {
   left: number;
   top: number;
   styles: Record<string, string>;
+  colours: Array<{ value: string; chars: number }>;
 }
 
 export function InlineTextToolbar({
@@ -90,7 +91,7 @@ export function InlineTextToolbar({
         <span
           aria-hidden="true"
           className="h-3.5 w-3.5 rounded-full border border-white/25"
-          style={{ background: styles.color || DEFAULT_COLOR }}
+          style={{ background: swatchBackground(placement.colours, styles.color) }}
         />
         {/* `inset-0` is not enough on its own: a colour input carries a
             user-agent minimum width, which wins over the right edge and lets
@@ -100,7 +101,7 @@ export function InlineTextToolbar({
           type="color"
           aria-label="Text colour"
           className="absolute inset-0 h-full w-full min-w-0 cursor-pointer opacity-0"
-          value={toHexColor(styles.color)}
+          value={toHexColor(styles.color ?? placement.colours[0]?.value)}
           onChange={(event) => apply({ color: event.target.value })}
         />
       </label>
@@ -129,6 +130,29 @@ export function InlineTextToolbar({
   );
 }
 
+/**
+ * The selection's colours, in the proportion they are used: one band per run of
+ * characters that share a colour. Hard stops, not a blend — the swatch is
+ * reporting the colours that are there, and a fade would draw colours that are
+ * not. A selection with one colour is a plain swatch, as before.
+ */
+export function swatchBackground(
+  colours: Array<{ value: string; chars: number }>,
+  agreed: string | undefined,
+): string {
+  if (colours.length === 0) return agreed || DEFAULT_COLOR;
+  if (colours.length === 1) return colours[0]!.value;
+  const total = colours.reduce((sum, colour) => sum + colour.chars, 0);
+  let offset = 0;
+  const stops = colours.map((colour) => {
+    const from = (offset / total) * 100;
+    offset += colour.chars;
+    const to = (offset / total) * 100;
+    return `${colour.value} ${from.toFixed(2)}% ${to.toFixed(2)}%`;
+  });
+  return `linear-gradient(90deg, ${stops.join(", ")})`;
+}
+
 function swallow(event: { preventDefault: () => void; stopPropagation: () => void }): void {
   event.preventDefault();
   event.stopPropagation();
@@ -196,6 +220,7 @@ function placeOverSelection(
     left: box.left + (rect.left + rect.width / 2) * scale,
     top: box.top + rect.top * scale - GAP_PX,
     styles: readInlineStyle(range, READ_PROPERTIES),
+    colours: readInlineStyleSpread(range, "color"),
   };
 }
 
diff --git a/packages/studio/src/components/editor/inlineTextStyleRange.test.ts b/packages/studio/src/components/editor/inlineTextStyleRange.test.ts
index b377fbccd1..8861ec3227 100644
--- a/packages/studio/src/components/editor/inlineTextStyleRange.test.ts
+++ b/packages/studio/src/components/editor/inlineTextStyleRange.test.ts
@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { applyInlineStyle, readInlineStyle } from "./inlineTextStyleRange";
+import { applyInlineStyle, readInlineStyle, readInlineStyleSpread } from "./inlineTextStyleRange";
 
 afterEach(() => {
   vi.restoreAllMocks();
@@ -555,3 +555,40 @@ describe("applyInlineStyle when something else is painting the glyphs", () => {
     expect(host.innerHTML).not.toContain("-webkit-text-fill-color");
   });
 });
+
+describe("readInlineStyleSpread", () => {
+  it("reports every colour in the selection, in order, with its share", () => {
+    const host = mount(
+      '<span style="color: red">Hello</span><span style="color: lime">world</span>',
+    );
+
+    expect(readInlineStyleSpread(rangeOver(host, 0, 10), "color")).toEqual([
+      { value: "red", chars: 5 },
+      { value: "lime", chars: 5 },
+    ]);
+  });
+
+  it("collapses characters that share a colour into one band", () => {
+    const host = mount('<span style="color: red">He</span><span style="color: red">llo</span>');
+
+    expect(readInlineStyleSpread(rangeOver(host, 0, 5), "color")).toEqual([
+      { value: "red", chars: 5 },
+    ]);
+  });
+
+  it("reports only what the selection covers", () => {
+    const host = mount(
+      '<span style="color: red">Hello</span><span style="color: lime">world</span>',
+    );
+
+    expect(readInlineStyleSpread(rangeOver(host, 6, 10), "color")).toEqual([
+      { value: "lime", chars: 4 },
+    ]);
+  });
+
+  it("is empty when the characters carry no colour of their own", () => {
+    const host = mount("Hello world");
+
+    expect(readInlineStyleSpread(rangeOver(host, 0, 5), "color")).toEqual([]);
+  });
+});
diff --git a/packages/studio/src/components/editor/inlineTextStyleRange.ts b/packages/studio/src/components/editor/inlineTextStyleRange.ts
index 53ab11d75c..6a7ad1023e 100644
--- a/packages/studio/src/components/editor/inlineTextStyleRange.ts
+++ b/packages/studio/src/components/editor/inlineTextStyleRange.ts
@@ -176,26 +176,58 @@ function isTrailingHalf(text: string, offset: number): boolean {
  * agrees about it, which is what a control can honestly display.
  */
 export function readInlineStyle(range: Range, properties: string[]): Record<string, string> {
-  const host = editingHost(range.startContainer);
-  if (!host || !holdsBothEnds(host, range)) return {};
-  const start = offsetOf(host, range.startContainer, range.startOffset);
-  const end = offsetOf(host, range.endContainer, range.endOffset);
-  if (start === null || end === null) return {};
-
-  const covered = charRuns(readRuns(host))
-    .slice(start, Math.max(end, start + 1))
-    .map((entry) => entry.style);
-  if (covered.length === 0) return {};
+  const covered = coveredStyles(range);
+  if (!covered) return {};
 
   const styles: Record<string, string> = {};
   for (const property of properties) {
-    const first = covered[0]?.[property];
+    const first: string | undefined = covered[0]?.[property];
     if (first === undefined) continue;
     if (covered.every((style) => style[property] === first)) styles[property] = first;
   }
   return styles;
 }
 
+/**
+ * What one property looks like across the range, in document order, as runs of
+ * consecutive characters that share a value: `[{ value: "red", chars: 5 },
+ * { value: "lime", chars: 6 }]`.
+ *
+ * `readInlineStyle` above answers "what is this range" and reports nothing when
+ * the range disagrees with itself — right for a toggle, which can only be on or
+ * off. A swatch can show more than one value at once, and showing the default
+ * instead reads as "this text is white" when none of it is.
+ */
+export function readInlineStyleSpread(
+  range: Range,
+  property: string,
+): Array<{ value: string; chars: number }> {
+  const covered = coveredStyles(range);
+  if (!covered) return [];
+  const spread: Array<{ value: string; chars: number }> = [];
+  for (const style of covered) {
+    const value = style[property];
+    if (value === undefined) continue;
+    const last = spread.at(-1);
+    if (last?.value === value) last.chars++;
+    else spread.push({ value, chars: 1 });
+  }
+  return spread;
+}
+
+/** The style of every character the range covers, or null when it covers none. */
+function coveredStyles(range: Range): Array<Record<string, string>> | null {
+  const host = editingHost(range.startContainer);
+  if (!host || !holdsBothEnds(host, range)) return null;
+  const start = offsetOf(host, range.startContainer, range.startOffset);
+  const end = offsetOf(host, range.endContainer, range.endOffset);
+  if (start === null || end === null) return null;
+  const covered = charRuns(readRuns(host))
+    .slice(start, Math.max(end, start + 1))
+    .map((entry) => entry.style);
+  return covered.length > 0 ? covered : null;
+}
+
 /**
  * The element the caret is in: the one made editable, never a span inside it.
  *

From db98a570692d04ee52bb35c87aee83f9679b4ca7 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Sun, 9 Aug 2026 01:56:38 -0400
Subject: [PATCH 2/4] feat(studio): blend the mixed-colour text swatch instead
 of banding it

Bands read as two separate swatches sitting next to each other. Each colour
now sits at the middle of its share and the browser fills between them, so the
control looks like one swatch holding a mixed selection.
---
 .../src/components/editor/InlineTextToolbar.test.tsx |  8 +++-----
 .../src/components/editor/InlineTextToolbar.tsx      | 12 +++++-------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/studio/src/components/editor/InlineTextToolbar.test.tsx b/packages/studio/src/components/editor/InlineTextToolbar.test.tsx
index 8093bd4633..d2bb8b0086 100644
--- a/packages/studio/src/components/editor/InlineTextToolbar.test.tsx
+++ b/packages/studio/src/components/editor/InlineTextToolbar.test.tsx
@@ -200,9 +200,7 @@ describe("InlineTextToolbar", () => {
     selectAll(element);
 
     const swatch = toolbarIn(host)!.querySelector<HTMLElement>("span[aria-hidden]")!;
-    expect(swatch.style.background).toBe(
-      "linear-gradient(90deg, red 0.00% 50.00%, lime 50.00% 100.00%)",
-    );
+    expect(swatch.style.background).toBe("linear-gradient(90deg, red 25.00%, lime 75.00%)");
   });
 
   it("shows a plain swatch when the whole selection is one colour", () => {
@@ -217,7 +215,7 @@ describe("InlineTextToolbar", () => {
 });
 
 describe("swatchBackground", () => {
-  it("shows every colour in the selection, sized by how much text carries it", () => {
+  it("blends every colour in the selection, weighted by how much text carries it", () => {
     expect(
       swatchBackground(
         [
@@ -226,7 +224,7 @@ describe("swatchBackground", () => {
         ],
         undefined,
       ),
-    ).toBe("linear-gradient(90deg, red 0.00% 25.00%, lime 25.00% 100.00%)");
+    ).toBe("linear-gradient(90deg, red 12.50%, lime 62.50%)");
   });
 
   it("stays a plain swatch when the selection is one colour", () => {
diff --git a/packages/studio/src/components/editor/InlineTextToolbar.tsx b/packages/studio/src/components/editor/InlineTextToolbar.tsx
index 505d6609db..caa1c60aef 100644
--- a/packages/studio/src/components/editor/InlineTextToolbar.tsx
+++ b/packages/studio/src/components/editor/InlineTextToolbar.tsx
@@ -131,10 +131,9 @@ export function InlineTextToolbar({
 }
 
 /**
- * The selection's colours, in the proportion they are used: one band per run of
- * characters that share a colour. Hard stops, not a blend — the swatch is
- * reporting the colours that are there, and a fade would draw colours that are
- * not. A selection with one colour is a plain swatch, as before.
+ * The selection's colours blended left to right, each sitting at the middle of
+ * the share of characters that carry it. A selection with one colour is a plain
+ * swatch, as before.
  */
 export function swatchBackground(
   colours: Array<{ value: string; chars: number }>,
@@ -145,10 +144,9 @@ export function swatchBackground(
   const total = colours.reduce((sum, colour) => sum + colour.chars, 0);
   let offset = 0;
   const stops = colours.map((colour) => {
-    const from = (offset / total) * 100;
+    const middle = ((offset + colour.chars / 2) / total) * 100;
     offset += colour.chars;
-    const to = (offset / total) * 100;
-    return `${colour.value} ${from.toFixed(2)}% ${to.toFixed(2)}%`;
+    return `${colour.value} ${middle.toFixed(2)}%`;
   });
   return `linear-gradient(90deg, ${stops.join(", ")})`;
 }

From 0c76311d8214e2d1a5a1659fab4172908c6899b6 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Sun, 9 Aug 2026 02:06:13 -0400
Subject: [PATCH 3/4] fix(studio): keep whitespace out of the text colour
 swatch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Colouring a whole element and then recolouring one word inside it leaves the
spaces around that word carrying the first colour. The swatch counted them, so
a red word inside green text drew a sliver of green, then red, then green —
the element's colour appearing at an edge where no glyph is painted in it.

Whitespace paints nothing, so it no longer contributes a colour. The swatch
shows the colours the glyphs are actually drawn in, in the order they appear.
---
 .../editor/inlineTextStyleRange.test.ts       | 16 +++++++++
 .../components/editor/inlineTextStyleRange.ts | 33 +++++++++++++------
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/packages/studio/src/components/editor/inlineTextStyleRange.test.ts b/packages/studio/src/components/editor/inlineTextStyleRange.test.ts
index 8861ec3227..568689efa8 100644
--- a/packages/studio/src/components/editor/inlineTextStyleRange.test.ts
+++ b/packages/studio/src/components/editor/inlineTextStyleRange.test.ts
@@ -586,6 +586,22 @@ describe("readInlineStyleSpread", () => {
     ]);
   });
 
+  it("ignores whitespace, which shows no colour at all", () => {
+    // Colour the whole element, then recolour one word: the whitespace around it
+    // keeps the first colour. It paints no glyph, so counting it puts a band of a
+    // colour nothing on screen is painted in at the edge of the swatch.
+    const host = mount(
+      '<span style="color: lime"> </span>' +
+        '<span style="color: red">Hello</span>' +
+        '<span style="color: lime"> world</span>',
+    );
+
+    expect(readInlineStyleSpread(rangeOver(host, 0, 12), "color")).toEqual([
+      { value: "red", chars: 5 },
+      { value: "lime", chars: 5 },
+    ]);
+  });
+
   it("is empty when the characters carry no colour of their own", () => {
     const host = mount("Hello world");
 
diff --git a/packages/studio/src/components/editor/inlineTextStyleRange.ts b/packages/studio/src/components/editor/inlineTextStyleRange.ts
index 6a7ad1023e..1105f24219 100644
--- a/packages/studio/src/components/editor/inlineTextStyleRange.ts
+++ b/packages/studio/src/components/editor/inlineTextStyleRange.ts
@@ -176,8 +176,9 @@ function isTrailingHalf(text: string, offset: number): boolean {
  * agrees about it, which is what a control can honestly display.
  */
 export function readInlineStyle(range: Range, properties: string[]): Record<string, string> {
-  const covered = coveredStyles(range);
-  if (!covered) return {};
+  const chars = coveredChars(range);
+  if (!chars) return {};
+  const covered = chars.map((entry) => entry.style);
 
   const styles: Record<string, string> = {};
   for (const property of properties) {
@@ -202,10 +203,15 @@ export function readInlineStyleSpread(
   range: Range,
   property: string,
 ): Array<{ value: string; chars: number }> {
-  const covered = coveredStyles(range);
+  const covered = coveredChars(range);
   if (!covered) return [];
   const spread: Array<{ value: string; chars: number }> = [];
-  for (const style of covered) {
+  for (const { char, style } of covered) {
+    // A space paints nothing, so the colour it inherits is not a colour anyone
+    // can see. Counting it puts a band of the element's own colour in the swatch
+    // for text that shows none of it — the stray edge on a selection that just
+    // happens to start or end next to a space.
+    if (!char.trim()) continue;
     const value = style[property];
     if (value === undefined) continue;
     const last = spread.at(-1);
@@ -215,8 +221,8 @@ export function readInlineStyleSpread(
   return spread;
 }
 
-/** The style of every character the range covers, or null when it covers none. */
-function coveredStyles(range: Range): Array<Record<string, string>> | null {
+/** Every character the range covers with its style, or null when it covers none. */
+function coveredChars(range: Range): Array<{ char: string; style: Record<string, string> }> | null {
   const host = editingHost(range.startContainer);
   if (!host || !holdsBothEnds(host, range)) return null;
   const start = offsetOf(host, range.startContainer, range.startOffset);
@@ -224,7 +230,7 @@ function coveredStyles(range: Range): Array<Record<string, string>> | null {
   if (start === null || end === null) return null;
   const covered = charRuns(readRuns(host))
     .slice(start, Math.max(end, start + 1))
-    .map((entry) => entry.style);
+    .map((entry) => ({ char: entry.char, style: entry.style }));
   return covered.length > 0 ? covered : null;
 }
 
@@ -306,11 +312,18 @@ function ownStyle(element: HTMLElement): Record<string, string> {
 }
 
 /** One entry per character, which is the easiest thing to slice and compare. */
-function charRuns(runs: StyledRun[]): Array<Omit<StyledRun, "text">> {
-  const perChar: Array<Omit<StyledRun, "text">> = [];
+function charRuns(runs: StyledRun[]): Array<Omit<StyledRun, "text"> & { char: string }> {
+  const perChar: Array<Omit<StyledRun, "text"> & { char: string }> = [];
   for (const run of runs) {
+    // By UTF-16 unit, not code point: `restyle` indexes this list with selection
+    // offsets, which count units, so an emoji has to stay two entries long.
     for (let index = 0; index < run.text.length; index += 1) {
-      perChar.push({ style: run.style, origin: run.origin, identity: run.identity });
+      perChar.push({
+        char: run.text[index] ?? "",
+        style: run.style,
+        origin: run.origin,
+        identity: run.identity,
+      });
     }
   }
   return perChar;

From f526ef62199a1cc1e9f0fd8dae7138e4d79ae6b6 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Sun, 9 Aug 2026 02:12:32 -0400
Subject: [PATCH 4/4] fix(studio): stop the colour swatch repeating its
 gradient under the border

The swatch grew a green edge on its red side and a red edge on its green side.
`background` maps a gradient to the padding box and then repeats it to fill the
border box, so the 1px ring showed the strip either side of the tile: the
gradient's end colour along the leading edge, its start colour along the
trailing one, both read as a mirrored copy of the swatch.

Painting from the border box instead gives the ring the colour the glyphs next
to it are actually drawn in.
---
 .../src/components/editor/InlineTextToolbar.test.tsx   |  7 +++++--
 .../studio/src/components/editor/InlineTextToolbar.tsx | 10 +++++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/studio/src/components/editor/InlineTextToolbar.test.tsx b/packages/studio/src/components/editor/InlineTextToolbar.test.tsx
index d2bb8b0086..c7a70106e6 100644
--- a/packages/studio/src/components/editor/InlineTextToolbar.test.tsx
+++ b/packages/studio/src/components/editor/InlineTextToolbar.test.tsx
@@ -200,7 +200,10 @@ describe("InlineTextToolbar", () => {
     selectAll(element);
 
     const swatch = toolbarIn(host)!.querySelector<HTMLElement>("span[aria-hidden]")!;
-    expect(swatch.style.background).toBe("linear-gradient(90deg, red 25.00%, lime 75.00%)");
+    expect(swatch.style.backgroundImage).toBe("linear-gradient(90deg, red 25.00%, lime 75.00%)");
+    // Without this the gradient repeats under the border, painting the end
+    // colour along the leading edge and the start colour along the trailing one.
+    expect(swatch.style.backgroundOrigin).toBe("border-box");
   });
 
   it("shows a plain swatch when the whole selection is one colour", () => {
@@ -210,7 +213,7 @@ describe("InlineTextToolbar", () => {
     selectAll(element);
 
     const swatch = toolbarIn(host)!.querySelector<HTMLElement>("span[aria-hidden]")!;
-    expect(swatch.style.background).toBe("red");
+    expect(swatch.style.backgroundColor).toBe("red");
   });
 });
 
diff --git a/packages/studio/src/components/editor/InlineTextToolbar.tsx b/packages/studio/src/components/editor/InlineTextToolbar.tsx
index caa1c60aef..04f5e9283e 100644
--- a/packages/studio/src/components/editor/InlineTextToolbar.tsx
+++ b/packages/studio/src/components/editor/InlineTextToolbar.tsx
@@ -91,7 +91,15 @@ export function InlineTextToolbar({
         <span
           aria-hidden="true"
           className="h-3.5 w-3.5 rounded-full border border-white/25"
-          style={{ background: swatchBackground(placement.colours, styles.color) }}
+          // `background` maps a gradient to the PADDING box and then repeats it
+          // to fill the border box, so the 1px border shows the strip either
+          // side of the tile: the end colour on the left, the start colour on
+          // the right. A red-to-green swatch grew a green edge and a red one.
+          // Set after the shorthand, which resets it.
+          style={{
+            background: swatchBackground(placement.colours, styles.color),
+            backgroundOrigin: "border-box",
+          }}
         />
         {/* `inset-0` is not enough on its own: a colour input carries a
             user-agent minimum width, which wins over the right edge and lets