# @aleph-alpha/config-css 中文文档

规范地址：https://npmcn.com/package/%40aleph-alpha/config-css/

版本：1\.2\.1
npm 元数据更新时间：2026-10-28T11:38:09.935Z
中文译文更新时间：2026-11-05T22:01:59.611Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40aleph-alpha/config-css
原文对照：https://npmcn.com/package/%40aleph-alpha/config-css/?lang=original
项目主页：https://docs.aleph-alpha.com/

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

- 包体积（解压后）：1.3 MB，38 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：6 个
- 首次发布：2025-03-10T15:00:45.369Z
- 最新版本发布：2026-06-16T11:19:10.263Z
- 近 30 天下载量：14289（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：234（近 12 个月 86 个）

## 中文简介

_@ aleph- alpha/ config- css- preset_

## 安装

```sh
npm install @aleph-alpha/config-css
```

也可以使用：`pnpm add @aleph-alpha/config-css`、`yarn add @aleph-alpha/config-css`、`bun add @aleph-alpha/config-css`

## README

## 配置 CSS 预设

_@ aleph- alpha/ config- css- preset_

这个软件包为CSS提供了基本的配置预设. 它包括一组默认的样式和配置,这些样式和配置可以容易地定制来适应您项目的需求.

### 安装

要将这个软件包集成到您的工程中, 请使用软件包管理器安装软件包, 例如 pnpm :

```bash
pnpm add @aleph-alpha/config-css-preset
```

### 使用量

要使用您的工程预设, 请遵循这些步骤 :

#### CSS 设置

在您的项目中需要设置UnoCSS. UnoCSS是通用第一的CSS框架,可以采用更高效更一致的造型方法.

关于建立UnoCSS的详细指示,请参见: [UnoCSS 安装指南](https://unocss.dev/integrations/vite#vite-plugin)。该指南将引导您通过安装 UnoCSS 的过程,并为您的工程配置它.

在设置 UnoCSS后,您需要将 Aleph Alpha CSS 预设添加到您的 UnoCSS 配置中.

```ts
// unocss.config.ts
import { defineConfig } from 'unocss';

import { presetAlephAlpha, designSystemContentPathConfig } from '@aleph-alpha/config-css-preset';
import { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons';

export default defineConfig({
  ...getDesignSystemContentPathConfig('svelte' | 'vue'),
  presets: [presetAlephAlpha()],
});
```

## 如何使用

在此定义所有可用的设计符号 [符号](https://npmcn.com/package/%40aleph-alpha/config-css/tokens)。 。 。 . 使用您工程中的设计符号如下:

```html
<p class="color-core-content-primary">color-core-content-primary</p>
<div class="border-r-core-border-primary">border-r-core-border-primary</div>
<p class="label-12">label-12</p>
<div class="shadow-dropdowns">Dropdown Shadow</div>
```

## 黑暗主题

如果您想要应用黑暗主题, 请设置顶级 `dark` 类,例如到身体标记

```html
<body class="dark">
  <p class="color-core-content-primary">color-core-content-primary</p>
</body>
```

## 发展

要开发此软件包, 克隆寄存器并运行以下命令:

```bash
pnpm install
pnpm build
```

## 解释

包的目的是通过 Figma 插件取入 Figma Tokens [托肯斯工作室](https://tokens.studio/) 并将它转换成在UnoCs中被曝光的托肯斯.

建设步骤如下:

1.  设计者将符号更改从 Figma 推到 a `tokens.json` 文档并打开 MR.
2.  MR合并后,管道会运行并触发建设过程.
3.  来自 `tokens.json` 被转换、分成不同类别并储存在 `transformed-tokens` 目录为 [符号转换器](https://www.npmjs.com/package/token-transformer) 这样样式词典就可以读取它们. 类别是: `light-mode`, (中文(简体) ), `dark-mode` 财务报告和审定财务报表 `global`
4.  变形的代币用 [样式词典](https://amzn.github.io/style-dictionary/#/) 以生成可在 UnoCs 中使用的符号。 处理过的令牌保存在 `sd-output` 目录.
5.  处理过的代号 : `sd-output` 然后用于创建 UnoCs 预设.
6.  UnoCs 预设后被用 vite 捆绑,最后的包被存储在 `dist` 目录.

```mermaid
graph TD
    A[Designer pushes token changes from Figma to tokens.json] --> B[Open MR]
    B --> C{MR merged?}
    C -->|Yes| D[Pipeline runs]
    D --> E[Trigger build process]
    E --> F[Transform and split tokens with token-transformer]
    F --> G[Store transformed tokens in transformed-tokens directory]
    G --> H[Process tokens with style-dictionary]
    H --> I[Store processed tokens in sd-output directory]
    I --> J[Create UnoCss presets]
    J --> K[Bundle presets with Vite]
    K --> L[Store final package in dist directory]
    C -->|No| B
    subgraph Token Categories
        F --> F1[light-mode]
        F --> F2[dark-mode]
        F --> F3[global]
    end

```

## 字体转换工具

这个软件包包括一个用于将 WOFF2 字体文件转换为 TypeScript 文件的效用脚本,其中包含有基础64-编码数据. 用于将字体直接嵌入应用程序 .

### 使用量

这个 `convert-fonts.js` 脚本位于 `packages/config-css-preset/src/utils/convert-fonts.js` 并可使用如下:

```bash
node packages/config-css-preset/src/utils/convert-fonts.js <input.woff2> <output.ts>
```

### 示例

```bash
node packages/config-css-preset/src/utils/convert-fonts.js montserrat600.woff2 montserrat600.woff2.ts
```

这将:

1.  读取 WOFF2 字体文件
2.  转换为 Base64 格式
3.  生成一个包含基数64数据的导出常数的 TypeScript 文件
4.  常数名称来自输出文件名

生成的 TypeScript 文件看起来像 :

```typescript
export const montserrat600 = 'data:font/woff2;base64,<base64-encoded-font-data>';
```

## 配置 CSS 预设帮助 UI 自定义

[读到这里](https://npmcn.com/package/%40aleph-alpha/config-css/customization.md)

## 参考资料

以下软件包用于生成预设:

-   [未显示](https://npmcn.com/package/%40aleph-alpha/config-css/style-dictionary)
-   [预设主题](https://github.com/unpreset/unocss-preset-theme)
-   [@tokens-studio/sd- transforms (英语)](https://www.npmjs.com/package/@tokens-studio/sd-transforms)
-   [符号转换器](https://www.npmjs.com/package/token-transformer)
-   [样式词典](https://amzn.github.io/style-dictionary/#/)

关于Aleph Alpha CSS预设配置的细节,请参见源代码.

## 常见问题

### @aleph-alpha/config-css 是什么？

@ aleph- alpha/ config- css- preset

### 如何安装 @aleph-alpha/config-css？

在项目目录运行 npm install @aleph-alpha/config-css，或使用 pnpm add / yarn add / bun add。

### @aleph-alpha/config-css 支持 TypeScript 吗？

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

### @aleph-alpha/config-css 支持 ESM 还是 CommonJS？

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

### @aleph-alpha/config-css 可以商用吗？

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

### @aleph-alpha/config-css 的下载量有多少？

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

### @aleph-alpha/config-css 还在维护吗？

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