@rdlabo/ionic-theme-ios26 0.0.3 → 0.1.0

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/{utils/default-variables.scss → default-variables.scss}

@@ -1,10 +1,14 @@
 :root {
+  --ios26-floating-safe-area-top: max(10px, var(--ion-safe-area-top, 0px));
   --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-shadow-rgb: 224, 224, 224;
+  --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-dark-class.scss → ionic-theme-ios26-dark-class.scss}

@@ -1,4 +1,4 @@
-@use 'components-dark/theme-dark';
+@use 'utils/theme-dark';
 
 .ion-palette-dark {
   @include theme-dark.default-variables;

package/src/{ionic-theme-dark-system.scss → ionic-theme-ios26-dark-system.scss}

@@ -1,4 +1,4 @@
-@use 'components-dark/theme-dark';
+@use 'utils/theme-dark';
 
 @media (prefers-color-scheme: dark) {
   :root {

package/src/ionic-theme-ios26.scss

@@ -1,32 +1,22 @@
-@use 'utils/default-variables';
-
-@use 'utils/api';
 @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';
-
-.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));
-  }
-}
+@use 'components/ion-toolbar';

package/src/utils/api.scss

@@ -1,20 +1,21 @@
-@mixin glass-background($opacity: 0.4, $blur: 6px, $saturate: 180%) {
+@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-shadow-rgb), 0.2),
-    0 0 12px 0 rgba(var(--ios26-color-shadow-rgb), 0.8);
+    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);
-  transition: box-shadow 0.1s ease;
 }
 
-@mixin glass-background-dark-active($opacity: 0.25, $blur: 7px, $saturate: 180%) {
+@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: 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;
+  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/{components-dark → utils}/theme-dark.scss

@@ -1,14 +1,16 @@
-@use '../components-dark/ion-button';
+@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-shadow-rgb: translarent;
+  --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.ion-button-dark;
+  @include ion-button;
 }

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

@@ -55,30 +55,35 @@
     }
   }
 
-  ion-item-group ion-item {
-    ion-text[slot='end'] {
-      padding-left: 8px;
-    }
+  ion-item-group,
+  ion-reorder-group,
+  ion-accordion-group,
+  ion-radio-group {
+    ion-item {
+      ion-text[slot='end'] {
+        padding-left: 8px;
+      }
 
-    &.item-disabled {
-      opacity: 1;
+      &.item-disabled {
+        opacity: 1;
 
-      & > * {
-        opacity: 0.4;
-      }
+        & > * {
+          opacity: 0.4;
+        }
 
-      &::part(detail-icon) {
-        opacity: 0.1;
+        &::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-button[slot='end'] {
+        &.ion-align-self-end {
+          transform: translateY(-7px);
+        }
+        ion-icon[slot='icon-only'] {
+          font-size: 1.2rem !important;
+          transform: translateY(4px);
+        }
       }
     }
   }

package/src/utils/translucent.scss

@@ -1,70 +1,71 @@
 @use 'api';
 
-.ios {
-  ion-header.header-translucent,
-  ion-footer.footer-translucent {
-    .header-background,
-    .footer-background {
-      backdrop-filter: none;
-    }
+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-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;
-  }
+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;
+}
 
-  .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-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::part(background)::before,
-  ion-content::part(background)::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    pointer-events: none;
-    z-index: 1;
-  }
+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-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::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 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-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;
-  }
+.ion-page:has(ion-footer:not(.footer-translucent)) ion-content::part(background)::after {
+  content: none;
 }

package/build-sass.js

@@ -1,25 +0,0 @@
-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-
-const srcDir = path.resolve(__dirname, 'src');
-const outDir = path.resolve(__dirname, 'dist/css');
-
-// 出力先ディレクトリがなければ作る
-if (!fs.existsSync(outDir)) {
-  fs.mkdirSync(outDir, { recursive: true });
-}
-
-// src ディレクトリの .scss ファイルを取得
-const scssFiles = fs.readdirSync(srcDir).filter(f => f.endsWith('.scss'));
-
-scssFiles.forEach(file => {
-  const srcPath = path.join(srcDir, file);
-  const fileName = path.basename(file, '.scss');
-  const outPath = path.join(outDir, `${fileName}.min.css`);
-
-  console.log(`Building ${srcPath} → ${outPath}`);
-  execSync(`npx sass ${srcPath} ${outPath} --style=compressed`, { stdio: 'inherit' });
-});
-
-console.log('All SCSS files compiled successfully!');

package/demo/src/theme/theme-ios26.scss

@@ -1,25 +0,0 @@
-/**
- * You should use:
- * @use '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26.min.css';
- * Here for development:
- */
-@use '../../../src/ionic-theme-ios26';
-
-:root {
-  --ios26-color-background-rgb: var(--ion-color-light-rgb);
-}
-
-ion-back-button {
-  --color: var(--ion-color-dark);
-}
-
-section.section-example {
-  background: var(--ion-background-color, #fff);
-  border-radius: 24px;
-  padding: 16px;
-  margin: 16px;
-}
-
-ion-searchbar .searchbar-input-container {
-  margin: 0 20px !important;
-}

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

@@ -1,28 +0,0 @@
-@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;
-  }
-}