Repository navigation
[Liquid Glass Follow Up][Design] Liquid Glass FABs #104198
Description
The new iOS tab bar is Liquid Glass, but the two floating buttons above it ((+) and Search) are still solid colored. Design agreed they look out of place next to the glass bar.
What to Do:
- Experiment with both floating buttons rendered in Liquid Glass, keeping a solid background behind the icon.
- Also try the alternative from design: (+) in the app background color with a shadow.
Context:
- (comment)
Activity
melvin-bot commentedon Oct 16, 2026
Current assignee @shawnborton is eligible for the Design assigner, not assigning anyone new.
[-][Liquid Glass Follow Up] Liquid Glass FABs[/-][+][Design][Liquid Glass Follow Ups] Liquid Glass FABs[/+][-][Design][Liquid Glass Follow Ups] Liquid Glass FABs[/-][+][Liquid Glass Follow Up][Design] Liquid Glass FABs[/+]grgia commentedon Oct 19, 2026
@shawnborton when you get a chance, would you make a decision here so we can wrap up these follow ups quickly?
shawnborton commentedon Oct 19, 2026
Apologies! What decision do I need to make? I say let's try what you are quoting above. We basically want a solid color appearance but the edges/strokes of the FABs to have the glassy appearance. I am thinking that mWeb and Android stay as they are today. cc @Expensify/design
dannymcclain commentedon Oct 19, 2026
That sounds like a good plan to me!
shawnborton commentedon Oct 22, 2026
Not overdue, we're workin' on it!
21 remaining items
sumo-slonik commentedon Oct 27, 2026
Thanks for running the ad hoc! It’s up in the PR now, so feel free to give it a try and let me know what you think!
shawnborton commentedon Oct 27, 2026
Curious what @dannymcclain and @dubielzyk-expensify think here. It feels okay, but the green button feels a bit washed out to me still. I wonder what happens if we use our green500 color instead of green400, but use the same 80% tint? Maybe that will make it feel darker like our normal green400? I don't want to be a blocker or anything so I am happy to go with it as-is, but that was my gut reaction at least.
sumo-slonik commentedon Oct 27, 2026
I’ll make that adjustment, and once I’m done, we can run another ad hoc and see how it looks.
shawnborton commentedon Oct 27, 2026
Sounds good, feel free to share a quick screenshot here too.
sumo-slonik commentedon Oct 27, 2026
@shawnborton I've pushed the change to #104989: the camera button's glass is now tinted with
green500at 80% instead ofgreen400.It does look darker, but now it stands out from the other green buttons in the app. For example, on the empty Insights page the camera button renders as roughly
#32BF83, while the "Create expense" button right above it is our standardgreen400(#03D47C). Next to each other, the camera button reads as a slightly muted, grayer green rather than the brand green.If you'd like, I can experiment with the tint (base color and opacity) to get the glass as close as possible to the green we use everywhere else in the app, then share a few options side by side. Let me know what you think!
Screen.Recording.2026-10-27.at.12.01.42.mov
shawnborton commentedon Oct 27, 2026
Okay cool, let's keep experimenting quickly. For instance, how does
#02C372at 80% look?sumo-slonik commentedon Oct 27, 2026
@shawnborton I tried
#02C372at 80%. It's still a bit washed out: on the empty Insights page it renders as roughly#34CC8Bin light mode and#09A963in dark mode, while the "Create expense" button next to it is#03D47C.I also tested a few more options and put them side by side next to the "Create expense" button, in light and dark mode:
green500@ 80% (current PR)#32BF83#079B5Bgreen400@ 80%#34DA93#0AB76B#02C372@ 80%#34CC8B#09A963green400@ 90%#1CD687#06C675green400@ 95%#10D481#05CE79green400@ 100%#03D27A#04D57DMy suggestion is
green400at 90% as a compromise: it's much closer to our green than 80% in both light and dark mode, while still letting some glass show through. What do you think?shawnborton commentedon Oct 27, 2026
Okay cool, thanks for exploring. Let's pause here and wait for @Expensify/design to chime in. I think I agree that green400 @ 90% is a good compromise.
dannymcclain commentedon Oct 27, 2026
Yeah I think green400 at 90% looks pretty good. TBH I think the 3 right options all look good (green400 @ 90, 95, and 100%). I realize we miss out on some of the glass effect at the higher opacities, but I don't really mind that.
sumo-slonik commentedon Oct 27, 2026
Great, so can we go with green400 at 90%?
shawnborton commentedon Oct 27, 2026
Let's get a final confirmation from @dubielzyk-expensify but I think Danny and I are aligned at least 🤝
dubielzyk-expensify commentedon Oct 28, 2026
All the variations from green400 above 90% look good to me, but hard to tell fully without seeing it on device. Aligned with the designers