feat(studio): show every colour of a mixed selection in the swatch - #3144
Draft
miguel-heygen wants to merge 4 commits into
Draft
feat(studio): show every colour of a mixed selection in the swatch#3144miguel-heygen wants to merge 4 commits into
miguel-heygen wants to merge 4 commits into
Conversation
miguel-heygen
force-pushed
the
stack/mixed-colour-swatch
branch
from
August 9, 2026 23:07
f526ef6 to
e4b84de
Compare
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.
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.
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.
…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.
miguel-heygen
force-pushed
the
stack/mixed-colour-swatch
branch
from
August 10, 2026 00:01
e4b84de to
905f5a9
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The text colour swatch shows every colour in the selection, blended, instead of falling back to white.
Why
The toolbar reports a property only when the whole selection agrees on it. That is right for bold and italic, where 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.
How
The swatch reads the colours as they run through the selection and blends them left to right, each sitting at the middle of the share of characters that carry it. Whitespace paints no glyph, so it contributes no colour — otherwise recolouring one word inside coloured text drew a stray band of the surrounding colour at the edge.
Painting is anchored to the border box. A gradient maps to the padding box and then repeats to fill the border box, so the 1px border was showing the gradient's opposite end on each side.
Test plan
Top of the stack. Its tip reproduces #3077 exactly: of the 86 files that branch changed, none differ.
Part of a stack re-cutting #3077, which stays open as the reference for the whole tree. The preview fixes land first; this is the feature half.