Sistema de diseño KERN: HTML nativo, CSS y comportamiento del navegador
Qué incluye el paquete
KERN native 2.8.2 incluye el componente CSS y las fuentes. El ejemplo importa esos archivos directamente: el botón, el área de texto, Details y Dialog son elementos nativos con clases de KERN. No se necesita ningún proveedor de React ni constructor de componentes de JavaScript. La aplicación aporta la lógica de decisión en torno al cuadro de diálogo; el estilo por sí solo no borra un campo de entrada.
Instala el paquete nativo con la versión fijada.
Copia juntos su hoja de estilos y sus fuentes, conservando las rutas relativas.
Guarda el ejemplo completo que aparece a continuación y sirve el directorio por HTTP.
Sistema de diseño KERN: Fira Sans y tipografía adaptable
Carga la tipografía explícitamente
kern.min.css hace referencia a Fira Sans; fonts/fira-sans.css declara las fuentes reales y los recursos WOFF2 con rutas relativas. Mantener intacto el directorio de fuentes evita que una hoja de estilos aparentemente correcta recurra silenciosamente a otra fuente. Los tamaños del texto estático se mantienen en 16, 18 y 21px, mientras que los tokens adaptables de títulos y encabezados cambian a 768px. Usa un elemento de encabezado para establecer la jerarquía y la clase de KERN correspondiente para su tratamiento visual. El ejemplo mantiene un solo h1 y asigna al cuadro de diálogo su propio h2.
Sistema de diseño KERN: espaciado, ancho y diseño adaptable
Separa los tokens de la composición
KERN ofrece tokens de espacio con nombre desde 0 hasta 192px, con incrementos de 2px y 4px en el extremo inferior. Los tokens de borde y radio conforman escalas separadas. El ejemplo utiliza un ritmo vertical de 24px y una fila de acciones que se ajusta al ancho disponible. El ancho máximo de contenido de 800px y el límite de 560px del cuadro de diálogo son decisiones explícitas de la aplicación; ninguno se presenta como un contenedor universal de KERN. En pantallas estrechas, el relleno de la página pasa a 16px y el ancho del cuadro de diálogo se mantiene dentro del área visible. No se aplica una altura mínima de ventana gráfica al documento, por lo que incrustarlo no provoca un bucle de realimentación al cambiar el tamaño.
Sistema de diseño KERN: color semántico y apariencia
Cambia los roles, no los valores hexadecimales aislados
El paquete utiliza propiedades semánticas de CSS para el texto, las acciones, el fondo y el foco. Las paletas clara y oscura cambian estos roles en conjunto. Por ejemplo, action-default se asigna a darkblue-700 en el modo claro y a darkblue-300 en el modo oscuro, mientras que su color de primer plano cambia de blanco a negro. El ejemplo establece data-kern-theme en html y muestra un botón con estado presionado. La preferencia solo se conserva para este documento; no se almacena. Si se elimina el atributo explícito, la hoja de estilos puede seguir prefers-color-scheme.
Sistema de diseño KERN: nota editable con etiqueta
Mantén las instrucciones disponibles
El área de texto utiliza kern-form-input__input dentro de kern-form-input, con una etiqueta real vinculada al id del campo. La indicación tiene su propio id y sigue vinculada mediante aria-describedby. Como esta nota local es opcional, el ejemplo no inventa errores de campo obligatorio ni una operación de guardado en el servidor. «Restaurar ejemplo» establece el valor inicial y enfoca el campo editable. Una región de estado anuncia el resultado sin reemplazar la etiqueta ni mover el foco a texto no interactivo.
Sistema de diseño KERN: información complementaria con Details
Deja que el navegador gestione el desplegable
El elemento details gestiona su propio estado de apertura; su elemento summary es el activador. KERN añade kern-details__header, un pequeño elemento span para el título y kern-details__body para la presentación. El ejemplo sitúa aquí la información sobre la conservación porque es complementaria. Las instrucciones obligatorias, los errores y la acción de descartar permanecen visibles fuera del desplegable. El comportamiento de teclado nativo permite activarlo sin un segundo controlador de clics ni un estado aria-expanded duplicado.
Procura que el resumen sea descriptivo y conciso.
No incluyas otro botón ni enlace dentro del resumen.
Usa un Accordion para un conjunto de desplegables relacionados, en lugar de disfrazar acciones no relacionadas como Details.
Sistema de diseño KERN: confirmación con una salida segura
Estructura y control
El diálogo está etiquetado mediante su h2 y se describe con una breve explicación de las consecuencias. El encabezado, el cuerpo y el pie usan las clases documentadas de KERN. showModal() coloca el diálogo nativo en la capa superior; close() finaliza la interacción. Conservar nota recibe el foco inicial mediante autofocus. Escape cierra el diálogo sin modificar el texto y el evento de cierre devuelve el foco a Descartar nota. Solo Sí, descartar modifica el valor. Los clics en el fondo no hacen nada deliberadamente porque se trata de una confirmación destructiva. Esto sigue las pautas documentadas para decisiones críticas, en lugar de copiar indiscriminadamente el controlador de cierre al hacer clic en el fondo del ejemplo genérico.
Integración y aplicabilidad del sistema de diseño KERN
Instala toda la cadena de dependencias
La configuración siguiente instala un único paquete con una versión exacta y copia su CSS y el directorio de fuentes. El ejemplo completo incluye su propio CSS de diseño, el atributo de tema raíz, la estructura DOM y la conexión de eventos. Tras integrarlo en un formulario real, prueba ambos resultados del diálogo, Escape y las pantallas estrechas. El código de KERN está sujeto a la licencia EUPL; el sitio web distingue entre sus materiales textuales y gráficos bajo CC BY-NC-SA. Este ejemplo original no copia la identidad de ninguna autoridad ni da a entender que un servicio haya superado una auditoría de accesibilidad. Una aplicación real sigue necesitando persistencia, validación en el servidor y una evaluación del recorrido completo del usuario.
Ejemplos de componentes del sistema de diseño KERN
Nota nativa y confirmación completas
Todo el marcado del documento, el CSS de diseño y el comportamiento de la aplicación; instala los recursos con el bloque de configuración.
HTML
<!doctype html><html lang="en" data-kern-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>KERN workshop note</title><link rel="stylesheet" href="vendor/kern-2.8.2/kern.min.css"><link rel="stylesheet" href="vendor/kern-2.8.2/fonts/fira-sans.css"><style>body{margin:0;padding:clamp(16px,4vw,40px);color:var(--kern-color-layout-text-default)}main{max-width:800px;margin:auto;display:grid;gap:24px}.top,.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.top{justify-content:space-between}.kern-dialog{max-width:min(560px,calc(100% - 32px))}textarea{width:100%;resize:vertical}#status{min-height:24px}.kern-details{width:100%}</style><main><div class="top"><span class="kern-preline">KERN · Native components</span><button class="kern-btn kern-btn--secondary" id="theme" aria-pressed="false"><span class="kern-label">Dark appearance</span></button></div><h1 class="kern-heading kern-heading--large">Workshop note</h1><p class="kern-body">Prepare a short note for your next workshop. This demonstration keeps edits only in this page.</p><div class="kern-form-input"><label class="kern-label" for="note">Your note</label><p class="kern-hint" id="hint">No personal information is needed. Nothing is submitted.</p><textarea class="kern-form-input__input" rows="5" id="note" aria-describedby="hint">Discuss accessible ways to collect workshop feedback.</textarea></div><details class="kern-details"><summary class="kern-details__header"><span class="kern-title kern-title--small">What happens to this note?</span></summary><div class="kern-details__body"><p class="kern-body">Edits live in this browser tab. Reloading restores the example text. Discarding clears the current note after confirmation; it does not delete a server record.</p></div></details><div class="actions"><button class="kern-btn kern-btn--primary" id="discard"><span class="kern-label">Discard note</span></button><button class="kern-btn kern-btn--secondary" id="restore"><span class="kern-label">Restore example</span></button></div><p id="status" class="kern-body" role="status"></p><dialog class="kern-dialog" id="confirm" aria-labelledby="confirm-title" aria-describedby="confirm-description"><header class="kern-dialog__header"><h2 class="kern-title kern-title--large" id="confirm-title">Discard this note?</h2></header><section class="kern-dialog__body"><p class="kern-body" id="confirm-description">Your current text will be cleared from this page. Choose Keep note to continue editing.</p></section><footer class="kern-dialog__footer"><button class="kern-btn kern-btn--secondary" id="keep" autofocus><span class="kern-label">Keep note</span></button><button class="kern-btn kern-btn--primary" id="clear"><span class="kern-label">Yes, discard</span></button></footer></dialog></main><script>const byId=id=>document.getElementById(id),note=byId('note'),modal=byId('confirm'),original=note.value;byId('discard').onclick=()=>modal.showModal();byId('keep').onclick=()=>modal.close('keep');byId('clear').onclick=()=>{note.value='';modal.close('discard');byId('status').textContent='Note discarded from this page.'};modal.addEventListener('close',()=>byId('discard').focus());byId('restore').onclick=()=>{note.value=original;byId('status').textContent='Example restored.';note.focus()};byId('theme').onclick=()=>{const dark=document.documentElement.dataset.kernTheme!=='dark';document.documentElement.dataset.kernTheme=dark?'dark':'light';byId('theme').setAttribute('aria-pressed',String(dark))};</script></html>
Configuración del agente del sistema de diseño KERN
Punto de partida para la implementación
No se necesita ningún paso de compilación ni marco de trabajo de interfaz de usuario. Conserva el directorio de fuentes porque su CSS resuelve rutas relativas a archivos WOFF2. El ZIP del ejemplo funcional completo disponible en Fuentes también incluye las dependencias exactas de la vista previa y el documento completo. Descomprímelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/kern.html. No abras los ejemplos basados en módulos mediante file://.
bash
npm install --save-exact @kern-ux/[email protected]
mkdir -p vendor/kern-2.8.2
cp node_modules/@kern-ux/native/dist/kern.min.css vendor/kern-2.8.2/
cp -R node_modules/@kern-ux/native/dist/fonts vendor/kern-2.8.2/
# Save the complete HTML example below as kern.html beside vendor/.
python3 -m http.server 8080
# Open http://localhost:8080/kern.html
Una instrucción para tu proyecto
Instrucción para el agente
Crea el ejemplo local de una nota para un taller con @kern-ux/native 2.8.2 CSS y Fira Sans incluida en el paquete. Combina un área de texto kern-form-input con etiqueta, un elemento nativo Details complementario para desplegar información y un kern-dialog con encabezado, cuerpo y pie etiquetados. Ábrelo con showModal(), aplica autofocus a Conservar nota, permite que Escape cancele sin modificar el texto y borra la nota solo después de elegir Sí, descartar. Al cerrar, devuelve el foco al elemento que abrió el diálogo y ofrece Restaurar ejemplo. Cambia data-kern-theme entre claro y oscuro sin inventar nuevos tokens de paleta. Conserva las opciones de ancho originales de la aplicación y mantén la nota en el dispositivo; no se necesita subirla, guardar un borrador en el servidor ni afirmar que se trata de un servicio gubernamental.
05
Fuentes y alcance del sistema de diseño KERN
Demostración original que usa código de KERN. No implica identidad gubernamental, almacenamiento persistente ni certificación de accesibilidad.
