@ codelitdev/ 设计系统
共享的指使,Tailwind预设,以及CourseLit,MediaLit,SendLit和FrontLit的回放原始.
这个 符号 + 尾风预置是产品; 反应组件为 参考/倒置(见第5步)。 消费应用通常只使用 CSS 和 预设并保留自己的阴影组件.
安装
发布至npm作为公共软件包. 目前放行是预放行
下划线 alpha dis.
[尖叫声]
latest目前也点数0.1.0-alpha.0。 。 。 . npm 总是设置latest一个软件包的首次发布,无论--tag这是 直到一个真正稳定的版本被剪去,在何时发布 移动latest自动前进。 在此之前, 总是把准确的 版本 - 别bun add @codelitdev/design-system赤裸的,绝不然 使用护栏/护栏范围(^0.1.0-alpha.0仍然决心 预放,至少是明确的——但赤裸的安装没有版本 默默地表示"无论latest是",现在就是这个α。".
bun add @codelitdev/[email protected]
平台示例将软件包消耗为 workspace:*. 产品储存库
使用准确的出版版本.
在阴影应用程序中使用
- 一次导入符号层, 如 :
app/globals.css数字 :
@import "@codelitdev/design-system/styles.css";
替换默认阴影 :root编号 :.dark 块 —— 变量名称匹配, 因此现有的shadcn 组件不需要更改代码 .
- 扩展您的尾风配置 :
// tailwind.config.js
const codelitPreset = require("@codelitdev/design-system/tailwind-preset");
module.exports = {
presets: [codelitPreset],
content: [...],
};
- 产品范围
<html>元素( 非)<body>:
<html data-product="sendlit"> {/* courselit | medialit | sendlit | frontlit, omit for CodeLit amber */}
[大 打开
data-product打开<html>没有<body>。产品范围仅覆盖--primary编号 :--ring; 任何代名词:root参考文献--primary(例如:shadcn's--sidebar-primary: var(--primary)决定var()地点 声明元素。如果重置时<body>儿童人数:root),这些:root化名会被冻到琥珀底部 永远不要捡起产品口音 - 直接时bg-primary公用事业仍然变绿色,造成混乱分化.
-
字体: 通过 Hanken Grotesk + Spline Sans Mono 装入
next/font/google(或您框架的字体加载器),映射到--font-sans编号 :--font-mono。 。 。 . -
部件——从阴影登记册安装 (见 构成部分 页:1 这些是真实的 shadcn/Radix 组件 样式到设计系统, 所以您的应用程序的按钮/ 节点/ 卡 为: dS's——没有手接. 简单反应
src/components/类别(components.css仅作为视觉参考. -
Logos :
@codelitdev/design-system/assets/logo-<product>.svg。 。 。 . -
装入器(Laugers) ——取自"logo"自旋器,而非静态资产:
import { Loader } from "@codelitdev/design-system";
<Loader product="sendlit" size={32} />
显示在 currentColor,与图标组件相同——将其(或祖先)包裹入
任何设置的颜色你想要的,例如. className="text-primary" 对于产品口音.
部件(阴影登记册)
设计系统将部件作为 阴影登记册 所以每个产品
安装 不变 样式组件(按钮、徽章、牌等,.)通过阴影
CLI – 将所有四个应用程序都保留在一个组件层上,而不是每个组件层重刻其
拥有的。 它们是标准的Shadcn/Radix组件;它们从DS取出它们的外观
标志,所以确保 @codelitdev/design-system/styles.css 输入(以上).
在您的应用程序中添加注册名称空间 components.json数字 :
{
"registries": {
"@codelit": "https://raw.githubusercontent.com/codelitdev/platform/main/packages/design-system/public/r/{name}.json"
}
}
然后像其它阴影组件一样安装组件 :
bunx shadcn@latest add @codelit/button @codelit/badge @codelit/card
或者直接通过 URL 安装单个组件, 没有配置 :
bunx shadcn@latest add https://raw.githubusercontent.com/codelitdev/platform/main/packages/design-system/public/r/button.json
可用组件
| 构成部分 | 页:1 |
|---|---|
button | primary 编号 : secondary 编号 : outline 编号 : ghost 编号 : soft 编号 : destructive· ; sm md lg (30/36/42px) (中文(简体) ) |
icon-button | 仅限平方图标; ghost 编号 : outline· ; sm md |
badge | default 编号 : neutral 编号 : success 编号 : warning 编号 : destructive 编号 : outline· ; dot 道具 |
card | + 键 CardHeader CardTitle CardDescription CardContent CardFooter |
input | 洗铜器的焦点戒指; aria-invalid - 破坏性 |
textarea | 多行形式 input |
label | 13px 半粗体字段标签 |
checkbox | 18px, 5px半径, 检查时重音填充 |
radio-group | + 键 RadioGroupItem |
switch | 36x21 轨道, 打开时重音 |
select | 触发匹配 input; 符号式弹出 |
tabs | 已分割; 主动触发升起到卡片表面 |
dialog | 半径为 16px; 完整的 Radix 部件 |
dropdown-menu | 匹配 select' popover 处理; 完整的 Radix 部件, 包括 checkbox/ radio 项和子菜单 |
tooltip | 暗芯片; 暗芯片 ; TooltipProvider 包含 |
toast | 演示名片( E)default编号 :success编号 :destructive)——用自己排队驾驶 |
立即安装所有设备 :
bunx shadcn@latest add @codelit/button @codelit/icon-button @codelit/badge @codelit/card \
@codelit/input @codelit/textarea @codelit/label @codelit/checkbox @codelit/radio-group \
@codelit/switch @codelit/select @codelit/tabs @codelit/dialog @codelit/dropdown-menu \
@codelit/tooltip @codelit/toast
维护者 : 组件来源 registry/codelit/ui/更改后
一,重建服务 JSON与 bun run registry:build (-) public/r/*.json和
承诺——原始-URL安装为那些已承诺的文件服务.
出版
释放在下面 alpha 这么平平 bun add 永远不要抓
一个 通过更改器驱动平台根释放;不运行
bun publish 从此软件包目录 :
bun run changeset
bun run release:alpha
校验 : bun info @codelitdev/design-system --json 应显示
提前释放 alpha 离开 latest 无所未有.
许可证
阿帕奇-2.0 — 见 自由主义。 。 。 .