link to variables

examples/docs/rate.md

@@ -44,7 +44,7 @@
 ```
 :::
 
-## 辅助文字
+### 辅助文字
 
 用辅助文字直接地表达对应分数
 
@@ -57,7 +57,7 @@
 ```
 :::
 
-## 其他 icon
+### 其他 icon
 
 :::demo 当有多层评价时，可以用不同类型的 icon 区分评分层级
 ``` html
@@ -70,7 +70,7 @@
 ```
 :::
 
-## 只读
+### 只读
 
 只读的评分用来展示分数，允许出现半星
 
@@ -86,7 +86,7 @@
 ```
 :::
 
-## Attributes
+### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | max | 最大分值 | Number | - | 5 |
@@ -105,7 +105,7 @@
 | texts | 辅助文字数组 | Array | - | ['极差', '失望', '一般', '满意', '惊喜'] |
 | text-template | 只读时的辅助文字模板 | String | - | {value} |
 
-## Events
+### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change | 分值改变时触发 | 改变后的分值 |

packages/theme-default/src/common/var.css

@@ -373,6 +373,13 @@
     --card-border-radius: 4px;
     --card-padding: 20px;
 
+  /*Slider
+    --------------------------*/
+  --slider-main-background-color: var(--color-primary);
+  --slider-runway-background-color: #e5e9f2;
+  --slider-runway-hover-color: #1d8ce0;
+  --slider-stop-background-color: #c0ccda;
+
     /*Steps
     --------------------------*/
     --steps-border-color: var(--disabled-border-base);

packages/theme-default/src/message.css

@@ -15,7 +15,7 @@
     background-color: #fff;
     transition: opacity 0.3s, top 0.4s;
     overflow: hidden;
-    z-index: 2000;
+    z-index: var(--index-popper);
 
     @e group {
       margin-left: 28px;

packages/theme-default/src/notification.css

@@ -14,7 +14,7 @@
     box-shadow: 0 0 6px rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .12);
     transition: opacity 0.3s, transform .3s, right .3s, top 0.4s;
     overflow: hidden;
-    z-index: 2000;
+    z-index: var(--index-popper);
 
     @e group {
       & span {

packages/theme-default/src/slider.css

@@ -7,7 +7,7 @@
       width: 100%;
       height: 4px;
       margin: 20px 0;
-      background-color: #E5E9F2;
+      background-color: var(--slider-runway-background-color);
       border-radius: 3px;
       position: relative;
       cursor: pointer;
@@ -30,7 +30,7 @@
 
     @e bar {
       height: 4px;
-      background-color: #20A0FF;
+      background-color: var(--slider-main-background-color);
       border-top-left-radius: 3px;
       border-bottom-left-radius: 3px;
       position: absolute;
@@ -47,7 +47,7 @@
 
     @e button {
       size: 12px;
-      background-color: #20A0FF;
+      background-color: var(--slider-main-background-color);
       border-radius: 50%;
       position: absolute;
       top: 12px;
@@ -70,7 +70,7 @@
       text-align: center;
       size: 26px;
       border-radius: 50%;
-      background-color: #20A0FF;
+      background-color: var(--slider-main-background-color);
       color: #fff;
       cursor: default;
       z-index: var(--index-top);
@@ -78,14 +78,14 @@
       transform-origin: center bottom;
 
       &::before {
-        triangle: 9px top #20A0FF;
+        triangle: 9px top var(--slider-main-background-color);
         position: absolute;
         top: -14px;
         left: 4px;
       }
 
       &::after {
-        triangle: 9px bottom #20A0FF;
+        triangle: 9px bottom var(--slider-main-background-color);
         position: absolute;
         bottom: -14px;
         left: 4px;
@@ -104,7 +104,7 @@
       position: absolute;
       size: 4px;
       border-radius: 50%;
-      background-color: #c0ccda;
+      background-color: var(--slider-stop-background-color);
       transform: translateX(-50%);
     }