Refine shared Liquid Glass and headers for iOS 27

src/styles/components/ion-button.scss

@@ -13,7 +13,7 @@ $scaleup-large: 1.12;
 $scaleup-large-icon-only: 1.22;
 
 @mixin theme-buttons {
-  @include api.glass-background;
+  @include api.glass-background($shadow-opacity: 0.08);
   border-radius: 25px;
   overflow: hidden;
   &:not(:has(.ion-activated)):hover {
@@ -318,7 +318,8 @@ $scaleup-large-icon-only: 1.22;
     --background-activated: transparent;
     @if not $is-back-button {
       --box-shadow:
-        inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2), 0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);
+        inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),
+        0 0.5px 1px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.08);
     }
 
     &:not(.button-has-icon-only):not(.back-button-has-icon-only) {
@@ -328,7 +329,7 @@ $scaleup-large-icon-only: 1.22;
     }
 
     &::part(native) {
-      @include api.glass-background($include-background: false, $include-box-shadow: $is-back-button);
+      @include api.glass-background($include-background: false, $include-box-shadow: $is-back-button, $shadow-opacity: 0.08);
     }
 
     &:not(.button-disabled) {

src/styles/components/ion-searchbar.scss

@@ -17,6 +17,7 @@ ion-searchbar.ios:not(.ios26-disabled):not(.searchbar-classic) {
 
   ion-icon.searchbar-search-icon {
     inset-inline-start: 12px;
+    opacity: 1;
   }
 
   .searchbar-input-container {
@@ -26,7 +27,7 @@ ion-searchbar.ios:not(.ios26-disabled):not(.searchbar-classic) {
     input.searchbar-input {
       min-height: 44px;
       @include api.glass-background;
-      border-radius: 20px;
+      border-radius: 22px;
       padding-inline-start: 2.4rem;
     }
     .searchbar-clear-button {

src/styles/components/ion-toggle.scss

@@ -21,6 +21,7 @@ ion-toggle.ios:not(.ios26-disabled) {
   --handle-height: 24px;
   --handle-max-width: none;
   --handle-max-height: none;
+  --handle-box-shadow: none;
   &.ion-color {
     --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);
   }

src/styles/components/ion-toolbar.scss

@@ -25,6 +25,14 @@ ion-toolbar.ios:not(.toolbar-title-large):not(.ios26-disabled):not(:has(ion-segm
   --min-height: 68px;
 }
 
+ion-header.ios:not(.ios26-disabled):not(.header-collapse-condense):not(:where(ion-modal *))
+  > ion-toolbar.ios:not(.ios26-disabled):not(.toolbar-title-large):not(.toolbar-searchbar):not(
+    :has(ion-segment.segment-expand)
+  ):first-of-type {
+  padding-top: max(calc(var(--ion-safe-area-top) - 10px), 6px);
+  --min-height: 64px;
+}
+
 ion-toolbar.ios:not(.ios26-disabled).toolbar-searchbar {
   *[slot='start'],
   *[slot='end'] {

src/styles/utils/api.scss

@@ -1,3 +1,19 @@
+$_glass-surface: linear-gradient(
+  180deg,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.011) 44%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.009) 50%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 58%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%
+);
+
 @mixin glass-background(
   $opacity: 0.72,
   $blur: 2px,
@@ -6,22 +22,54 @@
   $border-color-rgb: var(--ios26-glass-border-color-rgb),
   $include-background: true,
   $include-box-shadow: true,
-  $include-border: true
+  $include-border: true,
+  $shadow-opacity: 0.18
 ) {
+  $surface: linear-gradient(transparent, transparent);
+  @if $include-background {
+    $surface: $_glass-surface;
+  }
   @if $include-background {
-    background: rgba($background-rgb, $opacity);
+    background: $_glass-surface, rgba($background-rgb, $opacity);
   }
   backdrop-filter: blur($blur) saturate($saturate);
   @if $include-box-shadow {
     box-shadow:
-      inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),
-      0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);
+      inset 0 0 0 0.5px rgba($border-color-rgb, 0.6),
+      inset 0 0 1px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.18),
+      inset 0 1px 2px 0 rgba($border-color-rgb, 0.8),
+      inset 0 -1px 2px 0 rgba($border-color-rgb, 0.5),
+      0 0.5px 1px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), $shadow-opacity);
   }
   @if $include-border {
-    border-top: 0.5px solid rgba($border-color-rgb, 1);
-    border-right: 0.5px solid rgba($border-color-rgb, 0.8);
-    border-bottom: 0.5px solid rgba($border-color-rgb, 1);
-    border-left: 0.5px solid rgba($border-color-rgb, 0.6);
+    border: 0.5px solid;
+    border-top-color: rgba($border-color-rgb, 1);
+    border-right-color: rgba($border-color-rgb, 0.8);
+    border-bottom-color: rgba($border-color-rgb, 1);
+    border-left-color: rgba($border-color-rgb, 0.6);
+    @supports (color: color-mix(in srgb, white, black)) {
+      border-top-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%);
+      border-right-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 32%);
+      border-bottom-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%);
+      border-left-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%);
+    }
+    @supports (background-clip: border-area) and (color: color-mix(in srgb, white, black)) {
+      border-color: transparent;
+      background-image:
+        linear-gradient(
+          180deg,
+          color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%) 0%,
+          color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 18%) 7%,
+          color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 29%) 25%,
+          color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 36%) 50%,
+          color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%) 75%,
+          color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 18%) 93%,
+          color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%) 100%
+        ),
+        $surface;
+      background-origin: border-box, padding-box;
+      background-clip: border-area, padding-box;
+    }
   }
 
   // Hardware acceleration optimization for glass effects
@@ -33,8 +81,10 @@
 
 @mixin glass-background-button-activated {
   box-shadow:
-    inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),
-    0 0 8px -4px rgba(var(--ios26-glass-box-shadow-color-rgb), 0.92);
+    inset 0 0 0 0.5px rgba(var(--ios26-glass-border-color-rgb), 0.95),
+    inset 0 1px 3px 0 rgba(var(--ios26-glass-border-color-rgb), 0.85),
+    inset 0 -1px 2px 0 rgba(var(--ios26-glass-border-color-rgb), 0.6),
+    0 0.5px 1px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.12);
 }
 
 @mixin glass-background-button-activated-dark(
@@ -55,6 +105,9 @@
   border-right: 0.8px solid rgba(var(--ios26-button-color-selected-rgb), 0.4);
   border-bottom: 0.8px solid rgba(var(--ios26-button-color-selected-rgb), 0.8);
   border-left: 0.8px solid rgba(var(--ios26-button-color-selected-rgb), 0.6);
+  background-image: none;
+  background-clip: border-box;
+  background-origin: padding-box;
 
   // Hardware acceleration optimization for glass effects
   transform: translateZ(0);
@@ -73,14 +126,14 @@
 
 @mixin glass-background-overlay-button {
   transition: background 0.2s ease;
-  background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);
+  background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
   &.ion-activated {
     background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.022);
   }
 }
 
 @mixin glass-background-overlay-button-variable {
-  --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);
+  --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
   &.ion-activated {
     --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.022);
   }

src/styles/utils/translucent.scss

@@ -15,28 +15,44 @@ ion-footer.ios:not(.ios26-disabled).footer-translucent {
       --opacity: 0;
     }
     ion-title {
-      filter: blur(0);
       transform: translateY(0);
     }
   }
 }
 
+ion-header.ios:not(.ios26-disabled).header-translucent:not(.header-collapse-condense) {
+  &:has(> ion-toolbar.ios:not(.ios26-disabled) > *)::before {
+    height: 100%;
+    background: rgba(var(--ion-color-base-rgb, var(--ios26-content-box-shadow-rgb)), calc(0.2 * var(--opacity-scale, 1)));
+    backdrop-filter: blur(8px);
+  }
+
+  &:not(.ion-no-border) > ion-toolbar.ios:not(.ios26-disabled):has(> *):last-of-type {
+    --border-width: 0 0 0.5px;
+    --border-color: var(--ion-toolbar-border-color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08));
+    &::part(background) {
+      --opacity: 1;
+    }
+  }
+}
+
 ion-header.ios:not(.ios26-disabled).header-collapse-main ion-toolbar.in-toolbar ion-title {
-  transition: all 0.5s ease-in-out;
+  transition:
+    opacity 0.5s ease-in-out,
+    color 0.5s ease-in-out,
+    text-shadow 0.5s ease-in-out,
+    transform 0.5s ease-in-out;
 }
 
-ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
-ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense)
-  ion-toolbar.in-toolbar
-  ion-buttons.buttons-collapse {
-  filter: blur(2px);
+ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title {
+  color: transparent;
+  text-shadow: 0 0 1px var(--ion-color-base, var(--ion-toolbar-color, var(--ion-text-color, #000)));
   transform: translateY(8px);
 }
 
 ion-header.ios:not(.ios26-disabled):not(.header-transitioning).header-translucent::before,
 ion-header.ios:not(.ios26-disabled):not(.header-transitioning).header-translucent::after,
-ion-content.ios:not(.ios26-disabled).content-fullscreen::part(background)::before,
-ion-content.ios:not(.ios26-disabled).content-fullscreen::part(background)::after {
+ion-content.ios:not(.ios26-disabled).content-fullscreen::part(background)::before {
   content: '';
   position: absolute;
   width: 100%;
@@ -63,32 +79,16 @@ ion-header.ios:not(.ios26-disabled).header-translucent::after {
 }
 
 /**
- * ここから下は、ion-content::before/afterが content:'' を持たない限り表示されない
+ * ここから下は、ion-content::beforeが content:'' を持たない限り表示されない
  */
 .ion-page:has(> ion-header.header-translucent) > ion-content.content-fullscreen::part(background)::before {
   z-index: 2;
   top: 0;
   height: var(--offset-top, 0px);
   background: linear-gradient(
     in oklab,
-    rgba(var(--ios26-content-box-shadow-rgb), 0.5) 20%,
+    rgba(var(--ios26-content-box-shadow-rgb), 0.5) 0%,
+    rgba(var(--ios26-content-box-shadow-rgb), 0.2) 50%,
     rgba(var(--ios26-content-box-shadow-rgb), 0) 100%
   );
-  box-shadow: inset 0 var(--offset-top, 0px) 16px -32px rgba(var(--ios26-content-box-shadow-rgb), 0.6);
-}
-
-ion-content.content-fullscreen::part(background)::after {
-  z-index: 2;
-  bottom: 0;
-  height: calc(60px + var(--ios26-floating-safe-area-bottom));
-  background: linear-gradient(
-    in oklab,
-    rgba(var(--ios26-content-box-shadow-rgb), 0) 0%,
-    rgba(var(--ios26-content-box-shadow-rgb), 0.8) 50%,
-    rgba(var(--ios26-content-box-shadow-rgb), 0.8) 100%
-  );
-}
-
-.ion-page:has(> ion-footer:not(.footer-translucent)) ion-content.content-fullscreen::part(background)::after {
-  content: none;
 }