@rdlabo/ionic-theme-ios26 0.0.2 → 0.0.4

package/src/components/ion-segment.scss

@@ -0,0 +1,45 @@
+@use '../utils/api';
+
+ion-toolbar.ios:not(.ios26-disabled) {
+  &:has(ion-segment) {
+    overflow: visible;
+  }
+  ion-segment {
+    @include api.glass-background;
+    min-height: 44px;
+    border-radius: 25px;
+
+    transition: transform 100ms ease-out;
+    will-change: transform;
+    overflow: visible;
+
+    ion-segment-button {
+      --border-width: 0;
+
+      &::part(indicator-background) {
+        border-radius: 25px;
+        box-shadow: none;
+        background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+      }
+    }
+
+    &.segment-activated {
+      transform: scale(1.1);
+      overflow: visible;
+
+      ion-segment-button {
+        transition: transform 100ms ease-out;
+        &.segment-button-checked {
+          transform: scale(1.1);
+        }
+        &::part(indicator-background) {
+          position: relative;
+          z-index: 1;
+          @include api.glass-background;
+          transform: scale(1.1);
+          transform-origin: center center;
+        }
+      }
+    }
+  }
+}

package/src/components/ion-tabs.scss

@@ -0,0 +1,47 @@
+@use '../utils/api';
+
+ion-tab-bar.ios:not(.ios26-disabled) {
+  @include api.glass-background;
+  z-index: 2;
+
+  border-radius: 40px;
+
+  width: calc(100% - 56px - 16px - 16px - 4px - 16px);
+  max-width: 400px;
+  padding: 2px 2px;
+  bottom: var(--ios26-floating-safe-area-bottom);
+  left: calc(16px + var(--ion-safe-area-left, 0px));
+  position: absolute;
+  margin: auto;
+
+  transition: transform 100ms ease-out;
+  will-change: transform;
+  &:active {
+    transform: scale(1.02);
+    backdrop-filter: saturate(360%);
+  }
+
+  ion-tab-button {
+    & > ion-icon {
+      font-size: 30px;
+    }
+    background: rgba(var(--ios26-color-light-rgb), 0);
+    height: auto;
+    &::part(native) {
+      overflow: visible;
+    }
+
+    &.tab-selected {
+      &::part(native) {
+        backdrop-filter: blur(7px);
+        background: rgba(var(--ios26-color-tab-active-rgb), 0.095);
+        transition: background 0.2s ease;
+        border-radius: 32px;
+      }
+
+      &.ion-activated::part(native) {
+        background: rgba(var(--ios26-color-shadow-rgb), 0.02);
+      }
+    }
+  }
+}

package/src/components/ion-toast.scss

@@ -0,0 +1,12 @@
+@use '../utils/api';
+
+ion-toast.ios:not(.ios26-disabled) {
+  --background: transparent;
+  --start: 16px;
+  --end: 16px;
+
+  &::part(container) {
+    @include api.glass-background;
+    border-radius: 24px;
+  }
+}

package/src/components/ion-toggle.scss

@@ -0,0 +1,56 @@
+@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);
+  }
+  &.toggle-activated::part(handle) {
+    transform: scale(1.4, 1.6) translateX(calc(38px * -0.15));
+  }
+}
+
+ion-toggle.ios:not(.ios26-disabled) {
+  --handle-width: 38px;
+  --handle-height: 24px;
+  --handle-max-width: none;
+  --handle-max-height: none;
+  --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);
+  &::part(track) {
+    overflow: visible;
+    width: 64px;
+    height: 28px;
+    transition: transform 0.3s ease;
+  }
+  &.toggle-activated:not(.toggle-checked)::part(handle) {
+    transform: translateX(-4px) scale(1.4, 1.6);
+  }
+  &.toggle-activated::part(handle) {
+    transform: scale(1.4, 1.6);
+    @include api.glass-background(0.1, 0.5px, 120%);
+    transition:
+      transform 300ms,
+      width 120ms ease-in-out 80ms,
+      left 110ms ease-in-out 80ms,
+      right 110ms ease-in-out 80ms;
+    box-shadow: inset 0 0 8px 0 var(--track-background);
+  }
+  &.ion-color.toggle-checked.toggle-activated::part(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::part(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/components/ion-toolbar.scss

@@ -0,0 +1,27 @@
+@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-toolbar.ios:not(.toolbar-title-large):not(.ios26-disabled) {
+  --min-height: 68px;
+}
+
+ion-header.ios:not(.ios26-disabled),
+ion-footer.ios:not(.ios26-disabled) {
+  ion-buttons {
+    margin-left: calc(12px + var(--ion-safe-area-left));
+    margin-right: calc(12px + var(--ion-safe-area-right));
+  }
+  ion-back-button {
+    margin-left: calc(12px + var(--ion-safe-area-left));
+    margin-right: calc(12px + var(--ion-safe-area-right));
+  }
+}

package/src/default-variables.scss

@@ -0,0 +1,12 @@
+:root {
+  --ios26-floating-safe-area-bottom: max(10px, var(--ion-safe-area-bottom, 0px));
+  --ios26-content-box-shadow-opacity: 0.8;
+
+  --ios26-color-dark-rgb: 0, 0, 0;
+  --ios26-color-light-rgb: 255, 255, 255;
+  --ios26-color-tab-active-rgb: 16, 16, 16;
+  --ios26-color-inner-shadow-rgb: 224, 224, 224;
+  --ios26-color-outer-shadow-rgb: 224, 224, 224;
+  --ios26-color-background-rgb: 255, 255, 255;
+  --ios26-color-edge-rgb: 255, 255, 255;
+}

package/src/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/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/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/ionic-theme-ios26.scss

@@ -0,0 +1,23 @@
+@use 'utils/translucent';
+
+@use 'components/ion-action-sheet';
+@use 'components/ion-alert';
+@use 'components/ion-breadcrumbs';
+@use 'components/ion-button';
+@use 'components/ion-card';
+@use 'components/ion-chip';
+@use 'components/ion-content';
+@use 'components/ion-datetime';
+@use 'components/ion-fab';
+@use 'components/ion-list';
+@use 'components/ion-loading';
+@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/md-ion-list-inset.scss

@@ -0,0 +1,19 @@
+@use 'utils/theme-list-inset';
+
+ion-list.list-inset.md {
+  @include theme-list-inset.ion-list-inset();
+
+  ion-item-group > ion-item {
+    & > ion-input[labelplacement='floating'] {
+      transition: transform 0.2s ease;
+
+      &:not(.label-floating) {
+        transform: translateY(-7px);
+      }
+
+      &.label-floating {
+        transform: translateY(-4px);
+      }
+    }
+  }
+}

package/src/utils/api.scss

@@ -0,0 +1,21 @@
+@mixin glass-background($opacity: 0.7, $blur: 2px, $saturate: 360%) {
+  background: rgba(var(--ios26-color-light-rgb), $opacity);
+  backdrop-filter: blur($blur) saturate($saturate);
+  box-shadow:
+    inset 0 0 8px 0 rgba(var(--ios26-color-inner-shadow-rgb), 0.2),
+    0 0 12px 0 rgba(var(--ios26-color-outer-shadow-rgb), 0.82);
+  border-top: 0.5px solid rgba(var(--ios26-color-edge-rgb), 1);
+  border-right: 0.5px solid rgba(var(--ios26-color-edge-rgb), 0.8);
+  border-bottom: 0.5px solid rgba(var(--ios26-color-edge-rgb), 1);
+  border-left: 0.5px solid rgba(var(--ios26-color-edge-rgb), 0.6);
+}
+
+@mixin glass-background-dark-active($opacity: 0.4, $blur: 7px, $saturate: 180%) {
+  background: rgba(var(--ios26-color-tab-active-rgb), $opacity);
+  backdrop-filter: blur($blur) saturate($saturate);
+  box-shadow: none;
+  border-top: 0.5px solid rgba(var(--ios26-color-tab-active-rgb), 0.4);
+  border-right: 0.5px solid rgba(var(--ios26-color-tab-active-rgb), 0.2);
+  border-bottom: 0.5px solid rgba(var(--ios26-color-tab-active-rgb), 0.4);
+  border-left: 0.5px solid rgba(var(--ios26-color-tab-active-rgb), 0.3);
+}

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

@@ -0,0 +1,45 @@
+@use '../api';
+
+@mixin theme-dark-buttons {
+  &:has(.ion-activated) {
+    @include api.glass-background-dark-active;
+  }
+
+  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 {
+  &.ion-activated:not(.button-solid):not(.ios26-button-solid):not(.button-outline):not(.ios26-button-outline):not(.button-clear):not(
+      .ios26-button-clear
+    ) {
+    --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);
+    }
+    &::part(native) {
+      @include api.glass-background-dark-active;
+    }
+    ion-icon {
+      color: rgb(255, 255, 255) !important;
+    }
+  }
+}
+
+@mixin ion-button {
+  ion-buttons:not(.ios26-disabled) {
+    @include theme-dark-buttons;
+  }
+  ion-button:not(.ios26-disabled),
+  ion-back-button:not(.ios26-disabled) {
+    @include theme-dark-button;
+  }
+}

package/src/utils/theme-dark.scss

@@ -0,0 +1,16 @@
+@forward 'dark/ion-button';
+@use 'dark/ion-button' as *;
+
+@mixin default-variables {
+  --ios26-color-dark-rgb: 255, 255, 255;
+  --ios26-color-light-rgb: 58, 58, 58;
+  --ios26-color-tab-active-rgb: 255, 255, 255;
+  --ios26-color-inner-shadow-rgb: translarent;
+  --ios26-color-outer-shadow-rgb: translarent;
+  --ios26-color-background-rgb: 0, 0, 0;
+  --ios26-color-edge-rgb: 64, 64, 64;
+}
+
+@mixin theme-dark {
+  @include ion-button;
+}

package/src/utils/theme-list-inset.scss

@@ -0,0 +1,96 @@
+@mixin ion-list-inset() {
+  background: transparent;
+
+  ion-list-header {
+    display: flex;
+    align-items: center;
+
+    ion-label {
+      font-size: 0.9rem;
+      margin: 8px 4px 4px;
+      color: var(--ion-color-medium-tint);
+    }
+
+    ion-button {
+      margin-top: 8px;
+    }
+
+    ion-note {
+      font-size: 0.9rem;
+      margin: 8px 16px 4px 0;
+    }
+  }
+
+  // TODO: これはUtility Classにマイグレートする必要があります
+  ion-item-group.header-item-group {
+    & > ion-item > ion-label {
+      width: 100%;
+      text-align: center;
+      padding: 32px 16px 16px;
+
+      /**
+       * ion-header.header-collapse-condenseを使って、スクロールによってHeaderを変化させるトリック
+       */
+      ion-header.header-collapse-condense > ion-toolbar {
+        --min-height: 0;
+        visibility: hidden;
+      }
+
+      ion-icon {
+        font-size: 2.8rem;
+        color: #ffffff;
+        border-radius: 20%;
+        padding: 6px;
+      }
+
+      h2 {
+        font-size: 1.2rem;
+        font-weight: bold;
+        margin-top: 8px;
+      }
+
+      ion-text {
+        font-size: 0.9rem;
+      }
+    }
+  }
+
+  ion-item-group,
+  ion-reorder-group,
+  ion-radio-group {
+    ion-item {
+      ion-text[slot='end'] {
+        padding-left: 8px;
+      }
+
+      &.item-disabled {
+        opacity: 1;
+
+        & > * {
+          opacity: 0.4;
+        }
+
+        &::part(detail-icon) {
+          opacity: 0.1;
+        }
+      }
+
+      ion-button[slot='end'] {
+        &.ion-align-self-end {
+          transform: translateY(-7px);
+        }
+        ion-icon[slot='icon-only'] {
+          font-size: 1.2rem !important;
+          transform: translateY(4px);
+        }
+      }
+    }
+  }
+
+  & > ion-note {
+    color: var(--ion-color-medium-tint);
+    font-size: 0.9rem;
+    display: block;
+    margin: 8px 16px 8px 20px;
+  }
+}

package/src/utils/translucent.scss

@@ -0,0 +1,71 @@
+@use 'api';
+
+ion-header.ios:not(.ios26-disabled).header-translucent,
+ion-footer.ios:not(.ios26-disabled).footer-translucent {
+  .header-background,
+  .footer-background {
+    backdrop-filter: none;
+  }
+
+  ion-toolbar {
+    --border-width: 0;
+    --background: transparent;
+    /**
+     * TODO: Not expect work.
+     * https://github.com/ionic-team/ionic-framework/blob/3b80473f2fd5ad4da5a9f5d66f783a69909c8965/core/src/utils/transition/ios.transition.ts#L829C51-L829C60
+     * --opacity: 0;
+     */
+    .toolbar-background {
+      background: transparent !important;
+    }
+    ion-title {
+      filter: blur(0);
+      transform: translateY(0);
+    }
+  }
+}
+
+ion-header.ios:not(.ios26-disabled).header-collapse-main ion-toolbar.in-toolbar ion-title,
+ion-header.ios:not(.ios26-disabled).header-collapse-main ion-toolbar.in-toolbar ion-buttons {
+  transition: all 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);
+  transform: translateY(8px);
+}
+
+ion-content:not(.ios26-disabled)::part(background)::before,
+ion-content:not(.ios26-disabled)::part(background)::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/**
+ * ここから下は、ion-content::before/afterが content:'' を持たない限り表示されない
+ */
+.ion-page:has(ion-header.header-translucent) > ion-content::part(background)::before {
+  z-index: 2;
+  top: 0;
+  height: calc(68px + max(calc(var(--ion-safe-area-top) - 12px), 4px));
+  box-shadow: inset 0 calc(68px + max(calc(var(--ion-safe-area-top) - 12px), 4px)) 16px -16px
+    rgba(var(--ios26-color-background-rgb), var(--ios26-content-box-shadow-opacity));
+}
+
+ion-content::part(background)::after {
+  z-index: 2;
+  bottom: 0;
+  height: calc(56px + var(--ios26-floating-safe-area-bottom));
+  box-shadow: inset 0 calc(-55px - var(--ios26-floating-safe-area-bottom)) 16px -16px
+    rgba(var(--ios26-color-background-rgb), var(--ios26-content-box-shadow-opacity));
+}
+
+.ion-page:has(ion-footer:not(.footer-translucent)) ion-content::part(background)::after {
+  content: none;
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "types": ["@ionic/core/dist/types/components"]
+  }
+}