@studiolxd/brand 49.12.0 → 49.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.12.0",
+  "version": "49.14.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
@@ -838,6 +838,11 @@
       "import": "./dist/org-chart.js",
       "default": "./dist/org-chart.js"
     },
+    "./site-search": {
+      "types": "./dist/_types/organisms/SiteSearch/SiteSearch.d.ts",
+      "import": "./dist/site-search.js",
+      "default": "./dist/site-search.js"
+    },
     "./planning-grid": {
       "types": "./dist/_types/organisms/PlanningGrid/PlanningGrid.d.ts",
       "import": "./dist/planning-grid.js",

package/src/tokens/index.css

@@ -160,6 +160,7 @@
 @import "./molecules/recurrence-field.css";
 @import "./molecules/planning-grid.css";
 @import "./molecules/org-chart.css";
+@import "./molecules/site-search.css";
 @import "./molecules/copy-button.css";
 @import "./molecules/confirm-dialog.css";
 @import "./molecules/avatar-upload.css";

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

@@ -0,0 +1,57 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --site-search-ghost-section-inline-size: 30%; /** Ancho de la barra fantasma del rastro de sección */
+  --site-search-ghost-title-inline-size: 70%; /** Ancho de la barra fantasma del título */
+  --site-search-ghost-url-inline-size: 45%; /** Ancho de la barra fantasma de la dirección */
+  --site-search-inline-size: var(--input-width); /** Anchura del buscador: la de su contenedor. Es la página de resultados entera, así que ocupa todo el hueco donde se monte — declarada y no heredada del flujo, para que tampoco se encoja dentro de una fila flex o una celda de retícula */
+  --site-search-gap: var(--spacing-5); /** Aire entre los bloques del buscador: el formulario, el aviso de estado, los resultados y el pie */
+  --site-search-block-gap: var(--spacing-3); /** Aire entre las líneas de un bloque de estado (reposo, escribiendo, carga) */
+  --site-search-status-line-height: var(--line-height-normal); /** Interlineado del aviso de estado */
+  --site-search-status-gap: var(--spacing-2); /** Aire entre el indicador de carga y su texto */
+  --site-search-results-gap: var(--spacing-6); /** Aire entre dos resultados (32px). Sin filete que los separe, es el aire el que dice dónde acaba uno y empieza el siguiente: tiene que ser claramente mayor que el que hay entre las líneas de un mismo resultado */
+  --site-search-result-gap: var(--spacing-2); /** Aire entre las cuatro líneas de un resultado: sección, título, extracto y dirección */
+  --site-search-result-title-line-height: var(--line-height-snug); /** Interlineado del título del resultado: el de un título, más cerrado que el del texto que lleva debajo */
+  --site-search-result-measure: var(--content-measure); /** Medida de lectura del extracto: la del sistema (70ch). El filete y la lista siguen ocupando todo el ancho —son estructura—, pero el texto que se lee para decidir si el resultado sirve no se estira a lo ancho de una pantalla grande */
+  --site-search-suggestions-gap: var(--spacing-2); /** Aire entre las sugerencias de búsqueda */
+  --site-search-suggestions-label-font-size: var(--font-size-0); /** Cuerpo del rótulo de las sugerencias */
+  --site-search-skeleton-gap: var(--spacing-2); /** Aire entre las barras de un resultado fantasma */
+  --site-search-status-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del aviso de estado: cuántos resultados hay, que se está buscando o que no hay nada */
+  --site-search-status-color: var(--color-text-muted-on-light); /** Color del aviso de estado — atenuado: acompaña a los resultados, no compite con ellos */
+  --site-search-status-query-font-weight: var(--font-weight-emphasis); /** Peso de la consulta dentro del aviso: lo único que cambia de una búsqueda a otra */
+  --site-search-result-title-font-size: var(--text-paragraph-large-font-size); /** Cuerpo del título del resultado: un peldaño por encima del cuerpo de la superficie, para que siga mandando ahora que el extracto y la dirección leen al cuerpo entero */
+  --site-search-result-title-font-weight: var(--font-weight-emphasis); /** Peso del título del resultado */
+  --site-search-result-title-color: var(--color-text-on-light); /** Color del título del resultado */
+  --site-search-result-section-font-size: var(--text-font-size); /** Cuerpo del rastro de sección («Documentación › Creator»): el cuerpo de la superficie, que en la página pública es el grande. Lo que lo separa del extracto es la tinta atenuada, no un cuerpo menor */
+  --site-search-result-section-line-height: var(--text-line-height); /** Interlineado del rastro de sección */
+  --site-search-result-section-color: var(--color-text-muted-on-light); /** Color del rastro de sección — atenuado */
+  --site-search-result-excerpt-font-size: var(--text-font-size); /** Cuerpo del extracto: el cuerpo de la superficie, que en la página pública es el grande (20px). Es el texto que se lee para decidir si el resultado sirve, así que lee a la talla de lectura de la página, no a una menor */
+  --site-search-result-excerpt-line-height: var(--text-line-height); /** Interlineado del extracto: el del cuerpo de la superficie */
+  --site-search-result-excerpt-color: var(--color-text-on-light); /** Color del extracto — la tinta de la superficie: es lo que se lee para decidir si el resultado sirve */
+  --site-search-result-url-font-size: var(--text-font-size); /** Cuerpo de la dirección del resultado: el cuerpo de la superficie, el mismo que el extracto y el rastro de sección */
+  --site-search-result-url-line-height: var(--text-line-height); /** Interlineado de la dirección */
+  --site-search-result-url-color: var(--color-text-muted-on-light); /** Color de la dirección — atenuada */
+  --site-search-result-link-hover-line-width: var(--border-width-default); /** Grosor de la línea bajo el título del resultado con el puntero encima. Un estado se marca con una línea de tinta, nunca con relleno */
+  --site-search-result-link-hover-line-offset: var(--link-underline-offset); /** Separación entre el título y su línea de hover. Apunta a la del enlace: en el DS todo subrayado se separa del texto lo mismo */
+  --site-search-result-focus-ring-color: var(--color-primary); /** Color del anillo de foco del enlace del resultado */
+  --site-search-result-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --site-search-result-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
+  --site-search-result-mark-bg: var(--color-accent-2); /** Fondo del resaltado de coincidencias (`<mark>`): el amarillo de marca, el mismo que usa `DocsSearch`. Es un relleno autocontenido —fondo y tinta emparejados—, así que no cambia en superficie oscura */
+  --site-search-result-mark-color: var(--color-text-on-light); /** Tinta del resaltado sobre el amarillo */
+  --site-search-suggestions-label-color: var(--color-text-muted-on-light); /** Color del rótulo de las sugerencias — atenuado */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --site-search-result-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco del enlace del resultado — surface-dark */
+  --site-search-status-color: var(--color-text-muted-on-dark); /** Aviso de estado — surface-dark */
+  --site-search-result-title-color: var(--color-text-on-dark); /** Título del resultado — surface-dark */
+  --site-search-result-section-color: var(--color-text-muted-on-dark); /** Rastro de sección — surface-dark */
+  --site-search-result-excerpt-color: var(--color-text-on-dark); /** Extracto — surface-dark */
+  --site-search-result-url-color: var(--color-text-muted-on-dark); /** Dirección del resultado — surface-dark */
+  --site-search-suggestions-label-color: var(--color-text-muted-on-dark); /** Rótulo de las sugerencias — surface-dark */
+}

package/src/tokens/molecules/site-search.ts

@@ -0,0 +1,7 @@
+import siteSearch from '../../../tokens/organism/site-search.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(siteSearch as never);
+
+export const siteSearchBaseTokens = all.filter(t => !t.name.includes('surface-dark'));
+export const siteSearchDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/scss/_index.legacy.scss

@@ -166,5 +166,6 @@
 @import 'molecules/recurrence-field';
 @import 'molecules/planning-grid';
 @import 'molecules/org-chart';
+@import 'molecules/site-search';
 @import 'molecules/recovery-codes';
 @import 'molecules/connector-auth';

package/src/tokens/scss/_index.scss

@@ -166,5 +166,6 @@
 @forward 'molecules/recurrence-field';
 @forward 'molecules/planning-grid';
 @forward 'molecules/org-chart';
+@forward 'molecules/site-search';
 @forward 'molecules/recovery-codes';
 @forward 'molecules/connector-auth';

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

@@ -0,0 +1,41 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-site-search-inline-size: 100%; // Anchura del buscador: la de su contenedor. Es la página de resultados entera, así que ocupa todo el hueco donde se monte — declarada y no heredada del flujo, para que tampoco se encoja dentro de una fila flex o una celda de retícula
+$lxd-site-search-gap: 1.5rem; // Aire entre los bloques del buscador: el formulario, el aviso de estado, los resultados y el pie
+$lxd-site-search-block-gap: 0.75rem; // Aire entre las líneas de un bloque de estado (reposo, escribiendo, carga)
+$lxd-site-search-status-font-size: 0.875rem; // Cuerpo del aviso de estado: cuántos resultados hay, que se está buscando o que no hay nada
+$lxd-site-search-status-line-height: 1.5; // Interlineado del aviso de estado
+$lxd-site-search-status-color: #4a4a4a; // Color del aviso de estado — atenuado: acompaña a los resultados, no compite con ellos
+$lxd-site-search-status-gap: 0.5rem; // Aire entre el indicador de carga y su texto
+$lxd-site-search-status-query-font-weight: 500; // Peso de la consulta dentro del aviso: lo único que cambia de una búsqueda a otra
+$lxd-site-search-results-gap: 2rem; // Aire entre dos resultados (32px). Sin filete que los separe, es el aire el que dice dónde acaba uno y empieza el siguiente: tiene que ser claramente mayor que el que hay entre las líneas de un mismo resultado
+$lxd-site-search-result-gap: 0.5rem; // Aire entre las cuatro líneas de un resultado: sección, título, extracto y dirección
+$lxd-site-search-result-title-font-size: 1.25rem; // Cuerpo del título del resultado: un peldaño por encima del cuerpo de la superficie, para que siga mandando ahora que el extracto y la dirección leen al cuerpo entero
+$lxd-site-search-result-title-line-height: 1.3; // Interlineado del título del resultado: el de un título, más cerrado que el del texto que lleva debajo
+$lxd-site-search-result-title-font-weight: 500; // Peso del título del resultado
+$lxd-site-search-result-title-color: #111e30; // Color del título del resultado
+$lxd-site-search-result-section-font-size: 1rem; // Cuerpo del rastro de sección («Documentación › Creator»): el cuerpo de la superficie, que en la página pública es el grande. Lo que lo separa del extracto es la tinta atenuada, no un cuerpo menor
+$lxd-site-search-result-section-line-height: 1.5; // Interlineado del rastro de sección
+$lxd-site-search-result-section-color: #4a4a4a; // Color del rastro de sección — atenuado
+$lxd-site-search-result-excerpt-font-size: 1rem; // Cuerpo del extracto: el cuerpo de la superficie, que en la página pública es el grande (20px). Es el texto que se lee para decidir si el resultado sirve, así que lee a la talla de lectura de la página, no a una menor
+$lxd-site-search-result-excerpt-line-height: 1.5; // Interlineado del extracto: el del cuerpo de la superficie
+$lxd-site-search-result-excerpt-color: #111e30; // Color del extracto — la tinta de la superficie: es lo que se lee para decidir si el resultado sirve
+$lxd-site-search-result-measure: 70ch; // Medida de lectura del extracto: la del sistema (70ch). El filete y la lista siguen ocupando todo el ancho —son estructura—, pero el texto que se lee para decidir si el resultado sirve no se estira a lo ancho de una pantalla grande
+$lxd-site-search-result-url-font-size: 1rem; // Cuerpo de la dirección del resultado: el cuerpo de la superficie, el mismo que el extracto y el rastro de sección
+$lxd-site-search-result-url-line-height: 1.5; // Interlineado de la dirección
+$lxd-site-search-result-url-color: #4a4a4a; // Color de la dirección — atenuada
+$lxd-site-search-result-link-hover-line-width: 1px; // Grosor de la línea bajo el título del resultado con el puntero encima. Un estado se marca con una línea de tinta, nunca con relleno
+$lxd-site-search-result-link-hover-line-offset: 0.25rem; // Separación entre el título y su línea de hover. Apunta a la del enlace: en el DS todo subrayado se separa del texto lo mismo
+$lxd-site-search-result-focus-ring-color: #111e30; // Color del anillo de foco del enlace del resultado
+$lxd-site-search-result-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-site-search-result-focus-ring-offset: 1px; // Separación del anillo de foco
+$lxd-site-search-result-mark-bg: #ffcd00; // Fondo del resaltado de coincidencias (`<mark>`): el amarillo de marca, el mismo que usa `DocsSearch`. Es un relleno autocontenido —fondo y tinta emparejados—, así que no cambia en superficie oscura
+$lxd-site-search-result-mark-color: #111e30; // Tinta del resaltado sobre el amarillo
+$lxd-site-search-suggestions-gap: 0.5rem; // Aire entre las sugerencias de búsqueda
+$lxd-site-search-suggestions-label-font-size: 0.75rem; // Cuerpo del rótulo de las sugerencias
+$lxd-site-search-suggestions-label-color: #4a4a4a; // Color del rótulo de las sugerencias — atenuado
+$lxd-site-search-ghost-section-inline-size: 30%; // Ancho de la barra fantasma del rastro de sección
+$lxd-site-search-ghost-title-inline-size: 70%; // Ancho de la barra fantasma del título
+$lxd-site-search-ghost-url-inline-size: 45%; // Ancho de la barra fantasma de la dirección
+$lxd-site-search-skeleton-gap: 0.5rem; // Aire entre las barras de un resultado fantasma

package/src/tokens/surface-invert.css

@@ -740,4 +740,11 @@ html.dark .surface-invert {
   --planning-grid-footer-bg: var(--color-surface-secondary-on-light);
   --planning-grid-footer-color: var(--color-text-on-light);
   --planning-grid-over-color: var(--color-error-text-on-light);
+  --site-search-status-color: var(--color-text-muted-on-light);
+  --site-search-result-title-color: var(--color-text-on-light);
+  --site-search-result-section-color: var(--color-text-muted-on-light);
+  --site-search-result-excerpt-color: var(--color-text-on-light);
+  --site-search-result-url-color: var(--color-text-muted-on-light);
+  --site-search-result-focus-ring-color: var(--color-primary);
+  --site-search-suggestions-label-color: var(--color-text-muted-on-light);
 }

package/src/tokens/surface-light.css

@@ -741,4 +741,11 @@ html.dark .surface-light {
   --planning-grid-footer-bg: var(--color-surface-secondary-on-light);
   --planning-grid-footer-color: var(--color-text-on-light);
   --planning-grid-over-color: var(--color-error-text-on-light);
+  --site-search-status-color: var(--color-text-muted-on-light);
+  --site-search-result-title-color: var(--color-text-on-light);
+  --site-search-result-section-color: var(--color-text-muted-on-light);
+  --site-search-result-excerpt-color: var(--color-text-on-light);
+  --site-search-result-url-color: var(--color-text-muted-on-light);
+  --site-search-result-focus-ring-color: var(--color-primary);
+  --site-search-suggestions-label-color: var(--color-text-muted-on-light);
 }

package/src/tokens/surface-public.css

@@ -278,4 +278,12 @@
   --annotation-thread-body-line-height: var(--text-line-height);
   --annotation-thread-replies-label-font-size: var(--text-paragraph-small-font-size);
   --connector-auth-untrusted-toggle-font-size: var(--text-paragraph-small-font-size);
+  --site-search-status-font-size: var(--text-paragraph-small-font-size);
+  --site-search-result-title-font-size: var(--text-paragraph-large-font-size);
+  --site-search-result-section-font-size: var(--text-font-size);
+  --site-search-result-section-line-height: var(--text-line-height);
+  --site-search-result-excerpt-font-size: var(--text-font-size);
+  --site-search-result-excerpt-line-height: var(--text-line-height);
+  --site-search-result-url-font-size: var(--text-font-size);
+  --site-search-result-url-line-height: var(--text-line-height);
 }

package/src/tokens/tokens.json

@@ -3402,6 +3402,44 @@
   "--planning-grid-pending-opacity": "0.4",
   "--public-page-shell-preferences-padding-block": "1.5rem",
   "--public-page-shell-preferences-gap": "0.75rem",
+  "--site-search-inline-size": "100%",
+  "--site-search-gap": "1.5rem",
+  "--site-search-block-gap": "0.75rem",
+  "--site-search-status-font-size": "0.875rem",
+  "--site-search-status-line-height": "1.5",
+  "--site-search-status-color": "#4a4a4a",
+  "--site-search-status-gap": "0.5rem",
+  "--site-search-status-query-font-weight": "500",
+  "--site-search-results-gap": "2rem",
+  "--site-search-result-gap": "0.5rem",
+  "--site-search-result-title-font-size": "1.25rem",
+  "--site-search-result-title-line-height": "1.3",
+  "--site-search-result-title-font-weight": "500",
+  "--site-search-result-title-color": "#111e30",
+  "--site-search-result-section-font-size": "1rem",
+  "--site-search-result-section-line-height": "1.5",
+  "--site-search-result-section-color": "#4a4a4a",
+  "--site-search-result-excerpt-font-size": "1rem",
+  "--site-search-result-excerpt-line-height": "1.5",
+  "--site-search-result-excerpt-color": "#111e30",
+  "--site-search-result-measure": "70ch",
+  "--site-search-result-url-font-size": "1rem",
+  "--site-search-result-url-line-height": "1.5",
+  "--site-search-result-url-color": "#4a4a4a",
+  "--site-search-result-link-hover-line-width": "1px",
+  "--site-search-result-link-hover-line-offset": "0.25rem",
+  "--site-search-result-focus-ring-color": "#111e30",
+  "--site-search-result-focus-ring-width": "2px",
+  "--site-search-result-focus-ring-offset": "1px",
+  "--site-search-result-mark-bg": "#ffcd00",
+  "--site-search-result-mark-color": "#111e30",
+  "--site-search-suggestions-gap": "0.5rem",
+  "--site-search-suggestions-label-font-size": "0.75rem",
+  "--site-search-suggestions-label-color": "#4a4a4a",
+  "--site-search-ghost-section-inline-size": "30%",
+  "--site-search-ghost-title-inline-size": "70%",
+  "--site-search-ghost-url-inline-size": "45%",
+  "--site-search-skeleton-gap": "0.5rem",
   "--steps-gap": "1.5rem",
   "--steps-marker-gap": "1rem",
   "--steps-body-gap": "0.5rem",