@rdlabo/ionic-theme-ios26 0.0.2 → 0.0.3

package/demo/src/app/tabs/tabs.page.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TabsPage } from './tabs.page';
+import { testConfig } from '../../../../util/test.config';
+
+describe('TabsPage', () => {
+  let component: TabsPage;
+  let fixture: ComponentFixture<TabsPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TabsPage],
+      providers: testConfig.providers,
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TabsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/tabs/tabs.page.ts

@@ -0,0 +1,28 @@
+import { Component, ElementRef, inject, OnInit } from '@angular/core';
+import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular/standalone';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+
+@Component({
+  selector: 'app-tabs',
+  templateUrl: 'tabs.page.html',
+  styleUrls: ['tabs.page.scss'],
+  imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel],
+})
+export class TabsPage implements OnInit {
+  readonly #router = inject(Router);
+  readonly #el = inject(ElementRef);
+  ngOnInit() {
+    this.#router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params) => {
+      const tabBar = this.#el.nativeElement.querySelector('ion-tab-bar');
+      if (!tabBar) {
+        return;
+      }
+      if (['/main/settings'].includes(params.urlAfterRedirects)) {
+        tabBar.classList.add('tab-bar-hide');
+      } else if (tabBar) {
+        tabBar.classList.remove('tab-bar-hide');
+      }
+    });
+  }
+}

package/demo/src/app/tabs/tabs.routes.ts

@@ -0,0 +1,41 @@
+import { Routes } from '@angular/router';
+import { TabsPage } from './tabs.page';
+import { IndexPageComponent } from '../index/index-page.component';
+import { AlbumPage } from '../album/album-page.component';
+import { SettingsPage } from '../settings/settings-page.component';
+import { HealthPage } from '../health/health-page.component';
+
+export const routes: Routes = [
+  {
+    path: 'main',
+    component: TabsPage,
+    children: [
+      {
+        path: 'index',
+        loadChildren: () => import('../index/index.routes').then((m) => m.routes),
+      },
+      {
+        path: 'album',
+        component: AlbumPage,
+      },
+      {
+        path: 'settings',
+        component: SettingsPage,
+      },
+      {
+        path: 'health',
+        component: HealthPage,
+      },
+      {
+        path: '',
+        redirectTo: '/main/index',
+        pathMatch: 'full',
+      },
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/main/index',
+    pathMatch: 'full',
+  },
+];

package/demo/src/global.scss

@@ -0,0 +1,47 @@
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@use '@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@use '@ionic/angular/css/normalize.css';
+@use '@ionic/angular/css/structure.css';
+@use '@ionic/angular/css/typography.css';
+@use '@ionic/angular/css/display.css';
+
+/* Optional CSS utils that can be commented out */
+@use '@ionic/angular/css/padding.css';
+@use '@ionic/angular/css/float-elements.css';
+@use '@ionic/angular/css/text-alignment.css';
+@use '@ionic/angular/css/text-transformation.css';
+@use '@ionic/angular/css/flex-utils.css';
+
+/**
+ * Ionic Dark Mode
+ * -----------------------------------------------------
+ * For more info, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+@use 'theme/theme-ios26';
+
+//@use "@ionic/angular/css/palettes/dark.always.css";
+
+//@use "@ionic/angular/css/palettes/dark.class.css";
+/**
+ * 任意でダークモードを使うことができて便利なため、インポートしています（Library）。
+ * 一般的な用途では不要です。
+ */
+@use '../../src/ionic-theme-dark-class';
+
+@use '@ionic/angular/css/palettes/dark.system.css';
+@use '../../src/ionic-theme-dark-system';

package/demo/src/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Demo of ionic-theme-ios26</title>
+    <base href="/" />
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+
+    <!-- add to homescreen for ios -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/demo/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

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

@@ -0,0 +1,25 @@
+/**
+ * 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/demo/src/theme/variables.scss

@@ -0,0 +1,2 @@
+// For information on how to create your own theme, please see:
+// http://ionicframework.com/docs/theming/

package/demo/tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

package/demo/tsconfig.json

@@ -0,0 +1,30 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2022",
+    "module": "es2020",
+    "lib": ["es2018", "dom"],
+    "useDefineForClassFields": false
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/demo/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

package/package.json

@@ -1,22 +1,49 @@
 {
   "name": "@rdlabo/ionic-theme-ios26",
-  "version": "0.0.2",
+  "version": "0.0.3",
+  "description": "iOS26 CSS Theme for Ionic Framework",
   "exports": {
+    "./src/*": {
+      "style": "./src/*"
+    },
     "./css/*": {
       "style": "./css/*"
     },
     "./package.json": {
       "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/rdlabo-ionic-theme-ios26.mjs"
     }
   },
-  "sideEffects": false,
-  "module": "fesm2022/rdlabo-ionic-theme-ios26.mjs",
-  "typings": "index.d.ts",
-  "dependencies": {
-    "tslib": "^2.3.0"
+  "scripts": {
+    "build": "node build-sass.js",
+    "build:demo": "cd demo && npm install && npm run build -- --configuration=production",
+    "prepare": "husky install",
+    "fmt": "prettier --write \"./**/*.{scss,ts}\" &&  prettier --parser angular --write \"./**/*.html\"",
+    "release": "np --no-tests"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/rdlabo-team/ionic-theme-ios26.git"
+  },
+  "keywords": [
+    "ionic",
+    "framework",
+    "theme",
+    "css",
+    "ios26"
+  ],
+  "author": "Masahiko Sakakibara <sakakibara@rdlabo.jp>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rdlabo-team/ionic-theme-ios26/issues"
+  },
+  "homepage": "https://github.com/rdlabo-team/ionic-theme-ios26#readme",
+  "devDependencies": {
+    "@ionic/angular": "^8.7.5",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.1",
+    "np": "^10.2.0",
+    "prettier": "^3.6.2",
+    "sass": "^1.93.2",
+    "typescript": "^5.9.2"
   }
-}
+}

package/prettier.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  /**
+   * Default value is 80. 80 is too small in wide screen.
+   */
+  printWidth: 140,
+  /**
+   * Why: Preferred in us.
+   */
+  singleQuote: true,
+  /**
+   * Why: ES compatibility is handled by TypeScript compilation.
+   */
+  trailingComma: 'all',
+  /**
+   * Why: Follow Angular tslint-rule
+   */
+  arrowParens: 'always',
+};

package/src/components/ion-action-sheet.scss

@@ -0,0 +1,42 @@
+@use '../utils/api';
+
+ion-action-sheet.ios {
+  --button-color: var(--ion-text-color);
+  --button-background-selected: transparent;
+  --backdrop-opacity: 0.2;
+
+  .action-sheet-container {
+    @include api.glass-background(0.9);
+    margin: 0 8px 8px;
+    border-radius: 32px;
+
+    .action-sheet-title {
+      padding-top: 8px;
+    }
+
+    .action-sheet-group {
+      background: transparent;
+
+      button {
+        border-radius: 32px;
+        background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);
+        padding: 0 14px;
+        min-height: 52px;
+        span.action-sheet-button-inner {
+          font-size: 1rem;
+          ion-icon {
+            font-size: 1.2rem;
+          }
+        }
+
+        &:not(:last-child) {
+          margin-bottom: 8px;
+        }
+      }
+    }
+
+    button.action-sheet-cancel {
+      margin-top: 12px;
+    }
+  }
+}

package/src/components/ion-alert.scss

@@ -0,0 +1,31 @@
+@use '../utils/api';
+
+ion-alert.ios {
+  --backdrop-opacity: 0.2;
+
+  .alert-wrapper {
+    @include api.glass-background(0.9);
+    border-radius: 32px;
+
+    .alert-head,
+    .alert-message {
+      text-align: left;
+    }
+
+    .alert-button-group {
+      padding: 0 8px 12px;
+      .alert-button {
+        border: none;
+        border-radius: 32px;
+        margin: 0 4px;
+        min-width: calc(50% - 8px);
+        background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);
+        color: var(--ion-text-color);
+      }
+    }
+
+    button.action-sheet-cancel {
+      margin-top: 12px;
+    }
+  }
+}

package/src/components/ion-button.scss

@@ -0,0 +1,111 @@
+@use '../utils/api';
+
+@mixin theme-button {
+  max-height: inherit;
+  margin: 8px 4px;
+  &:first-child {
+    margin-left: 12px;
+  }
+  &:last-child {
+    margin-right: 12px;
+  }
+
+  transition:
+    transform 100ms ease-out,
+    color 50ms ease;
+  will-change: transform;
+
+  &.ion-activated {
+    transform: scale(1.2);
+    box-shadow: none;
+    ion-icon {
+      // 色を指定しなくても半透明に
+      //color: var(--ion-color-medium-tint);
+    }
+  }
+
+  // button size default
+  font-size: 1.05rem;
+  &:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native) {
+    padding: 0 16px;
+    min-height: 44px;
+  }
+
+  &.button-small {
+    font-size: 1.04rem;
+    &:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native) {
+      padding: 0 12px;
+      min-height: 36px;
+    }
+  }
+
+  &.button-large {
+    font-size: 1.06rem;
+    &:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native) {
+      padding: 0 20px;
+      min-height: 52px;
+    }
+  }
+
+  &::part(native) {
+    border-radius: 25px;
+  }
+
+  &:not(.button-solid):not(.ios26-button-solid):not(.button-outline):not(.ios26-button-outline):not(.button-clear):not(
+      .ios26-button-clear
+    )::part(native) {
+    @include api.glass-background;
+    border-radius: 25px;
+  }
+
+  &:not(.button-solid):not(.ios26-button-solid):not(.button-clear):not(.ios26-button-clear) {
+    color: var(--color);
+    &.ion-activated {
+      &::part(native) {
+        &::after {
+          background: transparent !important;
+        }
+      }
+    }
+  }
+
+  &.button-has-icon-only,
+  &.back-button-has-icon-only {
+    &::part(native) {
+      border-radius: 50%;
+      width: 44px;
+      height: 44px;
+      padding: 2px;
+    }
+
+    ion-icon {
+      font-size: 1.4rem !important;
+      &[name='close-outline'] {
+        font-size: 2rem !important;
+      }
+    }
+  }
+}
+
+/**
+ * .ios26-no-liquid-glass を適用しない限り、デフォルトスタイル
+ */
+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),
+  /* collapseのanimateBackButton対策 */
+  ion-back-button:not(.ios26-no-liquid-glass) {
+    @include theme-button;
+  }
+}
+
+/**
+ * .ios26-liquid-glass を任意で適用した場合のスタイル
+ */
+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,
+ion-back-button.ios.ios26-liquid-glass {
+  @include theme-button;
+}

package/src/components/ion-card.scss

@@ -0,0 +1,3 @@
+ion-card.ios {
+  border-radius: 24px;
+}

package/src/components/ion-fab.scss

@@ -0,0 +1,16 @@
+@use '../utils/api';
+
+ion-fab.ios {
+  ion-fab-button {
+    &::part(native) {
+      @include api.glass-background;
+      color: rgb(var(--ios26-color-dark-rgb));
+    }
+    --background-activated: rgba(var(--ios26-color-light-rgb), 0.3);
+  }
+  // TODO: これはUtility Classにマイグレートする必要があります
+  &.inner-tab-bar {
+    right: calc(16px + var(--ion-safe-area-right, 0px));
+    bottom: var(--ios26-floating-safe-area-bottom);
+  }
+}

package/src/components/ion-list.scss

@@ -0,0 +1,33 @@
+@use '../utils/theme-list-inset';
+
+ion-list.list-inset.ios {
+  @include theme-list-inset.ion-list-inset();
+
+  ion-item-group,
+  ion-reorder-group {
+    border-radius: 24px;
+    overflow: hidden;
+
+    ion-item {
+      // To draw lines inside
+      --inner-padding-end: 0;
+      &::part(native) {
+        padding-right: 18px;
+      }
+      &::part(detail-icon) {
+        //padding-right: 18px;
+        margin-inline-end: 0;
+      }
+
+      --min-height: 52px;
+
+      & > ion-input[labelplacement='floating'] {
+        transition: transform 0.2s ease;
+
+        &:not(.label-floating) {
+          transform: translateY(-2px);
+        }
+      }
+    }
+  }
+}

package/src/components/ion-modal.scss

@@ -0,0 +1,6 @@
+ion-modal.ios {
+  ion-toolbar {
+    padding-right: calc(var(--ion-safe-area-right) + 4px) !important;
+    padding-left: calc(var(--ion-safe-area-left) + 4px) !important;
+  }
+}

package/src/components/ion-popover.scss

@@ -0,0 +1,21 @@
+@use '../utils/api';
+
+ion-popover.ios {
+  --backdrop-opacity: 0.04;
+  &::part(arrow) {
+    //display: none;
+  }
+  &:not(.ios26-no-liquid-glass) {
+    &::part(content) {
+      @include api.glass-background(0.6);
+      border-radius: 24px;
+      padding: 0;
+    }
+  }
+  ion-list {
+    background: transparent;
+    ion-item {
+      --background: transparent;
+    }
+  }
+}

package/src/components/ion-searchbar.scss

@@ -0,0 +1,37 @@
+@use '../utils/api';
+
+ion-modal.ios {
+  ion-searchbar:not(.ios26-no-liquid-glass) {
+    .searchbar-input-container {
+      margin: 0 6px;
+      input.searchbar-input {
+        // Modal表示でのアイコン非表示の不具合の対応
+        backdrop-filter: none;
+      }
+    }
+  }
+}
+
+ion-searchbar.ios:not(.ios26-no-liquid-glass) {
+  min-height: 60px;
+  padding: 0;
+
+  ion-icon.searchbar-search-icon {
+    inset-inline-start: 12px;
+  }
+
+  .searchbar-input-container {
+    margin: 0 8px 0 16px;
+    align-self: center;
+    justify-self: center;
+    input.searchbar-input {
+      min-height: 44px;
+      @include api.glass-background;
+      border-radius: 20px;
+      padding-inline-start: 2.4rem !important;
+    }
+    .searchbar-clear-button {
+      padding-inline-end: 2rem !important;
+    }
+  }
+}