@ apollo/ 布兰德

这种回放包含一组基本符号,代表了阿波罗的品牌颜色和打字风格. 这也暴露出我们的标志类型和符号标志为SVG.

安装

yarn add @apollo/brand

使用量

导入 colors 和(或) typography 从 @apollo/brand 通过钻入物体的属性,包和访问设计系统符号。 关于所有可用的符号和样式,请参考 设计系统2.0 文档.

颜色

这个 colors 出口中有两个孩子: primitives 财务报告和审定财务报表 tokens。 。 。 .

primitives 是标记为颜色的调色板,即, orange, (中文(简体) ), purple, (中文(简体) ), black等 (中文(简体) ). 它们各自具有一系列的数值阴影. 对于大多数调色板来说,它们的范围是: 100 改为 500 递增100倍.

tokens 是带有光和暗模式的变体的成形颜色。 他们的名字描述了应当使用的背景. 譬如说, colors.tokens.border.warning.base 用于显示警告的元素的边框颜色.

这个 base 属性在上方指光模式变体。 如果在暗模式下使用此颜色, 您将访问 colors.tokens.border.warning.dark。 。 。 . 每个 语义符号特性 base 财务报告和审定财务报表 dark 变相.

类型

这个 typography 导出中还包含 primitives 财务报告和审定财务报表 tokens来啊!

原始人包括被命名为字体权重,即:, normal, (中文(简体) ), medium 映射到他们的数值(400,500等),并命名了能映射到数字字体大小和行高组合的字体大小.

tokens 是一个将命名字体变体映射到以下 CSS 属性的对象 :

• fontSize
• lineHeight
• fontFamily
• fontWeight

日志

这个包还把阿波罗的标志暴露为平地SVG文件. 根据您的网站执行情况, 您可能可以导入并用作图像 URL, 或者使用类似工具将其转换成反应组件 特别志愿人员。 。 。 .

import { ReactComponent as Symbol } from "@apollo/brand/logos/symbol.svg";

const MyComponent = () => {
  return (
    // SVGR magic 🪄
    <Symbol
      style={{
        fill: 'red'
      }}
    />
  );
};

示例

import { colors, typography } from "@apollo/brand";
import logotype from "@apollo/brand/logos/logotype.svg";

const MyComponent = () => {
  return (
    <>
      <img src={logotype} alt="Apollo logo" />
      <h1
        style={{
          ...typography.tokens["3xl"],
          color: colors.tokens.text.primary.base,
          backgroundColor: colors.primitives.navy[100]
        }}
      >
        Welcome to Apollo
      </h1>
    </>
  );
};