@studiolxd/brand 49.5.0 → 49.7.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 +56 -0
- package/dist/_shared/tokens.js +1 -0
- package/dist/_types/atoms/Icon/Icon.d.ts +7 -1
- package/dist/_types/atoms/Link/Link.d.ts +1 -1
- package/dist/brand.css +11 -1
- package/dist/button.css +1 -1
- package/dist/fieldset.css +1 -1
- package/dist/icon.css +1 -1
- package/dist/link.js +1 -1
- package/dist/tokens.css +9 -1
- package/package.json +1 -1
- package/src/tokens/components/fieldset.css +7 -0
- package/src/tokens/components/fieldset.ts +4 -0
- package/src/tokens/index.css +1 -0
- package/src/tokens/scss/_index.legacy.scss +1 -0
- package/src/tokens/scss/_index.scss +1 -0
- package/src/tokens/scss/components/_fieldset.scss +4 -0
- package/src/tokens/tokens.json +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,62 @@ 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
|
+
## [49.7.0] — 2026-09-18
|
|
11
|
+
|
|
12
|
+
> **Minor.** El legend de `Fieldset` gana aire por debajo, igual que un `Heading` suelto.
|
|
13
|
+
|
|
14
|
+
### El legend ya no queda pegado al primer campo
|
|
15
|
+
|
|
16
|
+
`Fieldset` pintaba el `legend` con tipografía de heading pero sin separación con lo que
|
|
17
|
+
venía debajo: el título quedaba pegado al primer campo. `.fieldset__legend` gana
|
|
18
|
+
`margin-block-end: var(--fieldset-legend-space-after)` (`fieldset.legend-space-after` →
|
|
19
|
+
`{text.heading.space-after}`, el mismo `em` que deja un `Heading` suelto, así que crece con
|
|
20
|
+
el nivel/tamaño del legend en lugar de ser una cifra fija). El aire entre los campos del
|
|
21
|
+
grupo sigue siendo cosa del consumidor, como hasta ahora.
|
|
22
|
+
|
|
23
|
+
## [49.6.0] — 2026-09-18
|
|
24
|
+
|
|
25
|
+
> **Minor.** El icono deja de tener talla propia dentro de un enlace y de un botón: mide el texto
|
|
26
|
+
> que acompaña, y sube y baja con él.
|
|
27
|
+
|
|
28
|
+
### `Icon size="text"` — el glifo que mide lo que el texto
|
|
29
|
+
|
|
30
|
+
Las cinco tallas de icono (8/16/24/48/64) son medidas fijas, y junto a un texto eso se nota: el
|
|
31
|
+
mismo enlace vive en un pie, en un párrafo y en un título, y un glifo de 16px se ve enorme en el
|
|
32
|
+
primero y diminuto en el tercero. La talla nueva, `text`, no es una medida sino una relación — el
|
|
33
|
+
icono vale `1em`, o sea el cuerpo de letra que lo rodea. No trae token ni color: `1em` ya **es** el
|
|
34
|
+
tamaño del texto ambiente, y no hay valor de diseño que elegir. Las cinco tallas fijas se quedan
|
|
35
|
+
exactamente donde estaban; esto solo añade una sexta opción.
|
|
36
|
+
|
|
37
|
+
### El icono de `Link` sigue al texto del enlace
|
|
38
|
+
|
|
39
|
+
El glifo de `icon` estaba clavado en `sm` (16px), de modo que un «← Volver» dentro de un título
|
|
40
|
+
llevaba una flecha de letra pequeña. Ahora usa `size="text"`: mide el texto del enlace, delante
|
|
41
|
+
(`iconPosition="start"`) y detrás (`end`). El aire entre icono y texto sigue siendo
|
|
42
|
+
`--link-icon-gap`, espaciado del sistema, y no escala con la tipografía a propósito: es
|
|
43
|
+
separación, no cuerpo de letra.
|
|
44
|
+
|
|
45
|
+
### El icono de `Button` sigue al cuerpo de letra del control
|
|
46
|
+
|
|
47
|
+
Un icono pasado como hijo de un `Button` ya no necesita `size`: dentro del botón mide `1em`, que es
|
|
48
|
+
el `font-size` que cada talla fija (14, 16 y 20px en `sm`, `md` y `lg`), así que el glifo acompaña
|
|
49
|
+
al control en los tres tamaños y también cuando quien sube la talla es la superficie pública. Lo
|
|
50
|
+
hace una regla acotada en la hoja del botón, sin `data-slot` ni prop nueva.
|
|
51
|
+
|
|
52
|
+
**`iconOnly` queda fuera de esa regla, a propósito.** Ahí el glifo no acompaña a un texto —no hay
|
|
53
|
+
texto— sino que **es** el contenido del botón: su medida la decide la caja cuadrada (32/40/48), no
|
|
54
|
+
la tipografía, y con `1em` un botón de 40px se habría quedado con un glifo de 16 flotando en el
|
|
55
|
+
centro. En un botón de solo icono la talla la sigue poniendo el `Icon`.
|
|
56
|
+
|
|
57
|
+
Cambio visible para quien ya ponía un icono dentro de un botón con texto: ese glifo pasa de su
|
|
58
|
+
talla fija a la del texto (en un botón `lg`, de 16 a 20px). Es el efecto buscado y no cambia el
|
|
59
|
+
marcado ni la API.
|
|
60
|
+
|
|
61
|
+
Stories nuevas para verlo: «El icono sigue al texto» en `Link` (el mismo enlace en tres
|
|
62
|
+
tipografías, y el caso de «Ver en la plataforma de origen» con el icono detrás) y en `Button` (el
|
|
63
|
+
mismo botón en `sm`, `md` y `lg`), cada una con su test de contrato. Documentado en Foundations →
|
|
64
|
+
Iconografía § «El icono que sigue al texto», con remisión desde `Icon`, `Link` y `Button`.
|
|
65
|
+
|
|
10
66
|
## [49.5.0] — 2026-09-18
|
|
11
67
|
|
|
12
68
|
> **Minor.** La cuenta se lee en dos líneas: el ítem de menú acepta una segunda línea bajo la
|
package/dist/_shared/tokens.js
CHANGED
|
@@ -787,6 +787,7 @@ var e = {
|
|
|
787
787
|
"--empty-state-description-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
|
|
788
788
|
"--empty-state-description-font-size": "1rem",
|
|
789
789
|
"--empty-state-description-color": "#4a4a4a",
|
|
790
|
+
"--fieldset-legend-space-after": "0.5em",
|
|
790
791
|
"--figure-media-bg": "#f2f2f2",
|
|
791
792
|
"--figure-caption-font-size": "0.875rem",
|
|
792
793
|
"--figure-caption-line-height": "1.5",
|
|
@@ -328,7 +328,13 @@ export type IconName = keyof typeof ICONS;
|
|
|
328
328
|
export declare const ICON_NAMES: IconName[];
|
|
329
329
|
export interface IconProps {
|
|
330
330
|
name: IconName;
|
|
331
|
-
|
|
331
|
+
/**
|
|
332
|
+
* Talla del glifo. Las cinco fijas del sistema (`xs`…`xl`) o `text`, que no
|
|
333
|
+
* es una talla sino una instrucción: el icono mide `1em`, o sea el tamaño
|
|
334
|
+
* de la tipografía que lo rodea, y sube y baja con ella. Es la que usan el
|
|
335
|
+
* enlace y el botón para que el glifo acompañe a su texto.
|
|
336
|
+
*/
|
|
337
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'text';
|
|
332
338
|
className?: string;
|
|
333
339
|
}
|
|
334
340
|
export declare function Icon({ name, size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -16,7 +16,7 @@ export interface LinkProps extends React.ComponentPropsWithoutRef<'a'> {
|
|
|
16
16
|
* desaparece en hover, igual en las dos.
|
|
17
17
|
*/
|
|
18
18
|
tone?: 'accent' | 'ink' | 'accent-1';
|
|
19
|
-
/** Un icono junto al texto («← Volver», «Descargar ↓»). Decorativo: el texto ya lo dice. */
|
|
19
|
+
/** Un icono junto al texto («← Volver», «Descargar ↓»). Decorativo: el texto ya lo dice. Mide lo que el texto del enlace (`1em`) y sube y baja con él. */
|
|
20
20
|
icon?: IconName;
|
|
21
21
|
/** Dónde va el icono: delante (`start`, por defecto) o detrás del texto. */
|
|
22
22
|
iconPosition?: 'start' | 'end';
|