@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。
看到 季度发布历史 准备发行票据和消费记录。