主题色

实现主题色的本意是可快速（一键切换）得到一套贴合本H5需求的主题色， 但不需要每个组件去开放编辑多个颜色属性，这样会带来组件开发者和页面编辑者的麻烦。

组件主题色结构

一套主题色是一批key => value的集合，每一个key，从视觉的角度来看，有其专门的用处。 比如keyA用于页面背景色，keyB用于主按钮背景色，keyF用于一级标题色...

{
  "b1": [
    "#12B976"
  ],
  "b2": [
    "#F6F9FC"
  ],
  "b3": [
    "#9ABFD5"
  ],
  "c1": [
    "#087559"
  ],
  "c2": [
    "#087559"
  ],
  "c3": [
    "#087559"
  ],
  "c4": [
    "#80D7A1"
  ],
  "g1": [
    "#018148"
  ],
  "g2": [
    "#018148"
  ],
  "g3": [
    "#FE748A"
  ],
  "g4": [
    "#FABB23"
  ],
  "g5": [
    "#FFFFFF"
  ],
  "g8": [
    "#63C946"
  ],
  "g9": [
    "#FFFFFF"
  ],
  "g12": [
    "#B7B7B7"
  ]
}

组件主题色引用

每个组件会接收到一个名为raptorTheme的主题色参数，组件中该如何使用这些 key（或者叫色系占位符）， 请参考Raptor 主题色使用规范 (opens new window)

// 比如 tab 组件内的激活按钮主题色，字体色来源 c5，背景色来源 b2
const activeStyle = {
    color: props.raptorTheme.c5,
    background: props.raptorTheme.b2
};

提示

定义一套主题色务必由专业的设计师把控，以免出现：主按钮背景色、主按钮字体色太靠近，而导致视觉不明显从而影响其主按钮的角色。