@para-ui/core 4.0.0-beta → 4.0.0-rc.1

package/Stepper/index.js

@@ -29,38 +29,38 @@ import '@paraview/lib';
 //默认图标
 var Icons = {
   1: jsx(One, {
-    size: 'medium'
+    size: "medium"
   }),
   2: jsx(Two, {
-    size: 'medium'
+    size: "medium"
   }),
   3: jsx(Three, {
-    size: 'medium'
+    size: "medium"
   }),
   4: jsx(Four, {
-    size: 'medium'
+    size: "medium"
   }),
   5: jsx(Five, {
-    size: 'medium'
+    size: "medium"
   }),
   6: jsx(Six, {
-    size: 'medium'
+    size: "medium"
   }),
   7: jsx(Seven, {
-    size: 'medium'
+    size: "medium"
   }),
   8: jsx(Eight, {
-    size: 'medium'
+    size: "medium"
   }),
   9: jsx(Nine, {
-    size: 'medium'
+    size: "medium"
   }),
-  'done': jsx(Check, {
-    size: 'medium'
+  done: jsx(Check, {
+    size: "medium"
   })
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:57\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-stepper {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  display: flex;\n  width: 100%;\n  text-align: initial;\n  overflow: auto;\n}\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item {\n  min-width: 140px;\n}\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item-icon,\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item-content {\n  width: calc(100% - 40px);\n  line-height: normal;\n}\n.paraui-v4-stepper .component-stepper-item {\n  position: relative;\n  display: inline-block;\n  flex: 1;\n  vertical-align: top;\n  overflow: hidden;\n  margin-inline-start: 10px;\n}\n.paraui-v4-stepper .component-stepper-item-container {\n  outline: none;\n}\n.paraui-v4-stepper .component-stepper-item-container .component-stepper-item-icon {\n  margin-inline-start: 0;\n  margin-inline-end: 10px;\n}\n.paraui-v4-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-tail,\n.paraui-v4-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v4-stepper .component-stepper-item-icon,\n.paraui-v4-stepper .component-stepper-item-content {\n  display: inline-block;\n  vertical-align: top;\n}\n.paraui-v4-stepper .component-stepper-item-icon {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 30px;\n  height: 30px;\n  font-size: 500;\n  line-height: 30px;\n  text-align: center;\n  border-radius: 50%;\n  background-color: rgb(234, 236, 241);\n  transition: background-color 0.3s, border-color 0.3s;\n}\n.paraui-v4-stepper .component-stepper-item-icon .component-stepper-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: rgb(92, 101, 115);\n  vertical-align: middle;\n}\n.paraui-v4-stepper .component-stepper-item-icon .component-stepper-icon svg {\n  color: inherit;\n}\n.paraui-v4-stepper .component-stepper-item-tail {\n  position: absolute;\n  top: 12px;\n  left: 0;\n  width: 100%;\n  padding: 0 10px;\n}\n.paraui-v4-stepper .component-stepper-item-tail::after {\n  display: inline-block;\n  width: 100%;\n  height: 1px;\n  border-radius: 1px;\n  transition: background 0.3s;\n  content: \"\";\n}\n.paraui-v4-stepper .component-stepper-item-title {\n  display: inline-block;\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  padding-inline-end: 10px;\n  font-weight: 700;\n  line-height: 30px;\n  position: relative;\n  max-width: 140px;\n  min-width: 50px;\n}\n.paraui-v4-stepper .component-stepper-item-title::after {\n  position: absolute;\n  top: 16px;\n  inset-inline-start: 100%;\n  display: block;\n  width: 9999px;\n  height: 1px;\n  background: rgba(5, 5, 5, 0.06);\n  content: \"\";\n}\n.paraui-v4-stepper .component-stepper-item-subtitle {\n  display: inline;\n  margin-left: 8px;\n  color: rgb(92, 101, 115);\n  font-weight: normal;\n  font-size: 14px;\n}\n.paraui-v4-stepper .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n  font-size: 12px;\n  line-height: 17px;\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(255, 255, 255);\n  background: rgb(246, 103, 103);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(92, 101, 115);\n  background: rgb(234, 236, 241);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  border-top: 1px dashed rgb(212, 218, 227);\n  height: 0;\n  background: transparent;\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-tail::after {\n  border-left: 1px dashed rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background: rgb(46, 101, 230);\n}\n@media (min-width: 1200px) and (max-width: 2000px) {\n  .paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n    background: linear-gradient(63deg, #2e65e6 1%, #ffffff 83%);\n    background-position: 400px 0;\n    background-size: 400px 100%;\n  }\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-tail::after {\n  background: linear-gradient(180deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon {\n  background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon .component-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-title {\n  font-weight: 400;\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon {\n  background-color: rgb(87, 131, 235);\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(255, 255, 255);\n  background-color: rgb(87, 131, 235);\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background-color: rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-tail::after {\n  border-left: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n  border-color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n  color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item.component-stepper-next-error .component-stepper-item-title::after {\n  background: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-disabled {\n  cursor: not-allowed;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] {\n  cursor: pointer;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-title,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-subtitle,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-description,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-icon .component-stepper-icon {\n  transition: color 0.3s;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-title,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-subtitle,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon {\n  border-color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon .component-stepper-icon {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon {\n  height: auto;\n  border: 0;\n}\n.paraui-v4-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon > .component-stepper-icon {\n  top: 0;\n  left: 0;\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n}\n.paraui-v4-stepper .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n  background: rgb(46, 101, 230);\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n  white-space: nowrap;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n  margin-left: 0;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:last-child .component-stepper-item-title {\n  padding-right: 0;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-tail {\n  display: none;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-description {\n  white-space: normal;\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom .component-stepper-item-icon {\n  width: auto;\n  background: none;\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon {\n  background: rgb(46, 101, 230);\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-finish .component-stepper-item-icon {\n  background: rgb(87, 131, 235);\n}\n.paraui-v4-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n  padding-left: 12px;\n}\n.paraui-v4-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n  padding-left: 0;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-icon {\n  width: 24px;\n  height: 24px;\n  margin: 0 8px 0 0;\n  font-size: 12px;\n  line-height: 24px;\n  text-align: center;\n  border-radius: 24px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-title {\n  padding-right: 12px;\n  font-size: 14px;\n  line-height: 24px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-title::after {\n  top: 12px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-tail {\n  top: 8px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  background: none;\n  border: 0;\n  border-radius: 0;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon > .component-stepper-icon {\n  font-size: 24px;\n  line-height: 24px;\n  transform: none;\n}\n.paraui-v4-stepper.component-stepper-vertical {\n  display: flex;\n  flex-direction: column;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item {\n  display: block;\n  flex: 1 0 auto;\n  padding-left: 0;\n  overflow: visible;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-icon {\n  float: left;\n  margin-right: 16px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-content {\n  display: block;\n  min-height: 68px;\n  overflow: hidden;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-title {\n  line-height: 32px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-description {\n  padding-bottom: 12px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container {\n  flex-direction: row;\n  align-items: flex-start;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 15px;\n  width: 1px;\n  height: 100%;\n  padding: 36px 0 6px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail::after {\n  width: 1px;\n  height: 100%;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item:not(:last-child) > .component-stepper-item-container > .component-stepper-item-tail {\n  display: block;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v4-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 12px;\n  padding: 30px 0 6px;\n}\n.paraui-v4-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-title {\n  line-height: 24px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item {\n  overflow: visible;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-tail {\n  margin-left: 58px;\n  padding: 3.5px 24px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-content {\n  display: block;\n  width: 116px;\n  margin-top: 8px;\n  text-align: center;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-icon {\n  display: inline-block;\n  margin-left: 42px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-title {\n  padding-right: 0;\n  padding-left: 0;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-subtitle {\n  display: block;\n  margin-bottom: 4px;\n  margin-left: 0;\n  line-height: 1.5715;\n}\n.paraui-v4-stepper.component-stepper-label-vertical.component-stepper-small:not(.component-stepper-dot) .component-stepper-item-icon {\n  margin-left: 46px;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:57\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-stepper {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  display: flex;\n  width: 100%;\n  text-align: initial;\n  overflow: auto;\n}\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item {\n  min-width: 140px;\n}\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item-icon,\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item-content {\n  width: calc(100% - 40px);\n  line-height: normal;\n}\n.paraui-v4-stepper .component-stepper-item {\n  position: relative;\n  display: inline-block;\n  flex: 1;\n  vertical-align: top;\n  overflow: hidden;\n  margin-inline-start: 10px;\n}\n.paraui-v4-stepper .component-stepper-item-container {\n  outline: none;\n}\n.paraui-v4-stepper .component-stepper-item-container .component-stepper-item-icon {\n  margin-inline-start: 0;\n  margin-inline-end: 10px;\n}\n.paraui-v4-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-tail,\n.paraui-v4-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v4-stepper .component-stepper-item-icon,\n.paraui-v4-stepper .component-stepper-item-content {\n  display: inline-block;\n  vertical-align: top;\n}\n.paraui-v4-stepper .component-stepper-item-icon {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 30px;\n  height: 30px;\n  font-size: 16px;\n  line-height: 30px;\n  text-align: center;\n  border-radius: 50%;\n  background-color: rgb(234, 236, 241);\n  transition: background-color 0.3s, border-color 0.3s;\n}\n.paraui-v4-stepper .component-stepper-item-icon .component-stepper-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: rgb(92, 101, 115);\n  vertical-align: middle;\n}\n.paraui-v4-stepper .component-stepper-item-icon .component-stepper-icon svg {\n  color: inherit;\n}\n.paraui-v4-stepper .component-stepper-item-tail {\n  position: absolute;\n  top: 12px;\n  left: 0;\n  width: 100%;\n  padding: 0 10px;\n}\n.paraui-v4-stepper .component-stepper-item-tail::after {\n  display: inline-block;\n  width: 100%;\n  height: 1px;\n  border-radius: 1px;\n  transition: background 0.3s;\n  content: \"\";\n}\n.paraui-v4-stepper .component-stepper-item-title {\n  display: inline-block;\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  padding-inline-end: 10px;\n  font-weight: 700;\n  line-height: 30px;\n  position: relative;\n  max-width: 140px;\n  min-width: 50px;\n}\n.paraui-v4-stepper .component-stepper-item-title::after {\n  position: absolute;\n  top: 16px;\n  inset-inline-start: 100%;\n  display: block;\n  width: 9999px;\n  height: 1px;\n  background: rgba(5, 5, 5, 0.06);\n  content: \"\";\n}\n.paraui-v4-stepper .component-stepper-item-subtitle {\n  display: inline;\n  margin-left: 8px;\n  color: rgb(92, 101, 115);\n  font-weight: normal;\n  font-size: 14px;\n}\n.paraui-v4-stepper .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n  font-size: 12px;\n  line-height: 12px;\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(255, 255, 255);\n  background: rgb(246, 103, 103);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(92, 101, 115);\n  background: rgb(234, 236, 241);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  border-top: 1px dashed rgb(212, 218, 227);\n  height: 0;\n  background: transparent;\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-tail::after {\n  border-left: 1px dashed rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background: rgb(46, 101, 230);\n}\n@media (min-width: 1200px) and (max-width: 2000px) {\n  .paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n    background: linear-gradient(63deg, #2e65e6 1%, #ffffff 83%);\n    background-position: 400px 0;\n    background-size: 400px 100%;\n  }\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-tail::after {\n  background: linear-gradient(180deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon {\n  background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon .component-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-title {\n  font-weight: 400;\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon {\n  background-color: rgb(87, 131, 235);\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(255, 255, 255);\n  background-color: rgb(87, 131, 235);\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background-color: rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-tail::after {\n  border-left: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n  border-color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n  color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item.component-stepper-next-error .component-stepper-item-title::after {\n  background: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-disabled {\n  cursor: not-allowed;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] {\n  cursor: pointer;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-title,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-subtitle,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-description,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-icon .component-stepper-icon {\n  transition: color 0.3s;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-title,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-subtitle,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon {\n  border-color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon .component-stepper-icon {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon {\n  height: auto;\n  border: 0;\n}\n.paraui-v4-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon > .component-stepper-icon {\n  top: 0;\n  left: 0;\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n}\n.paraui-v4-stepper .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n  background: rgb(46, 101, 230);\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n  white-space: nowrap;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n  margin-left: 0;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:last-child .component-stepper-item-title {\n  padding-right: 0;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-tail {\n  display: none;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-description {\n  white-space: normal;\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom .component-stepper-item-icon {\n  width: auto;\n  background: none;\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon {\n  background: rgb(46, 101, 230);\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-finish .component-stepper-item-icon {\n  background: rgb(87, 131, 235);\n}\n.paraui-v4-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n  padding-left: 12px;\n}\n.paraui-v4-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n  padding-left: 0;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-icon {\n  width: 24px;\n  height: 24px;\n  margin: 0 8px 0 0;\n  font-size: 12px;\n  line-height: 24px;\n  text-align: center;\n  border-radius: 24px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-title {\n  padding-right: 12px;\n  font-size: 14px;\n  line-height: 24px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-title::after {\n  top: 12px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-tail {\n  top: 8px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  background: none;\n  border: 0;\n  border-radius: 0;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon > .component-stepper-icon {\n  font-size: 24px;\n  line-height: 24px;\n  transform: none;\n}\n.paraui-v4-stepper.component-stepper-vertical {\n  display: flex;\n  flex-direction: column;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item {\n  display: block;\n  flex: 1 0 auto;\n  padding-left: 0;\n  overflow: visible;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-icon {\n  float: left;\n  margin-right: 16px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-content {\n  display: block;\n  min-height: 68px;\n  overflow: hidden;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-title {\n  line-height: 32px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-description {\n  padding-bottom: 12px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container {\n  flex-direction: row;\n  align-items: flex-start;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 15px;\n  width: 1px;\n  height: 100%;\n  padding: 36px 0 6px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail::after {\n  width: 1px;\n  height: 100%;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item:not(:last-child) > .component-stepper-item-container > .component-stepper-item-tail {\n  display: block;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v4-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 12px;\n  padding: 30px 0 6px;\n}\n.paraui-v4-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-title {\n  line-height: 24px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item {\n  overflow: visible;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-tail {\n  margin-left: 58px;\n  padding: 3.5px 24px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-content {\n  display: block;\n  width: 116px;\n  margin-top: 8px;\n  text-align: center;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-icon {\n  display: inline-block;\n  margin-left: 42px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-title {\n  padding-right: 0;\n  padding-left: 0;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-subtitle {\n  display: block;\n  margin-bottom: 4px;\n  margin-left: 0;\n  line-height: 1.5715;\n}\n.paraui-v4-stepper.component-stepper-label-vertical.component-stepper-small:not(.component-stepper-dot) .component-stepper-item-icon {\n  margin-left: 46px;\n}";
 styleInject(css_248z);
 
 //steps
@@ -70,22 +70,22 @@ var Stepper = function Stepper(props) {
     errorStep = props.errorStep,
     steps = props.steps,
     _props$direction = props.direction,
-    direction = _props$direction === void 0 ? "horizontal" : _props$direction,
+    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
     children = props.children,
     className = props.className,
     restProps = __rest(props, ["current", "errorStep", "steps", "direction", "children", "className"]);
   var prefixCls = "".concat($rcPrefixCls, "-stepper");
   //内置finish、error 图标
   var icons = {
-    finish: Icons["done"],
-    error: Icons["done"]
+    finish: Icons['done'],
+    error: Icons['done']
   };
   //步骤图标渲染
   var stepIconRender = function stepIconRender(_ref) {
     var node = _ref.node,
       status = _ref.status;
-    if (status === "finish") {
-      return /*#__PURE__*/React__default.cloneElement(node, {}, Icons["done"]);
+    if (status === 'finish') {
+      return /*#__PURE__*/React__default.cloneElement(node, {}, Icons['done']);
     }
     return node;
   };
@@ -93,20 +93,20 @@ var Stepper = function Stepper(props) {
   var renderStep = function renderStep() {
     if (!(steps === null || steps === void 0 ? void 0 : steps.length)) return children;
     return steps.map(function (item, index) {
-      var label = "";
-      var description = "";
+      var label = '';
+      var description = '';
       var icon = null;
       var isErr = index === errorStep;
-      if (typeof item === "string") {
+      if (typeof item === 'string') {
         label = item;
         icon = isErr ? jsx(CloseIcon, {
-          size: 'medium'
+          size: "medium"
         }) : Icons[index + 1];
-      } else if (_typeof(item) === "object") {
+      } else if (_typeof(item) === 'object') {
         label = item.label;
         description = item.description;
         icon = isErr ? jsx(CloseIcon, {
-          size: 'medium'
+          size: "medium"
         }) : item.icon || Icons[index + 1];
       }
       return jsx(Stepper.Step, {
@@ -116,7 +116,7 @@ var Stepper = function Stepper(props) {
         title: jsx(AutoTips, {
           children: label
         }),
-        status: index === errorStep ? "error" : undefined,
+        status: index === errorStep ? 'error' : undefined,
         icon: icon
       }, index);
     });

package/Styles/scrollbar.scss

@@ -1,39 +1,39 @@
 // 滚动条整体宽度
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-  background-color: $A2; // 背景色
+  width: 8px;
+  height: 8px;
+  background-color: $NA2; // 背景色
 }
 
 // 滚动条滑槽样式
 ::-webkit-scrollbar-track {
-  border-radius: 6px;
+  border-radius: 4px;
 }
 
 // 滚动条样式
 ::-webkit-scrollbar-thumb {
-  background: $T3;
-  border-radius: 6px;
+  background: $NT3;
+  border-radius: 4px;
 }
 
 // 边角
 ::-webkit-scrollbar-corner {
-  background: $A2;
+  background: $NA2;
 }
 
 // 鼠标移入上去
 ::-webkit-scrollbar-thumb:hover {
-  background: $A1;
+  background: $NA1;
 }
 
 // 鼠标点击
 ::-webkit-scrollbar-thumb:active {
-  background: $A1;
+  background: $NA1;
 }
 
 // 浏览器失焦的样式
 ::-webkit-scrollbar-thumb:window-inactive {
-  background-color: $T3;
+  background-color: $NT3;
 }
 
 .#{$prefixCls}-scrollbar-small {
@@ -46,54 +46,54 @@
 
     // 滚动条滑槽样式
     &::-webkit-scrollbar-track {
-      border-radius: 4px;
+      border-radius: 2px;
     }
 
     // 滚动条样式
     &::-webkit-scrollbar-thumb {
-      border-radius: 4px;
+      border-radius: 2px;
     }
   }
 }
 
 .#{$prefixCls}-scrollbar-small-deep {
-  & *, & {
+  &, & * {
     // 滚动条整体宽度
-    ::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       width: 4px;
       height: 4px;
-      background-color: $T2; // 背景色
+      background-color: $NT2; // 背景色
     }
 
     // 滚动条滑槽样式
-    ::-webkit-scrollbar-track {
-      border-radius: 4px;
+    &::-webkit-scrollbar-track {
+      border-radius: 2px;
     }
 
     // 滚动条样式
-    ::-webkit-scrollbar-thumb {
-      border-radius: 4px;
-      background: $A1;
+    &::-webkit-scrollbar-thumb {
+      border-radius: 2px;
+      background: $NA1;
     }
 
     // 边角
-    ::-webkit-scrollbar-corner {
-      background: $T2;
+    &::-webkit-scrollbar-corner {
+      background: $NT2;
     }
 
     // 鼠标移入上去
-    ::-webkit-scrollbar-thumb:hover {
-      background: $T3;
+    &::-webkit-scrollbar-thumb:hover {
+      background: $NT3;
     }
 
     // 鼠标点击
-    ::-webkit-scrollbar-thumb:active {
-      background: $T3;
+    &::-webkit-scrollbar-thumb:active {
+      background: $NT3;
     }
 
     // 浏览器失焦的样式
-    ::-webkit-scrollbar-thumb:window-inactive {
-      background-color: $A1;
+    &::-webkit-scrollbar-thumb:window-inactive {
+      background-color: $NA1;
     }
   }
 }
@@ -102,18 +102,18 @@
   & *, & {
     // 滚动条整体宽度
     &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
+      width: 4px;
+      height: 4px;
     }
 
     // 滚动条滑槽样式
     &::-webkit-scrollbar-track {
-      border-radius: 6px;
+      border-radius: 2px;
     }
 
     // 滚动条样式
     &::-webkit-scrollbar-thumb {
-      border-radius: 6px;
+      border-radius: 2px;
     }
   }
 }
@@ -121,41 +121,41 @@
 .#{$prefixCls}-scrollbar-medium-deep {
   & *, & {
     // 滚动条整体宽度
-    ::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-      background-color: $T2; // 背景色
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+      background-color: $NT2; // 背景色
     }
 
     // 滚动条滑槽样式
-    ::-webkit-scrollbar-track {
-      border-radius: 6px;
+    &::-webkit-scrollbar-track {
+      border-radius: 2px;
     }
 
     // 滚动条样式
-    ::-webkit-scrollbar-thumb {
-      border-radius: 6px;
-      background: $A1;
+    &::-webkit-scrollbar-thumb {
+      border-radius: 2px;
+      background: $NA1;
     }
 
     // 边角
-    ::-webkit-scrollbar-corner {
-      background: $T2;
+    &::-webkit-scrollbar-corner {
+      background: $NT2;
     }
 
     // 鼠标移入上去
-    ::-webkit-scrollbar-thumb:hover {
-      background: $T3;
+    &::-webkit-scrollbar-thumb:hover {
+      background: $NT3;
     }
 
     // 鼠标点击
-    ::-webkit-scrollbar-thumb:active {
-      background: $T3;
+    &::-webkit-scrollbar-thumb:active {
+      background: $NT3;
     }
 
     // 浏览器失焦的样式
-    ::-webkit-scrollbar-thumb:window-inactive {
-      background-color: $A1;
+    &::-webkit-scrollbar-thumb:window-inactive {
+      background-color: $NA1;
     }
   }
 }
@@ -170,12 +170,12 @@
 
     // 滚动条滑槽样式
     &::-webkit-scrollbar-track {
-      border-radius: 8px;
+      border-radius: 4px;
     }
 
     // 滚动条样式
     &::-webkit-scrollbar-thumb {
-      border-radius: 8px;
+      border-radius: 4px;
     }
   }
 }
@@ -183,41 +183,41 @@
 .#{$prefixCls}-scrollbar-large-deep {
   & *, & {
     // 滚动条整体宽度
-    ::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       width: 8px;
       height: 8px;
-      background-color: $T2; // 背景色
+      background-color: $NT2; // 背景色
     }
 
     // 滚动条滑槽样式
-    ::-webkit-scrollbar-track {
-      border-radius: 8px;
+    &::-webkit-scrollbar-track {
+      border-radius: 4px;
     }
 
     // 滚动条样式
-    ::-webkit-scrollbar-thumb {
-      border-radius: 8px;
-      background: $A1;
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background: $NA1;
     }
 
     // 边角
-    ::-webkit-scrollbar-corner {
-      background: $T2;
+    &::-webkit-scrollbar-corner {
+      background: $NT2;
     }
 
     // 鼠标移入上去
-    ::-webkit-scrollbar-thumb:hover {
-      background: $T3;
+    &::-webkit-scrollbar-thumb:hover {
+      background: $NT3;
     }
 
     // 鼠标点击
-    ::-webkit-scrollbar-thumb:active {
-      background: $T3;
+    &::-webkit-scrollbar-thumb:active {
+      background: $NT3;
     }
 
     // 浏览器失焦的样式
-    ::-webkit-scrollbar-thumb:window-inactive {
-      background-color: $A1;
+    &::-webkit-scrollbar-thumb:window-inactive {
+      background-color: $NA1;
     }
   }
 }

package/Styles/theme.scss

@@ -15,8 +15,9 @@ $large: 18px;
 $medium: 16px;
 $small: 14px;
 $smallest: 12px;
+
 $normal: 400;
-$medium: 500;
+$weightMedium: 500;
 $bold: 700;
 
 // 阴影
@@ -38,84 +39,84 @@ $dropdownItemHeight: 30px;
 
 // -------- UI提供的色卡--------//
 // 主题色
-$P1: rgba(46, 101, 230, 1); // 主题蓝
-$PT8: rgba(87, 131, 235, 1); // (80%)Hover
-$PT2: rgba(213, 224, 250, 1); // (20%)黛色分割线
-$PT05: rgba(240, 245, 255, 1); // (5%)背景
-$P2: rgba(46, 101, 230, 0.1); // (15%)背景
+$NP1: rgba(46, 101, 230, 1); // 主题蓝
+$NPT8: rgba(87, 131, 235, 1); // (80%)Hover
+$NPT2: rgba(213, 224, 250, 1); // (20%)黛色分割线
+$NPT05: rgba(240, 245, 255, 1); // (5%)背景
+$NP2: rgba(46, 101, 230, 0.1); // (15%)背景
 
 // 文字色
-$T1: rgba(29, 33, 38, 1); // 一级文案
-$T2: rgba(92, 101, 115, 1); // 二级文案
-$T3: rgba(161, 168, 179, 1); // 三级文案
+$NT1: rgba(29, 33, 38, 1); // 一级文案
+$NT2: rgba(92, 101, 115, 1); // 二级文案
+$NT3: rgba(161, 168, 179, 1); // 三级文案
 
 // 辅助色
-$A1: rgba(212, 218, 227, 1); // 描边、分割线
-$A2: rgba(234, 236, 241, 1); // 分割线
-$A3: rgba(247, 248, 250, 1); // 背景
-$A4: rgba(255, 255, 255, 1); // 万能色
-$A5: rgba(255, 255, 255, 0.5); // 万能色
-$A6: rgba(255, 255, 255, 0.3); // 万能色
+$NA1: rgba(212, 218, 227, 1); // 描边、分割线
+$NA2: rgba(234, 236, 241, 1); // 分割线
+$NA3: rgba(247, 248, 250, 1); // 背景
+$NA4: rgba(255, 255, 255, 1); // 万能色
+$NA5: rgba(255, 255, 255, 0.5); // 万能色
+$NA6: rgba(255, 255, 255, 0.3); // 万能色
 
 // 导航色
-$B1: rgba(28, 41, 60, 1); // 深色导航背景
-$B2: rgba(34, 54, 102, 1); // 深色导航背景 - 选中&Hover
+$NB1: rgba(28, 41, 60, 1); // 深色导航背景
+$NB2: rgba(34, 54, 102, 1); // 深色导航背景 - 选中&Hover
 
 // 渐变色
-$C1: linear-gradient(90deg, rgba(46, 101, 230, 1) 50%, rgba(240, 245, 255, 1) 100%); // 渐变色
+$NC1: linear-gradient(90deg, rgba(46, 101, 230, 1) 50%, rgba(240, 245, 255, 1) 100%); // 渐变色
 
 // 透明色
-$D1: rgba(29, 33, 38, 0.9); // 背景、蒙层
-$D2: rgba(29, 33, 38, 0.4); // 背景
-$D3: rgba(212, 218, 227, 0.4); // 投影
+$ND1: rgba(29, 33, 38, 0.9); // 背景、蒙层
+$ND2: rgba(29, 33, 38, 0.4); // 背景
+$ND3: rgba(212, 218, 227, 0.4); // 投影
 
 //////////// 状态色 //////////////
 // 基准色
-$E1: rgba(19, 191, 76, 1); // 辅助色（成功）
-$E2: rgba(19, 191, 76, 0.1); //辅助色（成功）
-$ET05: rgba(232, 252, 239, 1); // 辅助色（成功）
+$NE1: rgba(19, 191, 76, 1); // 辅助色（成功）
+$NE2: rgba(19, 191, 76, 0.1); //辅助色（成功）
+$NET05: rgba(232, 252, 239, 1); // 辅助色（成功）
 
-$F1: rgba(255, 147, 38, 1); // 辅助色（警示）
-$F2: rgba(255, 147, 38, 0.1); // 辅助色（警示）
-$FT05: rgba(255, 246, 235, 1); // 辅助色（警示）
+$NF1: rgba(255, 147, 38, 1); // 辅助色（警示）
+$NF2: rgba(255, 147, 38, 0.1); // 辅助色（警示）
+$NFT05: rgba(255, 246, 235, 1); // 辅助色（警示）
 
-$G1: rgba(244, 66, 66, 1); // 辅助色（失败、错误）
-$G2: rgba(244, 66, 66, 0.1); // 辅助色（失败、错误）
-$GT8: rgba(246, 103, 103, 1); // 辅助色（失败、错误）
-$GT05: rgba(255, 235, 235, 1); // 辅助色（失败、错误）
+$NG1: rgba(244, 66, 66, 1); // 辅助色（失败、错误）
+$NG2: rgba(244, 66, 66, 0.1); // 辅助色（失败、错误）
+$NGT8: rgba(246, 103, 103, 1); // 辅助色（失败、错误）
+$NGT05: rgba(255, 235, 235, 1); // 辅助色（失败、错误）
 
 // 常用
-$J1: rgba(38, 129, 255, 1);
-$K1: rgba(38, 129, 255, 0.1);
-$J2: rgba(19, 163, 191, 1);
-$K2: rgba(19, 163, 191, 0.1);
-$J3: rgba(70, 70, 230, 1);
-$K3: rgba(70, 70, 230, 0.1);
-$J4: rgba(11, 97, 217, 1);
-$K4: rgba(11, 97, 217, 0.1);
-$J5: rgba(255, 185, 0, 1);
-$K5: rgba(255, 185, 0, 0.1);
-$J6: rgba(204, 61, 204, 1);
-$K6: rgba(204, 61, 204, 0.1);
-$J7: rgba(134, 50, 245, 1);
-$K7: rgba(134, 50, 245, 0.1);
-$J8: rgba(200, 20, 15, 1);
-$K8: rgba(200, 20, 15, 0.1);
+$NJ1: rgba(38, 129, 255, 1);
+$NK1: rgba(38, 129, 255, 0.1);
+$NJ2: rgba(19, 163, 191, 1);
+$NK2: rgba(19, 163, 191, 0.1);
+$NJ3: rgba(70, 70, 230, 1);
+$NK3: rgba(70, 70, 230, 0.1);
+$NJ4: rgba(11, 97, 217, 1);
+$NK4: rgba(11, 97, 217, 0.1);
+$NJ5: rgba(255, 185, 0, 1);
+$NK5: rgba(255, 185, 0, 0.1);
+$NJ6: rgba(204, 61, 204, 1);
+$NK6: rgba(204, 61, 204, 0.1);
+$NJ7: rgba(134, 50, 245, 1);
+$NK7: rgba(134, 50, 245, 0.1);
+$NJ8: rgba(200, 20, 15, 1);
+$NK8: rgba(200, 20, 15, 0.1);
 
 // 其他
-$L1: rgba(20, 153, 255, 1);
-$M1: rgba(20, 153, 255, 0.1);
-$L2: rgba(0, 180, 170, 1);
-$M2: rgba(0, 180, 170, 0.1);
-$L3: rgba(9, 94, 179, 1);
-$M3: rgba(9, 94, 179, 0.1);
-$L4: rgba(182, 61, 242, 1);
-$M4: rgba(182, 61, 242, 0.1);
-$L5: rgba(242, 91, 61, 1);
-$M5: rgba(242, 91, 61, 0.1);
-$L6: rgba(90, 210, 0, 1);
-$M6: rgba(90, 210, 0, 0.1);
-$L7: rgba(255, 111, 38, 1);
-$M7: rgba(255, 111, 38, 0.1);
+$NL1: rgba(20, 153, 255, 1);
+$NM1: rgba(20, 153, 255, 0.1);
+$NL2: rgba(0, 180, 170, 1);
+$NM2: rgba(0, 180, 170, 0.1);
+$NL3: rgba(9, 94, 179, 1);
+$NM3: rgba(9, 94, 179, 0.1);
+$NL4: rgba(182, 61, 242, 1);
+$NM4: rgba(182, 61, 242, 0.1);
+$NL5: rgba(242, 91, 61, 1);
+$NM5: rgba(242, 91, 61, 0.1);
+$NL6: rgba(90, 210, 0, 1);
+$NM6: rgba(90, 210, 0, 0.1);
+$NL7: rgba(255, 111, 38, 1);
+$NM7: rgba(255, 111, 38, 0.1);
 
 

package/Switch/index.d.ts

@@ -1,14 +1,14 @@
-import React, { FunctionComponent, ReactNode } from "react";
-import { LabelTooltipProps } from "../Label";
-import { TooltipProps } from "../Tooltip";
-import "./index.scss";
+import React, { FunctionComponent, ReactNode } from 'react';
+import { LabelTooltipProps } from '../Label';
+import { TooltipProps } from '../Tooltip';
+import './index.scss';
 type SwitchChangeEventHandler = (checked: boolean, event: React.MouseEvent | React.KeyboardEvent) => void;
 type SwitchClickEventHandler = SwitchChangeEventHandler;
 export interface SwitchProps {
     /**
      * 开关大小
      */
-    size?: "small" | "default";
+    size?: 'small' | 'default';
     /**
      * 类名
      */
@@ -84,11 +84,11 @@ export interface SwitchProps {
     /**
      * 标题位置
      */
-    labelPlacement?: "top" | "bottom" | "start" | "end";
+    labelPlacement?: 'top' | 'bottom' | 'start' | 'end';
     /**
      * 描述位置
      */
-    descPlacement?: "start" | "end";
+    descPlacement?: 'start' | 'end';
     /**
      * 辅助文本
      */