numl

Numl 是一个基于 Web Components 并具有运行时 CSS 生成功能的原子化 UI 框架，旨在快速构建遵循设计系统的界面。其 README 中显著提示该项目已弃用且不再维护；建议的替代方案包括 tasty（一个用于 React 的 CSS-in-JS 样式系统和 DSL）以及 glaze（一个具有 WCAG 对比度解决方案的 OKHSL 颜色主题生成器）。 它提供的内容包括：一种 UI 设计语言、一个开箱即用的无障碍 Web 组件库以及一个运行时 CSS 框架。根据 README，在页面中添加一个 JavaScript 模块即可，无需构建工具（bundler）且无需配置，之后即可在标记中直接使用 nu-btn 等元素。 安装与使用：README 展示了如何从 jsDelivr 加载 ES 模块构建版本，然后在纯 HTML 中编写元素。其他安装方法在手册（handbook）中有详细记录。 声明的功能：一种将响应式界面标记与可自定义的无障碍元素相结合的全方位方法；一个颜色生成系统和样式到状态（styles-to-state）的绑定（README 指出，与纯 CSS 相比，这可以减少样式声明）；自动深色模式和高对比度模式；以自定义属性形式公开的设计令牌（design tokens）；可在全局、上下文中或直接在元素上进行自定义；能够添加自定义元素、样式属性、行为、设计令牌和自定义单位；以及与 Vue、Angular、React 和 Svelte 等框架的兼容性，包括在 SSG 中的使用。 文档与示例：README 指向了 numl.design 上的 Storybook、Handbook、Reference 和 REPL。列出的示例包括 flex 和 grid 操场、markdown 转换器、前后对比滑块以及登录表单验证示例。提到使用 Numl 构建的项目包括 Cube.js UI Kit 以及若干 Numl 网站和 storybooks。 浏览器支持：支持 Edge、Chrome、Firefox、Safari、iOS Safari 和 Android 的最新两个版本。IE11 和 pre-Chromium Edge 明确不在项目范围之内。 开发命令：npm start 运行操场；npm run build 将库构建到 dist 文件夹，作为一个支持 ES6 tree-shaking 的模块；npm run dev 在源码更改时重新构建；npm run test 运行测试。 该项目采用 MIT 许可证并遵循 all-contributors 规范，README 邀请贡献并链接到了 Discord 社区。路线图部分提到了 v2 style2state 语法提案、React 库、主题生成器、更多文档和测试以及 Figma UI kit 等项目；由于该仓库已弃用，这些计划应被视为历史记录。