@ 碳/元素样式

@carbon/element-styles 是一种实验性的用于本土HTML元素的造型系统,依赖于语义,属性焦点选择器而不是类名. 碳元素样式与碳设计系统核心反应和Web组件实施之间没有1:1的等同. 其用法案例更多针对简单的网页和编辑内容,如刻出打分文件.

开始

安装

npm i @carbon/element-styles

光盘N

您也可以使用其中的任何一个 预建样式表 通过我们的CDN:

<!-- specific version (recommended) -->
<link
  rel="stylesheet"
  href="https://1.www.s81c.com/common/carbon/element-styles/version/v[x.y.z]/prebuilt/expressive.css"
/>

<!-- "latest" tag -->
<link
  rel="stylesheet"
  href="https://1.www.s81c.com/common/carbon/element-styles/tag/v0/latest/prebuilt/expressive.css"
/>

<!-- "next" tag -->
<link
  rel="stylesheet"
  href="https://1.www.s81c.com/common/carbon/element-styles/tag/v0/next/prebuilt/expressive.css"
/>

导入单个元素

为了利用单个元素,通过 @use 并包括 styles 混入您的 Sass 样式表 :

@use "@carbon/element-styles/scss/elements/button";

@include button.styles;

创建自定义选择器

每个元素都有一个默认选择器,其样式被放出. 您可以配置此选择器, 但需要确保 HTML 标签和语义保存 .

这个 button 例如,元素预计会在 <button> 标签。 默认是选取器 button。如果您只想在明确显示类型按钮的按钮上发出这些样式,您可以通过 with sass的语法或每次包括混音.

@use "@carbon/element-styles/scss/elements/button" with (
  $config: (
    selector: 'button[type="button"]',
  )
);

@include button.styles;

@use "@carbon/element-styles/scss/elements/button";

@include button.styles(
  (
    selector: 'button[type="button"]',
  )
);

配置元素

一些元素有额外的配置选项来调整其视觉外观. 您可以以配置选择器的同样方式配置这些选项: with sass 的语法或每次包含混音的语法 :

@use "@carbon/element-styles/scss/elements/button" with (
  $config: (
    kind: "ghost",
  )
);

@include button.styles;

@use "@carbon/element-styles/scss/elements/button";

@include button.styles(
  (
    kind: "ghost",
  )
);

将这些选项与自定义选择器合并,意味着您可以根据同一元素的多个变体的上下文发出:

@use "@carbon/element-styles/scss/elements/button";

@include button.styles;
@include button.styles(
  (
    selector: 'button[type="submit"]',
    kind: "primary",
  )
);

具体性

所有被排放的元素样式被CSS级联层所包裹(@layer carbon-element-styles),以确保更低的特异性,并允许没有高特异性选择器的易被覆盖.

必要时,您可以通过配置模块配置层名 :

@use "@carbon/element-styles/scss/config" with (
  $cascade-layer-name: "custom-layer-name"
);
@use "@carbon/element-styles/scss/elements/button";

@include button.styles;

/**
 * ↪ @layer custom-layer-name {
 *     button { … }
 *   }
 */

使用预建

此库提供几个预建( opinion) 样式表, 您可以使用外框 :

生产

包括所有可用的元素及其默认选择器。 采用有中等尺寸元素的生产风格. 用于交互重的页面.

表达式

包括所有可用的元素及其默认选择器。 使用有大尺寸元素的表达式. 用于营销或文档等内容繁重的页面.

编辑

只包含与其默认选择器的非交互元素. 使用有大元素的表达式. 用于博客等仅包含内容的网页.

释放碳符号

@carbon/element-styles 依赖定义的符号 @carbon/styles因此,它不是要单独使用,而是在一个排放碳主题的容器中使用.

重要: 为了使按钮样式有效,您必须发出用于按钮的Carbon组件符号。 如果你在用的话 @carbon/styles 可能已经是这样了 为方便起见,该图书馆还提供 emit-carbon-tokens 组合其中包含必要的组件符号.

@use "@carbon/element-styles";

:root {
  @include element-styles.emit-carbon-tokens("white");
}

要生成所有可用颜色的 CSS 自定义属性,请使用 emit-carbon-colors 组合 :

@use "@carbon/element-styles";

:root {
  @include element-styles.emit-carbon-colors;
}

/**
 * ↪ :root {
 *     --cds-black-100: #000000;
 *     --cds-blue-10: #edf5ff;
 *     --cds-blue-20: #d0e2ff;
 *     …
 *   }
 */

配置布局选项

所有元素都建立在定义大小和密度等属性的上下文布局符号上. 您可以为页面的各个部分指定这些布局符号.

@use "@carbon/element-styles/scss/layout";

:root {
  @include layout.density("condensed");
}

.callout {
  padding: layout.$density--padding;
}

@use "@carbon/element-styles/scss/layout";

:root {
  @include layout.mode("expressive");
}

.callout {
  margin-block: layout.$mode--margin-block;
}

.callout header {
  @include layout.mode--heading-compact;
}

@use "@carbon/element-styles/scss/layout";

:root {
  @include layout.size("lg");
}

.callout header {
  block-size: layout.$size--block-size;
}

指导原则

1. 平台邻近

该库的目标是为本土的HTML元素和ARIA模式提供有观点的风格. 由于缺乏匹配的本地对口单位,该项目有意缺少核心碳库的若干组成部分。 其用意是不依赖类名或特殊属性.

但有一个例外:瓦片元素。 平板是"碳"中最基本和被广泛使用的组件之一. 瓦片样式的默认选择器是 [data-tile]。 。 。 .

2. 逻辑布局

应当在多个要素之间保持一致的布局决定不是这些要素的责任。 相反,他们的母版式(页或区)应控制诸如大小、密度和整体偏好等方面.

3. 地貌展望

这个库中并非所有元素都与所有主要浏览器完全兼容. 该项目有意使用一些浏览器可以使用的最新功能,以验证它们是否适合支持碳设计系统目前和即将出现的概念.

许可证

凭 Apache 2.0 (英语) 执照.

IBM 遥测

本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .