@dorsk/tsumikit (英语)
Svelte 5 UI组件以平面 CSS变量为样式:31个主题,WCAG AA对比,没有运行时依赖.
每个颜色、空间、半径和大小都是CSS自定义属性:一个主题是一个变量块,一个组件与 style="--btn-bg: …"。交互部分的使用 <dialog>,“Popover API”和“原生形式控制” 设计原则 包裹里有船.
安装
npm i @dorsk/tsumikit
端点 : svelte@^5.0.0。将字体捆绑起来.
快开始
<script lang="ts">
import '@dorsk/tsumikit/styles/app.css';
import { Button, Field, Input, Toaster, toasts } from '@dorsk/tsumikit';
let name = $state('');
</script>
<Field label="Workspace name" for="name">
<Input id="name" bind:value={name} />
</Field>
<Button variant="primary" onclick={() => toasts.ok(`Saved ${name}`)}>Save</Button>
<Toaster />
在 app root 导入样式表一次 。 按下保存显示 ok 祝酒词.
启动新项目
复制 examples/starter 替换 "file:../.." 一个版本。 目录: 实例/启动/README.md。 。 。 .
从0.82或以上升级: (单位:千美元) (和 0.82 (简体中文)) (中文(简体) ).
他们
31个主题,全部被测试为WCAG AA对比. <ThemePicker /> 持续选择 localStorage· ; auto 如下 prefers-color-scheme。 。 。 .
import { theme } from '@dorsk/tsumikit';
theme.register({ id: 'acme', label: 'Acme', mode: 'dark' });
theme.setDefault('acme');
/* brand.css, imported after the kit stylesheet */
[data-theme='acme'] {
--c-bg: #2a2a2a;
--c-accent: #5ac8c8;
/* …the rest of the 19 --c-* palette tokens, shadows and --mach-* pairs */
}
<Button style="--btn-bg: var(--c-violet); --btn-fg: #fff; --btn-radius: 0">Ship</Button>
主题合同, 外观, 样式表和类型 : 医生/医生。每个组件自定义属性和测试编号: 文件/样式.md。 。 。 .
构成部分
层 : tokens.css,原子(唯一的原始原子) <button>编号 :<input>编号 :<select>),分子,布局. 每一层都下至一层(文件/设计) (中文(简体) ). 辅料, aria-* 包括,并扩展到基本内容.
| 层 | 构成部分 |
|---|---|
| 原子 | 文本、标题、按钮、输入、文本区域、选择、切换、检查框、滑动、高格、阿凡达、卡片、徽章、链接、图标 |
| 分子 | 字段, Modal, Popover, 菜单, Tabs, FilterChips, Combobox, 披露, 协议, Toaster, 主题选择器, 绘图器, 分块按钮, 可排序列表 |
| 有机体 | 数据表、 对话面板、 对话页、 过滤器搜索栏 |
| 布局 | AppShell, NavBar, MasterDetail, 集装箱, 堆叠, 集群, 自动Grid |
| 移动和媒体 | TabBar, SwipeRow, PullTo Rerefresh, 寻求滑翔机, 卷滑器 |
| 存储和助手 | theme, (中文(简体) ), toasts, (中文(简体) ), fontScale, (中文(简体) ), autoresize, (中文(简体) ), copyToClipboard |
| 指南 | 封面 |
|---|---|
| 模式 | 加载、 保留最终框、 行动作和选择、 选择控制、 撤销确认、 URL状态、 断点 |
| 布局和大小 | 容器查询、缩放、控制高度、44px被击中区域 |
| 护栏 | tsumikit-lint CLI, dev-mode 警告 |
| 声音 | 选择的 UI 声音 |
| 无障碍 | ARIA模式、平台特征 |
| 设计原则 | 30个原则,每个原则都有检查 |
限制
- 斯维尔特5号.
- 没有捆绑的语法亮点 :
CodeBlock使用一个highlight回调( c)细节) (中文(简体) ). - 内部类名( E)
.btn和data-tsu标记是私有的,在任何释放中都可能改变。 通过已公布的自定义属性样式, 而不是:global()。 。 。 . - 前1.0:小放出可以改变默认. 移民笔记在
docs/。 。 。 .
发展
git clone https://github.com/DorskFR/tsumikit && cd tsumikit
npm install
npm run dev # showcase at the printed URL (+ /shell for the AppShell demo)
npm test # contract tests (node --test)
npm run lint # biome
npm run check # svelte-check
npm run build # prerendered static site in /build
npm run package # publishable library in /dist (+ publint)
虎克 (左钩,通过) prepare生化在承诺, svelte-check 推车。 A 类 v* 标签通过 GitHub 动作信任的发布发布到 npm .