diff --git a/packages/theme-chalk/src/autocomplete.scss b/packages/theme-chalk/src/autocomplete.scss
index 234fed7398..15cba64cea 100644
--- a/packages/theme-chalk/src/autocomplete.scss
+++ b/packages/theme-chalk/src/autocomplete.scss
@@ -38,7 +38,7 @@
     margin: 0;
     line-height: 34px;
     cursor: pointer;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     font-size: var(--el-font-size-base);
     list-style: none;
     text-align: left;
diff --git a/packages/theme-chalk/src/breadcrumb.scss b/packages/theme-chalk/src/breadcrumb.scss
index 495de3f221..59edfe68d3 100644
--- a/packages/theme-chalk/src/breadcrumb.scss
+++ b/packages/theme-chalk/src/breadcrumb.scss
@@ -10,7 +10,7 @@
   @include e(separator) {
     margin: 0 9px;
     font-weight: bold;
-    color: $--color-text-placeholder;
+    color: var(--el-color-text-placeholder);
 
     &[class*='icon'] {
       margin: 0 6px;
@@ -22,14 +22,14 @@
     float: left;
 
     @include e(inner) {
-      color: $--color-text-regular;
+      color: var(--el-color-text-regular);
 
       &.is-link,
       & a {
         font-weight: bold;
         text-decoration: none;
         transition: var(--el-color-transition-base);
-        color: $--color-text-primary;
+        color: var(--el-color-text-primary);
 
         &:hover {
           color: var(--el-color-primary);
@@ -44,7 +44,7 @@
         &,
         &:hover {
           font-weight: normal;
-          color: $--color-text-regular;
+          color: var(--el-color-text-regular);
           cursor: text;
         }
       }
diff --git a/packages/theme-chalk/src/card.scss b/packages/theme-chalk/src/card.scss
index c28c62dd34..e53ef78c6a 100644
--- a/packages/theme-chalk/src/card.scss
+++ b/packages/theme-chalk/src/card.scss
@@ -6,7 +6,7 @@
   border: 1px solid $--card-border-color;
   background-color: $--color-white;
   overflow: hidden;
-  color: $--color-text-primary;
+  color: var(--el-color-text-primary);
   transition: var(--el-transition-duration);
 
   @include when(always-shadow) {
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 5372f08520..119657fa3b 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -117,15 +117,13 @@ $--color-info: map.get($--colors, 'info', 'base');
   @include set-color-type-light($type);
 }
 
-/// color|1|Font Color|2
-$--color-text-primary: #303133 !default;
-/// color|1|Font Color|2
-$--color-text-regular: #606266 !default;
-/// color|1|Font Color|2
-$--color-text-secondary: #909399 !default;
-/// color|1|Font Color|2
-$--color-text-placeholder: #c0c4cc !default;
-/// color|1|Border Color|3
+$--color-text: () !default;
+$--color-text: (
+  primary: #303133,
+  regular: #606266,
+  secondary: #909399,
+  placeholder: #c0c4cc,
+);
 
 $--border-color: () !default;
 $--border-color: map.merge(
@@ -151,7 +149,7 @@ $--link-hover-color: $--color-primary !default;
 -------------------------- */
 $--border-width-base: 1px !default;
 $--border-style-base: solid !default;
-$--border-color-hover: $--color-text-placeholder !default;
+$--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
@@ -188,7 +186,7 @@ $--font-size: map.merge(
 /* Disable base
 -------------------------- */
 $--disabled-fill-base: $--background-color-base !default;
-$--disabled-color-base: $--color-text-placeholder !default;
+$--disabled-color-base: var(--el-color-text-placeholder) !default;
 $--disabled-border-base: map.get($--border-color, 'light') !default;
 
 /* Checkbox
@@ -203,7 +201,7 @@ $--disabled-border-base: map.get($--border-color, 'light') !default;
 /// fontSize||Font|1
 $--radio-font-size: map.get($--font-size, 'base') !default;
 /// color||Color|0
-$--radio-font-color: $--color-text-regular !default;
+$--radio-font-color: var(--el-color-text-regular) !default;
 $--radio-input-height: 14px !default;
 $--radio-input-width: 14px !default;
 /// borderRadius||Border|2
@@ -220,7 +218,7 @@ $--radio-disabled-icon-color: $--disabled-fill-base !default;
 
 $--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
 $--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
-$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
+$--radio-disabled-checked-icon-color: var(--el-color-text-placeholder) !default;
 
 /// color||Color|0
 $--radio-checked-font-color: $--color-primary !default;
@@ -274,17 +272,17 @@ $--select-border-color-hover: $--border-color-hover !default;
 $--select-disabled-border: $--disabled-border-base !default;
 /// fontSize||Font|1
 $--select-font-size: map.get($--font-size, 'base') !default;
-$--select-close-hover-color: $--color-text-secondary !default;
+$--select-close-hover-color: var(--el-color-text-secondary) !default;
 
-$--select-input-color: $--color-text-placeholder !default;
+$--select-input-color: var(--el-color-text-placeholder) !default;
 $--select-multiple-input-color: #666 !default;
 /// color||Color|0
 $--select-input-focus-border-color: $--color-primary !default;
 /// fontSize||Font|1
 $--select-input-font-size: 14px !default;
 
-$--select-option-color: $--color-text-regular !default;
-$--select-option-disabled-color: $--color-text-placeholder !default;
+$--select-option-color: var(--el-color-text-regular) !default;
+$--select-option-disabled-color: var(--el-color-text-placeholder) !default;
 /// height||Other|4
 $--select-option-height: 34px !default;
 $--select-option-hover-background: $--background-color-base !default;
@@ -327,7 +325,7 @@ $--select-dropdown-border: solid 1px map.get($--border-color, 'light') !default;
 /* Input
 -------------------------- */
 /// color||Color|0
-$--input-font-color: $--color-text-regular !default;
+$--input-font-color: var(--el-color-text-regular) !default;
 
 $--input-border: $--border-base !default;
 $--input-border-color: map.get($--border-color, 'base') !default;
@@ -336,19 +334,19 @@ $--input-border-radius: $--border-radius-base !default;
 /// color||Color|0
 $--input-background-color: $--color-white !default;
 /// color||Color|0
-$--input-icon-color: $--color-text-placeholder !default;
+$--input-icon-color: var(--el-color-text-placeholder) !default;
 /// color||Color|0
-$--input-placeholder-color: $--color-text-placeholder !default;
+$--input-placeholder-color: var(--el-color-text-placeholder) !default;
 
 $--input-hover-border: $--border-color-hover !default;
-$--input-clear-hover-color: $--color-text-secondary !default;
+$--input-clear-hover-color: var(--el-color-text-secondary) !default;
 
 $--input-focus-border: $--color-primary !default;
 
 $--input-disabled-fill: $--disabled-fill-base !default;
 $--input-disabled-border: $--disabled-border-base !default;
 $--input-disabled-color: $--disabled-color-base !default;
-$--input-disabled-placeholder-color: $--color-text-placeholder !default;
+$--input-disabled-placeholder-color: var(--el-color-text-placeholder) !default;
 
 $--input-font-size: (
   'default': map.get($--font-size, 'base'),
@@ -458,19 +456,19 @@ $--popover-padding-large: 18px 20px !default;
 /// fontSize||Font|1
 $--popover-title-font-size: 16px !default;
 /// color||Color|0
-$--popover-title-font-color: $--color-text-primary !default;
+$--popover-title-font-color: var(--el-color-text-primary) !default;
 $--popover-border-radius: 4px !default;
 
 /* Tooltip
 -------------------------- */
 /// color|1|Color|0
-$--tooltip-fill: $--color-text-primary !default;
+$--tooltip-fill: var(--el-color-text-primary) !default;
 /// color|1|Color|0
 $--tooltip-color: $--color-white !default;
 /// fontSize||Font|1
 $--tooltip-font-size: 12px !default;
 /// color||Color|0
-$--tooltip-border-color: $--color-text-primary !default;
+$--tooltip-border-color: var(--el-color-text-primary) !default;
 $--tooltip-arrow-size: 6px !default;
 /// padding||Spacing|3
 $--tooltip-padding: 10px !default;
@@ -485,9 +483,9 @@ $--tooltip-padding: 10px !default;
 /// color||Color|0
 $--tree-node-hover-background-color: $--background-color-base !default;
 /// color||Color|0
-$--tree-font-color: $--color-text-regular !default;
+$--tree-font-color: var(--el-color-text-regular) !default;
 /// color||Color|0
-$--tree-expand-icon-color: $--color-text-placeholder !default;
+$--tree-expand-icon-color: var(--el-color-text-placeholder) !default;
 
 /* Dropdown
 -------------------------- */
@@ -527,7 +525,7 @@ $--slider-main-background-color: $--color-primary !default;
 /// color||Color|0
 $--slider-runway-background-color: map.get($--border-color, 'light') !default;
 $--slider-stop-background-color: $--color-white !default;
-$--slider-disable-color: $--color-text-placeholder !default;
+$--slider-disable-color: var(--el-color-text-placeholder) !default;
 $--slider-margin: 16px 0 !default;
 $--slider-border-radius: 3px !default;
 /// height|1|Other|4
@@ -551,16 +549,16 @@ $--rate-font-size: map.get($--font-size, 'base') !default;
 $--rate-icon-size: 18px !default;
 /// margin||Spacing|2
 $--rate-icon-margin: 6px !default;
-$--rate-icon-color: $--color-text-placeholder !default;
+$--rate-icon-color: var(--el-color-text-placeholder) !default;
 
 /* DatePicker
 --------------------------*/
-$--datepicker-font-color: $--color-text-regular !default;
+$--datepicker-font-color: var(--el-color-text-regular) !default;
 /// color|1|Color|0
-$--datepicker-off-font-color: $--color-text-placeholder !default;
+$--datepicker-off-font-color: var(--el-color-text-placeholder) !default;
 /// color||Color|0
-$--datepicker-header-font-color: $--color-text-regular !default;
-$--datepicker-icon-color: $--color-text-primary !default;
+$--datepicker-header-font-color: var(--el-color-text-regular) !default;
+$--datepicker-icon-color: var(--el-color-text-primary) !default;
 $--datepicker-border-color: $--disabled-border-base !default;
 $--datepicker-inner-border-color: #e4e4e4 !default;
 /// color||Color|0
@@ -587,9 +585,12 @@ $--loading-fullscreen-spinner-size: 50px !default;
 
 /* Scrollbar
 --------------------------*/
-$--scrollbar-background-color: rgba($--color-text-secondary, 0.3) !default;
+$--scrollbar-background-color: rgba(
+  var(--el-color-text-secondary),
+  0.3
+) !default;
 $--scrollbar-hover-background-color: rgba(
-  $--color-text-secondary,
+  var(--el-color-text-secondary),
   0.5
 ) !default;
 
@@ -607,7 +608,7 @@ $--collapse-header-height: 48px !default;
 /// color||Color|0
 $--collapse-header-background-color: $--color-white !default;
 /// color||Color|0
-$--collapse-header-font-color: $--color-text-primary !default;
+$--collapse-header-font-color: var(--el-color-text-primary) !default;
 /// fontSize||Font|1
 $--collapse-header-font-size: 13px !default;
 /// color||Color|0
@@ -615,7 +616,7 @@ $--collapse-content-background-color: $--color-white !default;
 /// fontSize||Font|1
 $--collapse-content-font-size: 13px !default;
 /// color||Color|0
-$--collapse-content-font-color: $--color-text-primary !default;
+$--collapse-content-font-color: var(--el-color-text-primary) !default;
 
 /* Transfer
 --------------------------*/
diff --git a/packages/theme-chalk/src/date-picker/date-picker.scss b/packages/theme-chalk/src/date-picker/date-picker.scss
index 9f36e0e7af..3ebf57077b 100644
--- a/packages/theme-chalk/src/date-picker/date-picker.scss
+++ b/packages/theme-chalk/src/date-picker/date-picker.scss
@@ -64,7 +64,7 @@
     line-height: 22px;
     text-align: center;
     cursor: pointer;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
 
     &:hover {
       color: $--datepicker-hover-font-color;
diff --git a/packages/theme-chalk/src/date-picker/date-table.scss b/packages/theme-chalk/src/date-picker/date-table.scss
index fbb2c876d9..850207719b 100644
--- a/packages/theme-chalk/src/date-picker/date-table.scss
+++ b/packages/theme-chalk/src/date-picker/date-table.scss
@@ -117,7 +117,7 @@
       background-color: $--background-color-base;
       opacity: 1;
       cursor: not-allowed;
-      color: $--color-text-placeholder;
+      color: var(--el-color-text-placeholder);
     }
 
     &.selected div {
diff --git a/packages/theme-chalk/src/date-picker/month-table.scss b/packages/theme-chalk/src/date-picker/month-table.scss
index 2dd24570f3..37921c25f8 100644
--- a/packages/theme-chalk/src/date-picker/month-table.scss
+++ b/packages/theme-chalk/src/date-picker/month-table.scss
@@ -28,10 +28,10 @@
     &.disabled .cell {
       background-color: $--background-color-base;
       cursor: not-allowed;
-      color: $--color-text-placeholder;
+      color: var(--el-color-text-placeholder);
 
       &:hover {
-        color: $--color-text-placeholder;
+        color: var(--el-color-text-placeholder);
       }
     }
 
diff --git a/packages/theme-chalk/src/date-picker/picker-panel.scss b/packages/theme-chalk/src/date-picker/picker-panel.scss
index 92d2009774..7a6f3e1d2c 100644
--- a/packages/theme-chalk/src/date-picker/picker-panel.scss
+++ b/packages/theme-chalk/src/date-picker/picker-panel.scss
@@ -2,7 +2,7 @@
 
 @include b(picker-panel) {
   position: relative;
-  color: $--color-text-regular;
+  color: var(--el-color-text-regular);
   background: $--color-white;
   border-radius: $--border-radius-base;
   line-height: 30px;
diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss
index e7af2d03b2..1ad19f3ce5 100644
--- a/packages/theme-chalk/src/date-picker/picker.scss
+++ b/packages/theme-chalk/src/date-picker/picker.scss
@@ -59,7 +59,7 @@
   .#{$namespace}-range__icon {
     font-size: 14px;
     margin-left: -5px;
-    color: $--color-text-placeholder;
+    color: var(--el-color-text-placeholder);
     float: left;
     line-height: 32px;
   }
@@ -75,10 +75,10 @@
     width: 39%;
     text-align: center;
     font-size: var(--el-font-size-base);
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
 
     &::placeholder {
-      color: $--color-text-placeholder;
+      color: var(--el-color-text-placeholder);
     }
   }
 
@@ -91,12 +91,12 @@
     line-height: 32px;
     font-size: 14px;
     width: 5%;
-    color: $--color-text-primary;
+    color: var(--el-color-text-primary);
   }
 
   .#{$namespace}-range__close-icon {
     font-size: 14px;
-    color: $--color-text-placeholder;
+    color: var(--el-color-text-placeholder);
     width: 25px;
     display: inline-block;
     float: right;
diff --git a/packages/theme-chalk/src/date-picker/time-picker.scss b/packages/theme-chalk/src/date-picker/time-picker.scss
index 971d6fd34b..9eee8b669b 100644
--- a/packages/theme-chalk/src/date-picker/time-picker.scss
+++ b/packages/theme-chalk/src/date-picker/time-picker.scss
@@ -72,7 +72,7 @@
     background-color: transparent;
     outline: none;
     font-size: 12px;
-    color: $--color-text-primary;
+    color: var(--el-color-text-primary);
 
     &.confirm {
       font-weight: 800;
diff --git a/packages/theme-chalk/src/date-picker/time-spinner.scss b/packages/theme-chalk/src/date-picker/time-spinner.scss
index e4f7cba7bd..1555051aad 100644
--- a/packages/theme-chalk/src/date-picker/time-spinner.scss
+++ b/packages/theme-chalk/src/date-picker/time-spinner.scss
@@ -38,7 +38,7 @@
 
   @include e(arrow) {
     font-size: 12px;
-    color: $--color-text-secondary;
+    color: var(--el-color-text-secondary);
     position: absolute;
     left: 0;
     width: 100%;
@@ -91,7 +91,7 @@
     height: 32px;
     line-height: 32px;
     font-size: 12px;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
 
     &:hover:not(.disabled):not(.active) {
       background: $--background-color-base;
@@ -99,12 +99,12 @@
     }
 
     &.active:not(.disabled) {
-      color: $--color-text-primary;
+      color: var(--el-color-text-primary);
       font-weight: bold;
     }
 
     &.disabled {
-      color: $--color-text-placeholder;
+      color: var(--el-color-text-placeholder);
       cursor: not-allowed;
     }
   }
diff --git a/packages/theme-chalk/src/date-picker/year-table.scss b/packages/theme-chalk/src/date-picker/year-table.scss
index ceb5160bff..a1eaa3e9e9 100644
--- a/packages/theme-chalk/src/date-picker/year-table.scss
+++ b/packages/theme-chalk/src/date-picker/year-table.scss
@@ -24,10 +24,10 @@
     &.disabled .cell {
       background-color: $--background-color-base;
       cursor: not-allowed;
-      color: $--color-text-placeholder;
+      color: var(--el-color-text-placeholder);
 
       &:hover {
-        color: $--color-text-placeholder;
+        color: var(--el-color-text-placeholder);
       }
     }
 
diff --git a/packages/theme-chalk/src/descriptions.scss b/packages/theme-chalk/src/descriptions.scss
index 58a99c1fc4..8dc1bf9ea1 100644
--- a/packages/theme-chalk/src/descriptions.scss
+++ b/packages/theme-chalk/src/descriptions.scss
@@ -27,7 +27,7 @@
   }
 
   @include e(body) {
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     background-color: $--color-white;
 
     table {
diff --git a/packages/theme-chalk/src/divider.scss b/packages/theme-chalk/src/divider.scss
index 07f4266054..7de2124815 100644
--- a/packages/theme-chalk/src/divider.scss
+++ b/packages/theme-chalk/src/divider.scss
@@ -26,7 +26,7 @@
     background-color: $--color-white;
     padding: 0 20px;
     font-weight: 500;
-    color: $--color-text-primary;
+    color: var(--el-color-text-primary);
     font-size: 14px;
 
     @include when(left) {
diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
index 4699385ab0..bca665988f 100644
--- a/packages/theme-chalk/src/dropdown.scss
+++ b/packages/theme-chalk/src/dropdown.scss
@@ -6,7 +6,7 @@
 @include b(dropdown) {
   display: inline-block;
   position: relative;
-  color: $--color-text-regular;
+  color: var(--el-color-text-regular);
   font-size: var(--el-font-size-base);
   line-height: 1;
 
@@ -110,7 +110,7 @@
     padding: 0 20px;
     margin: 0;
     font-size: var(--el-font-size-base);
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     cursor: pointer;
     outline: none;
     &:not(.is-disabled):hover,
diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss
index 8efb74ce1e..0d0109c9f6 100644
--- a/packages/theme-chalk/src/form.scss
+++ b/packages/theme-chalk/src/form.scss
@@ -94,7 +94,7 @@
     flex: 0 0 auto;
     text-align: right;
     font-size: $--form-label-font-size;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     line-height: 40px;
     padding: 0 12px 0 0;
     box-sizing: border-box;
diff --git a/packages/theme-chalk/src/image-viewer.scss b/packages/theme-chalk/src/image-viewer.scss
index 11a79442eb..33462a7e6a 100644
--- a/packages/theme-chalk/src/image-viewer.scss
+++ b/packages/theme-chalk/src/image-viewer.scss
@@ -6,7 +6,7 @@
   height: 44px;
   font-size: 24px;
   color: #fff;
-  background-color: $--color-text-regular;
+  background-color: var(--el-color-text-regular);
   border-color: #fff;
 }
 
@@ -55,7 +55,7 @@
     width: 282px;
     height: 44px;
     padding: 0 23px;
-    background-color: $--color-text-regular;
+    background-color: var(--el-color-text-regular);
     border-color: #fff;
     border-radius: 22px;
 
diff --git a/packages/theme-chalk/src/image.scss b/packages/theme-chalk/src/image.scss
index 60f3b709df..8ff1a309c5 100644
--- a/packages/theme-chalk/src/image.scss
+++ b/packages/theme-chalk/src/image.scss
@@ -37,7 +37,7 @@
     align-items: center;
     font-size: 14px;
     background: $--background-color-base;
-    color: $--color-text-placeholder;
+    color: var(--el-color-text-placeholder);
     vertical-align: middle;
   }
 
diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss
index 000d11639c..5d4a08c4f1 100644
--- a/packages/theme-chalk/src/input-number.scss
+++ b/packages/theme-chalk/src/input-number.scss
@@ -30,7 +30,7 @@
     height: auto;
     text-align: center;
     background: $--background-color-base;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     cursor: pointer;
     font-size: 13px;
 
diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss
index c1058ab260..d56219eb4f 100644
--- a/packages/theme-chalk/src/menu.scss
+++ b/packages/theme-chalk/src/menu.scss
@@ -32,7 +32,7 @@
   }
 
   i {
-    color: $--color-text-secondary;
+    color: var(--el-color-text-secondary);
   }
 
   &:hover,
@@ -68,7 +68,7 @@
       line-height: 60px;
       margin: 0;
       border-bottom: 2px solid transparent;
-      color: $--color-text-secondary;
+      color: var(--el-color-text-secondary);
 
       a,
       a:hover {
@@ -87,14 +87,14 @@
       &:hover {
         outline: none;
         .#{$namespace}-submenu__title {
-          color: $--color-text-primary;
+          color: var(--el-color-text-primary);
         }
       }
 
       &.is-active {
         .#{$namespace}-submenu__title {
           border-bottom: 2px solid var(--el-color-primary);
-          color: $--color-text-primary;
+          color: var(--el-color-text-primary);
         }
       }
 
@@ -102,7 +102,7 @@
         height: 60px;
         line-height: 60px;
         border-bottom: 2px solid transparent;
-        color: $--color-text-secondary;
+        color: var(--el-color-text-secondary);
 
         &:hover {
           background-color: #fff;
@@ -123,21 +123,21 @@
         height: 36px;
         line-height: 36px;
         padding: 0 10px;
-        color: $--color-text-secondary;
+        color: var(--el-color-text-secondary);
       }
       & .#{$namespace}-menu-item.is-active,
       & .#{$namespace}-submenu.is-active > .#{$namespace}-submenu__title {
-        color: $--color-text-primary;
+        color: var(--el-color-text-primary);
       }
     }
     & .#{$namespace}-menu-item:not(.is-disabled):hover,
     & .#{$namespace}-menu-item:not(.is-disabled):focus {
       outline: none;
-      color: $--color-text-primary;
+      color: var(--el-color-text-primary);
     }
     & > .#{$namespace}-menu-item.is-active {
       border-bottom: 2px solid var(--el-color-primary);
-      color: $--color-text-primary;
+      color: var(--el-color-text-primary);
     }
   }
   @include m(collapse) {
@@ -282,7 +282,7 @@
     padding: 7px 0 7px 20px;
     line-height: normal;
     font-size: 12px;
-    color: $--color-text-secondary;
+    color: var(--el-color-text-secondary);
   }
 }
 
diff --git a/packages/theme-chalk/src/page-header.scss b/packages/theme-chalk/src/page-header.scss
index 8a4b6c351f..33635d6837 100644
--- a/packages/theme-chalk/src/page-header.scss
+++ b/packages/theme-chalk/src/page-header.scss
@@ -37,6 +37,6 @@
 
   @include e(content) {
     font-size: 18px;
-    color: $--color-text-primary;
+    color: var(--el-color-text-primary);
   }
 }
diff --git a/packages/theme-chalk/src/popover.scss b/packages/theme-chalk/src/popover.scss
index 97de955caf..526cff0e1e 100644
--- a/packages/theme-chalk/src/popover.scss
+++ b/packages/theme-chalk/src/popover.scss
@@ -10,7 +10,7 @@
     border: 1px solid $--popover-border-color;
     padding: $--popover-padding;
     z-index: var(--el-index-popper);
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     line-height: 1.4;
     text-align: justify;
     font-size: $--popover-font-size;
diff --git a/packages/theme-chalk/src/popper.scss b/packages/theme-chalk/src/popper.scss
index e93dc56fb8..1856966475 100644
--- a/packages/theme-chalk/src/popper.scss
+++ b/packages/theme-chalk/src/popper.scss
@@ -16,9 +16,9 @@
 
   @include when(dark) {
     color: $--color-white;
-    background: $--color-text-primary;
+    background: var(--el-color-text-primary);
     #{$arrow-selector}::before {
-      background: $--color-text-primary;
+      background: var(--el-color-text-primary);
       right: 0;
     }
   }
@@ -51,7 +51,7 @@
       z-index: -1;
       content: ' ';
       transform: rotate(45deg);
-      background: $--color-text-primary;
+      background: var(--el-color-text-primary);
       box-sizing: border-box;
     }
   }
diff --git a/packages/theme-chalk/src/progress.scss b/packages/theme-chalk/src/progress.scss
index 3db940a375..b1403e8bc2 100644
--- a/packages/theme-chalk/src/progress.scss
+++ b/packages/theme-chalk/src/progress.scss
@@ -10,7 +10,7 @@
 
   @include e(text) {
     font-size: 14px;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     margin-left: 5px;
     min-width: 50px;
     line-height: 1;
diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss
index a5937887cc..472fd7ffe7 100644
--- a/packages/theme-chalk/src/radio.scss
+++ b/packages/theme-chalk/src/radio.scss
@@ -97,7 +97,7 @@
         }
       }
       & + span.#{$namespace}-radio__label {
-        color: $--color-text-placeholder;
+        color: var(--el-color-text-placeholder);
         cursor: not-allowed;
       }
     }
diff --git a/packages/theme-chalk/src/reset.scss b/packages/theme-chalk/src/reset.scss
index 3cffd3d73a..e95d46ccd8 100644
--- a/packages/theme-chalk/src/reset.scss
+++ b/packages/theme-chalk/src/reset.scss
@@ -33,7 +33,7 @@ h3,
 h4,
 h5,
 h6 {
-  color: $--color-text-regular;
+  color: var(--el-color-text-regular);
   font-weight: inherit;
 
   &:first-child {
diff --git a/packages/theme-chalk/src/select-v2.scss b/packages/theme-chalk/src/select-v2.scss
index 79bdb29bff..05a39821b1 100644
--- a/packages/theme-chalk/src/select-v2.scss
+++ b/packages/theme-chalk/src/select-v2.scss
@@ -27,9 +27,10 @@ $--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) var(--el-ease-in-out-bezier-function);
+    transition: border-color var(--el-transition-duration-fast)
+      var(--el-ease-in-out-bezier-function);
     &:hover {
-      border-color: var(--el-color-text-placeholder)
+      border-color: var(--el-color-text-placeholder);
     }
 
     @include when(filterable) {
@@ -110,9 +111,9 @@ $--input-inline-start: 7px !default;
 
   @include e(popper) {
     @include picker-popper(
-        $--select-dropdown-background,
-        $--select-dropdown-border,
-        $--select-dropdown-shadow
+      $--select-dropdown-background,
+      $--select-dropdown-border,
+      $--select-dropdown-shadow
     );
   }
 
@@ -235,7 +236,8 @@ $--input-inline-start: 7px !default;
     border: 1px solid #d9d9d9;
     border-radius: $--border-radius-base;
     position: relative;
-    transition: all var(--el-transition-duration) var(--el-ease-in-out-bezier-function);
+    transition: all var(--el-transition-duration)
+      var(--el-ease-in-out-bezier-function);
   }
 
   @include e(input-calculator) {
@@ -281,7 +283,7 @@ $--input-inline-start: 7px !default;
       color: $--color-white;
 
       &:hover {
-        background-color: $--color-text-secondary;
+        background-color: var(--el-color-text-secondary);
       }
 
       &::before {
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index e3554111c7..5c3cfc217c 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -152,13 +152,13 @@
     background-color: #f0f2f5;
 
     .#{$namespace}-icon-close {
-      background-color: $--color-text-placeholder;
+      background-color: var(--el-color-text-placeholder);
       right: -7px;
       top: 0;
       color: $--color-white;
 
       &:hover {
-        background-color: $--color-text-secondary;
+        background-color: var(--el-color-text-secondary);
       }
 
       &::before {
diff --git a/packages/theme-chalk/src/step.scss b/packages/theme-chalk/src/step.scss
index 5c411e913f..bf2d1fbc55 100644
--- a/packages/theme-chalk/src/step.scss
+++ b/packages/theme-chalk/src/step.scss
@@ -27,13 +27,13 @@
     width: 100%;
 
     @include when(process) {
-      color: $--color-text-primary;
-      border-color: $--color-text-primary;
+      color: var(--el-color-text-primary);
+      border-color: var(--el-color-text-primary);
     }
 
     @include when(wait) {
-      color: $--color-text-placeholder;
-      border-color: $--color-text-placeholder;
+      color: var(--el-color-text-placeholder);
+      border-color: var(--el-color-text-placeholder);
     }
 
     @include when(success) {
@@ -98,7 +98,7 @@
   @include e(line) {
     position: absolute;
     border-color: inherit;
-    background-color: $--color-text-placeholder;
+    background-color: var(--el-color-text-placeholder);
   }
 
   @include e(line-inner) {
@@ -123,11 +123,11 @@
 
     @include when(process) {
       font-weight: bold;
-      color: $--color-text-primary;
+      color: var(--el-color-text-primary);
     }
 
     @include when(wait) {
-      color: $--color-text-placeholder;
+      color: var(--el-color-text-placeholder);
     }
 
     @include when(success) {
@@ -151,11 +151,11 @@
     font-weight: normal;
 
     @include when(process) {
-      color: $--color-text-primary;
+      color: var(--el-color-text-primary);
     }
 
     @include when(wait) {
-      color: $--color-text-placeholder;
+      color: var(--el-color-text-placeholder);
     }
 
     @include when(success) {
@@ -293,7 +293,7 @@
         position: absolute;
         height: 15px;
         width: 1px;
-        background: $--color-text-placeholder;
+        background: var(--el-color-text-placeholder);
       }
 
       &::before {
diff --git a/packages/theme-chalk/src/table-column.scss b/packages/theme-chalk/src/table-column.scss
index 7f9c6ae17d..452f7d7d3c 100644
--- a/packages/theme-chalk/src/table-column.scss
+++ b/packages/theme-chalk/src/table-column.scss
@@ -56,7 +56,7 @@
     button {
       background: transparent;
       border: none;
-      color: $--color-text-regular;
+      color: var(--el-color-text-regular);
       cursor: pointer;
       font-size: var(--el-font-size-small);
       padding: 0 3px;
diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss
index 9724daf7ad..165df61958 100644
--- a/packages/theme-chalk/src/tabs.scss
+++ b/packages/theme-chalk/src/tabs.scss
@@ -69,7 +69,7 @@
     cursor: pointer;
     line-height: 44px;
     font-size: 12px;
-    color: $--color-text-secondary;
+    color: var(--el-color-text-secondary);
   }
   @include e(nav-next) {
     right: 0;
@@ -102,7 +102,7 @@
     list-style: none;
     font-size: 14px;
     font-weight: 500;
-    color: $--color-text-primary;
+    color: var(--el-color-text-primary);
     position: relative;
 
     &:focus,
@@ -122,7 +122,7 @@
       }
 
       &:hover {
-        background-color: $--color-text-placeholder;
+        background-color: var(--el-color-text-placeholder);
         color: $--color-white;
       }
     }
@@ -230,7 +230,7 @@
         cubic-bezier(0.645, 0.045, 0.355, 1);
       border: 1px solid transparent;
       margin-top: -1px;
-      color: $--color-text-secondary;
+      color: var(--el-color-text-secondary);
 
       &:first-child {
         margin-left: -1px;
diff --git a/packages/theme-chalk/src/timeline-item.scss b/packages/theme-chalk/src/timeline-item.scss
index 10072e482c..76214f81c4 100644
--- a/packages/theme-chalk/src/timeline-item.scss
+++ b/packages/theme-chalk/src/timeline-item.scss
@@ -67,11 +67,11 @@
   }
 
   @include e(content) {
-    color: $--color-text-primary;
+    color: var(--el-color-text-primary);
   }
 
   @include e(timestamp) {
-    color: $--color-text-secondary;
+    color: var(--el-color-text-secondary);
     line-height: 1;
     font-size: var(--el-font-size-small);
 
diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss
index 2823f5f0ee..b7981a8a67 100644
--- a/packages/theme-chalk/src/tree.scss
+++ b/packages/theme-chalk/src/tree.scss
@@ -22,7 +22,7 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    color: $--color-text-secondary;
+    color: var(--el-color-text-secondary);
     font-size: var(--el-font-size-base);
   }
 
diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss
index 91c3173950..e1dcb5dd1f 100644
--- a/packages/theme-chalk/src/upload.scss
+++ b/packages/theme-chalk/src/upload.scss
@@ -13,7 +13,7 @@
 
   @include e(tip) {
     font-size: 12px;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     margin-top: 7px;
   }
 
@@ -72,7 +72,7 @@
 
   .#{$namespace}-icon-upload {
     font-size: 67px;
-    color: $--color-text-placeholder;
+    color: var(--el-color-text-placeholder);
     margin: 40px 0 16px;
     line-height: 50px;
   }
@@ -88,7 +88,7 @@
   }
 
   .#{$namespace}-upload__text {
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     font-size: 14px;
     text-align: center;
 
@@ -116,7 +116,7 @@
   @include e(item) {
     transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
     font-size: 14px;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     line-height: 1.8;
     margin-top: 5px;
     position: relative;
@@ -156,7 +156,7 @@
       right: 5px;
       cursor: pointer;
       opacity: 0.75;
-      color: $--color-text-regular;
+      color: var(--el-color-text-regular);
       //transform: scale(.7);
 
       &:hover {
@@ -231,7 +231,7 @@
   }
 
   @include e(item-name) {
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     display: block;
     margin-right: 40px;
     overflow: hidden;
@@ -243,7 +243,7 @@
     [class^='#{$namespace}-icon'] {
       height: 100%;
       margin-right: 7px;
-      color: $--color-text-secondary;
+      color: var(--el-color-text-secondary);
       line-height: inherit;
     }
   }
@@ -261,7 +261,7 @@
     right: 10px;
     top: 0;
     font-size: 12px;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     display: none;
 
     &:hover {
@@ -598,7 +598,7 @@
     margin: 0;
     line-height: 36px;
     font-size: 14px;
-    color: $--color-text-primary;
+    color: var(--el-color-text-primary);
   }
 
   + .#{$namespace}-upload__inner {
diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss
index 699c0d25e9..d469e4eee8 100644
--- a/packages/theme-chalk/src/var.scss
+++ b/packages/theme-chalk/src/var.scss
@@ -13,19 +13,24 @@
   --el-color-white: #{$--color-white};
   --el-color-black: #{$--color-black};
 
+  // --el-color-primary-light-#{$i}
   @for $i from 1 through 9 {
     @include set-css-color-primary($i);
   }
 
+  // --el-color-#{$type}
+  // --el-color-#{$type}-light
+  // --el-color-#{$type}-lighter
   @each $type in (success, warning, danger, error, info) {
     @include set-css-color-type($type);
   }
 
-  --el-color-text-primary: #{$--color-text-primary};
-  --el-color-text-regular: #{$--color-text-regular};
-  --el-color-text-secondary: #{$--color-text-secondary};
-  --el-color-text-placeholder: #{$--color-text-placeholder};
+  // --el-color-text-#{$type}
+  @each $type in (primary, regular, secondary, placeholder) {
+    @include set-css-var-type('color-text', $type, $--color-text);
+  }
 
+  // --el-border-color-#{$type}
   @each $type in (base, light, lighter, extra-light) {
     @include set-css-var-type('border-color', $type, $--border-color);
   }
diff --git a/website/components/demo/color/border-box.vue b/website/components/demo/color/border-box.vue
index 44b267aba2..e999f61ae8 100644
--- a/website/components/demo/color/border-box.vue
+++ b/website/components/demo/color/border-box.vue
@@ -7,7 +7,7 @@
       :style="{ background: `var(--el-border-color-${border.type})` }"
     >
       {{ border.name || formatType(border.type) + ' Border' }}
-      <div class="value">{{ border.color }}</div>
+      <div class="value">{{ getColorValue(border.type).toUpperCase() }}</div>
     </div>
   </div>
 </template>
@@ -26,6 +26,11 @@ export default {
   },
   methods: {
     formatType,
+    getColorValue(type) {
+      return getComputedStyle(document.documentElement).getPropertyValue(
+        `--el-border-color-${type}`,
+      )
+    },
   },
 }
 </script>
diff --git a/website/components/demo/color/text-box.vue b/website/components/demo/color/text-box.vue
new file mode 100644
index 0000000000..ab3ea36471
--- /dev/null
+++ b/website/components/demo/color/text-box.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="demo-color-box-group">
+    <div
+      v-for="(text, i) in textColors"
+      :key="i"
+      class="demo-color-box demo-color-box-other"
+      :style="{ background: `var(--el-color-text-${text.type})` }"
+    >
+      {{ text.name || formatType(text.type) + ' Text' }}
+      <div class="value">{{ getColorValue(text.type).toUpperCase() }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formatType } from '../../../util'
+
+export default {
+  props: {
+    textColors: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+  methods: {
+    formatType,
+    getColorValue(type) {
+      return getComputedStyle(document.documentElement).getPropertyValue(
+        `--el-color-text-${type}`,
+      )
+    },
+  },
+}
+</script>
diff --git a/website/docs/en-US/color.md b/website/docs/en-US/color.md
index 54f792f011..940905468e 100644
--- a/website/docs/en-US/color.md
+++ b/website/docs/en-US/color.md
@@ -3,6 +3,7 @@
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
   import ColorBox from "../../components/demo/color/color-box.vue"
+  import TextBox from "../../components/demo/color/text-box.vue"
   const varMap = {
     'primary': '$--color-primary',
     'success': '$--color-success',
@@ -11,10 +12,6 @@
     'info': '$--color-info',
     'white': '$--color-white',
     'black': '$--color-black',
-    'textPrimary': '$--color-text-primary',
-    'textRegular': '$--color-text-regular',
-    'textSecondary': '$--color-text-secondary',
-    'textPlaceholder': '$--color-text-placeholder',
   };
 
   const borderColors = [
@@ -36,6 +33,25 @@
     },
   ]
 
+  const textColors = [
+    {
+      name: 'Primary Text',
+      type: 'primary',
+    },
+    {
+      name: 'Regular Text',
+      type: 'regular',
+    },
+    {
+      name: 'Secondary Text',
+      type: 'secondary',
+    },
+    {
+      name: 'Placeholder Text',
+      type: 'placeholder',
+    }
+  ]
+
   const original = {
     primary: '#409EFF',
     success: '#67C23A',
@@ -53,6 +69,7 @@
     components: {
       BorderBox,
       ColorBox,
+      TextBox,
     },
     mounted() {
       this.setGlobal();
@@ -77,11 +94,8 @@
         info: '',
         white: '',
         black: '',
-        textPrimary: '',
-        textRegular: '',
-        textSecondary: '',
-        textPlaceholder: '',
         borderColors,
+        textColors,
       }
     },
     watch: {
@@ -144,21 +158,7 @@ Neutral colors are for text, background and border colors. You can use different
 
 <el-row :gutter="12">
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box-group">
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textPrimary }"
-      >Primary Text<div class="value">{{textPrimary}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textRegular }"
-      >
-      Regular Text<div class="value">{{textRegular}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textSecondary }"
-      >Secondary Text<div class="value">{{textSecondary}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textPlaceholder }"
-      >Placeholder Text<div class="value">{{textPlaceholder}}</div></div>
-    </div>
+    <text-box :text-colors="textColors" />
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
     <border-box :border-colors="borderColors" />
diff --git a/website/docs/es/color.md b/website/docs/es/color.md
index 9e59313ebb..6859679b42 100644
--- a/website/docs/es/color.md
+++ b/website/docs/es/color.md
@@ -3,29 +3,45 @@
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
   import ColorBox from "../../components/demo/color/color-box.vue"
+  import TextBox from "../../components/demo/color/text-box.vue"
   const borderColors = [
     {
       name: 'Borde base',
       type: 'base',
-      color: '#DCDFE6',
     },
     {
       name: 'Borde ligero',
       type: 'light',
-      color: '#E4E7ED',
     },
     {
       name: 'Borde claro',
       type: 'lighter',
-      color: '#EBEEF5',
     },
     {
       name: 'Borde extra claro',
       type: 'extra-light',
-      color: '#F2F6FC',
     },
   ]
 
+  const textColors = [
+    {
+      name: 'Texto primario',
+      type: 'primary',
+    },
+    {
+      name: 'Texto regular',
+      type: 'regular',
+    },
+    {
+      name: 'Texto secundario',
+      type: 'secondary',
+    },
+    {
+      name: 'Texto de placeholder',
+      type: 'placeholder',
+    }
+  ]
+
   const varMap = {
     'primary': '$--color-primary',
     'success': '$--color-success',
@@ -56,6 +72,7 @@
     components: {
       BorderBox,
       ColorBox,
+      TextBox,
     },
     mounted() {
       this.setGlobal();
@@ -80,11 +97,8 @@
         info: '',
         white: '',
         black: '',
-        textPrimary: '',
-        textRegular: '',
-        textSecondary: '',
-        textPlaceholder: '',
         borderColors,
+        textColors,
       }
     },
     watch: {
@@ -147,21 +161,7 @@ Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes col
 
 <el-row :gutter="12">
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box-group">
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textPrimary }"
-      >Texto primario<div class="value">{{textPrimary}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textRegular }"
-      >
-      Texto regular<div class="value">{{textRegular}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textSecondary }"
-      >Texto secundario<div class="value">{{textSecondary}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textPlaceholder }"
-      >Texto de placeholder<div class="value">{{textPlaceholder}}</div></div>
-    </div>
+    <text-box :text-colors="textColors" />
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
     <border-box :border-colors="borderColors" />
diff --git a/website/docs/fr-FR/color.md b/website/docs/fr-FR/color.md
index 94b3976f04..53517dcb03 100644
--- a/website/docs/fr-FR/color.md
+++ b/website/docs/fr-FR/color.md
@@ -3,6 +3,7 @@
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
   import ColorBox from "../../components/demo/color/color-box.vue"
+  import TextBox from "../../components/demo/color/text-box.vue"
   const borderColors = [
     {
       name: 'Bordure de base',
@@ -25,6 +26,26 @@
       color: '#F2F6FC',
     },
   ]
+
+  const textColors = [
+    {
+      name: 'Texte principal',
+      type: 'primary',
+    },
+    {
+      name: 'Texte normal',
+      type: 'regular',
+    },
+    {
+      name: 'Texte secondaire',
+      type: 'secondary',
+    },
+    {
+      name: 'Texte de placeholder',
+      type: 'placeholder',
+    }
+  ]
+
   const varMap = {
     'primary': '$--color-primary',
     'success': '$--color-success',
@@ -33,10 +54,6 @@
     'info': '$--color-info',
     'white': '$--color-white',
     'black': '$--color-black',
-    'textPrimary': '$--color-text-primary',
-    'textRegular': '$--color-text-regular',
-    'textSecondary': '$--color-text-secondary',
-    'textPlaceholder': '$--color-text-placeholder',
   };
   const original = {
     primary: '#409EFF',
@@ -46,15 +63,12 @@
     info: '#909399',
     white: '#FFFFFF',
     black: '#000000',
-    textPrimary: '#303133',
-    textRegular: '#606266',
-    textSecondary: '#909399',
-    textPlaceholder: '#C0C4CC',
   }
   export default {
     components: {
       BorderBox,
       ColorBox,
+      TextBox,
     },
     mounted() {
       this.setGlobal();
@@ -79,11 +93,8 @@
         info: '',
         white: '',
         black: '',
-        textPrimary: '',
-        textRegular: '',
-        textSecondary: '',
-        textPlaceholder: '',
         borderColors,
+        textColors,
       }
     },
     watch: {
@@ -139,21 +150,7 @@ Les couleurs neutres sont les couleurs du fond, du texte et des bordures. Vous p
 
 <el-row :gutter="12">
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box-group">
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textPrimary }"
-      >Texte principal<div class="value">{{textPrimary}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textRegular }"
-      >
-      Texte normal<div class="value">{{textRegular}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textSecondary }"
-      >Texte secondaire<div class="value">{{textSecondary}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textPlaceholder }"
-      >Texte de placeholder<div class="value">{{textPlaceholder}}</div></div>
-    </div>
+    <text-box :text-colors="textColors" />
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
     <border-box :border-colors="borderColors" />
diff --git a/website/docs/jp/color.md b/website/docs/jp/color.md
index 366a96c74d..feabb30f8c 100644
--- a/website/docs/jp/color.md
+++ b/website/docs/jp/color.md
@@ -3,6 +3,7 @@
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
   import ColorBox from "../../components/demo/color/color-box.vue"
+  import TextBox from "../../components/demo/color/text-box.vue"
   const borderColors = [
     {
       type: 'base',
@@ -21,6 +22,26 @@
       color: '#F2F6FC',
     },
   ]
+
+  const textColors = [
+    {
+      name: 'Primary Text',
+      type: 'primary',
+    },
+    {
+      name: 'Regular Text',
+      type: 'regular',
+    },
+    {
+      name: 'Secondary Text',
+      type: 'secondary',
+    },
+    {
+      name: 'Placeholder Text',
+      type: 'placeholder',
+    }
+  ]
+
   const varMap = {
     'primary': '$--color-primary',
     'success': '$--color-success',
@@ -29,10 +50,6 @@
     'info': '$--color-info',
     'white': '$--color-white',
     'black': '$--color-black',
-    'textPrimary': '$--color-text-primary',
-    'textRegular': '$--color-text-regular',
-    'textSecondary': '$--color-text-secondary',
-    'textPlaceholder': '$--color-text-placeholder',
   };
   const original = {
     primary: '#409EFF',
@@ -42,15 +59,12 @@
     info: '#909399',
     white: '#FFFFFF',
     black: '#000000',
-    textPrimary: '#303133',
-    textRegular: '#606266',
-    textSecondary: '#909399',
-    textPlaceholder: '#C0C4CC',
   }
   export default {
     components: {
       BorderBox,
       ColorBox,
+      TextBox,
     },
     mounted() {
       this.setGlobal();
@@ -75,11 +89,8 @@
         info: '',
         white: '',
         black: '',
-        textPrimary: '',
-        textRegular: '',
-        textSecondary: '',
-        textPlaceholder: '',
         borderColors,
+        textColors,
       }
     },
     watch: {
@@ -142,21 +153,7 @@ Element Plus のメインカラーは明るく親しみやすいブルーです
 
 <el-row :gutter="12">
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box-group">
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textPrimary }"
-      >Primary Text<div class="value">{{textPrimary}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textRegular }"
-      >
-      Regular Text<div class="value">{{textRegular}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textSecondary }"
-      >Secondary Text<div class="value">{{textSecondary}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textPlaceholder }"
-      >Placeholder Text<div class="value">{{textPlaceholder}}</div></div>
-    </div>
+    <text-box :text-colors="textColors" />
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
     <border-box :border-colors="borderColors" />
diff --git a/website/docs/zh-CN/color.md b/website/docs/zh-CN/color.md
index 0d0fff00a7..7ac732969a 100644
--- a/website/docs/zh-CN/color.md
+++ b/website/docs/zh-CN/color.md
@@ -3,6 +3,7 @@
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
   import ColorBox from "../../components/demo/color/color-box.vue"
+  import TextBox from "../../components/demo/color/text-box.vue"
   const borderColors = [
     {
       name: '一级边框',
@@ -25,6 +26,26 @@
       color: '#F2F6FC',
     },
   ]
+
+  const textColors = [
+    {
+      name: '主要文字',
+      type: 'primary',
+    },
+    {
+      name: '常规文字',
+      type: 'regular',
+    },
+    {
+      name: '次要文字',
+      type: 'secondary',
+    },
+    {
+      name: '占位文字',
+      type: 'placeholder',
+    }
+  ]
+
   const varMap = {
     'primary': '$--color-primary',
     'success': '$--color-success',
@@ -33,10 +54,6 @@
     'info': '$--color-info',
     'white': '$--color-white',
     'black': '$--color-black',
-    'textPrimary': '$--color-text-primary',
-    'textRegular': '$--color-text-regular',
-    'textSecondary': '$--color-text-secondary',
-    'textPlaceholder': '$--color-text-placeholder',
   };
   const original = {
     primary: '#409EFF',
@@ -46,15 +63,12 @@
     info: '#909399',
     white: '#FFFFFF',
     black: '#000000',
-    textPrimary: '#303133',
-    textRegular: '#606266',
-    textSecondary: '#909399',
-    textPlaceholder: '#C0C4CC',
   }
   export default {
     components: {
       BorderBox,
       ColorBox,
+      TextBox,
     },
     mounted() {
       this.setGlobal();
@@ -79,11 +93,8 @@
         info: '',
         white: '',
         black: '',
-        textPrimary: '',
-        textRegular: '',
-        textSecondary: '',
-        textPlaceholder: '',
-        borderColors
+        borderColors,
+        textColors,
       }
     },
     watch: {
@@ -139,21 +150,7 @@ Element Plus 主要品牌颜色是鲜艳、友好的蓝色。
 
 <el-row :gutter="12">
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box-group">
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textPrimary }"
-      >主要文字<div class="value">{{textPrimary}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textRegular }"
-      >
-      常规文字<div class="value">{{textRegular}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textSecondary }"
-      >次要文字<div class="value">{{textSecondary}}</div></div>
-      <div class="demo-color-box demo-color-box-other"
-      :style="{ background: textPlaceholder }"
-      >占位文字<div class="value">{{textPlaceholder}}</div></div>
-    </div>
+    <text-box :text-colors="textColors" />
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
     <border-box :border-colors="borderColors" />