# @fest-lib/veela 中文文档

规范地址：https://npmcn.com/package/%40fest-lib/veela/

版本：1\.0\.48
npm 元数据更新时间：2026-11-02T13:00:42.255Z
中文译文更新时间：2026-11-14T15:03:35.636Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40fest-lib/veela
原文对照：https://npmcn.com/package/%40fest-lib/veela/?lang=original
项目主页：https://github.com/fest-live/veela.css#readme
源码仓库：https://github.com/fest-live/veela.css

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

- 包体积（解压后）：920 kB，114 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=20
- 运行依赖：4 个
- peer 依赖：@fest-lib/dom \>=0\.1\.0，@fest-lib/core \>=0\.1\.0，@fest-lib/lure \>=0\.1\.0，@fest-lib/object \>=0\.1\.0
- 首次发布：2026-08-08T01:40:13.188Z
- 最新版本发布：2026-11-02T13:00:41.542Z
- 近 30 天下载量：2787（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：64（近 12 个月 64 个）

## 中文简介

fest-lib Veela: CSS 令牌 -- -- c2 色彩函数, Agate. UX, SCSS + 运行时间加载器

## 安装

```sh
npm install @fest-lib/veela
```

也可以使用：`pnpm add @fest-lib/veela`、`yarn add @fest-lib/veela`、`bun add @fest-lib/veela`

## README

**@fest-lib/veela (英语)**  
设计标志, `--c2-*` 色彩函数 Agate.UX. 数值活在SCSS中——此文件为地图.

[![npm](https://img.shields.io/npm/v/@fest-lib/veela?style=flat-square)](https://www.npmjs.com/package/@fest-lib/veela) [![MIT](https://img.shields.io/npm/l/@fest-lib/veela?style=flat-square)](https://npmcn.com/package/%40fest-lib/veela/LICENSE) [![stars](https://img.shields.io/github/stars/fest-live/veela.css?style=flat-square)](https://github.com/fest-live/veela.css)

别放出来 `:root` 应用程序中的调色板 。 获取令牌并覆盖上下文( C)`var(--token, fallback)`Token SoT: (英语) `src/scss` (单位:千美元)`core/misc/_tokens.scss`) (中文(简体) ).

```text
core · dom · object · lure
 └── fest/veela       ← you are here
      └── fl-ui · shells · apps
```

## 安装

```bash
npm install @fest-lib/core @fest-lib/dom @fest-lib/object @fest-lib/lure @fest-lib/veela
```

端点 : `core`, (中文(简体) ), `dom`, (中文(简体) ), `object`, (中文(简体) ), `lure` (单位:千美元)`>=0.1.0`) (中文(简体) ). 公布的柏油球包括: `dist/` **财务报告和审定财务报表** `src/scss/`。 。 。 .

### 运行时间( 通过/ 内入)

```ts
import initialize from "@fest-lib/veela";
initialize();                    // loads bundled SCSS via @fest-lib/dom
```

备选案文(从 `src/scss/index.ts`:

```ts
import { loadVeelaVariant } from "@fest-lib/veela/scss/index.ts";
// "core" | "basic" | "advanced" | "beercss"
await loadVeelaVariant("advanced");
```

在工作区,FL.UI通常为您装入Veela(`configureFlUI({ styleVariant: "veela-advanced" })`) (中文(简体) ).

### 常设委员会

```scss
@use "@fest-lib/veela/scss/core" as *;

.card {
    background: var(--c2-surface, var(--color-surface));
    padding: var(--space-md);
    border-radius: var(--radius-md);
}
```

输出 : `@fest-lib/veela/scss/*` → `src/scss/*`。 。 。 .

## 色彩函数

本地 CSS 自定义函数( 加上运行时间倒计时) :

| 函数 | 作用 |
| --- | --- |
| `--c2-surface(tone, base-color, scheme-id)` | 表面 |
| `--c2-on-surface(...)` | 表面的墨迹 |
| `--u2-contrast(...)` | 对比填充 |
| `--c2-on-contrast(...)` | 对比度上的墨水 |

-   **方案编号 :** `0` 轻 `1` 阴影 `2` 默认( 后面的主机) .
-   **音调 :** `0` 黑白两端.. `50%` 铬 `100%` 对面.
-   **底色 :** `var(--current)` (违约), `--primary`, (中文(简体) ), `--secondary`, (中文(简体) ), `--accent`, (中文(简体) ), `--success`, (中文(简体) ), `--warning`, (中文(简体) ), `--error`。 。 。 .

```css
.panel {
    background: var(--c2-surface);
    color: var(--c2-on-surface);
}
```

Alpha 通过相对颜色 : `oklch(from var(--c2-surface) l c h / 0.5)`。 。 。 .

### `solid-colorize` 混合

```scss
@include solid-colorize("&", (
    "shade": 0,
    "tint": 0,
    "scheme-id": 2,
    "role": null,
    "scope": "component"   // or "selector"
));
```

`scope: "component"` 画出后代/形式助手; `"selector"` 留在节点上.

## 托肯斯(节选)

现场数字在SCSS 典型名称 :

| 仁爱 | 实例 |
| --- | --- |
| 空间 | `--space-xs` . `--space-2xl`, (中文(简体) ), `--gap-*`, (中文(简体) ), `--padding-*` |
| 半径 | `--radius-xs` . `--radius-2xl`, (中文(简体) ), `--radius-full` |
| 类型 | `--text-xs` . `--text-6xl`, (中文(简体) ), `--leading-*`, (中文(简体) ), `--font-weight-*` |
| 动议 | `--transition-fast` 编号 : `normal` 编号 : `slow` |
| 阴影 | `--shadow-sm` . `--shadow-2xl`, (中文(简体) ), `--shadow-inset` |
| 颜色 | `--icon-size-*`, (中文(简体) ), `--avatar-size`, (中文(简体) ), `--border-width-*` |

原子能类别(`.p-md`, (中文(简体) ), `.gap-md`, (中文(简体) ), `.d-flex`, (中文(简体) ), `.text-sm`, (中文(简体) ), `.shadow-sm`, (中文(简体) ), `.color-primary`, (中文(简体) ), `.surface-subtle`与样式表同船. 更喜欢在配料上贴上标志 而不是类汤.

## 阿盖特. UX 密码

面向空间对客户端空间对执行空间:

| 定向 | 客户端 | 缩写 |
| --- | --- | --- |
| `--os-inset-x/y` | `--cs-inset-x/y` | `--im-inset-x/y` |
| `--os-drag-x/y` | `--cs-drag-x/y` | `--im-drag-x/y` |
| `--os-size-x/y` | `--cs-size-x/y` | `--im-size-x/y` |

使用 `inset` 用于半静态布局, `translate` 用于拖动/动画。 方向 : `calc(var(--orient, 0) * 90deg)`。措施 `@fest-lib/dom` 阿门助道.

## 工作空间

```bash
cd modules/projects/veela.css
npm run demo             # Vite
npm test                 # puppeteer
npm run build
npm run publish
```

指南 : `guide/`。许可证: [麻省理工学院](https://npmcn.com/package/%40fest-lib/veela/LICENSE)。 。 。 .

## 常见问题

### @fest-lib/veela 是什么？

fest-lib Veela: CSS 令牌 -- -- c2 色彩函数, Agate\. UX, SCSS \+ 运行时间加载器

### 如何安装 @fest-lib/veela？

在项目目录运行 npm install @fest-lib/veela，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@fest-lib/dom（\>=0\.1\.0）、@fest-lib/core（\>=0\.1\.0）、@fest-lib/lure（\>=0\.1\.0）、@fest-lib/object（\>=0\.1\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fest-lib/veela 支持 TypeScript 吗？

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

### @fest-lib/veela 支持 ESM 还是 CommonJS？

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

### @fest-lib/veela 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @fest-lib/veela 可以商用吗？

@fest-lib/veela 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fest-lib/veela 的下载量有多少？

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

### @fest-lib/veela 还在维护吗？

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