Sistema de diseño de Codex.

Rutas de solo CSS y Vue del sistema de diseño Codex

Selecciona la implementación que necesitas

Codex proporciona componentes Vue y estructuras de componentes documentadas de solo CSS. El ejemplo interactivo usa esta última: el control de búsqueda utiliza las clases exactas del contenedor, el campo de texto y el botón final que documenta Codex, junto con un script local de la aplicación que filtra tres resúmenes originales de artículos. El ejemplo independiente de Vue muestra las importaciones equivalentes del paquete.

Una búsqueda de solo CSS no se convierte en un cuadro combinado predictivo solo porque se le parezca. Este ejemplo envía una consulta y muestra una lista de resultados. No utiliza el patrón ARIA de listbox ni afirma implementar TypeaheadSearch.

Consulta la especificación complementaria

Tipografía del sistema de diseño Codex para la lectura

Mantén diferenciadas las funciones del contenido y los controles

El token font-family-base se resuelve como sans-serif; la pila system-sans disponible cumple una función distinta. Codex también ofrece una función serif heading-main basada en Linux Libertine, con Georgia, Times y otras fuentes alternativas. La vista previa utiliza un encabezado de artículo serif y controles sans-serif, sin descargar fuentes.

La referencia siguiente distingue font-size-medium, de 1rem, de line-height-medium, de 1.625rem. El valor sin unidad line-height-content está pensado para contenido generado por los usuarios; no es una instrucción general para sustituir la altura de línea interna de todos los componentes. Deja que los componentes nativos de entrada y botón de CSS conserven sus propias métricas de control.

Consulta la especificación complementaria

Espaciado y puntos de quiebre del sistema de diseño Codex

Usa la escala con nombre y sus excepciones

spacing-100 de Codex equivale a 16px, spacing-150 a 24px y spacing-200 a 32px. La escala también incluye excepciones explícitas: spacing-30 equivale a 5px y sirve para el relleno vertical de los controles con la altura predeterminada de 32px. Redondear todos los espacios a una cuadrícula de 8px eliminaría una decisión de diseño documentada para un componente.

El ejemplo muestra la lista de resultados a todo el ancho por debajo de 640px, según el límite documentado para tabletas. La aplicación establece un ancho máximo de lectura de 56rem. El punto de quiebre para escritorio es 1120px y el de escritorio amplio, 1680px; estos umbrales describen categorías de ventanas gráficas, no una cuadrícula automática que se proporcione a todas las aplicaciones.

Consulta la especificación complementaria

Colores y funciones de acción del sistema de diseño Codex

Progresivo no es un adorno azul genérico

Codex distingue la acción del peso del botón. Una acción progresiva hace avanzar un proceso, mientras que el peso principal identifica la acción más importante de su vista. Un botón normal neutro es adecuado para buscar en este índice local; un control discreto puede borrarlo sin competir con los resultados.

CSS compilado incluye colores de reserva para sus propiedades personalizadas, entre ellos el color de texto base #202122 y el color progresivo #36c. La vista previa utiliza el componente nativo CSS para estos estados. El fondo pálido del panel de resultados forma parte del diseño de la aplicación, no es un token de estado nuevo inventado para Codex.

Consulta la especificación complementaria

Anatomía de SearchInput del sistema de diseño Codex

Une el campo de entrada y el botón de forma intencionada

La estructura de solo CSS requiere .cdx-search-input--has-end-button en el elemento raíz, un .cdx-search-input__input-wrapper, un .cdx-text-input con su modificador de icono inicial y un botón con .cdx-search-input__end-button. Si se omiten los contenedores, se pierde la geometría de los elementos unidos y la alineación del icono.

La etiqueta visible indica el ámbito de búsqueda. El elemento span del icono es decorativo y está oculto para las API de accesibilidad. El formulario gestiona la tecla Enter y la activación del botón mediante un único controlador de envío; el recuento se anuncia en una región de estado cortés después de actualizar los resultados. Si el campo está vacío, se restauran todos los ejemplos locales.

• Usa SearchInput para encontrar contenido en una página.
• Usa TypeaheadSearch cuando necesites sugerencias predictivas de navegación.
• Usa Lookup para elegir una opción como valor de formulario.

Consulta la especificación complementaria

Resultados y lectura detallada del sistema de diseño Codex

Ayuda al lector a conservar el punto de lectura

Cada resultado tiene un encabezado descriptivo, una breve descripción original y un botón que abre el panel de lectura local. El panel es una composición de la aplicación, no un Dialog de Codex: permanece en el flujo normal del documento, no tiene un fondo modal y no atrapa el foco.

Al abrir un ejemplo, el foco pasa al encabezado del panel. Al cerrarlo, el foco vuelve al botón que lo abrió. Si se vuelve a buscar, se cierra el detalle anterior y se recalcula el recuento de resultados, para que un artículo obsoleto no parezca formar parte de una consulta nueva. Si no hay coincidencias, se muestra un texto explicativo y una acción explícita para borrar la búsqueda.

Consulta la especificación complementaria

Dirección y comportamiento de entrada del sistema de diseño Codex

Ten en cuenta idiomas distintos del inglés

La documentación de los componentes incluye ejemplos de izquierda a derecha y de derecha a izquierda. Codex se utiliza en un ecosistema de conocimiento multilingüe, por lo que el diseño de la aplicación debe usar espaciado lógico en línea y en bloque, en lugar de dar por hecho que todos los iconos y acciones de lectura están a la izquierda. El diseño personalizado del ejemplo utiliza margin-inline y padding-inline cuando importa la dirección.

La búsqueda se ejecuta aquí solo al enviar el formulario. Así se evita tratar el texto intermedio de composición de un IME como una consulta terminada. Un sistema de autocompletado de producción requeriría gestionar la composición, cancelar operaciones asíncronas y usar un modelo de interacción de menú correcto; el ejemplo local de solo CSS no afirma ofrecer ninguna de estas funciones.

Consulta la especificación complementaria

Integrar y ampliar el sistema de diseño Codex

Fija la versión de la biblioteca y gestiona la lógica de resultados

El paquete verificado es @wikimedia/codex 2.7.0 y utiliza dist/codex.style.css como archivo de estilos. La demostración de solo CSS no necesita el entorno de ejecución de Vue, porque todos sus controles son componentes nativos de HTML y un pequeño script local gestiona el filtrado y el estado del panel de lectura. La variante Vue importa CdxSearchInput y CdxButton cuando resulta útil gestionar el estado mediante el framework.

El paquete de código está sujeto a GPL-2.0-or-later y la licencia se incluye con los recursos locales. Los ejemplos no copian la identidad ni el contenido de artículos de Wikipedia. Antes de conectar un endpoint de búsqueda real, añade una gestión independiente de los fallos de red, la carga y las respuestas obsoletas, en lugar de cambiar la etiqueta del estado local sin resultados.

1. Instala el paquete con la versión fijada o copia su hoja de estilos junto con la licencia.
2. Representa la estructura documentada basada únicamente en CSS o usa los componentes de Vue exportados.
3. Añade la lógica de consulta y resultados en la aplicación y conserva la semántica de búsqueda.
4. Comprueba el foco del teclado y las disposiciones estrechas con contenido traducido real.

Consulta la especificación complementaria

Ejemplos de componentes del sistema de diseño Codex

<form id="article-search" role="search">
  <label for="query">Find an example article</label>
  <div class="cdx-search-input cdx-search-input--has-end-button">
    <div class="cdx-search-input__input-wrapper">
      <div class="cdx-text-input cdx-text-input--has-start-icon">
        <input id="query" class="cdx-text-input__input" type="search">
        <span class="cdx-text-input__icon cdx-text-input__start-icon" aria-hidden="true"></span>
      </div>
    </div>
    <button type="submit" class="cdx-button cdx-search-input__end-button">Search</button>
  </div>
</form>
<p id="result-count" role="status"></p>

<script setup>
import { ref } from 'vue';
import { CdxSearchInput, CdxButton } from '@wikimedia/codex';
import '@wikimedia/codex/dist/codex.style.css';
const query = ref('');
const submitted = ref('');
function search() { submitted.value = String(query.value).trim(); }
</script>
<template>
  <form role="search" @submit.prevent="search">
    <CdxSearchInput v-model="query" aria-label="Find an example article" />
    <CdxButton action="progressive" weight="primary" type="submit">Search</CdxButton>
  </form>
  <p role="status">Submitted query: {{ submitted || 'All examples' }}</p>
</template>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Codex knowledge search</title><link rel="stylesheet" href="vendor/codex-2.7.0/codex.style.css"><style>*{box-sizing:border-box}body{font:16px/1.625 sans-serif;color:#202122;margin:0}main{max-width:56rem;margin:auto;padding:32px 24px}h1{font:normal 32px/1.3 Georgia,serif;border-bottom:1px solid #a2a9b1;padding-bottom:12px}h2{font-size:20px;margin:0 0 8px}label{display:block;font-weight:700;margin-bottom:8px}.top{font-size:14px;color:#54595d}.result{padding:24px 0;border-bottom:1px solid #c8ccd1}.result p{margin:8px 0 16px}.tools{display:flex;align-items:center;gap:16px;justify-content:space-between}.reading{padding:24px;background:#f8f9fa;border:1px solid #a2a9b1;margin-block:24px}.reading h2:focus{outline:2px solid #36c;outline-offset:4px}small{display:block;margin-top:32px;color:#54595d;font-size:14px}[hidden]{display:none!important}@media(max-width:639px){main{padding:24px 16px}.tools{align-items:stretch;flex-direction:column}.result .cdx-button{width:100%}}
</style><main><p class="top">Independent knowledge index · Codex CSS-only</p><h1>Explore the example collection</h1><p>Find an original topic summary and open its reading panel. This small index runs entirely in your browser.</p><form id="article-search" role="search">
  <label for="query">Find an example article</label>
  <div class="cdx-search-input cdx-search-input--has-end-button">
    <div class="cdx-search-input__input-wrapper">
      <div class="cdx-text-input cdx-text-input--has-start-icon">
        <input id="query" class="cdx-text-input__input" type="search">
        <span class="cdx-text-input__icon cdx-text-input__start-icon" aria-hidden="true"></span>
      </div>
    </div>
    <button type="submit" class="cdx-button cdx-search-input__end-button">Search</button>
  </div>
</form>
<p id="result-count" role="status"></p><div class="tools"><p id="empty" hidden>No matching topics. Try “river” or clear the search.</p><button type="button" class="cdx-button cdx-button--weight-quiet" id="clear">Clear search</button></div><div id="results"></div><section class="reading" id="reading" hidden><h2 id="reading-title" tabindex="-1"></h2><p id="reading-text"></p><button type="button" class="cdx-button" id="close">Close reading panel</button></section><small>Original example content. Wikimedia Codex 2.7.0 controls; application-owned results and inline panel. No external search request.</small></main><script>
const data=[{title:'River observation notes',text:'A field notebook can record water level, weather and observation time together. Repeated observations from the same location help readers compare conditions without confusing a new measurement with a changed method.',summary:'Organising repeated observations at a river station.'},{title:'Community archive descriptions',text:'An archive description records what an item is, when it was created and how it relates to other items. A clear description distinguishes an original document from a later copy and identifies uncertain dates without hiding that uncertainty.',summary:'Describing original documents and their context.'},{title:'Garden seed collection',text:'A seed record can distinguish the plant name, collection date and storage method. Keeping those attributes separate makes it easier to compare batches, while a free-text note preserves observations that do not fit a controlled field.',summary:'Keeping plant, date and storage information readable.'}];let opener;const results=document.querySelector('#results'),query=document.querySelector('#query'),reading=document.querySelector('#reading'),count=document.querySelector('#result-count');function render(){reading.hidden=true;results.replaceChildren();const found=data.filter(d=>(d.title+' '+d.summary).toLowerCase().includes(query.value.trim().toLowerCase()));count.textContent=found.length+' example topics';document.querySelector('#empty').hidden=found.length>0;for(const d of found){let a=document.createElement('article');a.className='result';let h=document.createElement('h2');h.textContent=d.title;let p=document.createElement('p');p.textContent=d.summary;let b=document.createElement('button');b.type='button';b.className='cdx-button';b.textContent='Read '+d.title;b.onclick=()=>{opener=b;document.querySelector('#reading-title').textContent=d.title;document.querySelector('#reading-text').textContent=d.text;reading.hidden=false;document.querySelector('#reading-title').focus()};a.append(h,p,b);results.append(a)}}document.querySelector('form').onsubmit=e=>{e.preventDefault();render()};document.querySelector('#clear').onclick=()=>{query.value='';render();query.focus()};document.querySelector('#close').onclick=()=>{reading.hidden=true;opener?.focus()};render();
</script></html>