@edc-motor/ui 0.4.16 → 0.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.16",
+  "version": "0.4.18",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",

package/scss/_tokens.scss

@@ -112,3 +112,16 @@ $input-border: $border;
 $input-border-hover: $border-strong;
 $input-border-focus: $accent-500;
 $input-focus-ring: $focus-ring;
+
+// ---------------------------------------------------------
+// Texto que CONTRASTA con un fondo arbitrario (el acento elegido en
+// Ajustes, el color de una acción…): el navegador resuelve claro u oscuro
+// según la luminosidad REAL del fondo (relative color syntax): blanco puro
+// bajo L≈49.44 y negro puro por encima — el umbral donde el contraste real
+// cambia de bando. La primera declaración es el FALLBACK (texto oscuro)
+// para navegadores sin `lch(from …)`.
+// ---------------------------------------------------------
+@mixin contrast-text($bg) {
+  color: #111827;
+  color: lch(from #{$bg} calc((49.44 - l) * infinity) 0 0);
+}

package/scss/components/_base-button.scss

@@ -49,13 +49,16 @@
     }
   }
 
+  // Relleno de color: el texto NO es fijo — claro u oscuro según el fondo
+  // real (contrast-text de tokens), que el acento lo elige el usuario.
   &--primary {
     background: $color-accent;
-    color: #fff;
+    @include contrast-text($color-accent);
 
     // Hover bien visible: accent-600 apenas se distingue del 500.
     &:hover:not(:disabled) {
       background: color-mix(in srgb, $color-accent 72%, black);
+      @include contrast-text(color-mix(in srgb, $color-accent 72%, black));
     }
   }
 
@@ -94,23 +97,16 @@
   }
 }
 
-.edc-button--danger {
-  background: $danger;
-  color: #fff;
-  &:hover:not(:disabled) { background: color-mix(in srgb, $danger 72%, black); }
-}
-.edc-button--success {
-  background: $success;
-  color: #06281a;
-  &:hover:not(:disabled) { background: color-mix(in srgb, $success 72%, black); }
-}
-.edc-button--info {
-  background: $info;
-  color: #fff;
-  &:hover:not(:disabled) { background: color-mix(in srgb, $info 72%, black); }
-}
-.edc-button--warning {
-  background: $warning;
-  color: #2b2005;
-  &:hover:not(:disabled) { background: color-mix(in srgb, $warning 72%, black); }
+// Variantes semánticas rellenas: mismo criterio que --primary, el texto lo
+// decide el fondo (antes iba fijado a mano y a veces no contrastaba).
+@each $variant, $color in (danger: $danger, success: $success, info: $info, warning: $warning) {
+  .edc-button--#{$variant} {
+    background: $color;
+    @include contrast-text($color);
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, #{$color} 72%, black);
+      @include contrast-text(color-mix(in srgb, #{$color} 72%, black));
+    }
+  }
 }

package/scss/components/_blocks.scss

@@ -277,9 +277,11 @@
 
   // El "fondo" de los estados cruzados es la SUPERFICIE ($surface, el
   // segundo tono), no el fondo de página puro: menos negro / menos blanco.
+  // Relleno de acento: el texto lo decide el FONDO (contrast-text), no el
+  // tema — con acentos claros, $text-1 del tema oscuro no se leía.
   &--primary {
     background: $accent-500;
-    color: $text-1;
+    @include contrast-text($accent-500);
 
     &:hover {
       background: $surface;
@@ -293,7 +295,7 @@
 
     &:hover {
       background: $accent-500;
-      color: $text-1;
+      @include contrast-text($accent-500);
     }
   }
 }

package/scss/components/_preview-grid.scss

@@ -116,8 +116,43 @@
   }
 
   // Variante compacta (bloque related): tarjetas y huecos más contenidos.
+  // El bloque trae SIEMPRE 6 ítems y es el grid quien decide cuántos enseña
+  // para que la rejilla salga siempre completa, sin filas cojas:
+  // 4 en 2×2 (estrecho) → 6 en 3×2 (md) → 4 en 4×1 (lg) → 5 en 5×1 (xl).
   &--compact &__grid {
     gap: $space-3;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+
+    @media (min-width: $bp-md) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    @media (min-width: $bp-lg) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    @media (min-width: $bp-xl) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+
+  // Qué huecos se ven en cada tramo (los demás, ocultos): 4 → 6 → 4 → 5.
+  &--compact &__slot:nth-child(n + 5) {
+    display: none;
+
+    @media (min-width: $bp-md) {
+      display: block;
+    }
+
+    @media (min-width: $bp-lg) {
+      display: none;
+    }
+  }
+
+  &--compact &__slot:nth-child(5) {
+    @media (min-width: $bp-xl) {
+      display: block;
+    }
   }
 
   &--compact &__fallback {