fix: align iOS 27 glass button and FAB pressed appearance - #141
Conversation
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| &::part(native) { | ||
| @include api.glass-background-button-activated-dark($include-background: false); | ||
| } |
There was a problem hiding this comment.
🟡 ダークモードで押下中のFABが拡大されない
ダークテーマでは、このmixinが後からtransform: translateZ(0)を出力し、通常テーマのscaleを上書きします。そのため、FABの押下時だけ拡大しません。
Learn more
glass-background-button-activated-dark は背景や枠線だけでなく、transform: translateZ(0) も生成します。このルールは通常テーマの 押下時scale と同じ要素、同じ詳細度に適用され、ダークテーマ側が後勝ちします。結果として背景は切り替わりますが、scale成分が失われます。
Example: 通常サイズのFABをダークモードで押すと、通常テーマが設定した scale(1.38) translateZ(0) は translateZ(0) に置換されます。ライトモードでは1.38倍に拡大しますが、ダークモードでは等倍のままです。
Recommended fix: ダーク用mixinからtransformを分離するか、FAB向け呼び出しではtransformを生成しないオプションを追加してください。あるいは、ダーク側でsmall/default/largeそれぞれのscaleを保持したtransformを再指定してください。
Was this helpful? React with 👍 or 👎 to provide feedback.
| &::part(native) { | ||
| @include api.glass-background-button-activated; | ||
| opacity: 1; | ||
| color: var(--color); | ||
| } |
There was a problem hiding this comment.
🟡 システム設定のダークモードで押下ボタンがライト配色になる
通常テーマの押下ルールはダーク側より詳細度が高く、新しい背景色、枠線、影を上書きさせません。system版とalways版では、押下ボタンがライト用ガラス配色になります。
Learn more
通常テーマのセレクターには .ios があり、クラス相当の詳細度がダーク側より1つ高くなります。そのため、後から読み込まれる ダーク用mixin の background-color、border、box-shadowでも、この追加ルールを上書きできません。.ion-palette-darkで囲むclass版は親クラスで詳細度が増えますが、system版とalways版にはその親がありません。
Example: ionic-theme-ios26.scss と ionic-theme-ios26-dark-system.scss を読み込み、OSをダーク設定にしてdefault fillのボタンを押します。ダーク側はselected色の56%背景を指定しますが、通常側のglass背景96%と通常側の輪郭・影が勝ちます。
Recommended fix: system版とalways版でもダーク側のセレクターが通常側以上の詳細度になるよう、theme-dark-buttonの対象に同じ.ios条件を追加してください。FABのように同一要素へ競合するプロパティについては、生成CSSの詳細度と読み込み順の両方を確認してください。
Was this helpful? React with 👍 or 👎 to provide feedback.
Playwright test results
Details
|
|
📊 Ionic 9 Playwright Test Report View the detailed Ionic 9 report: https://rdlabo-dev.github.io/ionic-theme-ios26/pr-141/ Ionic 8 runs against the same screenshots in a separate matrix job. View both results in the workflow run. |
|
/update-screenshots |
|
✅ Screenshots have been updated successfully! The new screenshots have been committed to this PR. |
npm beta publishedCI passed for the merge commit npm install @rdlabo/ionic-theme-ios26@9.1.0-beta.pr141.sha99b0871f770b |
1 participant
Fix the black-looking glass FAB background and align the pressed appearance of
ion-buttonandion-fab-buttonwith the iOS 27 reference. Both use shared icon-button scale values and pressed glass styling; pressing the back button now fades its glyph without fading the entire glass surface.Preserve the translucent fill, reduce the FAB's outer shadow, and reinforce the pressed contour with lighter top/bottom borders and darker sides. Keep dark-mode pressed styling applied to both components.
Validation:
npm run build, Prettier checks for all five changed SCSS files, andgit diff --checkpassed.