@edc-motor/ui 0.5.9 → 0.5.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/scss/_theme.scss +34 -0
  3. package/src/blocks/BlockShell.vue +13 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edc-motor/ui",
3
- "version": "0.5.9",
3
+ "version": "0.5.11",
4
4
  "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
5
5
  "license": "GPL-3.0-only",
6
6
  "type": "module",
package/scss/_theme.scss CHANGED
@@ -43,6 +43,31 @@
43
43
  // va atenuada — en claro admiten más presencia que en oscuro.
44
44
  --block-tint: 20%;
45
45
  --page-bg-opacity: 0.2;
46
+
47
+ // Fondos DINÁMICOS de bloque (presets token:* del campo común
48
+ // `background`): cuatro VELOS del COLOR DE FONDO DE PÁGINA del tema
49
+ // (--bg) a distintas opacidades — 15/30/60/85 %, el número del token es
50
+ // su opacidad. Sobre la imagen de fondo de página, un velo «re-acerca»
51
+ // el bloque al fondo del tema: en oscuro ennegrece, en claro
52
+ // emblanquece, y cuanto mayor el grado más tapa la imagen. Se declaran
53
+ // UNA vez aquí (sirven a ambos temas): var(--bg) se sustituye con el
54
+ // --bg que gane en <html> — el data-theme del tema vive en el propio
55
+ // :root, así que el velo sigue al claro/oscuro solo. El acento
56
+ // translúcido (--accent-soft) es el quinto preset; BlockShell resuelve
57
+ // cualquier token a var(--<nombre>) y ya llegan translúcidos.
58
+ --veil-15: color-mix(in srgb, var(--bg) 15%, transparent);
59
+ --veil-30: color-mix(in srgb, var(--bg) 30%, transparent);
60
+ --veil-60: color-mix(in srgb, var(--bg) 60%, transparent);
61
+ --veil-85: color-mix(in srgb, var(--bg) 85%, transparent);
62
+ --accent-soft: color-mix(in srgb, var(--accent-500) 20%, transparent);
63
+
64
+ // LEGACY (presets de 0.5.10, retirados del picker en favor de los
65
+ // velos): los grises translúcidos por grados sobre la base neutra slate
66
+ // (#64748B). Sus custom properties se CONSERVAN para que lo guardado
67
+ // con token:neutral* siga renderizando igual que cuando era preset.
68
+ --neutral-soft: rgb(100 116 139 / 10%);
69
+ --neutral: rgb(100 116 139 / 20%);
70
+ --neutral-strong: rgb(100 116 139 / 32%);
46
71
  }
47
72
 
48
73
  [data-theme="dark"] {
@@ -71,4 +96,13 @@
71
96
 
72
97
  --block-tint: 12%;
73
98
  --page-bg-opacity: 0.1;
99
+
100
+ // Los velos (--veil-*) NO se redeclaran: la definición de :root ya lee
101
+ // este --bg oscuro. El acento translúcido sí baja de grado en oscuro.
102
+ --accent-soft: color-mix(in srgb, var(--accent-500) 16%, transparent);
103
+
104
+ // LEGACY (grises 0.5.10 retirados del picker): grados propios del oscuro.
105
+ --neutral-soft: rgb(100 116 139 / 7%);
106
+ --neutral: rgb(100 116 139 / 12%);
107
+ --neutral-strong: rgb(100 116 139 / 22%);
74
108
  }
package/src/blocks/BlockShell.vue CHANGED
@@ -5,9 +5,14 @@ import { computed, type CSSProperties } from 'vue'
5
5
  // (align, width, background) que el motor añade a cada tipo. Un hex de la
6
6
  // paleta NO se aplica opaco: es un tinte semitransparente (--block-tint,
7
7
  // distinto por tema, patrón CDL) para que la imagen de fondo de la página se
8
- // vea a través. Los presets DINÁMICOS (`token:*`) sí van opacos: un token de
9
- // superficie ya ES un color de fondo pensado para contrastar con la página,
10
- // y al 15% resultaba inapreciable. La anchura del CONTENIDO va por clase.
8
+ // vea a través. Los presets DINÁMICOS (`token:*`) se resuelven a su custom
9
+ // property TAL CUAL (var(--<nombre>), sin el mix del tinte): los presets
10
+ // actuales (token:veil-15/-30/-60/-85 y token:accent-soft) ya SON
11
+ // translúcidos en _theme.scss — los velos son el fondo de página del tema
12
+ // (--bg) a esa opacidad, ennegrecen en oscuro y emblanquecen en claro — y
13
+ // los tokens antiguos aún guardados renderizan como cuando eran preset:
14
+ // token:surface*/accent-500 el color OPACO del tema, token:neutral* los
15
+ // grises translúcidos de 0.5.10. La anchura del CONTENIDO va por clase.
11
16
  const props = defineProps<{ settings: Record<string, unknown> }>()
12
17
 
13
18
  const width = computed(() => `block--w-${(props.settings.width as string) || 'wide'}`)
@@ -22,12 +27,11 @@ const headingAlign = (key: 'title_align' | 'subtitle_align', prefix: string) =>
22
27
  }
23
28
 
24
29
  // El color de fondo puede ser un hex fijo o un preset DINÁMICO del tema
25
- // serializado como `token:<nombre>` (p. ej. token:surface): se resuelve a
26
- // su custom property (var(--surface)) y se aplica OPACO, sin el mix del
27
- // tinte — un token de superficie ya es un fondo de nivel de tema que sigue
28
- // al claro/oscuro; mezclado al 15% con transparente era invisible sobre la
29
- // página. El nombre se sanea a [a-z0-9-] (el value viene del admin, pero un
30
- // token roto no debe inyectar CSS).
30
+ // serializado como `token:<nombre>` (p. ej. token:veil-30): se resuelve a
31
+ // su custom property (var(--veil-30)) SIN el mix del tinte — el grado de
32
+ // transparencia de cada token lo fija el TEMA (_theme.scss), no el
33
+ // --block-tint del hex libre. El nombre se sanea a [a-z0-9-] (el value
34
+ // viene del admin, pero un token roto no debe inyectar CSS).
31
35
  const TOKEN_PREFIX = 'token:'
32
36
  function isToken(value: string): boolean {
33
37
  return value.startsWith(TOKEN_PREFIX)