@edc-motor/ui 0.5.8 → 0.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "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/_theme.scss

@@ -43,6 +43,21 @@
   // va atenuada — en claro admiten más presencia que en oscuro.
   --block-tint: 20%;
   --page-bg-opacity: 0.2;
+
+  // Fondos DINÁMICOS de bloque (presets token:* del campo común
+  // `background`): tres grises translúcidos por GRADOS de intensidad sobre
+  // la misma base neutra que el «Gris» de la paleta (slate #64748B =
+  // rgb(100 116 139)), con grados FIJOS por token y POR TEMA — el medio
+  // (--neutral) equivale EXACTO al gris estático de la paleta al
+  // --block-tint del tema (20% claro / 12% oscuro), el suave contrasta
+  // menos y el fuerte más. El acento translúcido (--accent-soft) es el
+  // cuarto preset. BlockShell los resuelve como cualquier token
+  // (var(--<nombre>)) y ya llegan translúcidos: la imagen de fondo de la
+  // página se ve a través, en claro y en oscuro.
+  --neutral-soft: rgb(100 116 139 / 10%);
+  --neutral: rgb(100 116 139 / 20%);
+  --neutral-strong: rgb(100 116 139 / 32%);
+  --accent-soft: color-mix(in srgb, var(--accent-500) 20%, transparent);
 }
 
 [data-theme="dark"] {
@@ -71,4 +86,11 @@
 
   --block-tint: 12%;
   --page-bg-opacity: 0.1;
+
+  // Grises dinámicos de bloque en oscuro: mismos tokens, grados propios —
+  // el medio calca el gris estático (#64748B al --block-tint oscuro, 12%).
+  --neutral-soft: rgb(100 116 139 / 7%);
+  --neutral: rgb(100 116 139 / 12%);
+  --neutral-strong: rgb(100 116 139 / 22%);
+  --accent-soft: color-mix(in srgb, var(--accent-500) 16%, transparent);
 }

package/src/blocks/BlockShell.vue

@@ -2,10 +2,16 @@
 import { computed, type CSSProperties } from 'vue'
 
 // Envoltorio común de todos los bloques públicos: aplica los campos comunes
-// (align, width, background) que el motor añade a cada tipo. El color de
-// fondo NO se aplica opaco: es un tinte semitransparente (--block-tint,
+// (align, width, background) que el motor añade a cada tipo. Un hex de la
+// paleta NO se aplica opaco: es un tinte semitransparente (--block-tint,
 // distinto por tema, patrón CDL) para que la imagen de fondo de la página se
-// vea a través. La anchura del CONTENIDO (full/wide/narrow) va por clase.
+// vea a través. Los presets DINÁMICOS (`token:*`) se resuelven a su custom
+// property TAL CUAL (var(--<nombre>), sin el mix del tinte): los presets
+// actuales (token:neutral-soft/neutral/neutral-strong y token:accent-soft)
+// ya SON translúcidos en _theme.scss — grados fijos por token y por tema
+// sobre la base neutra slate — y los tokens antiguos aún guardados
+// (token:surface*/accent-500) siguen siendo el color OPACO del tema, como
+// cuando se guardaron. La anchura del CONTENIDO va por clase.
 const props = defineProps<{ settings: Record<string, unknown> }>()
 
 const width = computed(() => `block--w-${(props.settings.width as string) || 'wide'}`)
@@ -20,13 +26,16 @@ const headingAlign = (key: 'title_align' | 'subtitle_align', prefix: string) =>
 }
 
 // El color de fondo puede ser un hex fijo o un preset DINÁMICO del tema
-// serializado como `token:<nombre>` (p. ej. token:surface): se resuelve a
-// su custom property (var(--surface)) — color-mix admite vars — y así el
-// tinte sigue al tema claro/oscuro. El nombre se sanea a [a-z0-9-] (el
-// value viene del admin, pero un token roto no debe inyectar CSS).
+// serializado como `token:<nombre>` (p. ej. token:neutral): se resuelve a
+// su custom property (var(--neutral)) SIN el mix del tinte — el grado de
+// transparencia de cada token lo fija el TEMA (_theme.scss), no el
+// --block-tint del hex libre. El nombre se sanea a [a-z0-9-] (el value
+// viene del admin, pero un token roto no debe inyectar CSS).
 const TOKEN_PREFIX = 'token:'
-function resolveColor(value: string): string {
-  if (!value.startsWith(TOKEN_PREFIX)) return value
+function isToken(value: string): boolean {
+  return value.startsWith(TOKEN_PREFIX)
+}
+function resolveToken(value: string): string {
   return `var(--${value.slice(TOKEN_PREFIX.length).replace(/[^a-z0-9-]/gi, '')})`
 }
 
@@ -35,11 +44,13 @@ function resolveColor(value: string): string {
 // izquierda del justificado en estrecho, DC-03 ampliado).
 const style = computed<CSSProperties>(() => {
   const background = props.settings.background as string | undefined
-  return {
-    '--block-bg': background
-      ? `color-mix(in srgb, ${resolveColor(background)} var(--block-tint, 15%), transparent)`
-      : 'transparent',
+  let bg = 'transparent'
+  if (background) {
+    bg = isToken(background)
+      ? resolveToken(background)
+      : `color-mix(in srgb, ${background} var(--block-tint, 15%), transparent)`
   }
+  return { '--block-bg': bg }
 })
 </script>