@ biom3/ 设计指针

本套件通过CIDCD向公众npm组件发布: @biom3/design-tokens。要读取更多信息,请查看主题和标识 建议文件。 。 。 .

要了解整个设计-托肯分类学的概况,看看这个 文档。 。 。 .

里面有什么东西?

通过这个组件,我们暴露了我们完整的BIOME设计符文库. 它们是作为以下两种用途提供的:

1. 导出类型字符串,以及
2. css 可导入的 cs 文件内的可变定义

使用 ts Const 设计符号:

要使用打字机的设计-托盘,只需从pakakge的根部导入. 例如:

import { base } from '@biom3/design-tokens';

BIOME的默认颜色方案是"Light". 因此,当您导入 base,或 onLightBase 设计指针,只有灯光颜色和梯度.

要使用这些设计到的变量 :

import {
  onDarkBase,
  onLightBase,
  smartPickTokenValue,
} from '@biom3/design-tokens';
const DemoComponent = () => (
  <div
    style={{
      fontSize: onLightBase.text.body.medium.regular.fontSize,
      color: smartPickTokenValue(onDarkBase, 'base.color.brand.1'),
    }}
  >
    test component text
  </div>
);

使用 Cs-可变设计托盘:

通过从您的 App 代码导入 cs 文件,所有 BIOME 设计- tokens 都可以被导入并用作简单的 cs- 可变文件 。 例如:

import '@biom3/design-tokens/css/base-onLight.global.css'; // contains all "onLight" BASE design-tokens
// import "@biom3/design-tokens/css/base-onDark.global.css"; // contains all "onDark" BASE design-tokens
import '@biom3/design-tokens/css/text.global.css'; // contains all fonts (@font-face) imports

\ N注 所有cs-可变声明都是全局样式被范围化到正文选择器上,因此基站设计-token文件会互相覆盖,因此每次只应该使用1个基站设计-token css文件. 根据您是否计划在"OnDark"或"onLight"中显示UI(或者添加您自己的!)来选择主题 Css 文件.

要看到所有可用的可变设计-token css-vatables的完整列表,您可以检查您浏览器的dev工具中的身体元素. 例如:

然后,为了使用这些cs-可变设计托盘:

/* some custom styles.css file: */
@import '@biom3/design-tokens/css/base-onDark.global.css';
@import '@biom3/design-tokens/css/text.global.css';

/* your bespoke item class styles */
.headingText {
  color: var(--base-color-brand-1);
}