From e2183885a3f6ad62f8dad43ea41ff9d8fbeb803d Mon Sep 17 00:00:00 2001
From: Adam Masiarek <masiarek@gmail.com>
Date: Sat, 15 Aug 2026 14:10:47 -0400
Subject: [PATCH] fix(ballot): give the ballot bubbles an explicit text colour
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The score digits inside the ballot bubbles never had a colour set. Not in
BubbleGrid.tsx (its fontSX is font-size only), not in index.css (.circle
sets background and border), and not by MUI — these are native <button>
elements, not MUI Buttons.

A <button> does not inherit .ballot's `color: var(--brand-black)`. It takes
the UA stylesheet's ButtonText, which resolves to black on desktop and
Android — masking the omission — and to the system tint on iOS WebKit,
where the digits came out blue. That is #1272.

Two details from the screenshots that pin it down: the header star digits
in the same picture are black, and they are the only ballot digits not
inside a button; and the blue appears inside FILLED bubbles too, where the
digit is meant to vanish against the black fill. That is the "in some
cases" in the report — the same wrong colour, invisible everywhere else.

Stating the colour makes every platform render what desktop already
rendered. Verified in Chromium: the computed colour of both plain and
filled bubbles is unchanged at rgb(0, 0, 0), so this is a no-op where it
already worked.

Not verified on an iPhone — I don't have one, and Playwright's WebKit isn't
installed here. The diagnosis is from the markup and the CSS; if the blue
survives this on a device, the cause is elsewhere.
---
 packages/frontend/src/index.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index 68be5634b..8776d4ae1 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -315,6 +315,17 @@ code {
   cursor: pointer;
 }
 
+/* A <button> does not inherit .ballot's color — it takes the UA stylesheet's
+   ButtonText. That is black on desktop and Android, which is why nobody set a
+   colour here, but on iOS WebKit it resolves to the system tint and the score
+   digits came out blue (#1272) — including inside filled bubbles, where the
+   digit is meant to disappear against the black fill. Stating the colour makes
+   every platform render what desktop already did. */
+.circle,
+.oval {
+  color: var(--brand-black);
+}
+
 .circle.filled,
 .oval.filled {
   background-color: black;