@rdlabo/ionic-theme-ios26 0.0.3 → 0.1.0

package/demo/src/app/index/pages/toolbar/toolbar.page.html

@@ -0,0 +1,121 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>toolbar</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>toolbar</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button> Start </ion-button>
+    </ion-buttons>
+    <ion-title>Start / End Buttons</ion-title>
+    <ion-buttons slot="end">
+      <ion-button [disabled]="true"> Disable End </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button> Secondary </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button> Primary </ion-button>
+    </ion-buttons>
+    <ion-title>Primary / Secondary Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button>
+        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Icon Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button fill="solid">
+        <ion-icon slot="start" name="person-circle"></ion-icon>
+        Contact
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button fill="solid">
+        Help
+        <ion-icon slot="end" name="help-circle"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Solid Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button fill="outline">
+        <ion-icon slot="start" name="star"></ion-icon>
+        Star
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button fill="outline">
+        Edit
+        <ion-icon slot="end" name="create"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Outline Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button default-href="#"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Back Button</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button auto-hide="false"></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Menu Button</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-segment [value]="'all'">
+      <ion-segment-button [value]="'all'">
+        <ion-label>All</ion-label>
+      </ion-segment-button>
+      <ion-segment-button [value]="'favorites'">
+        <ion-label>Favorites</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-content>

package/demo/src/app/index/pages/toolbar/toolbar.page.spec.ts

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

package/demo/src/app/index/pages/toolbar/toolbar.page.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonMenuButton,
+  IonSearchbar,
+  IonSegment,
+  IonSegmentButton,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-toolbar',
+  templateUrl: './toolbar.page.html',
+  styleUrls: ['./toolbar.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonButtons,
+    IonButton,
+    IonMenuButton,
+    IonSearchbar,
+    IonSegment,
+    IonSegmentButton,
+  ],
+})
+export class ToolbarPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/demo/src/app/settings/settings-page.component.html

@@ -1,11 +1,9 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="/"></ion-back-button>
-    </ion-buttons>
+    <ion-back-button slot="start" defaultHref="/"></ion-back-button>
     <ion-title>Settings</ion-title>
-    <ion-buttons slot="end">
-      <ion-button color="dark" href="https://github.com/rdlabo-team/ionic-theme-ios26"
+    <ion-buttons class="ios26-disabled" slot="end">
+      <ion-button fill="default" href="https://github.com/rdlabo-team/ionic-theme-ios26"
         ><ion-icon name="logo-github" slot="icon-only"></ion-icon
       ></ion-button>
     </ion-buttons>
@@ -33,8 +31,7 @@
     <ion-item-group>
       <ion-item>
         <ion-icon name="airplane" slot="start" style="background: linear-gradient(#f8b250, #f79407)"></ion-icon>
-        <ion-label>Airplane Mode</ion-label>
-        <ion-toggle slot="end" color="success"></ion-toggle>
+        <ion-toggle color="success" justify="space-between">Airplane Mode</ion-toggle>
       </ion-item>
       <ion-item [detail]="true">
         <ion-icon name="wifi" slot="start" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

package/demo/src/app/settings/settings-page.component.spec.ts

@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SettingsPage } from './settings-page.component';
-import { testConfig } from '../../../../util/test.config';
+import { testConfig } from '../../../util/test.config';
 
-describe('VirtualScrollHeaderPage', () => {
+describe('SettingsPage', () => {
   let component: SettingsPage;
   let fixture: ComponentFixture<SettingsPage>;
 

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

@@ -1,7 +1,7 @@
 <ion-tabs>
-  <ion-tab-bar slot="bottom">
+  <ion-tab-bar id="tab-bar-bottom" slot="bottom">
     <ion-tab-button tab="index" href="/main/index">
-      <ion-icon aria-hidden="true" name="documents-outline"></ion-icon>
+      <ion-icon aria-hidden="true" name="documents"></ion-icon>
       <ion-label>Index</ion-label>
     </ion-tab-button>
 
@@ -11,12 +11,12 @@
     </ion-tab-button>
 
     <ion-tab-button tab="settings" href="/main/settings">
-      <ion-icon aria-hidden="true" name="cog-outline"></ion-icon>
+      <ion-icon aria-hidden="true" name="cog"></ion-icon>
       <ion-label>Settings</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="health" href="/main/health">
-      <ion-icon aria-hidden="true" name="list-outline"></ion-icon>
+      <ion-icon aria-hidden="true" name="list"></ion-icon>
       <ion-label>Health</ion-label>
     </ion-tab-button>
   </ion-tab-bar>

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

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TabsPage } from './tabs.page';
-import { testConfig } from '../../../../util/test.config';
+import { testConfig } from '../../../util/test.config';
 
 describe('TabsPage', () => {
   let component: TabsPage;

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

@@ -1,6 +1,5 @@
 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';

package/demo/src/global.scss

@@ -32,16 +32,34 @@
  * 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.system.css';
+@use '@ionic/angular/css/palettes/dark.class.css';
 
-//@use "@ionic/angular/css/palettes/dark.class.css";
-/**
- * 任意でダークモードを使うことができて便利なため、インポートしています（Library）。
- * 一般的な用途では不要です。
- */
-@use '../../src/ionic-theme-dark-class';
+@use '../../src/default-variables';
+@use '../../src/ionic-theme-ios26';
+@use '../../src/ionic-theme-ios26-dark-class';
+
+:root {
+  --ios26-color-background-rgb: var(--ion-color-light-rgb);
+}
+
+ion-header.ios,
+ion-footer.ios {
+  ion-buttons:not(.ios26-disabled),
+  ion-button:not(.ios26-disabled),
+  ion-back-button:not(.ios26-disabled) {
+    --color: var(--ion-text-color, #000);
+  }
+}
+
+section.section-example {
+  background: var(--ion-background-color, #fff);
+  border-radius: 24px;
+  padding: 16px;
+  margin: 16px;
+}
 
-@use '@ionic/angular/css/palettes/dark.system.css';
-@use '../../src/ionic-theme-dark-system';
+ion-searchbar .searchbar-input-container {
+  margin: 0 20px !important;
+}

package/demo/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Demo of ionic-theme-ios26</title>
+    <title>Demo for ionic-theme-ios26</title>
     <base href="/" />
     <meta name="color-scheme" content="light dark" />
     <meta

package/demo/src/test.ts

@@ -0,0 +1,7 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

package/demo/src/theme/variables.scss

@@ -1,2 +1,20 @@
 // For information on how to create your own theme, please see:
 // http://ionicframework.com/docs/theming/
+
+:root {
+  --ion-color-light: #f2f2f7;
+  --ion-color-light-rgb: 242, 242, 247;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d5d5d9;
+  --ion-color-light-tint: #f3f3f8;
+}
+
+.ion-palette-dark {
+  --ion-color-light: #222428;
+  --ion-color-light-rgb: 34, 36, 40;
+  --ion-color-light-contrast: #fff;
+  --ion-color-light-contrast-rgb: 255, 255, 255;
+  --ion-color-light-shade: #1e2023;
+  --ion-color-light-tint: #383a3e;
+}

package/demo/util/mocks/angular/angular-delegate.ts

@@ -0,0 +1,18 @@
+import { ApplicationRef, NgZone, Injector, EnvironmentInjector, ComponentRef } from '@angular/core';
+import { FrameworkDelegate } from '@ionic/core/components';
+
+export class MockAngularDelegate {
+  create(environmentInjector: EnvironmentInjector, injector: Injector, elementReferenceKey?: string): MockAngularFrameworkDelegate {
+    return new MockAngularFrameworkDelegate();
+  }
+}
+
+export class MockAngularFrameworkDelegate implements FrameworkDelegate {
+  async attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise<any> {
+    // no-op
+  }
+
+  async removeViewFromDom(_container: any, component: any): Promise<void> {
+    // no-op
+  }
+}

package/demo/util/mocks/angular/ion-router-outlet.ts

@@ -0,0 +1,39 @@
+import { BaseMock } from '../util/base.mock';
+
+const METHODS = [
+  'nativeEl',
+  // 'tabsPrefix',
+  // 'stackEvents',
+  // 'activateEvents',
+  // 'deactivateEvents',
+  // 'animated',
+  // 'ngOnDestroy',
+  // 'getContext',
+  // 'ngOnInit',
+  // 'isActivated',
+  // 'component',
+  // 'activatedRoute',
+  // 'activatedRouteData',
+  // 'detach',
+  // 'attach',
+  // 'deactivate',
+  // 'activateWith',
+  // 'canGoBack',
+  // 'pop',
+  // 'getLastUrl',
+  // 'getLastRouteView',
+  // 'getRootView',
+  // 'getActiveStackId',
+];
+
+export class IonRouterOutletMock extends BaseMock {
+  constructor() {
+    super('NavController', METHODS);
+
+    this.spyObj.nativeEl.and.returnValue();
+  }
+
+  public static instance(): any {
+    return new IonRouterOutletMock();
+  }
+}

package/demo/util/mocks/angular/modal-controller.ts

@@ -0,0 +1,7 @@
+import { Overlay } from '../util/overlay';
+
+export class ModalControllerMock extends Overlay {
+  public static instance(): any {
+    return new ModalControllerMock();
+  }
+}

package/demo/util/mocks/angular/nav-controller.ts

@@ -0,0 +1,22 @@
+import { BaseMock } from '../util/base.mock';
+
+const METHODS = ['navigateForward', 'navigateBack', 'navigateRoot', 'back', 'pop', 'setDirection', 'setTopOutlet', 'consumeTransition'];
+
+export class NavControllerMock extends BaseMock {
+  constructor() {
+    super('NavController', METHODS);
+
+    this.spyObj.navigateForward.and.returnValue(Promise.resolve());
+    this.spyObj.navigateBack.and.returnValue(Promise.resolve());
+    this.spyObj.navigateRoot.and.returnValue(Promise.resolve());
+    this.spyObj.back.and.returnValue(Promise.resolve());
+    this.spyObj.pop.and.returnValue(Promise.resolve());
+    this.spyObj.setDirection.and.returnValue();
+    this.spyObj.setTopOutlet.and.returnValue();
+    this.spyObj.consumeTransition.and.returnValue();
+  }
+
+  public static instance(): any {
+    return new NavControllerMock();
+  }
+}

package/demo/util/mocks/angular/popover-controller.ts

@@ -0,0 +1,7 @@
+import { Overlay } from '../util/overlay';
+
+export class PopoverControllerMock extends Overlay {
+  public static instance(): any {
+    return new PopoverControllerMock();
+  }
+}

package/demo/util/mocks/util/base.mock.ts

@@ -0,0 +1,13 @@
+export abstract class BaseMock {
+  protected spyObj: any;
+
+  // eslint-disable-next-line
+  constructor(baseName: string, methodNames: any[]) {
+    this.spyObj = jasmine.createSpyObj(baseName, methodNames);
+
+    methodNames.forEach((methodName) => {
+      // @ts-ignore
+      this[methodName] = this.spyObj[methodName];
+    });
+  }
+}

package/demo/util/mocks/util/overlay.ts

@@ -0,0 +1,13 @@
+import { BaseMock } from './base.mock';
+
+const METHODS = ['create', 'dismiss', 'getTop'];
+
+export class Overlay extends BaseMock {
+  constructor() {
+    super('Overlay', METHODS);
+
+    this.spyObj.create.and.returnValue(Promise.resolve());
+    this.spyObj.dismiss.and.returnValue(Promise.resolve());
+    this.spyObj.getTop.and.returnValue(Promise.resolve());
+  }
+}

package/demo/util/test.config.ts

@@ -0,0 +1,54 @@
+/* eslint @rdlabo/rules/deny-import-from-ionic-module: off */
+
+import { ApplicationConfig, importProvidersFrom, provideZonelessChangeDetection } from '@angular/core';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonNav, IonRouterOutlet, ModalController, NavController, NavParams, PopoverController } from '@ionic/angular/standalone';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+
+import { IonRouterOutletMock } from './mocks/angular/ion-router-outlet';
+import { ModalControllerMock } from './mocks/angular/modal-controller';
+import { NavControllerMock } from './mocks/angular/nav-controller';
+import { PopoverControllerMock } from './mocks/angular/popover-controller';
+import { MockAngularDelegate } from './mocks/angular/angular-delegate';
+
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { AngularDelegate } from '@ionic/angular';
+
+/**
+ * Standalone configuration for Angular tests
+ *
+ * This is the recommended approach for new tests and for migrating existing tests.
+ * It aligns with Angular's direction towards standalone components.
+ */
+export const testConfig: ApplicationConfig = {
+  providers: [
+    provideZonelessChangeDetection(),
+    provideRouter([], withComponentInputBinding()),
+    importProvidersFrom(FormsModule, ReactiveFormsModule),
+    NavParams,
+    IonNav,
+    {
+      provide: AngularDelegate,
+      useClass: MockAngularDelegate,
+    },
+    {
+      provide: IonRouterOutlet,
+      useFactory: () => IonRouterOutletMock.instance(),
+    },
+    {
+      provide: ModalController,
+      useFactory: () => ModalControllerMock.instance(),
+    },
+    {
+      provide: NavController,
+      useFactory: () => NavControllerMock.instance(),
+    },
+    {
+      provide: PopoverController,
+      useFactory: () => PopoverControllerMock.instance(),
+    },
+    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClientTesting(),
+  ],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdlabo/ionic-theme-ios26",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "iOS26 CSS Theme for Ionic Framework",
   "exports": {
     "./src/*": {
@@ -14,9 +14,10 @@
     }
   },
   "scripts": {
-    "build": "node build-sass.js",
+    "build": "rm -rf dist/css && sass src:dist/css --style=compressed --no-source-map",
     "build:demo": "cd demo && npm install && npm run build -- --configuration=production",
     "prepare": "husky install",
+    "lint": "prettier --check \"./**/*.{scss,ts}\" &&  prettier --parser angular --check \"./**/*.html\"",
     "fmt": "prettier --write \"./**/*.{scss,ts}\" &&  prettier --parser angular --write \"./**/*.html\"",
     "release": "np --no-tests"
   },

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

@@ -1,15 +1,20 @@
 @use '../utils/api';
 
-ion-action-sheet.ios {
-  --button-color: var(--ion-text-color);
-  --button-background-selected: transparent;
+ion-action-sheet.ios:not(.ios26-disabled) {
   --backdrop-opacity: 0.2;
 
   .action-sheet-container {
     @include api.glass-background(0.9);
+    &:has(.ion-activated) {
+      @include api.glass-background(0.95);
+    }
     margin: 0 8px 8px;
     border-radius: 32px;
 
+    .action-sheet-title,
+    .action-sheet-has-sub-title {
+      background: none;
+    }
     .action-sheet-title {
       padding-top: 8px;
     }
@@ -18,8 +23,26 @@ ion-action-sheet.ios {
       background: transparent;
 
       button {
+        --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);
+        &.ion-activated {
+          --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+        }
+        &::after {
+          content: none;
+        }
+        &:not(.action-sheet-destructive) {
+          --button-color: var(--ion-text-color);
+          --button-color-hover: var(--ion-text-color);
+        }
+        &.action-sheet-destructive {
+          --button-color: var(--ion-color-danger, #c5000f);
+          --button-color-hover: var(--ion-color-danger, #c5000f);
+        }
+        &.action-sheet-cancel {
+          margin-top: auto;
+          font-weight: normal;
+        }
         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 {

package/src/components/ion-alert.scss

@@ -1,10 +1,12 @@
 @use '../utils/api';
 
-ion-alert.ios {
+ion-alert.ios:not(.ios26-disabled) {
   --backdrop-opacity: 0.2;
-
   .alert-wrapper {
     @include api.glass-background(0.9);
+    &:has(.ion-activated) {
+      @include api.glass-background(0.95);
+    }
     border-radius: 32px;
 
     .alert-head,
@@ -12,6 +14,14 @@ ion-alert.ios {
       text-align: left;
     }
 
+    .alert-radio-group {
+      padding: 0;
+      margin-bottom: 12px;
+      button {
+        padding: 0 8px;
+      }
+    }
+
     .alert-button-group {
       padding: 0 8px 12px;
       .alert-button {
@@ -21,6 +31,10 @@ ion-alert.ios {
         min-width: calc(50% - 8px);
         background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);
         color: var(--ion-text-color);
+
+        &.ion-activated {
+          background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+        }
       }
     }