# @gridui/theme 中文文档

规范地址：https://npmcn.com/package/%40gridui/theme/

版本：2\.3\.0
npm 元数据更新时间：2026-11-01T06:24:38.460Z
中文译文更新时间：2026-11-01T07:05:35.596Z
软件包许可：UNLICENSED

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

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

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

- 包体积（解压后）：51.9 kB，26 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2026-10-21T16:36:01.287Z
- 最新版本发布：2026-11-01T06:24:38.319Z
- 已发布版本数：10（近 12 个月 10 个）

## 中文简介

GridUI React主题

## 安装

```sh
npm install @gridui/theme
```

也可以使用：`pnpm add @gridui/theme`、`yarn add @gridui/theme`、`bun add @gridui/theme`

## README

# @gridui /主题

GridUI主题。部分 [GridUI React monoorepo](https://github.com/sudo-ui/GridUI-React-Monorepo).

主题拥有颜色、间距、排版、焦点、运动、 和外表。网格将这些值应用于页面几何形状和结构 边界;其他核心系列则将其应用于功能表面。主题没有 拥有这些组件的结构或状态。

进口编译 `styles.css` 对于令牌定义，选择进入 `reset.css` 当 应用程序需要文档默认值，并使用 `tailwind.css` 作为显性的 原始顺风适配器。共享响应值分辨率和间距变量 构造活在React-free中 `@gridui/style-utils/responsive` 条目。

## 面板范围

进口 `paletteClass` 和它的 `Palette` 类型的 `@gridui/theme`，加载 `@gridui/theme/styles.css`． 帮助器返回原生元素的类； 它不添加React依赖项、包装器、地标、gutter或结构边界。

```tsx
import { paletteClass } from "@gridui/theme";

<section className={paletteClass("brand")}>
    <div className={paletteClass("neutral")}>
        A neutral surface inside the brand region.
        <aside className={paletteClass("brand")}>Brand again.</aside>
    </div>
</section>
```

`paletteClass()` 和 `paletteClass("inherit")` 不返回作用域类并保留 继承了颜色。 `paletteClass("neutral")` 显式重置为已注册的 中性的调色板。其他选择是 `brand`， `warning`, `danger`. 在每个表面上使用一个调色板类。这四个选项都有自己的语义 颜色和原生前景/背景；应用程序实用程序仍然可以选择 布局或覆盖绘制的前景/背景。

应用程序通过注册它们的中性色 `--gridui-neutral-*` 源 令牌。这些是独立于当前活动的 `--gridui-background`， `--gridui-foreground`，以及其他语义输出标记。在文件处登记 因此，每次嵌套重置都会恢复相同的应用程序调色板，例如：

```css
:root {
    --gridui-neutral-background: light-dark(#f7f2e8, #18221e);
    --gridui-neutral-foreground: light-dark(#203c30, #e4eadf);
    --gridui-neutral-muted: light-dark(#5e7066, #aebeb2);
    --gridui-neutral-border: light-dark(#bccbbf, #435c4c);
    --gridui-neutral-link: var(--gridui-neutral-foreground);
    --gridui-neutral-accent-background: var(--gridui-neutral-foreground);
    --gridui-neutral-accent-foreground: var(--gridui-neutral-background);
    --gridui-neutral-surface: light-dark(#e8ede4, #25372d);
}
```

内置的中性源默认值保留现有的文档颜色。 现有的根语义覆盖继续对文档进行样式设置，但应用程序 必须注册 `--gridui-neutral-*` 显式使用前的源颜色 中性重置;这些重置不能推断应用程序先前的覆盖。 如需中立注册， `link` 默认为作用域的活动重音 当背景 `--gridui-neutral-link` 省略;只在本地注册 因此，中性重音也会更新其派生的链接和焦点颜色。

烙印、警告和危险依然存在 `--gridui-<palette>-*` 源 角色和默认别名，以与直接令牌消费者兼容。他们的 基本源角色是独立的：在本地覆盖前台则不是 重写已经具有配置值的继承链接或重音源。 在定制这些现有调色板时提供匹配的源角色。这个 Scope仍然根据结果解析所有交互派生的输出 局部基色板；它不推断应用程序的颜色选择。

每个作用域都重新映射背景、前景、静音、边框、链接和强调色， 然后解析控件边界、焦点、表面、选择色调和装饰 在相同的元素上。这些输出不会重用祖先已经计算过的结果 交互的颜色。悬停轮廓源自该局部焦点颜色；禁用 选定的控件继续使用相同的本地语义令牌。可选 源重写是 `control-border`， `focus-color`， `surface-hover`， `selection-tint`, `decoration`,与 `surface`，在选中的下面 `--gridui-<palette>-` 前缀。选择源映射到现有的 `--gridui-brand-tint` 语义的输出。的源默认值 `surface` 和 `decoration`;非中性选择保留其现有的衍生 省略这些覆盖时的网格色调公式。

网格框架色调重用这个主题所有者。他们现有的 `tone="neutral"` 意味着 继承，保留现有的嵌套框架行为；显式重置是一种 单独的 `paletteClass("neutral")` 在调用者的本机内容表面上。 网格继续拥有接缝和区域几何。

面板继承遵循DOM。安装在作用域之外的门户 surface使用它实际的DOM主机的调色板。提供适当的公共门户 容器或在本地覆盖时将作用域类应用于调用者拥有的主机 颜色是必需的；主题不添加应用程序状态或门户包装器。

chrome使用粘性应用程序 `--gridui-z-sticky` (4)、以上内容、结构 边界和交互轮廓，以及下面的覆盖层和模态层。所有 组件堆叠级别来自主题令牌。

有关CSS设置、支持的环境、开发和发布需求，请参阅存储库README。

看到 [季度发布历史](https://npmcn.com/package/%40gridui/theme/.changeset/history/) 准备发行票据和消费记录。

## 常见问题

### @gridui/theme 是什么？

GridUI React主题

### 如何安装 @gridui/theme？

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

### @gridui/theme 支持 TypeScript 吗？

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

### @gridui/theme 支持 ESM 还是 CommonJS？

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

### @gridui/theme 可以商用吗？

@gridui/theme 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @gridui/theme 还在维护吗？

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