numl

Numl é um framework de UI atômico construído sobre Web Components com geração de CSS em runtime, destinado à construção rápida de interfaces que seguem um sistema de design. O README abre com um aviso proeminente de que o projeto está obsoletado e não é mais mantido; os sucessores sugeridos são tasty, um sistema de estilização CSS-in-JS e DSL para React, e glaze, um gerador de temas de cores OKHSL com resolução de contraste WCAG. O que ele oferece: uma linguagem de design de UI, uma biblioteca de web components acessíveis prontos para uso e um framework CSS de runtime. De acordo com o README, adicionar um único módulo JavaScript a uma página é suficiente, sem a necessidade de bundler ou configuração, após o qual elementos como nu-btn podem ser usados diretamente na marcação. Instalação e uso: o README mostra o carregamento da build do módulo ES via jsDelivr e, em seguida, a escrita de elementos em HTML puro. Outros métodos de instalação estão documentados no handbook. Recursos declarados: uma abordagem tudo-em-um que combina marcação para interfaces responsivas com elementos acessíveis customizáveis; um sistema de geração de cores e vinculações de estilos ao estado (styles-to-state) que, segundo o README, podem reduzir as declarações de estilo em comparação ao CSS puro; esquema escuro automático e modo de alto contraste; design tokens expostos como propriedades customizadas; customização global, em contexto ou diretamente em um elemento; a capacidade de adicionar elementos customizados, atributos de estilo, comportamentos, design tokens e unidades customizadas; e compatibilidade com frameworks como Vue, Angular, React e Svelte, incluindo uso com SSG. Documentação e exemplos: o README aponta para um Storybook, Handbook, Reference e REPL em numl.design. Exemplos listados incluem playgrounds de flex e grid, um conversor de markdown, um slider de antes/depois e um exemplo de validação de formulário de login. Projetos mencionados como construídos com Numl incluem o Cube.js UI Kit e vários sites e storybooks do Numl. Suporte ao navegador: as duas versões mais recentes do Edge, Chrome, Firefox, Safari, iOS Safari e Android. IE11 e versões do Edge pré-Chromium estão explicitamente fora do escopo do projeto. Comandos de desenvolvimento: npm start executa o playground; npm run build compila a biblioteca em dist como um módulo ES6 compatível com tree-shaking; npm run dev recompila em alterações de código-fonte; npm run test executa os testes. O projeto possui licença MIT e segue a especificação all-contributors, e o README convida contribuições e linka uma comunidade no Discord. Uma seção de roadmap menciona itens como uma proposta de sintaxe style2state v2, uma biblioteca React, um gerador de temas, mais documentação e testes, e um UI kit do Figma; como o repositório está obsoletado, esses planos devem ser lidos como históricos.