@cdx-ui/主题编辑器
用于编写 Forge 设计系统的 仅限网页的导读编辑器 ThemeOverride 贾森。 金融机构通过Forge UI控制选择基因输入和包自有语义选择,而活面板则预览真实的Forge UI组件. 编辑器只发布 FI 的意向; 消费应用程序持续它并在运行时应用它 @cdx-ui/styles。 。 。 .
网易一览. 编辑器使用浏览器API和回放原生网络. 它没有在本地平台上提供.
安装
pnpm add @cdx-ui/theme-editor @cdx-ui/components @cdx-ui/styles
react, (中文(简体) ), react-dom, (中文(简体) ), react-native-web,以及 uniwind 是同伴的依赖性——应用已经消耗 @cdx-ui/components 将会有这些。 声明 @cdx-ui/components 财务报告和审定财务报表 @cdx-ui/styles 当直接导入其提供者和类型如下所示时;编辑器自动解决其内部的Forge UI依赖性.
使用量
1. 将编辑器添加到您的 Tailwind 源头
预览使Forge UI组件具有Uniwind 工具类. 喜欢
其他项目 @cdx-ui/* 包,这个包船 没有预先编译的 CSS 或令牌 —— 说
联合国 ./styles.css 是尾风 v4 @source 添加编辑器的指令
源到您的内容扫描, 从而生成预览的功能 。 导入
在您的 Tailwind 条目样式表中, 与其它设计系统一起 :
@import 'tailwindcss';
@import 'uniwind';
@import '@cdx-ui/styles/theme.css';
@import '@cdx-ui/styles/utilities.css';
@import '@cdx-ui/components/styles.css';
@import '@cdx-ui/theme-editor/styles.css';
2. 装入编辑器
onChange 用户编辑带有有效目标的控件后起火( 已失效, ~ 200ms)
ThemeOverride它没有被调用。 坚持有效载荷从 onChange; 生产
消费者在应用程序启动时应用一次 :
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { ThemeEditor } from '@cdx-ui/theme-editor';
import { ForgeDesignProvider } from '@cdx-ui/components';
import type { ThemeOverride } from '@cdx-ui/styles';
function ThemeConfigPage() {
const handleChange = (override: ThemeOverride) => {
void persistOverride(override); // your save (e.g. POST /api/themes)
};
return (
<SafeAreaProvider>
<ForgeDesignProvider>
<ThemeEditor onChange={handleChange} showGetCode showThemeModeToggle />
</ForgeDesignProvider>
</SafeAreaProvider>
);
}
showGetCode 打开 Forge 用户界面 Dialog。在应用程序根附近挂载一个门户网站主机:
ForgeDesignProvider 自动包含,必须留在应用程序内
SafeAreaProvider。如果应用程序不使用 Forge 提供者,请保留 SafeAreaProvider 挂载
一个 PortalHost 从 @cdx-ui/primitives 换句话说 不要同时挂载;没有其中之一
对话框在状态中打开但不会弹出 .
编辑器解析并扩展到 @cdx-ui/styles,评估共享规则,并驱动预览
通过一个很好的覆盖会议。 清除不倾倒地恢复管理的基准值
无关变量。 重装仍然是物理写作失败后的恢复边界.
3. 编辑已有的覆盖
通过先前保存的覆盖为 initialValue ; 控制种子 inputs数字 :
<ThemeEditor initialValue={savedOverride} onChange={handleChange} />
道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
onChange | (override: ThemeOverride) => void | —— 说 | 要求. 在用户编辑当前控件后调用( 已取消, ~ 200ms) ThemeOverride。在彩色输入无效的情况下,不调用挂载. |
initialValue | unknown | —— 说 | 解析用于编辑模式的持久值,并显示无效或不支持的有效载荷诊断. |
showGetCode | boolean | false | 显示一个“ 获取代码” 按钮, 打开一个带有覆盖输出的对话框和一个复制到剪贴板按钮 . |
showThemeModeToggle | boolean | false | 显示一个光/ 暗切换预览表面 . |
这个 ThemeOverride 形状和运行时间在 @cdx-ui/styles。 。 。 .
行为说明
- 专意出出. 未触及预览默认值、 衍生出碱基、 食谱成员并生成 调色板被省略。 进取添加剂未知字段被保留.
- 基础. Base 来源于 Brand 直至明确被钉入; 解接去除
basePrimary意图. - 字相会. 每个目录家族都有。 选择 默认 清除写入的字体意图和 恢复生成的基线家族.
- 规矩. 核准结构/源设置错误块输出。 临时视觉校准 仍然只发出警告.
- 现场预览. 覆盖的会话写着当前零星的意向和混凝土倒计时 清除先前管理过的写法所需的值.
- 预览隔离. 预览被包裹在
ScopedTheme因此光/暗切只会影响预览表面,而不是编辑器的铬.
软件包结构
theme-editor/
├── src/
│ ├── index.ts # Public exports (ThemeEditor, ThemeEditorProps)
│ ├── styles.css # `@source` directive — published as the ./styles.css export
│ ├── ThemeEditor.tsx # Top-level component: state, debounced apply/emit, Dialog, toggle
│ ├── PreviewPanel.tsx # Live preview surface (ScopedTheme + banking artboard)
│ ├── override/ # Draft provenance, serialization, controls, rules/runtime handoff
│ ├── validation.ts # Hex validation
│ ├── fonts.ts # Exact Google Fonts loading for display/platform families
│ ├── controls/ # FontControl, ColorControl, catalog-driven renderer
│ ├── components/ # ColorPickerInput
│ └── previews/ # Forge UI sample cards rendered in the preview
├── global.css # Tailwind/Uniwind entry for the build (not published)
├── vite.config.ts
└── package.json
大楼
pnpm --filter @cdx-ui/theme-editor build
虚拟捆绑 src/index.ts 改为 dist/index.js (外部化 React、React 原生网络、 Uniwind 和 @cdx-ui/* 软件包; tsc 发表声明。 没有发射CSS—— src/styles.css (单位:千美元) @source communicipality)作为-is发布,并和消费者的"尾风"(Tailwind building)一起作曲.
进一步阅读
- 设计符号 标志和主题如何运作
@cdx-ui/styles——基准令牌,覆接和运行时间应用程序- 存放处的代号-存档文件记录了超载有效载荷合同和建造/运行时间界限.
许可证
麻省理工学院 2026 Digital First Holdings LLC. 包装的许可证全文 LICENSE。 。 。 .