@brignano /设计
共享设计系统的每一个布里尼亚诺表面 brignano.io, life,
homelab, driftwood,以及接下来发生的一切。
| 文件 | 它是什么? |
|---|---|
DESIGN.md | 从这里开始。 规则是,三层颜色,两层,类型,动作。 |
DECISIONS.md | 为什么这些值是这样的。药物不良反应。 |
tokens.css | 颜色,类型,空间,形状,运动的单一真理来源。 |
tokens.chart.css | 经过验证的数据分类调色板。 |
product-page.css | 产品营销页面的结构:标题、论文主角、编号故事、结束语。设计。md§13;骷髅 previews/product-page.html. |
previews/ | 活样本。在浏览器中打开一个以查看令牌的呈现。 |
它的形状
三层,所以没有一种颜色有两种作用:
--mark——身份。落叶松琥珀。在轨迹和字母组合上墨水。从来没有控制过。--i-*——给养。钴。链接,按钮,焦点,选择。语义上的惰性。--success / --attention / --danger——国家。传统的色调,总是有一个图标和一个单词。
独特性存在于标记中;常规存在于控制层。
使用它
npm install @brignano/design
@import '@brignano/design/tokens.css';
@import '@brignano/design/tokens.chart.css'; /* only if the surface has charts */
光和暗跟随操作系统,直到有东西设置 data-theme="light" 或者
"dark" ——在 <html> 对于整个页面,或任何元素的主题
(设计部分。md§11)。每种颜色都是单一的 light-dark() 声明,这是
需要从2024年中期或以后的浏览器。
工具层是默认的。一个营销表面选择与
class="tier-marketing" 在 <html>,这将解锁显示面并打开
类型的规模。各层的颜色是相同的。
预览
previews/ 每个区域保存一个页面——颜色、字体、标高、控件、反馈、图表、
的地位。每个渲染它的主题两次,一次在观众的主题,一次在一个
被迫黑暗的地面,所以两者之间的漂移显示没有切换任何东西。
没有构建步骤:打开文件。
每个预览都以卡片标记打开:
<!-- @dsCard group="Foundations" -->
第一行是什么 claude.ai /设计 设计系统项目读到
建立其卡片索引- group 成为设计系统中的节标题
窗格。这些标记是注释,所以当页面打开时,它们不需要花费任何费用
本地。
与此类项目的同步将保持此布局 - - - - - - tokens.css 在项目中
根, previews/ 比它低一层。 _preview.css 用
@import '../tokens.css' 与其携带自己的副本,不如因为一秒
令牌的副本是此回购存在的目的。交易是这样的
父引用是承重的:将上传的bundle和每一个都扁平化
预览呈现无样式。
为代理
读 DESIGN.md 在造型之前。使用代币。 永远不要硬编码一个十六进制
外 tokens.css -文字在主题改变后会默默存在,这就是为什么
life几个月来,他的状态药丸在暗模式下呈浅灰色。
状态
0.x,而且是故意这样做的。 brignano.io 消耗; life, homelab 和
driftwood 还没有。令牌 的名字 可当那些土地还在移动的时候,还有一个 0.x
Range很清楚地说明了这一点——加一个插入符号 0.x 把未成年人钉住,所以 ^0.1.1 不会
默默拿着破名的方式 ^1.1.0 会。 1.0.0 被切断的时候
名字是不会变的,不是约会的时候。
版本跟踪 令牌而不是管道。只更改的版本 打包或文档是一个补丁;次要项为第一个版本保留,其中 有些东西看起来确实不一样。
释放
标签是触发器。 .github/workflows/publish.yml 发布到NPM上
v* 标签,检查后与标签一致 package.json - NPM版本是
不可变的,所以不匹配在永久之前被捕获。
npm version minor # bumps package.json, commits, tags
git push --follow-tags
发布是由CI完成的,而不是在笔记本电脑上。这里没有任何npm令牌 不应该有一个——运行者交换它的OIDC身份 通过NPM获取短暂的凭证 信任的出版,这也是 产生来源证明。笔记本电脑没有这样的身份。
这个工作流叫做 publish.yml 在每个发布包的repo中,
这并不是装点门面。 npm的可信发布者表单采用这个工作流
文件名作为OIDC索赔的一部分,并提供 publish.yml 作为它的例子。任何
其他名称是一个值,你必须记住正确的,从GitHub方面,而
在NPM端填写表格。弄错了就失败了 ENEEDAUTH ——npm
拒绝交换, npm publish 回归到象征性的真实,没有
令牌——既不命名工作流,也不命名不匹配项。匹配工具
违约比每次都做对要便宜。
设置一个新包:create .github/workflows/publish.yml 从这个,
然后添加可信的出版商npmjs.com -出版商GitHub行动,组织
和repo,工作流文件名 publish.yml, 环境名称,因为
这些工作流声明no environment:. 在第一个标记之前配置它,或者
第一次发布就像这次一样失败了。