@rdlabo/ionic-theme-ios26 0.0.1 → 0.0.3

package/src/components/ion-segment.scss

@@ -0,0 +1,10 @@
+ion-toolbar.ios {
+  ion-segment {
+    width: calc(100% - 24px);
+    border-radius: 16px;
+
+    ion-segment-button::part(indicator-background) {
+      border-radius: 16px;
+    }
+  }
+}

package/src/components/ion-tabs.scss

@@ -0,0 +1,47 @@
+@use '../utils/api';
+
+ion-tab-bar.ios {
+  @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.1);
+        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,3 @@
+ion-toast.ios {
+  --border-radius: 24px;
+}

package/src/components/ion-toggle.scss

@@ -0,0 +1,47 @@
+@use '../utils/api';
+
+@keyframes activate-animation {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1.2, 1.6);
+  }
+}
+
+@keyframes deactivate-animation {
+  0% {
+    transform: scale(1.2, 1.6);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+ion-toggle.ios {
+  --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(handle) {
+    transition: transform 0.3s ease;
+  }
+  &.toggle-activated::part(handle) {
+    transform: scale(1.2, 1.6) translateX(calc(38px * -0.1));
+    @include api.glass-background(0.1, 0.5px, 120%);
+    box-shadow:
+      inset 0 0 4px 0 rgba(var(--ios26-color-shadow-rgb), 0.2),
+      0 0 6px 0 rgba(var(--ios26-color-shadow-rgb), 0.8);
+  }
+  &::part(track) {
+    overflow: visible;
+    width: 64px;
+    height: 28px;
+    transition: transform 0.3s ease;
+  }
+  &.toggle-checked.toggle-activated::part(track) {
+    transform-origin: left center;
+    transform: scaleX(0.926);
+  }
+}

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

@@ -0,0 +1,28 @@
+@use '../utils/api';
+
+@mixin theme-dark-button {
+  &.ion-activated {
+    &::part(native) {
+      @include api.glass-background-dark-active;
+    }
+    ion-icon {
+      color: rgb(255, 255, 255) !important;
+    }
+  }
+}
+
+@mixin ion-button-dark {
+  ion-header.ios,
+  ion-footer.ios {
+    ion-buttons:not(.ios26-no-liquid-glass) ion-button:not(.ios26-no-liquid-glass),
+    ion-buttons:not(.ios26-no-liquid-glass) ion-back-button:not(.ios26-no-liquid-glass) {
+      @include theme-dark-button;
+    }
+  }
+
+  ion-buttons.ios.ios26-liquid-glass ion-button:not(.ios26-no-liquid-glass),
+  ion-buttons.ios.ios26-liquid-glass ion-back-button:not(.ios26-no-liquid-glass),
+  ion-button.ios.ios26-liquid-glass {
+    @include theme-dark-button;
+  }
+}

package/src/components-dark/theme-dark.scss

@@ -0,0 +1,14 @@
+@use '../components-dark/ion-button';
+
+@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-shadow-rgb: translarent;
+  --ios26-color-background-rgb: 0, 0, 0;
+  --ios26-color-edge-rgb: 64, 64, 64;
+}
+
+@mixin theme-dark {
+  @include ion-button.ion-button-dark;
+}

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

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

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

@@ -0,0 +1,8 @@
+@use 'components-dark/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,32 @@
+@use 'utils/default-variables';
+
+@use 'utils/api';
+@use 'utils/translucent';
+
+@use 'components/ion-action-sheet';
+@use 'components/ion-alert';
+@use 'components/ion-button';
+@use 'components/ion-card';
+@use 'components/ion-fab';
+@use 'components/ion-list';
+@use 'components/ion-modal';
+@use 'components/ion-popover';
+@use 'components/ion-searchbar';
+@use 'components/ion-segment';
+@use 'components/ion-tabs';
+@use 'components/ion-toast';
+@use 'components/ion-toggle';
+
+.ios {
+  /**
+   * iOS26から上下のセーフエリアいっぱいまでコンテンツを表示するようになったため、
+   * コンテンツのmarginとpaddingを調整します。なお、Angular CDK Scrollingにも対応しています。
+   */
+  .ion-page:not(:has(ion-footer)) cdk-virtual-scroll-viewport {
+    margin-bottom: calc(calc(56px + var(--ios26-floating-safe-area-bottom)) * -1);
+    padding-bottom: calc(56px + var(--ios26-floating-safe-area-bottom));
+  }
+  ion-content:not(:has(cdk-virtual-scroll-viewport)) {
+    --padding-bottom: calc(56px + var(--ios26-floating-safe-area-bottom));
+  }
+}

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,20 @@
+@mixin glass-background($opacity: 0.4, $blur: 6px, $saturate: 180%) {
+  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-shadow-rgb), 0.2),
+    0 0 12px 0 rgba(var(--ios26-color-shadow-rgb), 0.8);
+  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);
+  transition: box-shadow 0.1s ease;
+}
+
+@mixin glass-background-dark-active($opacity: 0.25, $blur: 7px, $saturate: 180%) {
+  background: rgba(var(--ios26-color-tab-active-rgb), $opacity);
+  backdrop-filter: blur($blur) saturate($saturate);
+  box-shadow: inset 0 0 8px 0 rgba(var(--ios26-color-tab-active-rgb), 0.2);
+  border: 0.5px solid rgba(var(--ios26-color-tab-active-rgb), 0.7);
+  transition: box-shadow 0.1s ease;
+}

package/src/utils/default-variables.scss

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

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

@@ -0,0 +1,92 @@
+@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-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,70 @@
+@use 'api';
+
+.ios {
+  ion-header.header-translucent,
+  ion-footer.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);
+      }
+    }
+  }
+
+  .header-collapse-main ion-toolbar.in-toolbar ion-title,
+  .header-collapse-main ion-toolbar.in-toolbar ion-buttons {
+    transition: all 0.5s ease-in-out;
+  }
+
+  .header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
+  .header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
+    filter: blur(2px);
+    transform: translateY(8px);
+  }
+
+  ion-content::part(background)::before,
+  ion-content::part(background)::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .ion-page:has(ion-header.header-translucent) ion-content::part(background)::before {
+    z-index: 2;
+    top: 0;
+    height: calc(66px + var(--ion-safe-area-top));
+    box-shadow:
+      inset 0 0 0 0 rgba(var(--ios26-color-background-rgb), 0),
+      inset 0 calc(66px + var(--ion-safe-area-top)) 20px -20px rgba(var(--ios26-color-background-rgb), 1);
+  }
+
+  ion-content::part(background)::after {
+    z-index: 2;
+    bottom: 0;
+    height: calc(56px + var(--ios26-floating-safe-area-bottom));
+    box-shadow:
+      inset 0 0 0 0 rgba(var(--ios26-color-background-rgb), 0),
+      inset 0 calc(-50px - var(--ios26-floating-safe-area-bottom)) 40px -40px rgba(var(--ios26-color-background-rgb), 0.8);
+  }
+
+  .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"]
+  }
+}