清漆主题
漆色主题包含设计符号和AI2的基本CSS varnish 组件库.
使用漆色主题
首先,安装清漆-主题:
yarn add @allenai/varnish-theme
支助科
通过使用 CSS 导入到您的 CSS 文件,您可以使用 CSS 令牌或漆色 CSS @import。 。 。 .
如果设置了网络包装 css-loader,可以这样导入: 对于标志:
@import '~@allenai/varnish-theme/tokens.css' layer(varnish);
对于主要的CSS:
@import '~@allenai/varnish-theme/varnish.css' layer(varnish);
联合来文
我们提供一份你输入的JS文件.
import varnishTokens from '@allenai/varnish-theme';
贾森
我们提供的JSON文件类似于JSON文件.
在联署材料中输入:
import varnishTokens from '@allenai/varnish-theme/tokens.json';
简单无单位十六进制
如果你想要这个主题,只要有值,六角星的颜色, 和没有数字的像素提供的间隔符, 我们也提供.
import simpleVarnishTokens from '@allenai/varnish-theme/simple-hex-unitless';
毛里求斯 主题
如果您使用MUI, 漆色主题提供了一个预建的MUI主题集成:
import { varnishMuiTheme } from '@allenai/varnish-theme/mui';
发展
我们用 样式词典 财务报告和审定财务报表 样式-字典-用途 以创建导出的文件.
要添加或更改令牌,请在 tokens 文件夹。 要用您的新符号更新输出, 请运行 yarn workspace @allenai/varnish-theme build。 。 。 .
添加图标
首先,将您的 svg 文件添加到下面 icons 文件夹。 然后更新 tokens/assets/icon.cjs 与这个文件路径。 然后运行 yarn workspace @allenai/varnish-theme build
以彩色主题符号更新图像
进一步指示 这里
- 转到您的图像文档
- 单击左上角的图片按钮。 转到插件并安装 图格玛的托肯斯工作室 打开它
- 这里您可以看到您标志的视觉表现, 包括颜色, 间隔等 。 转到您想要编辑的符号并单击
{}按钮在右上方. - 这里将是一个可编辑的 JSON 文件 。 在此插入/ 编辑您的令牌 。 您可能需要格式化您的新符号, 以同样的 JSON 风格
- 点击“ 拯救 JSON ”
- 告诉设计师您更新了 Figma 的符号 。 没问题!