@yqg/design-tokens

@yqg/design-tokens

设计令牌包，提供统一的设计系统变量，包括颜色、字体、间距、阴影、圆角等设计元素。

📦 安装

npm install @yqg/design-tokens
# 或
pnpm add @yqg/design-tokens

🚀 使用方式

完整导入

@import '@yqg/design-tokens';

按需导入

/* 只导入颜色变量 */
@import '@yqg/design-tokens/src/color.css';

/* 只导入字体变量 */
@import '@yqg/design-tokens/src/typography.css';

📚 设计令牌分类

🎨 颜色 (color.css)

提供完整的颜色系统，包括基础色、功能色等。

.example {
  background-color: var(--func-bg-dark);
  color: var(--func-text-dark-primary);
  border-color: var(--base-yellow-900);
}

✍️ 字体 (font.css + typography.css)

基础字体变量 (font.css)

• 字体尺寸：--base-font-size-{10-60}
• 字体权重：--base-font-weight-{regular|semibold|bold|extra-bold}
• 行高：--base-line-height-{14-68}

字体组合 (typography.css)

使用 CSS font 简写属性，包含字体族 Poppins 及完整 fallback。

命名规则：

• --func-body-b{1-4}-{权重}: 正文文本
• --func-caption-c{1-2}-{权重}: 说明文本
• --func-headline-h{1-10}-{权重}: 标题文本

权重说明：

• r: regular (400)
• s: semibold (700)
• b: bold (900)
• e: extra-bold (900)
• ei: extra-bold italic (900 + italic)

使用示例：

.title {
  font: var(--func-headline-h1-b);
}

.body-text {
  font: var(--func-body-b1-r);
}

.caption {
  font: var(--func-caption-c1-s);
}

📏 间距 (spacing.css)

提供统一的间距系统：

.example {
  padding: var(--func-padding-page);
  margin: var(--func-padding-card-side-margins);
}

🔘 圆角 (radius.css)

统一的圆角规范：

.card {
  border-radius: var(--func-card-l);
}

🌫️ 阴影 (shadow.css)

提供多层级阴影效果：

.elevated-card {
  box-shadow: var(--func-white-card-shadow);
}

🏗️ 文件结构

src/
├── index.css          # 主入口文件，导入所有令牌
├── color.css          # 颜色变量
├── font.css           # 基础字体变量
├── typography.css     # 字体组合变量
├── spacing.css        # 间距变量
├── radius.css         # 圆角变量
└── shadow.css         # 阴影变量

🔧 开发指南

字体系统说明

项目使用 Poppins 字体族，字体文件需要在应用层加载：

/* 在应用的 global.css 中 */
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  src: url('./assets/font/Poppins-Regular.woff2');
}

@font-face {
  font-family: 'Poppins ExtraBold';
  src: url('./assets/font/Poppins-ExtraBold.woff2');
}

CSS 变量覆盖

可以在应用层覆盖设计令牌：

:root {
  /* 覆盖主色 */
  --primary-500: #custom-color;

  /* 覆盖字体族 */
  --base-font-family: 'Custom Font', sans-serif;
}