@lovince /令牌
Lovince UI的原始设计值：颜色原语，空间，半径，类型， 运动，模糊和分层。它们在这里决定一次，然后在其他包中决定一次 消耗。没有依赖关系。
状态:
0.3.0、实验。 令牌名称以前可能会更改1.0.
bun add @lovince/tokens
符号没有任何意义。 --lovince-blue-600 是一种颜色，不是“口音”。
意义来自于 @lovince/themes，它映射了这些原语
再来看语义角色。大多数应用程序两者都需要。
三层
| 层 | 包 | 例子 | 谁引用了它 |
|---|---|---|---|
| 原始的 | @lovince/tokens | --lovince-blue-600， --lovince-space-4， --lovince-duration-enter | 主题和非颜色比例的组件 |
| 语义 | @lovince/themes | --lovince-color-surface， --lovince-color-accent | 组件 |
| 组件 | 每个包 | --journey-primary | 消费者覆盖一个组件 |
重新命名编辑原语。暗模式编辑语义。两者都不触及组件。
使用它
@import '@lovince/tokens/tokens.css';
.panel { padding: var(--lovince-space-4); border-radius: var(--lovince-radius-lg); }
import { duration, ease, space, contrastRatio } from '@lovince/tokens'
gsap.to(el, { duration: duration.enter, ease: ease.out.gsap })
每个选择器都被包裹在 :where()，所以很简单。 :root { --lovince-… }
无论导入顺序如何，Override总是获胜。
决定
- 面板: 板岩中性蓝600 (
#2563eb)作为品牌重音； 红色，绿色和琥珀色代表地位，都在OKLCH中。 - 空间 是4px的比例。 持续时间 坐在40毫秒的台阶上： 按120·快160·微200·状态280·变形360·进入440· 覆盖560·行程720。每个ease都附带相应的GSAP，所以是CSS 和JS的动议从不反对。
- 类型 由角色(
title-md，body-sm)，而不是按大小。字体 默认为系统堆栈；集--lovince-font-sans给产品打上品牌 - 重楼: 没有什么比五百磅更轻的了。
编辑
来源是 src/. css/tokens.css 生成：运行 bun run generate
从存储库根目录，不要手工编辑。如果提交，则测试失败
文件从源漂移。
许可证
麻省理工学院