valtech-components 4.0.961 → 4.0.963

package/lib/components/atoms/notice/types.d.ts

@@ -1,12 +1,15 @@
 /**
- * Tono del aviso. Define color de fondo, borde e icono por defecto.
+ * Tono del aviso. Define color de fondo, barra de acento e icono por defecto.
  *
  * `info` es el default y el que corresponde a un dato de contexto (lo que la
- * organización quiere que el comprador tenga presente). `warning` se reserva
- * para algo que puede salir mal si se ignora; `success` para una confirmación.
- * Un aviso NUNCA usa el rojo de error: los estados esperados van sobrios.
+ * organización quiere que el comprador tenga presente). `neutral` es para una
+ * nota secundaria sin carga semántica (un hint de producto, "esto es privado")
+ * — es el reemplazo de las cajas grises ad-hoc que se armaban a mano por toda
+ * la app. `warning` se reserva para algo que puede salir mal si se ignora;
+ * `success` para una confirmación. Un aviso NUNCA usa el rojo de error: los
+ * estados esperados van sobrios.
  */
-export type NoticeTone = 'info' | 'warning' | 'success';
+export type NoticeTone = 'info' | 'neutral' | 'warning' | 'success';
 export interface NoticeMetadata {
     /** Texto del aviso. Si viene vacío, el componente no renderiza nada. */
     text?: string;

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 = "4.0.961";
+export declare const VERSION = "4.0.963";

package/package.json

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

package/src/lib/components/styles/_docs-page.scss

@@ -75,7 +75,7 @@
 
   .docs-page__lead {
     font-size: 1.125rem;
-    color: var(--ion-color-medium, #666);
+    color: var(--ion-color-dark, #666);
     margin: 0;
     line-height: 1.6;
 

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

@@ -55,7 +55,7 @@ input {
     padding: pxToRem(8) pxToRem(16) !important;
     border-radius: pxToRem($border-radius-large) !important;
 
-    border: pxToRem(1) solid var(--ion-color-medium) !important;
+    border: pxToRem(1) solid var(--ion-color-dark) !important;
 
     &:focus {
       border: pxToRem(2) solid var(--ion-color-primary) !important;
@@ -77,7 +77,7 @@ textarea {
     font-family: var(--ion-default-font), Arial, sans-serif;
     padding: pxToRem(12) pxToRem(16) !important;
     border-radius: pxToRem($border-radius-large) !important;
-    border: pxToRem(1) solid var(--ion-color-medium) !important;
+    border: pxToRem(1) solid var(--ion-color-dark) !important;
     background: var(--ion-background-color, #fff) !important;
     color: var(--ion-text-color, #000) !important;
     resize: vertical;
@@ -99,7 +99,7 @@ ion-searchbar div input {
 
   padding: pxToRem(8) pxToRem(32) !important;
 
-  border: pxToRem(1) solid var(--ion-color-medium) !important;
+  border: pxToRem(1) solid var(--ion-color-dark) !important;
   border-radius: pxToRem($border-radius-large) !important;
 
   &:focus {
@@ -117,7 +117,7 @@ ion-datetime,
 ion-select {
   // margin-top: pxToRem(8);
   // padding-left: pxToRem(10) !important;
-  // border: pxToRem(1) solid var(--ion-color-medium) !important;
+  // border: pxToRem(1) solid var(--ion-color-dark) !important;
   // border-radius: pxToRem($border-radius-large) !important;
 
   // &:focus {

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

@@ -132,12 +132,12 @@ $color-default-placeholder: #afbacc;
   --ion-color-darki-shade: #080d18;
   --ion-color-darki-tint: #222732;
 
-  --ion-color-medium: #9e9e9e;
-  --ion-color-medium-rgb: 158, 158, 158;
-  --ion-color-medium-contrast: #000000;
-  --ion-color-medium-contrast-rgb: 0, 0, 0;
-  --ion-color-medium-shade: #8b8b8b;
-  --ion-color-medium-tint: #a8a8a8;
+  --ion-color-dark: #9e9e9e;
+  --ion-color-dark-rgb: 158, 158, 158;
+  --ion-color-dark-contrast: #000000;
+  --ion-color-dark-contrast-rgb: 0, 0, 0;
+  --ion-color-dark-shade: #8b8b8b;
+  --ion-color-dark-tint: #a8a8a8;
 
   /* warning — default de la lib, no el naranja de Ionic sin marcar. Amarillo
      con contraste negro: se lee como aviso sin leer como error (ese rol es de
@@ -152,7 +152,7 @@ $color-default-placeholder: #afbacc;
 
   --swiper-pagination-color: var(--ion-color-primary);
   --swiper-navigation-color: var(--ion-color-primary);
-  --swiper-pagination-bullet-inactive-color: var(--ion-color-medium);
+  --swiper-pagination-bullet-inactive-color: var(--ion-color-dark);
 }
 
 // Class-based dark mode (ThemeService toggle body.dark/html.ion-palette-dark).