@studiolxd/brand 49.8.1 → 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/calendar-planner.css

@@ -5,6 +5,9 @@
 :root {
   --calendar-planner-cell-min-height: 6rem; /** Altura mínima de cada celda de día — md */
   --calendar-planner-cell-bg: rgba(0, 0, 0, 0); /** Fondo base de las celdas */
+  --calendar-planner-week-cell-min-height: 12rem; /** Altura mínima de la columna de día en la vista de semana — md. La columna enseña el día entero, así que no trunca: parte alta y crece con lo que haya */
+  --calendar-planner-sm-week-cell-min-height: 8rem; /** Altura mínima de la columna de día en la vista de semana — sm */
+  --calendar-planner-lg-week-cell-min-height: 16rem; /** Altura mínima de la columna de día en la vista de semana — lg */
   --calendar-planner-sm-cell-min-height: 4rem; /** Altura mínima de celda — sm */
   --calendar-planner-lg-cell-min-height: 9rem; /** Altura mínima de celda — lg */
   --calendar-planner-weekday-padding-block: var(--spacing-2); /** Padding vertical de las cabeceras */
@@ -14,6 +17,8 @@
   --calendar-planner-day-number-size: var(--spacing-5); /** Tamaño (ancho y alto) del badge con el número */
   --calendar-planner-items-gap: var(--spacing-1); /** Gap entre elementos/tags dentro de la celda */
   --calendar-planner-more-font-size: var(--font-size-1); /** Tamaño del texto '+N más' */
+  --calendar-planner-weekday-gap: var(--spacing-1); /** Aire entre el nombre del día y su número en la cabecera de la vista de semana */
+  --calendar-planner-event-time-font-size: var(--font-size-1); /** Tamaño de la hora del evento en la vista de semana */
   --calendar-planner-gap: var(--calendar-gap); /** Gap entre cabecera y cuadrícula — hereda de Calendar */
   --calendar-planner-font-family: var(--calendar-font-family); /** Familia tipográfica base — hereda de Calendar */
   --calendar-planner-title-font-size: var(--calendar-title-font-size); /** Tamaño del título del mes — hereda de Calendar */
@@ -31,6 +36,7 @@
   --calendar-planner-more-focus-ring-color: var(--color-primary); /** Color del focus ring del botón '+N más' */
   --calendar-planner-transition-duration: var(--calendar-transition-duration); /** Duración de las transiciones — hereda de Calendar */
   --calendar-planner-transition-easing: var(--calendar-transition-easing); /** Easing de las transiciones — hereda de Calendar */
+  --calendar-planner-event-time-color: var(--color-text-muted-on-light); /** Color de la hora del evento: es el dato secundario del renglón, el evento manda */
   --calendar-planner-nav-color: var(--calendar-nav-color); /** Color de los botones prev/next — hereda de Calendar */
   --calendar-planner-nav-focus-ring-color: var(--calendar-nav-focus-ring-color); /** Color del focus ring de los botones de navegación — hereda de Calendar */
   --calendar-planner-nav-focus-ring-width: var(--calendar-nav-focus-ring-width); /** Grosor del focus ring — hereda de Calendar */
@@ -52,6 +58,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
+  --calendar-planner-event-time-color: var(--color-text-muted-on-dark); /** Hora del evento — surface-dark */
   --calendar-planner-nav-color: var(--color-text-on-dark); /** Color de navegación — surface-dark */
   --calendar-planner-nav-focus-ring-color: var(--color-text-on-dark); /** Focus ring de navegación — surface-dark */
   --calendar-planner-title-color: var(--color-text-on-dark); /** Color del título — 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/_calendar-planner.scss

@@ -40,6 +40,12 @@ $lxd-calendar-planner-more-hover-color: #111e30; // Color hover del texto '+N m
 $lxd-calendar-planner-more-focus-ring-color: #111e30; // Color del focus ring del botón '+N más'
 $lxd-calendar-planner-transition-duration: 150ms; // Duración de las transiciones — hereda de Calendar
 $lxd-calendar-planner-transition-easing: ease; // Easing de las transiciones — hereda de Calendar
+$lxd-calendar-planner-week-cell-min-height: 12rem; // Altura mínima de la columna de día en la vista de semana — md. La columna enseña el día entero, así que no trunca: parte alta y crece con lo que haya
+$lxd-calendar-planner-sm-week-cell-min-height: 8rem; // Altura mínima de la columna de día en la vista de semana — sm
+$lxd-calendar-planner-lg-week-cell-min-height: 16rem; // Altura mínima de la columna de día en la vista de semana — lg
+$lxd-calendar-planner-weekday-gap: 0.25rem; // Aire entre el nombre del día y su número en la cabecera de la vista de semana
+$lxd-calendar-planner-event-time-font-size: 0.875rem; // Tamaño de la hora del evento en la vista de semana
+$lxd-calendar-planner-event-time-color: #4a4a4a; // Color de la hora del evento: es el dato secundario del renglón, el evento manda
 $lxd-calendar-planner-sm-cell-min-height: 4rem; // Altura mínima de celda — sm
 $lxd-calendar-planner-lg-cell-min-height: 9rem; // Altura mínima de celda — lg
 $lxd-calendar-planner-hover-line-width: 1px; // Grosor de la línea de hover — hereda de Calendar

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);
@@ -452,6 +453,7 @@ html.dark .surface-invert {
   --calendar-planner-more-color: var(--color-text-muted-on-light);
   --calendar-planner-more-hover-color: var(--color-text-on-light);
   --calendar-planner-more-focus-ring-color: var(--color-primary);
+  --calendar-planner-event-time-color: var(--color-text-muted-on-light);
   --calendar-planner-hover-line-color: var(--calendar-hover-line-color);
   --calendar-roster-border-color: var(--color-primary);
   --calendar-roster-th-name-color: var(--color-text-muted-on-light);
@@ -601,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);
@@ -453,6 +454,7 @@ html.dark .surface-light {
   --calendar-planner-more-color: var(--color-text-muted-on-light);
   --calendar-planner-more-hover-color: var(--color-text-on-light);
   --calendar-planner-more-focus-ring-color: var(--color-primary);
+  --calendar-planner-event-time-color: var(--color-text-muted-on-light);
   --calendar-planner-hover-line-color: var(--calendar-hover-line-color);
   --calendar-roster-border-color: var(--color-primary);
   --calendar-roster-th-name-color: var(--color-text-muted-on-light);
@@ -602,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/surface-public.css

@@ -74,6 +74,7 @@
   --toggle-height: var(--toggle-lg-height);
   --toggle-padding-inline: var(--toggle-lg-padding-inline);
   --toggle-font-size: var(--toggle-lg-font-size);
+  --calendar-planner-week-cell-min-height: var(--calendar-planner-lg-week-cell-min-height);
   --calendar-planner-cell-min-height: var(--calendar-planner-lg-cell-min-height);
   --calendar-day-size: var(--calendar-lg-day-size);
   --calendar-title-font-size: var(--calendar-lg-title-font-size);

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",
@@ -2189,6 +2190,12 @@
   "--calendar-planner-more-focus-ring-color": "#111e30",
   "--calendar-planner-transition-duration": "150ms",
   "--calendar-planner-transition-easing": "ease",
+  "--calendar-planner-week-cell-min-height": "12rem",
+  "--calendar-planner-sm-week-cell-min-height": "8rem",
+  "--calendar-planner-lg-week-cell-min-height": "16rem",
+  "--calendar-planner-weekday-gap": "0.25rem",
+  "--calendar-planner-event-time-font-size": "0.875rem",
+  "--calendar-planner-event-time-color": "#4a4a4a",
   "--calendar-planner-sm-cell-min-height": "4rem",
   "--calendar-planner-lg-cell-min-height": "9rem",
   "--calendar-planner-hover-line-width": "1px",
@@ -2880,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",