@ 碳/ 颜色
使用碳设计系统的数字和软件产品的颜色
开始
要安装 @carbon/colors 在您的工程中, 您需要运行以下
命令使用 无数字 :
npm install -S @carbon/colors
如果你喜欢 雅伦,使用以下命令 相反:
yarn add @carbon/colors
使用量
你可以用这个 @carbon/colors 除了您的 JavaScript 模块
萨斯.
萨斯
在 Sass 中,您可以通过 :
@use '@carbon/colors';
// Another way if using `@carbon/react
@use '@carbon/react/scss/colors';
这些颜色变量遵循命名惯例: <swatch>-<grade>用于
示例:
colors.$blue-50;
colors.$cool-gray-10;
colors.$black-100;
colors.$white-0;
除了上面详述的颜色变量之外,我们还提供了一张颜色图,这样
您可以在程序上使用这些值。 这个地图叫做 $colors 财务报告和审定财务报表
每个密钥都是表的名称。 这些表的价值也是一种地图,但是
每个键现在都是等级。 在代码中,这看起来像如下:
$colors: (
'blue': (
10: #edf4ff,
// ...
)
);
Java 脚本
对于 JavaScript , 您可以导入并使用此模块 您的代码 :
// ESM
import { black, blue, warmGray } from '@carbon/colors';
// CommonJS
const { black, blue, warmGray } = require('@carbon/colors');
每个颜色表作为变量导出,每个颜色名也是 导出为可以通过指定等级调用的对象, 例如:
black;
blue[50]; // Using the `blue` object.
warmGray100; // Using the `warmGray100` variable.
实例
如果你想要更多关于如何使用的例子 @carbon/colors我们有一些
实例可以查看:
捐款
我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 贡献指南!
修改颜色值
颜色值定义于
tokens/colors.tokens.json 使用
DTCG 符号格式这是
包件唯一的真相来源—— 不编辑生成的文件
直接。 。 。 .
下列文件由样式词典在构建时生成,并应 不手工编辑 :
js/generated/colors.js编号 :js/generated/colors.d.ts- 联合来文的出口index.scss萨斯变量和地图
要添加或更新颜色:
- 编辑
tokens/colors.tokens.json - 运行
yarn build在此包中重新生成所有输出 - 运行
yarn test --testPathPatterns=packages/colors从 repo 根到 证实没有倒退
许可证
凭 Apache 2.0 许可证。 。 。 .
IBM 遥测
本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .