refactor(border): migrate css var & simplify docs (#2663)

commitlint.config.js

@@ -11,7 +11,9 @@ function getPackages (context) {
       return project.getPackages()
     })
     .then(packages => {
-      return packages.map(pkg => pkg.name).map(name => (name.charAt(0) === '@' ? name.split('/')[1] : name))
+      return packages
+        .map(pkg => pkg.name)
+        .map(name => (name.charAt(0) === '@' ? name.split('/')[1] : name))
     })
 }
 
@@ -27,16 +29,26 @@ const scopes = [
   'other',
   'typography',
   'color',
+  'border',
 ]
 
 module.exports = {
   rules: {
-    'scope-enum': ctx => getPackages(ctx).then(packages => [2, 'always', [...packages, ...scopes]]),
+    'scope-enum': ctx =>
+      getPackages(ctx).then(packages => [
+        2,
+        'always',
+        [...packages, ...scopes],
+      ]),
     'body-leading-blank': [1, 'always'],
     'footer-leading-blank': [1, 'always'],
     'header-max-length': [2, 'always', 72],
     'scope-case': [2, 'always', 'lower-case'],
-    'subject-case': [1, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']],
+    'subject-case': [
+      1,
+      'never',
+      ['sentence-case', 'start-case', 'pascal-case', 'upper-case'],
+    ],
     'subject-empty': [2, 'never'],
     'subject-full-stop': [2, 'never', '.'],
     'type-case': [2, 'always', 'lower-case'],
@@ -44,7 +56,20 @@ module.exports = {
     'type-enum': [
       2,
       'always',
-      ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'improvement'],
+      [
+        'build',
+        'chore',
+        'ci',
+        'docs',
+        'feat',
+        'fix',
+        'perf',
+        'refactor',
+        'revert',
+        'style',
+        'test',
+        'improvement',
+      ],
     ],
   },
 }

packages/theme-chalk/src/autocomplete.scss

@@ -13,13 +13,13 @@
     @include picker-popper(
       $--color-white,
       1px solid var(--el-border-color-light),
-      $--box-shadow-light
+      var(--el-box-shadow-light)
     );
   }
 }
 
 @include b(autocomplete-suggestion) {
-  border-radius: $--border-radius-base;
+  border-radius: var(--el-border-radius-base);
   box-sizing: border-box;
 
   @include e(wrap) {

packages/theme-chalk/src/button.scss

@@ -173,7 +173,7 @@ $--button: () !default;
     }
   }
   @include when(round) {
-    border-radius: 20px;
+    border-radius: var(--el-border-radius-round);
     padding: 12px 23px;
   }
   @include when(circle) {
@@ -268,7 +268,7 @@ $--button: () !default;
       border-bottom-left-radius: map.get($--button-border-radius, 'default');
 
       &.is-round {
-        border-radius: 20px;
+        border-radius: var(--el-border-radius-round);
       }
 
       &.is-circle {

packages/theme-chalk/src/card.scss

@@ -10,13 +10,13 @@
   transition: var(--el-transition-duration);
 
   @include when(always-shadow) {
-    box-shadow: $--box-shadow-light;
+    box-shadow: var(--el-box-shadow-light);
   }
 
   @include when(hover-shadow) {
     &:hover,
     &:focus {
-      box-shadow: $--box-shadow-light;
+      box-shadow: var(--el-box-shadow-light);
     }
   }
 

packages/theme-chalk/src/check-tag.scss

@@ -5,7 +5,7 @@
 
 @include b(check-tag) {
   background-color: $--background-color-base;
-  border-radius: $--border-radius-base;
+  border-radius: var(--el-border-radius-base);
   color: var(--el-color-info);
   cursor: pointer;
   display: inline-block;

packages/theme-chalk/src/checkbox.scss

@@ -350,7 +350,8 @@
   &:first-child {
     .#{$namespace}-checkbox-button__inner {
       border-left: $--border-base;
-      border-radius: $--border-radius-base 0 0 $--border-radius-base;
+      border-radius: var(--el-border-radius-base) 0 0
+        var(--el-border-radius-base);
       box-shadow: none !important;
     }
   }
@@ -363,7 +364,8 @@
 
   &:last-child {
     .#{$namespace}-checkbox-button__inner {
-      border-radius: 0 $--border-radius-base $--border-radius-base 0;
+      border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base)
+        0;
     }
   }
 

packages/theme-chalk/src/color-picker.scss

@@ -350,7 +350,7 @@
     display: block;
     box-sizing: border-box;
     border: 1px solid #999;
-    border-radius: $--border-radius-small;
+    border-radius: var(--el-border-radius-small);
     width: 100%;
     height: 100%;
     text-align: center;
@@ -395,7 +395,7 @@
     padding: 6px;
     box-sizing: content-box;
     background-color: $--color-white;
-    border-radius: $--border-radius-base;
+    border-radius: var(--el-border-radius-base);
     box-shadow: $--dropdown-menu-box-shadow;
     &.#{$namespace}-popper {
       border: 1px solid var(--el-border-color-lighter);

packages/theme-chalk/src/common/var.scss

@@ -153,17 +153,30 @@ $--border-color-hover: var(--el-color-text-placeholder) !default;
 $--border-base: $--border-width-base $--border-style-base
   map.get($--border-color, 'base') !default;
 /// borderRadius|1|Radius|0
-$--border-radius-base: 4px !default;
-/// borderRadius|1|Radius|0
-$--border-radius-small: 2px !default;
-/// borderRadius|1|Radius|0
-$--border-radius-circle: 100% !default;
+
+$--border-radius: () !default;
+$--border-radius: map.merge(
+  $--border-radius,
+  (
+    'base': 4px,
+    'small': 2px,
+    'round': 20px,
+    'circle': 100%,
+  )
+);
 
 // Box-shadow
-/// boxShadow|1|Shadow|1
-$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
-/// boxShadow|1|Shadow|1
-$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
+$--box-shadow: () !default;
+$--box-shadow: map.merge(
+  $--box-shadow,
+  (
+    'base': (
+      0 2px 4px rgba(0, 0, 0, 0.12),
+      0 0 6px rgba(0, 0, 0, 0.04),
+    ),
+    'light': 0 2px 12px 0 rgba(0, 0, 0, 0.1),
+  )
+);
 
 /* Typography
 -------------------------- */
@@ -205,7 +218,7 @@ $--radio-font-color: var(--el-color-text-regular) !default;
 $--radio-input-height: 14px !default;
 $--radio-input-width: 14px !default;
 /// borderRadius||Border|2
-$--radio-input-border-radius: $--border-radius-circle !default;
+$--radio-input-border-radius: var(--el-border-radius-circle) !default;
 /// color||Color|0
 $--radio-input-background-color: $--color-white !default;
 $--radio-input-border: $--border-base !default;
@@ -294,7 +307,7 @@ $--select-group-height: 30px !default;
 $--select-group-font-size: 12px !default;
 
 $--select-dropdown-background: $--color-white !default;
-$--select-dropdown-shadow: $--box-shadow-light !default;
+$--select-dropdown-shadow: var(--el-box-shadow-light) !default;
 $--select-dropdown-empty-color: #999 !default;
 /// height||Other|4
 $--select-dropdown-max-height: 274px !default;
@@ -330,7 +343,7 @@ $--input-font-color: var(--el-color-text-regular) !default;
 $--input-border: $--border-base !default;
 $--input-border-color: map.get($--border-color, 'base') !default;
 /// borderRadius||Border|2
-$--input-border-radius: $--border-radius-base !default;
+$--input-border-radius: var(--el-border-radius-base) !default;
 /// color||Color|0
 $--input-background-color: $--color-white !default;
 /// color||Color|0
@@ -389,10 +402,10 @@ $--button-font-size: (
 );
 
 $--button-border-radius: (
-  'default': $--border-radius-base,
-  'medium': $--border-radius-base,
-  'small': #{$--border-radius-base - 1},
-  'mini': #{$--border-radius-base - 1},
+  'default': var(--el-border-radius-base),
+  'medium': var(--el-border-radius-base),
+  'small': calc(var(--el-border-radius-base) - 1px),
+  'mini': calc(var(--el-border-radius-base) - 1px),
 );
 
 $--button-padding-vertical: (
@@ -489,7 +502,7 @@ $--tree-expand-icon-color: var(--el-color-text-placeholder) !default;
 
 /* Dropdown
 -------------------------- */
-$--dropdown-menu-box-shadow: $--box-shadow-light !default;
+$--dropdown-menu-box-shadow: var(--el-box-shadow-light) !default;
 $--dropdown-menuItem-hover-fill: map.get(
   $--colors,
   'primary',

packages/theme-chalk/src/date-picker/picker-panel.scss

@@ -4,14 +4,14 @@
   position: relative;
   color: var(--el-color-text-regular);
   background: $--color-white;
-  border-radius: $--border-radius-base;
+  border-radius: var(--el-border-radius-base);
   line-height: 30px;
 
   .#{$namespace}-time-panel {
     margin: 5px 0;
     border: solid 1px $--datepicker-border-color;
     background-color: $--color-white;
-    box-shadow: $--box-shadow-light;
+    box-shadow: var(--el-box-shadow-light);
   }
 
   @include e((body, body-wrapper)) {

packages/theme-chalk/src/date-picker/picker.scss

@@ -9,7 +9,7 @@
     @include picker-popper(
       $--color-white,
       1px solid $--datepicker-border-color,
-      $--box-shadow-light
+      var(--el-box-shadow-light)
     );
   }
 }

packages/theme-chalk/src/dropdown.scss

@@ -101,7 +101,7 @@
   margin: 0;
   background-color: $--color-white;
   border: none;
-  border-radius: $--border-radius-base;
+  border-radius: var(--el-border-radius-base);
   box-shadow: none;
 
   @include e(item) {

packages/theme-chalk/src/input-number.scss

@@ -50,13 +50,13 @@
 
   @include e(increase) {
     right: 1px;
-    border-radius: 0 $--border-radius-base $--border-radius-base 0;
+    border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) 0;
     border-left: $--border-base;
   }
 
   @include e(decrease) {
     left: 1px;
-    border-radius: $--border-radius-base 0 0 $--border-radius-base;
+    border-radius: var(--el-border-radius-base) 0 0 var(--el-border-radius-base);
     border-right: $--border-base;
   }
 
@@ -128,7 +128,7 @@
     }
 
     @include e(increase) {
-      border-radius: 0 $--border-radius-base 0 0;
+      border-radius: 0 var(--el-border-radius-base) 0 0;
       border-bottom: $--border-base;
     }
 
@@ -139,7 +139,7 @@
       left: auto;
       border-right: none;
       border-left: $--border-base;
-      border-radius: 0 0 $--border-radius-base 0;
+      border-radius: 0 0 var(--el-border-radius-base) 0;
     }
 
     @each $size in (medium, small, mini) {

packages/theme-chalk/src/menu.scss

@@ -186,8 +186,8 @@
         left: 100%;
         z-index: 10;
         border: 1px solid var(--el-border-color-light);
-        border-radius: $--border-radius-small;
-        box-shadow: $--box-shadow-light;
+        border-radius: var(--el-border-radius-small);
+        box-shadow: var(--el-box-shadow-light);
       }
 
       &.is-opened {
@@ -206,8 +206,8 @@
     min-width: 200px;
     border: none;
     padding: 5px 0;
-    border-radius: $--border-radius-small;
-    box-shadow: $--box-shadow-light;
+    border-radius: var(--el-border-radius-small);
+    box-shadow: var(--el-box-shadow-light);
   }
 }
 @include b(menu-item) {

packages/theme-chalk/src/popover.scss

@@ -14,7 +14,7 @@
     line-height: 1.4;
     text-align: justify;
     font-size: $--popover-font-size;
-    box-shadow: $--box-shadow-light;
+    box-shadow: var(--el-box-shadow-light);
     word-break: break-all;
 
     @include m(plain) {

packages/theme-chalk/src/radio-button.scss

@@ -51,7 +51,8 @@
   &:first-child {
     .#{$namespace}-radio-button__inner {
       border-left: $--border-base;
-      border-radius: $--border-radius-base 0 0 $--border-radius-base;
+      border-radius: var(--el-border-radius-base) 0 0
+        var(--el-border-radius-base);
       box-shadow: none !important;
     }
   }
@@ -88,13 +89,14 @@
 
   &:last-child {
     .#{$namespace}-radio-button__inner {
-      border-radius: 0 $--border-radius-base $--border-radius-base 0;
+      border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base)
+        0;
     }
   }
 
   &:first-child:last-child {
     .#{$namespace}-radio-button__inner {
-      border-radius: $--border-radius-base;
+      border-radius: var(--el-border-radius-base);
     }
   }
 

packages/theme-chalk/src/radio.scss

@@ -24,7 +24,7 @@
 
   @include when(bordered) {
     padding: map.get($--radio-bordered-padding, 'default');
-    border-radius: $--border-radius-base;
+    border-radius: var(--el-border-radius-base);
     border: $--border-base;
     box-sizing: border-box;
     height: map.get($--radio-bordered-height, 'default');
@@ -46,7 +46,7 @@
   @each $size in (medium, small, mini) {
     &.is-bordered {
       padding: map.get($--radio-bordered-padding, $size);
-      border-radius: $--border-radius-base;
+      border-radius: var(--el-border-radius-base);
       height: map.get($--radio-bordered-height, $size);
       .#{$namespace}-radio__label {
         font-size: map.get($--button-font-size, $size);

packages/theme-chalk/src/select-dropdown-v2.scss

@@ -4,7 +4,7 @@
 
 @include b(select-dropdown) {
   z-index: calc(var(--el-index-top) + 1);
-  border-radius: $--border-radius-base;
+  border-radius: var(--el-border-radius-base);
   box-sizing: border-box;
 
   .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {

packages/theme-chalk/src/select-dropdown.scss

@@ -4,7 +4,7 @@
 
 @include b(select-dropdown) {
   z-index: calc(var(--el-index-top) + 1);
-  border-radius: $--border-radius-base;
+  border-radius: var(--el-border-radius-base);
   box-sizing: border-box;
 
   @include when(multiple) {

packages/theme-chalk/src/select-v2.scss

@@ -26,7 +26,7 @@ $--input-inline-start: 7px !default;
     padding-top: 1px;
     padding-bottom: 1px;
     border: 1px solid var(--el-border-color-base);
-    border-radius: $--border-radius-base;
+    border-radius: var(--el-border-radius-base);
     transition: border-color var(--el-transition-duration-fast)
       var(--el-ease-in-out-bezier-function);
     &:hover {
@@ -213,7 +213,7 @@ $--input-inline-start: 7px !default;
       font-size: $--select-font-size;
       text-align: center;
       transform: rotateZ(180deg);
-      border-radius: $--border-radius-circle;
+      border-radius: var(--el-border-radius-circle);
       color: $--select-input-color;
       transition: var(--el-color-transition-base);
 
@@ -234,7 +234,7 @@ $--input-inline-start: 7px !default;
   @include e(wrapper) {
     background-color: #fff;
     border: 1px solid #d9d9d9;
-    border-radius: $--border-radius-base;
+    border-radius: var(--el-border-radius-base);
     position: relative;
     transition: all var(--el-transition-duration)
       var(--el-ease-in-out-bezier-function);

packages/theme-chalk/src/select.scss

@@ -74,7 +74,7 @@
         font-size: $--select-font-size;
         text-align: center;
         transform: rotateZ(180deg);
-        border-radius: $--border-radius-circle;
+        border-radius: var(--el-border-radius-circle);
         color: $--select-input-color;
         transition: var(--el-color-transition-base);
 

packages/theme-chalk/src/slider.scss

@@ -147,7 +147,7 @@
     position: absolute;
     height: $--slider-height;
     width: $--slider-height;
-    border-radius: $--border-radius-circle;
+    border-radius: var(--el-border-radius-circle);
     background-color: $--slider-stop-background-color;
     transform: translateX(-50%);
   }

packages/theme-chalk/src/var.scss

@@ -48,13 +48,17 @@
   --el-border-color-hover: var(--el-color-text-placeholder);
   --el-border-base: var(--el-border-width-base) var(--el-border-style-base)
     var(--el-border-color-base);
-  --el-border-radius-base: #{$--border-radius-base};
-  --el-border-radius-small: #{$--border-radius-small};
-  --el-border-radius-circle: #{$--border-radius-circle};
+
+  // --el-border-radius-#{$type}
+  @each $type in (base, small, round, circle) {
+    @include set-css-var-type('border-radius', $type, $--border-radius);
+  }
 
   // Box-shadow
-  --el-box-shadow-base: #{$--box-shadow-base};
-  --el-box-shadow-light: #{$--box-shadow-light};
+  // --el-box-shadow-#{$type}
+  @each $type in (base, light) {
+    @include set-css-var-type('box-shadow', $type, $--box-shadow);
+  }
 
   // Svg
   --el-svg-monochrome-grey: #dcdde0;

website/components/demo/border/radius-box.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-row :gutter="12" class="demo-radius">
+    <el-col
+      v-for="(radius, i) in radiusGroup"
+      :key="i"
+      :span="6"
+      :xs="{span: 12}"
+    >
+      <div class="title">{{ radius.name }}</div>
+      <div class="value"><code>border-radius: {{ getValue(radius.type) || '0px' }}</code></div>
+      <div class="radius" :style="{ borderRadius: radius.type ? `var(--el-border-radius-${radius.type})` : '' }"></div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { getCssVarValue } from '../../../util'
+export default {
+  props: {
+    radiusGroup: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+  methods: {
+    getValue(type) {
+      return getCssVarValue('border-radius', type)
+    },
+  },
+}
+</script>

website/components/demo/border/shadow-box.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <template v-for="(shadow, i) in shadowGroup" :key="i">
+      <div
+        class="demo-shadow"
+        :style="{ boxShadow: `var(--el-box-shadow-${shadow.type})` }"
+      ></div>
+      <span class="demo-shadow-text">{{ shadow.name }} <code>box-shadow: {{ getValue(shadow.type) }}</code></span>
+    </template>
+  </div>
+</template>
+
+<script>
+import { getCssVarValue } from '../../../util'
+export default {
+  props: {
+    shadowGroup: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+  methods: {
+    getValue(type) {
+      return getCssVarValue('box-shadow', type)
+    },
+  },
+}
+</script>

website/demo-styles/border.scss

@@ -33,12 +33,9 @@
   margin: 10px 0;
 }
 .demo-radius .radius {
-  height: 60px;
+  height: 40px;
   width: 70%;
   border: 1px solid #d7dae2;
   border-radius: 0;
   margin-top: 20px;
 }
-.demo-radius .radius-30 {
-  border-radius: 30px;
-}

website/docs/en-US/border.md

@@ -1,49 +1,46 @@
 <script>
-  import bus from '../../bus';
-  const varMap = {
-    '$--box-shadow-light': 'boxShadowLight',
-    '$--box-shadow-base': 'boxShadowBase',
-    '$--border-radius-base': 'borderRadiusBase',
-    '$--border-radius-small': 'borderRadiusSmall'
-  };
-  const original = {
-    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
-    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
-    borderRadiusBase: '4px',
-    borderRadiusSmall: '2px'
-  }
-  export default {
-    mounted() {
-      this.setGlobal();
+import RadiusBox from "../../components/demo/border/radius-box.vue";
+import ShadowBox from "../../components/demo/border/shadow-box.vue";
+
+const radiusGroup =  [
+  {
+    name: 'No Radius',
+    type: ''
   },
-    methods: {
-      setGlobal() {
-        if (window.userThemeConfig) {
-          this.global = window.userThemeConfig.global;
-        }
+  {
+    name: 'Small Radius',
+    type: 'small'
+  },
+  {
+    name: 'Large Radius',
+    type: 'base'
+  },
+  {
+    name: 'Round Radius',
+    type: 'round'
+  },
+]
+
+const shadowGroup = [
+  {
+    name: 'Basic Shadow',
+    type: 'base'
+  },
+  {
+    name: 'Light Shadow',
+    type: 'light'
   }
+]
+
+export default {
+  components: {
+    RadiusBox,
+    ShadowBox
   },
   data() {
     return {
-        global: {},
-        boxShadowLight: '',
-        boxShadowBase: '',
-        borderRadiusBase: '',
-        borderRadiusSmall: ''
-      }
-    },
-    watch: {
-      global: {
-        immediate: true,
-        handler(value) {
-          Object.keys(varMap).forEach((c) => {
-            if (value[c]) {
-              this[varMap[c]] = value[c]
-            } else {
-              this[varMap[c]] = original[varMap[c]]
-            }
-          });
-        }
+      radiusGroup,
+      shadowGroup,
     }
   }
 }
@@ -85,47 +82,10 @@ There are few border styles to choose.
 
 There are few radius styles to choose.
 
-<el-row :gutter="12" class="demo-radius">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">No Radius</div>
-    <div class="value">border-radius: 0px</div>
-    <div class="radius"></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Small Radius</div>
-    <div class="value">border-radius: {{borderRadiusSmall}}</div>
-    <div
-      class="radius"
-      :style="{ borderRadius: borderRadiusSmall }"
-    ></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Large Radius</div>
-    <div class="value">border-radius: {{borderRadiusBase}}</div>
-    <div
-      class="radius"
-      :style="{ borderRadius: borderRadiusBase }"
-    ></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Round Radius</div>
-    <div class="value">border-radius: 30px</div>
-    <div class="radius radius-30"></div>
-  </el-col>
-</el-row>
+<radius-box :radius-group="radiusGroup" />
 
 ### Shadow
 
 There are few shadow styles to choose.
 
-<div
-class="demo-shadow"
-:style="{ boxShadow: boxShadowBase }"
-></div>
-<span class="demo-shadow-text">Basic Shadow box-shadow: {{boxShadowBase}}</span>
-
-<div
-class="demo-shadow"
-:style="{ boxShadow: boxShadowLight }"
-></div>
-<span class="demo-shadow-text">Light Shadow box-shadow: {{boxShadowLight}}</span>
+<shadow-box :shadow-group="shadowGroup" />

website/docs/es/border.md

@@ -1,49 +1,46 @@
 <script>
-  import bus from '../../bus';
-  const varMap = {
-    '$--box-shadow-light': 'boxShadowLight',
-    '$--box-shadow-base': 'boxShadowBase',
-    '$--border-radius-base': 'borderRadiusBase',
-    '$--border-radius-small': 'borderRadiusSmall'
-  };
-  const original = {
-    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
-    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
-    borderRadiusBase: '4px',
-    borderRadiusSmall: '2px'
-  }
-  export default {
-    mounted() {
-      this.setGlobal();
+import RadiusBox from "../../components/demo/border/radius-box.vue";
+import ShadowBox from "../../components/demo/border/shadow-box.vue";
+
+const radiusGroup =  [
+  {
+    name: 'No Radius',
+    type: ''
   },
-    methods: {
-      setGlobal() {
-        if (window.userThemeConfig) {
-          this.global = window.userThemeConfig.global;
-        }
+  {
+    name: 'Small Radius',
+    type: 'small'
+  },
+  {
+    name: 'Large Radius',
+    type: 'base'
+  },
+  {
+    name: 'Round Radius',
+    type: 'round'
+  },
+]
+
+const shadowGroup = [
+  {
+    name: 'Basic Shadow',
+    type: 'base'
+  },
+  {
+    name: 'Light Shadow',
+    type: 'light'
   }
+]
+
+export default {
+  components: {
+    RadiusBox,
+    ShadowBox
   },
   data() {
     return {
-        global: {},
-        boxShadowLight: '',
-        boxShadowBase: '',
-        borderRadiusBase: '',
-        borderRadiusSmall: ''
-      }
-    },
-    watch: {
-      global: {
-        immediate: true,
-        handler(value) {
-          Object.keys(varMap).forEach((c) => {
-            if (value[c]) {
-              this[varMap[c]] = value[c]
-            } else {
-              this[varMap[c]] = original[varMap[c]]
-            }
-          });
-        }
+      radiusGroup,
+      shadowGroup,
     }
   }
 }
@@ -85,47 +82,10 @@ Hay pocos estilos de borde para elegir.
 
 Hay pocos estilos de radio para elegir.
 
-<el-row :gutter="12" class="demo-radius">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">No Radius</div>
-    <div class="value">border-radius: 0px</div>
-    <div class="radius"></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Small Radius</div>
-    <div class="value">border-radius: {{borderRadiusSmall}}</div>
-    <div
-      class="radius"
-      :style="{ borderRadius: borderRadiusSmall }"
-    ></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Large Radius</div>
-    <div class="value">border-radius: {{borderRadiusBase}}</div>
-    <div
-      class="radius"
-      :style="{ borderRadius: borderRadiusBase }"
-    ></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Round Radius</div>
-    <div class="value">border-radius: 30px</div>
-    <div class="radius radius-30"></div>
-  </el-col>
-</el-row>
+<radius-box :radius-group="radiusGroup" />
 
 ### Shadow
 
 Hay pocos estilos de sombra para elegir.
 
-<div
-class="demo-shadow"
-:style="{ boxShadow: boxShadowBase }"
-></div>
-<span class="demo-shadow-text">Basic Shadow box-shadow: {{boxShadowBase}}</span>
-
-<div
-class="demo-shadow"
-:style="{ boxShadow: boxShadowLight }"
-></div>
-<span class="demo-shadow-text">Light Shadow box-shadow: {{boxShadowLight}}</span>
+<shadow-box :shadow-group="shadowGroup" />

website/docs/fr-FR/border.md

@@ -1,49 +1,46 @@
 <script>
-  import bus from '../../bus';
-  const varMap = {
-    '$--box-shadow-light': 'boxShadowLight',
-    '$--box-shadow-base': 'boxShadowBase',
-    '$--border-radius-base': 'borderRadiusBase',
-    '$--border-radius-small': 'borderRadiusSmall'
-  };
-  const original = {
-    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
-    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
-    borderRadiusBase: '4px',
-    borderRadiusSmall: '2px'
-  }
-  export default {
-    mounted() {
-      this.setGlobal();
+import RadiusBox from "../../components/demo/border/radius-box.vue";
+import ShadowBox from "../../components/demo/border/shadow-box.vue";
+
+const radiusGroup =  [
+  {
+    name: 'Pas de radius',
+    type: ''
   },
-    methods: {
-      setGlobal() {
-        if (window.userThemeConfig) {
-          this.global = window.userThemeConfig.global;
-        }
+  {
+    name: 'Petit radius',
+    type: 'small'
+  },
+  {
+    name: 'Grand radius',
+    type: 'base'
+  },
+  {
+    name: 'Radius rond',
+    type: 'round'
+  },
+]
+
+const shadowGroup = [
+  {
+    name: 'Ombre de base',
+    type: 'base'
+  },
+  {
+    name: 'Ombre légère',
+    type: 'light'
   }
+]
+
+export default {
+  components: {
+    RadiusBox,
+    ShadowBox
   },
   data() {
     return {
-        global: {},
-        boxShadowLight: '',
-        boxShadowBase: '',
-        borderRadiusBase: '',
-        borderRadiusSmall: ''
-      }
-    },
-    watch: {
-      global: {
-        immediate: true,
-        handler(value) {
-          Object.keys(varMap).forEach((c) => {
-            if (value[c]) {
-              this[varMap[c]] = value[c]
-            } else {
-              this[varMap[c]] = original[varMap[c]]
-            }
-          });
-        }
+      radiusGroup,
+      shadowGroup,
     }
   }
 }
@@ -85,47 +82,10 @@ Il y a plusieurs styles de bordure que vous pouvez choisir.
 
 Il y a plusieurs styles de radius que vous pouvez choisir.
 
-<el-row :gutter="12" class="demo-radius">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Pas de radius</div>
-    <div class="value">border-radius: 0px</div>
-    <div class="radius"></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Petit radius</div>
-    <div class="value">border-radius: {{borderRadiusSmall}}</div>
-    <div
-      class="radius"
-      :style="{ borderRadius: borderRadiusSmall }"
-    ></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Grand radius</div>
-    <div class="value">border-radius: {{borderRadiusBase}}</div>
-    <div
-      class="radius"
-      :style="{ borderRadius: borderRadiusBase }"
-    ></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Radius rond</div>
-    <div class="value">border-radius: 30px</div>
-    <div class="radius radius-30"></div>
-  </el-col>
-</el-row>
+<radius-box :radius-group="radiusGroup" />
 
 ### Ombres
 
 Il y a plusieurs styles d'ombres que vous pouvez choisir.
 
-<div
-class="demo-shadow"
-:style="{ boxShadow: boxShadowBase }"
-></div>
-<span class="demo-shadow-text">Ombre de base, box-shadow: {{boxShadowBase}}</span>
-
-<div
-class="demo-shadow"
-:style="{ boxShadow: boxShadowLight }"
-></div>
-<span class="demo-shadow-text">Ombre légère, box-shadow: {{boxShadowLight}}</span>
+<shadow-box :shadow-group="shadowGroup" />

website/docs/jp/border.md

@@ -1,49 +1,46 @@
 <script>
-  import bus from '../../bus';
-  const varMap = {
-    '$--box-shadow-light': 'boxShadowLight',
-    '$--box-shadow-base': 'boxShadowBase',
-    '$--border-radius-base': 'borderRadiusBase',
-    '$--border-radius-small': 'borderRadiusSmall'
-  };
-  const original = {
-    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
-    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
-    borderRadiusBase: '4px',
-    borderRadiusSmall: '2px'
-  }
-  export default {
-    mounted() {
-      this.setGlobal();
+import RadiusBox from "../../components/demo/border/radius-box.vue";
+import ShadowBox from "../../components/demo/border/shadow-box.vue";
+
+const radiusGroup =  [
+  {
+    name: 'No Radius',
+    type: ''
   },
-    methods: {
-      setGlobal() {
-        if (window.userThemeConfig) {
-          this.global = window.userThemeConfig.global;
-        }
+  {
+    name: 'Small Radius',
+    type: 'small'
+  },
+  {
+    name: 'Large Radius',
+    type: 'base'
+  },
+  {
+    name: 'Round Radius',
+    type: 'round'
+  },
+]
+
+const shadowGroup = [
+  {
+    name: 'Basic Shadow',
+    type: 'base'
+  },
+  {
+    name: 'Light Shadow',
+    type: 'light'
   }
+]
+
+export default {
+  components: {
+    RadiusBox,
+    ShadowBox
   },
   data() {
     return {
-        global: {},
-        boxShadowLight: '',
-        boxShadowBase: '',
-        borderRadiusBase: '',
-        borderRadiusSmall: ''
-      }
-    },
-    watch: {
-      global: {
-        immediate: true,
-        handler(value) {
-          Object.keys(varMap).forEach((c) => {
-            if (value[c]) {
-              this[varMap[c]] = value[c]
-            } else {
-              this[varMap[c]] = original[varMap[c]]
-            }
-          });
-        }
+      radiusGroup,
+      shadowGroup,
     }
   }
 }
@@ -85,47 +82,10 @@ borderのスタイルはいくつかあります。
 
 いくつかの半径(radius)のスタイルがあります。
 
-<el-row :gutter="12" class="demo-radius">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">No Radius</div>
-    <div class="value">border-radius: 0px</div>
-    <div class="radius"></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Small Radius</div>
-    <div class="value">border-radius: {{borderRadiusSmall}}</div>
-    <div 
-      class="radius" 
-      :style="{ borderRadius: borderRadiusSmall }"
-    ></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Large Radius</div>
-    <div class="value">border-radius: {{borderRadiusBase}}</div>
-    <div 
-      class="radius"
-      :style="{ borderRadius: borderRadiusBase }"
-    ></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">Round Radius</div>
-    <div class="value">border-radius: 30px</div>
-    <div class="radius radius-30"></div>
-  </el-col>
-</el-row>
+<radius-box :radius-group="radiusGroup" />
 
 ### 影
 
 シャドウスタイルの選択肢はほとんどありません。
 
-<div 
-class="demo-shadow"
-:style="{ boxShadow: boxShadowBase }"
-></div>
-<span class="demo-shadow-text">Basic Shadow box-shadow: {{boxShadowBase}}</span>
-
-<div 
-class="demo-shadow"
-:style="{ boxShadow: boxShadowLight }"
-></div>
-<span class="demo-shadow-text">Light Shadow box-shadow: {{boxShadowLight}}</span>
+<shadow-box :shadow-group="shadowGroup" />

website/docs/zh-CN/border.md

@@ -1,49 +1,46 @@
 <script>
-  import bus from '../../bus';
-  const varMap = {
-    '$--box-shadow-light': 'boxShadowLight',
-    '$--box-shadow-base': 'boxShadowBase',
-    '$--border-radius-base': 'borderRadiusBase',
-    '$--border-radius-small': 'borderRadiusSmall'
-  };
-  const original = {
-    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
-    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
-    borderRadiusBase: '4px',
-    borderRadiusSmall: '2px'
-  }
-  export default {
-    mounted() {
-      this.setGlobal();
+import RadiusBox from "../../components/demo/border/radius-box.vue";
+import ShadowBox from "../../components/demo/border/shadow-box.vue";
+
+const radiusGroup =  [
+  {
+    name: '无圆角',
+    type: ''
   },
-    methods: {
-      setGlobal() {
-        if (window.userThemeConfig) {
-          this.global = window.userThemeConfig.global;
-        }
+  {
+    name: '小圆角',
+    type: 'small'
+  },
+  {
+    name: '大圆角',
+    type: 'base'
+  },
+  {
+    name: '圆形圆角',
+    type: 'round'
+  },
+]
+
+const shadowGroup = [
+  {
+    name: '基础投影',
+    type: 'base'
+  },
+  {
+    name: '浅色投影',
+    type: 'light'
   }
+]
+
+export default {
+  components: {
+    RadiusBox,
+    ShadowBox
   },
   data() {
     return {
-        global: {},
-        boxShadowLight: '',
-        boxShadowBase: '',
-        borderRadiusBase: '',
-        borderRadiusSmall: ''
-      }
-    },
-    watch: {
-      global: {
-        immediate: true,
-        handler(value) {
-          Object.keys(varMap).forEach((c) => {
-            if (value[c]) {
-              this[varMap[c]] = value[c]
-            } else {
-              this[varMap[c]] = original[varMap[c]]
-            }
-          });
-        }
+      radiusGroup,
+      shadowGroup,
     }
   }
 }
@@ -85,47 +82,10 @@
 
 我们提供了以下几种圆角样式，以供选择。
 
-<el-row :gutter="12" class="demo-radius">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">无圆角</div>
-    <div class="value">border-radius: 0px</div>
-    <div class="radius"></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">小圆角</div>
-    <div class="value">border-radius: {{borderRadiusSmall}}</div>
-    <div
-      class="radius"
-      :style="{ borderRadius: borderRadiusSmall }"
-    ></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">大圆角</div>
-    <div class="value">border-radius: {{borderRadiusBase}}</div>
-    <div
-      class="radius"
-      :style="{ borderRadius: borderRadiusBase }"
-    ></div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="title">圆形圆角</div>
-    <div class="value">border-radius: 30px</div>
-    <div class="radius radius-30"></div>
-  </el-col>
-</el-row>
+<radius-box :radius-group="radiusGroup" />
 
 ### 投影
 
 我们提供了以下几种投影样式，以供选择。
 
-<div
-class="demo-shadow"
-:style="{ boxShadow: boxShadowBase }"
-></div>
-<span class="demo-shadow-text">基础投影 box-shadow: {{boxShadowBase}}</span>
-
-<div
-class="demo-shadow"
-:style="{ boxShadow: boxShadowLight }"
-></div>
-<span class="demo-shadow-text">浅色投影 box-shadow: {{boxShadowLight}}</span>
+<shadow-box :shadow-group="shadowGroup" />

website/util.js

@@ -40,3 +40,15 @@ export function formatType(type) {
     .map(item => item.charAt(0).toUpperCase() + item.slice(1))
     .join(' ')
 }
+
+/**
+ * get css var value
+ * @param {namespace} namespace
+ * @param {string} type
+ * @returns
+ */
+export function getCssVarValue(namespace, type) {
+  return getComputedStyle(document.documentElement).getPropertyValue(
+    `--el-${namespace}-${type}`,
+  )
+}