@rdlabo/ionic-theme-ios27 0.1.0-beta.pr153.sha1c3caf4dc12b → 0.1.0

package/src/styles/default-variables.scss

@@ -12,6 +12,8 @@
 :root {
   // Internal native appearance signal; follows the same cascade as the theme.
   --ios27-color-scheme: light;
+  // Destructive overlay actions, independent of the application danger palette.
+  --ios-theme-destructive-color: #ea292d;
   --ios26-floating-safe-area-top: max(10px, var(--ion-safe-area-top, 0px));
   --ios26-floating-safe-area-bottom: max(10px, calc(var(--ion-safe-area-bottom, 0px) - 12px));
 
@@ -24,6 +26,8 @@
   --ios27-button-color-selected-default-rgb: 16, 16, 16;
 
   --ios26-menu-width: 360px;
+  // iPadOS 27 sidebar tint, composited at 96% over the page background.
+  --ios-theme-menu-background-rgb: 225, 230, 240;
 
   /**
    * `--ios26-color-background-rgb` is deprecated.

package/src/styles/utils/_glass.scss

@@ -1,3 +1,63 @@
+$_control-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.024) 44%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 50%,
+  rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 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%
+);
+
+// Shared defaults can be assigned to Ionic's public --box-shadow property.
+@mixin light-shadow($property: box-shadow) {
+  $light: var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb));
+  $shade: var(--ion-text-color-rgb, 0, 0, 0);
+  #{$property}:
+    inset 0 1px 2px rgba($light, 0.25),
+    inset 0 -1px 2px rgba($light, 0.3),
+    0 -0.5px 0 rgba($light, 0.65),
+    0 0.5px 0 rgba($light, 0.65),
+    0 0 0 0.5px rgba($shade, 0.22),
+    0 0.5px 1px rgba($shade, 0.08);
+}
+
+@mixin dark-shadow($property: box-shadow) {
+  $light: var(--ion-text-color-rgb, 255, 255, 255);
+  #{$property}:
+    inset 0 0.5px 1px rgba($light, 0.2),
+    inset 0 -0.5px 1px rgba($light, 0.2);
+  @supports (background-clip: border-area) {
+    #{$property}: none;
+  }
+}
+
+@mixin light-rim($shadow: null) {
+  $light: var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb));
+  @if $shadow == null {
+    @include light-shadow;
+  } @else {
+    box-shadow: $shadow;
+  }
+  border: 0.5px solid rgb($light);
+  background-image: $_control-surface;
+  background-origin: padding-box;
+  background-clip: border-box;
+  border-inline-color: transparent;
+  @supports (background-clip: border-area) {
+    border-color: transparent;
+    background-image:
+      linear-gradient(180deg, rgb($light), transparent 50%, rgb($light)), $_control-surface, linear-gradient(transparent, transparent);
+    background-origin: border-box, padding-box, border-box;
+    background-clip: border-area, padding-box, border-box;
+  }
+}
+
 // Shared pressed-surface declarations used by the button and legacy FAB recipes.
 @mixin pressed-surface($border-colors, $shadow: null, $blur: 7px, $saturate: 180%) {
   backdrop-filter: blur($blur) saturate($saturate);
@@ -13,3 +73,39 @@
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
+
+// iPadOS dark Glass: a vertical light source, with no illuminated side rim.
+// Keep the material under the border so transparent side edges do not cut it out.
+@mixin dark-rim($shadow: null) {
+  $light: var(--ion-text-color-rgb, 255, 255, 255);
+  $inner: linear-gradient(
+    180deg,
+    rgba($light, 0.14),
+    rgba($light, 0.04) 1px,
+    transparent 6px,
+    transparent calc(100% - 6px),
+    rgba($light, 0.04) calc(100% - 1px),
+    rgba($light, 0.14)
+  );
+  border-color: transparent;
+  background-image: $inner;
+  background-origin: padding-box;
+  background-clip: border-box;
+  @if $shadow == null {
+    @include dark-shadow;
+  } @else {
+    box-shadow: $shadow;
+  }
+  @supports (background-clip: border-area) {
+    background-image:
+      linear-gradient(180deg, rgba($light, 0.24), transparent 35%, transparent 65%, rgba($light, 0.24)), $inner,
+      linear-gradient(transparent, transparent);
+    background-origin: border-box, padding-box, border-box;
+    background-clip: border-area, padding-box, border-box;
+  }
+}
+
+// One resting dark material for hosts and Shadow DOM background properties.
+@mixin dark-fill($property: background-color) {
+  #{$property}: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.5);
+}

package/src/styles/utils/api.scss

@@ -85,6 +85,16 @@ $_glass-surface: linear-gradient(
   backface-visibility: hidden;
 }
 
+// Resting Glass controls use one material; lenses and existing Sass callers
+// retain glass-background's original options and rendering.
+@mixin glass-control-background($include-background: true, $shadow: null) {
+  @include glass-background($include-background: false, $include-border: false, $include-box-shadow: false);
+  @if $include-background {
+    background-color: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);
+  }
+  @include glass.light-rim($shadow);
+}
+
 @mixin glass-background-button-activated {
   background-color: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.96);
   border-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12) rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.32)
@@ -156,15 +166,47 @@ $_glass-surface: linear-gradient(
 
 @mixin glass-background-overlay-button {
   transition: background 0.2s ease;
-  background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+  background: var(--ion-background-color-step-200, var(--ion-color-step-200, #cccccc));
   &.ion-activated {
-    background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.022);
+    background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
   }
 }
 
 @mixin glass-background-overlay-button-variable {
-  --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+  --button-background: var(--ion-background-color-step-200, var(--ion-color-step-200, #cccccc));
+  &.ion-activated {
+    --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+  }
+}
+
+// Filled emphasis for the recommended action in presented overlays.
+@mixin glass-overlay-preferred-button($background-property: background, $color-property: color) {
+  #{$background-property}: var(--ion-color-primary, #0054e9);
+  #{$color-property}: var(--ion-color-primary-contrast, #fff);
   &.ion-activated {
-    --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.022);
+    #{$background-property}: var(--ion-color-primary-shade, #004acd);
+  }
+}
+
+// Shared material for presented surfaces. Keep transforms owned by Ionic animations.
+@mixin glass-overlay-variables($shadow-opacity: 0.15) {
+  --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.67);
+  --border-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.18);
+  --border-style: solid;
+  --border-width: 0.5px;
+  --box-shadow:
+    inset 0 0.5px 1px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6),
+    0 12px 32px color-mix(in srgb, var(--ion-box-shadow-color, #000) #{$shadow-opacity * 100%}, transparent);
+}
+
+@mixin glass-overlay-surface($include-background: true, $include-frame: true) {
+  @if $include-background {
+    background: var(--background);
+  }
+  @if $include-frame {
+    border: var(--border-width) var(--border-style) var(--border-color);
+    box-shadow: var(--box-shadow);
   }
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
 }

package/src/styles/utils/dark/ion-button.scss

@@ -14,6 +14,11 @@
 }
 
 @mixin theme-dark-buttons {
+  &:not(:has(.ion-activated)) {
+    @include glass.dark-fill;
+    @include glass.dark-rim;
+  }
+
   &:has(.ion-activated) {
     @include pressed-glass;
   }
@@ -40,6 +45,14 @@
 }
 
 @mixin theme-dark-button {
+  &:not(.ion-activated):not(.button-solid):not(.button-outline):not(.button-clear) {
+    @include glass.dark-fill('--background');
+    @include glass.dark-shadow('--box-shadow');
+    &::part(native) {
+      @include glass.dark-rim(var(--box-shadow));
+    }
+  }
+
   &.ion-activated:not(.button-solid):not(.button-outline):not(.button-clear) {
     --background: rgba(
       var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))),

package/src/styles/utils/dark/ion-fab.scss

@@ -1,8 +1,17 @@
 @use '../api';
+@use '../glass';
 
 @mixin ion-fab {
   ion-fab.ios:not(.ios-theme-disabled, .ios26-disabled) {
     ion-fab-button {
+      &:not(.ion-activated) {
+        @include glass.dark-fill('--background');
+        @include glass.dark-shadow('--box-shadow');
+        &::part(native) {
+          @include glass.dark-rim(var(--box-shadow));
+        }
+      }
+
       &.ion-activated {
         &::part(native) {
           @include api.glass-background-button-activated-dark($include-background: false);

package/src/styles/utils/dark/ion-list.scss

@@ -0,0 +1,7 @@
+@use '../structured-list';
+
+@mixin ion-list {
+  ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {
+    @include structured-list.colors(0.93, 0.5);
+  }
+}

package/src/styles/utils/dark/ion-segment.scss

@@ -2,12 +2,17 @@
 
 @mixin ion-segment {
   ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
-    // Only the navigation glass uses a dark selection; content controls keep Ionic's surface.
-    &.in-toolbar:not(.segment-expand, .ion-color) ion-segment-button:not(.ion-color, .ios-theme-disabled, .ios26-disabled) {
-      --indicator-color: var(--ios27-segment-selected-background, rgba(0, 0, 0, 0.72));
+    ion-segment-button.segment-button-disabled {
+      opacity: 0.15;
     }
     .ios27-segment-edge {
       @include api.glass-lens-dark;
     }
   }
+  :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled)) {
+    --background: rgba(var(--ion-color-medium-rgb, 152, 154, 162), 0.19);
+  }
+  :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled, .ion-color) ion-segment-button:not(.ion-color, .in-segment-color)) {
+    --indicator-color: color-mix(in srgb, rgb(var(--ion-color-medium-rgb, 152, 154, 162)) 59%, var(--ion-background-color, #000));
+  }
 }

package/src/styles/utils/dark/ion-tabs.scss

@@ -1,4 +1,24 @@
+@use '../glass';
+
 @mixin ion-tabs {
+  ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
+    --color: rgb(var(--ion-text-color-rgb, 255, 255, 255));
+    --background: color-mix(
+      in srgb,
+      color-mix(
+          in srgb,
+          rgb(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb))) 92%,
+          rgb(var(--ion-text-color-rgb, 255, 255, 255))
+        )
+        40%,
+      transparent
+    );
+    &::before {
+      @include glass.dark-rim;
+      backdrop-filter: blur(6px) saturate(150%) brightness(1.23);
+    }
+  }
+
   ion-tab-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
     --ios27-tab-selected-background: rgba(
       var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, 0, 0, 0)),

package/src/styles/utils/group-heading.scss

@@ -0,0 +1,5 @@
+@mixin typography {
+  font-size: 1.29rem;
+  font-weight: 700;
+  line-height: 1.53rem;
+}

package/src/styles/utils/structured-list.scss

@@ -1,5 +1,26 @@
+@use './group-heading';
+
 $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
 
+// Derive neutral list colors from the application's Ionic medium palette.
+@mixin colors($supporting-opacity, $detail-opacity) {
+  ion-item {
+    --detail-icon-color: rgb(var(--ion-color-medium-rgb));
+    --detail-icon-opacity: #{$detail-opacity};
+  }
+
+  &.list-inset {
+    ion-list-header ion-label:not(.ion-color) {
+      color: rgba(var(--ion-color-medium-rgb), $supporting-opacity);
+    }
+
+    ion-list-header ion-note:not(.ion-color),
+    > ion-note:not(.ion-color) {
+      --color: rgba(var(--ion-color-medium-rgb), #{$supporting-opacity});
+    }
+  }
+}
+
 @mixin support-text() {
   ion-item {
     &:has(ion-input.input-fill-outline),
@@ -26,7 +47,9 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group
     align-items: center;
 
     ion-label {
-      font-size: 0.9rem;
+      font-size: 1rem;
+      line-height: 1.29rem;
+      font-weight: 600;
       margin: 8px 4px 4px;
 
       &:not(.ion-color) {
@@ -39,17 +62,35 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group
     }
 
     ion-note {
-      font-size: 0.9rem;
+      font-size: 0.76rem;
+      line-height: 1.06rem;
+      font-weight: 400;
       margin: 8px 16px 4px 0;
+
+      &:not(.ion-color) {
+        --color: var(--ion-color-medium-tint);
+      }
     }
   }
 
   ion-item-group.item-group-header {
+    border-radius: $group-border-radius;
+
+    > ion-item {
+      --inner-padding-end: 0;
+      --inner-border-width: 0;
+
+      &::part(native) {
+        padding-inline: 0;
+      }
+    }
+
     & > ion-item > ion-label {
       width: 100%;
-      text-align: center;
-      padding: 32px 16px 16px;
-      transform: translateX(5px);
+      margin: 0;
+      text-align: start;
+      white-space: normal;
+      padding: 16px 20px;
 
       /**
        * ion-header.header-collapse-condenseを使って、スクロールによってHeaderを変化させるトリック
@@ -60,9 +101,10 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group
       }
 
       ion-icon {
-        font-size: 2.8rem;
+        font-size: 2.82rem;
         border-radius: 20%;
         padding: 6px;
+        vertical-align: top;
 
         &:not(.ion-color) {
           color: #ffffff;
@@ -70,13 +112,18 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group
       }
 
       h2 {
-        font-size: 1.2rem;
-        font-weight: bold;
-        margin-top: 8px;
+        @include group-heading.typography;
+        margin: 20px 0 8px;
       }
 
       ion-text {
-        font-size: 0.9rem;
+        display: block;
+        font-size: 1rem;
+        line-height: 1.29rem;
+
+        &:not(.ion-color) {
+          color: var(--ion-color-step-500, var(--ion-text-color-step-500, #808080));
+        }
       }
     }
   }
@@ -128,11 +175,12 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group
         & > ion-label {
           margin: 0;
           font-weight: 500;
-          font-size: 1.15rem;
-          line-height: 0.9rem;
+          font-size: 1rem;
+          line-height: 1.29rem;
         }
         & > ion-note {
-          font-size: 0.85rem;
+          font-size: 0.88rem;
+          line-height: 1.18rem;
         }
       }
 
@@ -162,9 +210,14 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group
   }
 
   & > ion-note {
-    --color: var(--ion-color-medium-tint);
-    font-size: 0.9rem;
+    font-size: 0.76rem;
+    line-height: 1.06rem;
+    font-weight: 400;
     display: block;
     margin: 8px calc(var(--ion-safe-area-right, 0) + $outer-note-inset) 8px calc(var(--ion-safe-area-left, 0) + $outer-note-inset);
+
+    &:not(.ion-color) {
+      --color: var(--ion-color-medium-tint);
+    }
   }
 }

package/src/styles/utils/theme-dark.scss

@@ -6,9 +6,13 @@
 @use 'dark/ion-tabs' as *;
 @forward 'dark/ion-segment';
 @use 'dark/ion-segment' as *;
+@forward 'dark/ion-list';
+@use 'dark/ion-list' as *;
 
 @mixin default-variables {
   --ios27-color-scheme: dark;
+  --ios-theme-destructive-color: #ff686b;
+  --ios-theme-menu-background-rgb: 26, 31, 34;
   //--ios26-glass-background-rgb: 35, 35, 35;
   --ios26-glass-background-rgb: 62, 62, 62;
   --ios26-glass-box-shadow-color-rgb: 0, 0, 0 / 0;
@@ -19,6 +23,25 @@
 }
 
 @mixin theme-dark {
+  @include ion-list;
+
+  ion-alert.ios:not(.ios-theme-disabled, .ios26-disabled),
+  ion-action-sheet.ios:not(.ios-theme-disabled, .ios26-disabled),
+  ion-toast.ios:not(.ios-theme-disabled, .ios26-disabled) {
+    --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.52);
+  }
+
+  ion-popover.ios:not(.ios-theme-disabled, .ios26-disabled) {
+    --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.08);
+
+    &:not(.ios-theme-callout)::part(content),
+    &::part(callout-glass),
+    &::part(arrow)::after {
+      backdrop-filter: blur(12px) saturate(115%) brightness(0.9);
+      -webkit-backdrop-filter: blur(12px) saturate(115%) brightness(0.9);
+    }
+  }
+
   @include ion-button;
   @include ion-fab;
   @include ion-tabs;