{invalid && (
);
}
```
## 共享主题文件
导入 UI 样式即可包含默认变量、组件样式和全部七套预设：
```css
@import "@workspace/ui/globals.css";
```
七个文件位于 `packages/ui/src/styles/themes`：`bamboo.css`、`mauve.css`、`mist.css`、`sand.css`、`pine.css`、`rose.css` 和 `lime.css`。已经加载 SUI 基础变量的应用可以只导入所需预设：
```css
@import "@workspace/ui/themes/pine.css";
```
通过根节点或容器上的 `data-color="pine"` 选择配色。深色祖先节点会启用深色配色。重置根节点时，使用 `data-color="default"` 或移除该属性，并清理自定义行内变量。默认变量直接来自 `globals.css`，没有单独的默认主题文件。不含自身覆盖变量的嵌套容器会继承父节点的颜色。
## 自定义应用主题
自定义输入使用共享辅助函数。先校验，再清理旧的行内强调色变量，仅为自定义种子计算覆盖值：
```tsx
import {
createThemeTokens,
getThemeId,
normalizeHex,
themeTokenNames,
} from "@workspace/ui/lib/theme/theme";
function applyTheme(input: string | null, dark: boolean) {
const seed = input === null ? null : normalizeHex(input);
if (input !== null && seed === null) return;
const root = document.documentElement;
root.classList.toggle("dark", dark);
root.dataset.color = getThemeId(seed);
for (const name of themeTokenNames) root.style.removeProperty(name);
if (root.dataset.color === "custom") {
for (const [name, value] of Object.entries(createThemeTokens(seed, dark))) {
root.style.setProperty(name, value);
}
}
}
```
传入 `null` 恢复默认配色。外观变化时重新计算自定义覆盖变量。共享包负责配色和计算；模式选择、持久化与首次恢复由应用管理。可访问的链接使用 `text-accent-foreground`，焦点使用 `outline-ring`。文档样式将 Fumadocs 的 `--color-fd-*` 变量映射为共享语义变量；这些框架别名不属于共享主题文件或 `createThemeTokens` 的输出。
## 创建配色
要添加可复用预设，在 `packages/ui/src/lib/theme/theme.ts` 的 `themePresets` 中加入稳定 ID、中英文名称、种子色与五个图表颜色。生成器会将该定义与 `globals.css` 当前的基础语义变量合并。
```sh
bun run --cwd packages/ui themes:generate
```
将生成的单个文件导入 `globals.css`，再通过 `data-color` 使用该 ID。更改预设或基础变量后重新生成。采用新配色前，检查明暗模式、对应前景色、键盘焦点和图表图例。
## 设置恢复
顶栏的“外观模式”和“强调色”是两个独立入口：前者选择浅色、深色或跟随系统，后者选择预设配色或自定义颜色。更改模式不会重置强调色。
文档站将选定的模式与强调色保存在浏览器中，首次绘制前恢复；跟随系统模式会实时响应设备变化。存储不可用时使用跟随系统与默认配色。本页交互示例不会写入这些设置。
## 从右到左的界面
使用 `DirectionProvider` 包裹相关组件树，并优先使用逻辑方向间距工具类：
```tsx
import { DirectionProvider } from "@workspace/ui/components/direction";
{zh ? "输入三位或六位 HEX；当前有效配色保持不变" : "Enter a three- or six-digit HEX. The current valid palette is unchanged."}
)}{zh ? "内容文字" : "Content text"}
; } function AvoidSample({ locale }: ExampleProps) { const zh = locale === "zh-CN"; return{zh ? "内容文字" : "Content text"}
; } export default function Example({ locale }: ExampleProps) { return (Content text
; ``` **避免** ```tsxContent text
; ``` ## 标题使用句首大写 英文标题使用句首大写，不要把每个单词的首字母都大写，也不要把整个标题转换为大写。产品名称保留其规范的大小写。中文标题按自然语言书写。 避免栏同时展示逐词首字母大写，以及使用 `uppercase` 转换为全大写的情况。 ### 示例: design-guidelines-heading-case ```tsx import { DesignComparison } from "../design-guidelines-comparison"; import type { ExampleProps } from "../types"; function RecommendedSample() { returnRecent requests
; } function AvoidSample() { return (Recent Requests
Recent requests
Recent requests
; ``` **避免** ```tsxRecent Requests
; ``` ```tsxRecent requests
; ``` ## 不要修改字间距 不要使用 `tracking-*` 类修改字符间距。保留字体本身的字间距。 ### 示例: design-guidelines-font-tracking ```tsx import { DesignComparison } from "../design-guidelines-comparison"; import type { ExampleProps } from "../types"; function RecommendedSample({ locale }: ExampleProps) { const zh = locale === "zh-CN"; return ({zh ? "项目指标" : "Project metrics"}
); } function AvoidSample({ locale }: ExampleProps) { const zh = locale === "zh-CN"; return ({zh ? "项目指标" : "Project metrics"}
); } export default function Example({ locale }: ExampleProps) { return (Project metrics
; ``` **避免** ```tsxProject metrics
; ``` ## 不要使用 font-bold 标题使用 `font-semibold`，行内强调使用 `font-medium`。不要使用 `font-bold`。 ### 示例: design-guidelines-font-weight ```tsx import { DesignComparison } from "../design-guidelines-comparison"; import type { ExampleProps } from "../types"; function RecommendedSample({ locale }: ExampleProps) { const zh = locale === "zh-CN"; return ( <>{zh ? "账户设置" : "Account settings"}
{zh ? "必填" : "required"} ); } function AvoidSample({ locale }: ExampleProps) { const zh = locale === "zh-CN"; return ( <>{zh ? "账户设置" : "Account settings"}
{zh ? "必填" : "required"} ); } export default function Example({ locale }: ExampleProps) { return (Account settings
required ; ``` **避免** ```tsx <>Account settings
required ; ``` ## 相关文字放得更近 相关文字之间的间距，应小于这一组文字与外部内容之间的间距。 ### 示例: design-guidelines-related-text-spacing ```tsx import { Button } from "@workspace/ui/components/button"; import { DesignComparison } from "../design-guidelines-comparison"; import type { ExampleProps } from "../types"; function RecommendedSample({ locale }: ExampleProps) { const zh = locale === "zh-CN"; return ({zh ? "网站分析" : "Web analytics"}
{zh ? "无需修改代码即可衡量网站访问量" : "Measure site traffic without changing your code."}
{zh ? "网站分析" : "Web analytics"}
{zh ? "无需修改代码即可衡量网站访问量" : "Measure site traffic without changing your code."}
Web analytics
Measure site traffic without changing your code.
Web analytics
Measure site traffic without changing your code.
{zh ? "内容文字" : "Content text"}
{zh ? "内容文字" : "Content text"}
Content text
Content text
{zh ? "这段文字可能会换行，但图标仍应与第一行保持对齐" : "Text that may wrap onto multiple lines and still align with the icon."}
{zh ? "这段文字可能会换行，但图标仍应与第一行保持对齐" : "Text that may wrap onto multiple lines and still align with the icon."}
{zh ? "这段文字可能会换行，但图标仍应与第一行保持对齐" : "Text that may wrap onto multiple lines and still align with the icon."}
Text that may wrap onto multiple lines and still align with the icon.
Text that may wrap onto multiple lines and still align with the icon.
Text that may wrap onto multiple lines and still align with the icon.
{zh ? "编辑 " : "Edit "}
config.ts
{zh ? " 后继续" : " to continue."}
{zh ? "编辑 " : "Edit "}
config.ts
{zh ? " 后继续" : " to continue."}
Edit config.ts to continue.
Edit config.ts to continue.
{zh ? "最近请求" : "Recent requests"}
{Array.from({ length: 8 }, (_, index) => ({
id: `request-${index + 1}`,
number: index + 1,
})).map((request) => (
{zh ? "请求" : "Request"} {request.number}
))}
{zh ? "最近请求" : "Recent requests"}
{Array.from({ length: 8 }, (_, index) => ({
id: `request-${index + 1}`,
number: index + 1,
})).map((request) => (
{zh ? "请求" : "Request"} {request.number}
))}
Recent requests
{Array.from({ length: 8 }, (_, index) => ({
id: `request-${index + 1}`,
number: index + 1,
})).map((request) => (
Request {request.number}
))}Recent requests
{Array.from({ length: 8 }, (_, index) => ({
id: `request-${index + 1}`,
number: index + 1,
})).map((request) => (
Request {request.number}
))}
{zh
? "面板关闭时，这段文字应保持相同的换行，不要在动画过程中重新排版"
: "Text should keep the same line breaks while this panel closes."}
{zh
? "面板关闭时，这段文字应保持相同的换行，不要在动画过程中重新排版"
: "Text should keep the same line breaks while this panel closes."}
Text should keep the same line breaks while this panel closes.
Text should keep the same line breaks while this panel closes.
{zh ? "最近请求" : "Recent requests"}
{zh ? "最近请求" : "Recent requests"}
Recent requests
Recent requests
{alerts.map((alert) => {
const Icon = alert.icon;
return (
{t[alert.titleKey]}
{t[alert.descriptionKey]}
);
})}
);
}
export default AlertRtl;
```
## API 参考
### Alert
`Alert` 组件显示标注以引起用户注意
| 属性 |类型 |默认 |
| --------- | ---------------------------- | ----------- |
| `variant` | `"default" \| "destructive"` | `"default"` |
### AlertTitle
`AlertTitle` 组件显示提示的标题
| 属性 |类型 |默认 |
| ----------- | -------- | -------- |
| `className` | `string` | - |
### AlertDescription
`AlertDescription` 组件显示提示的描述或内容
| 属性|类型 |默认 |
| ----------- | -------- | -------- |
| `className` | `string` | - |
### AlertAction
`AlertAction` 组件显示一个绝对位于提示右上角的操作元素（如按钮）
| 属性|类型 |默认 |
| ----------- | -------- | -------- |
| `className` | `string` | - |
---
# Alert Dialog
模式对话框，用重要内容打断用户并期望得到响应
页面: https://sui.draco.dev/zh-CN/docs/components/alert-dialog
### 示例: alert-dialog-demo
```tsx
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@workspace/ui/components/alert-dialog";
import { Button } from "@workspace/ui/components/button";
export default function AlertDialogDemo() {
return (
