@studiolxd/brand 45.0.0 → 45.1.0
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.
- package/CHANGELOG.md +36 -0
- package/dist/_shared/tokens.js +9 -0
- package/dist/brand.css +137 -6
- package/dist/multi-select.css +1 -1
- package/dist/multi-select.js +1 -2
- package/dist/select.css +1 -1
- package/dist/select.js +1 -2
- package/dist/tokens.css +137 -6
- package/package.json +1 -1
- package/src/tokens/components/control.css +4 -1
- package/src/tokens/components/multi-select.css +3 -0
- package/src/tokens/components/select.css +3 -0
- package/src/tokens/molecules/filter-bar.css +2 -2
- package/src/tokens/scss/components/_control.scss +4 -1
- package/src/tokens/scss/components/_multi-select.scss +3 -0
- package/src/tokens/scss/components/_select.scss +3 -0
- package/src/tokens/scss/molecules/_filter-bar.scss +2 -2
- package/src/tokens/surface-public.css +124 -2
- package/src/tokens/tokens.json +9 -0
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,42 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
|
|
|
7
7
|
regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
|
|
8
8
|
para breaking changes.
|
|
9
9
|
|
|
10
|
+
## [45.1.0] — 2026-09-15
|
|
11
|
+
|
|
12
|
+
> **Minor.** La superficie pública pone los controles en talla lg, igual que hace con el
|
|
13
|
+
> texto.
|
|
14
|
+
|
|
15
|
+
### `.site-shell` parte de lg también en los controles
|
|
16
|
+
|
|
17
|
+
El bloque subía el cuerpo a 20px y dejaba los campos en la talla de aplicación: en una
|
|
18
|
+
página pública el texto era grande y los buscadores, filtros y botones de al lado no. Misma
|
|
19
|
+
omisión que tenía el término de la ficha hasta la v39.0.0, y misma respuesta: en el bloque,
|
|
20
|
+
no en cada app.
|
|
21
|
+
|
|
22
|
+
No se enumeran controles a mano. Cada control ya declara su talla lg en tokens hermanos
|
|
23
|
+
(`input.lg-height` junto a `input.height`), de donde bebe su modificador `--lg`; ahora
|
|
24
|
+
`.site-shell` apunta cada token de partida a su hermano `lg-*`, y lo que hereda de un
|
|
25
|
+
control sube con él. Un control nuevo entra solo por tener sus tokens `lg-*`. La familia
|
|
26
|
+
base (`control.*`) estrena su par lg, y el motor de tokens arrastra ahora una referencia
|
|
27
|
+
metida dentro de una fórmula —sin eso el renglón reservado para el rótulo de la barra de
|
|
28
|
+
filtros se quedaba corto y descolocaba el interruptor—.
|
|
29
|
+
|
|
30
|
+
**El botón entra**: 40→48px y 16→20px, porque un botón md junto a un campo de 48 se lee
|
|
31
|
+
como un control de otra talla justo donde más se juntan. **El chevron del `Select`** era lo
|
|
32
|
+
único de la caja que no subía —su tamaño salía de una prop de React y no de un token— y
|
|
33
|
+
ahora es token (16→24px).
|
|
34
|
+
|
|
35
|
+
Medido en Chromium: dentro del shell, campo, selector, selector múltiple, campo de fecha y
|
|
36
|
+
botón a 48px/20px, exactamente lg; fuera, 40px/16px. El interruptor, su campo y el botón de
|
|
37
|
+
acciones de la barra siguen con el centro en el mismo píxel.
|
|
38
|
+
|
|
39
|
+
**Dos matices, documentados.** `size="sm"` sigue mandando dentro del shell; lo que ya no
|
|
40
|
+
se distingue de lg es un `size="md"` escrito a mano. Y **lo que sale por un portal** —la
|
|
41
|
+
lista de un `Select`, el calendario de un `DatePicker`— monta en `document.body` y no
|
|
42
|
+
hereda la superficie: el disparador va a 48/20 y su lista se queda en la talla de
|
|
43
|
+
aplicación. Es el mismo caso que `Modal` y `Sheet` documentan, y la misma respuesta
|
|
44
|
+
(`container`), pero los campos `*Field` no lo exponen todavía.
|
|
45
|
+
|
|
10
46
|
## [45.0.0] — 2026-09-15
|
|
11
47
|
|
|
12
48
|
> **Major.** Sexta familia al proveedor de textos: diálogos y superficies. `Modal`, `Sheet`,
|
package/dist/_shared/tokens.js
CHANGED
|
@@ -684,6 +684,9 @@ var e = {
|
|
|
684
684
|
"--control-focus-ring-inset-offset": "1px",
|
|
685
685
|
"--control-padding-inline": "1rem",
|
|
686
686
|
"--control-padding-block": "1rem",
|
|
687
|
+
"--control-lg-height": "3rem",
|
|
688
|
+
"--control-lg-font-size": "1.25rem",
|
|
689
|
+
"--control-lg-padding-inline": "1.5rem",
|
|
687
690
|
"--copyable-value-gap": "0.75rem",
|
|
688
691
|
"--description-list-border-width": "1px",
|
|
689
692
|
"--description-list-border-style": "solid",
|
|
@@ -1202,6 +1205,9 @@ var e = {
|
|
|
1202
1205
|
"--multi-select-item-selected-font-weight": "700",
|
|
1203
1206
|
"--multi-select-icon-transition-easing": "ease",
|
|
1204
1207
|
"--multi-select-selection-gap": "0.25rem",
|
|
1208
|
+
"--multi-select-icon-size": "16px",
|
|
1209
|
+
"--multi-select-sm-icon-size": "8px",
|
|
1210
|
+
"--multi-select-lg-icon-size": "24px",
|
|
1205
1211
|
"--multi-select-sm-font-size": "0.875rem",
|
|
1206
1212
|
"--multi-select-sm-padding-inline": "0.5rem",
|
|
1207
1213
|
"--multi-select-sm-item-padding-block": "0.25rem",
|
|
@@ -1475,6 +1481,9 @@ var e = {
|
|
|
1475
1481
|
"--select-item-selected-font-weight": "500",
|
|
1476
1482
|
"--select-item-highlighted-bg": "#111e30",
|
|
1477
1483
|
"--select-item-highlighted-color": "#ffffff",
|
|
1484
|
+
"--select-icon-size": "16px",
|
|
1485
|
+
"--select-sm-icon-size": "8px",
|
|
1486
|
+
"--select-lg-icon-size": "24px",
|
|
1478
1487
|
"--select-sm-font-size": "0.875rem",
|
|
1479
1488
|
"--select-sm-padding-inline": "0.5rem",
|
|
1480
1489
|
"--select-sm-item-padding-block": "0.25rem",
|