KISS Architecture 的 UI 层 — 暗黑瑞士国际主义风格的 Web Components 组件库。
// deno.json
{
"imports": {
"@kissjs/ui": "jsr:@kissjs/ui@^0.1.4"
}
}@kissjs/ui v0.1.4+ 提供以下 Web Components：
按钮组件，支持 variants (default, primary, ghost) 和 sizes (sm, md, lg)
卡片组件，支持 header/footer slots 和 variants (default, elevated, borderless)
输入组件，支持 label、error states 和 validation
代码块组件，带复制按钮和语法高亮
布局组件，包含 header、sidebar、footer 和移动端 hamburger 菜单
// app/routes/index.ts
import { html, LitElement } from 'lit';
import '@kissjs/ui/kiss-button';
import '@kissjs/ui/kiss-card';
export class MyPage extends LitElement {
render() {
return html`
<kiss-button variant="primary">Click me</kiss-button>
<kiss-card>
<h3 slot="header">Title</h3>
<p>Card content</p>
</kiss-card>
`;
}
}组件使用 CSS 自定义属性作为设计令牌，可通过 @kissjs/ui/design-tokens 导入：
import '@kissjs/ui/design-tokens';
// 可用的 CSS 自定义属性：
// --kiss-bg-base, --kiss-text-primary, --kiss-border-base
// --kiss-spacing-sm, --kiss-spacing-md, --kiss-spacing-lg
// --kiss-font-sans, --kiss-font-mono
// --kiss-radius-sm, --kiss-radius-md@kissjs/ui 遵循 KISS Architecture 四约束：
所有组件使用 static properties 而非 @property 装饰器，确保 Vite SSR 兼容。详见 SSG 文档。
历史说明 — v0.1.0-0.1.3 是 WebAwesome CDN loader。v0.1.4+ 是自有 Web Components 组件库。如需 WebAwesome，改用 inject 选项手动注入 CDN。