feat: add less variables of step, collapse and define cubic func

varletjs · Apr 3, 2021 · 2a8be2d · 2a8be2d
1 parent ef9750d
commit 2a8be2d
Show file tree

Hide file tree

Showing 38 changed files with 231 additions and 137 deletions.
diff --git 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
@@ -12,7 +12,7 @@
         <span v-else>{{ values }}</span>
       </span>
     </transition>
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/packages/varlet-ui/src/collapse/collapse.vue b/packages/varlet-ui/src/collapse/collapse.vue
@@ -111,5 +111,9 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-@import 'collapse';
+@import '../styles/elevation';
+
+.var-collapse {
+  position: relative;
+}
 </style>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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` |
+| `@progress-background` | `@color-primary` |
diff --git 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` |
+| `@progress-background` | `@color-primary` |