export function getG2theme()

in src/themes/themeTools.ts [639:748]
100 lines of code
1 McCabe index (conditional complexity)

export function getG2theme(theme: Theme) {
  const g2StyleSheet = getG2StyleSheet(theme);

  const g2Theme = createThemeByStyleSheet(g2StyleSheet);

  // g2Theme.maxColumnWidth = 36;
  const baseFontSize = theme['widgets-font-size-1'];
  const baseFontSizeNum = pxToNumber(theme['widgets-font-size-1']);

  // legend 样式
  const legendStyle = g2Theme.components.legend;
  legendKeys.forEach((key) => {
    const style = legendStyle[key];
    merge(style, {
      // 超出占图表宽度的45%则省略，分页符占了10%，期望一页至少展示2个，所以定为0.45
      // 这里注意，测试结果中画布尺寸小于100会影响展示
      maxItemWidth: 0.45,
      // 这里设置 itemValue 会导致一直显示 value，所以放到 legend 中配置
      itemStates: {
        active: {
          nameStyle: {
            opacity: 1,
          },
          valueStyle: {
            opacity: 1,
          },
        },
        unchecked: {
          nameStyle: {
            fill: theme['widgets-legend-uncheck'],
          },
          valueStyle: {
            fill: theme['widgets-legend-uncheck'],
          },
          markerStyle: {
            fill: theme['widgets-legend-uncheck'],
            stroke: theme['widgets-legend-uncheck'],
          },
        },
        inactive: {
          nameStyle: {
            fill: theme['widgets-legend-uncheck'],
          },
          valueStyle: {
            fill: theme['widgets-legend-uncheck'],
          },
          markerStyle: {
            opacity: 0.3,
          },
        },
      },
    });
  });

  // tooltip 样式
  const tooltipStyle = g2Theme.components.tooltip.domStyles;

  Object.assign(tooltipStyle['g2-tooltip'], {
    padding: `0 ${theme['widgets-tooltip-padding']} ${Math.max(
      0,
      pxToNumber(theme['widgets-tooltip-padding']) - baseFontSizeNum,
    )}px ${theme['widgets-tooltip-padding']}`,
    backdropFilter: theme['widgets-tooltip-background-blur'],
  });
  Object.assign(tooltipStyle['g2-tooltip-title'], {
    marginBottom: baseFontSize,
    marginTop: theme['widgets-tooltip-padding'],
    color: theme['widgets-tooltip-title'],
  });
  Object.assign(tooltipStyle['g2-tooltip-list-item'], {
    marginBottom: baseFontSize,
    marginTop: 0,
  });
  Object.assign(tooltipStyle['g2-tooltip-marker'], {
    width: `${baseFontSizeNum / 2}px`,
    height: `${baseFontSizeNum / 2}px`,
    marginRight: `${baseFontSizeNum / 3}px`,
  });
  Object.assign(tooltipStyle['g2-tooltip-value'], {
    marginLeft: `${(2 * baseFontSizeNum) / 3}px`,
  });

  // slider 样式
  const sliderStyle = g2Theme.components.slider.common;
  const p = (baseFontSizeNum * 2) / 3;
  sliderStyle.padding = [baseFontSizeNum, 3, 0, 0];
  sliderStyle.height = pxToNumber(theme['widgets-font-size-6']);;
  sliderStyle.textStyle = {
    opacity: 0,
  };

  // scrollbar 样式
  const scrollbarStyle = g2Theme.components.scrollbar;
  // scrollbarStyle.common.categorySize = baseFontSizeNum * 10;
  Object.assign(scrollbarStyle, {
    default: {
      style: {
        trackColor: theme['widgets-scrollbar-bg'],
        thumbColor: theme['widgets-scrollbar-thumb'],
      },
    },
    hover: {
      style: {
        thumbColor: theme['widgets-scrollbar-thumb'],
      },
    },
  });

  return g2Theme;
}