refactor(color): migrate color css var & simplify color box docs (#2589)

* refactor(color): migrate color css var & simplify color box docs

* Update unit-test.yml

Co-authored-by: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com>

.github/workflows/unit-test.yml

@@ -18,13 +18,3 @@ jobs:
         run: yarn lint
       - name: Test
         run: yarn test
-
-  dependabot:
-    needs:
-      - build
-    runs-on: ubuntu-latest
-    steps:
-      - name: auto-merge
-        uses: ridedott/dependabot-auto-merge-action@master
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

packages/theme-chalk/src/breadcrumb.scss

@@ -32,7 +32,7 @@
         color: $--color-text-primary;
 
         &:hover {
-          color: $--color-primary;
+          color: var(--el-color-primary);
           cursor: pointer;
         }
       }

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

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

packages/theme-chalk/src/collapse.scss

@@ -35,7 +35,7 @@
       }
     }
     &.focusing:focus:not(:hover) {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
     @include when(active) {
       border-bottom-color: transparent;

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

@@ -25,7 +25,7 @@
     }
 
     &.selected {
-      box-shadow: 0 0 3px 2px $--color-primary;
+      box-shadow: 0 0 3px 2px var(--el-color-primary);
     }
 
     > div {
@@ -237,14 +237,14 @@
       cursor: not-allowed;
     }
     &:hover {
-      color: $--color-primary;
-      border-color: $--color-primary;
+      color: var(--el-color-primary);
+      border-color: var(--el-color-primary);
     }
   }
 
   @include e(link-btn) {
     cursor: pointer;
-    color: $--color-primary;
+    color: var(--el-color-primary);
     text-decoration: none;
     padding: 15px;
     font-size: 12px;

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

@@ -67,7 +67,7 @@
     &.today {
       position: relative;
       span {
-        color: $--color-primary;
+        color: var(--el-color-primary);
         font-weight: bold;
       }
       &.start-date span,

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

@@ -16,7 +16,7 @@
     }
     &.today {
       .cell {
-        color: $--color-primary;
+        color: var(--el-color-primary);
         font-weight: bold;
       }
       &.start-date .cell,

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

@@ -116,10 +116,10 @@
   }
 
   @include when(active) {
-    border-color: $--color-primary;
+    border-color: var(--el-color-primary);
 
     &:hover {
-      border-color: $--color-primary;
+      border-color: var(--el-color-primary);
     }
   }
 

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

@@ -49,7 +49,7 @@
     cursor: pointer;
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
 
     &.#{$namespace}-icon-arrow-up {

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

@@ -16,7 +16,7 @@
 
     &.today {
       .cell {
-        color: $--color-primary;
+        color: var(--el-color-primary);
         font-weight: bold;
       }
     }

packages/theme-chalk/src/dialog.scss

@@ -48,13 +48,13 @@
     font-size: var(--el-message-close-size);
 
     .#{$namespace}-dialog__close {
-      color: $--color-info;
+      color: var(--el-color-info);
     }
 
     &:focus,
     &:hover {
       .#{$namespace}-dialog__close {
-        color: $--color-primary;
+        color: var(--el-color-primary);
       }
     }
   }

packages/theme-chalk/src/drawer.scss

@@ -53,7 +53,8 @@
 
 @mixin animation-in($direction) {
   &.#{$direction} {
-    animation: #{$direction}-drawer-animation var(--el-transition-duration) linear reverse;
+    animation: #{$direction}-drawer-animation var(--el-transition-duration) linear
+      reverse;
   }
 }
 
@@ -118,7 +119,7 @@ $directions: rtl, ltr, ttb, btt;
     outline: none;
     &:hover {
       i {
-        color: $--color-primary;
+        color: var(--el-color-primary);
       }
     }
   }

packages/theme-chalk/src/form.scss

@@ -110,7 +110,7 @@
     }
   }
   @include e(error) {
-    color: $--color-danger;
+    color: var(--el-color-danger);
     font-size: 12px;
     line-height: 1;
     padding-top: 4px;
@@ -131,7 +131,7 @@
     @include pseudo('not(.is-no-asterisk)') {
       & > .#{$namespace}-form-item__label:before {
         content: '*';
-        color: $--color-danger;
+        color: var(--el-color-danger);
         margin-right: 4px;
       }
     }
@@ -142,7 +142,7 @@
     & .#{$namespace}-textarea__inner {
       &,
       &:focus {
-        border-color: $--color-danger;
+        border-color: var(--el-color-danger);
       }
     }
     & .#{$namespace}-input-group__append,
@@ -152,7 +152,7 @@
       }
     }
     .#{$namespace}-input__validateIcon {
-      color: $--color-danger;
+      color: var(--el-color-danger);
     }
   }
 

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

@@ -35,7 +35,7 @@
     font-size: 13px;
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
 
       & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__inner {
         border-color: $--input-focus-border;

packages/theme-chalk/src/input.scss

@@ -40,7 +40,7 @@
   }
 
   & .#{$namespace}-input__count {
-    color: $--color-info;
+    color: var(--el-color-info);
     background: $--color-white;
     position: absolute;
     font-size: 12px;
@@ -64,11 +64,11 @@
 
   @include when(exceed) {
     .#{$namespace}-textarea__inner {
-      border-color: $--color-danger;
+      border-color: var(--el-color-danger);
     }
 
     .#{$namespace}-input__count {
-      color: $--color-danger;
+      color: var(--el-color-danger);
     }
   }
 }
@@ -96,7 +96,7 @@
     height: 100%;
     display: inline-flex;
     align-items: center;
-    color: $--color-info;
+    color: var(--el-color-info);
     font-size: 12px;
 
     .#{$namespace}-input__count-inner {
@@ -208,12 +208,12 @@
 
   @include when(exceed) {
     .#{$namespace}-input__inner {
-      border-color: $--color-danger;
+      border-color: var(--el-color-danger);
     }
 
     .#{$namespace}-input__suffix {
       .#{$namespace}-input__count {
-        color: $--color-danger;
+        color: var(--el-color-danger);
       }
     }
   }
@@ -267,7 +267,7 @@
 
   @include e((append, prepend)) {
     background-color: $--background-color-base;
-    color: $--color-info;
+    color: var(--el-color-info);
     vertical-align: middle;
     display: table-cell;
     position: relative;

packages/theme-chalk/src/loading.scss

@@ -46,7 +46,7 @@
   position: absolute;
 
   .#{$namespace}-loading-text {
-    color: $--color-primary;
+    color: var(--el-color-primary);
     margin: 3px 0;
     font-size: 14px;
   }
@@ -62,12 +62,12 @@
     stroke-dasharray: 90, 150;
     stroke-dashoffset: 0;
     stroke-width: 2;
-    stroke: $--color-primary;
+    stroke: var(--el-color-primary);
     stroke-linecap: round;
   }
 
   i {
-    color: $--color-primary;
+    color: var(--el-color-primary);
   }
 }
 

packages/theme-chalk/src/menu.scss

@@ -13,7 +13,9 @@
   list-style: none;
   cursor: pointer;
   position: relative;
-  transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration), color var(--el-transition-duration);
+  transition: border-color var(--el-transition-duration),
+    background-color var(--el-transition-duration),
+    color var(--el-transition-duration);
   box-sizing: border-box;
   white-space: nowrap;
 
@@ -83,7 +85,7 @@
 
       &.is-active {
         .#{$namespace}-submenu__title {
-          border-bottom: 2px solid $--color-primary;
+          border-bottom: 2px solid var(--el-color-primary);
           color: $--color-text-primary;
         }
       }
@@ -126,7 +128,7 @@
       color: $--color-text-primary;
     }
     & > .#{$namespace}-menu-item.is-active {
-      border-bottom: 2px solid $--color-primary;
+      border-bottom: 2px solid var(--el-color-primary);
       color: $--color-text-primary;
     }
   }
@@ -201,7 +203,7 @@
     vertical-align: middle;
   }
   @include when(active) {
-    color: $--color-primary;
+    color: var(--el-color-primary);
     i {
       color: inherit;
     }
@@ -239,7 +241,7 @@
   }
   @include when(active) {
     .#{$namespace}-submenu__title {
-      border-bottom-color: $--color-primary;
+      border-bottom-color: var(--el-color-primary);
     }
   }
   @include when(opened) {

packages/theme-chalk/src/progress.scss

@@ -61,31 +61,31 @@
 
   @include when(success) {
     .#{$namespace}-progress-bar__inner {
-      background-color: $--color-success;
+      background-color: var(--el-color-success);
     }
 
     .#{$namespace}-progress__text {
-      color: $--color-success;
+      color: var(--el-color-success);
     }
   }
 
   @include when(warning) {
     .#{$namespace}-progress-bar__inner {
-      background-color: $--color-warning;
+      background-color: var(--el-color-warning);
     }
 
     .#{$namespace}-progress__text {
-      color: $--color-warning;
+      color: var(--el-color-warning);
     }
   }
 
   @include when(exception) {
     .#{$namespace}-progress-bar__inner {
-      background-color: $--color-danger;
+      background-color: var(--el-color-danger);
     }
 
     .#{$namespace}-progress__text {
-      color: $--color-danger;
+      color: var(--el-color-danger);
     }
   }
 }
@@ -107,7 +107,7 @@
     left: 0;
     top: 0;
     height: 100%;
-    background-color: $--color-primary;
+    background-color: var(--el-color-primary);
     text-align: right;
     border-radius: 100px;
     line-height: 1;

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

@@ -36,7 +36,7 @@
     );
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
 
     & [class*='#{$namespace}-icon-'] {

packages/theme-chalk/src/radio.scss

@@ -26,7 +26,7 @@
     height: map.get($--radio-bordered-height, 'default');
 
     &.is-checked {
-      border-color: $--color-primary;
+      border-color: var(--el-color-primary);
     }
 
     &.is-disabled {

packages/theme-chalk/src/reset.scss

@@ -10,7 +10,7 @@ body {
 }
 
 a {
-  color: $--color-primary;
+  color: var(--el-color-primary);
   text-decoration: none;
 
   &:hover,

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

@@ -27,7 +27,8 @@ $--input-inline-start: 7px !default;
     padding-bottom: 1px;
     border: 1px solid var(--el-border-color-base);
     border-radius: $--border-radius-base;
-    transition: border-color var(--el-transition-duration-fast) cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: border-color var(--el-transition-duration-fast)
+      cubic-bezier(0.645, 0.045, 0.355, 1);
 
     &:hover {
       border-color: $--color-text-placeholder;
@@ -38,7 +39,7 @@ $--input-inline-start: 7px !default;
     }
 
     @include when(focused) {
-      border-color: $--color-primary;
+      border-color: var(--el-color-primary);
     }
 
     @include when(hovering) {
@@ -238,7 +239,8 @@ $--input-inline-start: 7px !default;
     border: 1px solid #d9d9d9;
     border-radius: $--border-radius-base;
     position: relative;
-    transition: all var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: all var(--el-transition-duration)
+      cubic-bezier(0.645, 0.045, 0.355, 1);
   }
 
   @include e(input-calculator) {

packages/theme-chalk/src/slider.scss

@@ -162,7 +162,7 @@
       position: absolute;
       transform: translateX(-50%);
       font-size: 14px;
-      color: $--color-info;
+      color: var(--el-color-info);
       margin-top: 15px;
     }
   }

packages/theme-chalk/src/step.scss

@@ -37,18 +37,18 @@
     }
 
     @include when(success) {
-      color: $--color-success;
-      border-color: $--color-success;
+      color: var(--el-color-success);
+      border-color: var(--el-color-success);
     }
 
     @include when(error) {
-      color: $--color-danger;
-      border-color: $--color-danger;
+      color: var(--el-color-danger);
+      border-color: var(--el-color-danger);
     }
 
     @include when(finish) {
-      color: $--color-primary;
-      border-color: $--color-primary;
+      color: var(--el-color-primary);
+      border-color: var(--el-color-primary);
     }
   }
 
@@ -131,15 +131,15 @@
     }
 
     @include when(success) {
-      color: $--color-success;
+      color: var(--el-color-success);
     }
 
     @include when(error) {
-      color: $--color-danger;
+      color: var(--el-color-danger);
     }
 
     @include when(finish) {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
   }
 
@@ -159,15 +159,15 @@
     }
 
     @include when(success) {
-      color: $--color-success;
+      color: var(--el-color-success);
     }
 
     @include when(error) {
-      color: $--color-danger;
+      color: var(--el-color-danger);
     }
 
     @include when(finish) {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
   }
 

packages/theme-chalk/src/table-column.scss

@@ -40,7 +40,7 @@
     }
 
     @include when(active) {
-      background-color: $--color-primary;
+      background-color: var(--el-color-primary);
       color: $--color-white;
     }
   }
@@ -62,7 +62,7 @@
       padding: 0 3px;
 
       &:hover {
-        color: $--color-primary;
+        color: var(--el-color-primary);
       }
 
       &:focus {

packages/theme-chalk/src/tabs.scss

@@ -12,9 +12,10 @@
     bottom: 0;
     left: 0;
     height: 2px;
-    background-color: $--color-primary;
+    background-color: var(--el-color-primary);
     z-index: 1;
-    transition: transform var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: transform var(--el-transition-duration)
+      cubic-bezier(0.645, 0.045, 0.355, 1);
     list-style: none;
   }
   @include e(new-tab) {
@@ -36,7 +37,7 @@
     }
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
   }
   @include e(nav-wrap) {
@@ -112,7 +113,8 @@
     & .#{$namespace}-icon-close {
       border-radius: 50%;
       text-align: center;
-      transition: all var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: all var(--el-transition-duration)
+        cubic-bezier(0.645, 0.045, 0.355, 1);
       margin-left: 5px;
       &:before {
         transform: scale(0.9);
@@ -126,11 +128,11 @@
     }
 
     @include when(active) {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
       cursor: pointer;
     }
 
@@ -176,8 +178,10 @@
     > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
       border-bottom: 1px solid transparent;
       border-left: 1px solid var(--el-border-color-light);
-      transition: color var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),
-        padding var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: color var(--el-transition-duration)
+          cubic-bezier(0.645, 0.045, 0.355, 1),
+        padding var(--el-transition-duration)
+          cubic-bezier(0.645, 0.045, 0.355, 1);
       &:first-child {
         border-left: none;
       }
@@ -222,7 +226,8 @@
       content: none;
     }
     > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
-      transition: all var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: all var(--el-transition-duration)
+        cubic-bezier(0.645, 0.045, 0.355, 1);
       border: 1px solid transparent;
       margin-top: -1px;
       color: $--color-text-secondary;
@@ -236,13 +241,13 @@
       }
 
       &.is-active {
-        color: $--color-primary;
+        color: var(--el-color-primary);
         background-color: $--color-white;
         border-right-color: var(--el-border-color-base);
         border-left-color: var(--el-border-color-base);
       }
       &:not(.is-disabled):hover {
-        color: $--color-primary;
+        color: var(--el-color-primary);
       }
       &.is-disabled {
         color: $--disabled-color-base;

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

@@ -21,7 +21,7 @@
 }
 
 .time-select-item.selected:not(.disabled) {
-  color: $--color-primary;
+  color: var(--el-color-primary);
   font-weight: bold;
 }
 

packages/theme-chalk/src/timeline-item.scss

@@ -43,19 +43,19 @@
     }
 
     @include m(primary) {
-      background-color: $--color-primary;
+      background-color: var(--el-color-primary);
     }
     @include m(success) {
-      background-color: $--color-success;
+      background-color: var(--el-color-success);
     }
     @include m(warning) {
-      background-color: $--color-warning;
+      background-color: var(--el-color-warning);
     }
     @include m(danger) {
-      background-color: $--color-danger;
+      background-color: var(--el-color-danger);
     }
     @include m(info) {
-      background-color: $--color-info;
+      background-color: var(--el-color-info);
     }
   }
 

packages/theme-chalk/src/transfer.scss

@@ -86,7 +86,7 @@
     }
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
 
     &.#{$namespace}-checkbox .#{$namespace}-checkbox__label {

packages/theme-chalk/src/tree.scss

@@ -31,7 +31,7 @@
     left: 0;
     right: 0;
     height: 1px;
-    background-color: $--color-primary;
+    background-color: var(--el-color-primary);
   }
 }
 
@@ -47,7 +47,7 @@
 
   @include when(drop-inner) {
     > .#{$namespace}-tree-node__content .#{$namespace}-tree-node__label {
-      background-color: $--color-primary;
+      background-color: var(--el-color-primary);
       color: #fff;
     }
   }

packages/theme-chalk/src/upload.scss

@@ -44,16 +44,16 @@
     }
 
     &:hover {
-      border-color: $--color-primary;
-      color: $--color-primary;
+      border-color: var(--el-color-primary);
+      color: var(--el-color-primary);
     }
   }
   &:focus {
-    border-color: $--color-primary;
-    color: $--color-primary;
+    border-color: var(--el-color-primary);
+    color: var(--el-color-primary);
 
     .#{$namespace}-upload-dragger {
-      border-color: $--color-primary;
+      border-color: var(--el-color-primary);
     }
   }
 }
@@ -93,18 +93,18 @@
     text-align: center;
 
     em {
-      color: $--color-primary;
+      color: var(--el-color-primary);
       font-style: normal;
     }
   }
 
   &:hover {
-    border-color: $--color-primary;
+    border-color: var(--el-color-primary);
   }
 
   @include when(dragover) {
     background-color: rgba(32, 159, 255, 0.06);
-    border: 2px dashed $--color-primary;
+    border: 2px dashed var(--el-color-primary);
   }
 }
 
@@ -146,7 +146,7 @@
     }
 
     & .#{$namespace}-icon-upload-success {
-      color: $--color-success;
+      color: var(--el-color-success);
     }
 
     .#{$namespace}-icon-close {
@@ -172,7 +172,7 @@
       font-size: 12px;
       cursor: pointer;
       opacity: 1;
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
 
     &:hover {
@@ -265,7 +265,7 @@
     display: none;
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
   }
 

website/components/demo/color/color-box.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-row :gutter="12">
+    <el-col
+      v-for="(type, i) in colorsType"
+      :key="i"
+      :span="6"
+      :xs="{ span: 12 }"
+    >
+      <div class="demo-color-box" :style="{ background: getColorValue(type) }">
+        {{ type.charAt(0).toUpperCase() + type.slice(1) }}
+        <div class="value">{{ getColorValue(type).toUpperCase() }}</div>
+        <div class="bg-color-sub">
+          <div
+            v-for="(item, key) in Array(2)"
+            :key="key"
+            class="bg-success-sub-item"
+            :style="{
+              background: tintColor(getColorValue(type), (key + 8) / 10),
+            }"
+          ></div>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+const colorsType = ['success', 'warning', 'danger', 'info']
+import { tintColor } from '../../../color.js'
+
+export default {
+  data: function() {
+    return {
+      colorsType,
+    }
+  },
+  methods: {
+    getColorValue(type) {
+      return getComputedStyle(document.documentElement).getPropertyValue(
+        `--el-color-${type}`,
+      )
+    },
+    tintColor,
+  },
+}
+</script>

website/docs/en-US/color.md

@@ -2,6 +2,7 @@
   import bus from '../../bus';
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
+  import ColorBox from "../../components/demo/color/color-box.vue"
   const varMap = {
     'primary': '$--color-primary',
     'success': '$--color-success',
@@ -50,7 +51,8 @@
   }
   export default {
     components: {
-      BorderBox
+      BorderBox,
+      ColorBox,
     },
     mounted() {
       this.setGlobal();
@@ -134,76 +136,7 @@ The main color of Element Plus is bright and friendly blue.
 
 Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)
 
-<el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: success }"
-    >Success<div class="value">#67C23A</div>
-      <div
-        class="bg-color-sub"
-      >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(success, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: warning }"
-    >Warning<div class="value">#E6A23C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(warning, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: danger }"
-    >Danger<div class="value">#F56C6C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(danger, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: info }"
-    >Info<div class="value">#909399</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(info, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-</el-row>
+<color-box />
 
 ### Neutral Color
 

website/docs/es/color.md

@@ -2,6 +2,7 @@
   import bus from '../../bus';
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
+  import ColorBox from "../../components/demo/color/color-box.vue"
   const borderColors = [
     {
       name: 'Borde base',
@@ -53,7 +54,8 @@
   }
   export default {
     components: {
-      BorderBox
+      BorderBox,
+      ColorBox,
     },
     mounted() {
       this.setGlobal();
@@ -137,76 +139,7 @@ El color principal de Element Plus es el azul brillante y amigable.
 
 Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).
 
-<el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: success }"
-    >Success<div class="value">#67C23A</div>
-      <div
-        class="bg-color-sub"
-      >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(success, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: warning }"
-    >Warning<div class="value">#E6A23C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(warning, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: danger }"
-    >Danger<div class="value">#F56C6C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(danger, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: info }"
-    >Info<div class="value">#909399</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(info, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-</el-row>
+<color-box />
 
 ### Color neutro
 

website/docs/fr-FR/color.md

@@ -2,6 +2,7 @@
   import bus from '../../bus';
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
+  import ColorBox from "../../components/demo/color/color-box.vue"
   const borderColors = [
     {
       name: 'Bordure de base',
@@ -52,7 +53,8 @@
   }
   export default {
     components: {
-      BorderBox
+      BorderBox,
+      ColorBox,
     },
     mounted() {
       this.setGlobal();
@@ -129,60 +131,7 @@ La couleur principale d'Element Plus est un bleu clair et agréable.
 
 En plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple une couleur de danger pour indiquer une opération dangereuse.
 
-<el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box" :style="{ background: success }">Succès
-      <div class="value">#67C23A</div>
-      <div class="bg-color-sub">
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(success, (key + 8) / 10) }"
-        ></div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box" :style="{ background: warning }">Avertissement
-      <div class="value">#E6A23C</div>
-      <div class="bg-color-sub">
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(warning, (key + 8) / 10) }"
-        ></div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box" :style="{ background: danger }">Danger
-      <div class="value">#F56C6C</div>
-      <div class="bg-color-sub">
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(danger, (key + 8) / 10) }"
-        ></div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box" :style="{ background: info }">Info
-      <div class="value">#909399</div>
-      <div class="bg-color-sub">
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(info, (key + 8) / 10) }"
-        ></div>
-      </div>
-    </div>
-  </el-col>
-</el-row>
+<color-box />
 
 ### Couleurs neutres
 

website/docs/jp/color.md

@@ -2,6 +2,7 @@
   import bus from '../../bus';
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
+  import ColorBox from "../../components/demo/color/color-box.vue"
   const borderColors = [
     {
       type: 'base',
@@ -48,7 +49,8 @@
   }
   export default {
     components: {
-      BorderBox
+      BorderBox,
+      ColorBox,
     },
     mounted() {
       this.setGlobal();
@@ -132,76 +134,7 @@ Element Plus のメインカラーは明るく親しみやすいブルーです
 
 メインカラーの他にも、シーンカラーを別のシナリオで使用する必要があります（例えば、危険な色は危険な操作を示します）。
 
-<el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: success }"
-    >Success<div class="value">#67C23A</div>
-      <div
-        class="bg-color-sub"
-      >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(success, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: warning }"
-    >Warning<div class="value">#E6A23C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(warning, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: danger }"
-    >Danger<div class="value">#F56C6C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(danger, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: info }"
-    >Info<div class="value">#909399</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(info, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-</el-row>
+<color-box />
 
 ### ニュートラルカラー
 

website/docs/zh-CN/color.md

@@ -2,6 +2,7 @@
   import bus from '../../bus';
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
+  import ColorBox from "../../components/demo/color/color-box.vue"
   const borderColors = [
     {
       name: '一级边框',
@@ -52,7 +53,8 @@
   }
   export default {
     components: {
-      BorderBox
+      BorderBox,
+      ColorBox,
     },
     mounted() {
       this.setGlobal();
@@ -129,76 +131,7 @@ Element Plus 主要品牌颜色是鲜艳、友好的蓝色。
 
 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
 
-<el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: success }"
-    >Success<div class="value">#67C23A</div>
-      <div
-        class="bg-color-sub"
-      >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(success, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: warning }"
-    >Warning<div class="value">#E6A23C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(warning, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: danger }"
-    >Danger<div class="value">#F56C6C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(danger, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: info }"
-    >Info<div class="value">#909399</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(info, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-</el-row>
+<color-box />
 
 ### 中性色