refactor(color): migrate all color-text var & simplify color docs (#2656)

2025-01-06 10:38:31 +08:00 · 2021-07-25 00:01:34 +08:00 · 2021-07-25 00:01:34 +08:00 · 6166d7ff21
commit 6166d7ff21
parent 80a44d87a5
42 changed files with 296 additions and 256 deletions
--- 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;
--- 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;
        }
      }
--- 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) {
--- 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
 --------------------------*/
--- 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;
--- 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 {
--- 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);
      }
    }

--- 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;
--- 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;
--- 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;
--- 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;
    }
  }
--- 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);
      }
    }

--- 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 {
--- 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) {
--- 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,
--- 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;
--- 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;

--- 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;
  }

--- 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;

--- 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);
  }
 }

--- 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);
  }
 }
--- 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;
--- 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;
    }
  }
--- 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;
--- 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;
      }
    }
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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;
--- 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;
--- 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);

--- 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);
  }

--- 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 {
--- 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);
  }
--- 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>
--- a/website/components/demo/color/text-box.vue
+++ 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>
--- 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" />
--- 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" />
--- 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" />
--- 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" />
--- 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" />