@rdlabo/ionic-theme-ios27 0.1.0-0

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

@@ -0,0 +1,443 @@
+@use '../utils/api';
+
+/**
+ * Note: ion-back-button should not put inner ion-button.
+ * feat(): ion-config new property for disable ion-back-button Animation
+ */
+
+$scaleup-small: 1.12;
+$scaleup-small-icon-only: api.$button-scaleup-small-icon-only;
+$scaleup-default: 1.25;
+$scaleup-default-icon-only: api.$button-scaleup-default-icon-only;
+$scaleup-large: 1.12;
+$scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
+
+@mixin theme-buttons {
+  @include api.glass-background($shadow-opacity: 0.08);
+  border-radius: 25px;
+  overflow: hidden;
+  &:not(:has(.ion-activated)):hover {
+    opacity: 0.72;
+  }
+
+  /**
+   * compare .header-collapse-main ion-toolbar.in-toolbar ion-title, .header-collapse-main ion-toolbar.in-toolbar ion-buttons
+   */
+  transition: transform var(--ios26-activated-transition-duration) ease-out;
+
+  z-index: 0;
+
+  &:has(.ion-activated) {
+    z-index: 5;
+    @include api.glass-background-button-activated;
+
+    // Hardware acceleration optimization for scale transforms
+    transform: scale($scaleup-default-icon-only) translateZ(0);
+    -webkit-transform: scale($scaleup-default-icon-only) translateZ(0);
+    &:has(:not(.button-has-icon-only):not(.back-button-has-icon-only)),
+    &:has(ion-button:nth-child(n + 2)) {
+      transform: scale($scaleup-default) translateZ(0);
+      -webkit-transform: scale($scaleup-default) translateZ(0);
+    }
+    &:has(.button-small) {
+      transform: scale($scaleup-small-icon-only) translateZ(0);
+      -webkit-transform: scale($scaleup-small-icon-only) translateZ(0);
+      &:has(:not(.button-has-icon-only):not(.back-button-has-icon-only)),
+      &:has(ion-button:nth-child(n + 2)) {
+        transform: scale($scaleup-small) translateZ(0);
+        -webkit-transform: scale($scaleup-small) translateZ(0);
+      }
+    }
+    &:has(.button-large) {
+      transform: scale($scaleup-large-icon-only) translateZ(0);
+      -webkit-transform: scale($scaleup-large-icon-only) translateZ(0);
+      &:has(:not(.button-has-icon-only):not(.back-button-has-icon-only)),
+      &:has(ion-button:nth-child(n + 2)) {
+        transform: scale($scaleup-large) translateZ(0);
+        -webkit-transform: scale($scaleup-large) translateZ(0);
+      }
+    }
+  }
+
+  &:has(ion-button:not(.ios26-disabled).button-clear.button-large) {
+    border-radius: 30px;
+  }
+
+  ion-button:not(.ios26-disabled).button-clear {
+    --background: transparent;
+    --border-style: none;
+    --border-width: 0;
+    --box-shadow: none;
+    transform: none;
+
+    font-weight: 500;
+    &.button-small {
+      min-height: calc(24px - 2px);
+      --padding-top: 1px;
+      --padding-bottom: 1px;
+      --padding-start: 0.5em;
+      --padding-end: 0.5em;
+    }
+    &.button-default {
+      --padding-bottom: 0;
+      --padding-end: 12px;
+      --padding-start: 12px;
+      --padding-top: 0;
+      &::part(native) {
+        min-height: calc(44px - 2px); // reduce for border 2px;
+      }
+    }
+    &.button-large {
+      min-height: calc(62px - 2px);
+      --padding-top: 17px;
+      --padding-start: 1em;
+      --padding-end: 1em;
+      --padding-bottom: 17px;
+    }
+    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-activated {
+      color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+      &.ion-color {
+        color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1);
+      }
+    }
+
+    &:not(.button-disabled) {
+      opacity: 1;
+    }
+
+    &.ion-activated {
+      --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+      &.ion-color {
+        --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1);
+      }
+    }
+
+    &::part(native) {
+      backdrop-filter: none;
+    }
+  }
+
+  ion-button:not(.ios26-disabled) {
+    margin: 0;
+  }
+
+  ion-menu-button:not(.ios26-disabled) {
+    width: 44px;
+    height: 44px;
+    padding: 2px;
+  }
+}
+
+@mixin theme-button($is-back-button: false) {
+  max-height: inherit;
+  z-index: 0;
+  &.ion-activated {
+    z-index: 10;
+  }
+
+  transition:
+    transform var(--ios26-activated-transition-duration) ease-out,
+    color 50ms ease;
+
+  &.in-toolbar:not(.ion-color):not(.in-toolbar-color) {
+    --ion-toolbar-color: currentColor;
+
+    &.button-solid {
+      --ion-toolbar-color: var(--background);
+      --ion-toolbar-background: currentColor;
+    }
+  }
+
+  // will-change is optimized to only apply when needed for performance
+  &:not(.ios26-disabled):hover,
+  &:not(.ios26-disabled):active,
+  &:not(.ios26-disabled).ion-activated {
+    will-change: transform;
+  }
+
+  &:not(.ios26-disabled):not(:hover):not(:active):not(.ion-activated) {
+    will-change: auto;
+  }
+
+  // button size default
+  &:not(.button-small):not(.button-large) {
+    font-size: 1.05rem;
+    &:not(.button-has-icon-only):not(.back-button-has-icon-only) {
+      --padding-bottom: 0;
+      --padding-end: 12px;
+      --padding-start: 12px;
+      --padding-top: 0;
+      @if $is-back-button {
+        --min-height: 44px;
+      } @else {
+        &::part(native) {
+          min-height: 44px;
+        }
+      }
+      ion-icon[slot='start'] {
+        margin-inline-start: -0.15em;
+        margin-inline-end: 0.15em;
+      }
+      ion-icon[slot='end'] {
+        margin-inline-start: 0.15em;
+        margin-inline-end: -0.15em;
+      }
+    }
+  }
+
+  &:not(.button-round) {
+    --border-radius: 24px;
+    &.button-large {
+      --border-radius: 30px;
+    }
+  }
+
+  /*
+   * fill=solid && type=submit button has edge brightness.
+   */
+  &.button-solid[type='submit'],
+  &.button-solid.button-submit {
+    /*
+     * If not set ion-color-**, button color set primary.
+     * https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/button/button.scss#L78-L81
+     */
+    --background-activated: var(--ion-color-primary-shade, #004acd);
+    --background-focused: var(--ion-color-primary-shade, #004acd);
+    --background-hover: var(--ion-color-primary-tint, #1a65eb);
+    --border-width: 0.5px;
+    --border-style: solid;
+
+    &:not(.button-disabled):not([disabled]) {
+      --color: var(--ion-color-primary-brightness, var(--ion-color-contrast));
+      --color-activated: var(--ion-color-primary-brightness);
+      --border-color: var(--ion-color-primary-brightness, transparent);
+
+      @each $item in primary, secondary, tertiary, success, warning, danger, light, medium, dark {
+        &.ion-color-#{$item} {
+          --color: var(--ion-color-#{$item}-brightness, var(--ion-color-#{$item}-contrast, var(--ion-color-contrast)));
+          --color-activated: var(--ion-color-#{$item}-brightness);
+          --border-color: var(--ion-color-#{$item}-brightness, transparent);
+          --border-width: 0.5px;
+          --border-style: solid;
+        }
+      }
+    }
+    --background-color: #fff;
+    --background-activated-opacity: 1;
+    &:not(.button-has-icon-only):not(.back-button-has-icon-only) {
+      &:not(.button-small):not(.button-large) {
+        min-height: 44px;
+      }
+    }
+    &::part(native) {
+      position: relative;
+      z-index: 0;
+    }
+    &.ion-color::part(native) {
+      color: var(--color);
+    }
+    &.ion-activated {
+      --border-width: 0.78px;
+      @if $is-back-button {
+        &::part(native) {
+          @include api.glass-background-button-activated;
+        }
+      } @else {
+        --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);
+      }
+      &::part(native)::before {
+        content: '';
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        backdrop-filter: brightness(144%);
+      }
+      &.ion-activated.button-has-icon-only,
+      &.ion-activated.back-button-has-icon-only {
+        transform: scale($scaleup-default-icon-only);
+        &.button-small {
+          transform: scale($scaleup-small-icon-only);
+        }
+        &.button-large {
+          transform: scale($scaleup-large-icon-only);
+        }
+      }
+
+      &:not(.button-has-icon-only):not(.back-button-has-icon-only) {
+        transform: scale($scaleup-default);
+        &.button-small {
+          transform: scale($scaleup-small);
+        }
+        &.button-large {
+          transform: scale($scaleup-large);
+        }
+      }
+    }
+    &.button-disabled {
+      --background: var(--ion-background-color-step-200, #cccccc);
+      opacity: 1;
+
+      &.ion-color {
+        --background: var(--ion-color-base);
+        --color: var(--ion-color-contrast);
+        opacity: 0.38;
+      }
+
+      &::part(native) {
+        color: var(--color);
+      }
+      &.ion-color::part(native) {
+        background: var(--background);
+      }
+      @if $is-back-button {
+        &::part(native) {
+          border: none;
+        }
+      } @else {
+        --border-style: none;
+        --border-width: 0;
+      }
+    }
+  }
+
+  // fill:default only
+  &:not(.button-solid):not(.button-outline):not(.button-clear) {
+    --background: rgba(var(--ios26-glass-background-rgb), 0.72);
+    --background-hover: transparent;
+    --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.5px 1px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.08);
+    }
+
+    &:not(.button-has-icon-only):not(.back-button-has-icon-only) {
+      &:not(.button-small):not(.button-large) {
+        min-height: 44px;
+      }
+    }
+
+    &::part(native) {
+      @include api.glass-background($include-background: false, $include-box-shadow: $is-back-button, $shadow-opacity: 0.08);
+    }
+
+    &:not(.button-disabled) {
+      opacity: 1; // for ion-back-button
+    }
+    &:not(.ion-activated):hover {
+      opacity: 0.72;
+    }
+    --color: rgb(var(--ion-text-color-rgb, 0, 0, 0));
+    &.ion-color {
+      --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1);
+    }
+    &.ion-activated {
+      &::part(native) {
+        @include api.glass-background-button-activated;
+        opacity: 1;
+        color: var(--color);
+      }
+      --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+      &.ion-color {
+        --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1);
+      }
+      &.ion-activated.button-has-icon-only,
+      &.ion-activated.back-button-has-icon-only {
+        transform: scale($scaleup-default-icon-only);
+        &.button-small {
+          transform: scale($scaleup-small-icon-only);
+        }
+        &.button-large {
+          transform: scale($scaleup-large-icon-only);
+        }
+      }
+
+      &:not(.button-has-icon-only):not(.back-button-has-icon-only) {
+        transform: scale($scaleup-default);
+        &.button-small {
+          transform: scale($scaleup-small);
+        }
+        &.button-large {
+          transform: scale($scaleup-large);
+        }
+      }
+    }
+    &.button-disabled {
+      opacity: 1;
+      --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
+      &.ion-color {
+        --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.5);
+      }
+    }
+  }
+
+  &.button-has-icon-only,
+  &.back-button-has-icon-only {
+    &:not(.button-small):not(.button-large) {
+      --padding-bottom: 2px;
+      --padding-end: 2px;
+      --padding-start: 2px;
+      --padding-top: 2px;
+      @if $is-back-button {
+        --min-height: 44px;
+        --min-width: 44px;
+      } @else {
+        &::part(native) {
+          width: 44px;
+          height: 44px;
+        }
+      }
+    }
+
+    ion-icon {
+      font-size: 1.4rem;
+      &[name='close-outline'] {
+        font-size: 2rem;
+      }
+    }
+  }
+}
+
+ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button, ion-button:not(.button-clear), ion-menu-button.menu-button-hidden)) {
+  @include theme-buttons;
+}
+
+// Ionic's collapsing-header transition has a more specific contextual selector.
+.header-collapse-main
+  :where(ion-toolbar.in-toolbar)
+  ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button, ion-button:not(.button-clear), ion-menu-button.menu-button-hidden)) {
+  transition: transform var(--ios26-activated-transition-duration) ease-out;
+}
+
+ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button, ion-button.button-clear)) {
+  ion-button {
+    margin: 0 6px;
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+    &:only-child {
+      margin: 0;
+    }
+  }
+}
+
+ion-button.ios:not(.ios26-disabled) {
+  @include theme-button;
+}
+ion-back-button.ios:not(.ios26-disabled) {
+  @include theme-button($is-back-button: true);
+}

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

@@ -0,0 +1,7 @@
+ion-card.ios:not(.ios26-disabled) {
+  border-radius: 24px;
+
+  ion-list ion-item {
+    --padding-start: 0;
+  }
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Since iOS26, content is now displayed to the full extent of the top and bottom safe areas,
+ * so we adjust the margin and padding of the content.
+ * Also supports virtual scrolling using .ion-content-scroll-host.
+ */
+.ion-page.ios:not(.ios26-disabled):has(ion-header.header-translucent)
+  ion-content.ios:not(.ios26-disabled).content-fullscreen:has(.ion-content-scroll-host) {
+  --padding-top: calc(var(--offset-top) * -1);
+  > *:not(.ion-content-scroll-host, ion-fab) {
+    transform: translateY(var(--offset-top));
+  }
+  .ion-content-scroll-host {
+    padding-top: var(--offset-top);
+  }
+}
+.ion-page.ios:not(.ios26-disabled):not(:has(ion-footer)) ion-content.ios:not(.ios26-disabled).content-fullscreen .ion-content-scroll-host {
+  margin-bottom: calc(calc(60px + var(--ios26-floating-safe-area-bottom)) * -1);
+  padding-bottom: calc(60px + var(--ios26-floating-safe-area-bottom));
+}
+ion-content.ios:not(.ios26-disabled).content-fullscreen:not(:has(.ion-content-scroll-host)) {
+  --padding-bottom: calc(60px + var(--ios26-floating-safe-area-bottom));
+}

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

@@ -0,0 +1,9 @@
+@use '../utils/api';
+
+ion-datetime.ios:not(.ios26-disabled) {
+  @include api.glass-background-overlay;
+  border-radius: 24px;
+
+  --wheel-highlight-background: transparent;
+  --wheel-highlight-border-radius: 24px;
+}

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

@@ -0,0 +1,104 @@
+@use '../utils/api';
+
+$scaleup-small-icon-only: api.$button-scaleup-small-icon-only;
+$scaleup-default-icon-only: api.$button-scaleup-default-icon-only;
+$scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
+
+ion-fab.ios:not(.ios26-disabled) {
+  --transform-value: 2.5px;
+  &:has(> ion-fab-button.fab-button-small) {
+    --transform-value: 4px;
+  }
+
+  ion-fab-button {
+    --background: rgba(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.5px 1px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.08);
+    --transition:
+      var(--ios26-activated-transition-duration) transform cubic-bezier(0.25, 1.11, 0.78, 1.59),
+      var(--ios26-activated-transition-duration) color ease;
+    --background-activated-opacity: 0;
+    --background-focused-opacity: 0;
+    --background-hover-opacity: 0;
+
+    --color: rgb(var(--ion-text-color-rgb, 0, 0, 0));
+
+    /**
+     * 60px + border0.5px + 0.5px
+     */
+    width: 61px;
+    height: 61px;
+
+    &.fab-button-in-list,
+    &.fab-button-small {
+      width: 48px;
+      height: 48px;
+    }
+
+    &.ion-activated {
+      --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+      &::part(native) {
+        @include api.glass-background-button-activated;
+        transform: scale($scaleup-default-icon-only) translateZ(0);
+        -webkit-transform: scale($scaleup-default-icon-only) translateZ(0);
+      }
+      &.fab-button-large {
+        &::part(native) {
+          transform: scale($scaleup-large-icon-only) translateZ(0);
+          -webkit-transform: scale($scaleup-large-icon-only) translateZ(0);
+        }
+      }
+      &.fab-button-small {
+        &::part(native) {
+          transform: scale($scaleup-small-icon-only) translateZ(0);
+          -webkit-transform: scale($scaleup-small-icon-only) translateZ(0);
+        }
+      }
+      &.ion-color {
+        --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1);
+      }
+    }
+
+    &::part(native) {
+      background-clip: border-box;
+      @include api.glass-background($include-background: false, $include-box-shadow: false);
+    }
+  }
+
+  ion-fab-list {
+    &.fab-list-side-top,
+    &.fab-list-side-bottom {
+      transform: translateX(var(--transform-value));
+    }
+    &.fab-list-side-start,
+    &.fab-list-side-end {
+      transform: translateY(var(--transform-value));
+    }
+  }
+
+  &.fab-vertical-top {
+    top: var(--ios26-floating-safe-area-top);
+  }
+
+  &.fab-vertical-bottom {
+    bottom: var(--ios26-floating-safe-area-bottom);
+  }
+
+  &.fab-horizontal-start {
+    left: calc(16px + var(--ios26-menu-width, var(--ion-safe-area-left), 0px));
+  }
+
+  &.fab-horizontal-end {
+    right: calc(16px + var(--ion-safe-area-right, 0px));
+  }
+
+  &:has(.fab-button-small) {
+    &.fab-horizontal-start {
+      left: calc(10px + var(--ios26-menu-width, var(--ion-safe-area-left), 0px));
+    }
+
+    &.fab-horizontal-end {
+      right: calc(10px + var(--ion-safe-area-right, 0px));
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+@mixin outline-field($control) {
+  --placeholder-opacity: 1;
+  --padding-top: 12px;
+  --padding-bottom: 0;
+  margin-bottom: 12px;
+
+  .#{$control}-control,
+  .#{$control}-wrapper {
+    flex-direction: column;
+  }
+
+  .label-text-wrapper {
+    max-width: 100%;
+    margin: 0 2px 4px;
+    padding: 0;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    transform: none;
+  }
+
+  .native-wrapper {
+    min-height: 48px;
+    border: 1px solid
+      var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+    border-radius: 10px;
+    background: var(--ion-background-color, #fff);
+    transition: border-color 150ms ease;
+  }
+
+  .#{$control}-bottom {
+    inset-inline: 0;
+    padding: 4px 2px 0;
+    border: 0;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  &.has-focus {
+    .label-text-wrapper {
+      color: var(--highlight-color-focused);
+    }
+
+    .native-wrapper {
+      border-color: var(--highlight-color-focused);
+    }
+  }
+
+  &.ion-touched.ion-invalid .native-wrapper {
+    border-color: var(--highlight-color-invalid);
+  }
+
+  &.has-focus.ion-touched.ion-invalid .label-text-wrapper {
+    color: var(--highlight-color-invalid);
+  }
+}
+
+ion-input.ios:not(.ios26-disabled) {
+  &.input-fill-outline {
+    @include outline-field('input');
+
+    .native-input {
+      min-height: 46px;
+      padding-inline: 12px;
+    }
+  }
+}
+
+ion-textarea.ios:not(.ios26-disabled) {
+  &.textarea-fill-outline {
+    @include outline-field('textarea');
+
+    .native-wrapper {
+      min-height: 88px;
+    }
+
+    .native-textarea {
+      min-height: 86px;
+      padding-block: 12px;
+      padding-inline: 12px;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+@use '../utils/structured-list';
+
+ion-list.ios:not(.ios26-disabled) {
+  @include structured-list.support-text;
+  ion-item {
+    --background-hover-opacity: 0;
+    --background-focused-opacity: 0;
+  }
+}
+
+ion-list.list-inset.ios:not(.ios26-disabled) {
+  @include structured-list.layout(20px, 24px);
+
+  ion-radio-group,
+  ion-reorder-group {
+    display: block;
+  }
+
+  ion-radio-group > .radio-group-top {
+    padding-inline-start: calc(var(--ion-safe-area-left, 0) + 20px);
+    padding-inline-end: calc(var(--ion-safe-area-right, 0) + 20px);
+  }
+
+  > :is(#{structured-list.$groups}) {
+    ion-item {
+      // To draw lines inside
+      --inner-padding-end: 0;
+
+      &::part(native) {
+        padding-right: calc(var(--ion-safe-area-right, 0px) + 18px);
+      }
+
+      --min-height: 52px;
+
+      & > ion-input[labelplacement='floating'] {
+        transition: transform 200ms ease;
+
+        &:not(.label-floating) {
+          transform: translateY(-2px);
+        }
+      }
+    }
+  }
+}