Examina los tokens semánticos reales de Web Awesome en elementos personalizados nativos, incluidos los cambios de radio y espaciado con alcance definido, el estilo de shadow-DOM, el comportamiento de selección y la validación de entradas.
Elementos personalizados nativos de Web Awesome 3.14.0 y tema predeterminado, incluidos localmente. · Referencia de implementación
02
Referencia de diseño del sistema de diseño de Web Awesome
Tema predeterminado de Web Awesome 3.14.0 CSS, inspeccionado en el paquete instalado. Las entradas de color que aparecen a continuación son alias semánticos; se conservan sus referencias a la paleta en lugar de sustituirlas por valores hexadecimales aproximados. Los ejemplos de píxeles derivados de la escala presuponen una raíz de 16px y scale=1.
Elementos personalizados con su propio límite de componente del sistema de diseño de Web Awesome
Elementos personalizados con su propio límite de componente
Web Awesome proporciona elementos personalizados registrados de HTML, en lugar de requerir una aplicación React. Una vez importados wa-input o wa-select, se pueden incluir en HTML convencional y controlar mediante sus propiedades y eventos documentados. Este banco de trabajo incluye la versión 3.14.0 y solo utiliza componentes disponibles en el paquete público.
Los controles visibles son los elementos personalizados reales, incluida su implementación en el shadow root. El encabezado, las secciones y la lectura que los rodean son originales de HTML. Esto hace que la muestra resulte útil para observar qué decisiones de estilo atraviesan los límites del componente mediante propiedades personalizadas heredadas y cuáles pertenecen a la composición de la página.
Sistema de diseño de Web Awesome: conserva los alias de color semánticos
Conserva intactos los alias semánticos de color
El tema predeterminado distingue entre superficies elevadas, predeterminadas y rebajadas; texto normal y discreto; y varios pares de color de relleno y color de contenido de marca. La lectura de tokens usa la superficie rebajada, la muestra principal usa la superficie predeterminada y la pequeña insignia combina brand-fill-quiet con brand-on-quiet. Estas funciones siguen teniendo sentido cuando cambia la apariencia.
La referencia conserva alias como var(--wa-color-neutral-10) en lugar de traducir cada función a un valor hexadecimal supuesto. La paleta puede cambiar sin que deje de ser válida la asignación semántica. Si personalizas una acción de marca intensa, ten en cuenta tanto el relleno como el color de contenido correspondiente. Cambiar uno sin el otro puede dificultar la lectura del texto del botón.
Sistema de diseño de Web Awesome: cambia la escala sin reescribir cada componente
Cambia la escala sin reescribir cada componente
El selector de radio cambia --wa-border-radius-scale solo en la muestra. Con la escala en uno, los radios pequeño, mediano y grande predeterminados se convierten en tres, seis y doce píxeles con un tamaño de fuente raíz de dieciséis píxeles. Al establecer la escala en cero, esas esquinas escalables pasan a ser cuadradas; con la escala en dos, se duplican. Los tokens de forma de píldora y círculo son conceptos independientes y no se debe suponer que siguen este multiplicador.
El selector de espaciado cambia --wa-space-scale. El relleno, los espacios y el espaciado de la lectura de la muestra usan los tokens oficiales de espacio, por lo que sus proporciones cambian en conjunto. Esto no significa que escalen todas las dimensiones de todos los componentes: el tamaño de los controles de los componentes tiene sus propias relaciones entre tokens. El panel de edición queda fuera de este ámbito, para que la comparación sea estable mientras cambia la muestra.
Selecciona «Cuadrado» y observa las esquinas del campo, el contenedor y la lectura.
Selecciona el espaciado «Relajado» y compara los espacios de la muestra con los del panel de edición, que no cambian.
Restablece los valores predeterminados para restaurar a la vez ambos multiplicadores y la apariencia.
Sistema de diseño de Web Awesome: tokens tipográficos y elecciones originales para los encabezados
Tokens tipográficos y elecciones originales para los encabezados
La familia predeterminada del texto es ui-sans-serif, system-ui, sans-serif. La familia de los encabezados remite a la familia del texto, mientras que el código usa ui-monospace. El token de interlineado normal es 1.6; el condensado, 1.2. El token de tamaño de texto mediano equivale a un rem multiplicado por font-size-scale, y los tamaños mayores usan cálculos redondeados. La tabla muestra esas expresiones en lugar de ocultar sus dependencias.
El propio banco de trabajo usa encabezados de 34px y encabezados de sección de 23px; el encabezado de página se reduce en un punto de corte local de 700px. Estas son reglas originales de la página, indicadas expresamente. Los campos nativos conservan los estilos de etiqueta y texto de ayuda de la biblioteca, para que el usuario pueda comparar una jerarquía de página personalizada con la tipografía predeterminada de los componentes.
Sistema de diseño de Web Awesome: valores iniciales, propiedades y eventos de cambio
Valores iniciales, propiedades y eventos de cambio
Cada selector contiene elementos wa-option con valores estables. Las opciones predeterminadas usan selected, de acuerdo con las pautas actuales de los componentes para la selección inicial. Los cambios durante la ejecución leen la propiedad value del selector. Los controles del tema escuchan los eventos change y actualizan las propiedades personalizadas de CSS; no analizan el texto de las etiquetas de opción renderizadas.
El selector de región es un campo de muestra normal y no controla ningún servicio de almacenamiento externo. El valor seleccionado se muestra en el mensaje de acción local. La interfaz evita dar a entender que seleccionar Europa asigna almacenamiento. Esta distinción es importante cuando una demostración de componente con aspecto realista utiliza vocabulario de producto.
Sistema de diseño de Web Awesome: aplica estilos mediante tokens y partes documentadas
Aplica estilos mediante tokens y partes documentadas
Los selectores de descendientes convencionales no pueden acceder libremente al interior del árbol shadow de un componente. Este ejemplo usa variables de tema heredadas para coordinar el fondo, el texto y el radio del campo con el resto de HTML. Es una forma de aplicar estilos compatible, no un intento de seleccionar el marcado interno generado.
Para realizar cambios específicos de un componente, consulta las propiedades personalizadas y las partes de CSS documentadas para ese componente. Un selector global input no necesariamente modificará el input interno de wa-input. En cambio, una clase de tema o una variable en un ancestro común puede afectar intencionadamente a muchos elementos personalizados descendientes, por lo que hay que elegir el ámbito con cuidado.
Sistema de diseño de Web Awesome: actualizaciones, validación y resultados locales
Actualización, validación y resultados locales
Desde la perspectiva de la página, el registro de componentes es asíncrono. El ejemplo espera a que customElements.whenDefined confirme la disponibilidad de las API que utiliza y, a continuación, espera a que se actualicen los selectores antes de leer sus valores iniciales. Así se evita aplicar valores predeterminados a un elemento que todavía no se ha actualizado de una etiqueta HTML desconocida a su clase de componente.
La acción del espacio de trabajo usa setCustomValidity y reportValidity en wa-input. Se rechaza todo nombre sin espacios en blanco al principio ni al final que tenga menos de dos caracteres; un evento input borra el error personalizado para que se pueda volver a intentar tras corregirlo. El botón deshabilitado «Invitar más tarde» usa el estado deshabilitado nativo del componente. El texto de estado solo informa de un nombre aplicado localmente, y el código completo no incluye ninguna solicitud para crear espacios de trabajo ni asignar recursos.
Las etiquetas se proporcionan mediante atributos label.
El texto de ayuda explica la restricción del nombre antes de que se produzca un error.
La acción deshabilitada sigue mostrando su propósito, pero no es interactiva.
Sistema de diseño de Web Awesome: importa el tema y los componentes que utilizas
Importa el tema y los componentes que uses
Instala @awesome.me/[email protected] en una aplicación Vite vanilla y usa el main.js proporcionado como punto de entrada. Se requiere la hoja de estilos del tema predeterminado; el ejemplo omite deliberadamente el restablecimiento nativo general y el paquete de utilidades, ya que la disposición de la página está definida explícitamente CSS. Las importaciones registran los cinco tipos de componentes usados en el marcado.
Los módulos npm dist están pensados para empaquetadores. La distribución dist-cdn es la alternativa para cargar módulos directamente en el navegador, ya que las dependencias están empaquetadas de otra manera. No copies una importación de dist en una etiqueta script normal suponiendo que se resolverán las dependencias sin especificar. Los componentes que necesitan recursos externos requieren la configuración documentada de la ruta base; este ejemplo no utiliza recursos de iconos proporcionados por el usuario y está empaquetado para funcionar sin conexión.
Componentes públicos del sistema de diseño Web Awesome y límites claros del tema
Componentes públicos y límites claros del tema
El entorno de pruebas muestra el tema predeterminado y los componentes públicos. Algunos componentes, patrones y recursos de diseño de Web Awesome son ofertas Pro, por lo que la página no da a entender que instalar el paquete público permita acceder a todos los elementos del catálogo. Antes de convertir un componente en una dependencia obligatoria de un sistema de diseño compartido, comprueba que esté disponible.
Un tema de producto reutilizable debe documentar qué variables se modifican, dónde se aplican y cómo se comprueban ambos modos de apariencia. El entorno de pruebas interactivo es un pequeño ejemplo de ese proceso: permite consultar las variables modificadas exactas y comparar los componentes nativos resultantes, en lugar de depender de una imagen de paleta sin relación directa.
Las opciones iniciales se establecen con selected en wa-option.
Solo se usan componentes gratuitos.
Importaciones completas y controles de tokens
Registra los componentes, espera a que se actualicen, modifica las propiedades personalizadas con ámbito y aplica la validez local.
javascript
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
import './style.css';
const $=id=>document.getElementById(id);function update(){const s=$('specimen');s.style.setProperty('--wa-border-radius-scale',$('radius').value);s.style.setProperty('--wa-space-scale',$('spacing').value);s.classList.toggle('wa-dark',$('dark').checked);s.classList.toggle('wa-light',!$('dark').checked);$('values').textContent=`--wa-border-radius-scale: ${$('radius').value};\n--wa-space-scale: ${$('spacing').value};`;}
Promise.all(['wa-select','wa-switch','wa-input','wa-button'].map(x=>customElements.whenDefined(x))).then(async()=>{await Promise.all([...document.querySelectorAll('wa-select')].map(e=>e.updateComplete));for(const id of ['radius','spacing','dark'])$(id).addEventListener('change',update);$('reset').addEventListener('click',()=>{$('radius').value='1';$('spacing').value='1';$('dark').checked=false;update()});$('create').addEventListener('click',()=>{const field=$('workspace');field.setCustomValidity(field.value.trim().length<2?'Use at least two non-space characters.':'');if(!field.reportValidity())return;$('result').textContent=`Applied “${field.value.trim()}” in the ${$('region').value} specimen. No workspace or storage allocation was created.`});$('workspace').addEventListener('input',()=>$('workspace').setCustomValidity(''));update()});
Crea un proyecto Vite vanilla y usa el main.js y el style.css completos que se muestran arriba.
04
Configuración del agente del sistema de diseño Web Awesome
Punto de partida para la implementación
El main.js completo, CSS y los ejemplos de body reproducen el entorno de pruebas en un empaquetador. La demostración sin conexión es un paquete de esbuild con el tema CSS integrado. No se requiere ningún proveedor de React.
javascript
// Create a Vite vanilla project, then install:
// npm install @awesome.me/[email protected]
// index.html: paste the complete workbench markup in body,
// then add <script type="module" src="/main.js"></script>.
// main.js: use the complete imports and token-controls example above.
// style.css: use the complete scoped specimen CSS above.
// Minimum registration pattern used by this example:
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
// Do not duplicate these imports if using the complete main.js above.
Una instrucción para tu proyecto
Instrucción para el agente
Usa el entorno de pruebas de tokens con ámbito 3.14.0 de Web Awesome y registra los elementos wa-select, wa-option, wa-input, wa-button y wa-switch proporcionados. Espera a que se definan los componentes y a que se complete updateComplete antes de leer las selecciones iniciales. Aplica --wa-border-radius-scale y --wa-space-scale solo a la región de muestra, y alterna su clase wa-light/wa-dark sin modificar el contenido no relacionado de la página. Mantén sincronizada la lectura visible de los tokens con los controles nativos y conserva las etiquetas. Considera el entorno de pruebas una herramienta de inspección, no una interfaz de gestión de dispositivos.
05
Fuentes y alcance del sistema de diseño Web Awesome
Componentes públicos y tema predeterminado de Web Awesome 3.14.0. Las decisiones sobre la disposición son originales; la aplicación local del nombre no crea ningún espacio de trabajo ni almacenamiento.
