diff --git a/packages/varlet-ui/src/back-top/backTop.less b/packages/varlet-ui/src/back-top/backTop.less
index 82c544ea52e..4cd10f9660a 100644
--- a/packages/varlet-ui/src/back-top/backTop.less
+++ b/packages/varlet-ui/src/back-top/backTop.less
@@ -1,3 +1,5 @@
+@import '../styles/var';
+
@back-top-right: 40px;
@back-top-bottom: 40px;
@back-top-button-size: 40px;
@@ -7,7 +9,7 @@
right: @back-top-right;
bottom: @back-top-bottom;
transform: scale(0);
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
&__button {
width: @back-top-button-size;
diff --git a/packages/varlet-ui/src/badge/Badge.vue b/packages/varlet-ui/src/badge/Badge.vue
index 72ee2696074..ef89bfb3059 100644
--- a/packages/varlet-ui/src/badge/Badge.vue
+++ b/packages/varlet-ui/src/badge/Badge.vue
@@ -12,7 +12,7 @@
{{ values }}
-
+
diff --git a/packages/varlet-ui/src/badge/badge.less b/packages/varlet-ui/src/badge/badge.less
index fddcd73d971..bfd73b6a2cc 100644
--- a/packages/varlet-ui/src/badge/badge.less
+++ b/packages/varlet-ui/src/badge/badge.less
@@ -96,7 +96,7 @@
&-fade-enter-active,
&-fade-leave-active {
- transition: opacity 0.15s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: opacity 0.15s @cubic-bezier;
}
&-fade-enter-from,
diff --git a/packages/varlet-ui/src/button/button.less b/packages/varlet-ui/src/button/button.less
index 1342a8d0bbb..356c38724cd 100644
--- a/packages/varlet-ui/src/button/button.less
+++ b/packages/varlet-ui/src/button/button.less
@@ -31,7 +31,7 @@
border-radius: @button-border-radius;
user-select: none;
will-change: box-shadow;
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
cursor: pointer;
font-family: inherit;
diff --git a/packages/varlet-ui/src/cell/docs/en-US.md b/packages/varlet-ui/src/cell/docs/en-US.md
index ff7183577f8..c6e681af8fb 100644
--- a/packages/varlet-ui/src/cell/docs/en-US.md
+++ b/packages/varlet-ui/src/cell/docs/en-US.md
@@ -66,8 +66,8 @@ createApp().use(Cell)
| Variable | Default |
| --- | --- |
-| `@cell-font-size` | `14px` |
-| `@cell-desc-font-size` | `12px` |
+| `@cell-font-size` | `@font-size-md` |
+| `@cell-desc-font-size` | `@font-size-sm` |
| `@cell-desc-color` | `rgba(0, 0, 0, 0.6)` |
| `@cell-padding` | `10px 12px` |
| `@cell-min-height` | `40px` |
diff --git a/packages/varlet-ui/src/cell/docs/zh-CN.md b/packages/varlet-ui/src/cell/docs/zh-CN.md
index c9429ffdb4f..fa326321960 100644
--- a/packages/varlet-ui/src/cell/docs/zh-CN.md
+++ b/packages/varlet-ui/src/cell/docs/zh-CN.md
@@ -66,8 +66,8 @@ createApp().use(Cell)
| 变量名 | 默认值 |
| --- | --- |
-| `@cell-font-size` | `14px` |
-| `@cell-desc-font-size` | `12px` |
+| `@cell-font-size` | `@font-size-md` |
+| `@cell-desc-font-size` | `@font-size-sm` |
| `@cell-desc-color` | `rgba(0, 0, 0, 0.6)` |
| `@cell-padding` | `10px 12px` |
| `@cell-min-height` | `40px` |
diff --git a/packages/varlet-ui/src/chip/docs/en-US.md b/packages/varlet-ui/src/chip/docs/en-US.md
index 104b2e85d71..f1e6a76ddf5 100644
--- a/packages/varlet-ui/src/chip/docs/en-US.md
+++ b/packages/varlet-ui/src/chip/docs/en-US.md
@@ -174,8 +174,8 @@ Custom label side slots
| `@chip-mini-height` | `16px` |
| `@chip-small-height` | `24px` |
| `@chip-normal-height` | `32px` |
-| `@chip-large-height:` | `40px` |
-| `@chip-round-radius:` | `100px` |
+| `@chip-large-height` | `40px` |
+| `@chip-round-radius` | `100px` |
| `@chip-mini-padding` | `0 4px` |
| `@chip-small-padding` | `0 6px` |
| `@chip-normal-padding` | `0 10px` |
diff --git a/packages/varlet-ui/src/chip/docs/zh-CN.md b/packages/varlet-ui/src/chip/docs/zh-CN.md
index def4650580e..f1a89a8c268 100644
--- a/packages/varlet-ui/src/chip/docs/zh-CN.md
+++ b/packages/varlet-ui/src/chip/docs/zh-CN.md
@@ -174,8 +174,8 @@ export default {
| `@chip-mini-height` | `16px` |
| `@chip-small-height` | `24px` |
| `@chip-normal-height` | `32px` |
-| `@chip-large-height:` | `40px` |
-| `@chip-round-radius:` | `100px` |
+| `@chip-large-height` | `40px` |
+| `@chip-round-radius` | `100px` |
| `@chip-mini-padding` | `0 4px` |
| `@chip-small-padding` | `0 6px` |
| `@chip-normal-padding` | `0 10px` |
diff --git a/packages/varlet-ui/src/collapse-item/collapseItem.less b/packages/varlet-ui/src/collapse-item/collapseItem.less
index 34a6364d0fc..875fe3de65f 100644
--- a/packages/varlet-ui/src/collapse-item/collapseItem.less
+++ b/packages/varlet-ui/src/collapse-item/collapseItem.less
@@ -1,11 +1,20 @@
@import '../styles/var';
+@collapse-background: #fff;
+@collapse-color: #232222;
+@collapse-header-font-size: @font-size-lg;
+@collapse-header-padding: 10px 16px;
+@collapse-content-font-size: @font-size-md;
+@collapse-content-padding: 0 16px 10px;
+@collapse-item-margin-top: 16px;
+@collapse-disable-color: #bdbdbd;
+
.var-collapse-item {
box-sizing: border-box;
position: relative;
margin-top: 0;
- background: #fff;
- color: rgba(0, 0, 0, 0.87);
+ background: @collapse-background;
+ color: @collapse-color;
transition: margin-top 0.25s, color 0.25s;
&:before {
@@ -31,9 +40,9 @@
&-header {
align-items: center;
display: flex;
- font-size: @font-size-md;
+ font-size: @collapse-header-font-size;
outline: none;
- padding: 10px 16px;
+ padding: @collapse-header-padding;
justify-content: space-between;
position: relative;
width: 100%;
@@ -55,21 +64,23 @@
&-content {
transition: height 0.25s;
display: flex;
+ font-size: @collapse-content-font-size;
overflow: hidden;
}
&__wrap {
- padding: 0 16px 10px;
+ padding: @collapse-content-padding;
word-break: break-all;
flex: 1;
}
&__active + &,
&__active:not(:first-child) {
- margin-top: 16px;
+ margin-top: @collapse-item-margin-top;
}
&__disable {
- color: rgba(0, 0, 0, 0.38);
+ color: @collapse-disable-color;
+ cursor: not-allowed;
}
}
diff --git a/packages/varlet-ui/src/collapse/collapse.less b/packages/varlet-ui/src/collapse/collapse.less
deleted file mode 100644
index 1133f0dfdcb..00000000000
--- a/packages/varlet-ui/src/collapse/collapse.less
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../styles/elevation';
-
-.var-collapse {
- position: relative;
-}
diff --git a/packages/varlet-ui/src/collapse/collapse.vue b/packages/varlet-ui/src/collapse/collapse.vue
index 3efcc244260..170f2d4c26a 100644
--- a/packages/varlet-ui/src/collapse/collapse.vue
+++ b/packages/varlet-ui/src/collapse/collapse.vue
@@ -111,5 +111,9 @@ export default defineComponent({
diff --git a/packages/varlet-ui/src/collapse/docs/en-US.md b/packages/varlet-ui/src/collapse/docs/en-US.md
index 8a685006a60..881b28249cd 100644
--- a/packages/varlet-ui/src/collapse/docs/en-US.md
+++ b/packages/varlet-ui/src/collapse/docs/en-US.md
@@ -9,8 +9,7 @@ A content area which can be collapsed and expanded.
```js
import { Collapse, CollapseItem } from '@varlet/ui'
-createApp().use(Collapse)
-createApp().use(CollapseItem)
+createApp().use(Collapse).use(CollapseItem)
```
### Basic Usage
@@ -155,3 +154,17 @@ export default {
| `default` | Content | - |
| `title` | Title | - |
| `icon` | Custom right icon | - |
+
+### Theme Variables
+#### The following LESS variables can be overridden at build time to modify the theme style
+
+| Variable | Default |
+| --- | --- |
+| `@collapse-background` | `#fff` |
+| `@collapse-color` | `#232222` |
+| `@collapse-header-font-size` | `@font-size-lg` |
+| `@collapse-header-padding` | `10px 16px` |
+| `@collapse-content-font-size` | `@font-size-md` |
+| `@collapse-content-font-size` | `14px` |
+| `@collapse-item-margin-top` | `16px` |
+| `@collapse-disable-color` | `#bdbdbd` |
diff --git a/packages/varlet-ui/src/collapse/docs/zh-CN.md b/packages/varlet-ui/src/collapse/docs/zh-CN.md
index 05d2abc53c2..d2e50a132bd 100644
--- a/packages/varlet-ui/src/collapse/docs/zh-CN.md
+++ b/packages/varlet-ui/src/collapse/docs/zh-CN.md
@@ -9,8 +9,7 @@
```js
import { Collapse, CollapseItem } from '@varlet/ui'
-createApp().use(Collapse)
-createApp().use(CollapseItem)
+createApp().use(Collapse).use(CollapseItem)
```
### 基本使用
@@ -155,3 +154,17 @@ export default {
| `default` | 面板的内容 | - |
| `title` | 面板的标题 | - |
| `icon` | 自定义右侧icon | - |
+
+### 主题变量
+#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `@collapse-background` | `#fff` |
+| `@collapse-color` | `#232222` |
+| `@collapse-header-font-size` | `@font-size-lg` |
+| `@collapse-header-padding` | `10px 16px` |
+| `@collapse-content-font-size` | `@font-size-md` |
+| `@collapse-content-font-size` | `14px` |
+| `@collapse-item-margin-top` | `16px` |
+| `@collapse-disable-color` | `#bdbdbd` |
diff --git a/packages/varlet-ui/src/date-picker/date-picker.less b/packages/varlet-ui/src/date-picker/date-picker.less
index 3f04f93abfb..1b4bb326fa9 100644
--- a/packages/varlet-ui/src/date-picker/date-picker.less
+++ b/packages/varlet-ui/src/date-picker/date-picker.less
@@ -35,7 +35,7 @@
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
&--active {
opacity: 1;
@@ -53,7 +53,7 @@
display: flex;
align-items: center;
opacity: 0.6;
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
&--active {
opacity: 1;
@@ -188,13 +188,13 @@
&-translatey-enter-active,
&-reverse-translatey-enter-active {
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
}
&-translatey-leave-active,
&-reverse-translatey-leave-active {
position: absolute;
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
}
&-translatey-leave-to {
@@ -214,7 +214,7 @@
&-panel-fade-enter-from,
&-panel-fade-leave-to {
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
opacity: 0;
}
@@ -234,13 +234,13 @@
&-translatex-enter-active,
&-reverse-translatex-enter-active {
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
}
&-translatex-leave-active,
&-reverse-translatex-leave-active {
position: absolute;
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
}
&-translatex-leave-to {
diff --git a/packages/varlet-ui/src/form-details/formDetails.less b/packages/varlet-ui/src/form-details/formDetails.less
index 7f39f0f9907..6ca49cf0ee0 100644
--- a/packages/varlet-ui/src/form-details/formDetails.less
+++ b/packages/varlet-ui/src/form-details/formDetails.less
@@ -16,7 +16,7 @@
&-form-details-enter-active,
&-form-details-leave-active {
- transition: 0.2s all cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.2s all @cubic-bezier;
}
}
diff --git a/packages/varlet-ui/src/index-bar/docs/en-US.md b/packages/varlet-ui/src/index-bar/docs/en-US.md
index f07937bfd80..6c28dd1d2b8 100644
--- a/packages/varlet-ui/src/index-bar/docs/en-US.md
+++ b/packages/varlet-ui/src/index-bar/docs/en-US.md
@@ -9,8 +9,7 @@ Hyperlinks to scroll on one page.
```js
import { IndexBar, IndexAnchor } from '@varlet/ui'
-createApp().use(IndexBar)
-createApp().use(IndexAnchor)
+createApp().use(IndexBar).use(IndexAnchor)
```
### Basic Usage
@@ -106,8 +105,8 @@ Use ref to get IndexBar instance and call instance methods.
| Variable | Default |
| --- | --- |
-| `@index-bar-list-item-font-size` | `10px` |
-| `@index-bar-list-item-color` | `#2979ff` |
-| `@index-bar-list-item-active-color` | `#ee0a24` |
+| `@index-bar-list-item-font-size` | `@font-size-xs` |
+| `@index-bar-list-item-color` | `@color-primary` |
+| `@index-bar-list-item-active-color` | `@color-danger` |
| `@index-bar-list-item-height` | `14px` |
| `@index-bar-list-item-padding` | `0 10px` |
diff --git a/packages/varlet-ui/src/index-bar/docs/zh-CN.md b/packages/varlet-ui/src/index-bar/docs/zh-CN.md
index 75bf4240c69..dd060c118d5 100644
--- a/packages/varlet-ui/src/index-bar/docs/zh-CN.md
+++ b/packages/varlet-ui/src/index-bar/docs/zh-CN.md
@@ -9,8 +9,7 @@
```js
import { IndexBar, IndexAnchor } from '@varlet/ui'
-createApp().use(IndexBar)
-createApp().use(IndexAnchor)
+createApp().use(IndexBar).use(IndexAnchor)
```
### 基本使用
@@ -106,8 +105,8 @@ createApp().use(IndexAnchor)
| 变量名 | 默认值 |
| --- | --- |
-| `@index-bar-list-item-font-size` | `10px` |
-| `@index-bar-list-item-color` | `#2979ff` |
-| `@index-bar-list-item-active-color` | `#ee0a24` |
+| `@index-bar-list-item-font-size` | `@font-size-xs` |
+| `@index-bar-list-item-color` | `@color-primary` |
+| `@index-bar-list-item-active-color` | `@color-danger` |
| `@index-bar-list-item-height` | `14px` |
| `@index-bar-list-item-padding` | `0 10px` |
diff --git a/packages/varlet-ui/src/index-bar/indexBar.less b/packages/varlet-ui/src/index-bar/indexBar.less
index a9f7c52a568..2168521e3d5 100644
--- a/packages/varlet-ui/src/index-bar/indexBar.less
+++ b/packages/varlet-ui/src/index-bar/indexBar.less
@@ -2,7 +2,7 @@
@index-bar-list-item-font-size: @font-size-xs;
@index-bar-list-item-color: @color-primary;
-@index-bar-list-item-active-color: #ee0a24;
+@index-bar-list-item-active-color: @color-danger;
@index-bar-list-item-height: 14px;
@index-bar-list-item-padding: 0 10px;
diff --git a/packages/varlet-ui/src/input/docs/en-US.md b/packages/varlet-ui/src/input/docs/en-US.md
index e15450d5657..d2ef69dc5d8 100644
--- a/packages/varlet-ui/src/input/docs/en-US.md
+++ b/packages/varlet-ui/src/input/docs/en-US.md
@@ -170,7 +170,7 @@ Other values are converted to text as a user prompt。
| `@input-error-color` | `@color-danger` |
| `@input-blur-color` | `#888` |
| `@input-focus-color` | `@color-primary` |
-| `@input-placeholder-size:` | `6px` |
+| `@input-placeholder-size` | `6px` |
| `@input-placeholder-offset-top` | `4px` |
| `@input-textarea-height` | `auto` |
| `@input-textarea-padding-top` | `8px` |
diff --git a/packages/varlet-ui/src/input/docs/zh-CN.md b/packages/varlet-ui/src/input/docs/zh-CN.md
index 9b5b0d13997..d1afb0e41cc 100644
--- a/packages/varlet-ui/src/input/docs/zh-CN.md
+++ b/packages/varlet-ui/src/input/docs/zh-CN.md
@@ -169,7 +169,7 @@ createApp().use(Icon)
| `@input-error-color` | `@color-danger` |
| `@input-blur-color` | `#888` |
| `@input-focus-color` | `@color-primary` |
-| `@input-placeholder-size:` | `6px` |
+| `@input-placeholder-size` | `6px` |
| `@input-placeholder-offset-top` | `4px` |
| `@input-textarea-height` | `auto` |
| `@input-textarea-padding-top` | `8px` |
diff --git a/packages/varlet-ui/src/input/input.less b/packages/varlet-ui/src/input/input.less
index 544f20037d1..746f19ce68b 100644
--- a/packages/varlet-ui/src/input/input.less
+++ b/packages/varlet-ui/src/input/input.less
@@ -24,7 +24,7 @@
&-input-footer-margin-enter-active,
&-input-footer-margin-leave-active {
- transition: 0.2s all cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.2s all @cubic-bezier;
}
}
@@ -87,7 +87,7 @@
background: @input-focus-color;
transform: scaleX(0);
transform-origin: center;
- transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: transform 0.3s @cubic-bezier;
}
&__clear-icon {
diff --git a/packages/varlet-ui/src/progress/docs/en-US.md b/packages/varlet-ui/src/progress/docs/en-US.md
index 02208a86e13..8c76928afe7 100644
--- a/packages/varlet-ui/src/progress/docs/en-US.md
+++ b/packages/varlet-ui/src/progress/docs/en-US.md
@@ -209,6 +209,6 @@ Use `show-track` to hide Progress-Track.
| Variable | Default |
| --- | --- |
-| `@progress-font-size` | `12px` |
+| `@progress-font-size` | `@font-size-sm` |
| `@progress-ripple-color` | `#fff` |
-| `@progress-background` | `#2979ff` |
\ No newline at end of file
+| `@progress-background` | `@color-primary` |
\ No newline at end of file
diff --git a/packages/varlet-ui/src/progress/docs/zh-CN.md b/packages/varlet-ui/src/progress/docs/zh-CN.md
index d7118aa1335..8aff68f0149 100644
--- a/packages/varlet-ui/src/progress/docs/zh-CN.md
+++ b/packages/varlet-ui/src/progress/docs/zh-CN.md
@@ -209,6 +209,6 @@ createApp().use(Progress)
| 变量名 | 默认值 |
| --- | --- |
-| `@progress-font-size` | `12px` |
+| `@progress-font-size` | `@font-size-sm` |
| `@progress-ripple-color` | `#fff` |
-| `@progress-background` | `#2979ff` |
\ No newline at end of file
+| `@progress-background` | `@color-primary` |
\ No newline at end of file
diff --git a/packages/varlet-ui/src/pull-refresh/docs/en-US.md b/packages/varlet-ui/src/pull-refresh/docs/en-US.md
index 1301b14a111..bb9bc616afa 100644
--- a/packages/varlet-ui/src/pull-refresh/docs/en-US.md
+++ b/packages/varlet-ui/src/pull-refresh/docs/en-US.md
@@ -90,6 +90,6 @@ export default {
| --- | --- |
| `@pull-refresh-size` | `40px` |
| `@pull-refresh-background` | `#fff` |
-| `@pull-refresh-color` | `#2979ff` |
-| `@pull-refresh-success-color` | `#4caf50` |
+| `@pull-refresh-color` | `@color-primary` |
+| `@pull-refresh-success-color` | `@color-success` |
| `@pull-refresh-icon-size` | `25px` |
diff --git a/packages/varlet-ui/src/pull-refresh/docs/zh-CN.md b/packages/varlet-ui/src/pull-refresh/docs/zh-CN.md
index fc1e85a00e4..936d9ec910d 100644
--- a/packages/varlet-ui/src/pull-refresh/docs/zh-CN.md
+++ b/packages/varlet-ui/src/pull-refresh/docs/zh-CN.md
@@ -88,6 +88,6 @@ export default {
| --- | --- |
| `@pull-refresh-size` | `40px` |
| `@pull-refresh-background` | `#fff` |
-| `@pull-refresh-color` | `#2979ff` |
-| `@pull-refresh-success-color` | `#4caf50` |
+| `@pull-refresh-color` | `@color-primary` |
+| `@pull-refresh-success-color` | `@color-success` |
| `@pull-refresh-icon-size` | `25px` |
diff --git a/packages/varlet-ui/src/select/select.less b/packages/varlet-ui/src/select/select.less
index 0d47140f263..6c28d00aaad 100644
--- a/packages/varlet-ui/src/select/select.less
+++ b/packages/varlet-ui/src/select/select.less
@@ -28,7 +28,7 @@
&-select-footer-margin-enter-active,
&-select-footer-margin-leave-active {
- transition: 0.2s all cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.2s all @cubic-bezier;
}
}
@@ -113,7 +113,7 @@
background: @select-focus-color;
transform: scaleX(0);
transform-origin: center;
- transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: transform 0.3s @cubic-bezier;
}
&--placeholder-hint {
diff --git a/packages/varlet-ui/src/slider/docs/en-US.md b/packages/varlet-ui/src/slider/docs/en-US.md
index dc9d0557777..f76e74f4a11 100644
--- a/packages/varlet-ui/src/slider/docs/en-US.md
+++ b/packages/varlet-ui/src/slider/docs/en-US.md
@@ -148,10 +148,10 @@ Use `rules` to validate the value
| Variable | Default |
| --- | --- |
-| `@slider-error-color` | `#f44336` |
+| `@slider-error-color` | `@color-danger` |
| `@slider-track-background` | `#bdbdbd` |
-| `@slider-track-fill-background` | `#2979ff` |
-| `@slider-thumb-block-background` | `#2979ff` |
-| `@slider-thumb-ripple-background` | `#2979ff` |
-| `@slider-thumb-label-background` | `#2979ff` |
-| `@slider-thumb-label-font-size` | `12px` |
\ No newline at end of file
+| `@slider-track-fill-background` | `@color-primary` |
+| `@slider-thumb-block-background` | `@color-primary` |
+| `@slider-thumb-ripple-background` | `@color-primary` |
+| `@slider-thumb-label-background` | `@color-primary` |
+| `@slider-thumb-label-font-size` | `@font-size-sm` |
\ No newline at end of file
diff --git a/packages/varlet-ui/src/slider/docs/zh-CN.md b/packages/varlet-ui/src/slider/docs/zh-CN.md
index 90adada54eb..33290fb04ab 100644
--- a/packages/varlet-ui/src/slider/docs/zh-CN.md
+++ b/packages/varlet-ui/src/slider/docs/zh-CN.md
@@ -145,10 +145,10 @@ export default {
| 变量名 | 默认值 |
| --- | --- |
-| `@slider-error-color` | `#f44336` |
+| `@slider-error-color` | `@color-danger` |
| `@slider-track-background` | `#bdbdbd` |
-| `@slider-track-fill-background` | `#2979ff` |
-| `@slider-thumb-block-background` | `#2979ff` |
-| `@slider-thumb-ripple-background` | `#2979ff` |
-| `@slider-thumb-label-background` | `#2979ff` |
-| `@slider-thumb-label-font-size` | `12px` |
+| `@slider-track-fill-background` | `@color-primary` |
+| `@slider-thumb-block-background` | `@color-primary` |
+| `@slider-thumb-ripple-background` | `@color-primary` |
+| `@slider-thumb-label-background` | `@color-primary` |
+| `@slider-thumb-label-font-size` | `@font-size-sm` |
diff --git a/packages/varlet-ui/src/slider/slider.less b/packages/varlet-ui/src/slider/slider.less
index 410cfdd8010..c931794b727 100644
--- a/packages/varlet-ui/src/slider/slider.less
+++ b/packages/varlet-ui/src/slider/slider.less
@@ -61,7 +61,7 @@
border-radius: 50%;
opacity: 0.3;
background: @slider-thumb-ripple-background;
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
&-active {
width: 36px;
@@ -83,7 +83,7 @@
user-select: none;
position: absolute;
left: 45%;
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition: 0.3s @cubic-bezier;
font-size: @slider-thumb-label-font-size;
overflow: hidden;
transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);
diff --git a/packages/varlet-ui/src/step/step.less b/packages/varlet-ui/src/step/step.less
index 767a6e329e0..89bf6ff509f 100644
--- a/packages/varlet-ui/src/step/step.less
+++ b/packages/varlet-ui/src/step/step.less
@@ -1,5 +1,44 @@
@import '../styles/var';
+@step-tag-size: 20px;
+@step-tag-background: #9e9e9e;
+@step-tag-font-size: @font-size-md;
+@step-tag-color: #fff;
+@step-tag-active-color: @color-primary;
+@step-tag-margin: 4px 0;
+@step-tag-icon-size: @font-size-lg;
+@step-content-font-size: @font-size-md;
+@step-content-color: rgba(0, 0, 0, 0.38);
+@step-content-active-color: #000;
+@step-line-background: #000;
+@step-vertical-min-height: 30px;
+@step-vertical-tag-margin: 0 4px;
+@step-vertical-line-height: calc(100% - 30px);
+@step-vertical-line-min-height: 20px;
+
+// Mixins
+.tag {
+ width: @step-tag-size;
+ height: @step-tag-size;
+ background: @step-tag-background;
+ display: flex;
+ font-size: @step-tag-font-size;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ color: @step-tag-color;
+ cursor: pointer;
+ transition: 0.3s @cubic-bezier;
+}
+
+// Mixins
+.content {
+ font-size: @step-content-font-size;
+ color: @step-content-color;
+ cursor: pointer;
+ transition: 0.3s @cubic-bezier;
+}
+
.var-step {
display: flex;
position: relative;
@@ -17,47 +56,33 @@
}
&__tag {
- width: 20px;
- height: 20px;
- background: #9e9e9e;
- display: flex;
- font-size: 14px;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- color: white;
- cursor: pointer;
- margin: 4px 0;
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ margin: @step-tag-margin;
+ .tag();
&--active {
- background: @color-primary;
+ background: @step-tag-active-color;
}
.var-icon {
- font-size: 16px;
+ font-size: @step-tag-icon-size;
}
}
&__content {
- font-size: 14px;
- color: rgba(0, 0, 0, 0.38);
- cursor: pointer;
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ .content();
&--active {
- color: #000;
+ color: @step-content-active-color;
}
}
&__line {
position: relative;
- width: 20px;
top: 14px;
flex: 1;
height: 1px;
transform: scaleY(0.5);
- background: black;
+ background: @step-line-background;
}
}
@@ -67,51 +92,39 @@
&__main {
display: flex;
align-items: flex-start;
- min-height: 30px;
+ min-height: @step-vertical-min-height;
}
&__tag {
- width: 20px;
- height: 20px;
- background: #9e9e9e;
- display: flex;
- font-size: 14px;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- color: white;
- cursor: pointer;
- margin: 0 4px;
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ margin: @step-vertical-tag-margin;
+ .tag();
&--active {
- background: @color-primary;
+ background: @step-tag-active-color;
}
.var-icon {
- font-size: 16px;
+ font-size: @step-tag-icon-size;
}
}
&__content {
- font-size: 14px;
- color: rgba(0, 0, 0, 0.38);
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ .content();
&--active {
- color: #000;
+ color: @step-content-active-color;
}
}
&__line {
position: relative;
- height: calc(100% - 30px);
+ height: @step-vertical-line-height;
left: 14px;
top: calc(-100% + 45px);
- min-height: 20px;
+ min-height: @step-vertical-line-min-height;
width: 1px;
transform: scaleX(0.5);
- background: black;
+ background: @step-line-background;
}
}
}
diff --git a/packages/varlet-ui/src/steps/docs/en-US.md b/packages/varlet-ui/src/steps/docs/en-US.md
index dd2ab3bb97b..88bda1f1980 100644
--- a/packages/varlet-ui/src/steps/docs/en-US.md
+++ b/packages/varlet-ui/src/steps/docs/en-US.md
@@ -9,8 +9,7 @@ Steps is a navigation bar that guides users through the steps of a task.
```js
import { Steps, Step } from '@varlet/ui'
-createApp().use(Steps)
-createApp().use(Step)
+createApp().use(Steps).use(Step)
```
### Basic Usage
@@ -195,3 +194,24 @@ Use `direction` prop to change mode of steps.
| Name | Description | SlotProps |
| ----- | -------------- | -------- |
| `default` | Content of step | - |
+
+### Theme Variables
+#### The following LESS variables can be overridden at build time to modify the theme style
+
+| Variable | Default |
+| --- | --- |
+| `@step-tag-size` | `20px` |
+| `@step-tag-background` | `#9e9e9e` |
+| `@step-tag-font-size` | `@font-size-md` |
+| `@step-tag-color` | `#fff` |
+| `@step-tag-active-color` | `@color-primary` |
+| `@step-tag-margin` | `4px 0` |
+| `@step-tag-icon-size` | `@font-size-lg` |
+| `@step-content-font-size` | `@font-size-md` |
+| `@step-content-color` | `rgba(0, 0, 0, 0.38)` |
+| `@step-content-active-color` | `#000` |
+| `@step-line-background` | `#000` |
+| `@step-vertical-min-height` | `30px` |
+| `@step-vertical-tag-margin` | `0 4px` |
+| `@step-vertical-line-height` | `calc(100% - 30px)` |
+| `@step-vertical-line-min-height` | `20px` |
diff --git a/packages/varlet-ui/src/steps/docs/zh-CN.md b/packages/varlet-ui/src/steps/docs/zh-CN.md
index bc52ad5c45c..fb30d6db7af 100644
--- a/packages/varlet-ui/src/steps/docs/zh-CN.md
+++ b/packages/varlet-ui/src/steps/docs/zh-CN.md
@@ -9,8 +9,7 @@
```js
import { Steps, Step } from '@varlet/ui'
-createApp().use(Steps)
-createApp().use(Step)
+createApp().use(Steps).use(Step)
```
### 基本使用
@@ -195,3 +194,24 @@ export default {
| 名称 | 说明 | 参数 |
| ----- | -------------- | -------- |
| `default` | step的内容 | - |
+
+### 主题变量
+#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `@step-tag-size` | `20px` |
+| `@step-tag-background` | `#9e9e9e` |
+| `@step-tag-font-size` | `@font-size-md` |
+| `@step-tag-color` | `#fff` |
+| `@step-tag-active-color` | `@color-primary` |
+| `@step-tag-margin` | `4px 0` |
+| `@step-tag-icon-size` | `@font-size-lg` |
+| `@step-content-font-size` | `@font-size-md` |
+| `@step-content-color` | `rgba(0, 0, 0, 0.38)` |
+| `@step-content-active-color` | `#000` |
+| `@step-line-background` | `#000` |
+| `@step-vertical-min-height` | `30px` |
+| `@step-vertical-tag-margin` | `0 4px` |
+| `@step-vertical-line-height` | `calc(100% - 30px)` |
+| `@step-vertical-line-min-height` | `20px` |
diff --git a/packages/varlet-ui/src/styles/var.less b/packages/varlet-ui/src/styles/var.less
index 9d45303c2a8..1296d233d14 100644
--- a/packages/varlet-ui/src/styles/var.less
+++ b/packages/varlet-ui/src/styles/var.less
@@ -17,3 +17,6 @@
@color-warning: #ff9800;
@color-danger: #f44336;
@color-disabled: #e0e0e0;
+
+// 动画函数
+@cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1);
diff --git a/packages/varlet-ui/src/switch/docs/en-US.md b/packages/varlet-ui/src/switch/docs/en-US.md
index ea27c137ab4..c32bfcd5f0c 100644
--- a/packages/varlet-ui/src/switch/docs/en-US.md
+++ b/packages/varlet-ui/src/switch/docs/en-US.md
@@ -103,10 +103,10 @@ Use `rules` to validate the value
| Variable | Default |
| --- | --- |
| `@switch-track-background` | `#fff` |
-| `@switch-track-active-background` | `#2979ff` |
-| `@switch-track-error-background` | `#f44336` |
-| `@switch-ripple-color` | `#2979ff` |
+| `@switch-track-active-background` | `@color-primary` |
+| `@switch-track-error-background` | `@color-danger` |
+| `@switch-ripple-color` | `@color-primary` |
| `@switch-handle-background` | `#fff` |
| `@switch-handle-color` | `#fff` |
-| `@switch-handle-active-background` | `#2979ff` |
-| `@switch-handle-error-background` | `#f44336` |
+| `@switch-handle-active-background` | `@color-primary` |
+| `@switch-handle-error-background` | `@color-danger` |
diff --git a/packages/varlet-ui/src/switch/docs/zh-CN.md b/packages/varlet-ui/src/switch/docs/zh-CN.md
index 0aac7e1495b..46c1d31a603 100644
--- a/packages/varlet-ui/src/switch/docs/zh-CN.md
+++ b/packages/varlet-ui/src/switch/docs/zh-CN.md
@@ -103,11 +103,11 @@ export default {
| 变量名 | 默认值 |
| --- | --- |
| `@switch-track-background` | `#fff` |
-| `@switch-track-active-background` | `#2979ff` |
-| `@switch-track-error-background` | `#f44336` |
-| `@switch-ripple-color` | `#2979ff` |
+| `@switch-track-active-background` | `@color-primary` |
+| `@switch-track-error-background` | `@color-danger` |
+| `@switch-ripple-color` | `@color-primary` |
| `@switch-handle-background` | `#fff` |
| `@switch-handle-color` | `#fff` |
-| `@switch-handle-active-background` | `#2979ff` |
-| `@switch-handle-error-background` | `#f44336` |
+| `@switch-handle-active-background` | `@color-primary` |
+| `@switch-handle-error-background` | `@color-danger` |
diff --git a/packages/varlet-ui/src/switch/switch.less b/packages/varlet-ui/src/switch/switch.less
index 93a1535a6d2..509773589b4 100644
--- a/packages/varlet-ui/src/switch/switch.less
+++ b/packages/varlet-ui/src/switch/switch.less
@@ -47,7 +47,7 @@
color: @switch-ripple-color;
border-radius: 50%;
overflow: hidden;
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
}
&__handle {
diff --git a/packages/varlet-ui/src/tab-item/tabItem.less b/packages/varlet-ui/src/tab-item/tabItem.less
index 19017aeb418..4b636413324 100644
--- a/packages/varlet-ui/src/tab-item/tabItem.less
+++ b/packages/varlet-ui/src/tab-item/tabItem.less
@@ -1,3 +1,5 @@
+@import '../styles/var';
+
.var {
&-tab-item-left-enter-from {
transform: translateX(-100%);
@@ -20,7 +22,7 @@
position: absolute;
top: 0;
width: 100%;
- transition: transform .3s cubic-bezier(.25, .8, .5, 1);
+ transition: transform 0.3s @cubic-bezier;
}
}
diff --git a/packages/varlet-ui/src/time-picker/timePicker.less b/packages/varlet-ui/src/time-picker/timePicker.less
index 1839944c262..a518278d9a1 100644
--- a/packages/varlet-ui/src/time-picker/timePicker.less
+++ b/packages/varlet-ui/src/time-picker/timePicker.less
@@ -38,7 +38,7 @@
&__btn {
opacity: 0.6;
cursor: pointer;
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
white-space: nowrap;
&--active {
@@ -146,7 +146,7 @@
&-panel-fade-enter-from,
&-panel-fade-leave-to {
- transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transition: 0.3s @cubic-bezier;
opacity: 0;
}