@ 碳/ 样式
碳设计系统样式
开始
要安装 @carbon/styles 在您的工程中, 您需要运行以下
命令使用 无数字 :
npm install -S @carbon/styles
如果你喜欢 雅伦,使用以下命令 相反:
yarn add @carbon/styles
此软件包需要 达特萨斯 以达到 编译. 用这个 Sass 模块 组织工作 代码库和提供出口供使用.
如果你是Sass的新人 或者想知道如何为您的项目配置Sass, 我们建议检查下列资源和联系:
一旦你得到萨斯 并运行在您的项目, 确保配置萨斯
包含 node_modules 联合国 includePaths 选项。 有关更多信息,
检查 配置 在我们的萨斯
医生.
使用量
通过包含碳设计系统,可以带来所有样式
@carbon/styles 在你的萨斯文件。 例如:
@use '@carbon/styles';
如果您只想从Carbon中引入特定的组件,您可以 以类似方式导入它们:
@use '@carbon/styles/scss/reset';
@use '@carbon/styles/scss/components/accordion';
@use '@carbon/styles/scss/components/button';
@use '@carbon/styles/scss/components/checkbox';
也可以包括来自Carbon的各种助手,例如: CSS重设,网格,断点帮助器等等. 你可以包括这些类似 如何带入组件 :
// Bring in the CSS Reset
@use '@carbon/styles/scss/reset';
// Bring in the CSS Grid
@use '@carbon/styles/scss/grid';
要更多地了解各种帮助者 @carbon/styles 提供, 退出
用于我们
Sass 文档。 。 。 .
替换字体
碳是IBM Plex设计、测试和调制的。 我们不建议 替换碳字型。 如果您绝对需要使用不同的 类型面,你需要把它当作一个构建时间 Sass定制 应用程序拥有。 没有支持运行时类型面覆盖 预建/CDN碳样式.
[尖叫声] 冒险使用
覆盖碳型面具有广泛的设计和无障碍性 影响。 碳类型样式的调取 与IBM Plex 的度量衡, 包括行高、字母间隔、重量、格子比例、结子等, 和退后的行为。 替换类型面可以改变布局,包装, 密度、可读性和相互作用状态。 它可以是一个重要的设计 并努力使另一打字机工作正确跨越 应用.
要使用有不同类型面的Carbon,需要三件事:
- 关闭碳的棱镜
@font-face生成 - 改变根
font-family定义 - 自己供应
@font-face规则
你可以通过配置 Sass 入口来完成前两个
应用程序编译。 此配置必须在其他配置之前发生 @use 联 合 国
碳sass模块.
@use 'sass:string';
@use '@carbon/styles' with (
// Turn off Carbon's Plex `@font-face` generation
$css--font-face: false,
// Change the root `font-family` definition(s)
$font-families:
(
'sans':
string.unquote(
"'Inter Local', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
),
'mono':
string.unquote(
"'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace"
),
'serif':
string.unquote(
"'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif"
),
// Include any other Carbon font family keys your application compiles.
)
);
$font-families 不与Carbon的默认合并。 如果您配置此选项
地图,包括您编译的样式需要的每个家族密钥,例如 sans, (中文(简体) ), mono, (中文(简体) ),
serif,或者您所使用的任何额外的语言特有 Plex 堆栈
应用.
那就自己供应吧 @font-face 用于装入替换字体资产的规则.
@font-face {
font-display: swap;
font-family: 'Inter Local';
font-style: normal;
font-weight: 400;
src: url('./fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Inter Local';
font-style: normal;
font-weight: 600;
src: url('./fonts/inter-latin-600-normal.woff2') format('woff2');
}
只装入应用程序所需的加权、样式和 Unicode 范围, 但要确保它们覆盖字体重量 和样式 您的碳用量释放出。 若为 您使用第三方字体服务,审查其隐私和区域合规性 影响,包括字体请求是否以各种方式暴露用户数据 您无法接受申请.
他们
您可以通过下列操作更改 Carbon 的默认主题:
@use '@carbon/styles/scss/themes';
@use '@carbon/styles/scss/theme' with (
$theme: themes.$g100
);
此示例使用来自 carbon 的内置主题 scss/themes
进入点。 您也可以使用自定义主题,或者将自己的自定义符号添加到
扩展主题.
// Configure with a custom theme
@use '@carbon/styles/scss/theme' with (
$theme: (
background: #e2e2e2,
text-primary: #ffffff,
)
);
// Extend the g100 theme with your own tokens
@use '@carbon/styles/scss/themes';
@use '@carbon/styles/scss/theme' with (
$fallback: themes.$g100,
$theme: (
custom-token-01: #000000,
)
);
设计符号
您可以通过
@carbon/styles/scss/theme 进入点。 此文件将允许您引用
使用 Sass 变量的符号以及获取任意符号的当前值
当前主题。 例如:
@use '@carbon/styles/scss/theme';
body {
background: theme.$background;
}
需要您使用的所有代币列表,请查看 主题文档。 。 。 .
API 文档
如果你要找的话 @carbon/styles API 文档, 请检查:
捐款
我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 贡献指南!
许可证
凭 Apache 2.0 许可证。 。 。 .
IBM 遥测
本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .