提供主题文档 与 组件主题变量替换

example/docs/zh-CN/components/color.md

@@ -58,7 +58,7 @@ export default {
 ::: title 次色调
 :::
 
-::: demo 事实上，layui 并非不敢去尝试一些亮丽的颜色，但许多情况下一个它可能并不是那么合适，所以我们把这些颜色归为“场景色”，即按照实际场景来呈现对应的颜色，比如你想给人以警觉感，可以尝试用上面的红色。他们一般会出现在 layui 的按钮、提示和修饰性元素，以及一些侧边元素上。
+::: demo 事实上，layui 并非不敢去尝试一些亮丽的颜色，但许多情况下一个它可能并不是那么合适，所以我们把这些颜色归为“场景色”，即按照实际场景来呈现对应的颜色，比如你想给人以警觉感，可以尝试用上面的红色。
 
 <template>
 <ul class="layui-row layui-col-space15">

example/docs/zh-CN/guide/theme.md

@@ -1,2 +1,30 @@
-::: title 定义主题
+::: title 定制主题
+:::
+
+::: describe Layui 设计规范上支持一定程度的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
+:::
+
+::: describe 以下是一些最常用的通用变量，所有样式变量可以在 这里 找到。
+:::
+
+```css
+@global-primary-color: #009688; // 主题色
+@global-checked-color: #5FB878; // 选中色
+@global-border-radius: 2px; // 圆角度数
+```
+::: describe 如果以上变量不能满足你的定制需求，可以给我们提 issue。
+:::
+
+::: title 定制方式
+:::
+
+::: describe 建立一个单独的 less 变量文件，引入这个文件覆盖 index.less 里的变量。
+:::
+
+```css
+@import '@layui/layui-vue/lib/index.less'; // 引入官方提供的 less 样式入口文件
+@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
+```
+
+::: describe 注意，这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 babel-plugin-import 的 style 属性一起使用。
 :::

example/src/assets/css/code.css

@@ -31,7 +31,7 @@ li > div[class*='language-'] {
 
 @media (min-width: 420px) {
   div[class*='language-'] {
-    margin: 1rem 0;
+    margin: 1rem 1.8rem;
     border-radius: 6px;
   }
 
@@ -39,6 +39,12 @@ li > div[class*='language-'] {
     margin: 1rem 0 1rem 0rem;
     border-radius: 6px;
   }
+
+  .lay-code div[class*='language-'] {
+    margin: 1rem 0.8rem;
+    margin: 0.5rem 0.8rem 1rem 0.8rem;
+    border-radius: 6px;
+  }
 }
 
 [class*='language-'] pre,

example/src/view/guide.vue

@@ -86,6 +86,12 @@ export default {
             subTitle: 'change',
             path: '/zh-CN/guide/changelog',
           },
+          {
+            id: 3,
+            title: '主题',
+            subTitle: 'theme',
+            path: '/zh-CN/guide/theme',
+          },
           {
             id: 4,
             title: '问题',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.7-alpha.2",
+  "version": "0.3.7-alpha.3",
   "author": "SleepRite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

src/component/avatar/index.less

@@ -21,7 +21,7 @@
   width: 32px;
   height: 32px;
   line-height: 32px;
-  border-radius: 2px;
+  border-radius: @global-border-radius;
 }
 
 .layui-avatar.layui-avatar-radius {

src/component/backTop/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 /** backtop **/
 @width: 50px;
 @height: @width;
@@ -15,7 +17,7 @@
   font-size: 40px;
   background-color: #9f9f9f;
   color: #ffffff;
-  border-radius: 2px;
+  border-radius: @global-border-radius;
   opacity: 0.95;
   z-index: 999999;
   :hover {

src/component/badge/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-badge,
 .layui-badge-dot,
 .layui-badge-rim {
@@ -8,7 +10,7 @@
   text-align: center;
   background-color: #ff5722;
   color: #fff;
-  border-radius: 2px;
+  border-radius: @global-border-radius;
 }
 
 .layui-badge {

src/component/button/index.less

@@ -10,7 +10,7 @@
   white-space: nowrap;
   border: 1px solid transparent;
   background-color: @global-primary-color;
-  border-radius: 2px;
+  border-radius: @global-border-radius;
   cursor: pointer;
 }
 

src/component/buttonGroup/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-btn-group {
   vertical-align: middle;
   font-size: 0;
@@ -16,12 +18,12 @@
 
 .layui-btn-group .layui-btn-primary:hover {
   border-color: #d2d2d2;
-  color: #009688;
+  color: @global-primary-color;
 }
 
 .layui-btn-group .layui-btn:first-child {
   border-left: none;
-  border-radius: 2px 0 0 2px;
+  border-radius: @global-border-radius 0 0 @global-border-radius;
 }
 
 .layui-btn-group .layui-btn-primary:first-child {
@@ -29,7 +31,7 @@
 }
 
 .layui-btn-group .layui-btn:last-child {
-  border-radius: 0 2px 2px 0;
+  border-radius: 0 @global-border-radius @global-border-radius 0;
 }
 
 .layui-btn-group .layui-btn + .layui-btn {

src/component/card/index.less

@@ -2,7 +2,7 @@
 
 .layui-card {
   margin-bottom: 15px;
-  border-radius: 2px;
+  border-radius: @global-border-radius;
   background-color: #fff;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   .layui-card-header {

src/component/inputNumber/index.less

@@ -1,5 +1,7 @@
+@import "../../theme/variable.less";
+
 @border-color: #eee;
-@hover-border-color: #5fb878;
+@hover-border-color: @global-primary-color;
 @lg: 40px;
 @lg-wdith: 200px;
 @lg-right: 20px;
@@ -48,7 +50,7 @@
   box-sizing: border-box;
   border: 1px solid @border-color;
   border-color: @border-color;
-  border-radius: 2px;
+  border-radius: @global-border-radius;
   overflow: hidden;
   .set-size(@lg-wdith, @lg, @lg-right);
   margin-left: 5px;

src/component/panel/index.less

@@ -1,7 +1,9 @@
+@import "../../theme/variable.less";
+
 .layui-panel {
   border-width: 1px;
   border-style: solid;
-  border-radius: 2px;
+  border-radius: @global-border-radius;
   background-color: #fff;
   color: #666;
 }

src/theme/index.less

@@ -704,7 +704,7 @@ a cite {
   border-style: solid;
   background-color: #fff;
   color: rgba(0, 0, 0, 0.85);
-  border-radius: 2px;
+  border-radius: @global-border-radius;
 }
 
 .layui-input::-webkit-input-placeholder,
@@ -2031,7 +2031,7 @@ a cite {
   line-height: 38px;
   border-width: 1px;
   border-style: solid;
-  border-radius: 2px;
+  border-radius: @global-border-radius;
   cursor: pointer;
 }