fix(docs): remove fixed variables & add color palette (#6216)

docs/.vitepress/vitepress/components/globals/main-color.vue

@@ -3,16 +3,17 @@
     <el-col :span="10" :xs="{ span: 12 }">
       <div class="demo-color-box" :style="{ background: primary }">
         Brand Color
-        <div class="value">#409EFF</div>
-        <div
-          class="bg-color-sub"
-          :style="{ background: tintColor(primary, 0.9) }"
-        >
+        <div class="value">{{ primary.toUpperCase() }}</div>
+        <div class="bg-color-sub" :style="{ background: primary }">
           <div
-            v-for="item in 9"
-            :key="item"
-            class="bg-blue-sub-item"
-            :style="{ background: tintColor(primary, (item + 1) / 10) }"
+            v-for="level in colorLevel"
+            :key="level"
+            class="bg-blue-sub-item hover:(cursor-pointer shadow)"
+            :style="{
+              width: `${100 / 10}%`,
+              background: getColorValue('primary-' + level),
+            }"
+            @click="copyColor('primary-' + level)"
           ></div>
         </div>
       </div>
@@ -20,34 +21,13 @@
   </el-row>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { useCssVar } from '@vueuse/core'
+import { getColorValue, useCopyColor } from '../../utils'
 
-export default defineComponent({
-  setup() {
-    const primary = ref('#409EFF')
-    const tintColor = (c: string, tint: number) => {
-      const color = c.replace('#', '')
-      let red = parseInt(color.slice(0, 2), 16)
-      let green = parseInt(color.slice(2, 4), 16)
-      let blue = parseInt(color.slice(4, 6), 16)
+const primary = useCssVar('--el-color-primary')
+const colorLevel = [...Array(10).keys()].map((i) => `light-${i + 1}`)
+colorLevel.unshift('dark-2')
 
-      if (tint === 0) {
-        // when primary color is in its rgb space
-        return [red, green, blue].join(',')
-      } else {
-        red += Math.round(tint * (255 - red))
-        green += Math.round(tint * (255 - green))
-        blue += Math.round(tint * (255 - blue))
-
-        return `#${red.toString(16)}${green.toString(16)}${blue.toString(16)}`
-      }
-    }
-
-    return {
-      tintColor,
-      primary,
-    }
-  },
-})
+const { copyColor } = useCopyColor()
 </script>

docs/.vitepress/vitepress/components/globals/secondary-colors.vue

@@ -1,57 +1,38 @@
+<script lang="ts" setup>
+import { getColorValue, useCopyColor } from '../../utils'
+
+const colorsType = ['success', 'warning', 'danger', 'info']
+
+const colorLevel = [3, 5, 7, 8, 9].map((item) => `light-${item}`)
+colorLevel.unshift('dark-2')
+
+const { copyColor } = useCopyColor()
+</script>
+
 <template>
   <el-row :gutter="12">
-    <el-col v-for="type in colorsType" :key="type" :span="6" :xs="{ span: 12 }">
+    <el-col
+      v-for="(type, i) in colorsType"
+      :key="i"
+      :span="6"
+      :xs="{ span: 12 }"
+    >
       <div class="demo-color-box" :style="{ background: getColorValue(type) }">
         {{ type.charAt(0).toUpperCase() + type.slice(1) }}
         <div class="value">{{ getColorValue(type).toUpperCase() }}</div>
         <div class="bg-color-sub">
           <div
-            v-for="(_, key) in Array(2)"
+            v-for="(level, key) in colorLevel"
             :key="key"
-            class="bg-secondary-sub-item"
+            class="bg-secondary-sub-item transition hover:(cursor-pointer shadow)"
             :style="{
-              background: tintColor(getColorValue(type), (key + 8) / 10),
+              width: `${100 / 6}%`,
+              background: getColorValue(type + '-' + level),
             }"
+            @click="copyColor(type + '-' + level)"
           ></div>
         </div>
       </div>
     </el-col>
   </el-row>
 </template>
-
-<script lang="ts">
-import { defineComponent, markRaw } from 'vue'
-
-export default defineComponent({
-  setup() {
-    const tintColor = (c: string, tint: number) => {
-      const color = c.trim().slice(1)
-      let red = parseInt(color.slice(0, 2), 16)
-      let green = parseInt(color.slice(2, 4), 16)
-      let blue = parseInt(color.slice(4, 6), 16)
-
-      if (tint === 0) {
-        // when primary color is in its rgb space
-        return [red, green, blue].join(',')
-      } else {
-        red += Math.round(tint * (255 - red))
-        green += Math.round(tint * (255 - green))
-        blue += Math.round(tint * (255 - blue))
-        return `#${red.toString(16)}${green.toString(16)}${blue.toString(16)}`
-      }
-    }
-
-    const getColorValue = (type: string) => {
-      return getComputedStyle(document.documentElement).getPropertyValue(
-        `--el-color-${type}`
-      )
-    }
-
-    return {
-      colorsType: markRaw(['success', 'warning', 'danger', 'info']),
-      getColorValue,
-      tintColor,
-    }
-  },
-})
-</script>

docs/.vitepress/vitepress/styles/code.scss

@@ -46,7 +46,7 @@ html.dark {
   --prism-function: #82aaff;
   --prism-deleted: #bc6066;
   --prism-class: #54b1bf;
-  --prism-builtin: var(--el-color-primary-light-2);
+  --prism-builtin: var(--el-color-primary-light-3);
   --prism-property: #c792ea;
   --prism-namespace: #db889a;
   --prism-punctuation: #89ddff;

docs/.vitepress/vitepress/utils/colors.ts

@@ -0,0 +1,36 @@
+import { ref, getCurrentInstance } from 'vue'
+import { useClipboard } from '@vueuse/core'
+
+export const getColorValue = (type: string) => {
+  const color = getComputedStyle(document.documentElement).getPropertyValue(
+    `--el-color-${type}`
+  )
+  return color
+}
+
+// copy color
+
+export const useCopyColor = () => {
+  const source = ref('')
+  const { copy, isSupported } = useClipboard({ source })
+
+  const vm = getCurrentInstance()!
+  const copyColor = async (colorType: string) => {
+    const colorValue = getColorValue(colorType)
+    source.value = colorValue
+    const { $message } = vm.appContext.config.globalProperties
+    if (!isSupported) {
+      $message.error('Copy failed')
+    }
+    try {
+      await copy()
+      $message.success(`--el-color-${colorType}: ${source.value}`)
+    } catch (e: any) {
+      $message.error(e.message)
+    }
+  }
+
+  return {
+    copyColor,
+  }
+}

docs/.vitepress/vitepress/utils/index.ts

@@ -8,6 +8,8 @@ import { inBrowser } from 'vitepress'
 
 import type { Route } from 'vitepress'
 
+export * from './colors'
+
 export {
   isArray,
   isNullish,

docs/en-US/component/color.md

@@ -26,7 +26,6 @@ Element Plus uses a specific set of palettes to specify colors to provide a cons
     position: absolute;
 
     .bg-blue-sub-item {
-      width: 11.1111111%;
       height: 100%;
       display: inline-block;
 
@@ -36,7 +35,6 @@ Element Plus uses a specific set of palettes to specify colors to provide a cons
     }
 
     .bg-secondary-sub-item {
-      width: 50%;
       height: 100%;
       display: inline-block;
       &:first-child {

docs/examples/button/basic.vue

@@ -47,14 +47,3 @@ import {
   Delete,
 } from '@element-plus/icons-vue'
 </script>
-
-<style>
-:root {
-  --el-color-primary: #409eff;
-  --el-color-success: #67c23a;
-  --el-color-warning: #e6a23c;
-  --el-color-danger: #f56c6c;
-  --el-color-error: #f56c6c;
-  --el-color-info: #909399;
-}
-</style>

docs/examples/button/disabled.vue

@@ -17,14 +17,3 @@
     <el-button type="danger" plain disabled>Danger</el-button>
   </el-row>
 </template>
-
-<style>
-:root {
-  --el-color-primary: #409eff;
-  --el-color-success: #67c23a;
-  --el-color-warning: #e6a23c;
-  --el-color-danger: #f56c6c;
-  --el-color-error: #f56c6c;
-  --el-color-info: #909399;
-}
-</style>

docs/examples/button/group.vue

@@ -22,14 +22,3 @@ import {
   ArrowRight,
 } from '@element-plus/icons-vue'
 </script>
-
-<style>
-:root {
-  --el-color-primary: #409eff;
-  --el-color-success: #67c23a;
-  --el-color-warning: #e6a23c;
-  --el-color-danger: #f56c6c;
-  --el-color-error: #f56c6c;
-  --el-color-info: #909399;
-}
-</style>

docs/examples/button/icon.vue

@@ -12,9 +12,3 @@
 <script setup lang="ts">
 import { Edit, Share, Delete, Search, Upload } from '@element-plus/icons-vue'
 </script>
-
-<style>
-:root {
-  --el-color-primary: #409eff;
-}
-</style>

docs/examples/button/loading.vue

@@ -29,9 +29,6 @@ import { Eleme } from '@element-plus/icons-vue'
 </script>
 
 <style scoped>
-:root {
-  --el-color-primary: #409eff;
-}
 .el-button .custom-loading .circular {
   margin-right: 6px;
   width: 18px;

docs/examples/descriptions/customized-style.vue

@@ -26,9 +26,9 @@
 </template>
 <style scoped>
 .my-label {
-  background: var(--el-color-success-lighter);
+  background: var(--el-color-success-light-9);
 }
 .my-content {
-  background: var(--el-color-danger-lighter);
+  background: var(--el-color-danger-light-9);
 }
 </style>

docs/examples/infinite-scroll/disable-loading.vue

@@ -43,7 +43,7 @@ const load = () => {
   align-items: center;
   justify-content: center;
   height: 50px;
-  background: var(--el-color-danger-lighter);
+  background: var(--el-color-danger-light-9);
   color: var(--el-color-danger);
 }
 .infinite-list-wrapper .list-item + .list-item {

docs/examples/scrollbar/horizontal-scroll.vue

@@ -22,7 +22,7 @@
   margin: 10px;
   text-align: center;
   border-radius: 4px;
-  background: var(--el-color-danger-lighter);
+  background: var(--el-color-danger-light-9);
   color: var(--el-color-danger);
 }
 </style>

docs/examples/table/with-status.vue

@@ -58,9 +58,9 @@ const tableData: User[] = [
 
 <style>
 .el-table .warning-row {
-  --el-table-tr-bg-color: var(--el-color-warning-lighter);
+  --el-table-tr-bg-color: var(--el-color-warning-light-9);
 }
 .el-table .success-row {
-  --el-table-tr-bg-color: var(--el-color-success-lighter);
+  --el-table-tr-bg-color: var(--el-color-success-light-9);
 }
 </style>

packages/theme-chalk/src/button.scss

@@ -230,7 +230,7 @@ $button-icon-span-gap: map.merge(
 
     &:hover,
     &:focus {
-      color: var(--el-color-primary-light-2);
+      color: var(--el-color-primary-light-3);
       border-color: transparent;
       background-color: transparent;
     }

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

@@ -67,7 +67,7 @@
       color: var(--el-checkbox-button-checked-text-color);
       background-color: var(--el-checkbox-button-checked-bg-color);
       border-color: var(--el-checkbox-button-checked-border-color);
-      box-shadow: -1px 0 0 0 var(--el-color-primary-light-4);
+      box-shadow: -1px 0 0 0 var(--el-color-primary-light-5);
     }
     &:first-child .#{$namespace}-checkbox-button__inner {
       border-left-color: var(--el-checkbox-button-checked-border-color);

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

@@ -47,6 +47,7 @@ $color-error: map.get($colors, 'error', 'base') !default;
 $color-info: map.get($colors, 'info', 'base') !default;
 
 // https://sass-lang.com/documentation/values/maps#immutability
+// mix color with white
 @mixin set-color-type-light($type, $number) {
   $colors: map.deep-merge(
     (
@@ -63,6 +64,23 @@ $color-info: map.get($colors, 'info', 'base') !default;
   ) !global;
 }
 
+// mix color with black
+@mixin set-color-type-dark($type, $number) {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        'dark-#{$number}':
+          mix(
+            $color-black,
+            map.get($colors, $type, 'base'),
+            math.percentage(math.div($number, 10))
+          ),
+      ),
+    ),
+    $colors
+  ) !global;
+}
+
 // $colors.primary.light-i
 // --el-color-primary-light-i
 // 10% 53a8ff
@@ -79,6 +97,10 @@ $color-info: map.get($colors, 'info', 'base') !default;
     @include set-color-type-light($type, $i);
   }
 }
+// --el-color-primary-dark-2
+@each $type in $types {
+  @include set-color-type-dark($type, 2);
+}
 
 $text-color: () !default;
 $text-color: map.merge(
@@ -833,7 +855,7 @@ $dropdown: map.merge(
   (
     'menu-box-shadow': var(--el-box-shadow-light),
     'menuItem-hover-fill': var(--el-color-primary-light-9),
-    'menuItem-hover-color': var(--el-color-primary-light-2),
+    'menuItem-hover-color': var(--el-color-primary-light-3),
     'menu-index': 10,
   ),
   $dropdown

packages/theme-chalk/src/mixins/_button.scss

@@ -19,7 +19,7 @@
     &:hover,
     &:focus,
     &:active {
-      color: map.get($colors, $type, 'light-4');
+      color: map.get($colors, $type, 'light-5');
       background-color: map.get($colors, $type, 'light-9');
       border-color: map.get($colors, $type, 'light-8');
     }

packages/theme-chalk/src/mixins/_var.scss

@@ -8,14 +8,10 @@
 
 @mixin set-css-color-type($type) {
   --el-color-#{$type}: #{map.get($colors, $type, 'base')};
-  --el-color-#{$type}-light: #{map.get($colors, $type, 'light-8')};
-  --el-color-#{$type}-lighter: #{map.get($colors, $type, 'light-9')};
-
-  // need to be considered
-  // may be we do not need add it to css var
-  // @each $i in (2, 4, 5, 6, 8, 9) {
-  //   @include set-css-color-type-light($type, $i);
-  // }
+  @each $i in (3, 5, 7, 8, 9) {
+    @include set-css-color-type-light($type, $i);
+  }
+  --el-color-#{$type}-dark-2: #{map.get($colors, $type, 'dark-2')};
 }
 
 @mixin set-css-var-type($name, $type, $variables) {

packages/theme-chalk/src/reset.scss

@@ -15,7 +15,7 @@ a {
 
   &:hover,
   &:focus {
-    color: var(--el-color-primary-light-2);
+    color: var(--el-color-primary-light-3);
   }
 
   &:active {

packages/theme-chalk/src/var.scss

@@ -22,6 +22,7 @@
   @for $i from 1 through 9 {
     @include set-css-color-type-light('primary', $i);
   }
+  --el-color-primary-dark-2: #{map.get($colors, 'primary', 'dark-2')};
 
   // --el-color-#{$type}
   // --el-color-#{$type}-light-{$i}