@studiolxd/brand 49.13.0 → 49.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/_shared/tokens.js +10 -11
  3. package/dist/_types/molecules/SearchForm/SearchForm.d.ts +13 -0
  4. package/dist/_types/molecules/TreeView/TreeView.d.ts +7 -1
  5. package/dist/_types/organisms/SiteSearch/SiteSearch.d.ts +6 -5
  6. package/dist/brand.css +19 -18
  7. package/dist/search-form.js +30 -24
  8. package/dist/site-search.css +1 -1
  9. package/dist/site-search.js +17 -37
  10. package/dist/tokens.css +19 -18
  11. package/dist/tree-view.css +1 -1
  12. package/dist/tree-view.js +54 -53
  13. package/package.json +1 -1
  14. package/src/tokens/molecules/site-search.css +11 -13
  15. package/src/tokens/scss/molecules/_site-search.scss +11 -12
  16. package/src/tokens/surface-invert.css +0 -1
  17. package/src/tokens/surface-light.css +0 -1
  18. package/src/tokens/surface-public.css +7 -2
  19. package/src/tokens/tokens.json +10 -11
package/dist/tree-view.css CHANGED
@@ -1 +1 @@
1
- .tree-view,.tree-view__group{margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none}.tree-view__group{margin-inline-start:var(--tree-view-indent)}.tree-view__item{color:var(--tree-view-color)}.tree-view__item:focus{outline:none}.tree-view__item:focus-visible>.tree-view__row{outline:var(--tree-view-focus-ring-width) solid var(--tree-view-focus-ring-color);outline-offset:var(--tree-view-focus-ring-offset)}.tree-view__row{align-items:center;gap:var(--tree-view-row-gap);padding-block:var(--tree-view-row-padding-block);padding-inline:var(--tree-view-row-padding-inline);border-radius:var(--tree-view-row-border-radius);border:var(--tree-view-drop-target-border-width) var(--tree-view-drop-target-border-style) transparent;font-family:var(--tree-view-font-family);font-size:var(--tree-view-font-size);font-weight:var(--tree-view-font-weight);line-height:var(--tree-view-line-height);cursor:var(--tree-view-cursor);display:flex}.tree-view__item:not(.tree-view__item--disabled)>.tree-view__row:hover{color:var(--tree-view-color);box-shadow:none}.tree-view__item.tree-view__item--selected>.tree-view__row{color:var(--tree-view-selected-color);font-weight:var(--tree-view-selected-font-weight)}.tree-view__item.tree-view__item--disabled>.tree-view__row{opacity:var(--tree-view-disabled-opacity);cursor:var(--tree-view-disabled-cursor)}.tree-view__item.tree-view__item--drop-target>.tree-view__row{background-color:var(--tree-view-drop-target-bg);border-color:var(--tree-view-drop-target-border-color);color:var(--tree-view-drop-target-color)}.tree-view__item.tree-view__item--drop-target>.tree-view__row .tree-view__chevron{color:var(--tree-view-drop-target-color)}.tree-view__item.tree-view__item--drop-disabled>.tree-view__row{opacity:var(--tree-view-drop-disabled-opacity);cursor:var(--tree-view-drop-disabled-cursor)}.tree-view__chevron-slot{inline-size:var(--tree-view-chevron-size);block-size:var(--tree-view-chevron-size);flex-shrink:0;display:inline-flex}.tree-view__chevron{color:var(--tree-view-chevron-color);transition:transform var(--tree-view-transition-duration) var(--tree-view-transition-easing);transform:rotate(0)}.tree-view__item[aria-expanded=true]>.tree-view__row .tree-view__chevron{transform:rotate(90deg)}.tree-view__icon{inline-size:var(--tree-view-icon-size);block-size:var(--tree-view-icon-size);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.tree-view__label{min-inline-size:0}.tree-view__label--truncated{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.tree-view__actions{opacity:0;transition:opacity var(--tree-view-transition-duration) var(--tree-view-transition-easing);flex-shrink:0;align-items:center;margin-inline-start:auto;padding-inline-start:var(--tree-view-actions-gap);display:inline-flex}.tree-view__row:hover .tree-view__actions,.tree-view__item:focus-visible>.tree-view__row .tree-view__actions,.tree-view__actions:focus-within{opacity:1}.tree-view__actions:has([data-popup-open]){opacity:1}@media (hover:none){.tree-view__actions{opacity:1}}
1
+ .tree-view,.tree-view__group{margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none}.tree-view__item{color:var(--tree-view-color)}.tree-view__item:focus{outline:none}.tree-view__item:focus-visible>.tree-view__row{outline:var(--tree-view-focus-ring-width) solid var(--tree-view-focus-ring-color);outline-offset:var(--tree-view-focus-ring-offset)}.tree-view__row{align-items:center;gap:var(--tree-view-row-gap);padding-block:var(--tree-view-row-padding-block);border-radius:var(--tree-view-row-border-radius);border:var(--tree-view-drop-target-border-width) var(--tree-view-drop-target-border-style) transparent;font-family:var(--tree-view-font-family);font-size:var(--tree-view-font-size);font-weight:var(--tree-view-font-weight);line-height:var(--tree-view-line-height);cursor:var(--tree-view-cursor);padding-inline-start:calc(var(--tree-view-row-padding-inline) + var(--tree-view-level,0) * var(--tree-view-indent));padding-inline-end:var(--tree-view-row-padding-inline);display:flex}.tree-view__item[data-level="2"]>.tree-view__row{--tree-view-level:1}.tree-view__item[data-level="3"]>.tree-view__row{--tree-view-level:2}.tree-view__item[data-level="4"]>.tree-view__row{--tree-view-level:3}.tree-view__item[data-level="5"]>.tree-view__row{--tree-view-level:4}.tree-view__item[data-level="6"]>.tree-view__row{--tree-view-level:5}.tree-view__item[data-level="7"]>.tree-view__row{--tree-view-level:6}.tree-view__item[data-level="8"]>.tree-view__row{--tree-view-level:7}.tree-view__item[data-level="9"]>.tree-view__row{--tree-view-level:8}.tree-view__item[data-level="10"]>.tree-view__row{--tree-view-level:9}.tree-view__item[data-level="11"]>.tree-view__row{--tree-view-level:10}.tree-view__item[data-level="12"]>.tree-view__row{--tree-view-level:11}.tree-view__item:not(.tree-view__item--disabled)>.tree-view__row:hover{color:var(--tree-view-color);box-shadow:none}.tree-view__item.tree-view__item--selected>.tree-view__row{color:var(--tree-view-selected-color);font-weight:var(--tree-view-selected-font-weight)}.tree-view__item.tree-view__item--disabled>.tree-view__row{opacity:var(--tree-view-disabled-opacity);cursor:var(--tree-view-disabled-cursor)}.tree-view__item.tree-view__item--drop-target>.tree-view__row{background-color:var(--tree-view-drop-target-bg);border-color:var(--tree-view-drop-target-border-color);color:var(--tree-view-drop-target-color)}.tree-view__item.tree-view__item--drop-target>.tree-view__row .tree-view__chevron{color:var(--tree-view-drop-target-color)}.tree-view__item.tree-view__item--drop-disabled>.tree-view__row{opacity:var(--tree-view-drop-disabled-opacity);cursor:var(--tree-view-drop-disabled-cursor)}.tree-view__chevron-slot{inline-size:var(--tree-view-chevron-size);block-size:var(--tree-view-chevron-size);flex-shrink:0;display:inline-flex}.tree-view__chevron{color:var(--tree-view-chevron-color);transition:transform var(--tree-view-transition-duration) var(--tree-view-transition-easing);transform:rotate(0)}.tree-view__item[aria-expanded=true]>.tree-view__row .tree-view__chevron{transform:rotate(90deg)}.tree-view__icon{inline-size:var(--tree-view-icon-size);block-size:var(--tree-view-icon-size);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.tree-view__label{min-inline-size:0}.tree-view__label--truncated{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.tree-view__actions{opacity:0;transition:opacity var(--tree-view-transition-duration) var(--tree-view-transition-easing);flex-shrink:0;align-items:center;margin-inline-start:auto;padding-inline-start:var(--tree-view-actions-gap);display:inline-flex}.tree-view__row:hover .tree-view__actions,.tree-view__item:focus-visible>.tree-view__row .tree-view__actions,.tree-view__actions:focus-within{opacity:1}.tree-view__actions:has([data-popup-open]){opacity:1}@media (hover:none){.tree-view__actions{opacity:1}}
package/dist/tree-view.js CHANGED
@@ -13,86 +13,87 @@ function u(e, t, n = 1, r) {
13
13
  parentId: r
14
14
  }, ...e.children && t.has(e.id) ? u(e.children, t, n + 1, e.id) : []]);
15
15
  }
16
- function d({ items: d, expanded: f, defaultExpanded: p, onExpandedChange: m, selected: h, defaultSelected: g, onSelectedChange: _, label: v, truncateFromLevel: y = 4, nodeRef: b, className: x, ...S }) {
17
- let C = e("treeView"), w = r(), T = a(null), [E, D] = o(p ?? []), O = f !== void 0, k = O ? f : E, [A, j] = o(g), M = h !== void 0, N = M ? h : A, P = i(() => new Set(k), [k]), F = i(() => u(d, P), [d, P]), [I, L] = o(void 0), R = I && F.some((e) => e.node.id === I) ? I : N && F.some((e) => e.node.id === N) ? N : F[0]?.node.id, z = a(""), B = a(0), V = n((e) => {
18
- O || D(e), m?.(e);
19
- }, [O, m]), H = n((e, t) => {
20
- let n = P.has(e), r = t ?? !n;
21
- r !== n && V(r ? [...k, e] : k.filter((t) => t !== e));
16
+ function d({ items: d, expanded: f, defaultExpanded: p, onExpandedChange: m, selected: h, defaultSelected: g, onSelectedChange: _, label: v, truncateFromLevel: y = 4, nodeRef: b, chevron: x = !0, className: S, ...C }) {
17
+ let w = e("treeView"), T = r(), E = a(null), [D, O] = o(p ?? []), k = f !== void 0, A = k ? f : D, [j, M] = o(g), N = h !== void 0, P = N ? h : j, F = i(() => new Set(A), [A]), I = i(() => u(d, F), [d, F]), [L, R] = o(void 0), z = L && I.some((e) => e.node.id === L) ? L : P && I.some((e) => e.node.id === P) ? P : I[0]?.node.id, B = a(""), V = a(0), H = n((e) => {
18
+ k || O(e), m?.(e);
19
+ }, [k, m]), U = n((e, t) => {
20
+ let n = F.has(e), r = t ?? !n;
21
+ r !== n && H(r ? [...A, e] : A.filter((t) => t !== e));
22
22
  }, [
23
- k,
24
- P,
25
- V
26
- ]), U = n((e) => {
27
- M || j(e), _?.(e);
28
- }, [M, _]), W = n((e) => {
29
- let t = F.filter((t) => t.parentId === e.parentId && t.node.children?.length).map((e) => e.node.id).filter((e) => !P.has(e));
30
- t.length !== 0 && V([...k, ...t]);
23
+ A,
24
+ F,
25
+ H
26
+ ]), W = n((e) => {
27
+ N || M(e), _?.(e);
28
+ }, [N, _]), G = n((e) => {
29
+ let t = I.filter((t) => t.parentId === e.parentId && t.node.children?.length).map((e) => e.node.id).filter((e) => !F.has(e));
30
+ t.length !== 0 && H([...A, ...t]);
31
31
  }, [
32
- k,
32
+ A,
33
+ I,
33
34
  F,
34
- P,
35
- V
36
- ]), G = n((e) => `${w}-${e}`, [w]), K = n((e) => {
37
- e && (L(e), T.current?.querySelector(`[data-tree-item="${CSS.escape(e)}"]`)?.focus());
38
- }, []), q = n((e, t) => {
39
- let n = Date.now(), r = n - B.current > l ? e : z.current + e;
40
- z.current = r, B.current = n;
35
+ H
36
+ ]), K = n((e) => `${T}-${e}`, [T]), q = n((e) => {
37
+ e && (R(e), E.current?.querySelector(`[data-tree-item="${CSS.escape(e)}"]`)?.focus());
38
+ }, []), J = n((e, t) => {
39
+ let n = Date.now(), r = n - V.current > l ? e : B.current + e;
40
+ B.current = r, V.current = n;
41
41
  let i = r.length === 1 ? t + 1 : Math.max(t, 0), a = r.toLowerCase();
42
- for (let e = 0; e < F.length; e++) {
43
- let t = F[(i + e) % F.length].node.id;
44
- if ((T.current?.querySelector(`[data-tree-item="${CSS.escape(t)}"] > .tree-view__row .tree-view__label`)?.textContent ?? "").trim().toLowerCase().startsWith(a)) {
45
- K(t);
42
+ for (let e = 0; e < I.length; e++) {
43
+ let t = I[(i + e) % I.length].node.id;
44
+ if ((E.current?.querySelector(`[data-tree-item="${CSS.escape(t)}"] > .tree-view__row .tree-view__label`)?.textContent ?? "").trim().toLowerCase().startsWith(a)) {
45
+ q(t);
46
46
  return;
47
47
  }
48
48
  }
49
- }, [F, K]);
50
- function J(e, t) {
51
- let { node: n, parentId: r } = t, i = F.findIndex((e) => e.node.id === n.id), a = !!n.children?.length, o = P.has(n.id);
49
+ }, [I, q]);
50
+ function Y(e, t) {
51
+ let { node: n, parentId: r } = t, i = I.findIndex((e) => e.node.id === n.id), a = !!n.children?.length, o = F.has(n.id);
52
52
  switch (e.key) {
53
53
  case "ArrowDown":
54
- e.preventDefault(), K(F[i + 1]?.node.id);
54
+ e.preventDefault(), q(I[i + 1]?.node.id);
55
55
  break;
56
56
  case "ArrowUp":
57
- e.preventDefault(), K(F[i - 1]?.node.id);
57
+ e.preventDefault(), q(I[i - 1]?.node.id);
58
58
  break;
59
59
  case "ArrowRight":
60
- e.preventDefault(), a && !o ? H(n.id, !0) : a && o && K(F[i + 1]?.node.id);
60
+ e.preventDefault(), a && !o ? U(n.id, !0) : a && o && q(I[i + 1]?.node.id);
61
61
  break;
62
62
  case "ArrowLeft":
63
- e.preventDefault(), a && o ? H(n.id, !1) : r && K(r);
63
+ e.preventDefault(), a && o ? U(n.id, !1) : r && q(r);
64
64
  break;
65
65
  case "Home":
66
- e.preventDefault(), K(F[0]?.node.id);
66
+ e.preventDefault(), q(I[0]?.node.id);
67
67
  break;
68
68
  case "End":
69
- e.preventDefault(), K(F[F.length - 1]?.node.id);
69
+ e.preventDefault(), q(I[I.length - 1]?.node.id);
70
70
  break;
71
71
  case "Enter":
72
72
  case " ":
73
- e.preventDefault(), n.disabled || U(n.id);
73
+ e.preventDefault(), n.disabled || W(n.id);
74
74
  break;
75
75
  case "*":
76
- e.preventDefault(), W(t);
76
+ e.preventDefault(), G(t);
77
77
  break;
78
78
  default:
79
- e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), q(e.key, i));
79
+ e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), J(e.key, i));
80
80
  break;
81
81
  }
82
82
  }
83
- function Y(e, n, r) {
83
+ function X(e, n, r) {
84
84
  return e.map((e) => {
85
- let i = !!e.children?.length, a = i && P.has(e.id), o = N === e.id, l = a && e.iconExpanded || e.icon, u = n >= y, d = u && typeof e.label == "string" ? e.label : void 0, f = e.dropTarget ? "target" : e.dropDisabled ? "disabled" : void 0;
85
+ let i = !!e.children?.length, a = i && F.has(e.id), o = P === e.id, l = a && e.iconExpanded || e.icon, u = n >= y, d = u && typeof e.label == "string" ? e.label : void 0, f = e.dropTarget ? "target" : e.dropDisabled ? "disabled" : void 0;
86
86
  return /* @__PURE__ */ c("li", {
87
87
  role: "treeitem",
88
88
  "data-tree-item": e.id,
89
- "aria-labelledby": G(e.id),
89
+ "aria-labelledby": K(e.id),
90
90
  "aria-expanded": i ? a : void 0,
91
91
  "aria-selected": o,
92
92
  "aria-level": n,
93
+ "data-level": n,
93
94
  "aria-disabled": e.disabled || void 0,
94
95
  "data-drop": f,
95
- tabIndex: R === e.id ? 0 : -1,
96
+ tabIndex: z === e.id ? 0 : -1,
96
97
  className: [
97
98
  "tree-view__item",
98
99
  o ? "tree-view__item--selected" : "",
@@ -101,23 +102,23 @@ function d({ items: d, expanded: f, defaultExpanded: p, onExpandedChange: m, sel
101
102
  e.dropDisabled ? "tree-view__item--drop-disabled" : ""
102
103
  ].filter(Boolean).join(" "),
103
104
  onKeyDown: (t) => {
104
- t.target === t.currentTarget && J(t, {
105
+ t.target === t.currentTarget && Y(t, {
105
106
  node: e,
106
107
  level: n,
107
108
  parentId: r
108
109
  });
109
110
  },
110
111
  onFocus: (t) => {
111
- t.target === t.currentTarget && L(e.id);
112
+ t.target === t.currentTarget && R(e.id);
112
113
  },
113
114
  onClick: e.disabled ? void 0 : (t) => {
114
- t.stopPropagation(), i && H(e.id), U(e.id), K(e.id);
115
+ t.stopPropagation(), i && U(e.id), W(e.id), q(e.id);
115
116
  },
116
117
  children: [/* @__PURE__ */ c("span", {
117
118
  className: "tree-view__row",
118
119
  ref: b ? (t) => b(e.id, t) : void 0,
119
120
  children: [
120
- /* @__PURE__ */ s("span", {
121
+ x && /* @__PURE__ */ s("span", {
121
122
  className: "tree-view__chevron-slot",
122
123
  "aria-hidden": "true",
123
124
  children: i && /* @__PURE__ */ s(t, {
@@ -133,7 +134,7 @@ function d({ items: d, expanded: f, defaultExpanded: p, onExpandedChange: m, sel
133
134
  }),
134
135
  /* @__PURE__ */ s("span", {
135
136
  className: ["tree-view__label", u ? "tree-view__label--truncated" : ""].filter(Boolean).join(" "),
136
- id: G(e.id),
137
+ id: K(e.id),
137
138
  title: d,
138
139
  children: e.label
139
140
  }),
@@ -148,18 +149,18 @@ function d({ items: d, expanded: f, defaultExpanded: p, onExpandedChange: m, sel
148
149
  }), i && a && /* @__PURE__ */ s("ul", {
149
150
  role: "group",
150
151
  className: "tree-view__group",
151
- children: Y(e.children, n + 1, e.id)
152
+ children: X(e.children, n + 1, e.id)
152
153
  })]
153
154
  }, e.id);
154
155
  });
155
156
  }
156
157
  return /* @__PURE__ */ s("ul", {
157
- ref: T,
158
+ ref: E,
158
159
  role: "tree",
159
- "aria-label": C("label", v),
160
- className: ["tree-view", x].filter(Boolean).join(" "),
161
- ...S,
162
- children: Y(d, 1)
160
+ "aria-label": w("label", v),
161
+ className: ["tree-view", S].filter(Boolean).join(" "),
162
+ ...C,
163
+ children: X(d, 1)
163
164
  });
164
165
  }
165
166
  //#endregion
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@studiolxd/brand",
3
- "version": "49.13.0",
3
+ "version": "49.15.0",
4
4
  "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
5
5
  "repository": {
6
6
  "type": "git",
package/src/tokens/molecules/site-search.css CHANGED
@@ -3,36 +3,35 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --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 */
7
6
  --site-search-ghost-section-inline-size: 30%; /** Ancho de la barra fantasma del rastro de sección */
8
7
  --site-search-ghost-title-inline-size: 70%; /** Ancho de la barra fantasma del título */
9
8
  --site-search-ghost-url-inline-size: 45%; /** Ancho de la barra fantasma de la dirección */
9
+ --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 */
10
10
  --site-search-gap: var(--spacing-5); /** Aire entre los bloques del buscador: el formulario, el aviso de estado, los resultados y el pie */
11
- --site-search-form-gap: var(--spacing-2); /** Aire entre el campo y el botón de buscar */
12
11
  --site-search-block-gap: var(--spacing-3); /** Aire entre las líneas de un bloque de estado (reposo, escribiendo, carga) */
13
12
  --site-search-status-line-height: var(--line-height-normal); /** Interlineado del aviso de estado */
14
13
  --site-search-status-gap: var(--spacing-2); /** Aire entre el indicador de carga y su texto */
15
- --site-search-results-gap: var(--spacing-4); /** Aire entre dos resultados */
16
- --site-search-result-gap: var(--spacing-1); /** Aire entre las cuatro líneas de un resultado: sección, título, extracto y dirección */
17
- --site-search-result-padding-block: var(--spacing-4); /** Aire sobre el separador de cada resultado */
18
- --site-search-result-section-font-size: var(--font-size-0); /** Cuerpo del rastro de sección («Documentación › Creator») */
19
- --site-search-result-excerpt-line-height: var(--line-height-normal); /** Interlineado del extracto */
14
+ --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 */
15
+ --site-search-result-gap: var(--spacing-2); /** Aire entre las cuatro líneas de un resultado: sección, título, extracto y dirección */
16
+ --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 */
20
17
  --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 */
21
- --site-search-result-url-font-size: var(--font-size-0); /** Cuerpo de la dirección del resultado */
22
18
  --site-search-suggestions-gap: var(--spacing-2); /** Aire entre las sugerencias de búsqueda */
23
19
  --site-search-suggestions-label-font-size: var(--font-size-0); /** Cuerpo del rótulo de las sugerencias */
24
20
  --site-search-skeleton-gap: var(--spacing-2); /** Aire entre las barras de un resultado fantasma */
25
21
  --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 */
26
22
  --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 */
27
23
  --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 */
28
- --site-search-result-separator-color: var(--color-border-default-on-light); /** Filete que separa dos resultados */
29
- --site-search-result-separator-width: var(--border-width-default); /** Grosor del filete que separa dos resultados */
30
- --site-search-result-title-font-size: var(--text-font-size); /** Cuerpo del título del resultado: el del texto que indexa */
24
+ --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 */
31
25
  --site-search-result-title-font-weight: var(--font-weight-emphasis); /** Peso del título del resultado */
32
26
  --site-search-result-title-color: var(--color-text-on-light); /** Color del título del resultado */
27
+ --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 */
28
+ --site-search-result-section-line-height: var(--text-line-height); /** Interlineado del rastro de sección */
33
29
  --site-search-result-section-color: var(--color-text-muted-on-light); /** Color del rastro de sección — atenuado */
34
- --site-search-result-excerpt-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del extracto: un peldaño por debajo del título */
30
+ --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 */
31
+ --site-search-result-excerpt-line-height: var(--text-line-height); /** Interlineado del extracto: el del cuerpo de la superficie */
35
32
  --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 */
33
+ --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 */
34
+ --site-search-result-url-line-height: var(--text-line-height); /** Interlineado de la dirección */
36
35
  --site-search-result-url-color: var(--color-text-muted-on-light); /** Color de la dirección — atenuada */
37
36
  --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 */
38
37
  --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 */
@@ -50,7 +49,6 @@
50
49
  html.dark {
51
50
  --site-search-result-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco del enlace del resultado — surface-dark */
52
51
  --site-search-status-color: var(--color-text-muted-on-dark); /** Aviso de estado — surface-dark */
53
- --site-search-result-separator-color: var(--color-text-on-dark); /** Filete entre resultados — surface-dark */
54
52
  --site-search-result-title-color: var(--color-text-on-dark); /** Título del resultado — surface-dark */
55
53
  --site-search-result-section-color: var(--color-text-muted-on-dark); /** Rastro de sección — surface-dark */
56
54
  --site-search-result-excerpt-color: var(--color-text-on-dark); /** Extracto — surface-dark */
package/src/tokens/scss/molecules/_site-search.scss CHANGED
@@ -1,30 +1,29 @@
1
1
 
2
2
  // Do not edit directly, this file was auto-generated.
3
3
 
4
+ $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
4
5
  $lxd-site-search-gap: 1.5rem; // Aire entre los bloques del buscador: el formulario, el aviso de estado, los resultados y el pie
5
- $lxd-site-search-form-gap: 0.5rem; // Aire entre el campo y el botón de buscar
6
- $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
7
6
  $lxd-site-search-block-gap: 0.75rem; // Aire entre las líneas de un bloque de estado (reposo, escribiendo, carga)
8
7
  $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
9
8
  $lxd-site-search-status-line-height: 1.5; // Interlineado del aviso de estado
10
9
  $lxd-site-search-status-color: #4a4a4a; // Color del aviso de estado — atenuado: acompaña a los resultados, no compite con ellos
11
10
  $lxd-site-search-status-gap: 0.5rem; // Aire entre el indicador de carga y su texto
12
11
  $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
13
- $lxd-site-search-results-gap: 1rem; // Aire entre dos resultados
14
- $lxd-site-search-result-gap: 0.25rem; // Aire entre las cuatro líneas de un resultado: sección, título, extracto y dirección
15
- $lxd-site-search-result-padding-block: 1rem; // Aire sobre el separador de cada resultado
16
- $lxd-site-search-result-separator-color: #d0d0d0; // Filete que separa dos resultados
17
- $lxd-site-search-result-separator-width: 1px; // Grosor del filete que separa dos resultados
18
- $lxd-site-search-result-title-font-size: 1rem; // Cuerpo del título del resultado: el del texto que indexa
12
+ $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
13
+ $lxd-site-search-result-gap: 0.5rem; // Aire entre las cuatro líneas de un resultado: sección, título, extracto y dirección
14
+ $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
15
+ $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
19
16
  $lxd-site-search-result-title-font-weight: 500; // Peso del título del resultado
20
17
  $lxd-site-search-result-title-color: #111e30; // Color del título del resultado
21
- $lxd-site-search-result-section-font-size: 0.75rem; // Cuerpo del rastro de sección («Documentación › Creator»)
18
+ $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
19
+ $lxd-site-search-result-section-line-height: 1.5; // Interlineado del rastro de sección
22
20
  $lxd-site-search-result-section-color: #4a4a4a; // Color del rastro de sección — atenuado
23
- $lxd-site-search-result-excerpt-font-size: 0.875rem; // Cuerpo del extracto: un peldaño por debajo del título
24
- $lxd-site-search-result-excerpt-line-height: 1.5; // Interlineado del extracto
21
+ $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
22
+ $lxd-site-search-result-excerpt-line-height: 1.5; // Interlineado del extracto: el del cuerpo de la superficie
25
23
  $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
26
24
  $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
27
- $lxd-site-search-result-url-font-size: 0.75rem; // Cuerpo de la dirección del resultado
25
+ $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
26
+ $lxd-site-search-result-url-line-height: 1.5; // Interlineado de la dirección
28
27
  $lxd-site-search-result-url-color: #4a4a4a; // Color de la dirección — atenuada
29
28
  $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
30
29
  $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
package/src/tokens/surface-invert.css CHANGED
@@ -741,7 +741,6 @@ html.dark .surface-invert {
741
741
  --planning-grid-footer-color: var(--color-text-on-light);
742
742
  --planning-grid-over-color: var(--color-error-text-on-light);
743
743
  --site-search-status-color: var(--color-text-muted-on-light);
744
- --site-search-result-separator-color: var(--color-border-default-on-light);
745
744
  --site-search-result-title-color: var(--color-text-on-light);
746
745
  --site-search-result-section-color: var(--color-text-muted-on-light);
747
746
  --site-search-result-excerpt-color: var(--color-text-on-light);
package/src/tokens/surface-light.css CHANGED
@@ -742,7 +742,6 @@ html.dark .surface-light {
742
742
  --planning-grid-footer-color: var(--color-text-on-light);
743
743
  --planning-grid-over-color: var(--color-error-text-on-light);
744
744
  --site-search-status-color: var(--color-text-muted-on-light);
745
- --site-search-result-separator-color: var(--color-border-default-on-light);
746
745
  --site-search-result-title-color: var(--color-text-on-light);
747
746
  --site-search-result-section-color: var(--color-text-muted-on-light);
748
747
  --site-search-result-excerpt-color: var(--color-text-on-light);
package/src/tokens/surface-public.css CHANGED
@@ -279,6 +279,11 @@
279
279
  --annotation-thread-replies-label-font-size: var(--text-paragraph-small-font-size);
280
280
  --connector-auth-untrusted-toggle-font-size: var(--text-paragraph-small-font-size);
281
281
  --site-search-status-font-size: var(--text-paragraph-small-font-size);
282
- --site-search-result-title-font-size: var(--text-font-size);
283
- --site-search-result-excerpt-font-size: var(--text-paragraph-small-font-size);
282
+ --site-search-result-title-font-size: var(--text-paragraph-large-font-size);
283
+ --site-search-result-section-font-size: var(--text-font-size);
284
+ --site-search-result-section-line-height: var(--text-line-height);
285
+ --site-search-result-excerpt-font-size: var(--text-font-size);
286
+ --site-search-result-excerpt-line-height: var(--text-line-height);
287
+ --site-search-result-url-font-size: var(--text-font-size);
288
+ --site-search-result-url-line-height: var(--text-line-height);
284
289
  }
package/src/tokens/tokens.json CHANGED
@@ -3402,30 +3402,29 @@
3402
3402
  "--planning-grid-pending-opacity": "0.4",
3403
3403
  "--public-page-shell-preferences-padding-block": "1.5rem",
3404
3404
  "--public-page-shell-preferences-gap": "0.75rem",
3405
+ "--site-search-inline-size": "100%",
3405
3406
  "--site-search-gap": "1.5rem",
3406
- "--site-search-form-gap": "0.5rem",
3407
- "--site-search-field-basis": "12rem",
3408
3407
  "--site-search-block-gap": "0.75rem",
3409
3408
  "--site-search-status-font-size": "0.875rem",
3410
3409
  "--site-search-status-line-height": "1.5",
3411
3410
  "--site-search-status-color": "#4a4a4a",
3412
3411
  "--site-search-status-gap": "0.5rem",
3413
3412
  "--site-search-status-query-font-weight": "500",
3414
- "--site-search-results-gap": "1rem",
3415
- "--site-search-result-gap": "0.25rem",
3416
- "--site-search-result-padding-block": "1rem",
3417
- "--site-search-result-separator-color": "#d0d0d0",
3418
- "--site-search-result-separator-width": "1px",
3419
- "--site-search-result-title-font-size": "1rem",
3413
+ "--site-search-results-gap": "2rem",
3414
+ "--site-search-result-gap": "0.5rem",
3415
+ "--site-search-result-title-font-size": "1.25rem",
3416
+ "--site-search-result-title-line-height": "1.3",
3420
3417
  "--site-search-result-title-font-weight": "500",
3421
3418
  "--site-search-result-title-color": "#111e30",
3422
- "--site-search-result-section-font-size": "0.75rem",
3419
+ "--site-search-result-section-font-size": "1rem",
3420
+ "--site-search-result-section-line-height": "1.5",
3423
3421
  "--site-search-result-section-color": "#4a4a4a",
3424
- "--site-search-result-excerpt-font-size": "0.875rem",
3422
+ "--site-search-result-excerpt-font-size": "1rem",
3425
3423
  "--site-search-result-excerpt-line-height": "1.5",
3426
3424
  "--site-search-result-excerpt-color": "#111e30",
3427
3425
  "--site-search-result-measure": "70ch",
3428
- "--site-search-result-url-font-size": "0.75rem",
3426
+ "--site-search-result-url-font-size": "1rem",
3427
+ "--site-search-result-url-line-height": "1.5",
3429
3428
  "--site-search-result-url-color": "#4a4a4a",
3430
3429
  "--site-search-result-link-hover-line-width": "1px",
3431
3430
  "--site-search-result-link-hover-line-offset": "0.25rem",