设计系统
Filip用于任意框架的设计语言: spec,指使,组件目录,以及编辑主题. 它作为npm的包裹 @filipgutica/design-system。 。 。 .
- 探员 起来
language/时间~/design-system通过 filip-stack 主机配置,或从软件包复制; 站点 探员 两者都有. - Vue 应用程序 可使用
@filipgutica/ui,一个基于这个设计系统的Vue组件库. - 站点 : https://filipgutica.github.io/design-system/ (中文(简体) ) 拥有概览、基础和组件页面,以及
index.json财务报告和审定财务报表llms.txt对特工.
目录
| 路径 | 它所持有的 |
|---|---|
language/ | 有效载荷: DESIGN.md, (中文(简体) ), components.md, (中文(简体) ), decisions.md, (中文(简体) ), visualizations.md, (中文(简体) ), tokens.css,目录(components.html),示例页面,可视化帮助器,以及Graphite Indigo编辑器主题 |
tokens/core.json, (中文(简体) ), tokens/themes/*.json | 象征价值,一个价值存在的唯一地方,以及每个象征的角色. Core 持有每个符;每个主题文件只持有它的名称,一个音符,它的发音对和可选字体 |
scripts/build-tokens.mjs | 符号生成器: 写 language/tokens.css 财务报告和审定财务报表 dist/ |
scripts/build-site.mjs | 网站建设:写道: site/ gitHub 页面从 components.html,标志,和 package.json |
dist/ | 生成主题文件, JSON, 和 JavaScript |
fonts/ | IBM Plex 拉丁语 woff2 文档, fonts.css及其海外资产管制局许可证 |
tests/ | 有效载荷、标志和场地建造的警卫测试、反应烟雾测试以及目录和已建成场地的行为测试 |
要更改一个值, 请编辑 JSON 并运行 pnpm tokens:build。 。 。 . pnpm tokens:check 当生成的文件 stale 或者一个符号没有作用时失败 .
pnpm site:build 将网站写入 site/。它从最新版本读取 ds-v* 标签,所以它需要 标签在离职.
安装
npm install @filipgutica/design-system
| 导入 | 这是什么 |
|---|---|
@filipgutica/design-system/tokens.css | 所证相相相. 暗模式随之而来 prefers-color-scheme; 设置 data-theme="light" 或者说 "dark" 打开 <html> 以覆盖它. |
@filipgutica/design-system/themes/*.css | 主题的身份输入( 色相和字体) : graphite-indigo (默认, 已经存在) tokens.css, (中文(简体) ), mauve,或 pine后装入一个 tokens.css打开 :root。 。 。 . |
@filipgutica/design-system/fonts.css | IBM Plex Sans和莫诺. |
@filipgutica/design-system | tokens (每个主题和模式的解析值)和 cssVar(name),有类型. |
@filipgutica/design-system/tokens.json | 解析值为 JSON . |
@filipgutica/design-system/language/* | 光谱、目录和实例页. |
在反应应用程序中,导入 tokens.css 财务报告和审定财务报表 fonts.css 在条目中写一次 var(--color-text) 样式,或 cssVar('color-text') 在类型脚本中. tests/react-smoke/ 是一个实例.
开发
corepack enable
pnpm install --frozen-lockfile
pnpm verify
pnpm verify 检查生成的文件,运行测试,反应烟雾测试,以及目录测试(查找、快捷键、位置、抽屉、溢出和轴),然后 pnpm pack --dry-run 财务报告和审定财务报表 publint。浏览器测试需要铬: pnpm exec playwright install chromium。 。 。 .
释放
语义出版 main 与npm出处。 发布会保持1.0.x,而设计系统没有外部用户(决定d,版本中:
- 任何释放行为,例如:
fix, (中文(简体) ),feat,或中断更改,释放补丁. - 释放注释中只在其承诺消息中指定中断更改
!类型或一个类型之后BREAKING CHANGE:或者说BREAKING-CHANGE:脚指. 把它放在那里;一个标记只在PR正文中释放出一个补丁,但没有到达注释. build, (中文(简体) ),chore, (中文(简体) ),docs, (中文(简体) ),test,类似类型则不释放任何东西,除非该承诺或其公关标志着突破性的变化.- 释放标签是
ds-v*编辑v1.0.0– 说吧 –v2.4.0标记和npm版本是更早的系列.
承诺遵循常规承诺,CI通过承诺进行核查。 不要用手编辑版本 .
历史
language/ 来自 host-config/design-language/ 内 纤维堆及其历史。 JSON, 生成器, 和字体来自 欧。 。 。 .
许可证
麻省理工学院. IBM Plex 字体在 fonts/ 正在 SIL 打开字体许可证下;参见 OFL-*.txt 旁边的文件。 编辑器主题 : language/editor-themes/graphite-indigo/ 来源于 Visual Studio 代码的默认主题; 参见其 LICENSE 财务报告和审定财务报表 THIRD_PARTY_NOTICES.md。 。 。 .