@ campfire- 交互/ 设计托盘
营火套房中每一共同价值的真相来源——颜色,类型,
相距、光度、阴影、运动、z指数、图表序列和铬维度——
作为 CSS 自定义属性 --cfi- 前缀.
tokens.css 来源; tokens.json 由它生成
scripts/generate.mjs 并解决 var(--cfi-app-*, fallback) 链到
非CSS消费者的字词.
0.2.x是重写,收养尚未开放
0.1.1有42个代币. 0.2.0有148个,分三层,并有选入的黑暗主题. 语义命名是 未结算 直到多个应用程序迁移到 所以把这些名字当作动产.
一个名字已经移动: 橙色坡道是 --cfi-color-orange-*,重新命名为
--cfi-color-primary-*。这个文件中的 Raw 缩略图由 hue 命名,所以一个角色单词
在调色板插槽中读作"主颜色"——这就是按钮最终的结局
电线接通了 这是主数据 和pim的应用身份颜色。 颜色
无论你按什么 --cfi-action。 。 。 .
3个已出版的软件包仍以文字背书引用旧名
(单位:千美元)shell-header, (中文(简体) ), side-nav, (中文(简体) ), volume-intelligence-ui这一点是故意的:
他们自作主张
他们今天所做的一切 没有提供别名,因为别名可以解决
volume-intelligence-ui应用程序导入时蓝色按钮为橙色
这个文件.
^0.1.1 并不确定为0.2.0——1.0以下的护身符从不跨越未成年人——
所以没有什么是偶然的 弹出到 ^0.2.0 是一种故意的行为,
城门就在里面 CLAUDE.md。 。 。 .
安装
npm i @campfire-interactive/design-tokens
// once, at the app entry point, BEFORE the app's own stylesheets
import '@campfire-interactive/design-tokens/tokens.css';
宣称依赖性本身并不能起到什么作用。 这是11人的附属关系
前端且无前端导入 --cfi-* 达到的变量
仅仅因为 shell-header 财务报告和审定财务报表 side-nav 把他们自己的用途捆起来.
导入样式表, 否则没有符号 .
三层,哪一层可以参考
- 原始比例 —— 说
--cfi-color-gray-500, (中文(简体) ),--cfi-font-size-sm。调色板值. 只有在定义语义符号时才会引用这些符号 . - 语义作用 —— 说
--cfi-surface, (中文(简体) ),--cfi-content-muted, (中文(简体) ),--cfi-border, (中文(简体) ),--cfi-action,焦点戒指, 覆盖. 这就是CSS的组件 应用. 一个通过这些部分变成生灰色的组件不能是 以暗模式重取主题并中断 . - App 覆盖 —— 说
--cfi-app-primary还有朋友 应用程序自己的身份 颜色,为外壳徽章. 把这些设定在消耗的应用程序中.
两种颜色,两种工作
--cfi-action 是套房的颜色 任何你按的——按钮,链接,
焦点环,所选行。 它的价值是 omsf 的 #030213,因为 omsf 是
用于主样式的参考。 它在每一个应用程序中都是相同的,这就是它的重点.
--cfi-app-primary 是应用程序的身份颜色,它唯一的工作是应用程序
外壳头的徽章加上应用切换器中的瓦片。 犬类价值
每个应用程序是 color 输入 shell-header是因为 appCatalog。 。 。 .
别把一个指向另一个. 将按钮接入应用程序颜色 同一个主按钮紫罗兰在一个应用, 天蓝色在另一个,indigo在一个 第三——与设计系统相反.
黑暗模式是选入
<html data-theme="dark"> <!-- explicit -->
<html class="cfi-theme-auto"> <!-- follow the OS -->
都不是偶然的,所以把这个文件添加到一个从未有过的应用程序中 被认为是黑暗模式不能改变它今天的样子.
状态颜色
每一个语义花朵都带有一个 -soft 背景资料和a -text 前景
开会4.5:1反对。 用对相. bg-[#10B981]/10 text-[#10B981] - 那个
形状有几种应用——接近2:1的土地.