@studiolxd/brand 49.9.0 → 49.11.0

package/src/tokens/molecules/app-launcher.css

@@ -4,13 +4,14 @@
 
 :root {
   --app-launcher-content-min-width: 20rem; /** Ancho mínimo del popover */
-  --app-launcher-content-columns: 3; /** Número de columnas de la rejilla de apps */
-  --app-launcher-content-max-height: var(--available-height); /** Altura máxima del panel (por defecto, el espacio disponible en viewport que expone Base UI) — con muchas apps, el panel hace scroll en vez de salirse de la pantalla */
+  --app-launcher-content-columns: 3; /** Número de columnas de la rejilla de apps a partir de `sm` */
+  --app-launcher-content-columns-narrow: 2; /** Columnas de la rejilla por debajo de `sm`: dos. Con tres, doce baldosas en un panel estrecho dejaban el nombre de una app partido en tres líneas; con dos, la rejilla crece a lo alto lo justo y el panel sigue cabiendo entero */
+  --app-launcher-content-max-height: var(--available-height); /** Único tope del panel: el hueco que de verdad queda en la ventana, que Base UI mide y publica en `--available-height`. El panel NO tiene tope propio —crece con su contenido, y con doce apps se ve entero—; solo cuando ni ese hueco da, se recorta aquí y hace scroll */
   --app-launcher-trigger-size: var(--size-component-md); /** Tamaño (cuadrado) del botón de rejilla */
   --app-launcher-content-gap: var(--spacing-1); /** Espacio entre tiles */
   --app-launcher-content-padding-block: var(--spacing-3); /** Padding vertical del panel */
   --app-launcher-content-padding-inline: var(--spacing-3); /** Padding horizontal del panel */
-  --app-launcher-tile-gap: var(--spacing-1); /** Espacio entre el nombre y el badge «nuevo» dentro del tile */
+  --app-launcher-tile-gap: var(--spacing-1); /** Espacio entre el distintivo y el nombre dentro del tile */
   --app-launcher-tile-name-font-size: var(--font-size-1); /** Tamaño de texto del nombre de app */
   --app-launcher-trigger-border-radius: var(--border-radius-default); /** Radio del trigger */
   --app-launcher-trigger-color: var(--color-text-on-light); /** Color del icono de rejilla */
@@ -27,11 +28,13 @@
   --app-launcher-transition-easing: var(--floating-panel-transition-easing); /** Easing de la animación */
   --app-launcher-tile-padding-block: var(--menu-item-padding-block); /** Padding vertical de cada tile — el de un ítem de Menu, para que la altura case con las listas de opciones del DS */
   --app-launcher-tile-padding-inline: var(--menu-item-padding-inline); /** Padding horizontal de cada tile — el de un ítem de Menu */
+  --app-launcher-tile-badge-block-size: calc(var(--tag-font-size) * var(--tag-line-height) + 2 * var(--tag-padding-block)); /** Alto de la fila del distintivo, que va ENCIMA del nombre. Es la caja de una `Tag` (cuerpo por interlineado más su aire) y se reserva SIEMPRE, lleve distintivo la baldosa o no: de ahí que todos los nombres de la rejilla queden a la misma altura. Sale de los tokens de `Tag`, así que sigue cuadrando si la píldora cambia de talla */
   --app-launcher-tile-border-radius: var(--border-radius-default); /** Radio de cada tile */
   --app-launcher-tile-name-font-weight: var(--font-weight-default); /** Peso del nombre de app */
   --app-launcher-tile-name-line-height: var(--menu-item-line-height); /** Interlineado del nombre de app — el de un ítem de Menu, para que la altura case con las listas de opciones del DS */
   --app-launcher-tile-name-color: var(--color-text-on-light); /** Color del nombre de app */
   --app-launcher-tile-name-active-font-weight: var(--font-weight-emphasis); /** Peso del nombre — app actual */
+  --app-launcher-tile-disabled-color: var(--color-disabled-text-on-light); /** Nombre de una app apagada («próximamente»): la tinta de un control deshabilitado sobre superficie clara. No baja de 3:1 sobre el panel —el mínimo de WCAG 1.4.11 para un componente inactivo—, que es el suelo de esta tinta y el motivo de no inventar un gris más claro */
   --app-launcher-trigger-label-border-radius: var(--sidebar-nav-item-border-radius); /** Radio del disparador con texto — el de un ítem de SidebarNav */
   --app-launcher-trigger-label-font-weight: var(--sidebar-nav-item-font-weight); /** Peso de texto del disparador con texto — el de un ítem de SidebarNav */
   --app-launcher-trigger-label-color: var(--sidebar-nav-item-color); /** Color del disparador con texto (icono y texto, por `currentColor`/herencia) — el de un ítem de SidebarNav */
@@ -55,6 +58,7 @@ html.dark {
   --app-launcher-trigger-color: var(--color-text-on-dark); /** Icono de rejilla — surface-dark */
   --app-launcher-focus-ring-color: var(--color-text-on-dark); /** Focus ring — surface-dark. `focus-ring-color` (prussian) sería invisible sobre fondo oscuro. */
   --app-launcher-tile-name-color: var(--color-text-on-dark); /** Nombre de app — surface-dark */
+  --app-launcher-tile-disabled-color: var(--color-disabled-text-on-dark); /** Nombre de una app apagada — surface-dark */
   --app-launcher-trigger-label-color: var(--sidebar-nav-item-color); /** Disparador con texto — surface-dark. Por referencia al par oscuro del ítem de SidebarNav */
   --app-launcher-content-bg: var(--floating-panel-bg); /** Fondo del panel — surface-dark */
   --app-launcher-content-border-color: var(--floating-panel-border-color); /** Borde del panel — surface-dark */

package/src/tokens/molecules/site-nav.css

@@ -9,10 +9,13 @@
   --site-nav-item-gap: var(--spacing-3); /** Separación entre enlaces de un grupo */
   --site-nav-item-font-size: var(--font-size-4); /** Enlaces: un punto por debajo de la cabecera del grupo (Heading talla 6 = font-size.5) */
   --site-nav-item-line-height: var(--line-height-snug); /** Enlaces */
+  --site-nav-item-badge-gap: var(--spacing-2); /** Aire entre el rótulo del ítem y su distintivo */
   --site-nav-item-font-weight: var(--font-weight-default); /** Enlaces */
   --site-nav-item-color: var(--color-text-on-light); /** Enlaces */
   --site-nav-item-hover-color: var(--color-text-on-light); /** Enlaces en hover: en claro no cambia el color, aparece la línea */
   --site-nav-item-underline-offset: var(--border-width-focus); /** Separación entre el texto y la línea de hover (2px, más pegada que en los enlaces de texto). Se reserva siempre: la línea no desplaza nada al aparecer */
+  --site-nav-item-disabled-color: var(--color-disabled-text-on-light); /** Ítem apagado («próximamente»): la tinta de un control deshabilitado sobre superficie clara. No baja de 3:1 sobre el lienzo —el mínimo de WCAG 1.4.11 para un componente inactivo—, que es el suelo de esta tinta */
+  --site-nav-item-column-gap: var(--site-nav-group-gap); /** Pasillo entre las dos columnas de un grupo ancho (`columns: 2`). Es el mismo que separa dos grupos: las columnas de dentro tienen que leerse con el mismo aire que las de fuera, o el grupo ancho parecería dos grupos pegados */
   --site-nav-item-current-font-weight: var(--font-weight-default); /** Página actual: mismo peso que el resto (la marca aria-current y, si hace falta, el producto la resalta) */
   --site-nav-focus-ring-width: var(--border-width-focus); /** Anillo de foco */
   --site-nav-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
@@ -26,6 +29,7 @@
 html.dark {
   --site-nav-item-hover-line-width: 0px; /** Enlaces en hover — surface-dark: sin línea, cambia el color */
   --site-nav-item-color: var(--color-text-on-dark); /** Enlaces — surface-dark */
+  --site-nav-item-disabled-color: var(--color-disabled-text-on-dark); /** Ítem apagado — surface-dark */
   --site-nav-item-hover-color: var(--color-accent-2); /** Enlaces en hover — surface-dark: amarillo (accent-2) en vez de línea */
   --site-nav-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
 }

package/src/tokens/scss/molecules/_app-launcher.scss

@@ -16,7 +16,8 @@ $lxd-app-launcher-trigger-label-font-weight: 300; // Peso de texto del disparado
 $lxd-app-launcher-trigger-label-line-height: 1.3; // Interlineado del disparador con texto — el de un ítem de SidebarNav
 $lxd-app-launcher-trigger-label-color: #111e30; // Color del disparador con texto (icono y texto, por `currentColor`/herencia) — el de un ítem de SidebarNav
 $lxd-app-launcher-content-min-width: 20rem; // Ancho mínimo del popover
-$lxd-app-launcher-content-columns: 3; // Número de columnas de la rejilla de apps
+$lxd-app-launcher-content-columns: 3; // Número de columnas de la rejilla de apps a partir de `sm`
+$lxd-app-launcher-content-columns-narrow: 2; // Columnas de la rejilla por debajo de `sm`: dos. Con tres, doce baldosas en un panel estrecho dejaban el nombre de una app partido en tres líneas; con dos, la rejilla crece a lo alto lo justo y el panel sigue cabiendo entero
 $lxd-app-launcher-content-gap: 0.25rem; // Espacio entre tiles
 $lxd-app-launcher-content-bg: #ffffff; // Fondo del panel
 $lxd-app-launcher-content-border-width: 1px; // Borde del panel
@@ -24,20 +25,22 @@ $lxd-app-launcher-content-border-color: #111e30; // Color del borde del panel
 $lxd-app-launcher-content-border-radius: 0px; // Radio del panel
 $lxd-app-launcher-content-shadow: none; // Sombra del panel
 $lxd-app-launcher-content-z-index: 400; // Z-index del popover
-$lxd-app-launcher-content-max-height: var(--available-height); // Altura máxima del panel (por defecto, el espacio disponible en viewport que expone Base UI) — con muchas apps, el panel hace scroll en vez de salirse de la pantalla
+$lxd-app-launcher-content-max-height: var(--available-height); // Único tope del panel: el hueco que de verdad queda en la ventana, que Base UI mide y publica en `--available-height`. El panel NO tiene tope propio —crece con su contenido, y con doce apps se ve entero—; solo cuando ni ese hueco da, se recorta aquí y hace scroll
 $lxd-app-launcher-content-padding-block: 0.75rem; // Padding vertical del panel
 $lxd-app-launcher-content-padding-inline: 0.75rem; // Padding horizontal del panel
 $lxd-app-launcher-transition-duration: 150ms; // Duración de la animación de entrada/salida
 $lxd-app-launcher-transition-easing: ease; // Easing de la animación
 $lxd-app-launcher-tile-padding-block: 0.5rem; // Padding vertical de cada tile — el de un ítem de Menu, para que la altura case con las listas de opciones del DS
 $lxd-app-launcher-tile-padding-inline: 1rem; // Padding horizontal de cada tile — el de un ítem de Menu
-$lxd-app-launcher-tile-gap: 0.25rem; // Espacio entre el nombre y el badge «nuevo» dentro del tile
+$lxd-app-launcher-tile-gap: 0.25rem; // Espacio entre el distintivo y el nombre dentro del tile
+$lxd-app-launcher-tile-badge-block-size: calc(0.875rem * 1 + 2 * 0.25rem); // Alto de la fila del distintivo, que va ENCIMA del nombre. Es la caja de una `Tag` (cuerpo por interlineado más su aire) y se reserva SIEMPRE, lleve distintivo la baldosa o no: de ahí que todos los nombres de la rejilla queden a la misma altura. Sale de los tokens de `Tag`, así que sigue cuadrando si la píldora cambia de talla
 $lxd-app-launcher-tile-border-radius: 0px; // Radio de cada tile
 $lxd-app-launcher-tile-name-font-size: 0.875rem; // Tamaño de texto del nombre de app
 $lxd-app-launcher-tile-name-font-weight: 300; // Peso del nombre de app
 $lxd-app-launcher-tile-name-line-height: 1.3; // Interlineado del nombre de app — el de un ítem de Menu, para que la altura case con las listas de opciones del DS
 $lxd-app-launcher-tile-name-color: #111e30; // Color del nombre de app
 $lxd-app-launcher-tile-name-active-font-weight: 500; // Peso del nombre — app actual
+$lxd-app-launcher-tile-disabled-color: #4a4a4a; // Nombre de una app apagada («próximamente»): la tinta de un control deshabilitado sobre superficie clara. No baja de 3:1 sobre el panel —el mínimo de WCAG 1.4.11 para un componente inactivo—, que es el suelo de esta tinta y el motivo de no inventar un gris más claro
 $lxd-app-launcher-trigger-hover-bg: #111e30; // Fondo del disparador (solo icono) bajo el puntero. Antes dejaba una línea de tinta debajo (regla de Colores), pero la línea bajo un glifo suelto —sin texto— se lee como un subrayado del icono; se sustituye por la misma inversión de marca que ya llevan los tiles del panel, la excepción declarada de este componente
 $lxd-app-launcher-trigger-hover-color: #ffffff; // Color del icono de rejilla bajo el puntero — el mismo par que `trigger-hover-bg`
 $lxd-app-launcher-tile-highlighted-bg: #111e30; // Relleno del tile bajo el puntero o el teclado — el del Menu: la inversión de marca. La rejilla de apps es la lista de opciones del panel, excepción declarada a «los estados no se rellenan» (Foundations → Colores)

package/src/tokens/scss/molecules/_site-nav.scss

@@ -12,6 +12,9 @@ $lxd-site-nav-item-color: #111e30; // Enlaces
 $lxd-site-nav-item-hover-color: #111e30; // Enlaces en hover: en claro no cambia el color, aparece la línea
 $lxd-site-nav-item-underline-offset: 2px; // Separación entre el texto y la línea de hover (2px, más pegada que en los enlaces de texto). Se reserva siempre: la línea no desplaza nada al aparecer
 $lxd-site-nav-item-hover-line-width: 1px; // Enlaces en hover: la línea bajo el enlace (como los enlaces de texto), en claro
+$lxd-site-nav-item-disabled-color: #4a4a4a; // Ítem apagado («próximamente»): la tinta de un control deshabilitado sobre superficie clara. No baja de 3:1 sobre el lienzo —el mínimo de WCAG 1.4.11 para un componente inactivo—, que es el suelo de esta tinta
+$lxd-site-nav-item-badge-gap: 0.5rem; // Aire entre el rótulo del ítem y su distintivo
+$lxd-site-nav-item-column-gap: 2rem; // Pasillo entre las dos columnas de un grupo ancho (`columns: 2`). Es el mismo que separa dos grupos: las columnas de dentro tienen que leerse con el mismo aire que las de fuera, o el grupo ancho parecería dos grupos pegados
 $lxd-site-nav-item-current-font-weight: 300; // Página actual: mismo peso que el resto (la marca aria-current y, si hace falta, el producto la resalta)
 $lxd-site-nav-focus-ring-width: 2px; // Anillo de foco
 $lxd-site-nav-focus-ring-offset: 2px; // Separación del anillo de foco

package/src/tokens/surface-invert.css

@@ -24,6 +24,7 @@ html.dark .surface-invert {
   --app-launcher-content-bg: var(--floating-panel-bg);
   --app-launcher-content-border-color: var(--floating-panel-border-color);
   --app-launcher-tile-name-color: var(--color-text-on-light);
+  --app-launcher-tile-disabled-color: var(--color-disabled-text-on-light);
   --app-launcher-trigger-hover-bg: var(--menu-item-highlighted-bg);
   --app-launcher-trigger-hover-color: var(--menu-item-highlighted-color);
   --app-launcher-tile-highlighted-bg: var(--menu-item-highlighted-bg);
@@ -602,6 +603,7 @@ html.dark .surface-invert {
   --site-nav-item-color: var(--color-text-on-light);
   --site-nav-item-hover-color: var(--color-text-on-light);
   --site-nav-item-hover-line-width: var(--link-underline-width);
+  --site-nav-item-disabled-color: var(--color-disabled-text-on-light);
   --site-nav-focus-ring-color: var(--color-primary);
   --stat-tile-border-color: var(--card-outline-border-color);
   --stat-tile-label-color: var(--color-text-muted-on-light);

package/src/tokens/surface-light.css

@@ -25,6 +25,7 @@ html.dark .surface-light {
   --app-launcher-content-bg: var(--floating-panel-bg);
   --app-launcher-content-border-color: var(--floating-panel-border-color);
   --app-launcher-tile-name-color: var(--color-text-on-light);
+  --app-launcher-tile-disabled-color: var(--color-disabled-text-on-light);
   --app-launcher-trigger-hover-bg: var(--menu-item-highlighted-bg);
   --app-launcher-trigger-hover-color: var(--menu-item-highlighted-color);
   --app-launcher-tile-highlighted-bg: var(--menu-item-highlighted-bg);
@@ -603,6 +604,7 @@ html.dark .surface-light {
   --site-nav-item-color: var(--color-text-on-light);
   --site-nav-item-hover-color: var(--color-text-on-light);
   --site-nav-item-hover-line-width: var(--link-underline-width);
+  --site-nav-item-disabled-color: var(--color-disabled-text-on-light);
   --site-nav-focus-ring-color: var(--color-primary);
   --stat-tile-border-color: var(--card-outline-border-color);
   --stat-tile-label-color: var(--color-text-muted-on-light);

package/src/tokens/tokens.json

@@ -191,6 +191,7 @@
   "--app-launcher-trigger-label-color": "#111e30",
   "--app-launcher-content-min-width": "20rem",
   "--app-launcher-content-columns": "3",
+  "--app-launcher-content-columns-narrow": "2",
   "--app-launcher-content-gap": "0.25rem",
   "--app-launcher-content-bg": "#ffffff",
   "--app-launcher-content-border-width": "1px",
@@ -206,12 +207,14 @@
   "--app-launcher-tile-padding-block": "0.5rem",
   "--app-launcher-tile-padding-inline": "1rem",
   "--app-launcher-tile-gap": "0.25rem",
+  "--app-launcher-tile-badge-block-size": "calc(0.875rem * 1 + 2 * 0.25rem)",
   "--app-launcher-tile-border-radius": "0px",
   "--app-launcher-tile-name-font-size": "0.875rem",
   "--app-launcher-tile-name-font-weight": "300",
   "--app-launcher-tile-name-line-height": "1.3",
   "--app-launcher-tile-name-color": "#111e30",
   "--app-launcher-tile-name-active-font-weight": "500",
+  "--app-launcher-tile-disabled-color": "#4a4a4a",
   "--app-launcher-trigger-hover-bg": "#111e30",
   "--app-launcher-trigger-hover-color": "#ffffff",
   "--app-launcher-tile-highlighted-bg": "#111e30",
@@ -2886,6 +2889,9 @@
   "--site-nav-item-hover-color": "#111e30",
   "--site-nav-item-underline-offset": "2px",
   "--site-nav-item-hover-line-width": "1px",
+  "--site-nav-item-disabled-color": "#4a4a4a",
+  "--site-nav-item-badge-gap": "0.5rem",
+  "--site-nav-item-column-gap": "2rem",
   "--site-nav-item-current-font-weight": "300",
   "--site-nav-focus-ring-width": "2px",
   "--site-nav-focus-ring-offset": "2px",