Lift the liquid glass buttons off the ButtonSize axis - #3138
Merged
Conversation
StylianosGakis
marked this pull request as ready for review
September 7, 2026 14:20
StylianosGakis
force-pushed
the
design-system/extract-glass-button
branch
from
September 7, 2026 14:24
e88fced to
f3bf5d9
Compare
StylianosGakis
force-pushed
the
design-system/glass-button-tokens-rename
branch
from
September 7, 2026 14:24
c99aa17 to
d38b2ab
Compare
panasetskaya
reviewed
Sep 7, 2026
| enum class GlassButtonStyle { | ||
| /** A filled pill with the sheen and drop shadow of the iOS glass material. */ | ||
| RoundedPrimary, | ||
| Primary, |
Contributor
There was a problem hiding this comment.
the only comment now it that this button now that we have all buttons rounded is just a Primary. It's not glass in itself.
StylianosGakis
force-pushed
the
design-system/glass-button-tokens-rename
branch
from
September 7, 2026 15:42
d38b2ab to
8f66e4c
Compare
StylianosGakis
force-pushed
the
design-system/extract-glass-button
branch
from
September 7, 2026 15:42
f3bf5d9 to
f4e1915
Compare
StylianosGakis
force-pushed
the
design-system/glass-button-tokens-rename
branch
from
September 8, 2026 10:41
8f66e4c to
671c93f
Compare
StylianosGakis
force-pushed
the
design-system/extract-glass-button
branch
from
September 8, 2026 10:41
f4e1915 to
794c0bf
Compare
Base automatically changed from
design-system/glass-button-tokens-rename
to
develop
September 8, 2026 11:20
RoundedPrimary and RoundedLiquidGlass leave ButtonStyle for a new
LiquidGlassButtonStyle { Tinted, Regular }, rendered by a new
HedvigLiquidGlassButton that takes no ButtonSize. Both funnel into a
shared ButtonImpl that receives Style and Size already resolved, so
sizeIn() goes away and a style can no longer reach in and change the
metrics a size asked for.
This mirrors Figma, which models both as one component, 'Button - Liquid
Glass - Text' (node 1:6724), with a boolean Tinted variant and a single
fixed size. Tinted is the 'Make a claim' pill: same colors as
ButtonStyle.Primary at every state, distinguished only by the drop shadow
that Figma puts on both variants.
'Liquid glass at Medium' is now unexpressible rather than silently
falling back to standard padding. The showcase was rendering those bogus
combinations; the glass buttons now get their own row.
StylianosGakis
force-pushed
the
design-system/extract-glass-button
branch
from
September 8, 2026 12:16
794c0bf to
7dc5c76
Compare
StylianosGakis
marked this pull request as draft
September 9, 2026 08:04
StylianosGakis
marked this pull request as ready for review
September 9, 2026 08:04
panasetskaya
approved these changes
Sep 9, 2026
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
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.
Extract the glass button outside of the entire rest of the button system because it does not respect the multiple-size scenario anyway and we had to do if-checks for the glass scenario to adjust the size of the button due to this fact. We had code like
which felt wrong so I figured might as well take that special case out since we only have one size in the app for now. If we get more such buttons we can consider bringing it back into the same size system
🤖 AI description:
📄 The button seam — visual walkthrough of the final API, the size scale, and the Figma mapping.
sizeIn(style)let aButtonStylereach across and change the metrics aButtonSizeasked for, gated onthis == ButtonSize.Large. SoRoundedPrimaryatMediumsilently rendered with standard Medium padding: no error, no warning. Nothing hit it today (all three call sites areLarge), butdesign-showcasewas rendering the bogus combinations.RoundedPrimary/RoundedLiquidGlassleaveButtonStyleforLiquidGlassButtonStyle { Tinted, Regular }.HedvigLiquidGlassButton, which takes noButtonSize.ButtonImplreceivingStyleandSizealready resolved, so the axes can't cross.sizeIn()is deleted.The misuse is now a compile error, not a silent fallback. Three probes against the new API:
The two enums are disjoint,
HedvigLiquidGlassButtonhas no size parameter, andSizeis a private sealed interface soSize.LiquidGlassisn't nameable outsideButton.kt. (Modifier.liquidGlassstays public forToolbarIcons, so a glass material can still be hand-applied to any button — but that's explicit, and nothing gets silently substituted.)Naming, following @panasetskaya's review comment. She was right that
Primaryisn't glass: it resolves to the same nine color tokens asButtonStyle.Primaryat every state. But the Figma file settles what these actually are. Make a claim and Help & support are two instances of one component with a booleanTintedvariant, and both BG children carry the same drop shadow,0px 8px 40px rgba(0,0,0,0.12), which is exactly ourglassDropShadow. So they are a pair, design calls the pair liquid glass, and the code now says the same.Metrics check out against Figma: fill
#121212, 20dp horizontal padding, 48dp height (12 + 24 + 12), full corner radius.Verified on a Pixel 6 Pro: home action row renders all three buttons correctly, and the showcase shows the six remaining styles per size plus the Glass row.