@ bitbaum/ 设计指针
设计 单一真相来源 给奥兰治卡特,洛基和索隆.
一个文件—— tokens.css 定义每一种颜色、类型、重量,
跟踪,半径和共享原始 三种产品使用。 他们进口的.
无所复制.
为什么
这些道具曾经被手工复制成三回,并漂出. 索伦的
globals.css 背着一条评论 声称它的标志 匹配橙色猫的时
共享 零 名称或价值 ——所以这三种产品看起来像
三个不同的公司。 复制漂移; 无法导入 .
重排整个堆栈
- 编辑标记的块
▼▼▼ THE KNOBS ▼▼▼内tokens.css或更新可选内容composition.css接口改进合同. - 弹出
package.json版本 财务报告和审定财务报表 设置匹配的清晰.github/release-request.txt; 提交公关和密码包 CI. - 一个成功的 主干线推 CI 触发
tag-approved-release.yml。它只标记最近核实的 SHA ,并且从未重写已有的版本标签. - 标记工作流程明确发送
publish.yml; npm 出版仍然由NPM_PUBLISHING并且需要可信出版的靴子 如果变量关闭, 则存在 Git 标记, 但是 无 npm 发布 被索赔. - 将消费者升级到确认的Git标签,发布npm版本,或精确的源承诺SHA;运行其被冻结的锁文件CI.
一次性发布请求不会自动批准未来的版本出错:请求必须与表单版本相匹配.
更改显示类型为 单行数字 :
--font-display: "Instrument Serif", Georgia, serif;
--font-display-weight: 400; /* the face's weight lives WITH the face */
--tracking-display: -0.015em; /* and so does its tracking */
安装
// package.json
"@bitbaum/design-tokens": "^1.2.0"
// app/layout.tsx — import BEFORE the app's own globals.css
import "@bitbaum/design-tokens/tokens.css";
import "./globals.css";
// tailwind.config.js (v3)
module.exports = {
presets: [require("@bitbaum/design-tokens/tailwind-preset")],
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
};
尾风 v4 应用程序消耗 tokens.css 结束 @theme; 变量名称为
完全相同,所以两条路径保持同步.
可选跨产品构成语法
这个 品牌标志 属于奥兰治卡特/洛基/索隆. 它们共享的调色板绝不应强加于无关的产品,或 客户网站.
间隔、控制大小、视觉节奏和互动 决定, (中文(简体) ),
composition.css 是选入的, 命名空间层。 它没有定义字体,品牌
颜色、体型或全局重置.
// App Router — load AFTER the app's CSS reset and BEFORE product CSS modules.
// The shared classes intentionally use :where() specificity, so importing
// them before a later universal '*' padding reset would erase their padding.
import './globals.css';
import '@bitbaum/design-tokens/composition.css';
<main className="bb-frame">
<div className="bb-stack" style={{ '--bb-stack-gap': '1.5rem' }}>
<div className="bb-measure">A product-specific headline and description</div>
<div className="bb-actions">
<a className="bb-button bb-button--primary" href="/start">Get started</a>
<a className="bb-button bb-button--secondary" href="/method">Read the method</a>
</div>
</div>
</main>
仅绘制小缝隙 语义 CSS角色一次在每个应用程序中:
:root {
--bb-action-bg: var(--color-action);
--bb-action-fg: var(--color-on-action);
--bb-control-bg: var(--color-surface);
--bb-control-fg: var(--color-text);
--bb-line: var(--color-border);
--bb-muted: var(--color-text-muted);
--bb-focus: var(--color-focus);
}
导出语法包括: bb-frame, (中文(简体) ), bb-measure, (中文(简体) ), bb-section, (中文(简体) ),
bb-stack, (中文(简体) ), bb-cluster, (中文(简体) ), bb-grid, (中文(简体) ), bb-actions, (中文(简体) ),
bb-choice-row, (中文(简体) ), bb-list, (中文(简体) ), bb-keyline, (中文(简体) ), bb-tabular, (中文(简体) ),
bb-control, (中文(简体) ), bb-button,以及 bb-skip。 。 。 .
它保证了44px控制,可见的焦点,反应的等细胞选择, 和减少运动支持。 Apps自有打字,颜色,间隔调整, 组件及其内容。 执行 没有 将所有信息制成卡片: 语法刻意提供白地和发线列表.
释放合同: 新组成子路径首先出现在
源版本 1.2.0· ; v1.1.0 已经 没有 包括它。 经核实
标记管道只标记明确要求的版本
.github/release-request.txt 在主CI为绿色后. 校验
v1.2.0 Git ref 和登记簿在分别索赔之前为
发表。 在此之前,使用经核实的准确承诺SHA. 现有
tokens.css 消费者不通过选择退出而改变外观.
合同
组件声明 意图从来没有机械.
| 执行 | 别 | 为什么 |
|---|---|---|
className="font-display" | font-['Instrument_Serif'] | 脸不是组件的生意 |
className="font-display" | font-display font-bold | 显示面部 一个重量; 一个被合成的粗体看起来便宜 |
className="bg-surface-base" | bg-[#1c1c1c] | 重用药不能要求找到六分法 |
className="text-accent" | text-[#ff5c00] | 一个动作颜色, 一个定义 |
bg-accent text-on-accent | bg-accent text-white | 口音为白色 3.10:1 (中文(简体) ) 而AA失败;相配的墨水为 6.10:1 |
className="tabular" | —— 说 | 变化的号码不可抖动 |
font-display 年 月 时text-2xl | font-display text-lg | 24px以下的高相接缝为: 轻点 胜过身体和等级的颠倒 |
className="wordmark" | font-display 在标志上 | 大写 + 打开跟踪是显示所幸存的小尺寸 |
在每道雷波的设计门上执行 所以漂移失败了建造而不是 静静地运输.
类型
自动托管( latin + latin- ext), 不向 Google 请求运行时间 :
| 作用 | 脸 | 重量 | 卡莉丝 |
|---|---|---|---|
| 显示 | 文书塞里夫 | 仅400 | 头条、 字签 |
| 萨斯语 | 间 | 400-700个变量 | 所有UI和正文文本 |
| 单 | IBM Plex 单曲 | 400、500个 | 地址、签名、散列、清点 |
这三个都是SIL开放字体许可证.
生成图像的面相( E)next/og(中文(简体) )
没有 fonts,下一个/og's ImageResponse 画与地质常数
捆绑, 对于任何字符, 没有字体覆盖它要求 fonts.googleapis.com
(和 cdn.jsdelivr.net 当图像被绘制时:
预先交出一个图像,或绘制一个图像的服务器,然后取决于Google
关闭一个emoji 失败整个图像。 换句话说
import { ogFonts, ogText } from '@bitbaum/design-tokens/og';
return new ImageResponse(<Card title={ogText(post.title)} />, {
...size,
fonts: await ogFonts(),
});
ogFonts()是Geist 400, 下一个/og会用到的脸, 所以图像是 不变.ogFonts('inter:400,600')或者说ogFonts('inter')(每个重量) 名称;每个字体以其家族命名,以及 afontFamily没有字体返回到第一个字体.ogText(text, ...specs)撇开面部的画 一个字 缺少一个字母(另一个脚本)整体,一个emoji或自己的符号. 使用 它在文本上,图像不控制,例如名称或标题来自 数据库.- 对于这种文本,请在Geist之后通过Inter:
ogFonts('geist', 'inter:400')财务报告和审定财务报表ogText(text, 'geist', 'inter:400')佐藤里和Geist一起画画 然后拿走 Geist 缺少(希腊语、越南语、 、多发箭头) 获取; 盖斯特画像以前一样 . - 渲染器既不读取WOFF2,也不读取可变字体,所以这些字体是静态的
在联署材料模块中作为WOFF存储的实例(
og/faces/: 任何运行时间(对接或 节点),任何捆绑者都会导入它们,一条路线只装入面孔 名称。 已装运:Geist 400、Inter 400和600。 一张它缺少的相貌会增加OG_FACES内scripts/og-fetch-fonts.mjs并释放,而永不取出.
下一个应用程序的面孔( Y)next/font/local(中文(简体) )
next/font/google 下载其面部时 next build,所以一个建筑失败
当Google字体不回答时。 舰队的应用软件使用舰只
fonts/<face>/ 换句话说,除了它 OFL.txt,以及
fonts/faces.json 列出每个文件的子集,
样式、重量范围、, unicode-range sHA-256 Google提供以下服务:
| 脸 (斜口) | 重量 | 样式 | 子集 |
|---|---|---|---|
中间inter(中文(简体) ) | 100-900变量 | 常规 | 拉丁文、拉丁文、西文、希腊文、希腊文、西文 |
格罗特斯克航天公司space-grotesk(中文(简体) ) | 300-700变量 | 常规 | 拉丁语、拉丁语、vietnames |
IBM Plex Mono (英语:ibm-plex-mono(中文(简体) ) | 400、500、600个 | 常规 | 亚铁、亚铁、克力克、克力克、克力克 |
女士们fraunces(中文(简体) ) | 100-900变量 | 正常, 斜体 | 拉丁语、拉丁语、vietnames |
科莫朗·加拉蒙德(签名)cormorant-garamond(中文(简体) ) | 300-700变量 | 正常, 斜体 | 亚铁、亚铁、克力克、克力克、克力克 |
马克·桑斯(DM Sans)dm-sans(中文(简体) ) | 100-1000变量 | 常规 | 拉丁语,拉丁语 |
盖斯特( Geist) (geist(中文(简体) ) | 100-900变量 | 常规 | 亚铁、亚铁、克力克、克力克、克力克 |
盖斯特·莫诺(Geist Mono)geist-mono(中文(简体) ) | 100-900变量 | 常规 | 拉丁文、拉丁文、西里尔文、西里尔文、符号2、vietnamese |
JetBrains Mono (英语:jetbrains-mono(中文(简体) ) | 100-800个变量 | 常规 | 拉丁语、拉丁语、西里尔语、希腊语、西里尔语 |
蒙特塞拉特(montserrat(中文(简体) ) | 100-900变量 | 常规 | 亚铁、亚铁、克力克、克力克、克力克 |
next/font 在调用模块中只使用字面选项, 而只使用一个调用
携带一个 unicode-range,所以应用程序从命令中获取其字体模块
而不是从援助者那里
pnpm exec design-tokens-next-fonts src/app/fonts.ts \
'sans=inter;variable=--font-inter' \
'display=space-grotesk;weight=500,700;variable=--font-space-grotesk'
// app/layout.tsx
import { display, sans } from './fonts';
<html className={`${sans.variable} ${display.variable}`}>
脸后键 : weight= (默认:整个范围), style= (默认)
normal, (中文(简体) ), variable=, (中文(简体) ), subsets= (默认:全部发运), preload= (默认)
latin· ; none, (中文(简体) ), display= (默认) swap, (中文(简体) ), hinting=on (真实的玩具)
文件在 fonts/<face>/hinted/,该 Google 在 Windows 上为当前 Chrome 服务
或 Linux; 默认为未插件 next/font/google (下载). 它写了一个 localFont 调用
每个子集,按Google的顺序:相同的文件、权重、样式、范围以及
预装 next/font/google 制作,格式化 与应用程序自己的更美.
文件的头一行是写它的命令; 添加 --check 改为
当文件和软件包有分歧时失败。 有两件事和谷歌不同
既不更改已提供页面:家族以导出( Turbopack) 命名
忽略一个 font-family 声明在 .variable),而倒地相会是:
从文件而不是Google的表格中测量.
node scripts/fetch-fonts.mjs (仅保存者,从未在建筑中)
文件到这里: 它问Google究竟什么 next/font/google 问及其
用户代理.
为什么是静脉
每个AI和基础设施公司都在同一暗黑的黑幕里竞争 奇特的大会,其中的胜利者 谁拥有最大的设计预算. 一种高度矛盾的Serif退出了这种比较:它读作体制性而非 启动,它完全适合一个堆栈,其产品是 合法性 —— 说 签名的表决票,可核查的国库, 唯一的附件审计线索.
部分 位点 开放的AI-本土产品 在苏黎世建造的基础设施。 这里的每个软件包都列出使用该软件的应用程序: 应用程序使用设计键。 。 。 .
数据地图
--map-scale-1 . --map-scale-7 是一个按顺序排列的尺度
和弦(平分,从阴向光;六分,所以是SVG) fill 把他们当作是.
光亮在每一步都上升,所以天平能活下来
和灰度; test/contrast.test.js 保持这样. --map-no-data 财务报告和审定财务报表
--map-boundary 遵循主题。 不止一个当局声称的领域
已孵化,从不给它自己的颜色: --map-hatch-width
每个 --map-hatch-gap 时间 --map-hatch-angle,在文本颜色中。 颜色是
从来没有唯一的载体:每张地图都有列表和传说.