Analise os tokens semânticos reais de Web Awesome em elementos personalizados nativos, incluindo alterações localizadas de raio e espaçamento, estilo do shadow DOM, comportamento de seleção e validação de entrada.
Elementos personalizados nativos de Web Awesome 3.14.0 e tema padrão, incluídos localmente. · Referência de implementação
02
Web Awesome Referência de design do sistema de design
Tema padrão CSS de Web Awesome 3.14.0, inspecionado no pacote instalado. As entradas de cor abaixo são aliases semânticos; suas referências de paleta são mantidas, em vez de substituídas por equivalentes hexadecimais presumidos. Os exemplos de pixels derivados da escala pressupõem uma raiz de 16px e scale=1.
Web Awesome Elementos personalizados do sistema de design com seu próprio limite de componente
Elementos personalizados com seu próprio limite de componente
Web Awesome oferece elementos personalizados HTML registrados, sem exigir um aplicativo React. Depois de importar wa-input ou wa-select, o elemento pode ser usado em HTML comum e controlado por meio das propriedades e dos eventos documentados. Esta bancada inclui a versão 3.14.0 e usa apenas componentes disponíveis no pacote público.
Os controles visíveis são os elementos personalizados reais, incluindo sua implementação com shadow root. O cabeçalho, as seções e a área de leitura ao redor são criações originais de HTML. Isso torna a demonstração útil para observar quais decisões de estilo atravessam o limite do componente por meio de propriedades personalizadas herdadas e quais pertencem à composição da página.
Web Awesome Preserve os aliases semânticos de cores do sistema de design
Preserve os aliases semânticos de cores
O tema padrão diferencia superfícies elevadas, padrão e rebaixadas; texto normal e discreto; e vários pares de preenchimento da marca e cor do texto sobre esse preenchimento. A área de leitura de tokens usa a superfície rebaixada, a demonstração principal usa a superfície padrão e o pequeno selo combina brand-fill-quiet com brand-on-quiet. Essas funções continuam fazendo sentido quando a aparência muda.
A referência mantém aliases como var(--wa-color-neutral-10), em vez de converter cada função em um valor hexadecimal presumido. A paleta pode mudar enquanto a atribuição semântica continua válida. Ao personalizar uma ação com a cor forte da marca, considere tanto o preenchimento quanto a cor do texto sobre ele. Alterar um sem o outro pode dificultar a leitura do texto do botão.
Web Awesome Altere a escala sem reescrever cada componente do sistema de design
Altere a escala sem reescrever cada componente
O seletor de raio altera --wa-border-radius-scale apenas na demonstração. Na escala um, os raios pequeno, médio e grande padrão correspondem a três, seis e doze pixels com uma raiz de dezesseis pixels. Definir a escala como zero deixa quadrados esses cantos escaláveis; a escala dois os duplica. Os tokens de formato de pílula e círculo são conceitos distintos e não devem ser considerados dependentes desse multiplicador.
O seletor de espaçamento altera --wa-space-scale. O preenchimento, os intervalos e o espaçamento da área de leitura da demonstração usam os tokens oficiais de espaço, então suas proporções mudam em conjunto. Isso não significa que todas as dimensões de todos os componentes sejam escaladas: as dimensões dos controles têm relações de tokens próprias. O painel de edição fica fora do escopo para manter estável a comparação enquanto a demonstração muda.
Escolha Quadrado e examine os cantos do campo, do contêiner e da área de leitura.
Escolha Espaçamento confortável e compare os intervalos da demonstração com o painel de edição, que permanece inalterado.
Restaure os padrões para redefinir os dois multiplicadores e a aparência ao mesmo tempo.
Web Awesome Tokens de tipografia e escolhas originais de títulos do sistema de design
Tokens de tipografia e escolhas originais de títulos
A família padrão para o corpo do texto é ui-sans-serif, system-ui, sans-serif. A família dos títulos usa um alias da família do corpo, enquanto o código usa ui-monospace. O token de altura de linha normal é 1.6; o condensado é 1.2. O token tipográfico médio corresponde a um rem multiplicado por font-size-scale, e os tamanhos maiores usam cálculos arredondados. A tabela mostra essas expressões, sem ocultar suas dependências.
A própria bancada escolhe um título de 34px e um título de seção de 23px, reduzindo o título da página em um breakpoint local de 700px. Essas são regras originais explícitas da página. Os campos nativos mantêm os estilos de rótulo e dica da biblioteca, permitindo comparar uma hierarquia de página personalizada com a tipografia padrão dos componentes.
Web Awesome Valores iniciais, propriedades e eventos de alteração do sistema de design
Valores iniciais, propriedades e eventos de alteração
Cada seletor contém elementos wa-option com valores estáveis. As opções padrão usam selected, de acordo com as orientações atuais do componente para a seleção inicial. As alterações em tempo de execução leem a propriedade value do seletor. Os controles do tema escutam eventos change e atualizam as propriedades personalizadas de CSS; eles não extraem texto dos rótulos das opções renderizadas.
O seletor de região é um campo de demonstração comum e não controla um serviço externo de armazenamento. O valor selecionado é informado na mensagem de ação local. A interface não dá a entender que escolher Europa aloca armazenamento. Essa distinção é importante quando uma demonstração de componente com aparência realista usa termos de produto.
Web Awesome Estilize com tokens e partes documentadas do sistema de design
Estilize com tokens e partes documentadas
Seletores comuns de descendentes não podem acessar livremente o shadow tree de um componente. Este exemplo usa variáveis de tema herdadas para manter coordenados o fundo, o texto e o raio do campo com o restante de HTML. Trata-se de uma forma de estilização compatível, não de uma tentativa de selecionar marcação interna gerada.
Para alterações específicas de um componente, consulte as propriedades personalizadas CSS e as partes CSS documentadas para esse componente. Um seletor global de input não necessariamente altera o input interno de wa-input. Por outro lado, aplicar uma classe de tema ou variável a um ancestral comum pode afetar intencionalmente muitos elementos personalizados descendentes; portanto, escolha o escopo com cuidado.
Atualização, validação e resultados locais do sistema de design Web Awesome
Atualização, validação e resultados locais
Do ponto de vista da página, o registro dos componentes é assíncrono. O exemplo aguarda customElements.whenDefined para as APIs que usa e, em seguida, aguarda as atualizações do select antes de ler os valores iniciais. Isso evita aplicar valores padrão a um elemento que ainda não foi atualizado de uma tag HTML desconhecida para sua classe de componente.
A ação do espaço de trabalho usa setCustomValidity e reportValidity em wa-input. Um nome sem espaços nas extremidades com menos de dois caracteres é rejeitado; um evento input limpa o erro personalizado para que seja possível tentar novamente após a correção. O estado desativado do botão Invite later é nativo do componente. O texto de status informa apenas que um nome foi aplicado localmente, e o código completo não faz nenhuma solicitação de criação ou alocação de espaço de trabalho.
Os rótulos acessíveis são fornecidos por meio de atributos label.
As dicas explicam a restrição do nome antes que ocorra um erro.
A ação desativada continua sem interação, mas ainda indica sua finalidade.
Importe o tema e os componentes usados no sistema de design Web Awesome
Importe o tema e os componentes que você usa
Instale @awesome.me/[email protected] em um aplicativo Vite vanilla e use o main.js fornecido como ponto de entrada. A folha de estilos do tema padrão é obrigatória; o exemplo deliberadamente não carrega o pacote mais amplo de reset nativo ou utilitários, pois o layout da página está definido explicitamente CSS. As importações registram os cinco tipos de componentes usados na marcação.
Os módulos npm dist foram feitos para empacotadores. A distribuição dist-cdn é a alternativa para carregar módulos diretamente no navegador, pois as dependências são empacotadas de outra forma. Não copie uma importação dist para uma tag script simples presumindo que as dependências sem prefixo serão resolvidas. Componentes que precisam de recursos externos exigem a configuração do caminho-base documentada; este exemplo não usa ícones fornecidos pelo usuário e é empacotado para funcionar offline.
Componentes públicos do sistema de design Web Awesome e limites claros do tema
Componentes públicos e limites honestos do tema
O ambiente de trabalho demonstra o tema padrão e os componentes públicos. Alguns componentes Web Awesome, padrões e recursos de design são ofertas Pro, portanto a página não dá a entender que a instalação do pacote público libera todos os itens do catálogo. Antes de tornar um componente uma dependência obrigatória em um sistema de design compartilhado, verifique se ele está disponível.
Um tema de produto reutilizável deve documentar quais variáveis são alteradas, onde são aplicadas e como os dois modos de aparência são verificados. O ambiente de trabalho interativo é um pequeno exemplo desse processo: é possível inspecionar as variáveis exatas que foram alteradas e comparar os componentes nativos resultantes, em vez de depender de uma imagem de paleta sem conexão com o tema.
Registra componentes, aguarda a atualização, altera propriedades personalizadas com escopo e aplica a validação 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()});
Crie um projeto Vite vanilla e use o main.js completo e o style.css mostrados acima.
04
Configuração de agente do sistema de design Web Awesome
Ponto de partida para implementação
Os exemplos completos de main.js, CSS e body reproduzem o ambiente de trabalho em um empacotador. A demonstração offline é um pacote esbuild com o tema CSS incorporado. Nenhum provedor React é necessário.
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.
Um prompt para seu projeto
Prompt para agente de IA
Use o ambiente de trabalho de tokens com escopo Web Awesome 3.14.0 e registre os elementos wa-select, wa-option, wa-input, wa-button e wa-switch fornecidos. Aguarde a definição do componente e updateComplete antes de ler as seleções iniciais. Aplique --wa-border-radius-scale e --wa-space-scale somente à região de demonstração e alterne sua classe wa-light/wa-dark sem alterar o conteúdo não relacionado da página. Mantenha a leitura visível dos tokens sincronizada com os controles nativos e preserve os rótulos. Trate o ambiente de trabalho como uma ferramenta de inspeção, não como uma interface de gerenciamento de dispositivos.
05
Fontes e escopo do sistema de design Web Awesome
Componentes públicos e tema padrão do Web Awesome 3.14.0. As escolhas de layout são originais; a aplicação local do nome não cria espaços de trabalho nem armazenamento.
