@rdlabo/ionic-theme-ios26 0.0.1 → 0.0.3

package/src/assets/ios-design.scss

@@ -1,131 +0,0 @@
-@use 'ios-variables';
-
-@use 'ion-popover';
-@use 'ion-searchbar';
-@use 'ios-talk-room';
-@use 'ion-tabs';
-@use 'ion-button';
-@use 'ion-segment';
-@use 'ios-design-dark';
-
-.ios {
-  ion-toast {
-    --border-radius: 24px;
-  }
-
-  ion-card {
-    border-radius: 24px;
-  }
-
-  ion-action-sheet {
-    --button-color: var(--ion-color-medium);
-  }
-
-  .thread-fab {
-    ion-fab-button {
-      &::part(native) {
-        @include ios-variables.glass-background;
-        color: rgb(var(--system-dark-rgb));
-      }
-      ion-icon {
-        color: var(--ion-color-medium-shade);
-      }
-      --background-activated: rgba(var(--system-light-rgb), 0.3);
-    }
-  }
-
-  // tweet action toolbar
-  ion-item.suggest-seeking {
-    --padding-start: 16px !important;
-  }
-
-  .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;
-    }
-  }
-  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;
-        }
-      }
-    }
-  }
-  app-photo-image,
-  app-editor-image {
-    &.ion-page ion-header > ion-toolbar > ion-buttons * {
-      &::part(native) {
-        box-shadow: none !important;
-        border-radius: 25px;
-        background: transparent !important;
-        border-width: 1px !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;
-  }
-  app-editor-image.ion-page ion-content::after,
-  app-photo-image.ion-page ion-content::after {
-    box-shadow: none !important;
-  }
-}

package/src/assets/ios-talk-room.scss

@@ -1,50 +0,0 @@
-@use 'ios-variables';
-
-.ios {
-  app-talk-room {
-    .talk-system-message {
-      transform: translateY(-80px);
-    }
-    ion-footer#talk-footer {
-      ion-toolbar {
-        --border-width: 0;
-        --background: transparent;
-      }
-      ion-toolbar.toolbar-blockquote {
-        position: absolute;
-        top: -56px;
-        ion-item {
-          padding: 8px 12px;
-          --inner-padding-end: 4px;
-          ion-avatar {
-            transform: translateX(-10px);
-            margin-right: 4px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            ion-icon {
-              font-size: 1.6rem;
-              color: var(--ion-color-medium-tint);
-            }
-          }
-          &::part(native) {
-            @include ios-variables.glass-background;
-            border-radius: 20px;
-          }
-        }
-      }
-      ion-toolbar.send-message {
-        ion-textarea.input-field {
-          transition: width 0.5s ease;
-          --padding-start: 16px;
-          --padding-end: 16px;
-          label.textarea-wrapper {
-            @include ios-variables.glass-background;
-            margin: 8px 8px;
-            border-radius: 32px;
-          }
-        }
-      }
-    }
-  }
-}

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: 80, 80, 80;
-}
-
-@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;
-}