Wear your lane colour on the main buttons, and make full-width buttons large

[simonhamp]

Your main buttons and the tab underlines are now drawn in your lane's colour, the way the tab bar already was. Full-width buttons that sit on their own are now large, like Sign in with GitHub.

Colour

These buttons wear your lane, light or dark shade:

• Follow on a profile, Follow on a suggestion in an empty log, and Follow back on a follow notification
• Commit in the composer, and Commit in the sheet that both New commit and Quote use
• Reply on a commit
• Send report in the report sheet
• Edit on GitHub and Save color on the Account screen

Save color is drawn in the colour you've picked rather than the one you have, so you see it on a button before you save it. Everything else changes once the save lands.

The underline under the Log's and Notifications' tabs is your colour too, and so is the one under your profile's Commits and Replies, which is still drawn in PHP.

Before devnull has said who you are, all of it stays Commit Blue. Destructive red, the secondary buttons (Following, Unfollow, Sync from GitHub, Sign out and so on) and the black and white Apple and GitHub buttons keep their colours.

This needs NativePHP/mobile-ui#137, which lets a button's variant name a theme token. It's merged into combined/dev-null-app and the lock points at it. Buttons take variant="lane-3" and the like, through Lane::token() and the screens' new $myColour.

Label contrast

Each lane has an on-lane-N token for its label, picked with WCAG 2 contrast, which is what config/native-ui.php asks for:

Lane	Light: white / ink	Label	Dark: white / graphite	Label
0 orange	4.30 / 4.29	white	2.34 / 8.08	graphite
1 green	3.45 / 5.36	ink	2.01 / 9.41	graphite
2 violet	5.82 / 3.17	white	2.66 / 7.10	graphite
3 teal	4.35 / 4.24	white	1.99 / 9.49	graphite
4 rose	5.66 / 3.26	white	3.00 / 6.29	graphite
5 ochre	3.64 / 5.07	ink	1.61 / 11.73	graphite

Orange and teal in light mode are just under 4.5:1 with either label. I kept white there and left the lane colours alone, since they're people's identity on the graph. If that needs to pass AA, the fix is a slightly darker button shade for those two.

Size

size="lg" on the full-width buttons that stand alone: everything on the Account screen (Edit on GitHub, Sync from GitHub, Save color, Sign in with Apple, Unlink Apple ID, Your devices on dev-null.sh, Sign out, Delete account), and Send report and Done in the report sheet. Buttons in a row keep their size: Commit in the composer and the commit sheet, Follow, Reply.

What to check

• The new commits pill and radio buttons are still Commit Blue. The pill isn't a button and DESIGN.md calls it Commit Blue, so I left it. Say if it should follow your lane too.
• Rebased onto main after Compose in a sheet from the nav bar, where you are in the log #3, Put a commit's save, link, report and delete in one More menu #7 and Put the new commits pill under the composer, and pin it when you scroll #9. The commit sheet's send button is Compose in a sheet from the nav bar, where you are in the log #3's sheet-commit now, with your colour, and the report form opens from Put a commit's save, link, report and delete in one More menu #7's menu.

Verified

• tests/Feature/Screens/LaneButtonsTest.php covers each button above in two lanes (green with an ink label, rose with white), the underlines on all three screens, Save color following the picked lane, the other buttons keeping their variants, and the sizes. tests/Unit/Devnull/LaneTest.php checks each on-lane label is the more readable of white and ink. Pint clean.
• On an iPhone 17 Pro simulator (iOS 27) against the timeline API, signed in through Sign in with GitHub, in light and dark. I changed local_dev's lane from green to rose with the colour picker, checked teal and ochre without saving, then put it back to green.
• After the rebase, on a fresh simulator, with local_dev on orange: the Log underline, Commit in the New commit and Quote sheets, and the Account screen, in light and dark. 671 tests pass.

Account screen, green then rose, light and dark:

Save color before picking, after picking rose, and after saving:

Tab underlines on the Log, Notifications and Profile:

Commit, Send report and the quote's Commit, light and dark:

Save color's label on teal and ochre, dark and light:

🤖 Generated with Claude Code