# Sistema de diseño Emplifi Soul

## Vista previa de la interfaz del sistema de diseño Emplifi Soul

Prueba la selección de todos los elementos, la selección indeterminada, la ordenación, la revisión en bloque y la cancelación.

## Referencia de diseño del sistema de diseño Emplifi Soul

Documentación pública de diseño de Soul y Storybook oficial en vivo. Estos son valores fundamentales identificados para el modo claro; no implican que todas las páginas de documentación y versiones de los paquetes tengan el mismo estado. La vista previa usa fuentes del sistema como alternativa local.

### Modelo de capas

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --color-layer-level-0 | #f3f3f5 | Nivel de superficie del modo claro. |
| --color-layer-level-1 | #ffffff | Nivel de superficie del modo claro. |
| --color-layer-level-2 | #f3f3f5 | Nivel de superficie del modo claro. |
| --color-layer-level-3 | #e7e7e7 | Nivel de superficie del modo claro. |
| --color-on-layer-primary | #24242b | Texto principal. |
| --color-on-layer-secondary | #505057 | Texto complementario. |
| Dark level 0 / level 1 | #111114 / #24242b | Las superficies oscuras se aclaran a medida que aumenta la profundidad. |
### Colores de acciones y tablas

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --color-button-primary | #0c4bff | Fondo del botón principal. |
| --color-on-layer-interactive | #003beb | Texto interactivo. |
| --color-border-focus-ring | #003beb | Anillo de enfoque. |
| --color-table-row-odd | #ffffff | Filas impares y encabezado y pie de tabla. |
| --color-table-row-even | #f9f9fa | Filas pares. |
| --color-table-row-hover | #d5efff | Indicador de carga. |
| --color-layer-main-navigation | #111114 | Solo navegación principal. |
### Espaciado y radio

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --space-1 | 3px | Espaciado de Foundation. |
| --space-2 | 6px | Espaciado de Foundation. |
| --space-3 | 9px | Espaciado de Foundation. |
| --space-4 | 12px | Espaciado de Foundation. |
| --space-5 | 18px | Espaciado de Foundation. |
| --space-6 | 24px | Espaciado de Foundation. |
| --space-7 | 30px | Espaciado de Foundation. |
| --space-8 | 36px | Espaciado de Foundation. |
| --space-9 | 48px | Espaciado de Foundation. |
| Default control height | 36px | Opción compacta de 30 px; no debe confundirse con la escala de espaciado. |
### Jerarquía de esquinas

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --border-radius-small | 2px | Suavizado sutil. |
| --border-radius-medium | 6px | Elementos predeterminados. |
| --border-radius-large | 8px | Contenedores. |
| --border-radius-full | 50% | Círculo. |
| --border-radius-pill | 999px | Píldora. |
### Recetas tipográficas

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| headline-1 | 500 · 30px / 42px | Título principal de la página. |
| headline-2 | 500 · 20px / 30px | Título de sección. |
| headline-3 | 500 · 16px / 24px | Título de subsección. |
| paragraph-regular | 400 · 13px / 18px | Texto de cuerpo mediano. |
| Button label | 600 · 13px / 18px | Mayúscula inicial en la primera palabra. |
| Table numerals | Tabular numbers | Alinea los valores numéricos comparables. |
### Botón React API

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Package | @sbks/ds-button | Ámbito privado; Button es una exportación con nombre. |
| variant | BUTTON_VARIANT.LIGHT default | Respaldado por enum; usa las constantes enum exportadas, no cadenas sin procesar en TypeScript. |
| size | BUTTON_SIZE.MEDIUM default | Medium es el valor base. |
| isLoading | false | Visualización de carga. |
| isSelected | false | Apariencia seleccionada. |
| isApplied | false | Actualmente, el soporte visual es solo para la variante invisible. |
| onClick | Mouse event handler | Conecta el estado de la aplicación local. |
| badge | string \| number | Información sobre la selección aplicada. |
| theme | Inherited; light fallback | No des por sentado que una superficie oscura cambia automáticamente todos sus elementos descendientes. |
## Guía completa del sistema de diseño Emplifi Soul

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## Guía de diseño y estado de implementación del sistema de diseño Emplifi Soul

### No deduzcas la existencia de un paquete por el nombre de un componente

> Soul es el sistema de diseño de Emplifi. Sus referencias públicas de diseño y su Storybook se pueden consultar, pero la guía oficial de inicio rápido requiere acceso a un ámbito privado de npm. El ejemplo del navegador es una implementación independiente HTML/CSS; no incluye Soul React. La tabla interpreta la guía de diseño, cuya página pública todavía indica que React está previsto.

El ejemplo proporcionado de React usa deliberadamente una tabla semántica y controles Button reales de Soul. Ofrece un estado de aplicación funcional sin afirmar que exista una exportación DataTable no documentada. Que la documentación pública se pueda consultar no concede acceso al paquete ni permiso para redistribuir recursos privados.

Consulta la especificación complementaria

## Sistema de diseño Emplifi Soul: un contrato de tablas de datos que va más allá de seleccionar filas

### Encabezados, resúmenes y valores ausentes

La guía de tablas de Soul distingue entre encabezados, filas, celdas y una barra de resumen opcional. Los valores numéricos se alinean a la derecha y el contenido textual, a la izquierda. Un resumen puede mostrar totales o promedios, por lo que su etiqueta debe identificar la operación en lugar de presentar un número sin explicación.

Usa N/A cuando una medida no corresponda, como la duración del vídeo en el caso de una imagen. Un guion largo representa datos no disponibles o desconocidos. Estos casos no deben convertirse en cero, ya que eso cambiaría la interpretación del resumen y de cualquier comparación basada en él.

- El ejemplo actual implementa la ordenación y la selección de filas, pero no calcula resúmenes.

- Las filas expandidas y las explicaciones sobre datos ausentes están documentadas como puntos de extensión; no se simulan en la vista previa.

- La referencia de diseño indica que la tabla de React está prevista, por lo que el código proporcionado define su propio marcado de tabla en lugar de inventar una importación de Soul DataTable.

Consulta la especificación complementaria

### El modo de selección en bloque cambia las acciones disponibles

Soul coloca la barra de acciones en bloque debajo de la colección y oculta las acciones de cada fila mientras la selección en bloque está activa. La casilla del encabezado tiene tres estados: seleccionada, sin seleccionar e indeterminada. La ordenación se limita a una columna a la vez.

En el ejemplo, los tres registros son locales y permanecen dentro del ámbito de selección. El encabezado de alcance anuncia la dirección de ordenación; los ID seleccionados se conservan al reordenar. Las futuras acciones por fila deben respetar la restricción documentada del modo en bloque, en lugar de competir con la barra de herramientas de acciones por lotes.

Consulta la especificación complementaria

## Sistema de diseño Emplifi Soul: crea profundidad con capas neutras

### Un espacio de trabajo de CX sobrio

El modo claro de Soul alterna superficies grises y blancas, mientras que las capas oscuras se aclaran progresivamente. El ejemplo usa una página gris, una superficie de tabla blanca y una franja de navegación oscura y compacta. El color define funciones, en lugar de decorar cada fila.

El azul interactivo se reserva para la acción de revisión y los controles seleccionados. Las pequeñas ilustraciones originales de las publicaciones aportan color decorativo. Ayudan a distinguir los temas del contenido sin atribuirles un significado falso de éxito o peligro.

Consulta la especificación complementaria

## Sistema de diseño Emplifi Soul: tipografía compacta sin perder jerarquía

### Inter es la familia principal

Soul especifica Inter para toda la interfaz, Noto Sans Arabic para el texto en árabe y Noto Sans Mono para el código. La vista previa usa fuentes del sistema porque no incluye esos archivos de fuentes. Las medidas siguen basándose en las recetas publicadas.

Un título principal de 30/42 encabeza un sistema de texto de cuerpo de 13/18. Los números de las tablas usan cifras tabulares. La tabla no utiliza un estilo de exhibición de marketing sobredimensionado, y los títulos de las publicaciones siguen siendo texto legible, no etiquetas integradas en una imagen.

Consulta la especificación complementaria

## Sistema de diseño Emplifi Soul: ritmo de seis píxeles y radio de contenedor

### Organiza los controles densos

La unidad básica de espaciado es de 6 px. Valores como 12, 18, 24 y 36 px establecen relaciones de mayor escala; 3 y 9 px se reservan para los elementos internos compactos de los componentes, no para los márgenes predeterminados de página. El relleno de contenido documentado cambia de 24 px en 1559 px o menos a 36 px en 1560 px o más.

Soul separa los valores numéricos de espaciado de las tallas de componentes expresadas con nombres de camisetas. Un control mediano no equivale a --space-6. La muestra usa controles de 36 px, redondeo de elementos de 6 px y un radio de contenedor de 8 px.

Consulta la especificación complementaria

## Sistema de diseño Emplifi Soul: usa el énfasis para explicar la siguiente acción

### Una única acción principal de revisión

La variante principal de Soul destaca la acción más importante. Las variantes light y ghost sirven para tareas complementarias; los controles invisibles reducen el peso visual en barras de herramientas densas. En la vista previa, solo la acción de revisión en bloque tiene el estilo de relleno principal.

Cancelar selección borra las filas seleccionadas sin cambiar las etiquetas de revisión. La revisión solo modifica el estado local y el mensaje indica explícitamente que no se publicó nada. El texto del control usa mayúsculas y minúsculas según las reglas del español.

Consulta la especificación complementaria

## Sistema de diseño Emplifi Soul: carga la biblioteca privada de forma deliberada

### Foundation CSS precede a la composición de componentes

La entrada oficial importa variables.css y default-styles.css desde @sbks/ds-design-library. Su entrada Sass proporciona mixins; es independiente del CSS global. Button procede de @sbks/ds-button.

El API de Button en uso incluye isLoading, isSelected, isApplied y badge. Las propiedades basadas en enum requieren las constantes enum exportadas por la biblioteca en TypeScript. Este ejemplo usa la variante predeterminada LIGHT, verificada, en lugar de adivinar una ruta de importación para el enum.

1. Completa la configuración autorizada del ámbito privado y de los cargadores de compilación siguiendo el inicio rápido oficial.

2. Importa una sola vez la CSS de fundamentos en el punto de entrada de la aplicación y configura los recursos tipográficos seleccionados.

3. Monta el ejemplo de tabla controlada proporcionado y prueba la selección, la cancelación y la revisión local antes de conectar cualquier flujo de publicación.

Consulta la especificación complementaria

## Ejemplos de componentes del sistema de diseño Emplifi Soul

### Muestra interactiva independiente completa

Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente de HTML/CSS de las directrices de diseño de Soul y de los tokens verificados del modo claro. Fuente tipográfica alternativa del sistema; sin recursos privados de React.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Content review</title><style>:root{--color-layer-level-0:#f3f3f5;--color-layer-level-1:#fff;--color-on-layer-primary:#24242b;--color-on-layer-secondary:#505057;--color-button-primary:#0c4bff;--space-2:6px;--space-4:12px;--space-6:24px;--border-radius-medium:6px;--border-radius-large:8px}*{box-sizing:border-box}body{margin:0;background:var(--color-layer-level-0);color:var(--color-on-layer-primary);font:13px/18px system-ui}nav{padding:15px 24px;background:#111114;color:#f9f9fa;font-size:13px;display:flex;justify-content:space-between;gap:24px}main{padding:24px}header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}h1{font-size:30px;font-weight:500;line-height:42px;margin:0}p{color:#505057;margin:6px 0}small{font-size:11px}.surface{background:white;border:1px solid #ddd;border-radius:8px;overflow:hidden}.bar{padding:18px 24px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;gap:12px}table{width:100%;border-collapse:collapse;table-layout:fixed}caption{text-align:left;padding:12px 24px;background:#f9f9fa;font-size:11px;color:#505057}th,td{padding:16px 12px;text-align:left;border-bottom:1px solid #e7e7e7;font-weight:400}thead th{font-size:11px;font-weight:600;padding-top:12px;padding-bottom:12px}th:first-child,td:first-child{width:44px;text-align:center}.title{width:46%}.reach{width:15%;text-align:right;font-variant-numeric:tabular-nums}tbody tr:nth-child(even){background:#f9f9fa}tbody tr:hover{background:#d5efff}input{accent-color:#003beb;width:16px;height:16px;cursor:pointer}input:focus-visible,button:focus-visible{outline:2px solid #003beb;outline-offset:3px}button{font:600 13px/18px system-ui;border:1px solid #ccc;background:white;padding:8px 12px;border-radius:6px;min-height:36px;cursor:pointer;color:inherit}button:hover{background:#f3f3f5}#sort{border:0;background:transparent;padding:0;min-height:28px;color:#003beb}#apply{background:#0c4bff;color:white;border-color:#0c4bff}#apply:hover{background:#003beb}.name{display:flex;align-items:center;gap:12px}.art{width:52px;height:52px;flex:0 0 52px;border-radius:6px;position:relative;overflow:hidden}.field{background:#d4e5d3}.field:before{content:'';position:absolute;width:65px;height:65px;border-radius:50%;background:#7ca77a;left:15px;top:20px}.field:after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff1c5;left:8px;top:8px}.studio{background:#e6daee}.studio:before{content:'';position:absolute;width:20px;height:36px;background:#a089b2;left:8px;top:16px;transform:rotate(-14deg)}.studio:after{content:'';position:absolute;width:20px;height:28px;background:#c3abc9;left:30px;top:24px;transform:rotate(12deg)}.guide{background:#f4e4c9}.guide:before{content:'';position:absolute;width:26px;height:38px;background:#fff;left:13px;top:9px;transform:rotate(8deg);border:1px solid #c9ad7c}.name strong{font-weight:600;display:block}.name small{color:#505057}.state{font-size:11px;color:#505057}#bulk{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;background:#f3f3f5;border-top:1px solid #ccc}#bulk[hidden]{display:none}.actions{display:flex;gap:6px}#status{margin:18px 0;min-height:18px}footer{padding:0 24px 20px;color:#505057;font-size:11px}@media(min-width:1560px){main{padding:36px}}@media(max-width:600px){main{padding:18px}.bar{padding:12px}.channel{display:none}.title{width:57%}.reach{width:22%}.state{display:block;margin-top:4px}th,td{padding:12px 6px}.art{width:36px;height:42px;flex-basis:36px}.name{gap:6px}#bulk{padding:12px;flex-direction:column;align-items:stretch}.actions{flex-wrap:wrap}header{flex-direction:column;gap:8px}h1{font-size:27px}.bar small{max-width:140px;text-align:right}nav{padding:14px 18px}}</style><nav><strong>Soul / Content workspace</strong><span>Demo collection</span></nav><main><header><div><h1>Content review</h1><p>A final editorial check before your team publishes.</p></div><small>3 fictional drafts · No publishing connection</small></header><section class="surface" aria-label="Content drafts"><div class="bar"><strong>Draft collection</strong><small>Select items to review together</small></div><table><caption>Local sample data. Reach values are illustrative.</caption><thead><tr><th scope="col"><input id="all" type="checkbox" aria-label="Select all drafts"></th><th scope="col" class="title">Content</th><th scope="col" class="channel">Channel</th><th scope="col" class="reach" id="reach-head" aria-sort="none"><button id="sort">Reach ↕</button></th></tr></thead><tbody id="rows"></tbody></table><div id="bulk" hidden><span id="count"></span><div class="actions"><button id="apply">Mark as reviewed</button><button id="cancel">Cancel selection</button></div></div></section><p id="status" role="status">Select a draft to begin. All changes stay in this example.</p></main><footer>Independent Soul interpretation · verified light-mode tokens · system font fallback</footer><script>let items=[{id:'field',title:'A morning in the field',channel:'Instagram',reach:2480},{id:'studio',title:'Inside the studio',channel:'Facebook',reach:1860},{id:'guide',title:'Care guide: summer edition',channel:'Instagram',reach:3210}],selected=new Set(),reviewed=new Set(),direction=0;const rows=document.querySelector('#rows'),all=document.querySelector('#all'),bulk=document.querySelector('#bulk'),status=document.querySelector('#status');function render(){rows.innerHTML=items.map(i=>`<tr><td><input type="checkbox" data-id="${i.id}" aria-label="Select ${i.title}" ${selected.has(i.id)?'checked':''}></td><th scope="row"><div class="name"><div class="art ${i.id}" aria-hidden="true"></div><div><strong>${i.title}</strong><span class="state">${reviewed.has(i.id)?'Reviewed locally':'Not reviewed'}</span></div></div></th><td class="channel">${i.channel}</td><td class="reach">${i.reach.toLocaleString('en-US')}</td></tr>`).join('');rows.querySelectorAll('input').forEach(x=>x.onchange=()=>{x.checked?selected.add(x.dataset.id):selected.delete(x.dataset.id);sync()});sync()}function sync(){all.checked=selected.size===items.length;all.indeterminate=selected.size>0&&selected.size<items.length;bulk.hidden=!selected.size;document.querySelector('#count').textContent=selected.size+' selected'}all.onchange=()=>{selected=all.checked?new Set(items.map(i=>i.id)):new Set();render()};document.querySelector('#cancel').onclick=()=>{selected.clear();render();all.focus()};document.querySelector('#apply').onclick=()=>{let n=selected.size;selected.forEach(x=>reviewed.add(x));selected.clear();render();status.textContent=n+(n===1?' draft':' drafts')+' reviewed locally. Nothing published.';all.focus()};document.querySelector('#sort').onclick=()=>{direction=direction===1?-1:1;items.sort((a,b)=>(a.reach-b.reach)*direction);document.querySelector('#reach-head').setAttribute('aria-sort',direction===1?'ascending':'descending');document.querySelector('#sort').textContent='Reach '+(direction===1?'↑':'↓');render()};render();</script></html>
```

Referencia de código

- La tabla implementa la selección y la ordenación directamente en HTML. No afirma que exista una exportación privada de Soul llamada DataTable; el ejemplo de React utiliza la exportación Button verificada junto con una tabla propia de la aplicación.

### Tabla de revisión seleccionable con botones reales de Soul

Tabla semántica nativa y casillas controladas compuestas con la exportación Button documentada. La tabla es código de la aplicación, no un componente DataTable inventado de Soul.

```
// ContentReview.tsx — inside a configured, authorized Soul application
import React, { useState } from 'react';
import { Button } from '@sbks/ds-button';
import '@sbks/ds-design-library/dist/css/variables.css';
import '@sbks/ds-design-library/dist/css/default-styles.css';

const posts = [
  { id: 'field', title: 'A morning in the field', channel: 'Instagram' },
  { id: 'studio', title: 'Inside the studio', channel: 'Facebook' },
  { id: 'guide', title: 'Care guide: summer edition', channel: 'Instagram' }
];
export default function ContentReview() {
  const [selected, setSelected] = useState<string[]>([]);
  const [reviewed, setReviewed] = useState<string[]>([]);
  const [message, setMessage] = useState('');
  const toggle = (id: string) => setSelected(previous =>
    previous.includes(id) ? previous.filter(x => x !== id) : [...previous, id]);
  const review = () => {
    setReviewed(previous => [...new Set([...previous, ...selected])]);
    setMessage(`${selected.length} items reviewed locally. Nothing published.`);
    setSelected([]);
  };
  return <section aria-labelledby="review-title">
    <h1 id="review-title">Content review</h1>
    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
      <caption>Fictional content drafts</caption>
      <thead><tr><th scope="col">Select</th><th scope="col">Content</th>
        <th scope="col">Channel</th><th scope="col">Review</th></tr></thead>
      <tbody>{posts.map(post => <tr key={post.id}>
        <td><input type="checkbox" aria-label={`Select ${post.title}`}
          checked={selected.includes(post.id)} onChange={() => toggle(post.id)} /></td>
        <th scope="row">{post.title}</th><td>{post.channel}</td>
        <td>{reviewed.includes(post.id) ? 'Reviewed locally' : 'Not reviewed'}</td>
      </tr>)}</tbody>
    </table>
    {selected.length > 0 && <div aria-label="Bulk actions"
      style={{ display: 'flex', gap: 'var(--space-2)', marginTop: 'var(--space-6)' }}>
      <Button onClick={review}>Mark {selected.length} as reviewed</Button>
      <Button onClick={() => setSelected([])}>Cancel selection</Button>
    </div>}
    <p role="status">{message}</p>
  </section>;
}
```

Referencia de código

- El valor predeterminado de Button es LIGHT. Este ejemplo no adivina dónde se exporta un enum ni inventa propiedades de DataTable.

- Primero, instala y configura la biblioteca de diseño privada y los paquetes de botones. Las importaciones están verificadas en el Storybook oficial.

- La revisión en bloque solo actualiza el estado local. No se publica ningún contenido.

## Configuración del agente del sistema de diseño Emplifi Soul

### Punto de partida para la implementación

El inicio rápido oficial requiere acceso al npm privado y al repositorio/VPN de Emplifi. Es compatible con React 18/19 y Webpack 4/5, con configuración para Sass y el cargador de SVG. Sigue las instrucciones de incorporación al ámbito interno enlazadas; no esperes encontrar estos paquetes en el registro público. La vista previa independiente no necesita ninguno de esos recursos privados.

```
# For authorized Emplifi environments with the private @sbks scope configured:
npm i -D @sbks/ds-design-library @sbks/ds-button

// Application entry:
import "@sbks/ds-design-library/dist/css/variables.css";
import "@sbks/ds-design-library/dist/css/default-styles.css";

// Optional SCSS file:
@use "@sbks/ds-design-library/dist/sass/main.scss" as *;
```

### Una instrucción para tu proyecto

```
Crea una interfaz de revisión de contenido Emplifi Soul con variables verificadas de capas, color y espaciado, tipografía de cuerpo 13/18, radio de control de 6 px y contenedores de 8 px. Usa una tabla semántica seleccionable con identificadores estables, selección de todos indeterminada y una columna ordenada. En las aplicaciones autorizadas, usa la exportación real de @sbks/ds-button y la CSS de fundamentos; nunca inventes un paquete público DataTable.
```

## Fuentes y alcance del sistema de diseño Emplifi Soul

Soul es el sistema de diseño de Emplifi. Sus referencias públicas de diseño y su Storybook se pueden consultar, pero la guía oficial de inicio rápido requiere acceso a un ámbito privado de npm. El ejemplo del navegador es una implementación independiente HTML/CSS; no incluye Soul React. La tabla interpreta la guía de diseño, cuya página pública todavía indica que React está previsto.

- Modelo de capas Jerarquía de superficies claras y oscuras.

- Tokens de color de la interfaz Colores con nombre y funciones de estado.

- Espaciado Unidad de seis píxeles y tamaños de componentes.

- Tipografía Estilos tipográficos y colores semánticos del texto.

- Familias tipográficas Funciones de las familias Inter y Noto.

- Radio Valores de 2, 6 y 8 px, completo y en forma de píldora.

- Uso de Button Énfasis de las acciones.

- Pautas para tablas Comportamiento de selección, ordenación y resumen.

- Inicio rápido de paquetes privados Requisitos reales de acceso y compilación.

- Puntos de entrada de CSS Importaciones de variables y estilos predeterminados.

- Botón API Propiedades y paquete del componente real.

## Recursos relacionados con el sistema de diseño Emplifi Soul

### Esri Calcite

Una referencia práctica de Calcite para herramientas espaciales que requieren precisión: superficies semánticas y acciones azules, paneles de inspección compactos, API reales para entradas y un ejemplo completo de revisión local de sitios.

### GitLab Pajamas

Una guía de Pajamas para flujos de trabajo técnicos: tokens semánticos reales, tipografía y espaciado fluidos, un inspector de canalización por etapas, mensajes de error fáciles de leer y una simulación de reintento explícitamente local.

### HPE Grommet

Modela una reserva de capacidad con las primitivas de diseño de Grommet, campos de formulario controlados e indicadores numéricos. Usa deliberadamente la escala del tema y distingue el tema base de Grommet del tema de HPE, que se instala por separado.


- [Referencia de implementación](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Fuente](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Fuente](https://soul.emplifi.io/latest/foundations/foundations/colors/ui-colors-aysX6TuQ)
- [Fuente](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Fuente](https://soul.emplifi.io/latest/foundations/foundations/radius-Z9zxhvSr)
- [Fuente](https://soul.emplifi.io/latest/foundations/foundations/typography/overview-D0qyFyli)
- [Fuente](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)
- [Consulta la especificación complementaria](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-overview--overview)
- [Consulta la especificación complementaria](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Consulta la especificación complementaria](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Consulta la especificación complementaria](https://soul.emplifi.io/latest/foundations/foundations/typography/typefaces-hFaPahBG)
- [Consulta la especificación complementaria](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Consulta la especificación complementaria](https://soul.emplifi.io/latest/components/components/button/usage-LajmcVQv)
- [Consulta la especificación complementaria](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-css-variables-and-mixins--overview)
- [Referencia de código](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Referencia de código](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)
- [Modelo de capas Jerarquía de superficies claras y oscuras.](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Tokens de color de la interfaz Colores con nombre y funciones de estado.](https://soul.emplifi.io/latest/foundations/foundations/colors/ui-colors-aysX6TuQ)
- [Espaciado Unidad de seis píxeles y tamaños de componentes.](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Tipografía Estilos tipográficos y colores semánticos del texto.](https://soul.emplifi.io/latest/foundations/foundations/typography/overview-D0qyFyli)
- [Familias tipográficas Funciones de las familias Inter y Noto.](https://soul.emplifi.io/latest/foundations/foundations/typography/typefaces-hFaPahBG)
- [Radio Valores de 2, 6 y 8 px, completo y en forma de píldora.](https://soul.emplifi.io/latest/foundations/foundations/radius-Z9zxhvSr)
- [Uso de Button Énfasis de las acciones.](https://soul.emplifi.io/latest/components/components/button/usage-LajmcVQv)
- [Pautas para tablas Comportamiento de selección, ordenación y resumen.](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Inicio rápido de paquetes privados Requisitos reales de acceso y compilación.](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-overview--overview)
- [Puntos de entrada de CSS Importaciones de variables y estilos predeterminados.](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-css-variables-and-mixins--overview)
- [Botón API Propiedades y paquete del componente real.](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)