@edc-motor/ui 0.4.17 → 0.4.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.17",
+  "version": "0.4.19",
   "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/_block-related.scss

@@ -22,7 +22,7 @@
   }
 
   .block__related-button {
-    justify-self: start;
+    justify-self: center; // estrecho: los botones de bloque van centrados
 
     @media (min-width: $bp-sm) {
       justify-self: end;

package/scss/components/_blocks.scss

@@ -21,7 +21,8 @@
   // Tipografía de bloque: texto $fs-16, subtítulo $fs-20, título $fs-28
   // (la cabecera sube a 32/24). Los títulos nunca se justifican.
   &__title { margin: 0; font-size: $fs-28; }
-  &__subtitle { margin: 0; color: $text-2; font-size: $fs-20; }
+  // pre-line: el subtítulo es un textarea — sus saltos de línea cuentan.
+  &__subtitle { margin: 0; color: $text-2; font-size: $fs-20; white-space: pre-line; }
   &__text { color: $text-1; font-size: $fs-16; }
 
   &--align-justify &__title,
@@ -160,10 +161,30 @@
     align-content: center; // centrado frente a la imagen sangrada
   }
 
+  // Botón del CTA: en estrecho va SIEMPRE centrado (como el del related);
+  // de $bp-sm para arriba manda su campo "Alineación del botón".
+  &__cta-button--left,
+  &__cta-button--center,
+  &__cta-button--right {
+    justify-self: center;
+  }
+
+  @media (min-width: $bp-sm) {
+    &__cta-button--left { justify-self: start; }
+    &__cta-button--center { justify-self: center; }
+    &__cta-button--right { justify-self: end; }
+  }
+
   // La imagen del CTA sangra hasta el borde de la tarjeta según su posición:
   // en columnas toca arriba, abajo y su lateral (el título viaja a la
   // columna de texto); arriba/abajo toca los laterales. Esquinas siguiendo
   // el radio de la tarjeta.
+  // La tarjeta del CTA lleva un halo SUTIL del acento, igual por los cuatro
+  // bordes (sin offset), además de su sombra de profundidad normal.
+  &--cta .block__card {
+    box-shadow: $shadow-sm, 0 0 18px color-mix(in srgb, $accent-500 30%, transparent);
+  }
+
   &--cta.block--image-right .block__media-layout .block__image-frame,
   &--cta.block--image-left .block__media-layout .block__image-frame {
     @container content (min-width: #{$bp-sm}) {
@@ -267,6 +288,9 @@
   align-items: center;
   gap: $space-2;
   padding: $space-2 $space-5;
+
+  // "Botón grande" (campo button_large del CTA): más aire interior.
+  &--large { padding: $space-4 $space-8; }
   border: 1px solid $accent-500;
   border-radius: $radius-md;
   font-size: $fs-18;
@@ -277,9 +301,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 +319,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 {

package/src/blocks/BlockCta.vue

@@ -44,10 +44,16 @@ const layoutStyle = computed(() => {
             <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
           </template>
           <div v-if="settings.body" class="block__text rich-content" v-html="settings.body" />
+          <!-- Alineación propia (button_align; en estrecho el CSS centra
+               siempre) y tamaño grande opcional (button_large) -->
           <a
             v-if="settings.button_text && settings.button_url"
             class="block-button"
-            :class="`block-button--${settings.button_variant || 'primary'}`"
+            :class="[
+              `block-button--${settings.button_variant || 'primary'}`,
+              `block__cta-button--${settings.button_align || 'left'}`,
+              settings.button_large ? 'block-button--large' : '',
+            ]"
             :href="String(settings.button_url)"
           >
             {{ settings.button_text }}

package/src/blocks/BlockShell.vue

@@ -9,7 +9,8 @@ import { computed, type CSSProperties } from 'vue'
 const props = defineProps<{ settings: Record<string, unknown> }>()
 
 const width = computed(() => `block--w-${(props.settings.width as string) || 'wide'}`)
-const align = computed(() => `block--align-${(props.settings.align as string) || 'left'}`)
+// Sin valor guardado, JUSTIFICADO (el default del campo común del motor).
+const align = computed(() => `block--align-${(props.settings.align as string) || 'justify'}`)
 
 const style = computed<CSSProperties>(() => {
   const background = props.settings.background as string | undefined
@@ -17,7 +18,7 @@ const style = computed<CSSProperties>(() => {
     '--block-bg': background
       ? `color-mix(in srgb, ${background} var(--block-tint, 15%), transparent)`
       : 'transparent',
-    textAlign: ((props.settings.align as string) || 'left') as CSSProperties['textAlign'],
+    textAlign: ((props.settings.align as string) || 'justify') as CSSProperties['textAlign'],
   }
 })
 </script>