@studiolxd/brand 49.11.0 → 49.13.0

package/src/tokens/scss/molecules/_org-chart.scss

@@ -0,0 +1,39 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-org-chart-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del organigrama
+$lxd-org-chart-gap: 0.75rem; // Separación entre el lienzo y sus controles
+$lxd-org-chart-viewport-block-size: 32rem; // Alto del lienzo con desplazamiento
+$lxd-org-chart-viewport-padding: 1.5rem; // Aire alrededor del árbol dentro del lienzo
+$lxd-org-chart-viewport-bg: #f2f2f2; // Fondo del lienzo — superficie secundaria: lo que separa el organigrama de la página
+$lxd-org-chart-viewport-radius: 0px; // Radio del lienzo
+$lxd-org-chart-viewport-border-color: #d0d0d0; // Borde del lienzo
+$lxd-org-chart-viewport-border-width: 1px; // Grosor del borde del lienzo
+$lxd-org-chart-focus-ring-color: #111e30; // Anillo de foco del lienzo
+$lxd-org-chart-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-org-chart-focus-ring-offset: 2px; // Separación del anillo de foco
+$lxd-org-chart-sibling-gap: 1rem; // Separación horizontal entre dos nodos hermanos
+$lxd-org-chart-connector-length: 2rem; // Alto del tramo de líneas entre un nodo y sus hijos
+$lxd-org-chart-connector-color: #d0d0d0; // Color de las líneas que unen los nodos
+$lxd-org-chart-connector-width: 1px; // Grosor de las líneas que unen los nodos
+$lxd-org-chart-card-inline-size: 14rem; // Ancho de la tarjeta de un departamento
+$lxd-org-chart-card-bg: #ffffff; // Fondo de la tarjeta
+$lxd-org-chart-card-border-color: #111e30; // Borde de la tarjeta
+$lxd-org-chart-card-border-width: 1px; // Grosor del borde de la tarjeta
+$lxd-org-chart-card-radius: 0px; // Radio de la tarjeta
+$lxd-org-chart-card-padding-block: 0.5rem; // Padding vertical de la tarjeta
+$lxd-org-chart-card-padding-inline: 0.75rem; // Padding horizontal de la tarjeta
+$lxd-org-chart-card-gap: 0.5rem; // Separación entre la cabecera y el cuerpo de la tarjeta
+$lxd-org-chart-name-font-size: 0.875rem; // Tamaño del nombre del departamento
+$lxd-org-chart-name-font-weight: 500; // Peso del nombre del departamento
+$lxd-org-chart-name-color: #111e30; // Color del nombre del departamento
+$lxd-org-chart-group-font-size: 0.75rem; // Tamaño del rótulo de un grupo de personas
+$lxd-org-chart-group-color: #4a4a4a; // Color del rótulo de un grupo de personas
+$lxd-org-chart-group-gap: 0.25rem; // Separación entre el rótulo y sus personas
+$lxd-org-chart-group-margin-block-start: 0.5rem; // Aire entre dos grupos de personas
+$lxd-org-chart-person-font-size: 0.875rem; // Tamaño del nombre de una persona
+$lxd-org-chart-person-color: #111e30; // Color del nombre de una persona
+$lxd-org-chart-person-role-font-size: 0.75rem; // Tamaño del puesto de una persona
+$lxd-org-chart-person-role-color: #4a4a4a; // Color del puesto de una persona
+$lxd-org-chart-person-gap: 0.25rem; // Separación entre personas
+$lxd-org-chart-empty-color: #4a4a4a; // Color del «sin responsable» / «sin equipo»

package/src/tokens/scss/molecules/_planning-grid.scss

@@ -0,0 +1,36 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-planning-grid-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica de la rejilla
+$lxd-planning-grid-radius: 0px; // Radio del marco de la rejilla
+$lxd-planning-grid-border-color: #111e30; // Color de la rejilla
+$lxd-planning-grid-border-width: 1px; // Grosor de la rejilla
+$lxd-planning-grid-row-header-width: 12rem; // Ancho de la columna de filas
+$lxd-planning-grid-row-header-font-size: 0.875rem; // Tamaño del nombre de la fila
+$lxd-planning-grid-row-header-font-weight: 300; // Peso del nombre de la fila (la celda es th: el agente de usuario la pondría en negrita)
+$lxd-planning-grid-row-header-color: #111e30; // Color del nombre de la fila
+$lxd-planning-grid-row-header-bg: #ffffff; // Fondo sticky de la columna de filas
+$lxd-planning-grid-row-header-padding-block: 0.5rem; // Padding vertical del nombre de la fila
+$lxd-planning-grid-row-header-padding-inline: 0.75rem; // Padding horizontal del nombre de la fila
+$lxd-planning-grid-column-header-font-size: 0.875rem; // Tamaño del nombre de la columna
+$lxd-planning-grid-column-header-font-weight: 500; // Peso del nombre de la columna
+$lxd-planning-grid-column-header-color: #111e30; // Color del nombre de la columna
+$lxd-planning-grid-column-header-sub-font-size: 0.75rem; // Tamaño de la segunda línea del encabezado
+$lxd-planning-grid-column-header-sub-color: #4a4a4a; // Color de la segunda línea del encabezado
+$lxd-planning-grid-column-header-bg: #ffffff; // Fondo del encabezado de columna
+$lxd-planning-grid-column-header-padding-block: 0.5rem; // Padding vertical del encabezado de columna
+$lxd-planning-grid-column-width: 6rem; // Ancho mínimo de una columna de datos
+$lxd-planning-grid-current-outline-color: #111e30; // Recuadro de la columna en curso
+$lxd-planning-grid-current-outline-width: 2px; // Grosor del recuadro de la columna en curso
+$lxd-planning-grid-cell-padding-block: 0.25rem; // Padding vertical de una celda
+$lxd-planning-grid-cell-padding-inline: 0.25rem; // Padding horizontal de una celda
+$lxd-planning-grid-cell-font-size: 0.875rem; // Tamaño de la cifra de una celda de solo lectura
+$lxd-planning-grid-cell-color: #111e30; // Color de la cifra de una celda
+$lxd-planning-grid-cell-readonly-color: #4a4a4a; // Color de la cifra de una celda que no se edita
+$lxd-planning-grid-cell-readonly-bg: #f2f2f2; // Fondo de una celda que no se edita — superficie secundaria
+$lxd-planning-grid-cell-input-width: 4.5rem; // Ancho del campo de horas dentro de la celda
+$lxd-planning-grid-footer-bg: #f2f2f2; // Fondo de las filas de totales
+$lxd-planning-grid-footer-font-weight: 500; // Peso de las filas de totales
+$lxd-planning-grid-footer-color: #111e30; // Color de las filas de totales
+$lxd-planning-grid-over-color: #b30000; // Color de un resto negativo: hay más horas asignadas que disponibles
+$lxd-planning-grid-pending-opacity: 0.4; // Opacidad de una celda cuyo cambio está en vuelo

package/src/tokens/scss/molecules/_recurrence-field.scss

@@ -0,0 +1,11 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-recurrence-field-gap: 1rem; // Separación entre los campos del editor de recurrencia
+$lxd-recurrence-field-row-gap: 0.75rem; // Separación entre los campos que comparten fila
+$lxd-recurrence-field-interval-width: 8rem; // Ancho del campo de intervalo — cabe un número de dos cifras y sus flechas, no la fila entera
+$lxd-recurrence-field-weekdays-gap: 0.25rem; // Separación entre los días de la semana
+$lxd-recurrence-field-legend-font-size: 0.875rem; // Tamaño de la etiqueta del grupo de días — el de una etiqueta de campo
+$lxd-recurrence-field-legend-color: #111e30; // Color de la etiqueta del grupo de días
+$lxd-recurrence-field-legend-font-weight: 500; // Peso de la etiqueta del grupo de días — el de una etiqueta de campo
+$lxd-recurrence-field-legend-margin-block-end: 0.25rem; // Aire entre la etiqueta del grupo de días y los días

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/scss/molecules/_timeline.scss

@@ -0,0 +1,22 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-timeline-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del historial
+$lxd-timeline-gap: 1.5rem; // Separación vertical entre dos hitos
+$lxd-timeline-column-gap: 0.75rem; // Separación entre la marca y el cuerpo del hito
+$lxd-timeline-rail-width: 1px; // Grosor del carril que une las marcas
+$lxd-timeline-rail-color: #d0d0d0; // Color del carril — la línea del sistema, no un borde que destaque
+$lxd-timeline-rail-gap: 0.25rem; // Aire entre la marca y el carril, arriba y abajo
+$lxd-timeline-title-font-size: 1rem; // Tamaño del título del hito — texto corriente
+$lxd-timeline-title-font-weight: 500; // Peso del título del hito
+$lxd-timeline-title-line-height: 1.3; // Interlineado del título
+$lxd-timeline-title-color: #111e30; // Color del título del hito
+$lxd-timeline-meta-font-size: 0.875rem; // Tamaño de la fecha y el autor — letra menor
+$lxd-timeline-meta-color: #4a4a4a; // Color de la fecha y el autor
+$lxd-timeline-meta-gap: 0.5rem; // Separación entre fecha y autor
+$lxd-timeline-meta-separator-color: #d0d0d0; // Color del punto que separa fecha y autor
+$lxd-timeline-note-font-size: 1rem; // Tamaño de la nota — texto corriente
+$lxd-timeline-note-line-height: 1.5; // Interlineado de la nota
+$lxd-timeline-note-color: #111e30; // Color de la nota
+$lxd-timeline-body-gap: 0.25rem; // Separación entre título, metadatos y nota
+$lxd-timeline-actions-margin-block-start: 0.5rem; // Aire sobre las acciones del hito

package/src/tokens/surface-invert.css

@@ -495,6 +495,11 @@ html.dark .surface-invert {
   --checkbox-field-label-color: var(--text-color);
   --checkbox-field-error-color: var(--form-error-color);
   --checkbox-field-helper-color: var(--form-helper-color);
+  --clock-widget-date-color: var(--color-text-muted-on-light);
+  --clock-widget-status-color: var(--color-text-muted-on-light);
+  --clock-widget-status-dot-closed-bg: var(--color-border-default-on-light);
+  --clock-widget-elapsed-color: var(--color-text-on-light);
+  --clock-widget-elapsed-label-color: var(--color-text-muted-on-light);
   --command-palette-input-border-color: var(--floating-panel-border-color);
   --command-palette-input-placeholder-color: var(--color-text-placeholder-on-light);
   --command-palette-input-focus-ring-color: var(--color-primary);
@@ -538,6 +543,27 @@ html.dark .surface-invert {
   --field-row-empty-color: var(--color-text-muted-on-light);
   --file-upload-field-error-color: var(--form-error-color);
   --file-upload-field-helper-color: var(--form-helper-color);
+  --heatmap-border-color: var(--color-primary);
+  --heatmap-row-header-color: var(--color-text-on-light);
+  --heatmap-row-header-bg: var(--color-background-light);
+  --heatmap-column-header-color: var(--color-text-muted-on-light);
+  --heatmap-column-header-bg: var(--color-background-light);
+  --heatmap-group-header-color: var(--color-text-muted-on-light);
+  --heatmap-empty-bg: var(--color-surface-secondary-on-light);
+  --heatmap-empty-pattern-color: var(--color-border-default-on-light);
+  --heatmap-legend-color: var(--color-text-muted-on-light);
+  --heatmap-step-1-bg: var(--color-chart-sequential-100);
+  --heatmap-step-1-color: var(--color-text-on-light);
+  --heatmap-step-2-bg: var(--color-chart-sequential-200);
+  --heatmap-step-2-color: var(--color-text-on-light);
+  --heatmap-step-3-bg: var(--color-chart-sequential-300);
+  --heatmap-step-3-color: var(--color-text-on-light);
+  --heatmap-step-4-bg: var(--color-chart-sequential-500);
+  --heatmap-step-4-color: var(--color-text-on-light);
+  --heatmap-step-5-bg: var(--color-chart-sequential-600);
+  --heatmap-step-5-color: var(--color-text-on-dark);
+  --heatmap-step-6-bg: var(--color-chart-sequential-700);
+  --heatmap-step-6-color: var(--color-text-on-dark);
   --image-crop-dialog-area-bg: var(--color-surface-secondary-on-light);
   --input-field-search-icon-color: var(--color-primary);
   --input-field-search-clear-color: var(--color-primary);
@@ -589,6 +615,7 @@ html.dark .surface-invert {
   --radio-field-helper-color: var(--form-helper-color);
   --recovery-codes-color: var(--color-text-on-light);
   --recovery-codes-index-color: var(--color-text-muted-on-light);
+  --recurrence-field-legend-color: var(--color-text-on-light);
   --search-form-submit-color: var(--color-primary);
   --search-form-submit-hover-color: var(--color-primary);
   --search-form-submit-disabled-color: var(--input-disabled-color);
@@ -630,6 +657,11 @@ html.dark .surface-invert {
   --theme-switcher-focus-ring-color: var(--color-primary);
   --time-field-error-color: var(--form-error-color);
   --time-field-helper-color: var(--form-helper-color);
+  --timeline-rail-color: var(--color-border-default-on-light);
+  --timeline-title-color: var(--color-text-on-light);
+  --timeline-meta-color: var(--color-text-muted-on-light);
+  --timeline-meta-separator-color: var(--color-border-default-on-light);
+  --timeline-note-color: var(--color-text-on-light);
   --tree-view-color: var(--sidebar-nav-item-color);
   --tree-view-selected-color: var(--sidebar-nav-item-color);
   --tree-view-chevron-color: var(--color-text-muted-on-light);
@@ -684,4 +716,36 @@ html.dark .surface-invert {
   --chart-crosshair-color: var(--color-icon-secondary-on-light);
   --chat-shell-bg: var(--color-background-light);
   --connector-auth-untrusted-focus-ring-color: var(--link-focus-ring-color);
+  --org-chart-viewport-bg: var(--color-surface-secondary-on-light);
+  --org-chart-viewport-border-color: var(--color-border-default-on-light);
+  --org-chart-focus-ring-color: var(--color-primary);
+  --org-chart-connector-color: var(--color-border-default-on-light);
+  --org-chart-card-bg: var(--color-background-light);
+  --org-chart-card-border-color: var(--color-primary);
+  --org-chart-name-color: var(--color-text-on-light);
+  --org-chart-group-color: var(--color-text-muted-on-light);
+  --org-chart-person-color: var(--color-text-on-light);
+  --org-chart-person-role-color: var(--color-text-muted-on-light);
+  --org-chart-empty-color: var(--color-text-muted-on-light);
+  --planning-grid-border-color: var(--color-primary);
+  --planning-grid-row-header-color: var(--color-text-on-light);
+  --planning-grid-row-header-bg: var(--color-background-light);
+  --planning-grid-column-header-color: var(--color-text-on-light);
+  --planning-grid-column-header-sub-color: var(--color-text-muted-on-light);
+  --planning-grid-column-header-bg: var(--color-background-light);
+  --planning-grid-current-outline-color: var(--color-primary);
+  --planning-grid-cell-color: var(--color-text-on-light);
+  --planning-grid-cell-readonly-color: var(--color-text-muted-on-light);
+  --planning-grid-cell-readonly-bg: var(--color-surface-secondary-on-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-light.css

@@ -496,6 +496,11 @@ html.dark .surface-light {
   --checkbox-field-label-color: var(--text-color);
   --checkbox-field-error-color: var(--form-error-color);
   --checkbox-field-helper-color: var(--form-helper-color);
+  --clock-widget-date-color: var(--color-text-muted-on-light);
+  --clock-widget-status-color: var(--color-text-muted-on-light);
+  --clock-widget-status-dot-closed-bg: var(--color-border-default-on-light);
+  --clock-widget-elapsed-color: var(--color-text-on-light);
+  --clock-widget-elapsed-label-color: var(--color-text-muted-on-light);
   --command-palette-input-border-color: var(--floating-panel-border-color);
   --command-palette-input-placeholder-color: var(--color-text-placeholder-on-light);
   --command-palette-input-focus-ring-color: var(--color-primary);
@@ -539,6 +544,27 @@ html.dark .surface-light {
   --field-row-empty-color: var(--color-text-muted-on-light);
   --file-upload-field-error-color: var(--form-error-color);
   --file-upload-field-helper-color: var(--form-helper-color);
+  --heatmap-border-color: var(--color-primary);
+  --heatmap-row-header-color: var(--color-text-on-light);
+  --heatmap-row-header-bg: var(--color-background-light);
+  --heatmap-column-header-color: var(--color-text-muted-on-light);
+  --heatmap-column-header-bg: var(--color-background-light);
+  --heatmap-group-header-color: var(--color-text-muted-on-light);
+  --heatmap-empty-bg: var(--color-surface-secondary-on-light);
+  --heatmap-empty-pattern-color: var(--color-border-default-on-light);
+  --heatmap-legend-color: var(--color-text-muted-on-light);
+  --heatmap-step-1-bg: var(--color-chart-sequential-100);
+  --heatmap-step-1-color: var(--color-text-on-light);
+  --heatmap-step-2-bg: var(--color-chart-sequential-200);
+  --heatmap-step-2-color: var(--color-text-on-light);
+  --heatmap-step-3-bg: var(--color-chart-sequential-300);
+  --heatmap-step-3-color: var(--color-text-on-light);
+  --heatmap-step-4-bg: var(--color-chart-sequential-500);
+  --heatmap-step-4-color: var(--color-text-on-light);
+  --heatmap-step-5-bg: var(--color-chart-sequential-600);
+  --heatmap-step-5-color: var(--color-text-on-dark);
+  --heatmap-step-6-bg: var(--color-chart-sequential-700);
+  --heatmap-step-6-color: var(--color-text-on-dark);
   --image-crop-dialog-area-bg: var(--color-surface-secondary-on-light);
   --input-field-search-icon-color: var(--color-primary);
   --input-field-search-clear-color: var(--color-primary);
@@ -590,6 +616,7 @@ html.dark .surface-light {
   --radio-field-helper-color: var(--form-helper-color);
   --recovery-codes-color: var(--color-text-on-light);
   --recovery-codes-index-color: var(--color-text-muted-on-light);
+  --recurrence-field-legend-color: var(--color-text-on-light);
   --search-form-submit-color: var(--color-primary);
   --search-form-submit-hover-color: var(--color-primary);
   --search-form-submit-disabled-color: var(--input-disabled-color);
@@ -631,6 +658,11 @@ html.dark .surface-light {
   --theme-switcher-focus-ring-color: var(--color-primary);
   --time-field-error-color: var(--form-error-color);
   --time-field-helper-color: var(--form-helper-color);
+  --timeline-rail-color: var(--color-border-default-on-light);
+  --timeline-title-color: var(--color-text-on-light);
+  --timeline-meta-color: var(--color-text-muted-on-light);
+  --timeline-meta-separator-color: var(--color-border-default-on-light);
+  --timeline-note-color: var(--color-text-on-light);
   --tree-view-color: var(--sidebar-nav-item-color);
   --tree-view-selected-color: var(--sidebar-nav-item-color);
   --tree-view-chevron-color: var(--color-text-muted-on-light);
@@ -685,4 +717,36 @@ html.dark .surface-light {
   --chart-crosshair-color: var(--color-icon-secondary-on-light);
   --chat-shell-bg: var(--color-background-light);
   --connector-auth-untrusted-focus-ring-color: var(--link-focus-ring-color);
+  --org-chart-viewport-bg: var(--color-surface-secondary-on-light);
+  --org-chart-viewport-border-color: var(--color-border-default-on-light);
+  --org-chart-focus-ring-color: var(--color-primary);
+  --org-chart-connector-color: var(--color-border-default-on-light);
+  --org-chart-card-bg: var(--color-background-light);
+  --org-chart-card-border-color: var(--color-primary);
+  --org-chart-name-color: var(--color-text-on-light);
+  --org-chart-group-color: var(--color-text-muted-on-light);
+  --org-chart-person-color: var(--color-text-on-light);
+  --org-chart-person-role-color: var(--color-text-muted-on-light);
+  --org-chart-empty-color: var(--color-text-muted-on-light);
+  --planning-grid-border-color: var(--color-primary);
+  --planning-grid-row-header-color: var(--color-text-on-light);
+  --planning-grid-row-header-bg: var(--color-background-light);
+  --planning-grid-column-header-color: var(--color-text-on-light);
+  --planning-grid-column-header-sub-color: var(--color-text-muted-on-light);
+  --planning-grid-column-header-bg: var(--color-background-light);
+  --planning-grid-current-outline-color: var(--color-primary);
+  --planning-grid-cell-color: var(--color-text-on-light);
+  --planning-grid-cell-readonly-color: var(--color-text-muted-on-light);
+  --planning-grid-cell-readonly-bg: var(--color-surface-secondary-on-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

@@ -192,6 +192,9 @@
   --checkbox-field-label-line-height: var(--text-line-height);
   --checkbox-field-error-font-size: var(--form-error-font-size);
   --checkbox-field-helper-font-size: var(--form-helper-font-size);
+  --clock-widget-date-font-size: var(--text-paragraph-small-font-size);
+  --clock-widget-status-font-size: var(--text-paragraph-small-font-size);
+  --clock-widget-elapsed-label-font-size: var(--text-paragraph-small-font-size);
   --consent-banner-title-font-size: var(--text-size-3);
   --consent-banner-description-font-size: var(--text-font-size);
   --conversation-list-item-font-size: var(--text-font-size);
@@ -243,6 +246,7 @@
   --radio-field-error-font-size: var(--form-error-font-size);
   --radio-field-helper-font-size: var(--form-helper-font-size);
   --recovery-codes-font-size: var(--text-paragraph-small-font-size);
+  --recurrence-field-legend-font-size: var(--label-font-size);
   --search-form-submit-input-padding-inline-end: var(--search-form-submit-slot-size);
   --select-field-error-font-size: var(--form-error-font-size);
   --select-field-helper-font-size: var(--form-helper-font-size);
@@ -262,6 +266,9 @@
   --textarea-field-helper-font-size: var(--form-helper-font-size);
   --time-field-error-font-size: var(--form-error-font-size);
   --time-field-helper-font-size: var(--form-helper-font-size);
+  --timeline-title-font-size: var(--text-font-size);
+  --timeline-meta-font-size: var(--text-paragraph-small-font-size);
+  --timeline-note-font-size: var(--text-font-size);
   --uptime-bars-footer-font-size: var(--text-paragraph-small-font-size);
   --user-message-author-font-size: var(--text-paragraph-small-font-size);
   --user-message-timestamp-font-size: var(--text-paragraph-small-font-size);
@@ -271,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

@@ -2348,6 +2348,25 @@
   "--checkbox-field-helper-font-weight": "300",
   "--checkbox-field-helper-line-height": "1.5",
   "--checkbox-field-helper-color": "#111e30",
+  "--clock-widget-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--clock-widget-gap": "1rem",
+  "--clock-widget-header-gap": "0.25rem",
+  "--clock-widget-date-font-size": "0.875rem",
+  "--clock-widget-date-color": "#4a4a4a",
+  "--clock-widget-status-gap": "0.5rem",
+  "--clock-widget-status-font-size": "0.875rem",
+  "--clock-widget-status-color": "#4a4a4a",
+  "--clock-widget-status-dot-size": "0.5rem",
+  "--clock-widget-status-dot-radius": "9999px",
+  "--clock-widget-status-dot-open-bg": "#006616",
+  "--clock-widget-status-dot-closed-bg": "#d0d0d0",
+  "--clock-widget-elapsed-font-size": "2rem",
+  "--clock-widget-elapsed-font-weight": "500",
+  "--clock-widget-elapsed-line-height": "1.1",
+  "--clock-widget-elapsed-color": "#111e30",
+  "--clock-widget-elapsed-label-font-size": "0.875rem",
+  "--clock-widget-elapsed-label-color": "#4a4a4a",
+  "--clock-widget-footer-margin-block-start": "0.5rem",
   "--command-palette-max-height": "min(24rem, 60vh)",
   "--command-palette-input-padding-block": "0.75rem",
   "--command-palette-input-padding-inline": "0.5rem",
@@ -2561,6 +2580,51 @@
   "--filter-bar-label-offset": "calc(0.875rem * 1.5 + 0.5rem)",
   "--filter-bar-control-block-size": "2.5rem",
   "--form-field-gap": "0.25rem",
+  "--heatmap-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--heatmap-radius": "0px",
+  "--heatmap-border-color": "#111e30",
+  "--heatmap-border-width": "1px",
+  "--heatmap-row-header-width": "10rem",
+  "--heatmap-row-header-font-size": "0.875rem",
+  "--heatmap-row-header-color": "#111e30",
+  "--heatmap-row-header-font-weight": "300",
+  "--heatmap-row-header-bg": "#ffffff",
+  "--heatmap-row-header-padding-block": "0.5rem",
+  "--heatmap-row-header-padding-inline": "0.75rem",
+  "--heatmap-column-header-font-size": "0.75rem",
+  "--heatmap-column-header-font-weight": "500",
+  "--heatmap-column-header-color": "#4a4a4a",
+  "--heatmap-column-header-bg": "#ffffff",
+  "--heatmap-column-header-padding-block": "0.5rem",
+  "--heatmap-column-header-padding-inline": "0.5rem",
+  "--heatmap-column-header-width": "3rem",
+  "--heatmap-group-header-font-size": "0.75rem",
+  "--heatmap-group-header-color": "#4a4a4a",
+  "--heatmap-cell-padding-block": "0.5rem",
+  "--heatmap-cell-padding-inline": "0.5rem",
+  "--heatmap-cell-font-size": "0.875rem",
+  "--heatmap-cell-font-weight": "500",
+  "--heatmap-empty-bg": "#f2f2f2",
+  "--heatmap-empty-pattern-color": "#d0d0d0",
+  "--heatmap-empty-pattern-width": "0.25rem",
+  "--heatmap-legend-gap": "0.5rem",
+  "--heatmap-legend-font-size": "0.875rem",
+  "--heatmap-legend-color": "#4a4a4a",
+  "--heatmap-legend-swatch-size": "0.75rem",
+  "--heatmap-legend-swatch-gap": "0.25rem",
+  "--heatmap-margin-block-start": "0.75rem",
+  "--heatmap-step-1-bg": "#dce9fc",
+  "--heatmap-step-1-color": "#111e30",
+  "--heatmap-step-2-bg": "#b6d2f8",
+  "--heatmap-step-2-color": "#111e30",
+  "--heatmap-step-3-bg": "#8fbaf5",
+  "--heatmap-step-3-color": "#111e30",
+  "--heatmap-step-4-bg": "#3b88ee",
+  "--heatmap-step-4-color": "#111e30",
+  "--heatmap-step-5-bg": "#236ac5",
+  "--heatmap-step-5-color": "#ffffff",
+  "--heatmap-step-6-bg": "#164b90",
+  "--heatmap-step-6-color": "#ffffff",
   "--image-crop-dialog-gap": "1rem",
   "--image-crop-dialog-area-max-height": "60vh",
   "--image-crop-dialog-area-min-height": "60vh",
@@ -2822,6 +2886,14 @@
   "--recovery-codes-line-height": "1.65",
   "--recovery-codes-color": "#111e30",
   "--recovery-codes-index-color": "#4a4a4a",
+  "--recurrence-field-gap": "1rem",
+  "--recurrence-field-row-gap": "0.75rem",
+  "--recurrence-field-interval-width": "8rem",
+  "--recurrence-field-weekdays-gap": "0.25rem",
+  "--recurrence-field-legend-font-size": "0.875rem",
+  "--recurrence-field-legend-color": "#111e30",
+  "--recurrence-field-legend-font-weight": "500",
+  "--recurrence-field-legend-margin-block-end": "0.25rem",
   "--search-form-inline-size": "100%",
   "--search-form-xl-height": "4rem",
   "--search-form-xl-padding-inline": "2rem",
@@ -3028,6 +3100,25 @@
   "--time-field-helper-font-weight": "300",
   "--time-field-helper-line-height": "1.5",
   "--time-field-helper-color": "#111e30",
+  "--timeline-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--timeline-gap": "1.5rem",
+  "--timeline-column-gap": "0.75rem",
+  "--timeline-rail-width": "1px",
+  "--timeline-rail-color": "#d0d0d0",
+  "--timeline-rail-gap": "0.25rem",
+  "--timeline-title-font-size": "1rem",
+  "--timeline-title-font-weight": "500",
+  "--timeline-title-line-height": "1.3",
+  "--timeline-title-color": "#111e30",
+  "--timeline-meta-font-size": "0.875rem",
+  "--timeline-meta-color": "#4a4a4a",
+  "--timeline-meta-gap": "0.5rem",
+  "--timeline-meta-separator-color": "#d0d0d0",
+  "--timeline-note-font-size": "1rem",
+  "--timeline-note-line-height": "1.5",
+  "--timeline-note-color": "#111e30",
+  "--timeline-body-gap": "0.25rem",
+  "--timeline-actions-margin-block-start": "0.5rem",
   "--tree-view-icon-size": "16px",
   "--tree-view-indent": "calc(16px + 0.5rem)",
   "--tree-view-row-gap": "0.5rem",
@@ -3240,8 +3331,116 @@
   "--onboarding-shell-actions-gap": "1rem",
   "--onboarding-shell-actions-margin-block-start": "2rem",
   "--onboarding-shell-actions-padding-block-start": "1.5rem",
+  "--org-chart-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--org-chart-gap": "0.75rem",
+  "--org-chart-viewport-block-size": "32rem",
+  "--org-chart-viewport-padding": "1.5rem",
+  "--org-chart-viewport-bg": "#f2f2f2",
+  "--org-chart-viewport-radius": "0px",
+  "--org-chart-viewport-border-color": "#d0d0d0",
+  "--org-chart-viewport-border-width": "1px",
+  "--org-chart-focus-ring-color": "#111e30",
+  "--org-chart-focus-ring-width": "2px",
+  "--org-chart-focus-ring-offset": "2px",
+  "--org-chart-sibling-gap": "1rem",
+  "--org-chart-connector-length": "2rem",
+  "--org-chart-connector-color": "#d0d0d0",
+  "--org-chart-connector-width": "1px",
+  "--org-chart-card-inline-size": "14rem",
+  "--org-chart-card-bg": "#ffffff",
+  "--org-chart-card-border-color": "#111e30",
+  "--org-chart-card-border-width": "1px",
+  "--org-chart-card-radius": "0px",
+  "--org-chart-card-padding-block": "0.5rem",
+  "--org-chart-card-padding-inline": "0.75rem",
+  "--org-chart-card-gap": "0.5rem",
+  "--org-chart-name-font-size": "0.875rem",
+  "--org-chart-name-font-weight": "500",
+  "--org-chart-name-color": "#111e30",
+  "--org-chart-group-font-size": "0.75rem",
+  "--org-chart-group-color": "#4a4a4a",
+  "--org-chart-group-gap": "0.25rem",
+  "--org-chart-group-margin-block-start": "0.5rem",
+  "--org-chart-person-font-size": "0.875rem",
+  "--org-chart-person-color": "#111e30",
+  "--org-chart-person-role-font-size": "0.75rem",
+  "--org-chart-person-role-color": "#4a4a4a",
+  "--org-chart-person-gap": "0.25rem",
+  "--org-chart-empty-color": "#4a4a4a",
+  "--planning-grid-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--planning-grid-radius": "0px",
+  "--planning-grid-border-color": "#111e30",
+  "--planning-grid-border-width": "1px",
+  "--planning-grid-row-header-width": "12rem",
+  "--planning-grid-row-header-font-size": "0.875rem",
+  "--planning-grid-row-header-font-weight": "300",
+  "--planning-grid-row-header-color": "#111e30",
+  "--planning-grid-row-header-bg": "#ffffff",
+  "--planning-grid-row-header-padding-block": "0.5rem",
+  "--planning-grid-row-header-padding-inline": "0.75rem",
+  "--planning-grid-column-header-font-size": "0.875rem",
+  "--planning-grid-column-header-font-weight": "500",
+  "--planning-grid-column-header-color": "#111e30",
+  "--planning-grid-column-header-sub-font-size": "0.75rem",
+  "--planning-grid-column-header-sub-color": "#4a4a4a",
+  "--planning-grid-column-header-bg": "#ffffff",
+  "--planning-grid-column-header-padding-block": "0.5rem",
+  "--planning-grid-column-width": "6rem",
+  "--planning-grid-current-outline-color": "#111e30",
+  "--planning-grid-current-outline-width": "2px",
+  "--planning-grid-cell-padding-block": "0.25rem",
+  "--planning-grid-cell-padding-inline": "0.25rem",
+  "--planning-grid-cell-font-size": "0.875rem",
+  "--planning-grid-cell-color": "#111e30",
+  "--planning-grid-cell-readonly-color": "#4a4a4a",
+  "--planning-grid-cell-readonly-bg": "#f2f2f2",
+  "--planning-grid-cell-input-width": "4.5rem",
+  "--planning-grid-footer-bg": "#f2f2f2",
+  "--planning-grid-footer-font-weight": "500",
+  "--planning-grid-footer-color": "#111e30",
+  "--planning-grid-over-color": "#b30000",
+  "--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",