valtech-components 2.0.742 → 2.0.743

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "2.0.742";
+export declare const VERSION = "2.0.743";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.742",
+  "version": "2.0.743",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/src/lib/components/styles/alert.scss

@@ -117,16 +117,17 @@ ion-alert.val-alert {
   }
 }
 
-/* Dark mode — overrides explícitos via prefers-color-scheme */
-@media (prefers-color-scheme: dark) {
-  ion-alert.val-alert {
-    --val-alert-bg: var(--ion-background-color, #1c1c1e);
-    --val-alert-border: rgba(255, 255, 255, 0.08);
-    --val-alert-text: var(--ion-text-color, #ffffff);
-    --val-alert-text-muted: rgba(255, 255, 255, 0.7);
-    --val-alert-btn-bg: rgba(255, 255, 255, 0.06);
-    --val-alert-btn-bg-hover: rgba(255, 255, 255, 0.12);
-    --val-alert-btn-bg-active: rgba(255, 255, 255, 0.18);
-    --val-alert-btn-border: rgba(255, 255, 255, 0.06);
-  }
+/* Dark mode — class-based (ThemeService toggle `body.dark`/`html.ion-palette-dark`).
+   No usar `@media (prefers-color-scheme: dark)` porque pisaba el manual toggle. */
+body.dark ion-alert.val-alert,
+html.ion-palette-dark ion-alert.val-alert,
+body[data-theme='dark'] ion-alert.val-alert {
+  --val-alert-bg: var(--ion-background-color, #1c1c1e);
+  --val-alert-border: rgba(255, 255, 255, 0.08);
+  --val-alert-text: var(--ion-text-color, #ffffff);
+  --val-alert-text-muted: rgba(255, 255, 255, 0.7);
+  --val-alert-btn-bg: rgba(255, 255, 255, 0.06);
+  --val-alert-btn-bg-hover: rgba(255, 255, 255, 0.12);
+  --val-alert-btn-bg-active: rgba(255, 255, 255, 0.18);
+  --val-alert-btn-border: rgba(255, 255, 255, 0.06);
 }

package/src/lib/components/styles/media-queries.scss

@@ -59,8 +59,29 @@
   }
 }
 
+// Class-based dark mode. Apps deben usar `dark.class.css` palette de Ionic
+// + ThemeService que toggle `body.dark` / `html.ion-palette-dark`.
+// El mixin se mantiene para compatibilidad con consumers existentes,
+// pero ya NO usa `@media (prefers-color-scheme: dark)` para evitar
+// pintar dark según OS aunque el user tenga tema light manual.
+//
+// Uso desde un component-level .scss (top-level, NO dentro de `:host`):
+//   @include dark { ... }
 @mixin dark {
-  @media (prefers-color-scheme: dark) {
+  :host-context(.dark),
+  :host-context(.ion-palette-dark),
+  :host-context(html.ion-palette-dark),
+  :host-context(body.dark),
+  :host-context([data-theme='dark']) {
+    @content;
+  }
+}
+
+// Variante global (no usa :host-context) — para SCSS NO de componente.
+@mixin dark-global {
+  body.dark,
+  html.ion-palette-dark,
+  [data-theme='dark'] {
     @content;
   }
 }

package/src/lib/components/styles/overrides.scss

@@ -185,10 +185,11 @@ ion-modal {
 
 .img-black {
   filter: invert(0);
-
-  @media (prefers-color-scheme: dark) {
-    filter: invert(1);
-  }
+}
+body.dark .img-black,
+html.ion-palette-dark .img-black,
+body[data-theme='dark'] .img-black {
+  filter: invert(1);
 }
 
 .ion-datetime-button-overlay ion-datetime.datetime-grid {

package/src/lib/components/styles/variables.scss

@@ -125,34 +125,39 @@ $color-default-placeholder: #afbacc;
   --ion-color-medium-shade: #8b8b8b;
   --ion-color-medium-tint: #a8a8a8;
 
-  @media (prefers-color-scheme: dark) {
-    --ion-color-texti: #8fc1ff;
-    --ion-color-texti-rgb: 143, 193, 255;
-    --ion-color-texti-contrast: #000000;
-    --ion-color-texti-contrast-rgb: 0, 0, 0;
-    --ion-color-texti-shade: #7eaae0;
-    --ion-color-texti-tint: #9ac7ff;
-
-    --ion-color-darki: #ffffff;
-    --ion-color-darki-rgb: 255, 255, 255;
-    --ion-color-darki-contrast: #000000;
-    --ion-color-darki-contrast-rgb: 0, 0, 0;
-    --ion-color-darki-shade: #e0e0e0;
-    --ion-color-darki-tint: #ffffff;
-
-    --ion-color-primary: #8f49f8;
-    --ion-color-primary-rgb: 143, 73, 248;
-    --ion-color-primary-contrast: #ffffff;
-    --ion-color-primary-contrast-rgb: 255, 255, 255;
-    --ion-color-primary-shade: #7e40da;
-    --ion-color-primary-tint: #9a5bf9;
-  }
-
   --swiper-pagination-color: var(--ion-color-primary);
   --swiper-navigation-color: var(--ion-color-primary);
   --swiper-pagination-bullet-inactive-color: var(--ion-color-medium);
 }
 
+// Class-based dark mode (ThemeService toggle body.dark/html.ion-palette-dark).
+// Reemplaza la regla `@media (prefers-color-scheme: dark)` previa que pisaba el
+// manual toggle del user.
+body.dark,
+html.ion-palette-dark,
+body[data-theme='dark'] {
+  --ion-color-texti: #8fc1ff;
+  --ion-color-texti-rgb: 143, 193, 255;
+  --ion-color-texti-contrast: #000000;
+  --ion-color-texti-contrast-rgb: 0, 0, 0;
+  --ion-color-texti-shade: #7eaae0;
+  --ion-color-texti-tint: #9ac7ff;
+
+  --ion-color-darki: #ffffff;
+  --ion-color-darki-rgb: 255, 255, 255;
+  --ion-color-darki-contrast: #000000;
+  --ion-color-darki-contrast-rgb: 0, 0, 0;
+  --ion-color-darki-shade: #e0e0e0;
+  --ion-color-darki-tint: #ffffff;
+
+  --ion-color-primary: #8f49f8;
+  --ion-color-primary-rgb: 143, 73, 248;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #7e40da;
+  --ion-color-primary-tint: #9a5bf9;
+}
+
 .ion-color-texti {
   --ion-color-base: var(--ion-color-texti);
   --ion-color-base-rgb: var(--ion-color-texti-rgb);