@rdlabo/ionic-theme-ios27 0.1.0-0

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

@@ -0,0 +1,65 @@
+@use '../utils/api';
+
+/**
+ * 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) {
+  &.toggle-checked.toggle-activated::part(track) {
+    transform-origin: left;
+    transform: scaleX(0.894) translateZ(0);
+    -webkit-transform: scaleX(0.894) translateZ(0);
+  }
+  &.toggle-activated::part(handle) {
+    transform: scale(1.4, 1.6) translateX(calc(38px * -0.15)) translateZ(0);
+    -webkit-transform: scale(1.4, 1.6) translateX(calc(38px * -0.15)) translateZ(0);
+  }
+}
+
+ion-toggle.ios:not(.ios26-disabled) {
+  --handle-width: 38px;
+  --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);
+  }
+  &:not(.ion-color) {
+    --track-background: rgba(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.23);
+  }
+  &::part(track) {
+    overflow: visible;
+    width: 64px;
+    height: 28px;
+    transition: transform 280ms ease;
+  }
+  &.toggle-activated:not(.toggle-checked)::part(handle) {
+    transform: translateX(-4px) scale(1.4, 1.6) translateZ(0);
+    -webkit-transform: translateX(-4px) scale(1.4, 1.6) translateZ(0);
+  }
+  &.toggle-activated.toggle-checked::part(handle) {
+    transform: scale(1.4, 1.6) translateZ(0);
+  }
+  &.toggle-activated::part(handle) {
+    transform: scale(1.4, 1.6) translateZ(0);
+    -webkit-transform: scale(1.4, 1.6) translateZ(0);
+    --handle-transition: transform 280ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;
+    @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-box-shadow: inset 0 0 8px 0 var(--track-background);
+  }
+  &.ion-color.toggle-checked.toggle-activated {
+    --handle-box-shadow:
+      inset 0 8px 8px -8px var(--ion-color-base), inset 8px 0 8px -8px var(--track-background),
+      inset 8px 0 8px -8px var(--track-background), inset -8px 0 8px -8px var(--ion-color-base);
+  }
+  &.toggle-checked.toggle-activated {
+    --handle-box-shadow:
+      inset 0 8px 8px -8px var(--track-background-checked), inset 8px 0 8px -8px var(--track-background),
+      inset 8px 0 8px -8px var(--track-background), inset -8px 0 8px -8px var(--track-background-checked);
+  }
+}

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

@@ -0,0 +1,76 @@
+@use 'ion-button';
+
+/**
+ * https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/header/header.scss#L17-L19
+ * ion-header ion-toolbar:first-of-type {
+ *  padding-top: var(--ion-safe-area-top, 0);
+ * }
+ */
+ion-header.ios:not(.ios26-disabled) ion-toolbar:not(.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 {
+    padding-top: 6px;
+  }
+}
+
+ion-header.ios.header-collapse-condense:not(.ios26-disabled) ion-toolbar:not(.ios26-disabled):first-of-type {
+  padding-top: 0;
+}
+
+ion-toolbar.ios:not(.toolbar-title-large):not(.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(
+    :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'] {
+    align-self: center;
+  }
+  &:has(ion-buttons[slot='start']) {
+    ion-buttons[slot='start'] {
+      margin-right: 6px;
+    }
+    ion-searchbar.ios:not(.ios26-disabled) {
+      .searchbar-input-container {
+        margin: 0 12px 0 6px;
+      }
+    }
+  }
+  &:has(ion-buttons[slot='end']) {
+    ion-buttons[slot='end'] {
+      margin-left: 6px;
+    }
+    ion-searchbar.ios:not(.ios26-disabled) {
+      .searchbar-input-container {
+        margin: 0 6px 0 12px;
+      }
+    }
+  }
+}
+
+ion-toolbar.ios:not(.ios26-disabled) {
+  ion-buttons {
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+  ion-back-button {
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+  ion-buttons > ion-back-button {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}

package/src/styles/default-variables.scss

@@ -0,0 +1,38 @@
+/**
+ * @naming
+ * prefix:                 ios26
+ * target-element:         tab-button
+ * target css property:    color
+ * status:                 selected
+ * additional information: rgb
+ */
+
+: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));
+
+  --ios26-activated-transition-duration: 140ms;
+
+  --ios26-glass-background-rgb: 255, 255, 255;
+  --ios26-glass-box-shadow-color-rgb: 220, 220, 220;
+  --ios26-glass-border-color-rgb: 255, 255, 255;
+  --ios26-button-color-selected-rgb: 16, 16, 16;
+
+  --ios26-menu-width: 360px;
+
+  /**
+   * `--ios26-color-background-rgb` is deprecated.
+   * You should replace to '--ios26-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); }
+   */
+  --ios26-content-box-shadow-rgb: var(--ion-color-base-rgb, var(--ion-background-color-rgb, 255, 255, 255));
+
+  /**
+   * `--ion-color-**-brightness-rgb` is deprecated.
+   * You should replace to '--ion-color-**-brightness'
+   */
+  @each $item in primary, secondary, tertiary, success, warning, danger, light, medium, dark {
+    --ion-color-#{$item}-brightness: rgb(var(--ion-color-#{$item}-brightness-rgb));
+  }
+}

package/src/styles/ionic-theme-ios26-dark-always.scss

@@ -0,0 +1,6 @@
+@use 'utils/theme-dark';
+
+:root {
+  @include theme-dark.default-variables;
+}
+@include theme-dark.theme-dark;

package/src/styles/ionic-theme-ios26-dark-class.scss

@@ -0,0 +1,6 @@
+@use 'utils/theme-dark';
+
+.ion-palette-dark {
+  @include theme-dark.default-variables;
+  @include theme-dark.theme-dark;
+}

package/src/styles/ionic-theme-ios26-dark-system.scss

@@ -0,0 +1,8 @@
+@use 'utils/theme-dark';
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include theme-dark.default-variables;
+  }
+  @include theme-dark.theme-dark;
+}

package/src/styles/ionic-theme-ios26.scss

@@ -0,0 +1,23 @@
+@use 'utils/translucent';
+
+@use 'components/ion-action-sheet';
+@use 'components/ion-alert';
+@use 'components/ion-button';
+@use 'components/ion-card';
+@use 'components/ion-content';
+@use 'components/ion-datetime';
+@use 'components/ion-fab';
+@use 'components/ion-inputs';
+@use 'components/ion-list';
+@use 'components/ion-loading';
+@use 'components/ion-menu';
+@use 'components/ion-modal';
+@use 'components/ion-picker';
+@use 'components/ion-popover';
+@use 'components/ion-range';
+@use 'components/ion-searchbar';
+@use 'components/ion-segment';
+@use 'components/ion-tabs';
+@use 'components/ion-toast';
+@use 'components/ion-toggle';
+@use 'components/ion-toolbar';

package/src/styles/md-ion-list-inset.scss

@@ -0,0 +1,22 @@
+@use 'utils/structured-list';
+
+ion-list.md {
+  @include structured-list.support-text;
+
+  &.list-inset {
+    @include structured-list.layout(8px, 16px);
+    :is(#{structured-list.$groups}) ion-item {
+      & > ion-input[labelplacement='floating'] {
+        transition: transform 200ms ease;
+
+        &:not(.label-floating) {
+          transform: translateY(-7px);
+        }
+
+        &.label-floating {
+          transform: translateY(-4px);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+ion-buttons.md {
+  /**
+   * ion-buttons.ios26-disabled > ion-button.button-default is for ios26 structure.
+   * for .md, remove button-default styles. Will be button-clear.
+   */
+  ion-button.md:not(.ios26-disabled).button-default {
+    // copy .button-clear
+    --color: initial;
+    --background: transparent;
+    --background-activated: transparent;
+    --background-focused: transparent;
+    --background-hover: transparent;
+  }
+}

package/src/styles/utils/api.scss

@@ -0,0 +1,146 @@
+$button-scaleup-small-icon-only: 1.18;
+$button-scaleup-default-icon-only: 1.38;
+$button-scaleup-large-icon-only: 1.22;
+
+$_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,
+  $saturate: 360%,
+  $background-rgb: var(--ios26-glass-background-rgb),
+  $border-color-rgb: var(--ios26-glass-border-color-rgb),
+  $include-background: true,
+  $include-box-shadow: true,
+  $include-border: true,
+  $shadow-opacity: 0.18
+) {
+  $surface: linear-gradient(transparent, transparent);
+  @if $include-background {
+    $surface: $_glass-surface;
+  }
+  @if $include-background {
+    background: $_glass-surface, rgba($background-rgb, $opacity);
+  }
+  backdrop-filter: blur($blur) saturate($saturate);
+  @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 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: 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
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+@mixin glass-background-button-activated {
+  background-color: rgba(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);
+}
+
+@mixin glass-background-button-activated-dark(
+  $opacity: 0.56,
+  $blur: 7px,
+  $saturate: 180%,
+  $include-background: true,
+  $include-box-shadow: true
+) {
+  @if $include-background {
+    background: rgba(var(--ios26-button-color-selected-rgb), $opacity);
+  } @else {
+    background-color: rgba(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);
+  }
+  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);
+  background-image: none;
+  background-clip: border-box;
+  background-origin: padding-box;
+
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+@mixin glass-background-overlay {
+  @include glass-background($opacity: 0.6667, $blur: 8px);
+}
+
+@mixin glass-background-overlay-activated {
+  @include glass-background($opacity: 0.6667, $blur: 8px);
+}
+
+@mixin glass-background-overlay-button {
+  transition: background 0.2s ease;
+  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.1);
+  &.ion-activated {
+    --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.022);
+  }
+}

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

@@ -0,0 +1,58 @@
+@use '../api';
+
+@mixin theme-dark-buttons {
+  &:has(.ion-activated) {
+    @include api.glass-background-button-activated-dark;
+  }
+
+  ion-button:not(.ios26-disabled).button-clear {
+    &.ion-activated {
+      color: rgb(var(--ion-text-color-rgb, 0, 0, 0));
+      &.ion-color {
+        color: rgb(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)));
+      }
+    }
+  }
+
+  ion-button:not(.ios26-disabled),
+  ion-back-button:not(.ios26-disabled) {
+    &.ion-activated {
+      --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
+
+      &.ion-color {
+        --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1);
+      }
+    }
+  }
+}
+
+@mixin theme-dark-button($is-back-button: false) {
+  &.ion-activated:not(.button-solid):not(.button-outline):not(.button-clear) {
+    --background: rgba(var(--ios26-button-color-selected-rgb), 0.56);
+    --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
+    @if not $is-back-button {
+      --box-shadow: inset 0 0 16px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.55);
+    }
+    &.ion-color {
+      --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1);
+    }
+    &::part(native) {
+      @include api.glass-background-button-activated-dark($include-background: false);
+    }
+    ion-icon {
+      color: rgb(255, 255, 255);
+    }
+  }
+}
+
+@mixin ion-button {
+  ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button, ion-button:not(.button-clear))) {
+    @include theme-dark-buttons;
+  }
+  ion-button.ios:not(.ios26-disabled) {
+    @include theme-dark-button;
+  }
+  ion-back-button.ios:not(.ios26-disabled) {
+    @include theme-dark-button($is-back-button: true);
+  }
+}

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

@@ -0,0 +1,18 @@
+@use '../api';
+
+@mixin ion-fab {
+  ion-fab.ios:not(.ios26-disabled) {
+    ion-fab-button {
+      &.ion-activated {
+        &::part(native) {
+          @include api.glass-background-button-activated-dark($include-background: false);
+        }
+        --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
+
+        &.ion-color {
+          --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+@mixin ion-segment {
+  ion-segment.ios:not(.ios26-disabled) {
+  }
+  ion-segment-button.ios:not(.ios26-disabled) {
+    &.ion-cloned-element {
+      &::part(native) {
+        --ios26-glass-border-color-rgb: 120, 120, 120;
+        box-shadow: inset 0 0 8px 0 rgba(255, 255, 255, 0.2);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+@use '../api';
+
+@mixin ion-tabs {
+  ion-tab-bar.ios:not(.ios26-disabled) {
+  }
+  ion-tab-button.ios:not(.ios26-disabled) {
+    &.ion-activated {
+      ion-label,
+      ion-icon {
+        filter: brightness(118%);
+        opacity: 0.95;
+      }
+    }
+    &.ion-cloned-element {
+      &::part(native) {
+        --ios26-glass-border-color-rgb: 120, 120, 120;
+        box-shadow: inset 0 0 8px 0 rgba(255, 255, 255, 0.2);
+      }
+    }
+  }
+}