@studiolxd/brand 49.12.0 → 49.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.12.0",
+  "version": "49.13.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,59 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --site-search-field-basis: 12rem; /** Ancho a partir del cual el campo y el botón dejan de caber en la misma línea: por debajo, el botón se va abajo. Es el ancho mínimo con el que el campo sigue siendo un campo de búsqueda y no una casilla */
+  --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-gap: var(--spacing-5); /** Aire entre los bloques del buscador: el formulario, el aviso de estado, los resultados y el pie */
+  --site-search-form-gap: var(--spacing-2); /** Aire entre el campo y el botón de buscar */
+  --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-4); /** Aire entre dos resultados */
+  --site-search-result-gap: var(--spacing-1); /** Aire entre las cuatro líneas de un resultado: sección, título, extracto y dirección */
+  --site-search-result-padding-block: var(--spacing-4); /** Aire sobre el separador de cada resultado */
+  --site-search-result-section-font-size: var(--font-size-0); /** Cuerpo del rastro de sección («Documentación › Creator») */
+  --site-search-result-excerpt-line-height: var(--line-height-normal); /** Interlineado del extracto */
+  --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-result-url-font-size: var(--font-size-0); /** Cuerpo de la dirección del resultado */
+  --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-separator-color: var(--color-border-default-on-light); /** Filete que separa dos resultados */
+  --site-search-result-separator-width: var(--border-width-default); /** Grosor del filete que separa dos resultados */
+  --site-search-result-title-font-size: var(--text-font-size); /** Cuerpo del título del resultado: el del texto que indexa */
+  --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-color: var(--color-text-muted-on-light); /** Color del rastro de sección — atenuado */
+  --site-search-result-excerpt-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del extracto: un peldaño por debajo del título */
+  --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-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-separator-color: var(--color-text-on-dark); /** Filete entre resultados — 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,42 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$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-form-gap: 0.5rem; // Aire entre el campo y el botón de buscar
+$lxd-site-search-field-basis: 12rem; // Ancho a partir del cual el campo y el botón dejan de caber en la misma línea: por debajo, el botón se va abajo. Es el ancho mínimo con el que el campo sigue siendo un campo de búsqueda y no una casilla
+$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: 1rem; // Aire entre dos resultados
+$lxd-site-search-result-gap: 0.25rem; // Aire entre las cuatro líneas de un resultado: sección, título, extracto y dirección
+$lxd-site-search-result-padding-block: 1rem; // Aire sobre el separador de cada resultado
+$lxd-site-search-result-separator-color: #d0d0d0; // Filete que separa dos resultados
+$lxd-site-search-result-separator-width: 1px; // Grosor del filete que separa dos resultados
+$lxd-site-search-result-title-font-size: 1rem; // Cuerpo del título del resultado: el del texto que indexa
+$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: 0.75rem; // Cuerpo del rastro de sección («Documentación › Creator»)
+$lxd-site-search-result-section-color: #4a4a4a; // Color del rastro de sección — atenuado
+$lxd-site-search-result-excerpt-font-size: 0.875rem; // Cuerpo del extracto: un peldaño por debajo del título
+$lxd-site-search-result-excerpt-line-height: 1.5; // Interlineado del extracto
+$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: 0.75rem; // Cuerpo de la dirección del resultado
+$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,12 @@ 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-separator-color: var(--color-border-default-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,12 @@ 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-separator-color: var(--color-border-default-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,7 @@
   --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-font-size);
+  --site-search-result-excerpt-font-size: var(--text-paragraph-small-font-size);
 }

package/src/tokens/tokens.json

@@ -3402,6 +3402,45 @@
   "--planning-grid-pending-opacity": "0.4",
   "--public-page-shell-preferences-padding-block": "1.5rem",
   "--public-page-shell-preferences-gap": "0.75rem",
+  "--site-search-gap": "1.5rem",
+  "--site-search-form-gap": "0.5rem",
+  "--site-search-field-basis": "12rem",
+  "--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": "1rem",
+  "--site-search-result-gap": "0.25rem",
+  "--site-search-result-padding-block": "1rem",
+  "--site-search-result-separator-color": "#d0d0d0",
+  "--site-search-result-separator-width": "1px",
+  "--site-search-result-title-font-size": "1rem",
+  "--site-search-result-title-font-weight": "500",
+  "--site-search-result-title-color": "#111e30",
+  "--site-search-result-section-font-size": "0.75rem",
+  "--site-search-result-section-color": "#4a4a4a",
+  "--site-search-result-excerpt-font-size": "0.875rem",
+  "--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": "0.75rem",
+  "--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",