valtech-components 2.0.721 → 2.0.722

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.721";
+export declare const VERSION = "2.0.722";

package/package.json

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

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

@@ -6,15 +6,25 @@
  * - Wrapper translúcido con bordes redondeados
  * - Botones pill apilados, full-width
  * - **Sin colores**: todos los botones neutros (incluido destructive)
- * - Adapta automáticamente light/dark via theme tokens de Ionic
+ * - Adapta light/dark via prefers-color-scheme con fallbacks explícitos
  *
  * Aplicado por default desde ConfirmationDialogService.
- * Override añadiendo otra cssClass al alert.
  */
 
 ion-alert.val-alert {
-  /* Backdrop con blur */
+  /* Defaults light mode (variables locales del scope del alert) */
+  --val-alert-bg: var(--ion-background-color, #ffffff);
+  --val-alert-border: rgba(0, 0, 0, 0.08);
+  --val-alert-text: var(--ion-text-color, #000000);
+  --val-alert-text-muted: rgba(0, 0, 0, 0.62);
+  --val-alert-btn-bg: rgba(0, 0, 0, 0.05);
+  --val-alert-btn-bg-hover: rgba(0, 0, 0, 0.08);
+  --val-alert-btn-bg-active: rgba(0, 0, 0, 0.12);
+  --val-alert-btn-border: rgba(0, 0, 0, 0.06);
+
+  /* Backdrop */
   --backdrop-opacity: 0.4;
+  --background: var(--val-alert-bg);
 
   &::part(backdrop) {
     background: rgba(0, 0, 0, 0.4);
@@ -22,12 +32,9 @@ ion-alert.val-alert {
     -webkit-backdrop-filter: blur(8px);
   }
 
-  /* Wrapper — usa theme tokens, adapta light/dark */
-  --background: var(--ion-background-color, #ffffff);
-
   .alert-wrapper {
     border-radius: 16px;
-    border: 1px solid var(--ion-color-step-100, rgba(0, 0, 0, 0.08));
+    border: 1px solid var(--val-alert-border);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
     overflow: hidden;
     backdrop-filter: blur(40px) saturate(180%);
@@ -40,27 +47,26 @@ ion-alert.val-alert {
   }
 
   .alert-title {
-    color: var(--ion-text-color, #000);
+    color: var(--val-alert-text);
     font-weight: 700;
     font-size: 17px;
     line-height: 1.3;
   }
 
   .alert-sub-title {
-    color: var(--ion-color-step-600, rgba(0, 0, 0, 0.6));
+    color: var(--val-alert-text-muted);
     font-size: 14px;
     margin-top: 4px;
   }
 
   .alert-message {
-    color: var(--ion-color-step-700, rgba(0, 0, 0, 0.7));
+    color: var(--val-alert-text-muted);
     font-size: 14px;
     line-height: 1.4;
     padding: 0 20px 16px;
     text-align: center;
   }
 
-  /* Grupo de botones — apilado vertical */
   .alert-button-group {
     flex-direction: column !important;
     padding: 8px;
@@ -69,16 +75,15 @@ ion-alert.val-alert {
     border-top: none;
   }
 
-  /* Cada botón — pill neutro, sin colores */
   button.alert-button {
     flex: 0 0 auto;
     width: 100%;
     margin: 0;
     padding: 14px 20px;
     border-radius: 12px;
-    background: var(--ion-color-step-50, rgba(0, 0, 0, 0.04));
-    border: 1px solid var(--ion-color-step-100, rgba(0, 0, 0, 0.08));
-    color: var(--ion-text-color, #000);
+    background: var(--val-alert-btn-bg);
+    border: 1px solid var(--val-alert-btn-border);
+    color: var(--val-alert-text);
     font-weight: 600;
     font-size: 16px;
     text-transform: none;
@@ -92,11 +97,11 @@ ion-alert.val-alert {
     }
 
     &:hover {
-      background: var(--ion-color-step-100, rgba(0, 0, 0, 0.08));
+      background: var(--val-alert-btn-bg-hover);
     }
 
     &:active {
-      background: var(--ion-color-step-150, rgba(0, 0, 0, 0.12));
+      background: var(--val-alert-btn-bg-active);
     }
 
     .alert-button-inner {
@@ -106,9 +111,22 @@ ion-alert.val-alert {
     }
   }
 
-  /* Cancel button: ligeramente menos prominente (font-weight) */
   button.alert-button.alert-button-role-cancel,
   button.alert-button[role='cancel'] {
     font-weight: 500;
   }
 }
+
+/* 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);
+  }
+}