@ cssints/ rybitten (英语)
RY 颜色用于 点缀,在构建时计算。 RYBitten(由Medai所著,David Aerne收录于
许可证; MIT)通过一个将红黄蓝坐标转换为RGB 立方体:一个彩色模型的八个角(白色,红色,黄色,
橙色,蓝色,紫色,绿色,黑色. 其中36艘从布特(1708年)和歌德到伊滕,蒙塞尔和阿尔伯斯
每个颜色都一样. color(hue, options) 给一个六分之一的颜色, wheel(steps, options) 财务报告和审定财务报表
shades(hue, lightness, options) 返回纯 DTCG 数据( 颜色组、 步骤) "1" 改为 "N"你传递给
createTokens 自己,还有 overrides(group) 将一个组变成覆盖对象 createGlobalTheme软件包
没有运行时间也没有 scope()喜欢 @ cssints/ ramp (英语) 和成套报告
@ cssints/ tokens (英语)一组是数据,所以它用任何名称, 坐在其他符号旁边 一个呼叫,
它的脚步得到 @property 规则、主题和 check.contrast 从csints.
// tokens.ts
import { createGlobalTheme, createTokens, media } from "cssints" with { type: "cssints" };
import { overrides, shades, wheel } from "@cssints/rybitten";
export const t = createTokens({
hue: wheel(12, { cube: "itten" }),
paper: shades(0, [1, 0.96, 0], { cube: "itten", saturation: 0 }),
});
// the paper and the ink swap in the dark
createGlobalTheme(t, media("(prefers-color-scheme: dark)"), {
paper: overrides(shades(0, [0, 0.04, 1], { cube: "itten", saturation: 0 })),
});
// text.ts
import { bg, check, cn, color } from "cssints" with { type: "cssints" };
import { t } from "./tokens.ts";
check.contrast(t.paper._3, t.paper._1, { min: 12 }); // the ink on the paper, light and dark
export const text = cn(color(t.hue._9), bg(t.paper._1));
说明 text.ts数字 :
@property --hue-9 {
syntax: "<color>";
inherits: true;
initial-value: #1699da;
}
@property --paper-1 {
syntax: "<color>";
inherits: true;
initial-value: #fdf6ed;
}
@layer _.k {
@media (prefers-color-scheme: dark) {
:root {
--paper-1: #1d1c1c;
--paper-2: #1e1d1d;
--paper-3: #fdf6ed;
}
}
}
@layer _.a {
._14bfx2y {
color: var(--hue-9);
}
._1j4wng5 {
background-color: var(--paper-1);
}
}
职能
color(hue, { cube?, saturation?, lightness? }):一发hue的六色. 修道院是画家轮子上的学位, 不是 HSL 轮 :0红色,120黄色,240蓝色( 缩写 :#e32421, (中文(简体) ),#f3e600, (中文(简体) ),#1699da),任意编号,360实值0。 。 。 . 饱和度是0改为1(默认)1· ;0给立方体的灰色。 轻而易举0改为1(默认)0.5:1这是 立方体为白色0它的黑色,因为 RYB 是减法(RYBitten'sinvertLightness) (中文(简体) ). 立方体是一个关键 瑞比顿的cubes映射( 默认)"itten"或者你自己的八个角落.wheel(steps, { from?, cube?, saturation?, lightness? })数字 :steps轮回均匀from学位 (默认)0:wheel(12)是它的十二个部分的圆,红色,红橙色,橙色,..."1"改为"12"。 。 。 .shades(hue, lightness, { cube?, saturation? })照这个顺序,"1"改为"N"数值。 与saturation: 0这是立方体自己的灰色尺度,从纸白色到墨黑.overrides(group)数字 :{ _1: hex, … }页:1createGlobalTheme,当csints读取一个以数字开头的密钥时.
一个团体不是一个对比坡道:一个立方体的颜色是它的制造者所描绘的,没有保证比例. 对a
必须通过的颜色 check.contrast,使用轮子作为底座 @cssints/ramp 对比斜坡,哪个
找到所需比例的阶梯( docs 站点按其口音进行此操作,见下文),或者如上检查一对.
立方体
cubes 是RYBitten自己的地图(import { cubes } from "rybitten/cubes": itten (默认), munsell, (中文(简体) ), bezold, (中文(简体) ),
goethe, (中文(简体) ), albers, (中文(简体) ), apple90s, (中文(简体) ), harris, (中文(简体) ), cmy,并附有标题,作者,年份和参考文献. 颜色 240 在其中四个国家:
| 立方体 | 蓝色 | 纸张 | 墨迹 |
|---|---|---|---|
itten | #1699da | #fdf6ed | #1d1c1c |
munsell | #3b8fab | #e4dac5 | #2e2c26 |
albers | #1161aa | #e7ebed | #000001 |
goethe | #5f9dbf | #efebe1 | #08090d |
限制
- 钉住.
rybitten属于1.3.0: RYBitten的合同不包括一个立方体的编号,即: 少量放出可能会被精炼出,因此一个颜色可以随升级而移动(测试针Itten's c角). - 出现错误 当对模块进行评估时, 它们是构建错误: 地图中没有的立方体
(单位:千美元)
@cssints/rybitten: no cube "nope" in RYBitten's cubes),不是数字、饱和度或外光度的调色调 0.1 (中文(简体) ),steps这不是1的完整数字. - 仅限 sRGB 十六进制. 立方体持有 sRGB 角,所以颜色在 sRGB (三线插值在
立方体,一个六分子是什么
check.contrast准确的读取, 类型接受便宜. - 没有和声. 一个补充是:
hue + 180一个三合会+ 120数字 :color(h + 180)步骤wheel(3)。 。 。 . - 编辑器显示
`#${string}`。 。 。 . 当模块运行时会计算一个值,所以其类型是十六进制字符串,而不是 文字(如@csints/ramp). 这些步骤是已知的(t.hue._13十二步轮是类型错误. - 类型成本. 一个步骤就是
`#${string}`表示像 @ cssints/ramp 的一步: 整个类型测试( 12个轮子, a) 运行为4个,他们的重置在主题中)是0.19 M分即时的tsgo,与斜坡的型号测试一样多. - 没有运行时间. 浏览器中选取的花样需要前方步骤之一(Docs网站每一步构建一个主题
a. 十二轮并带有属性的开关)或
rybitten本身在页面中,而该软件包不发送.
贷项
颜色数学和历史立方体 RY 由meodai(大卫·艾恩;麻省理工学院),a 这个包裹的依赖性,其许可证在此复制于LICENSE. 方块 引用其历史渊源:参见RYBITTEN的README.
cd packages/rybitten && bun run test # the colours and the errors, then a module through the engine (check.contrast passes, a hue on paper fails)
cd packages/rybitten && bun run typecheck # the type test (test/types/rybitten.ts)