feat(scrollbar): add some variables (#679)

* feat(scrollbar): add some variables

* feat(scrollbar): add some variables

* Update CHANGELOG.zh-CN.md

* fix: remote some position vars

Co-authored-by: yugang.cao <yugang.cao@tusimple.ai>
Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-scrollbar` add `scrollbarWidth`, `scrollbarHeight` and `scrollbarBorderRadius` common theme variables, closes [#649](https://github.com/TuSimple/naive-ui/issues/649).
+
 ## 2.15.11 (2021-07-29)
 
 ### Fixes

CHANGELOG.zh-CN.md

@@ -1,4 +1,8 @@
 # CHANGELOG
+## Pending
+### Feats
+
+- `n-scrollbar` 增加 `scrollbarWidth`、`scrollbarHeight` 和　`scrollbarBorderRadius`　公共主题变量，关闭 [#649](https://github.com/TuSimple/naive-ui/issues/649)
 
 ## 2.15.11 (2021-07-29)
 

src/_styles/common/dark.ts

@@ -154,6 +154,9 @@ const derived: ThemeCommonVars = {
 
   scrollbarColor: overlay(base.alphaScrollbar),
   scrollbarColorHover: overlay(base.alphaScrollbarHover),
+  scrollbarWidth: '5px',
+  scrollbarHeight: '5px',
+  scrollbarBorderRadius: '5px',
 
   progressRailColor: overlay(base.alphaProgressRail),
   railColor: overlay(base.alphaRail),

src/_styles/common/light.ts

@@ -153,6 +153,9 @@ const derived = {
 
   scrollbarColor: overlay(base.alphaScrollbar),
   scrollbarColorHover: overlay(base.alphaScrollbarHover),
+  scrollbarWidth: '5px',
+  scrollbarHeight: '5px',
+  scrollbarBorderRadius: '5px',
 
   progressRailColor: neutral(base.alphaProgressRail),
   railColor: 'rgb(219, 219, 223)',

src/scrollbar/src/ScrollBar.tsx

@@ -212,9 +212,6 @@ const Scrollbar = defineComponent({
     const xBarLeftPxRef = computed(() => {
       return `${xBarLeftRef.value}px`
     })
-    const sizePxRef = computed(() => {
-      return `${props.size}px`
-    })
     const needYBarRef = computed(() => {
       const { value: containerHeight } = containerHeightRef
       const { value: contentHeight } = contentHeightRef
@@ -561,7 +558,6 @@ const Scrollbar = defineComponent({
       xRailRef,
       needYBar: needYBarRef,
       needXBar: needXBarRef,
-      sizePx: sizePxRef,
       yBarSizePx: yBarSizePxRef,
       xBarSizePx: xBarSizePxRef,
       yBarTopPx: yBarTopPxRef,
@@ -578,13 +574,21 @@ const Scrollbar = defineComponent({
       handleXScrollMouseDown,
       cssVars: computed(() => {
         const {
-          common: { cubicBezierEaseInOut },
+          common: {
+            cubicBezierEaseInOut,
+            scrollbarBorderRadius,
+            scrollbarHeight,
+            scrollbarWidth
+          },
           self: { color, colorHover }
         } = themeRef.value
         return {
           '--scrollbar-bezier': cubicBezierEaseInOut,
           '--scrollbar-color': color,
-          '--scrollbar-color-hover': colorHover
+          '--scrollbar-color-hover': colorHover,
+          '--scrollbar-border-radius': scrollbarBorderRadius,
+          '--scrollbar-width': scrollbarWidth,
+          '--scrollbar-height': scrollbarHeight
         }
       })
     }
@@ -640,7 +644,7 @@ const Scrollbar = defineComponent({
           <div
             ref="yRailRef"
             class={`${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`}
-            style={[this.horizontalRailStyle, { width: this.sizePx }] as any}
+            style={[this.horizontalRailStyle] as any}
           >
             <Transition name="fade-in-transition">
               {{
@@ -650,9 +654,7 @@ const Scrollbar = defineComponent({
                       class={`${mergedClsPrefix}-scrollbar-rail__scrollbar`}
                       style={{
                         height: this.yBarSizePx,
-                        top: this.yBarTopPx,
-                        width: this.sizePx,
-                        borderRadius: this.sizePx
+                        top: this.yBarTopPx
                       }}
                       onMousedown={this.handleYScrollMouseDown}
                     />
@@ -663,7 +665,7 @@ const Scrollbar = defineComponent({
           <div
             ref="xRailRef"
             class={`${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`}
-            style={[this.verticalRailStyle, { height: this.sizePx }] as any}
+            style={[this.verticalRailStyle] as any}
           >
             <Transition name="fade-in-transition">
               {{
@@ -672,10 +674,8 @@ const Scrollbar = defineComponent({
                     <div
                       class={`${mergedClsPrefix}-scrollbar-rail__scrollbar`}
                       style={{
-                        height: this.sizePx,
                         width: this.xBarSizePx,
-                        left: this.xBarLeftPx,
-                        borderRadius: this.sizePx
+                        left: this.xBarLeftPx
                       }}
                       onMousedown={this.handleXScrollMouseDown}
                     />

src/scrollbar/src/styles/index.cssr.ts

@@ -5,6 +5,9 @@ import fadeInTransition from '../../../_styles/transitions/fade-in.cssr'
 // --scrollbar-bezier
 // --scrollbar-color
 // --scrollbar-color-hover
+// --scrollbar-width
+// --scrollbar-height
+// --scrollbar-border-radius
 export default cB('scrollbar', `
   overflow: hidden;
   position: relative;
@@ -41,22 +44,28 @@ export default cB('scrollbar', `
         left: 2px;
         right: 2px;
         bottom: 4px;
+        height: var(--scrollbar-height);
       `, [
         c('>', [
-          cE('scrollbar', {
-            right: 0
-          })
+          cE('scrollbar', `
+            height: var(--scrollbar-height);
+            border-radius: var(--scrollbar-border-radius);
+            right: 0;
+          `)
         ])
       ]),
       cM('vertical', `
         right: 4px;
         top: 2px;
         bottom: 2px;
+        width: var(--scrollbar-width);
       `, [
         c('>', [
-          cE('scrollbar', {
-            bottom: 0
-          })
+          cE('scrollbar', `
+            width: var(--scrollbar-width);
+            border-radius: var(--scrollbar-border-radius);
+            bottom: 0;
+          `)
         ])
       ]),
       cM('disabled', [