木筏
平原 HTML 的 Raft 设计系统基础,加上用 Base UI 和 Tailwind CSS v4 构建的 React 组件.
反应
import { Button } from "@botiverse/raft-ui";
@import "tailwindcss";
@import "@botiverse/raft-ui/styles.css";
普通 HTML 语言
链接 dist/foundation.css 直接或复制到您的 HTML 旁边。 它暴露了组件所使用的相同的主题变量,没有React,Tailwind,或者CSS重置.
<link rel="stylesheet" href="./foundation.css" />
<style>
body {
background: var(--layer-canvas);
color: var(--foreground);
}
article {
background: var(--layer-canvas);
}
</style>
打开 class="light" 或者说 class="dark" 根上选择一个模式;省略它以遵循系统模式。 可选 fonts.css 装入网络字体并定义 --heading-font, (中文(简体) ), --sans-font,以及 --mono-font。 。 。 .
styles.css 保留 Tailwind 集成条目并自动导入此基础.
键
@botiverse/raft-ui/tokens.json 手持每个标志 设计 Tokens 社区小组格式,带有光和暗值,用于设计工具和代码生成器. foundation.css 由它产生.
代理技能
npm包中两个版本匹配的代理技能:
raft-ui-guide寻找它的API 以及设计系统的指导.raft-ui-critique用于视觉、互动、无障碍和光/暗审查.
TanStack 意图
在消费项目中允许木筏-取材技术 package.json数字 :
{
"intent": {
"skills": ["@botiverse/raft-ui"]
}
}
安装项目指导,然后检查或装载技能:
pnpm dlx @tanstack/intent@latest install --map
pnpm dlx @tanstack/intent@latest load @botiverse/raft-ui#raft-ui-guide
pnpm dlx @tanstack/intent@latest load @botiverse/raft-ui#raft-ui-critique
其他安装器
软件包使用标准 skills/*/SKILL.md 因此消费者也可以使用工具,例如: skills-npm 或 维塞尔 skills。安装器特定的目的地名称可能添加自己的包名空间.
发展
- 安装依赖性 :
vp install
- 构建库 :
vp pack
升级自 raft-ui
该软件包作为 raft-ui 最高为0.6.0. 要移动项目 :
pnpm add @botiverse/raft-ui
node node_modules/@botiverse/raft-ui/codemods/package-name.mjs src
node node_modules/@botiverse/raft-ui/codemods/token-names.mjs src
pnpm remove raft-ui
第一个命令重写导入, CSS @import 财务报告和审定财务报表 @source 路径和依附关系,并列出任何空 "raft-ui" 字符串( Bundler 化名,路径映射) 可手动改变 。 第二个移动到当前符名;前名一直工作到1.0.
之后用手审查两种密码 token-names.mjs数字 :
- 禁止出名的警卫. 禁止前名(例如:
doesNotMatch(/text-foreground-strong/))也重写了这个名字,所以现在它禁止现在的名字. 将前名放回. - 由零件构建的图案. 诸如
/bg-brutal-[a-z]+/这不是字面符号,所以它保留了前名并停止匹配重写源. 将其扩大为现名( U)palette-, (中文(简体) ),brand-, (中文(简体) ),attention-) (中文(简体) ).
如果软件包依赖于声明 raft-ui 作为对等依赖,同时安装 "raft-ui": "npm:@botiverse/raft-ui@<version>" 因此它决定了同一个副本,而不是捆绑第二个副本.