原子设计系统
Atom 产品的设计符号和反应组件. 与共享核心相同的组件 API; 信号品牌标志被烤入 tokens.css不包括外出产品外皮(圆/编辑)。 使用 light.css 雪光主题 主机装入 Onest + JetBrains Mono webfonts. (原始内容存档于2018-09-27).
安装
npm install @agentatom/design-system
使用量
import '@agentatom/design-system/tokens.css';
// optional:
// import '@agentatom/design-system/light.css';
// import '@agentatom/design-system/high-contrast.css';
import { Button, Input, Card, LocaleProvider } from '@agentatom/design-system';
软件包内容
共享组件 + 原子品牌标志 (Signal / Graphite / Onest).
不包括: 产品外皮 data-variant=round 编号 : data-typography=editorial那些船只在兄弟会的品牌包里 剩下的主机属性 这些皮肤是没有的.
字体合同
此软件包不嵌入字体二进制 . 主机装入webfonts(例如. public/fonts/),必须匹配CSS变量中的家庭.
| 作用 | CSS 变量 | 家属 | 文件( 主机) |
|---|---|---|---|
| 用户 | --font-ui | 顶上 | Onest-Variable.woff2 (英语) |
| 单曲 | --font-mono | 摩诺 | JetBrains Mono-Variable.woff2 (英语) |
主机还拥有产品铬(wordmark,favicon,平台 name)——而不是这个包.
字体二进制不在软件包中 。 主机必须装入字体 。 在公共/fonts(或等同)下保存 --font-ui / --font-mono。 包件不运送数据变量=圆形或数据-打字法=编辑.
语言
Chrome字符串(关闭,装入,.)默认为英语. 通过 LocaleProvider数字 :
import { LocaleProvider } from '@agentatom/design-system';
<LocaleProvider strings={{ close: 'Закрыть', loading: 'Загрузка' }}>
<App />
</LocaleProvider>
外观( 可选)
import appearance from '@agentatom/design-system/appearance.json';
// { brand, themes, variants, typography, density, fonts }
| 品牌 | 主题 | 变体 | 打印 |
|---|---|---|---|
atom | 轻、高相干 | —— 说 | —— 说 |
版本
1.4.100 双品牌出版从一个单一repo承诺。 套件内容=只适用于此品牌的表面.