feat: scrollbar theme (#3396)

* feat: 滚动条增加主题 token

* docs: 文档优化

close: #3394

* chore: 更新 g-canvas 版本号

docs/api/general/element.en.md

@@ -1,6 +1,8 @@
 ---
 title: 图形元素 - Element
 order: 2
+contributors:
+  [{ author: '新茗', github: 'visiky', avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg' }]
 ---
 
 `markdown:docs/api/general/element.zh.md`

docs/api/general/element.zh.md

@@ -1,6 +1,8 @@
 ---
 title: 图形元素 - Element
 order: 2
+contributors:
+  [{ author: '新茗', github: 'visiky', avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg' }]
 ---
 
 `markdown:docs/common/style.md`

docs/manual/concepts/grammar-of-graphics.zh.md

@@ -138,7 +138,7 @@ G2 中的视觉通道作为标记的属性存在，需要支持以下功能：
 chart.<geomType>().<attrType>(dims, [callback]);
 ```
 
-- geom，[图表类型](./geometry)，在后面的章节中介绍。
+- geom，[图表类型](/zh/docs/manual/concepts/geometry/overview)，在后面的章节中介绍。
 - attr，图表类型的属性，对应视觉通道。
 - dims，参与单个视觉通道映射的字段。
 - callback，如何解析视觉通道，可以不提供，G2 提供了默认的视觉通道解析方式。

package.json

@@ -46,7 +46,7 @@
     "@antv/dom-util": "^2.0.2",
     "@antv/event-emitter": "~0.1.0",
     "@antv/g-base": "~0.5.6",
-    "@antv/g-canvas": "~0.5.6",
+    "@antv/g-canvas": "~0.5.10",
     "@antv/g-svg": "~0.5.6",
     "@antv/matrix-util": "^3.1.0-beta.1",
     "@antv/path-util": "^2.0.3",

src/interface.ts

@@ -2117,6 +2117,14 @@ export interface StyleSheet {
   /** Slider 字体标签描边粗细 */
   cSliderTextBorder?: number;
 
+  // -------------------- Scrollbar 组件样式--------------------
+  /** 滚动条 滚道填充色 */
+  scrollbarTrackFillColor?: string;
+  /** 滚动条 滑块填充色 */
+  scrollbarThumbFillColor?: string;
+  /** 滚动条 滑块高亮填充色 */
+  scrollbarThumbHighlightFillColor?: string;
+
   // -------------------- Geometry 图形样式--------------------
   /** 点图的大小范围 */
   pointSizeRange?: [number, number];

src/theme/style-sheet/dark.ts

@@ -393,7 +393,7 @@ export const createDarkStyleSheet = (cfg: StyleSheetCfg = {}) => {
     cSliderHandlerBorderRadius: 2,
     // slider textStyle 字体标签样式
     /** Slider 字体标签颜色 */
-    cSliderTextFillColor: '#000',
+    cSliderTextFillColor: '#fff',
     /** Slider 字体标签透明度 */
     cSliderTextFillOpacity: 0.45,
     /** Slider 字体标签大小 */
@@ -407,6 +407,14 @@ export const createDarkStyleSheet = (cfg: StyleSheetCfg = {}) => {
     /** Slider 字体标签描边粗细 */
     cSliderTextBorder: 0,
 
+    // -------------------- Scrollbar 组件样式--------------------
+    /** 滚动条 滚道填充色 */
+    scrollbarTrackFillColor: 'rgba(255,255,255,0.65)',
+    /** 滚动条 滑块填充色 */
+    scrollbarThumbFillColor: 'rgba(0,0,0,0.35)',
+    /** 滚动条 滑块高亮填充色 */
+    scrollbarThumbHighlightFillColor: 'rgba(0,0,0,0.45)',
+
     // -------------------- Geometry 图形样式--------------------
     /** 点图填充颜色 */
     pointFillColor: QUALITATIVE_10[0],

src/theme/style-sheet/light.ts

@@ -403,6 +403,14 @@ export const createLightStyleSheet = (cfg: StyleSheetCfg = {}) => {
     /** 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,

src/theme/util/create-by-style-sheet.ts

@@ -1343,13 +1343,13 @@ export function createThemeByStyleSheet(styleSheet: StyleSheet): LooseObject {
         },
         default: {
           style: {
-            trackColor: 'rgba(0,0,0,0)',
-            thumbColor: 'rgba(0,0,0,0.15)',
+            trackColor: styleSheet.scrollbarTrackFillColor,
+            thumbColor: styleSheet.scrollbarThumbFillColor,
           },
         },
         hover: {
           style: {
-            thumbColor: 'rgba(0,0,0,0.2)',
+            thumbColor: styleSheet.scrollbarThumbHighlightFillColor,
           },
         },
       },