@propbinder/mobile-design 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propbinder/mobile-design",
-  "version": "0.2.04",
+  "version": "0.2.05",
   "peerDependencies": {
     "@angular/common": "^20.3.0 || ^21.0.0",
     "@angular/core": "^20.3.0 || ^21.0.0"

package/styles/ionic.css

@@ -69,7 +69,7 @@ html {
 html,
 body {
   /* Background color must match theme-color for iOS PWA status bar */
-  background-color: #221a4c;
+  background-color: var(--color-brand-secondary);
   color: var(--text-color-default-primary);
   font-family: 'Brockmann', system-ui, -apple-system, sans-serif;
   
@@ -110,7 +110,7 @@ body.backdrop-no-scroll {
   --ion-color-primary-tint: var(--color-brand-base);
   
   /* Ionic component defaults */
-  --ion-background-color: var(--color-background-neutral-primary);
+  --ion-background-color: var(--color-brand-secondary);
   --ion-text-color: var(--text-color-default-primary);
 }
 
@@ -127,6 +127,21 @@ ion-content {
   --background: var(--color-background-neutral-primary);
 }
 
+/* iOS: Set base ion-content background to brand secondary for pages */
+.plt-ios ion-content {
+  background: var(--color-brand-secondary) !important;
+}
+
+/* iOS: Also target any inner background parts */
+.plt-ios ion-content::part(background) {
+  background: var(--color-brand-secondary) !important;
+}
+
+/* iOS: Target the inner container if it exists */
+.plt-ios ion-content .inner-scroll {
+  background: var(--color-brand-secondary) !important;
+}
+
 /* Default: Block browser overscroll on all platforms */
 ion-content::part(scroll) {
   overscroll-behavior-y: none;
@@ -148,10 +163,37 @@ ion-content::part(scroll)::-webkit-scrollbar {
 /* iOS-specific: Enable native scroll overshoot/bounce effect */
 .plt-ios ion-content::part(scroll) {
   overscroll-behavior-y: contain;
+  /* iOS: Set scroll container background to match brand secondary */
+  /* This prevents white background from showing when header fades on scroll */
+  background: var(--color-brand-secondary) !important;
 }
 
 .plt-ios .ion-page {
   overscroll-behavior-y: contain;
+  /* Set page background to brand secondary to match header on iOS */
+  background: var(--color-brand-secondary) !important;
+}
+
+/* iOS-specific: Override ion-content background for pages (not modals) */
+.plt-ios .ion-page > ion-content {
+  --background: var(--color-brand-secondary);
+}
+
+/* iOS: Ensure modal content stays with neutral background */
+.plt-ios ion-modal ion-content::part(scroll) {
+  background: var(--color-background-neutral-primary) !important;
+}
+
+.plt-ios ion-modal ion-content {
+  background: var(--color-background-neutral-primary) !important;
+}
+
+.plt-ios ion-modal ion-content::part(background) {
+  background: var(--color-background-neutral-primary) !important;
+}
+
+.plt-ios ion-modal ion-content .inner-scroll {
+  background: var(--color-background-neutral-primary) !important;
 }
 
 ion-footer {
@@ -159,7 +201,8 @@ ion-footer {
 }
 
 ion-router-outlet {
-  --background: var(--color-background-neutral-primary);
+  --background: var(--color-brand-secondary);
+  background: var(--color-brand-secondary);
 }
 
 ion-refresher {
@@ -186,7 +229,7 @@ ion-modal {
   max-height: 100vh !important;
 }
 
-ion-modal .modal-wrapper,
+/* Prevent modal container from resizing when keyboard appears */
 ion-modal::part(content) {
   position: fixed !important;
   height: 100% !important;
@@ -484,16 +527,7 @@ ion-toast {
   }
 }
 
-/* Dark mode support (if needed) */
-@media (prefers-color-scheme: dark) {
-  .ds-mobile-modal {
-    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-  
-  .ds-mobile-modal::part(backdrop) {
-    background: rgba(0, 0, 0, 0.6);
-  }
-}
+/* Dark mode support removed - modals should not change based on system dark mode */
 
 /* Accessibility: Reduced motion */
 @media (prefers-reduced-motion: reduce) {
@@ -516,6 +550,39 @@ ion-tab-button::part(native) {
   gap: 2px;
 }
 
+/* ============================================
+   Base Modal Styles (Shared across all modals)
+   ============================================ */
+
+.ds-modal-base {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --width: 100%;
+  --max-width: 640px;
+  --height: 100dvh; /* Full viewport height - content top offset creates gap */
+  --border-radius: 16px 16px 0 0;
+}
+
+.ds-modal-base::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  background: var(--color-background-neutral-primary, #ffffff);
+  max-width: 640px;
+  margin: 0 auto;
+  /* Use top positioning instead of margin-top to work with fixed positioning */
+  top: var(--app-sheet-top-offset) !important;
+  height: calc(100% - var(--app-sheet-top-offset)) !important;
+  max-height: calc(100vh - var(--app-sheet-top-offset)) !important;
+}
+
+.ds-modal-base::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.ds-modal-base ion-content {
+  --background: var(--color-background-neutral-primary, #ffffff);
+}
+
 /* ============================================
    Post Detail Modal Styles
    ============================================ */
@@ -556,11 +623,6 @@ ion-router-outlet.ion-page-hidden,
   overflow: hidden;
 }
 
-/* Set background to brand secondary */
-ion-router-outlet {
-  background: var(--color-brand-secondary) !important;
-}
-
 /* Override Ionic's default 10px border-radius */
 body.backdrop-no-scroll ion-router-outlet {
   border-radius: 16px 16px 0 0 !important;
@@ -612,24 +674,7 @@ ion-app ion-router-outlet.ion-page-hidden {
 
 /* Safe area handling - NOT needed here since modal positioning (--app-sheet-top-offset) handles it */
 
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .ds-post-detail-modal {
-    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-  
-  .ds-post-detail-modal::part(content) {
-    background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-  
-  .ds-post-detail-modal::part(backdrop) {
-    background: rgba(0, 0, 0, 0.6);
-  }
-  
-  .ds-post-detail-modal ion-content {
-    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-}
+/* Dark mode support removed - modals should not change based on system dark mode */
 
 /* ============================================
    Chat Modal Styles
@@ -664,24 +709,7 @@ ion-app ion-router-outlet.ion-page-hidden {
   --background: var(--color-background-neutral-primary, #ffffff);
 }
 
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .ds-chat-modal {
-    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-  
-  .ds-chat-modal::part(content) {
-    background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-  
-  .ds-chat-modal::part(backdrop) {
-    background: rgba(0, 0, 0, 0.6);
-  }
-  
-  .ds-chat-modal ion-content {
-    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-}
+/* Dark mode support removed - modals should not change based on system dark mode */
 
 /* ============================================
    Handbook Detail Modal Styles
@@ -767,22 +795,5 @@ ion-app ion-router-outlet.ion-page-hidden {
   --background: #ffffff;
 }
 
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .ds-whitelabel-demo-modal {
-    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-  
-  .ds-whitelabel-demo-modal::part(content) {
-    background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-  
-  .ds-whitelabel-demo-modal::part(backdrop) {
-    background: rgba(0, 0, 0, 0.6);
-  }
-  
-  .ds-whitelabel-demo-modal ion-content {
-    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-}
+/* Dark mode support removed - modals should not change based on system dark mode */
 

package/styles/mobile-common.css

@@ -107,3 +107,44 @@
   margin: 0;
 }
 
+/* ============================================
+   FORM UTILITIES
+   ============================================ */
+
+/* Ghost Input/Textarea - No focus/hover outlines */
+.ghost-input-clean ::ng-deep .ds-input,
+.ghost-input-clean ::ng-deep .ds-textarea,
+.ghost-input-clean ::ng-deep .textarea-container {
+  outline: none !important;
+  border: none !important;
+}
+
+.ghost-input-clean ::ng-deep .ds-input:hover,
+.ghost-input-clean ::ng-deep .ds-textarea:hover,
+.ghost-input-clean ::ng-deep .textarea-container:hover,
+.ghost-input-clean ::ng-deep .ds-input:focus,
+.ghost-input-clean ::ng-deep .ds-textarea:focus,
+.ghost-input-clean ::ng-deep .textarea-container:focus,
+.ghost-input-clean ::ng-deep .ds-input:focus-within,
+.ghost-input-clean ::ng-deep .ds-textarea:focus-within,
+.ghost-input-clean ::ng-deep .textarea-container:focus-within {
+  outline: none !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Target the actual textarea element inside ds-textarea */
+.ghost-input-clean ::ng-deep textarea {
+  outline: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  resize: none !important;
+}
+
+.ghost-input-clean ::ng-deep textarea:hover,
+.ghost-input-clean ::ng-deep textarea:focus {
+  outline: none !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+

package/styles/mobile-page-base.css

@@ -13,6 +13,9 @@
   flex-direction: column;
   align-items: center;
   height: 100%;
+  /* Solid background to cover overlay from page underneath during transitions */
+  background: var(--color-secondary-surface);
+  width: 100%;
 }
 
 /* ============================================
@@ -211,6 +214,12 @@
   background: var(--color-background-neutral-primary);
   border-radius: 24px 24px 0 0;
   
+  /* Visual styling for iOS overshoot - extend background below using box-shadow */
+  transform: translateZ(0);
+  will-change: transform;
+  isolation: isolate;
+  box-shadow: 0 200vh 0 0 var(--color-background-neutral-primary);
+  
   /* Fixed 20px horizontal padding globally */
   padding: 20px;
   /* Add bottom padding on mobile to account for fixed tab bar */
@@ -218,13 +227,6 @@
 }
 
 :host .content-inner {
-  /* Visual styling - background, border-radius, and shadow extend */
-  transform: translateZ(0);
-  will-change: transform;
-  isolation: isolate;
-  /* Extend white background below for iOS overshoot using box-shadow */
-  box-shadow: 0 200vh 0 0 var(--color-background-neutral-primary);
-  
   /* Grow to fill parent flex container */
   flex: 1;