feat: add Scrollbar css token (ant-design#48109)

* feat: add Scrollbar css token

* docs: update docs

components/theme/interface/maps/index.ts

@@ -2,13 +2,15 @@ import type { ColorPalettes, LegacyColorPalettes } from '../presetColors';
 import type { SeedToken } from '../seeds';
 import type { ColorMapToken } from './colors';
 import type { FontMapToken } from './font';
+import type { ScrollBarToken } from './scrollbar';
 import type { HeightMapToken, SizeMapToken } from './size';
 import type { StyleMapToken } from './style';
 
 export * from './colors';
 export * from './font';
 export * from './size';
 export * from './style';
+export * from './scrollbar';
 
 export interface CommonMapToken extends StyleMapToken {
   // Motion
@@ -43,4 +45,5 @@ export interface MapToken
     HeightMapToken,
     StyleMapToken,
     FontMapToken,
+    ScrollBarToken,
     CommonMapToken {}

components/theme/interface/maps/scrollbar.ts

@@ -0,0 +1,23 @@
+export interface ScrollBarToken {
+  /**
+   * @desc 滚动条颜色
+   * @descEN Scrollbar color
+   * @default auto
+   * @since 5.16.0
+   */
+  scrollbarColor: string;
+  /**
+   * @desc 滚动条宽度
+   * @descEN Scrollbar width
+   * @default auto
+   * @since 5.16.0
+   */
+  scrollbarWidth: string;
+  /**
+   * @desc 预留的滚动条空间，以避免滚动条出现时布局变化
+   * @descEN Reserved space for scrollbar to avoid layout changes when scrollbar appears
+   * @default auto
+   * @since 5.16.0
+   */
+  scrollbarGutter: string;
+}

components/theme/themes/default/index.ts

@@ -1,6 +1,5 @@
 import { generate } from '@ant-design/colors';
-import genControlHeight from '../shared/genControlHeight';
-import genSizeMapToken from '../shared/genSizeMapToken';
+
 import type {
   ColorPalettes,
   LegacyColorPalettes,
@@ -11,8 +10,11 @@ import type {
 import { defaultPresetColors } from '../seed';
 import genColorMapToken from '../shared/genColorMapToken';
 import genCommonMapToken from '../shared/genCommonMapToken';
-import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
+import genControlHeight from '../shared/genControlHeight';
 import genFontMapToken from '../shared/genFontMapToken';
+import genScrollbarToken from '../shared/genScrollbarToken';
+import genSizeMapToken from '../shared/genSizeMapToken';
+import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
 
 export default function derivative(token: SeedToken): MapToken {
   const colorPalettes = Object.keys(defaultPresetColors)
@@ -50,6 +52,8 @@ export default function derivative(token: SeedToken): MapToken {
     ...genSizeMapToken(token),
     // Height
     ...genControlHeight(token),
+    // Scrollbar
+    ...genScrollbarToken(),
     // Others
     ...genCommonMapToken(token),
   };

components/theme/themes/shared/genScrollbarToken.ts

@@ -0,0 +1,11 @@
+import type { ScrollBarToken } from '../../interface/maps';
+
+function genScrollbarToken(): ScrollBarToken {
+  return {
+    scrollbarColor: 'auto',
+    scrollbarWidth: 'auto',
+    scrollbarGutter: 'auto',
+  };
+}
+
+export default genScrollbarToken;