[RFC] Design Token should support scrollbarColor、scrollbarWidth、scrollbarGutter

[li-jia-nan]

Motivation

Because there are many places where scrollbar needs to be set, I hope to unify these properties.

api:

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;
}

use:

import React from "react";
import { Button, theme } from "antd";

const Demo: React.FC = () => {
  const { token } = theme.useToken();
  return (
    <div
      style={{
        scrollbarColor: token.scrollbarColor,
        scrollbarWidth: token.scrollbarWidth,
        scrollbarGutter: token.scrollbarGutter,
      }}
    >
      <Button>hello</Button>
    </div>
  );
};

export default Demo;

[MadCcc]

token 一般不单独为 useToken 开启，都要配合组件消费。需要给出消费这几个 token 的组件，补充一下场景

[MadCcc]

colorScrollbar 和 sizeScrollbar，gutter 不太需要

[JSchmidt63]

I think it's a design decision and i thing should be in theme.
I hope the same: "I hope to unify these properties."
You can override it at component you like it.
See in the issues: Virtual List in Dark Mode lacking some contrast at the scrollbar #47565