@gridui/theme

中文文档
2.3.0发布于 2026/11/01UNLICENSEDTypeScriptES Module

GridUI React主题

中文使用文档

@gridui /主题

GridUI主题。部分 GridUI React monoorepo.

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

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

面板范围

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

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,以及其他语义输出标记。在文件处登记 因此,每次嵌套重置都会恢复相同的应用程序调色板,例如:

: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。

看到 季度发布历史 准备发行票据和消费记录。

版本与发布记录

@gridui/theme 共发布 10 个版本,首次发布于 2026/10/22;过去 12 个月发布了 10 个版本。

版本发布日期距今
2.3.0latest2026/11/012 天前
2.2.12026/11/012 天前
2.1.22026/10/313 天前
2.1.12026/10/277 天前
2.0.02026/10/268 天前
1.0.02026/10/259 天前

关于 @gridui/theme 的常见问题

@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 和提交记录判断。