@studiolxd/brand 49.25.0 → 49.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.25.0",
+  "version": "49.27.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/molecules/loading-state.css

@@ -9,5 +9,9 @@
   --loading-state-gap: var(--empty-state-gap); /** Aire entre el girador y la acción — el mismo que EmptyState, porque ocupa su sitio */
   --loading-state-padding-block: var(--empty-state-padding-block); /** Padding vertical — el de EmptyState */
   --loading-state-padding-inline: var(--empty-state-padding-inline); /** Padding horizontal — el de EmptyState */
+  --loading-state-label-font-family: var(--empty-state-description-font-family); /** Familia del texto visible de la espera (labelVisible) — la de la descripción de EmptyState */
+  --loading-state-sm-label-font-size: var(--empty-state-description-font-size-sm); /** Tamaño del texto visible en talla sm — el de la descripción de EmptyState sm */
   --loading-state-spinner-color: var(--empty-state-icon-color); /** Color del girador — el del icono de EmptyState (su par oscuro llega por el fichero derivado) */
+  --loading-state-label-font-size: var(--empty-state-description-font-size); /** Tamaño del texto visible de la espera — el de la descripción de EmptyState (cuerpo de la superficie) */
+  --loading-state-label-color: var(--empty-state-description-color); /** Color del texto visible de la espera — el de la descripción de EmptyState (texto atenuado, nunca grey-dark) */
 }

package/src/tokens/scss/molecules/_loading-state.scss

@@ -8,3 +8,7 @@ $lxd-loading-state-padding-block: 3rem; // Padding vertical — el de EmptyState
 $lxd-loading-state-padding-inline: 1.5rem; // Padding horizontal — el de EmptyState
 $lxd-loading-state-sm-padding-block: 1.5rem; // Padding vertical en talla sm: dentro de un diálogo el aire ya lo pone el diálogo
 $lxd-loading-state-spinner-color: #6b6b6b; // Color del girador — el del icono de EmptyState (su par oscuro llega por el fichero derivado)
+$lxd-loading-state-label-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia del texto visible de la espera (labelVisible) — la de la descripción de EmptyState
+$lxd-loading-state-label-font-size: 1rem; // Tamaño del texto visible de la espera — el de la descripción de EmptyState (cuerpo de la superficie)
+$lxd-loading-state-sm-label-font-size: 0.875rem; // Tamaño del texto visible en talla sm — el de la descripción de EmptyState sm
+$lxd-loading-state-label-color: #4a4a4a; // Color del texto visible de la espera — el de la descripción de EmptyState (texto atenuado, nunca grey-dark)

package/src/tokens/surface-dark-derived.css

@@ -48,6 +48,7 @@ html.dark {
   --floating-dock-close-color: var(--modal-close-color);
   --floating-dock-close-focus-ring-color: var(--modal-close-focus-ring-color);
   --loading-state-spinner-color: var(--empty-state-icon-color);
+  --loading-state-label-color: var(--empty-state-description-color);
   --menu-bg: var(--floating-panel-bg);
   --menu-border-color: var(--floating-panel-border-color);
   --number-input-border-color: var(--input-border-color);

package/src/tokens/surface-invert.css

@@ -210,6 +210,7 @@ html.dark .surface-invert {
   --link-focus-ring-color: var(--color-primary);
   --link-ink-color: var(--color-text-on-light);
   --loading-state-spinner-color: var(--empty-state-icon-color);
+  --loading-state-label-color: var(--empty-state-description-color);
   --logo-color: var(--color-text-on-light);
   --logomark-color: var(--color-text-on-light);
   --menu-button-color: var(--color-text-on-light);

package/src/tokens/surface-light.css

@@ -211,6 +211,7 @@ html.dark .surface-light {
   --link-focus-ring-color: var(--color-primary);
   --link-ink-color: var(--color-text-on-light);
   --loading-state-spinner-color: var(--empty-state-icon-color);
+  --loading-state-label-color: var(--empty-state-description-color);
   --logo-color: var(--color-text-on-light);
   --logomark-color: var(--color-text-on-light);
   --menu-button-color: var(--color-text-on-light);

package/src/tokens/surface-public.css

@@ -168,6 +168,7 @@
   --form-helper-font-size: var(--text-paragraph-small-font-size);
   --form-success-font-size: var(--text-font-size);
   --input-phone-country-item-padding-block: var(--select-item-padding-block);
+  --loading-state-label-font-size: var(--empty-state-description-font-size);
   --message-bubble-font-size: var(--text-font-size);
   --modal-description-font-size: var(--text-font-size);
   --password-field-input-padding-inline-end: var(--password-field-toggle-size);

package/src/tokens/tokens.json

@@ -1120,6 +1120,10 @@
   "--loading-state-padding-inline": "1.5rem",
   "--loading-state-sm-padding-block": "1.5rem",
   "--loading-state-spinner-color": "#6b6b6b",
+  "--loading-state-label-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--loading-state-label-font-size": "1rem",
+  "--loading-state-sm-label-font-size": "0.875rem",
+  "--loading-state-label-color": "#4a4a4a",
   "--logo-height-sm": "2rem",
   "--logo-height-md": "2.5rem",
   "--logo-height-lg": "3rem",