[Theme] Token 文档

[pepper-nice]

Token

Token 分为三层：Seed Token、Map Token 和应用层 Token。

文本类

Seed Token

Token 名称	描述	类型	默认值
fontFamily	字体	string	'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
fontWeight	字重	number | string	400
fontSize	字号	number	12
fontColor	文字颜色	number	'#000'
lineHeight	行高	number	12

Map Token

继承自 SeedToken 的属性

Token 名称	描述	类型	默认值
fontSizeH1	字号		20
fontSizeH2	字号		18
fontSizeH3	字号		16
fontSizeH4	字号		14
fontSizeH5	字号		12
fontActiveColor	文本激活状态颜色	string
fontInactiveColor	文本未激活状态颜色	string
fontSelectedColor	文本选中态颜色	string
fontWeight	文本默认字重	string
fontWeightStrong	粗体字重	string

颜色

Token 名称	描述	类型	默认值
palette	色板	string[]	默认分类色板
defaultColor	默认主题色	string[]	-
category	顺序色板
sequential	连续色板
diverging	发散色板

色板算法

// seed token
const geekBlue = '#5B8FF9'; 
// algorithm
/**
	* @param color 指定主题色
  * @param count 生成的色板数量
 /
function getCategoryPalette(color: string | string[], count?: number): string[]{
  // ...
}

// seed token
const defaultColor = [ "geekBlue" ];
// algorithm
const categoryPalette = [ "geekBlue", "", "", ... ]

描边和填充

Seed Token

Token 名称	描述	类型	默认值
lineWidth	描边宽度	string	1
stroke	描边颜色	string	#000
strokeOpacity	描边透明度	number	0
fill	填充颜色	string	#fff
fillOpacity	填充透明度	number	0

Map Token

Token 名称	描述	类型	默认值
lineWidth1	描边宽度	string	1
lineWidth2	描边宽度	string	1
lineWidth3	描边宽度	string	1
strokeLight1	描边颜色	string	#000
strokeLight2	描边颜色	string	#0D0D0D
strokeLight3	描边颜色	string	#262626
strokeLight4	描边颜色	string	#595959
fill1	填充颜色	string	#fff
fill2	填充颜色	string	#F2F2F2
...

Component API

Legend

图例项

Token 名称	描述	类型	默认值
legendItemFontFamily
string	token.fontFamily
legendItemLabelFontWeight		number	token.fontWeight
legendItemLabelFontSize			token.fontSize
...

Axis

坐标轴文本

Token 名称	描述	类型	默认值
axisTitleFontSize
string	token.fontFamily
axisTitleFontFamily		number	token.fontWeight
axisTitleFontWeight			token.fontSize
axisLabelFontSize
axisLabelFontFamily
axisLabelFontWeight
axisLabelStroke

坐标轴刻度

Token 名称	描述	类型	默认值
axisTickStroke
axisTickStrokeOpacity
axisTickLength
axisTickDirection
...

坐标轴刻度

Token 名称	描述	类型	默认值
axisGridLength
`
`

|
| axisGridStroke | | |
|
| axisGridStrokeOpacity | | |
|
| axisGridLineWidth | | | |
| ... | | | |

Token API

属性	描述	类型
Theme	用于修改 默认主题	Theme

使用

import { registerPalette, Chart } from '@antv/g2';

const chart = new Chart({ 
  container: 'container',
});

const customSequientitalPalette = registerPalette(...);

chart.theme({
  // 修改为自定义色板
  palette: customSequientitalPalette,
  // 修改默认字体
  fontSize: 10,
})

chart.data([
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
]);
chart
  .interval()
  .encode('x', 'genre')
  .encode('y', 'sold')
  .encode('color', 'genre');

chart.render();

[hustcc]

@pepper-nice 这个 token 文档怎么去理解？