@ braight local/ tokens (英语)

亮相本地设计系统令牌包包含设计令牌,CSS变量,和Tailwind CSS v4预设.

兼容性

重要内容: 此软件包使用 Tailwind CSS v4 指令(@import "tailwindcss", (中文(简体) ), @theme inline, (中文(简体) ), @variant) (中文(简体) ). 没错 不兼容 与尾风 CSS v3.

安装

npm install @brightlocal/tokens --registry=https://npm.pkg.github.com

这个软件包被发布到 GitHub 软件包中. 您需要通过 GitHub 包的认证来安装 .

快速启动( 金色路径)

遵循这些步骤,将符号包整合到您的项目中:

1. 安装软件包

npm install @brightlocal/tokens tailwindcss@^4.1.18

2. 导入您 CSS 主文件中的预设

/* app.css / globals.css */
@import "@brightlocal/tokens/tailwind-preset.css";

此单导入给您 :

• 尾风 CSS v4 基础样式
• 所有语义色彩符号( 轻 + 暗模式)
• 类型、相距、半径和阴影符号
• 所有符号的尾风工具映射
• 自动托管字体 —— 说 @font-face 规则和woff2文件 Inter, Poppins, 盖斯·莫诺被捆绑起来 font-sans, (中文(简体) ), font-display,以及 font-mono 为终端用户正确渲染 无额外设置 (无谷歌字体) <link>,没有手动 @font-face) (中文(简体) ). 见 自动托管字体。 。 。 .

3. 启用暗模式

添加数据 .dark 分类到根元素 :

<!-- Light mode (default) -->
<html>
  <body class="bg-background text-foreground">...</body>
</html>

<!-- Dark mode -->
<html class="dark">
  <body class="bg-background text-foreground">...</body>
</html>

4. 与 @brightlocal/ui-components

import { Button } from "@brightlocal/ui-components/button";

// Components automatically use the semantic tokens from the preset
<Button variant="default">Primary Action</Button>

使用量

核心托肯( CSS 变量)

导入单个令牌 CSS 文件用于颗粒控制 :

@import "@brightlocal/tokens/core-tokens/colors.css";
@import "@brightlocal/tokens/core-tokens/spacing.css";
@import "@brightlocal/tokens/core-tokens/typography.css";

尾风 CSS 预设

/* Standard preset (recommended) */
@import "@brightlocal/tokens/tailwind-preset.css";

/* Lab preset (experimental features) */
@import "@brightlocal/tokens/tailwind-preset-lab.css";

可用出口

调试引用

语义色彩

设计系统使用 语义色彩符号 ——不是原始调色板值. 总是使用这些 :

状态颜色

带有 CSS 自定义属性

.my-component {
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.my-button {
  background: var(--primary);
  color: var(--primary-foreground);
}

带有 Tailwind CSS 公用事业

<!-- Page layout -->
<div class="bg-background text-foreground min-h-screen">

  <!-- Card -->
  <div class="bg-card text-card-foreground rounded-md border border-border p-4">
    <h2 class="text-lg font-semibold">Title</h2>
    <p class="text-muted-foreground text-sm">Description</p>
  </div>

  <!-- Button -->
  <button class="bg-primary text-primary-foreground rounded-md px-4 py-2">
    Click me
  </button>

  <!-- Destructive action -->
  <button class="bg-destructive text-destructive-foreground rounded-md px-4 py-2">
    Delete
  </button>
</div>

类型

使用 font-display 包含标题的文本大小和重量工具:

字体家族 : font-sans (机构间), font-serif (格鲁吉亚), font-mono (Geist Mono), (英语), font-display (诗)

自动托管字体

预设的舰只自行托管 @font-face 声明和woff2文件 3个品牌字体,所以它们为终端用户制作 字体不为 本地安装且无需任何 CDN 请求。导入 @brightlocal/tokens/tailwind-preset.css 不需要谷歌 字体 <link>,没有手动 @font-face。 。 。 .

被捆绑的重量(纬度子集,正常样式, font-display: swap:

这些覆盖了设计系统通过改变字体的重量而使用的每个重量 比额表(font-normal - 300个, font-medium - 400个, font-semibold − 500人, font-bold - 600个, font-extrabold – 700). 罕见的极端(100/200/800/900), 为保留有效载荷而故意省略了斜体和非正线子集 体积小;它们回到最接近的重量. font-serif 使用该 佐治亚系统堆栈,并非自行托管.

Woff2 文件由您的捆绑者( Vite, Next.js等) 作为资产发布 懒惰的每个重量——消费者只下载实际的重量 使。 。 。 字体在SIL Open Font许可证1.1下获得许可(见 *-LICENSE.txt 文件已运入 fonts/) (中文(简体) ).

边框半径

AI 使用规则

见 AI USAGE.md (英语) 对于完整的AI使用指南,包括语义符号引用,常见错误,以及设置指令.

关键规则 :

1. 从不硬码颜色 – 总是使用语义符号或者它们的 Tailwind 等效工具
2. 使用 bg-background text-foreground 作为页面基线
3. 比调色板还偏好语义符号 ——使用 bg-primary 没有 bg-blue-600
4. 暗模式使用 .dark 类 ——指使自动切换,无手动操作 dark: 所需变式
5. 导入预设 - 单身 @import "@brightlocal/tokens/tailwind-preset.css" 提供一切

发展

这个软件包是亮相本地设计系统单列波的一部分. 键是生成自 托肯斯工作室 定义 src/core-tokens/tokens-studio/。 。 。 .

构建管道: Tokens Studio JSON → 样式词典 → CSS变量 → Tailwind v4 预设

# Build all tokens (from packages/tokens/)
pnpm build:tokens

# Full build (tokens + copy to dist + tokens.json)
pnpm build

# From monorepo root
pnpm --filter @brightlocal/tokens build

仓库

GitHub 仓库

许可证

私人软件包——仅使用亮度本地内部.