@rdlabo/ionic-theme-ios26 0.1.0 → 0.1.1

package/demo/src/app/index/index-page.component.ts

@@ -13,7 +13,6 @@ import {
   IonList,
   IonListHeader,
   IonNote,
-  IonText,
   IonTitle,
   IonToggle,
   IonToolbar,
@@ -45,7 +44,6 @@ interface IComponent {
     IonList,
     IonListHeader,
     IonItemGroup,
-    IonText,
     IonNote,
     IonToggle,
   ],

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

@@ -1,9 +0,0 @@
-ion-label {
-  margin-bottom: 4px;
-}
-
-ion-tab-bar {
-  &.tab-bar-hide {
-    display: none;
-  }
-}

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

@@ -19,9 +19,9 @@ export class TabsPage implements OnInit {
         return;
       }
       if (['/main/settings'].includes(params.urlAfterRedirects)) {
-        tabBar.classList.add('tab-bar-hide');
+        tabBar.classList.add('tab-bar-hidden');
       } else if (tabBar) {
-        tabBar.classList.remove('tab-bar-hide');
+        tabBar.classList.remove('tab-bar-hidden');
       }
     });
   }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@rdlabo/ionic-theme-ios26",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "iOS26 CSS Theme for Ionic Framework",
   "exports": {
     "./src/*": {
       "style": "./src/*"
     },
-    "./css/*": {
-      "style": "./css/*"
+    "./dist/*": {
+      "style": "./dist/*"
     },
     "./package.json": {
       "default": "./package.json"

package/src/components/ion-button.scss

@@ -9,6 +9,10 @@
   @include api.glass-background;
   border-radius: 25px;
   overflow: hidden;
+
+  /**
+   * compare .header-collapse-main ion-toolbar.in-toolbar ion-title, .header-collapse-main ion-toolbar.in-toolbar ion-buttons
+   */
   transition: transform 100ms ease-out !important;
 
   &:has(.ion-activated) {
@@ -32,7 +36,8 @@
 
     &::part(native) {
       /**
-       * TODO: remove !important.
+       * overwrite theme-button mixin.
+       * ex) ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.ios26-button-solid):not(.button-outline):not(.ios26-button-outline):not(.button-clear):not(.ios26-button-clear)::part(native)
        */
       box-shadow: none !important;
       border: none !important;
@@ -76,9 +81,11 @@
     }
   }
 
-  --border-radius: 24px !important;
-  &.button-large {
-    --border-radius: 30px !important;
+  &:not(.button-round) {
+    --border-radius: 24px;
+    &.button-large {
+      --border-radius: 30px;
+    }
   }
 
   &:not(.button-clear):not(.ios26-button-clear) {

package/src/components/ion-datetime.scss

@@ -4,6 +4,6 @@ ion-datetime.ios:not(.ios26-disabled) {
   @include api.glass-background;
   border-radius: 24px;
 
-  --wheel-highlight-background: transparent !important;
-  --wheel-highlight-border-radius: 24px !important;
+  --wheel-highlight-background: transparent;
+  --wheel-highlight-border-radius: 24px;
 }

package/src/components/ion-modal.scss

@@ -3,8 +3,8 @@
 ion-modal.ios:not(.ios26-disabled) {
   --backdrop-opacity: 0.2;
   ion-toolbar {
-    padding-right: calc(var(--ion-safe-area-right) + 4px) !important;
-    padding-left: calc(var(--ion-safe-area-left) + 4px) !important;
+    padding-right: calc(var(--ion-safe-area-right) + 4px);
+    padding-left: calc(var(--ion-safe-area-left) + 4px);
   }
   &::part(handle) {
     width: 80px;

package/src/components/ion-searchbar.scss

@@ -3,7 +3,6 @@
 ion-modal.ios {
   ion-searchbar:not(.ios26-disabled) {
     .searchbar-input-container {
-      margin: 0 6px;
       input.searchbar-input {
         // Modal表示でのアイコン非表示の不具合の対応
         backdrop-filter: none;
@@ -28,10 +27,10 @@ ion-searchbar.ios:not(.ios26-disabled) {
       min-height: 44px;
       @include api.glass-background;
       border-radius: 20px;
-      padding-inline-start: 2.4rem !important;
+      padding-inline-start: 2.4rem;
     }
     .searchbar-clear-button {
-      padding-inline-end: 2rem !important;
+      padding-inline-end: 2rem;
     }
   }
 }

package/src/components/ion-tabs.scss

@@ -38,12 +38,13 @@ ion-tab-bar.ios:not(.ios26-disabled) {
 
   ion-tab-button {
     & > ion-icon {
-      font-size: 30px;
+      font-size: 28px;
     }
     background: rgba(var(--ios26-color-light-rgb), 0);
     height: auto;
     &::part(native) {
       overflow: visible;
+      padding: 2px;
     }
 
     &.tab-selected {

package/src/utils/translucent.scss

@@ -25,8 +25,7 @@ ion-footer.ios:not(.ios26-disabled).footer-translucent {
   }
 }
 
-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 {
+ion-header.ios:not(.ios26-disabled).header-collapse-main ion-toolbar.in-toolbar ion-title {
   transition: all 0.5s ease-in-out;
 }
 
@@ -62,7 +61,7 @@ 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
+  box-shadow: inset 0 calc(-56px - var(--ios26-floating-safe-area-bottom)) 16px -16px
     rgba(var(--ios26-color-background-rgb), var(--ios26-content-box-shadow-opacity));
 }