@edc-motor/ui 0.5.9 → 0.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.5.9",
+  "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

@@ -5,9 +5,13 @@ import { computed, type CSSProperties } from 'vue'
 // (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. Los presets DINÁMICOS (`token:*`) sí van opacos: un token de
-// superficie ya ES un color de fondo pensado para contrastar con la página,
-// y al 15% resultaba inapreciable. La anchura del CONTENIDO 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'}`)
@@ -22,12 +26,11 @@ 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)) y se aplica OPACO, sin el mix del
-// tinte — un token de superficie ya es un fondo de nivel de tema que sigue
-// al claro/oscuro; mezclado al 15% con transparente era invisible sobre la
-// página. 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 isToken(value: string): boolean {
   return value.startsWith(TOKEN_PREFIX)