Skip to content

Show hex colors with a swatch, as the web does - #89

Merged
simonhamp merged 3 commits into
NativePHP:mainfrom
sonalidudhia:feat/hex-swatches
Oct 26, 2026
Merged

simonhamp merged 3 commits into
NativePHP:mainfrom
sonalidudhia:feat/hex-swatches

Conversation

@sonalidudhia

@sonalidudhia sonalidudhia commented Oct 26, 2026 •

Copy link
Copy Markdown
Contributor

A hex color in a commit or a remote, like #ff8a4c or #fff, now shows after a square of that color, as on the web since dev-null-sh/dev-null.sh#1064. That PR notes the mobile app doesn't show swatches yet and would need its own copy of the rule, so this is that copy.

  • CommitBody finds colors with the web's rule from colors.ts: 3, 4, 6 or 8 hex digits, where 3 or 4 digits need a letter or a leading zero so #123 stays an issue number while #000 is black. A color is a whole word: it starts a line, follows whitespace or a quoted line's >, and only punctuation may follow it before the next space. Code is blanked out first, so nothing in it counts.
  • Colors are found in the whole body and placed by code-point offset, the way mentions already are, so a color after inline code or a mention lands in the right run.
  • BodyRun gets a color, and commits (log, detail, replies, composer preview) and remotes draw it as a ■ in that color before the value, held to it by a narrow no-break space so they wrap together.
  • The square sets its color for dark mode too. Without that, the paragraph's dark ink drew every square in the ink color.

Tests port the web's cases (issue numbers, whole words, quoted lines, code, URL fragments, 4- and 8-digit values), and a screen test checks the square's light and dark color.

Limitation: a color the same as the background, like #fff in light mode, gets a square you can't see. The web draws a 1px border around its swatch, which a text run can't have. Happy to change the approach if there's a better native primitive for this.

This branch and #88 both touch CommitBody and the body views, so whichever lands second needs a small merge.

Screenshots

The composer preview of a draft, so nothing was posted. iOS only for now: I'll add Android before marking this ready.

composer-preview

iOS light iOS dark Android light Android dark
Before
After
  • No visible change

A hex color in a commit or a remote, like #ff8a4c or #fff, now draws
after a square of that color, as on the web since
dev-null-sh/dev-null.sh#1064. It uses the web's rule: 3, 4, 6 or 8 hex
digits, where 3 or 4 digits need a letter or a leading zero so #123
stays an issue number, as a whole word, and never inside code.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sonalidudhia
sonalidudhia marked this pull request as ready for review October 26, 2026 09:01
simonhamp and others added 2 commits October 26, 2026 12:08
The merge from main brought in the quote splitter from NativePHP#88, which
rebuilds every prose run as plain text. It didn't know about color
runs, so every swatch was lost. Color runs now pass through untouched,
the same as mentions, links and wordmarks.

Also puts back the docblock lines the conflict resolution clipped in
CommitBody and the message body partial.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@simonhamp

Copy link
Copy Markdown
Member

Cool!

@simonhamp
simonhamp merged commit 82dcba8 into NativePHP:main Oct 26, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants