light.ts

import { StyleSheetCfg } from '../../interface';

const BLACK_COLORS = {
  100: '#000',
  95: '#0D0D0D',
  85: '#262626',
  65: '#595959',
  45: '#8C8C8C',
  25: '#BFBFBF',
  15: '#D9D9D9',
  6: '#F0F0F0',
};

const WHITE_COLORS = {
  100: '#FFFFFF',
  95: '#F2F2F2',
  85: '#D9D9D9',
  65: '#A6A6A6',
  45: '#737373',
  25: '#404040',
  15: '#262626',
  6: '#0F0F0F',
};

const QUALITATIVE_10 = [
  '#5B8FF9',
  '#5AD8A6',
  '#5D7092',
  '#F6BD16',
  '#6F5EF9',
  '#6DC8EC',
  '#945FB9',
  '#FF9845',
  '#1E9493',
  '#FF99C3',
];

const QUALITATIVE_20 = [
  '#5B8FF9',
  '#CDDDFD',
  '#5AD8A6',
  '#CDF3E4',
  '#5D7092',
  '#CED4DE',
  '#F6BD16',
  '#FCEBB9',
  '#6F5EF9',
  '#D3CEFD',
  '#6DC8EC',
  '#D3EEF9',
  '#945FB9',
  '#DECFEA',
  '#FF9845',
  '#FFE0C7',
  '#1E9493',
  '#BBDEDE',
  '#FF99C3',
  '#FFE0ED',
];

/** 单色顺序色板 */
const SINGLE_SEQUENCE = [
  '#B8E1FF',
  '#9AC5FF',
  '#7DAAFF',
  '#5B8FF9',
  '#3D76DD',
  '#085EC0',
  '#0047A5',
  '#00318A',
  '#001D70',
];

export const createLightStyleSheet = (cfg: StyleSheetCfg = {}) => {
  const { paletteQualitative10 = QUALITATIVE_10, paletteQualitative20 = QUALITATIVE_20 } = cfg;
  const { brandColor = paletteQualitative10[0] } = cfg;

  const token = {
    /** 图表背景色 */
    backgroundColor: 'transparent',
    /** 主题色 */
    brandColor,
    /** 图表辅助色 */
    subColor: 'rgba(0,0,0,0.05)',
    /** 分类色板 1，在数据量小于等于 10 时使用 */
    paletteQualitative10,
    /** 分类色板 2，在数据量大于 10 时使用 */
    paletteQualitative20,
    /** 语义色 */
    paletteSemanticRed: '#F4664A',
    /** 语义色 */
    paletteSemanticGreen: '#30BF78',
    /** 语义色 */
    paletteSemanticYellow: '#FAAD14',
    /** (单色)顺序色板 */
    paletteSequence: SINGLE_SEQUENCE,
    /** 字体 */
    fontFamily: `"Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji"`,

    // -------------------- 坐标轴 --------------------
    /** 坐标轴线颜色 */
    axisLineBorderColor: BLACK_COLORS[25],
    /** 坐标轴线粗细 */
    axisLineBorder: 1,
    /** 坐标轴线 lineDash 设置 */
    axisLineDash: null,

    /** 坐标轴标题颜色 */
    axisTitleTextFillColor: BLACK_COLORS[65],
    /** 坐标轴标题文本字体大小 */
    axisTitleTextFontSize: 12,
    /** 坐标轴标题文本行高 */
    axisTitleTextLineHeight: 12,
    /** 坐标轴标题文本字体粗细 */
    axisTitleTextFontWeight: 'normal',
    /** 坐标轴标题距离坐标轴文本的间距 */
    axisTitleSpacing: 12,
    /** 坐标轴标题详细说明icon颜色 */
    axisDescriptionIconFillColor: WHITE_COLORS[85],

    /** 坐标轴刻度线颜色 */
    axisTickLineBorderColor: BLACK_COLORS[25],
    /** 坐标轴刻度线长度 */
    axisTickLineLength: 4,
    /** 坐标轴刻度线粗细 */
    axisTickLineBorder: 1,

    /** 坐标轴次刻度线颜色 */
    axisSubTickLineBorderColor: BLACK_COLORS[15],
    /** 坐标轴次刻度线长度 */
    axisSubTickLineLength: 2,
    /** 坐标轴次刻度线粗细 */
    axisSubTickLineBorder: 1,

    /** 坐标轴刻度文本颜色 */
    axisLabelFillColor: BLACK_COLORS[45],
    /** 坐标轴刻度文本字体大小 */
    axisLabelFontSize: 12,
    /** 坐标轴刻度文本行高 */
    axisLabelLineHeight: 12,
    /** 坐标轴刻度文本字体粗细 */
    axisLabelFontWeight: 'normal',
    /** 坐标轴刻度文本距离坐标轴线的间距 */
    axisLabelOffset: 8,

    /** 坐标轴网格线颜色 */
    axisGridBorderColor: BLACK_COLORS[15],
    /** 坐标轴网格线粗细 */
    axisGridBorder: 1,
    /** 坐标轴网格线虚线设置 */
    axisGridLineDash: null,

    // -------------------- 图例 --------------------
    /** 图例标题颜色 */
    legendTitleTextFillColor: BLACK_COLORS[45],
    /** 图例标题文本字体大小 */
    legendTitleTextFontSize: 12,
    /** 图例标题文本行高 */
    legendTitleTextLineHeight: 21,
    /** 图例标题文本字体粗细 */
    legendTitleTextFontWeight: 'normal',

    /** 图例 marker 颜色 */
    legendMarkerColor: brandColor,
    /** 图例 marker 距离图例文本的间距 */
    legendMarkerSpacing: 8,
    /** 图例 marker 默认半径大小 */
    legendMarkerSize: 4,
    /** 图例 'circle' marker 半径 */
    legendCircleMarkerSize: 4,
    /** 图例 'square' marker 半径 */
    legendSquareMarkerSize: 4,
    /** 图例 'line' marker 半径 */
    legendLineMarkerSize: 5,

    /** 图例项文本颜色 */
    legendItemNameFillColor: BLACK_COLORS[65],
    /** 图例项文本字体大小 */
    legendItemNameFontSize: 12,
    /** 图例项文本行高 */
    legendItemNameLineHeight: 12,
    /** 图例项粗细 */
    legendItemNameFontWeight: 'normal',
    /** 图例项之间的水平间距 */
    legendItemSpacing: 24,
    /** 图例项垂直方向的间隔 */
    legendItemMarginBottom: 12,
    /** 图例与图表绘图区域的偏移距离  */
    legendPadding: [8, 8, 8, 8],
    /** 水平布局的图例与绘图区域偏移距离 */
    legendHorizontalPadding: [8, 0, 8, 0],
    /** 垂直布局的图例与绘图区域偏移距离 */
    legendVerticalPadding: [0, 8, 0, 8],

    // 图例分页器
    /** 图例分页器 marker 大小 */
    legendPageNavigatorMarkerSize: 12,
    /** 图例分页器 marker 非激活状态填充色 */
    legendPageNavigatorMarkerInactiveFillColor: BLACK_COLORS[100],
    /** 图例分页器 marker 非激活状态填充色透明度 */
    legendPageNavigatorMarkerInactiveFillOpacity: 0.45,
    /** 图例分页器 marker 填充色 */
    legendPageNavigatorMarkerFillColor: BLACK_COLORS[100],
    /** 图例分页器 marker 填充色透明度 */
    legendPageNavigatorMarkerFillOpacity: 1,
    /** 图例分页器文本颜色 */
    legendPageNavigatorTextFillColor: BLACK_COLORS[45],
    /** 图例分页器文本字体大小 */
    legendPageNavigatorTextFontSize: 12,

    /** 连续图例滑块填充色 */
    sliderRailFillColor: BLACK_COLORS[15],
    /** 连续图例滑块边框粗细 */
    sliderRailBorder: 0,
    /** 连续图例滑块边框颜色 */
    sliderRailBorderColor: null,
    /** 连续图例滑块宽度 */
    sliderRailWidth: 100,
    /** 连续图例滑块高度 */
    sliderRailHeight: 12,

    /** 连续图例文本颜色 */
    sliderLabelTextFillColor: BLACK_COLORS[45],
    /** 连续图例文本字体大小 */
    sliderLabelTextFontSize: 12,
    /** 连续图例文本行高 */
    sliderLabelTextLineHeight: 12,
    /** 连续图例文本字体粗细 */
    sliderLabelTextFontWeight: 'normal',

    /** 连续图例滑块颜色 */
    sliderHandlerFillColor: BLACK_COLORS[6],
    /** 连续图例滑块宽度 */
    sliderHandlerWidth: 10,
    /** 连续图例滑块高度 */
    sliderHandlerHeight: 14,
    /** 连续图例滑块边框粗细 */
    sliderHandlerBorder: 1,
    /** 连续图例滑块边框颜色 */
    sliderHandlerBorderColor: BLACK_COLORS[25],

    // -------------------- Annotation，图形标注 --------------------
    /** arc 图形标注描边颜色 */
    annotationArcBorderColor: BLACK_COLORS[15],
    /** arc 图形标注粗细 */
    annotationArcBorder: 1,

    /** line 图形标注颜色 */
    annotationLineBorderColor: BLACK_COLORS[25],
    /** line 图形标注粗细 */
    annotationLineBorder: 1,
    /** lube 图形标注的虚线间隔 */
    annotationLineDash: null,

    /** text 图形标注文本颜色 */
    annotationTextFillColor: BLACK_COLORS[65],
    /** text 图形标注文本字体大小 */
    annotationTextFontSize: 12,
    /** text 图形标注文本行高 */
    annotationTextLineHeight: 12,
    /** text 图形标注文本字体粗细 */
    annotationTextFontWeight: 'normal',
    /** text 图形标注文本边框颜色 */
    annotationTextBorderColor: null,
    /** text 图形标注文本边框粗细 */
    annotationTextBorder: 0,

    /** region 图形标注填充颜色 */
    annotationRegionFillColor: BLACK_COLORS[100],
    /** region 图形标注填充颜色透明色 */
    annotationRegionFillOpacity: 0.06,
    /** region 图形标注描边粗细 */
    annotationRegionBorder: 0,
    /** region 图形标注描边颜色 */
    annotationRegionBorderColor: null,

    /** dataMarker 图形标注线的长度 */
    annotationDataMarkerLineLength: 16,

    // -------------------- Tooltip --------------------
    /** tooltip crosshairs 辅助线颜色 */
    tooltipCrosshairsBorderColor: BLACK_COLORS[25],
    /** tooltip crosshairs 辅助线粗细 */
    tooltipCrosshairsBorder: 1,
    /** tooltip crosshairs 辅助线虚线间隔 */
    tooltipCrosshairsLineDash: null,

    /** tooltip 内容框背景色 */
    tooltipContainerFillColor: 'rgb(255, 255, 255)',
    tooltipContainerFillOpacity: 0.95,
    /** tooltip 内容框阴影 */
    tooltipContainerShadow: '0px 0px 10px #aeaeae',
    /** tooltip 内容框圆角 */
    tooltipContainerBorderRadius: 3,

    /** tooltip 文本颜色 */
    tooltipTextFillColor: BLACK_COLORS[65],
    /** tooltip 文本字体大小 */
    tooltipTextFontSize: 12,
    /** tooltip 文本行高 */
    tooltipTextLineHeight: 12,
    /** tooltip 文本字体粗细 */
    tooltipTextFontWeight: 'bold',

    // -------------------- Geometry labels --------------------
    /** Geometry label 文本颜色 */
    labelFillColor: BLACK_COLORS[65],
    labelFillColorDark: '#2c3542',
    labelFillColorLight: '#ffffff',
    /** Geometry label 文本字体大小 */
    labelFontSize: 12,
    /** Geometry label 文本行高 */
    labelLineHeight: 12,
    /** Geometry label 文本字体粗细 */
    labelFontWeight: 'normal',
    /** Geometry label 文本描边颜色 */
    labelBorderColor: null,
    /** Geometry label 文本描边粗细 */
    labelBorder: 0,

    /** Geometry innerLabel 文本颜色 */
    innerLabelFillColor: WHITE_COLORS[100],
    /** Geometry innerLabel 文本字体大小 */
    innerLabelFontSize: 12,
    /** Geometry innerLabel 文本行高 */
    innerLabelLineHeight: 12,
    /** Geometry innerLabel 文本字体粗细 */
    innerLabelFontWeight: 'normal',
    /** Geometry innerLabel 文本描边颜色 */
    innerLabelBorderColor: null,
    /** Geometry innerLabel 文本描边粗细 */
    innerLabelBorder: 0,

    /** Geometry overflowLabel 文本颜色 */
    overflowLabelFillColor: BLACK_COLORS[65],
    /** Geometry overflowLabel 文本字体大小 */
    overflowLabelFontSize: 12,
    /** Geometry overflowLabel 文本行高 */
    overflowLabelLineHeight: 12,
    /** Geometry overflowLabel 文本字体粗细 */
    overflowLabelFontWeight: 'normal',
    /** Geometry overflowLabel 文本描边颜色 */
    overflowLabelBorderColor: WHITE_COLORS[100],
    /** Geometry overflowLabel 文本描边粗细 */
    overflowLabelBorder: 1,

    /** Geometry label 文本连接线粗细 */
    labelLineBorder: 1,
    /** Geometry label 文本连接线颜色 */
    labelLineBorderColor: BLACK_COLORS[25],

    // -------------------- Slider 组件样式--------------------
    /** slider 滑道高度 */
    cSliderRailHieght: 16,
    /** slider 滑道背景色 */
    cSliderBackgroundFillColor: '#416180',
    /** slider 滑道背景色透明度 */
    cSliderBackgroundFillOpacity: 0.05,
    /** slider 滑道前景色 */
    cSliderForegroundFillColor: '#5B8FF9',
    /** slider 滑道前景色透明度 */
    cSliderForegroundFillOpacity: 0.15,
    // slider handlerStyle 手柄样式
    /** slider 手柄高度 */
    cSliderHandlerHeight: 24,
    /** Slider 手柄宽度 */
    cSliderHandlerWidth: 10,
    /** Slider 手柄背景色 */
    cSliderHandlerFillColor: '#F7F7F7',
    /** Slider 手柄背景色透明度 */
    cSliderHandlerFillOpacity: 1,
    /** Slider 手柄高亮背景色 */
    cSliderHandlerHighlightFillColor: '#FFF',
    /** Slider 手柄边框色 */
    cSliderHandlerBorderColor: '#BFBFBF',
    /** Slider 手柄边框粗细 */
    cSliderHandlerBorder: 1,
    /** Slider 手柄边框圆角 */
    cSliderHandlerBorderRadius: 2,
    // slider textStyle 字体标签样式
    /** Slider 字体标签颜色 */
    cSliderTextFillColor: '#000',
    /** Slider 字体标签透明度 */
    cSliderTextFillOpacity: 0.45,
    /** Slider 字体标签大小 */
    cSliderTextFontSize: 12,
    /** Slider 字体标签行高 */
    cSliderTextLineHeight: 12,
    /** Slider 字体标签字重 */
    cSliderTextFontWeight: 'normal',
    /** Slider 字体标签描边色 */
    cSliderTextBorderColor: null,
    /** Slider 字体标签描边粗细 */
    cSliderTextBorder: 0,

    // -------------------- Scrollbar 组件样式--------------------
    /** 滚动条 滚道填充色 */
    scrollbarTrackFillColor: 'rgba(0,0,0,0)',
    /** 滚动条 滑块填充色 */
    scrollbarThumbFillColor: 'rgba(0,0,0,0.15)',
    /** 滚动条 滑块高亮填充色 */
    scrollbarThumbHighlightFillColor: 'rgba(0,0,0,0.2)',

    // -------------------- Geometry 图形样式--------------------
    /** 点图填充颜色 */
    pointFillColor: brandColor,
    /** 点图填充颜色透明度 */
    pointFillOpacity: 0.95,
    /** 点图大小 */
    pointSize: 4,
    /** 点图描边粗细 */
    pointBorder: 1,
    /** 点图描边颜色 */
    pointBorderColor: WHITE_COLORS[100],
    /** 点图描边透明度 */
    pointBorderOpacity: 1,

    /** 点图 active 状态下描边颜色 */
    pointActiveBorderColor: BLACK_COLORS[100],

    /** 点图 selected 状态下描边粗细 */
    pointSelectedBorder: 2,
    /** 点图 selected 状态下描边颜色 */
    pointSelectedBorderColor: BLACK_COLORS[100],

    /** 点图 inactive 状态下填充颜色透明度 */
    pointInactiveFillOpacity: 0.3,
    /** 点图 inactive 状态下描边透明度 */
    pointInactiveBorderOpacity: 0.3,

    /** 空心点图大小 */
    hollowPointSize: 4,
    /** 空心点图描边粗细 */
    hollowPointBorder: 1,
    /** 空心点图描边颜色 */
    hollowPointBorderColor: brandColor,
    /** 空心点图描边透明度 */
    hollowPointBorderOpacity: 0.95,
    hollowPointFillColor: WHITE_COLORS[100],

    /** 空心点图 active 状态下描边粗细 */
    hollowPointActiveBorder: 1,
    /** 空心点图 active 状态下描边颜色 */
    hollowPointActiveBorderColor: BLACK_COLORS[100],
    /** 空心点图 active 状态下描边透明度 */
    hollowPointActiveBorderOpacity: 1,

    /** 空心点图 selected 状态下描边粗细 */
    hollowPointSelectedBorder: 2,
    /** 空心点图 selected 状态下描边颜色 */
    hollowPointSelectedBorderColor: BLACK_COLORS[100],
    /** 空心点图 selected 状态下描边透明度 */
    hollowPointSelectedBorderOpacity: 1,

    /** 空心点图 inactive 状态下描边透明度 */
    hollowPointInactiveBorderOpacity: 0.3,

    /** 线图粗细 */
    lineBorder: 2,
    /** 线图颜色 */
    lineBorderColor: brandColor,
    /** 线图透明度 */
    lineBorderOpacity: 1,

    /** 线图 Active 状态下粗细 */
    lineActiveBorder: 3,

    /** 线图 selected 状态下粗细 */
    lineSelectedBorder: 3,

    /** 线图 inactive 状态下透明度 */
    lineInactiveBorderOpacity: 0.3,

    /** area 填充颜色 */
    areaFillColor: brandColor,
    /** area 填充透明度 */
    areaFillOpacity: 0.25,

    /** area 在 active 状态下的填充透明度 */
    areaActiveFillColor: brandColor,
    areaActiveFillOpacity: 0.5,

    /** area 在 selected 状态下的填充透明度 */
    areaSelectedFillColor: brandColor,
    areaSelectedFillOpacity: 0.5,

    /** area inactive 状态下填充透明度 */
    areaInactiveFillOpacity: 0.3,

    /** hollowArea 颜色 */
    hollowAreaBorderColor: brandColor,
    /** hollowArea 边框粗细 */
    hollowAreaBorder: 2,
    /** hollowArea 边框透明度 */
    hollowAreaBorderOpacity: 1,

    /** hollowArea active 状态下的边框粗细 */
    hollowAreaActiveBorder: 3,
    hollowAreaActiveBorderColor: BLACK_COLORS[100],

    /** hollowArea selected 状态下的边框粗细 */
    hollowAreaSelectedBorder: 3,
    hollowAreaSelectedBorderColor: BLACK_COLORS[100],

    /** hollowArea inactive 状态下的边框透明度 */
    hollowAreaInactiveBorderOpacity: 0.3,

    /** interval 填充颜色 */
    intervalFillColor: brandColor,
    /** interval 填充透明度 */
    intervalFillOpacity: 0.95,

    /** interval active 状态下边框粗细 */
    intervalActiveBorder: 1,
    /** interval active 状态下边框颜色 */
    intervalActiveBorderColor: BLACK_COLORS[100],
    intervalActiveBorderOpacity: 1,

    /** interval selected 状态下边框粗细 */
    intervalSelectedBorder: 2,
    /** interval selected 状态下边框颜色 */
    intervalSelectedBorderColor: BLACK_COLORS[100],
    /** interval selected 状态下边框透明度 */
    intervalSelectedBorderOpacity: 1,

    /** interval inactive 状态下边框透明度 */
    intervalInactiveBorderOpacity: 0.3,
    /** interval inactive 状态下填充透明度 */
    intervalInactiveFillOpacity: 0.3,

    /** interval 边框粗细 */
    hollowIntervalBorder: 2,
    /** hollowInterval 边框颜色 */
    hollowIntervalBorderColor: brandColor,
    /** hollowInterval 边框透明度 */
    hollowIntervalBorderOpacity: 1,
    hollowIntervalFillColor: WHITE_COLORS[100],

    /** hollowInterval active 状态下边框粗细 */
    hollowIntervalActiveBorder: 2,
    /** hollowInterval active 状态下边框颜色 */
    hollowIntervalActiveBorderColor: BLACK_COLORS[100],

    /** hollowInterval selected 状态下边框粗细 */
    hollowIntervalSelectedBorder: 3,
    /** hollowInterval selected 状态下边框颜色 */
    hollowIntervalSelectedBorderColor: BLACK_COLORS[100],
    /** hollowInterval selected 状态下边框透明度 */
    hollowIntervalSelectedBorderOpacity: 1,

    /** hollowInterval inactive 状态下边框透明度 */
    hollowIntervalInactiveBorderOpacity: 0.3,
  };

  return { ...token, ...cfg };
};

export const antvLight = createLightStyleSheet();