@cssints/meise-en-mode (英语)
Mise 模式的外观层 点缀(单位:千美元) 听着 是一个主题设置在一个 data-mode 范围,和外观
由三个来源通过模式合同解决。 它是一位呼叫成员 cssints/plugin scope() (职位
参数 $tokens 财务报告和审定财务报表 $overrides,返回主题),所以将对照您的符号集查看 check.contrast 看见了.
没有运行时间.
import { createTokens } from "cssints" with { type: "cssints" };
import { look } from "@cssints/mise-en-mode" with { type: "cssints" };
const t = createTokens({
color: { $type: "color", bg: { $value: "#ffffff" }, fg: { $value: "#111111" } },
});
// look(tokens, expression, source, overrides, { scope? })
look(t, "dark", "app", { color: { bg: "#0b0b0f", fg: "#f3f4f6" } });
look(t, "dark", "viewer", { color: { bg: "#101018" } });
look(t, "hero", "author", { color: { bg: "#123456" } }, { scope: "article.post" });
@layer app, author, viewer;
@layer app {
:where([data-mode="dark"], [data-mode~="dark/color"]) {
--color-bg: #0b0b0f;
--color-fg: #f3f4f6;
}
}
@layer viewer {
:where([data-mode="dark"], [data-mode~="dark/color"]) {
--color-bg: #101018;
}
}
@layer author {
@scope (article.post) {
:where([data-mode="hero"], [data-mode~="hero/color"]) {
--color-bg: #123456;
}
}
}
合同,像包裹一样
- 资料来源(第5条).
source实值"app", (中文(简体) ),"author"或者说"viewer": 层app < author < viewer,一次声明 在发动机本身之后(layers()因此,一看就比发动机的:root后退和观众的相貌比 作者过于应用. 每个变量从最首选的源填充它: 上面的查看器只设置--color-bg,以及--color-fg仍然来自应用程序的外观. - 问题和问题(第4条). 一个方面是令牌集的顶级组(
color, (中文(简体) ),typography) (中文(简体) ). 看着overrides由它分割,每个方面一个规则,每个规则与赤色标记或其碎片相匹配:data-mode="dark"应用每个方面,data-mode="dark/color"只有颜色组. - 表达相.
expression是一个<custom-ident>或字符串; 调用时引用一个被点缀的反向 DNS 密钥,look(t, '"com.alice.midnight"', "author", …)准确匹配. - 限制(第7条).
{ scope: "article.post" }将规则包入@scope (article.post) { … },所以外观 不能重新油漆宿主的铬。 是一个选择者, 由建筑检查 . - 覆盖 为:
createGlobalTheme's:按符号路径计值,每个符号的类型,{color.bg}允许参考文献, 检查您键入的类型, 并在构建时再次检查( e)color.bg value "blu" is not a <color>,位于呼叫处). 取决于被推翻的神迹的别名在范围上再次被宣布. - 相会相会. 一种表达式的外观和面相 是一个级联到
check.contrast它们彼此相依为命 层顺序,所以只设置文本颜色的查看器外观将检查 应用 看着是背景,是穷人 组合失败构建 .
外观打印无类:在模块的顶级调用, 如 createGlobalTheme。其类型从 scope()
定义 src/index.ts: 没有类型文件 .
更改自 cssints/mise-en-mode,该套件将替换: look(expression, source, declarations, { scope }) 带了
原始的习惯财产申报"--color-bg": "#000"(没有检查;现在是) look(tokens, expression, source, overrides, { scope }) 首先设置了符号,然后按符号路径进行覆盖,所以检查声明
异名被重新生成,反之亦然。 方方面面是象征物的组合,不再是表 --color- 财务报告和审定财务报表
--typography- 前缀和外观释放出主题,不再是全局.
cd packages/mise-en-mode && bun run test # fixtures through the engine (output, errors, contrast), and the type test via bun run typecheck
贷项
Mise en Mode是AT协议上的开放样式标准(https://standard.mode.place (中文(简体) )),模式合同是其
规则 : data-mode 镜片,层 app < author < viewer,相关方面。 这套方案是执行
合同 scope();没有复制标准网站的代码.