@studiolxd/brand 49.9.0 → 49.10.0

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

@@ -32,6 +32,7 @@
   --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 +56,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,12 @@
   --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-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 +28,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

@@ -38,6 +38,7 @@ $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,8 @@ $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-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

@@ -212,6 +212,7 @@
   "--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 +2887,8 @@
   "--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-current-font-weight": "300",
   "--site-nav-focus-ring-width": "2px",
   "--site-nav-focus-ring-offset": "2px",