# @formancy/themes 中文文档

规范地址：https://npmcn.com/package/%40formancy/themes/

版本：0\.13\.0
npm 元数据更新时间：2026-11-05T19:45:38.024Z
中文译文更新时间：2026-11-15T08:26:19.671Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40formancy/themes
原文对照：https://npmcn.com/package/%40formancy/themes/?lang=original
项目主页：https://github.com/sharkysan/formancy.ai
源码仓库：https://github.com/sharkysan/formancy.ai

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：390 kB，10 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2026-09-20T19:24:55.605Z
- 最新版本发布：2026-11-05T19:45:37.529Z
- 近 30 天下载量：4263（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 13 个）

## 中文简介

造型渲染器的参考主题——四种不相干外观以数据-造型-部分钩为对象——有建构器的样式表和管理员的调色板. 仅CSS.

## 安装

```sh
npm install @formancy/themes
```

也可以使用：`pnpm add @formancy/themes`、`yarn add @formancy/themes`、`bun add @formancy/themes`

## README

# @格式/主题

四个参考主题,构建者的样式表和管理员的调色板. 支助科 仅 —— 没有 JavaScript, 没有构建步骤, 没有依赖任何渲染器 .

## 他们是为了什么

铸造船 **无 CSS**. 这一说法容易提出,难以相信, 因此,这些文件存在 测试它: 相同的标记和相同的引擎, 穿着 作为四种看起来无关的产品.

|  | 蓝图 | 黄昏 | 弹 | 纸张 |
| --- | --- | --- | --- | --- |
| 感觉就像 | 技术绘图 | 一个黑暗的应用 | 贴纸 | 打印页面 |
| 地面 | 白色 | 阴暗 | 奶油还是白色 | 纸张或白色 |
| 控件 | 框,3px角处 | 10平方圆的井 | 轮廓,硬阴影 | 要写入的行 |
| 类型 | IBM Plex 桑斯 | 空间 | 重型阿奇沃 | Fraunces, 间隔大小的首都用于标签 |
| 选择 | 绘图框和圆圈 | 点燃井 | 芯片 | 发线盒, 选择时为斜体 |
| 无效显示为 | 领先边缘的栏杆 | 环绕控制 | 粉红色贴纸 | ver和斜体音符 |
| 需要显示为 | 星号 | "需要"这个词 | 一颗恒星 | a 脚注星号 |
| 活动向导步骤 | 数字,下划线字 | 音轨上的点 | 黄色徽章 | 罗马数字,下划线 |

如果支持其中任何一个需要更改组件,则无头 索赔是虚假的。 没有.

## 使用

```ts
import '@formancy/themes/blueprint.css'
import '@formancy/themes/dusk.css'
import '@formancy/themes/pop.css'
import '@formancy/themes/paper.css'
```

```html
<div data-formancy-theme="blueprint">…your form…</div>
```

每个主题都放在下面 `[data-formancy-theme]`,所以一个页面可以装入全部 通过改变一个属性来切换,这就是游乐场和 登陆页是的. `workbench.css` 财务报告和审定财务报表 `room.css`,下文不是主题和 未设定范围:每个变量都设置在 `:root`,为整页.

每个主题都设定自己的文本颜色,颜色方案以及 `box-sizing` 联 合 国 子树,所以它不依赖于主机页面的重置. 它不画 表格后面的一页: 纸和纸在地面颜色上看起来最好 声明为: `--fm-ground`白色也不错.

字体被引用,而不是被捆绑,每个主题都倒回一个系统堆栈. formancy.ai从Fontsource的软件包而不是从一个软件包中为它自己服务 字体服务,所以打开一页告诉其他网站谁打开它. 字体源名称 变相相 `<Family> Variable`,所以爸爸问 `Archivo` 接下来 `Archivo Variable`纸张 `Fraunces` 接下来 `Fraunces Variable`: 任意 文字拼写,以页面加载的方式为准.

## 建造者们: `workbench.css`

`workbench.css` 两个建筑师都穿好衣服 树、调色板、探长、逻辑 面板, 提示面板和旁边的中继器, 假设情景, 块, 数据网的列 和翻译——通过 `data-formancy-part` 钩子弹出,每一部分 他们在这里有一个规则. 它不是一个形式主题,没有任何问题取决于它。 改变它的标志的外观 而不是你自己的规则:

| 脚本 | 它的颜色 |
| --- | --- |
| `--wb-ink`, (中文(简体) ), `--wb-muted` | 文本,和安静的文本 |
| `--wb-bench`, (中文(简体) ), `--wb-panel`, (中文(简体) ), `--wb-surface` | 地面、窗帘、控制或卡片 |
| `--wb-rule` | 线条和边界 |
| `--wb-signal` | 选择、重点和主要行动 |
| `--wb-derived` | 建造者想出什么 而不是打出什么 类型 路径 |
| `--wb-invalid`, (中文(简体) ), `--wb-ok`, (中文(简体) ), `--wb-caution` | 破损,精细,成本 |
| `--wb-sans`, (中文(简体) ), `--wb-mono` | 两个面孔 |

## 房间: `room.css`

`room.css` 是调色板的形状。 ai的自营管理员被引出 暗地,玻璃 面板,紫外线用于一个人的行为,而紫外线用于系统的行为 应用程序的意思是同一个房间导入,而不是复制数值。 管理员 以同样的方式进口。 这是自定义属性在 `:root` 财务报告和审定财务报表 `color-scheme: dark`,以及 没有其他的:没有关于任何元素的规则,也没有装入面孔。 你自己的风格表读取它们.

```ts
import '@formancy/themes/workbench.css'
import '@formancy/themes/room.css' // after the workbench
```

| 变量 | 这是什么 |
| --- | --- |
| `--ground` | 页面,一切的背后 |
| `--glass` | 地面上的一个面板, 它显示它通过 |
| `--text`, (中文(简体) ), `--muted` | 文本,和安静的文本 |
| `--edge`, (中文(简体) ), `--edge-strong` | 线条,并绑定面板的线条 |
| `--client` | 紫外线:人的行为 |
| `--server` | teal:系统做了什么 |
| `--invalid`, (中文(简体) ), `--ok`, (中文(简体) ), `--warn` | 断了,好,半路 |
| `--display` | 标题的面额:Archivo,然后是IBM Plex Sans |

它也设置了所有颜色 `workbench.css` 到房间.. `--wb-ink`, (中文(简体) ), `--wb-bench`, (中文(简体) ), `--wb-panel`, (中文(简体) ), `--wb-surface`, (中文(简体) ), `--wb-rule`, (中文(简体) ), `--wb-muted`, (中文(简体) ), `--wb-signal`, (中文(简体) ), `--wb-derived`, (中文(简体) ), `--wb-invalid`, (中文(简体) ), `--wb-ok` 财务报告和审定财务报表 `--wb-caution` -并留下它的脸作为工作台 他们。 只有在 `workbench.css`: 都说 `:root`因此,无论以后的负载 胜利,先装入建造者 保持它的光面板在暗室.

面相没有被装入. `--display` archivo和IBM Plex Sans,以及工作台的 面相是 IBM Plex; 页面本身会加载它们, 如管理员从字体源头加载, 或者倒回 到系统.

名字是你写的 `var()` 他们就是这个软件包的API 一个值是 房间:一个更改为一个更改 每一个导入的页面, 更改日志是这样说的.

## 右到左 和你的捆绑

这里的每一个文件都列出任何内容——四个主题,以及 `workbench.css`,哪些样式 两位建筑师——说某事按读取顺序处于哪一边:逻辑属性,以及 `:dir(rtl)` cSS 没有逻辑形式的地方,像图标一样 `background-position` 或栏 所选项目的一面。 设定 `dir="rtl"` 在页面上,或打开 任何在窗体或建构器上方,布局也随之而来.

**只能这样 `:dir()` 到达已写入的浏览器 .** 锁定捆绑者 浏览器比旧的旧 `:dir()` 以重写方式运出。 Vite的默认目标有 闪电 CSS 每转一转 `:dir(rtl)` 输入 `:is(:lang(ar), :lang(he), …)`,随后 页面 _语言_ 相反: `dir="rtl"` 的页面 `lang` 不在名单上 改变什么, 建筑者的标记留在左边。 在这个仓库里测量的 自己的游乐场。 将 CSS 目标设定为浏览器, 这些样式表是写给.. 第一次发布时均使用 `:dir()` 财务报告和审定财务报表 `color-mix()`数字 :

```ts
// vite.config.ts
export default defineConfig({
  build: { cssTarget: ['chrome120', 'edge120', 'firefox113', 'safari16.4', 'ios16.4'] },
})
```

装入平面的样式表 `<link>` 不重写,不需要任何东西.

## 写你自己

抄取一并改. 水面是 水面 `data-formancy-part` 属性,以及每个 部件 任意一个有要画的渲染器的发音都以每个窗体的主题为样式 运送到这里.. `apps/docs/src/themes.test.ts` 失败于一个不是,所以是副本 已经把它们都命名了。 这些是开始的地方,而不是整个清单:

-   字段 : `field` (与 `data-state="invalid|valid"`, (中文(简体) ), `label`, (中文(简体) ), `error`, (中文(简体) ), `required-hint`, (中文(简体) ), `radio-option`, (中文(简体) ), `checkbox-option`, (中文(简体) ), `static`
-   中继器 : `repeater`, (中文(简体) ), `repeater-legend`, (中文(简体) ), `row`
-   版式 : `layout-row`, (中文(简体) ), `layout-column`, (中文(简体) ), `layout-section`, (中文(简体) ), `layout-section-heading`, (中文(简体) ), `layout-table` (与 `data-columns`, (中文(简体) ), `layout-tabs`, (中文(简体) ), `tablist`, (中文(简体) ), `tab`, (中文(简体) ), `tabpanel`
-   向导并提交 : `stepper`, (中文(简体) ), `wizard-nav`, (中文(简体) ), `submit`
-   错误 : `error-summary`, (中文(简体) ), `error-summary-heading`
-   丰富文本 : `richtext-toolbar`, (中文(简体) ), `richtext-button`, (中文(简体) ), `richtext-preview`, (中文(简体) ), `richtext`, (中文(简体) ), `visually-hidden`
-   文件 : `file-list`, (中文(简体) ), `file-item`, (中文(简体) ), `file-status`, (中文(简体) ), `file-unavailable`

`visually-hidden` 每一个主题都必须隐藏起来——这是唯一的一个名字 丰富的文本工具栏按钮有,所以它被移出屏幕,从未被取出.

控制很简单 `input`, (中文(简体) ), `select` 财务报告和审定财务报表 `textarea` 内部 `[data-formancy-part="field"]`。 。 。 . 没有什么是一门课, 所以没有什么与你的设计系统相冲突.

## 常见问题

### @formancy/themes 是什么？

造型渲染器的参考主题——四种不相干外观以数据-造型-部分钩为对象——有建构器的样式表和管理员的调色板\. 仅CSS\.

### 如何安装 @formancy/themes？

在项目目录运行 npm install @formancy/themes，或使用 pnpm add / yarn add / bun add。

### @formancy/themes 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/formancy\_\_themes 是否存在。

### @formancy/themes 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @formancy/themes 可以商用吗？

@formancy/themes 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @formancy/themes 的下载量有多少？

根据 npm 官方下载统计，@formancy/themes 在 2026/10/16 – 2026/11/14 这 30 天内被下载 4,263 次，日均约 142 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @formancy/themes 还在维护吗？

最新版本 0\.13\.0 发布于 2026/11/06（10 天前）；至今共发布 13 个版本，其中过去 12 个月发布了 13 个；首次发布于 2026/09/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。