@rdlabo/ionic-theme-ios26 0.0.2 → 0.0.4

package/src/assets/ion-list-inset.scss

@@ -1,198 +0,0 @@
-ion-content[color='light'],
-.ion-list-inset,
-ion-accordion {
-  ion-list:not(.list-inset) {
-    margin: 16px 0;
-    padding: 0;
-    //border-top: 1px solid var(--ion-color-light-shade);
-    //border-bottom: 1px solid var(--ion-color-light-shade);
-
-    ion-item:last-child {
-      --border-width: 0px;
-      --show-full-highlight: 0;
-      --inner-border-width: 0px;
-      --show-inset-highlight: 0;
-    }
-  }
-  ion-list.list-inset {
-    ion-item > ion-button[slot='end'] > ion-icon[slot='icon-only'] {
-      font-size: 1.2rem !important;
-      transform: translateY(4px);
-    }
-
-    ion-item {
-      ion-text[slot='end'] {
-        padding-left: 8px;
-      }
-      &.item-disabled {
-        opacity: 1;
-        & > * {
-          opacity: 0.4;
-        }
-        &::part(detail-icon) {
-          opacity: 0.1;
-        }
-      }
-    }
-
-    &.ios ion-list-header ion-label {
-      font-size: 1.1rem;
-    }
-
-    &.md ion-list-header {
-      font-weight: bold;
-      margin-top: 16px;
-      ion-label {
-        font-size: 1.1rem;
-      }
-    }
-
-    &.list-inset {
-      background: transparent;
-
-      &.md:not(:last-child) {
-        margin-bottom: 0;
-      }
-
-      ion-list-header {
-        display: flex;
-        align-items: center;
-        &.md {
-          margin-top: 0;
-        }
-        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;
-        }
-      }
-
-      ion-item-group.ios,
-      ion-reorder-group.ios {
-        border-radius: 24px;
-        overflow: hidden;
-
-        ion-item:first-child {
-          --padding-top: 4px;
-        }
-        ion-item:last-child {
-          --padding-bottom: 4px;
-        }
-      }
-
-      ion-item-group > :is(ion-item, section.autocomplete):last-child,
-      ion-item-group > ion-item-sliding:last-child ion-item {
-        --border-width: 0 !important;
-        --show-full-highlight: 0 !important;
-        --inner-border-width: 0 !important;
-        --show-inset-highlight: 0 !important;
-      }
-
-      ion-item-group.not-first-child {
-        margin: 16px 0;
-      }
-
-      & > ion-item > ion-list > ion-item {
-        // 入れ子にしてるコンテンツ
-      }
-
-      ion-item-group > ion-item {
-        & > div.item-title-wrapper {
-          width: 100%;
-          text-align: center;
-          padding: 32px 16px 16px;
-          ion-icon {
-            font-size: 2.8rem;
-          }
-          h2 {
-            font-size: 1rem;
-            font-weight: bold;
-            margin-top: 8px;
-          }
-          ion-text {
-            font-size: 0.9rem;
-          }
-        }
-        &.ios {
-          --inner-padding-end: 0;
-          &::part(native) {
-            padding-right: 16px;
-          }
-        }
-        & > ion-input.md[labelplacement='floating'] {
-          transition: transform 0.2s ease;
-          &:not(.label-floating) {
-            transform: translateY(-7px);
-          }
-          &.label-floating {
-            transform: translateY(-4px);
-          }
-        }
-        & > ion-input.ios[labelplacement='floating'] {
-          transition: transform 0.2s ease;
-          &:not(.label-floating) {
-            transform: translateY(-2px);
-          }
-        }
-        & ion-button[slot='end'].ion-align-self-end {
-          transform: translateY(-7px);
-        }
-      }
-
-      & > ion-note,
-      ion-note.note {
-        color: var(--ion-color-medium-tint);
-        font-size: 0.9rem;
-        display: block;
-        margin: 8px 16px;
-      }
-
-      ion-note.note {
-        margin: 8px 0;
-      }
-    }
-  }
-}
-
-ion-content:not([color='light']) {
-  ion-list :not(ion-item-group) {
-    ion-item.ios:last-child {
-      --border-width: #{0px 0px 0.55px 0px};
-      --inner-border-width: 0px;
-      --show-inset-highlight: 0;
-      --show-full-highlight: 1;
-    }
-
-    ion-item.md:last-child {
-      --border-width: #{0px 0px 1px 0px};
-      --inner-border-width: 0;
-      --show-full-highlight: 1;
-      --show-inset-highlight: 0;
-    }
-  }
-
-  ion-list ion-item-group ion-item:last-child {
-    --border-width: 0px;
-    --show-full-highlight: 0;
-    --inner-border-width: 0px;
-    --show-inset-highlight: 0;
-  }
-
-  ion-list[slot='content'] {
-    padding: 0;
-    margin: 0;
-    ion-item.ios:last-child {
-      --border-width: 0;
-      --inner-border-width: 0px;
-      --show-inset-highlight: 0;
-      --show-full-highlight: 0;
-    }
-  }
-}

package/src/assets/ios-design/ion-button.scss

@@ -1,68 +0,0 @@
-@use '../ios-variables';
-
-.ios {
-  .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting),
-  .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button,
-  ion-buttons.liquid-glass-buttons ion-button {
-    max-height: inherit;
-    &::part(native) {
-      @include ios-variables.glass-background();
-      border-radius: 25px;
-    }
-    margin: 8px;
-
-    font-size: 1.05rem !important;
-
-    transition: transform 100ms ease-out;
-    will-change: transform;
-    color: var(--ion-text-color, #000);
-    &.ion-activated {
-      transform: scale(1.2);
-      box-shadow: none;
-      ion-icon {
-        // 色を指定しなくても半透明に
-        //color: var(--ion-color-medium-tint);
-      }
-    }
-    &[color='primary'][fill='outline'] {
-      color: rgba(var(--ion-color-primary-rgb), 1);
-      transition:
-        transform 100ms ease-out,
-        color 50ms ease;
-    }
-    &[color='primary'][fill='outline'].ion-activated {
-      &::part(native) {
-        color: rgba(var(--ion-color-primary-rgb), 0.2);
-        &::after {
-          transform: scale(1.2);
-          @include ios-variables.glass-background;
-          box-shadow: none;
-        }
-      }
-    }
-
-    &.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;
-        }
-      }
-    }
-
-    &:not(.button-has-icon-only):not(.back-button-has-icon-only) {
-      &::part(native) {
-        padding: 0 16px;
-        min-height: 44px;
-      }
-    }
-  }
-}

package/src/assets/ios-design/ion-popover.scss

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

package/src/assets/ios-design/ion-searchbar.scss

@@ -1,44 +0,0 @@
-@use '../ios-variables';
-
-.ios {
-  .toolbar-searchbar::part(container) {
-    padding-top: 3px;
-    padding-bottom: 3px;
-  }
-
-  ion-modal {
-    ion-searchbar:not(.area-searchbar) {
-      .searchbar-input-container {
-        margin: 0 6px;
-        input.searchbar-input {
-          // Modal表示でのアイコン非表示の不具合の対応
-          backdrop-filter: none;
-        }
-      }
-    }
-  }
-
-  ion-searchbar:not(.area-searchbar) {
-    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 ios-variables.glass-background;
-        border-radius: 20px;
-        padding-inline-start: 2.4rem !important;
-      }
-      .searchbar-clear-button {
-        padding-inline-end: 2rem !important;
-      }
-    }
-  }
-}

package/src/assets/ios-design/ion-segment.scss

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

package/src/assets/ios-design/ion-tabs.scss

@@ -1,60 +0,0 @@
-@use '../ios-variables';
-
-.ios {
-  ion-fab.inner-tab-bar {
-    right: calc(16px + var(--ion-safe-area-right, 0px));
-    bottom: var(--max-safe-area);
-    ion-fab-button {
-      &::part(native) {
-        @include ios-variables.glass-background;
-        color: rgb(var(--system-dark-rgb));
-      }
-      --background-activated: rgba(var(--system-light-rgb), 0.3);
-    }
-  }
-
-  ion-tab-bar {
-    @include ios-variables.glass-background;
-    z-index: 2;
-
-    border-radius: 40px;
-
-    width: calc(100% - 56px - 16px - 16px - 4px - 16px);
-    max-width: 400px;
-    padding: 2px 2px;
-    bottom: var(--max-safe-area);
-    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);
-    }
-
-    ion-tab-button {
-      & > ion-icon {
-        font-size: 30px;
-      }
-      background: rgba(var(--system-light-rgb), 0);
-      height: auto;
-      &::part(native) {
-        overflow: visible;
-      }
-
-      &.tab-selected {
-        &::part(native) {
-          backdrop-filter: blur(7px);
-          background: rgba(var(--system-tab-active-rgb), 0.1);
-          transition: background 0.2s ease;
-          border-radius: 32px;
-        }
-
-        &.ion-activated::part(native) {
-          background: rgba(var(--system-shadow-rgb), 0.02);
-        }
-      }
-    }
-  }
-}

package/src/assets/ios-design/ion-toggle.scss

@@ -1,8 +0,0 @@
-ion-toggle.ios {
-  --handle-width: 38px;
-  --handle-height: 28px;
-  &::part(track) {
-    height: 28px;
-    width: 64px;
-  }
-}

package/src/assets/ios-design/ios-design-dark.scss

@@ -1,28 +0,0 @@
-@use '../ios-variables';
-
-.ion-palette-dark.ios {
-  .ion-page ion-header > ion-toolbar > ion-buttons *,
-  .ion-page ion-footer > ion-toolbar > ion-buttons * {
-    &:not(.link-setting) {
-      opacity: 1;
-      &::part(native) {
-        opacity: 1;
-      }
-    }
-
-    &.ion-activated {
-      &::part(native) {
-        @include ios-variables.glass-background-dark-active;
-      }
-      ion-icon {
-        color: rgb(255, 255, 255) !important;
-      }
-    }
-
-    &[color='primary'][fill='outline'] {
-      &::part(native) {
-        color: var(--ion-color-primary-contrast) !important;
-      }
-    }
-  }
-}

package/src/assets/ios-design.scss

@@ -1,110 +0,0 @@
-@use 'ios-variables';
-
-@use 'ios-design/ion-popover';
-@use 'ios-design/ion-searchbar';
-@use 'ios-design/ion-tabs';
-@use 'ios-design/ion-button';
-@use 'ios-design/ion-segment';
-@use 'ios-design/ion-toggle';
-@use 'ios-design/ios-design-dark';
-
-.ios {
-  ion-toast {
-    --border-radius: 24px;
-  }
-
-  ion-card {
-    border-radius: 24px;
-  }
-
-  ion-action-sheet {
-    --button-color: var(--ion-color-medium);
-  }
-
-  .can-go-back ion-header ion-toolbar:not(.md):first-child,
-  .enable-back-button ion-header ion-toolbar:not(.md):first-child {
-    --border-width: 0;
-  }
-  ion-header.header-translucent,
-  ion-footer.footer-translucent {
-    .header-background,
-    .footer-background {
-      backdrop-filter: none;
-    }
-    ion-toolbar {
-      --border-width: 0;
-      --background: transparent;
-      --opacity: 1 !important;
-    }
-  }
-  ion-header ion-toolbar:first-child {
-    padding-right: calc(var(--ion-safe-area-right) + 4px);
-    padding-left: calc(var(--ion-safe-area-left) + 4px);
-  }
-  ion-content:not(:has(cdk-virtual-scroll-viewport)) {
-    --padding-bottom: calc(56px + var(--max-safe-area));
-  }
-
-  .ion-page {
-    :not(:has(ion-footer)) cdk-virtual-scroll-viewport {
-      margin-bottom: calc(calc(56px + var(--max-safe-area)) * -1);
-      padding-bottom: calc(56px + var(--max-safe-area));
-    }
-    ion-content > ion-header > ion-toolbar:first-child {
-      --min-height: 66px;
-    }
-
-    &.enable-back-button,
-    &.ion-page.can-go-back {
-      ion-content > ion-header > ion-toolbar:first-child {
-        --min-height: auto;
-      }
-    }
-  }
-
-  .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons * {
-    &::part(native) {
-      box-shadow: none !important;
-      border-radius: 25px;
-      background: var(--ion-color-primary) !important;
-      border-color: var(--ion-color-primary-contrast) !important;
-      border-width: 1px !important;
-    }
-    &.ion-activated {
-      opacity: 0.4;
-      ion-icon {
-        border-color: var(--ion-color-primary-contrast) !important;
-      }
-      &::part(native) {
-        &::after {
-          background: transparent !important;
-        }
-      }
-    }
-  }
-  .ion-page ion-content:not(.background-transparent)::after,
-  ion-footer.footer-translucent::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: calc(56px + var(--max-safe-area));
-    box-shadow:
-      inset 0 0 0 0 rgba(var(--system-background-rgb), 0),
-      inset 0 calc(-56px - var(--max-safe-area)) 40px -40px rgba(var(--system-background-rgb), 0.8);
-    pointer-events: none;
-    z-index: 1;
-  }
-  ion-header.header-translucent::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: calc(66px + var(--ion-safe-area-top));
-    box-shadow:
-      inset 0 0 0 0 rgba(var(--system-background-rgb), 0),
-      inset 0 calc(66px + var(--ion-safe-area-top)) 20px -20px rgba(var(--system-background-rgb), 1);
-    pointer-events: none;
-    z-index: 1;
-  }
-}

package/src/assets/ios-variables.scss

@@ -1,38 +0,0 @@
-:root {
-  --system-dark-rgb: 0, 0, 0;
-  --system-light-rgb: 255, 255, 255;
-  --system-tab-active-rgb: 16, 16, 16;
-  --system-shadow-rgb: 224, 224, 224;
-  --system-background-rgb: 255, 255, 255;
-  --system-edge-rgb: 255, 255, 255;
-}
-
-.ion-palette-dark {
-  --system-dark-rgb: 255, 255, 255;
-  --system-light-rgb: 58, 58, 58;
-  --system-tab-active-rgb: 255, 255, 255;
-  --system-shadow-rgb: translarent;
-  --system-background-rgb: 0, 0, 0;
-  --system-edge-rgb: 120, 120, 120;
-}
-
-@mixin glass-background($opacity: 0.4, $blur: 6px) {
-  background: rgba(var(--system-light-rgb), $opacity);
-  backdrop-filter: saturate(240%) blur($blur);
-  box-shadow:
-    inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2),
-    0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
-  border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
-  border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
-  border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
-  border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
-  transition: box-shadow 0.1s ease;
-}
-
-@mixin glass-background-dark-active($opacity: 0.25, $blur: 7px) {
-  background: rgba(var(--system-tab-active-rgb), $opacity);
-  backdrop-filter: saturate(180%) blur($blur);
-  box-shadow: inset 0 0 8px 0 rgba(var(--system-tab-active-rgb), 0.2);
-  border: 0.5px solid rgba(var(--system-tab-active-rgb), 0.7);
-  transition: box-shadow 0.1s ease;
-}