@edc-motor/ui 0.5.10 → 0.5.12

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 +26 -13
  3. package/src/blocks/BlockShell.vue +8 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edc-motor/ui",
3
- "version": "0.5.10",
3
+ "version": "0.5.12",
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
@@ -45,19 +45,30 @@
45
45
  --page-bg-opacity: 0.2;
46
46
 
47
47
  // Fondos DINÁMICOS de bloque (presets token:* del campo común
48
- // `background`): tres grises translúcidos por GRADOS de intensidad sobre
49
- // la misma base neutra que el «Gris» de la paleta (slate #64748B =
50
- // rgb(100 116 139)), con grados FIJOS por token y POR TEMA — el medio
51
- // (--neutral) equivale EXACTO al gris estático de la paleta al
52
- // --block-tint del tema (20% claro / 12% oscuro), el suave contrasta
53
- // menos y el fuerte más. El acento translúcido (--accent-soft) es el
54
- // cuarto preset. BlockShell los resuelve como cualquier token
55
- // (var(--<nombre>)) y ya llegan translúcidos: la imagen de fondo de la
56
- // página se ve a través, en claro y en oscuro.
48
+ // `background`): cuatro VELOS del COLOR DE SUPERFICIE del tema
49
+ // (--surface, el fondo de tarjeta) a distintas opacidades — 15/30/60/
50
+ // 85 %, el número del token es su opacidad. Sobre la imagen de fondo de
51
+ // página, un velo «re-acerca» el bloque a la superficie del tema: en
52
+ // oscuro ennegrece, en claro emblanquece, y cuanto mayor el grado más
53
+ // tapa la imagen. Se declaran UNA vez aquí (sirven a ambos temas):
54
+ // var(--surface) se sustituye con el que gane en <html> — el data-theme
55
+ // del tema vive en el propio :root, así que el velo sigue al
56
+ // claro/oscuro solo. El acento translúcido (--accent-soft) es el quinto
57
+ // preset; BlockShell resuelve cualquier token a var(--<nombre>) y ya
58
+ // llegan translúcidos.
59
+ --veil-15: color-mix(in srgb, var(--surface) 15%, transparent);
60
+ --veil-30: color-mix(in srgb, var(--surface) 30%, transparent);
61
+ --veil-60: color-mix(in srgb, var(--surface) 60%, transparent);
62
+ --veil-85: color-mix(in srgb, var(--surface) 85%, transparent);
63
+ --accent-soft: color-mix(in srgb, var(--accent-500) 20%, transparent);
64
+
65
+ // LEGACY (presets de 0.5.10, retirados del picker en favor de los
66
+ // velos): los grises translúcidos por grados sobre la base neutra slate
67
+ // (#64748B). Sus custom properties se CONSERVAN para que lo guardado
68
+ // con token:neutral* siga renderizando igual que cuando era preset.
57
69
  --neutral-soft: rgb(100 116 139 / 10%);
58
70
  --neutral: rgb(100 116 139 / 20%);
59
71
  --neutral-strong: rgb(100 116 139 / 32%);
60
- --accent-soft: color-mix(in srgb, var(--accent-500) 20%, transparent);
61
72
  }
62
73
 
63
74
  [data-theme="dark"] {
@@ -87,10 +98,12 @@
87
98
  --block-tint: 12%;
88
99
  --page-bg-opacity: 0.1;
89
100
 
90
- // Grises dinámicos de bloque en oscuro: mismos tokens, grados propios —
91
- // el medio calca el gris estático (#64748B al --block-tint oscuro, 12%).
101
+ // Los velos (--veil-*) NO se redeclaran: la definición de :root ya lee
102
+ // este --surface oscuro. El acento translúcido sí baja de grado en oscuro.
103
+ --accent-soft: color-mix(in srgb, var(--accent-500) 16%, transparent);
104
+
105
+ // LEGACY (grises 0.5.10 retirados del picker): grados propios del oscuro.
92
106
  --neutral-soft: rgb(100 116 139 / 7%);
93
107
  --neutral: rgb(100 116 139 / 12%);
94
108
  --neutral-strong: rgb(100 116 139 / 22%);
95
- --accent-soft: color-mix(in srgb, var(--accent-500) 16%, transparent);
96
109
  }
package/src/blocks/BlockShell.vue CHANGED
@@ -7,11 +7,12 @@ import { computed, type CSSProperties } from 'vue'
7
7
  // distinto por tema, patrón CDL) para que la imagen de fondo de la página se
8
8
  // vea a través. Los presets DINÁMICOS (`token:*`) se resuelven a su custom
9
9
  // property TAL CUAL (var(--<nombre>), sin el mix del tinte): los presets
10
- // actuales (token:neutral-soft/neutral/neutral-strong y token:accent-soft)
11
- // ya SON translúcidos en _theme.scss — grados fijos por token y por tema
12
- // sobre la base neutra slate — y los tokens antiguos aún guardados
13
- // (token:surface*/accent-500) siguen siendo el color OPACO del tema, como
14
- // cuando se guardaron. La anchura del CONTENIDO va por clase.
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.
15
16
  const props = defineProps<{ settings: Record<string, unknown> }>()
16
17
 
17
18
  const width = computed(() => `block--w-${(props.settings.width as string) || 'wide'}`)
@@ -26,8 +27,8 @@ const headingAlign = (key: 'title_align' | 'subtitle_align', prefix: string) =>
26
27
  }
27
28
 
28
29
  // El color de fondo puede ser un hex fijo o un preset DINÁMICO del tema
29
- // serializado como `token:<nombre>` (p. ej. token:neutral): se resuelve a
30
- // su custom property (var(--neutral)) SIN el mix del tinte — el grado de
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
31
32
  // transparencia de cada token lo fija el TEMA (_theme.scss), no el
32
33
  // --block-tint del hex libre. El nombre se sanea a [a-z0-9-] (el value
33
34
  // viene del admin, pero un token roto no debe inyectar CSS).