@studiolxd/brand 38.17.0 → 39.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "38.17.0",
+  "version": "39.0.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",

package/src/tokens/components/description-list.css

@@ -8,7 +8,7 @@
   --description-list-cell-padding-inline: var(--spacing-4); /** Aire horizontal de cada celda */
   --description-list-border-color: var(--color-primary); /** Color del borde: tinta de la superficie */
   --description-list-term-font-family: var(--label-font-family); /** Tipografía del término (dt): la de las etiquetas */
-  --description-list-term-font-size: var(--label-font-size); /** Cuerpo del término: el de las etiquetas, no el de la prosa */
+  --description-list-term-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del término: un peldaño por debajo del valor, la misma relación en las dos superficies (14/16 en aplicación, 16/20 en la pública). Es el mismo 14px que daba 0.875rem en aplicación, pero atado al cuerpo de la superficie: dentro de un SiteShell el valor sube a 20px y el término tenía que subir con él */
   --description-list-term-line-height: var(--label-line-height); /** Interlineado del término */
   --description-list-term-letter-spacing: var(--label-letter-spacing); /** Tracking del término */
   --description-list-term-color: var(--color-text-on-light); /** Color del término */

package/src/tokens/components/star-rating.css

@@ -9,10 +9,13 @@
   --star-rating-cursor: pointer; /** Cursor sobre una estrella elegible */
   --star-rating-disabled-cursor: not-allowed; /** Cursor cuando la entrada está deshabilitada */
   --star-rating-gap: var(--spacing-1); /** Separación entre estrellas */
+  --star-rating-count-gap: var(--spacing-2); /** Separación entre las estrellas y el recuento de reseñas: más aire que entre estrella y estrella, para que el recuento se lea como otra cosa */
   --star-rating-disabled-opacity: var(--opacity-disabled); /** Opacidad cuando la entrada está deshabilitada */
   --star-rating-transition-duration: var(--motion-duration-fast); /** Duración del cambio de relleno */
   --star-rating-transition-easing: var(--motion-easing-default); /** Easing del cambio de relleno */
   --star-rating-track-color: var(--color-icon-secondary-on-light); /** Contorno de la estrella sin ganar */
+  --star-rating-count-color: var(--color-text-muted-on-light); /** Tinta del recuento de reseñas: texto secundario, es un metadato junto a la valoración */
+  --star-rating-empty-color: var(--color-text-muted-on-light); /** Tinta del «todavía sin reseñas»: texto secundario, igual que el recuento */
   --star-rating-fill-color: var(--color-primary); /** Relleno y contorno de la estrella ganada */
   --star-rating-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
   --star-rating-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
@@ -24,6 +27,8 @@
 [data-theme="dark"],
 html.dark {
   --star-rating-track-color: var(--color-text-on-dark); /** Contorno de la estrella sin ganar — surface-dark */
+  --star-rating-count-color: var(--color-text-muted-on-dark); /** Tinta del recuento — surface-dark */
+  --star-rating-empty-color: var(--color-text-muted-on-dark); /** Tinta del «todavía sin reseñas» — surface-dark */
   --star-rating-fill-color: var(--color-accent-1); /** Relleno de la estrella ganada — surface-dark. `fill-color` (prussian) coincide con el fondo de la superficie y quedaría invisible. */
   --star-rating-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
 }

package/src/tokens/molecules/confirm-dialog.css

@@ -4,4 +4,5 @@
 
 :root {
   --confirm-dialog-actions-space-before: var(--spacing-5); /** Aire entre el cuerpo del diálogo y su fila de acciones: separa la pregunta de la respuesta. El aire ENTRE los dos botones es el de `Inline` en su paso compacto */
+  --confirm-dialog-phrase-space-before: var(--spacing-4); /** Aire entre el cuerpo del diálogo y el campo de la frase de confirmación: menos que el del pie, porque el campo todavía es parte de la pregunta */
 }

package/src/tokens/scss/components/_description-list.scss

@@ -7,7 +7,7 @@ $lxd-description-list-border-color: #111e30; // Color del borde: tinta de la sup
 $lxd-description-list-cell-padding-block: 0.75rem; // Aire vertical de cada celda
 $lxd-description-list-cell-padding-inline: 1rem; // Aire horizontal de cada celda
 $lxd-description-list-term-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía del término (dt): la de las etiquetas
-$lxd-description-list-term-font-size: 0.875rem; // Cuerpo del término: el de las etiquetas, no el de la prosa
+$lxd-description-list-term-font-size: 0.875rem; // Cuerpo del término: un peldaño por debajo del valor, la misma relación en las dos superficies (14/16 en aplicación, 16/20 en la pública). Es el mismo 14px que daba 0.875rem en aplicación, pero atado al cuerpo de la superficie: dentro de un SiteShell el valor sube a 20px y el término tenía que subir con él
 $lxd-description-list-term-font-weight: 500; // Peso del término
 $lxd-description-list-term-line-height: 1.5; // Interlineado del término
 $lxd-description-list-term-letter-spacing: 0em; // Tracking del término

package/src/tokens/scss/components/_star-rating.scss

@@ -5,7 +5,10 @@ $lxd-star-rating-gap: 0.25rem; // Separación entre estrellas
 $lxd-star-rating-star-size: 1.25em; // Tamaño de la estrella — relativo al texto que la rodea, como el resto de marcas en línea
 $lxd-star-rating-sm-star-size: 1em; // Tamaño de la estrella — talla sm
 $lxd-star-rating-lg-star-size: 1.5em; // Tamaño de la estrella — talla lg
+$lxd-star-rating-count-gap: 0.5rem; // Separación entre las estrellas y el recuento de reseñas: más aire que entre estrella y estrella, para que el recuento se lea como otra cosa
 $lxd-star-rating-track-color: #6b6b6b; // Contorno de la estrella sin ganar
+$lxd-star-rating-count-color: #4a4a4a; // Tinta del recuento de reseñas: texto secundario, es un metadato junto a la valoración
+$lxd-star-rating-empty-color: #4a4a4a; // Tinta del «todavía sin reseñas»: texto secundario, igual que el recuento
 $lxd-star-rating-fill-color: #111e30; // Relleno y contorno de la estrella ganada
 $lxd-star-rating-cursor: pointer; // Cursor sobre una estrella elegible
 $lxd-star-rating-disabled-cursor: not-allowed; // Cursor cuando la entrada está deshabilitada

package/src/tokens/scss/molecules/_confirm-dialog.scss

@@ -2,3 +2,4 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-confirm-dialog-actions-space-before: 1.5rem; // Aire entre el cuerpo del diálogo y su fila de acciones: separa la pregunta de la respuesta. El aire ENTRE los dos botones es el de `Inline` en su paso compacto
+$lxd-confirm-dialog-phrase-space-before: 1rem; // Aire entre el cuerpo del diálogo y el campo de la frase de confirmación: menos que el del pie, porque el campo todavía es parte de la pregunta

package/src/tokens/surface-invert.css

@@ -336,6 +336,8 @@ html.dark .surface-invert {
   --sparkline-accent-color: var(--chart-series-1);
   --sparkline-baseline-color: var(--chart-axis-color);
   --star-rating-track-color: var(--color-icon-secondary-on-light);
+  --star-rating-count-color: var(--color-text-muted-on-light);
+  --star-rating-empty-color: var(--color-text-muted-on-light);
   --star-rating-fill-color: var(--color-primary);
   --star-rating-focus-ring-color: var(--color-primary);
   --step-pending-bg: var(--color-background-light);

package/src/tokens/surface-public.css

@@ -31,6 +31,7 @@
   --breadcrumb-font-size: var(--text-paragraph-small-font-size);
   --code-block-font-size: var(--text-paragraph-small-font-size);
   --code-font-size: var(--code-block-font-size);
+  --description-list-term-font-size: var(--text-paragraph-small-font-size);
   --description-list-value-font-size: var(--text-font-size);
   --description-list-value-line-height: var(--text-line-height);
   --empty-state-description-font-size: var(--text-font-size);

package/src/tokens/tokens.json

@@ -1654,7 +1654,10 @@
   "--star-rating-star-size": "1.25em",
   "--star-rating-sm-star-size": "1em",
   "--star-rating-lg-star-size": "1.5em",
+  "--star-rating-count-gap": "0.5rem",
   "--star-rating-track-color": "#6b6b6b",
+  "--star-rating-count-color": "#4a4a4a",
+  "--star-rating-empty-color": "#4a4a4a",
   "--star-rating-fill-color": "#111e30",
   "--star-rating-cursor": "pointer",
   "--star-rating-disabled-cursor": "not-allowed",
@@ -2354,6 +2357,7 @@
   "--command-palette-item-highlighted-color": "#ffffff",
   "--command-palette-item-icon-size": "1.5rem",
   "--confirm-dialog-actions-space-before": "1.5rem",
+  "--confirm-dialog-phrase-space-before": "1rem",
   "--consent-banner-bg": "#ffffff",
   "--consent-banner-color": "#111e30",
   "--consent-banner-border-color": "#111e30",