@rdlabo/ionic-theme-ios27 0.1.0-0 → 0.1.0-1

package/src/styles/components/ion-menu.scss

@@ -1,20 +1,23 @@
 @use '../utils/api';
 
-ion-split-pane.ios:not(.ios26-disabled) {
-  --side-max-width: var(--ios26-menu-width);
+ion-split-pane.ios:not(.ios-theme-disabled, .ios26-disabled) {
+  --side-max-width: var(--ios-theme-menu-width, var(--ios26-menu-width));
 }
 
-ion-split-pane.ios:not(.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) {
+ion-split-pane.ios:not(.ios-theme-disabled, .ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) {
   .split-pane-main {
-    ion-tab-bar.ios:not(.ios26-disabled) {
+    ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
       width: calc(
         100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-left, 0px)) - 60px -
-          12px - var(--ios26-menu-width)
+          12px - var(--ios-theme-menu-width, var(--ios26-menu-width))
       );
 
       &:has(:nth-child(5)) {
         width: calc(
-          100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-left, 0px)) - var(--ios26-menu-width)
+          100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-left, 0px)) - var(
+              --ios-theme-menu-width,
+              var(--ios26-menu-width)
+            )
         );
       }
     }
@@ -25,62 +28,62 @@ ion-split-pane.ios:not(.ios26-disabled).split-pane-visible:has(ion-menu.menu-pan
         /*
          * 4px: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toolbar/toolbar.ios.vars.scss#L28-L32
          */
-        --padding-start: calc(var(--ios26-menu-width) + 4px);
+        --padding-start: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px);
         ion-title.title-default {
           /*
            * 90px: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/title/title.ios.scss#L8
            */
-          padding-left: calc(90px + var(--ios26-menu-width));
+          padding-left: calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)));
         }
       }
       ion-content {
-        --padding-start: var(--ios26-menu-width);
+        --padding-start: var(--ios-theme-menu-width, var(--ios26-menu-width));
         ion-header ion-toolbar {
           --padding-start: 4px;
         }
       }
       ion-footer ion-toolbar {
-        --padding-start: var(--ios26-menu-width);
+        --padding-start: var(--ios-theme-menu-width, var(--ios26-menu-width));
       }
-      ion-tab-bar.ios:not(.ios26-disabled) {
+      ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
         &[slot='bottom'] {
-          left: calc(16px + var(--ion-safe-area-left, 0px) + var(--ios26-menu-width));
+          left: calc(16px + var(--ion-safe-area-left, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)));
         }
       }
     }
   }
 
-  &:has(ion-menu.ios:not(.ios26-disabled).menu-side-end) {
+  &:has(ion-menu.ios:not(.ios-theme-disabled, .ios26-disabled).menu-side-end) {
     .split-pane-main {
       ion-header ion-toolbar {
         /*
          * 4px: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toolbar/toolbar.ios.vars.scss#L28-L32
          */
-        --padding-end: calc(var(--ios26-menu-width) + 4px);
+        --padding-end: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px);
         ion-title.title-default {
           /*
            * 90px: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/title/title.ios.scss#L8
            */
-          padding-right: calc(90px + var(--ios26-menu-width));
+          padding-right: calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)));
         }
       }
       ion-content {
-        --padding-end: var(--ios26-menu-width);
+        --padding-end: var(--ios-theme-menu-width, var(--ios26-menu-width));
         ion-header ion-toolbar {
           --padding-start: 4px;
         }
       }
       ion-footer ion-toolbar {
-        --padding-end: var(--ios26-menu-width);
+        --padding-end: var(--ios-theme-menu-width, var(--ios26-menu-width));
       }
     }
   }
 }
 
-ion-menu.ios:not(.ios26-disabled) {
+ion-menu.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --border: none;
   --background: transparent;
-  --max-width: var(--ios26-menu-width);
+  --max-width: var(--ios-theme-menu-width, var(--ios26-menu-width));
   position: absolute;
   top: 0;
   z-index: 999;
@@ -89,7 +92,7 @@ ion-menu.ios:not(.ios26-disabled) {
     left: 0;
   }
   &.menu-side-end {
-    left: calc(100vw - var(--ios26-menu-width));
+    left: calc(100vw - var(--ios-theme-menu-width, var(--ios26-menu-width)));
   }
 
   &::part(backdrop) {
@@ -99,10 +102,12 @@ ion-menu.ios:not(.ios26-disabled) {
   ion-content {
     --background: transparent;
     --ios26-content-box-shadow-rgb: transparent;
+    --ios-theme-content-box-shadow-rgb: var(--ios26-content-box-shadow-rgb);
 
     &::part(scroll) {
       @include api.glass-background;
-      margin: calc(var(--ios26-floating-safe-area-top) + 6px) calc(16px + var(--ion-safe-area-right)) var(--ios26-floating-safe-area-bottom)
+      margin: calc(var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top)) + 6px)
+        calc(16px + var(--ion-safe-area-right)) var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom))
         calc(12px + var(--ion-safe-area-left));
       border-radius: 24px;
     }

package/src/styles/components/ion-modal.scss

@@ -1,6 +1,6 @@
 @use '../utils/api';
 
-ion-modal.ios:not(.ios26-disabled) {
+ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --backdrop-opacity: 0.2;
 
   &::part(handle) {
@@ -22,7 +22,7 @@ ion-modal.ios:not(.ios26-disabled) {
   &.modal-card {
     /**
      * IonicでCardModalのborder-radiusはハードコーディングされています。
-     * また、iOS26のドキュメントで見つからないため、サポートは行いません。
+     * また、iOS27のドキュメントで見つからないため、サポートは行いません。
      * https://github.com/ionic-team/ionic-framework/blob/3b80473f2fd5ad4da5a9f5d66f783a69909c8965/core/src/components/modal/animations/ios.enter.ts#L82-L83
      */
   }
@@ -34,7 +34,7 @@ ion-modal.ios:not(.ios26-disabled) {
 
   &.modal-sheet {
     --border-radius: 30px;
-    --background: rgba(var(--ios26-glass-background-rgb), 1);
+    --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 1);
     &::part(content) {
       @include api.glass-background($opacity: 1, $include-background: false);
     }

package/src/styles/components/ion-picker.scss

@@ -1,4 +1,4 @@
 @use '../utils/api';
 
-ion-picker.ios:not(.ios26-disabled) {
+ion-picker.ios:not(.ios-theme-disabled, .ios26-disabled) {
 }

package/src/styles/components/ion-popover.scss

@@ -1,10 +1,11 @@
 @use '../utils/api';
 
-ion-popover.ios:not(.ios26-disabled) {
+ion-popover.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --backdrop-opacity: 0.2;
-  --background: rgba(var(--ios26-glass-background-rgb), 0.72);
+  --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);
   --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(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.2),
+    0 0 10px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.82);
   &::part(arrow) {
     display: none;
     ::after {

package/src/styles/components/ion-range.scss

@@ -5,7 +5,7 @@
   -webkit-transform: scale(1.56, 1.47) translateX(calc(#{$translate-x} * -0.1)) translateZ(0);
 }
 
-ion-range.ios:not(.ios26-disabled) {
+ion-range.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --knob-size: 20px;
   --knob-width: 38px;
   --knob-border-radius: 24px;
@@ -36,7 +36,7 @@ ion-range.ios:not(.ios26-disabled) {
   }
 
   &:not(.range-dual-knobs).range-pressed {
-    --knob-background: rgba(var(--ios26-glass-background-rgb), 0.1);
+    --knob-background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.1);
     --knob-box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 4px rgba(0, 0, 0, 0.05), inset 0.4px 0.4px 1px 0 var(--bar-background-active);
 
     &::part(knob) {

package/src/styles/components/ion-searchbar.scss

@@ -1,7 +1,7 @@
 @use '../utils/api';
 
 ion-modal.ios {
-  ion-searchbar:not(.ios26-disabled) {
+  ion-searchbar:not(.ios-theme-disabled, .ios26-disabled) {
     .searchbar-input-container {
       input.searchbar-input {
         // Modal表示でのアイコン非表示の不具合の対応
@@ -11,7 +11,7 @@ ion-modal.ios {
   }
 }
 
-ion-searchbar.ios:not(.ios26-disabled):not(.searchbar-classic) {
+ion-searchbar.ios:not(.ios-theme-disabled, .ios26-disabled):not(.searchbar-classic) {
   min-height: 60px;
   padding: 0;
 
@@ -45,10 +45,12 @@ ion-searchbar.ios:not(.ios26-disabled):not(.searchbar-classic) {
 /**
  * add searchbar-classic
  */
-ion-toolbar.ios:not(.ios26-disabled):has(ion-searchbar.searchbar-classic.ios:not(.ios26-disabled)) {
+ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled):has(
+    ion-searchbar.searchbar-classic.ios:not(.ios-theme-disabled, .ios26-disabled)
+  ) {
   --min-height: auto;
 }
-ion-searchbar.ios:not(.ios26-disabled).searchbar-classic {
+ion-searchbar.ios:not(.ios-theme-disabled, .ios26-disabled).searchbar-classic {
   padding-bottom: 12px;
   min-height: auto;
   .searchbar-input-container input.searchbar-input {

package/src/styles/components/ion-segment.scss

@@ -1,11 +1,11 @@
 @use '../utils/api';
 
-ion-segment.ios:not(.ios26-disabled) {
+ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
   @include api.glass-background;
   min-height: 48px;
   border-radius: 25px;
 
-  transition: transform var(--ios26-activated-transition-duration) ease-out;
+  transition: transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease-out;
 
   // will-change is optimized to only apply when needed for performance
   &.segment-activated,
@@ -28,7 +28,7 @@ ion-segment.ios:not(.ios26-disabled) {
     }
   }
 
-  &:not(.ios26-enable-gesture).segment-activated {
+  &:not(.ios27-enable-gesture).segment-activated {
     transform: scale(1.1) translateZ(0);
     -webkit-transform: scale(1.1) translateZ(0);
     ion-segment-button {
@@ -47,7 +47,7 @@ ion-segment.ios:not(.ios26-disabled) {
     }
   }
 
-  &.ios26-enable-gesture {
+  &.ios27-enable-gesture {
     &:has(ion-segment-button.ion-activated) {
       transform: scale(1.1) translateZ(0);
       -webkit-transform: scale(1.1) translateZ(0);
@@ -65,7 +65,7 @@ ion-segment.ios:not(.ios26-disabled) {
         }
       }
     }
-    &.ios26-animated {
+    &.ios27-animated {
       ion-segment-button {
         --indicator-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);
       }
@@ -87,7 +87,7 @@ ion-segment.ios:not(.ios26-disabled) {
       min-height: 24px;
     }
 
-    &.ios26-enable-gesture {
+    &.ios27-enable-gesture {
       &:has(ion-segment-button.ion-activated) {
         transform: scale(1) translateZ(0);
         -webkit-transform: scale(1) translateZ(0);
@@ -105,7 +105,7 @@ ion-segment.ios:not(.ios26-disabled) {
           }
         }
       }
-      &.ios26-animated {
+      &.ios27-animated {
         ion-segment-button {
           --indicator-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);
         }
@@ -114,7 +114,7 @@ ion-segment.ios:not(.ios26-disabled) {
   }
 }
 
-ion-segment-button.ios:not(.ios26-disabled) {
+ion-segment-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --border-width: 0;
   --indicator-box-shadow: none;
   --indicator-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);

package/src/styles/components/ion-tabs.scss

@@ -1,6 +1,6 @@
 @use '../utils/api';
 
-ion-tab-bar.ios:not(.ios26-disabled) {
+ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
   @include api.glass-background;
   z-index: 2;
 
@@ -9,13 +9,13 @@ ion-tab-bar.ios:not(.ios26-disabled) {
 
   &[slot='top'] {
     position: absolute;
-    top: var(--ios26-floating-safe-area-top);
+    top: var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top));
     right: calc(16px + var(--ion-safe-area-right, 0px));
   }
 
   &[slot='bottom'] {
     position: absolute;
-    bottom: var(--ios26-floating-safe-area-bottom);
+    bottom: var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));
     left: calc(16px + var(--ion-safe-area-left, 0px));
   }
 
@@ -31,7 +31,7 @@ ion-tab-bar.ios:not(.ios26-disabled) {
   }
   padding: 2px 2px;
 
-  transition: transform var(--ios26-activated-transition-duration) ease-out;
+  transition: transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease-out;
 
   // will-change is optimized to only apply when needed for performance
   &:has(ion-tab-button.ion-activated) {
@@ -53,9 +53,9 @@ ion-tab-bar.ios:not(.ios26-disabled) {
   /**
    * effectが有効な場合、effectでスタイリングするため不要
    */
-  &.ios26-enable-gesture.ios26-animated {
+  &.ios27-enable-gesture.ios27-animated {
     ion-tab-button.tab-selected::part(native) {
-      background: rgba(var(--ios26-button-color-selected-rgb), 0);
+      background: rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb)), 0);
     }
     ion-tab-button.ion-activated {
       ion-label,
@@ -66,19 +66,19 @@ ion-tab-bar.ios:not(.ios26-disabled) {
   }
 }
 
-ion-tab-button.ios:not(.ios26-disabled) {
+ion-tab-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
   ion-icon {
     font-size: 26px;
   }
   ion-label,
   ion-icon {
     transition:
-      filter var(--ios26-activated-transition-duration) ease,
-      color var(--ios26-activated-transition-duration) ease;
+      filter var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease,
+      color var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease;
   }
-  background: rgba(var(--ios26-glass-background-rgb), 0);
+  background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0);
   height: auto;
-  transition: transform var(--ios26-activated-transition-duration) ease;
+  transition: transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease;
   &::part(native) {
     overflow: visible;
     min-height: 56px;
@@ -97,8 +97,8 @@ ion-tab-button.ios:not(.ios26-disabled) {
 
   &.tab-selected {
     &::part(native) {
-      background: rgba(var(--ios26-button-color-selected-rgb), 0.095);
-      transition: background var(--ios26-activated-transition-duration) ease;
+      background: rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb)), 0.095);
+      transition: background var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease;
     }
   }
 

package/src/styles/components/ion-toast.scss

@@ -1,21 +1,22 @@
 @use '../utils/api';
 
-ion-toast.ios:not(.ios26-disabled) {
-  --background: rgba(var(--ios26-glass-background-rgb), 0.72);
+ion-toast.ios:not(.ios-theme-disabled, .ios26-disabled) {
+  --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);
   --border-radius: 24px;
   --border-style: solid;
   --border-width: 0.5px;
   --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(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.2),
+    0 0 10px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.82);
   --start: 16px;
   --end: 16px;
 
   &::part(wrapper) {
     @include api.glass-background($include-background: false, $include-box-shadow: false, $include-border: false);
-    border-top-color: rgba(var(--ios26-glass-border-color-rgb), 1);
-    border-right-color: rgba(var(--ios26-glass-border-color-rgb), 0.8);
-    border-bottom-color: rgba(var(--ios26-glass-border-color-rgb), 1);
-    border-left-color: rgba(var(--ios26-glass-border-color-rgb), 0.6);
+    border-top-color: rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 1);
+    border-right-color: rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.8);
+    border-bottom-color: rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 1);
+    border-left-color: rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6);
   }
 
   &.ion-color {

package/src/styles/components/ion-toggle.scss

@@ -4,7 +4,7 @@
  * Adjustments have been made to prevent the right edge from being cut off within the ion-item.
  * When the native-inner part be added to the ion-item, it will be removed.
  */
-ion-item.ios:not(.ios26-disabled) ion-toggle.ios:not(.ios26-disabled) {
+ion-item.ios:not(.ios-theme-disabled, .ios26-disabled) ion-toggle.ios:not(.ios-theme-disabled, .ios26-disabled) {
   &.toggle-checked.toggle-activated::part(track) {
     transform-origin: left;
     transform: scaleX(0.894) translateZ(0);
@@ -16,7 +16,7 @@ ion-item.ios:not(.ios26-disabled) ion-toggle.ios:not(.ios26-disabled) {
   }
 }
 
-ion-toggle.ios:not(.ios26-disabled) {
+ion-toggle.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --handle-width: 38px;
   --handle-height: 24px;
   --handle-max-width: none;
@@ -48,8 +48,8 @@ ion-toggle.ios:not(.ios26-disabled) {
     @include api.glass-background($opacity: 0.1, $blur: 0.5px, $saturate: 120%, $include-background: false, $include-box-shadow: false);
   }
   &.toggle-activated {
-    --handle-background: rgba(var(--ios26-glass-background-rgb), 0.1);
-    --handle-background-checked: rgba(var(--ios26-glass-background-rgb), 0.1);
+    --handle-background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.1);
+    --handle-background-checked: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.1);
     --handle-box-shadow: inset 0 0 8px 0 var(--track-background);
   }
   &.ion-color.toggle-checked.toggle-activated {

package/src/styles/components/ion-toolbar.scss

@@ -6,34 +6,35 @@
  *  padding-top: var(--ion-safe-area-top, 0);
  * }
  */
-ion-header.ios:not(.ios26-disabled) ion-toolbar:not(.ios26-disabled):first-of-type {
+ion-header.ios:not(.ios-theme-disabled, .ios26-disabled) ion-toolbar:not(.ios-theme-disabled, .ios26-disabled):first-of-type {
   padding-top: max(calc(var(--ion-safe-area-top) - 12px), 4px);
 }
 
-ion-modal.ios:not(.ios26-disabled).modal-card,
-ion-modal.ios:not(.ios26-disabled).modal-sheet {
-  ion-header.ios:not(.ios26-disabled) ion-toolbar.ios:not(.ios26-disabled):first-of-type {
+ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled).modal-card,
+ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled).modal-sheet {
+  ion-header.ios:not(.ios-theme-disabled, .ios26-disabled) ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled):first-of-type {
     padding-top: 6px;
   }
 }
 
-ion-header.ios.header-collapse-condense:not(.ios26-disabled) ion-toolbar:not(.ios26-disabled):first-of-type {
+ion-header.ios.header-collapse-condense:not(.ios-theme-disabled, .ios26-disabled)
+  ion-toolbar:not(.ios-theme-disabled, .ios26-disabled):first-of-type {
   padding-top: 0;
 }
 
-ion-toolbar.ios:not(.toolbar-title-large):not(.ios26-disabled):not(:has(ion-segment.segment-expand)) {
+ion-toolbar.ios:not(.toolbar-title-large):not(.ios-theme-disabled, .ios26-disabled):not(:has(ion-segment.segment-expand)) {
   --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(
+ion-header.ios:not(.ios-theme-disabled, .ios26-disabled):not(.header-collapse-condense):not(:where(ion-modal *))
+  > ion-toolbar.ios:not(.ios-theme-disabled, .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 {
+ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled).toolbar-searchbar {
   *[slot='start'],
   *[slot='end'] {
     align-self: center;
@@ -42,7 +43,7 @@ ion-toolbar.ios:not(.ios26-disabled).toolbar-searchbar {
     ion-buttons[slot='start'] {
       margin-right: 6px;
     }
-    ion-searchbar.ios:not(.ios26-disabled) {
+    ion-searchbar.ios:not(.ios-theme-disabled, .ios26-disabled) {
       .searchbar-input-container {
         margin: 0 12px 0 6px;
       }
@@ -52,7 +53,7 @@ ion-toolbar.ios:not(.ios26-disabled).toolbar-searchbar {
     ion-buttons[slot='end'] {
       margin-left: 6px;
     }
-    ion-searchbar.ios:not(.ios26-disabled) {
+    ion-searchbar.ios:not(.ios-theme-disabled, .ios26-disabled) {
       .searchbar-input-container {
         margin: 0 6px 0 12px;
       }
@@ -60,7 +61,7 @@ ion-toolbar.ios:not(.ios26-disabled).toolbar-searchbar {
   }
 }
 
-ion-toolbar.ios:not(.ios26-disabled) {
+ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled) {
   ion-buttons {
     margin-left: 12px;
     margin-right: 12px;

package/src/styles/default-variables.scss

@@ -1,12 +1,13 @@
 /**
  * @naming
- * prefix:                 ios26
+ * prefix:                 ios-theme
  * target-element:         tab-button
  * target css property:    color
  * status:                 selected
  * additional information: rgb
  */
 
+// Deprecated --ios26-* defaults back the --ios-theme-* fallbacks.
 :root {
   --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));
@@ -22,9 +23,9 @@
 
   /**
    * `--ios26-color-background-rgb` is deprecated.
-   * You should replace to '--ios26-content-box-shadow-rgb'.
+   * Use '--ios-theme-content-box-shadow-rgb'.
    * This variable can also be defined in root, but if you want to set multiple background colors individually, it is easier to set them as follows.
-   * ion-content { --ios26-content-box-shadow-rgb: var(--ion-color-base-rgb); }
+   * ion-content { --ios-theme-content-box-shadow-rgb: var(--ion-color-base-rgb); }
    */
   --ios26-content-box-shadow-rgb: var(--ion-color-base-rgb, var(--ion-background-color-rgb, 255, 255, 255));
 

package/src/styles/md-remove-ios-class-effect.scss

@@ -1,9 +1,9 @@
 ion-buttons.md {
   /**
-   * ion-buttons.ios26-disabled > ion-button.button-default is for ios26 structure.
+   * ion-buttons.ios-theme-disabled > ion-button.button-default is for ios27 structure.
    * for .md, remove button-default styles. Will be button-clear.
    */
-  ion-button.md:not(.ios26-disabled).button-default {
+  ion-button.md:not(.ios-theme-disabled, .ios26-disabled).button-default {
     // copy .button-clear
     --color: initial;
     --background: transparent;

package/src/styles/utils/api.scss

@@ -22,8 +22,8 @@ $_glass-surface: linear-gradient(
   $opacity: 0.72,
   $blur: 2px,
   $saturate: 360%,
-  $background-rgb: var(--ios26-glass-background-rgb),
-  $border-color-rgb: var(--ios26-glass-border-color-rgb),
+  $background-rgb: var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)),
+  $border-color-rgb: var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)),
   $include-background: true,
   $include-box-shadow: true,
   $include-border: true,
@@ -40,10 +40,10 @@ $_glass-surface: linear-gradient(
   @if $include-box-shadow {
     box-shadow:
       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 0 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, 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);
+      0 0.5px 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), $shadow-opacity);
   }
   @if $include-border {
     border: 0.5px solid;
@@ -84,14 +84,14 @@ $_glass-surface: linear-gradient(
 }
 
 @mixin glass-background-button-activated {
-  background-color: rgba(var(--ios26-glass-background-rgb), 0.96);
+  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)
     rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16) rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.28);
   box-shadow:
-    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);
+    inset 0 0 0 0.5px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.95),
+    inset 0 1px 3px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.85),
+    inset 0 -1px 2px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6),
+    0 0.5px 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.12);
 }
 
 @mixin glass-background-button-activated-dark(
@@ -102,18 +102,18 @@ $_glass-surface: linear-gradient(
   $include-box-shadow: true
 ) {
   @if $include-background {
-    background: rgba(var(--ios26-button-color-selected-rgb), $opacity);
+    background: rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb)), $opacity);
   } @else {
-    background-color: rgba(var(--ios26-button-color-selected-rgb), $opacity);
+    background-color: rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb)), $opacity);
   }
   backdrop-filter: blur($blur) saturate($saturate);
   @if $include-box-shadow {
-    box-shadow: inset 0 0 16px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.55);
+    box-shadow: inset 0 0 16px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.55);
   }
-  border-top: 0.8px solid rgba(var(--ios26-button-color-selected-rgb), 0.8);
-  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);
+  border-top: 0.8px solid rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb)), 0.8);
+  border-right: 0.8px solid rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb)), 0.4);
+  border-bottom: 0.8px solid rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb)), 0.8);
+  border-left: 0.8px solid rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb)), 0.6);
   background-image: none;
   background-clip: border-box;
   background-origin: padding-box;