# @allenai/varnish-theme 中文文档

规范地址：https://npmcn.com/package/%40allenai/varnish-theme/

版本：3\.0\.12-alpha\.0
npm 元数据更新时间：2026-04-22T17:41:31.137Z
中文译文更新时间：2026-11-07T07:18:50.213Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40allenai/varnish-theme
原文对照：https://npmcn.com/package/%40allenai/varnish-theme/?lang=original

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

- 包体积（解压后）：6.8 MB，32 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2024-02-01T23:37:03.978Z
- 最新版本发布：2026-04-22T17:41:30.916Z
- 近 30 天下载量：2014（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：40（近 12 个月 4 个）

## 中文简介

AI2 的 Varnish 主题和变量

## 安装

```sh
npm install @allenai/varnish-theme
```

也可以使用：`pnpm add @allenai/varnish-theme`、`yarn add @allenai/varnish-theme`、`bun add @allenai/varnish-theme`

## README

# 清漆主题

漆色主题包含设计符号和AI2的基本CSS `varnish` 组件库.

## 使用漆色主题

首先,安装清漆-主题:

```bash
yarn add @allenai/varnish-theme
```

### 支助科

通过使用 CSS 导入到您的 CSS 文件,您可以使用 CSS 令牌或漆色 CSS `@import`。 。 。 .

如果设置了网络包装 css-loader,可以这样导入: 对于标志:

```css
@import '~@allenai/varnish-theme/tokens.css' layer(varnish);
```

对于主要的CSS:

```css
@import '~@allenai/varnish-theme/varnish.css' layer(varnish);
```

### 联合来文

我们提供一份你输入的JS文件.

```js
import varnishTokens from '@allenai/varnish-theme';
```

### 贾森

我们提供的JSON文件类似于JSON文件.

在联署材料中输入:

```js
import varnishTokens from '@allenai/varnish-theme/tokens.json';
```

### 简单无单位十六进制

如果你想要这个主题,只要有值,六角星的颜色, 和没有数字的像素提供的间隔符, 我们也提供.

```js
import simpleVarnishTokens from '@allenai/varnish-theme/simple-hex-unitless';
```

### 毛里求斯 主题

如果您使用MUI, 漆色主题提供了一个预建的MUI主题集成:

```js
import { varnishMuiTheme } from '@allenai/varnish-theme/mui';
```

## 发展

我们用 [样式词典](https://amzn.github.io/style-dictionary/#/) 财务报告和审定财务报表 [样式-字典-用途](https://github.com/lukasoppermann/style-dictionary-utils) 以创建导出的文件.

要添加或更改令牌,请在 `tokens` 文件夹。 要用您的新符号更新输出, 请运行 `yarn workspace @allenai/varnish-theme build`。 。 。 .

## 添加图标

首先,将您的 svg 文件添加到下面 `icons` 文件夹。 然后更新 `tokens/assets/icon.cjs` 与这个文件路径。 然后运行 `yarn workspace @allenai/varnish-theme build`

## 以彩色主题符号更新图像

进一步指示 [这里](https://docs.google.com/document/d/1vfGL-L2zBLv_2yMJE76bsathBfBr9la6aSOtYnt8zTM/edit?tab=t.0#heading=h.cv88a8bjur1w)

1.  转到您的图像文档
2.  单击左上角的图片按钮。 转到插件并安装 **图格玛的托肯斯工作室** 打开它
3.  这里您可以看到您标志的视觉表现, 包括颜色, 间隔等 。 转到您想要编辑的符号并单击 `{}` 按钮在右上方.
4.  这里将是一个可编辑的 JSON 文件 。 在此插入/ 编辑您的令牌 。 您可能需要格式化您的新符号, 以同样的 JSON 风格
5.  点击“ 拯救 JSON ”
6.  告诉设计师您更新了 Figma 的符号 。 没问题!

## 常见问题

### @allenai/varnish-theme 是什么？

AI2 的 Varnish 主题和变量

### 如何安装 @allenai/varnish-theme？

在项目目录运行 npm install @allenai/varnish-theme，或使用 pnpm add / yarn add / bun add。

### @allenai/varnish-theme 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @allenai/varnish-theme 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @allenai/varnish-theme 可以商用吗？

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

### @allenai/varnish-theme 的下载量有多少？

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

### @allenai/varnish-theme 还在维护吗？

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