refactor(utils): use @ctrl/tinycolor instead of custom color.ts (#4682)

packages/components/button/src/button.vue

@@ -37,6 +37,7 @@
 <script lang="ts">
 import { computed, inject, defineComponent, Text, ref } from 'vue'
 import { useCssVar } from '@vueuse/core'
+import { TinyColor } from '@ctrl/tinycolor'
 import { ElIcon } from '@element-plus/components/icon'
 import {
   useDisabled,
@@ -47,8 +48,6 @@ import {
 import { buttonGroupContextKey } from '@element-plus/tokens'
 import { Loading } from '@element-plus/icons-vue'
 
-import { lighten, darken } from '@element-plus/utils/color'
-
 import { buttonEmits, buttonProps } from './button'
 
 export default defineComponent({
@@ -101,32 +100,36 @@ export default defineComponent({
       const buttonColor = props.color || typeColor.value
 
       if (buttonColor) {
-        const darkenBgColor = darken(buttonColor, 0.1)
+        const shadeBgColor = new TinyColor(buttonColor).shade(10).toString()
         if (props.plain) {
           styles = {
-            '--el-button-bg-color': lighten(buttonColor, 0.9),
+            '--el-button-bg-color': new TinyColor(buttonColor)
+              .tint(90)
+              .toString(),
             '--el-button-text-color': buttonColor,
             '--el-button-hover-text-color': 'var(--el-color-white)',
             '--el-button-hover-bg-color': buttonColor,
             '--el-button-hover-border-color': buttonColor,
-            '--el-button-active-bg-color': darkenBgColor,
+            '--el-button-active-bg-color': shadeBgColor,
             '--el-button-active-text-color': 'var(--el-color-white)',
-            '--el-button-active-border-color': darkenBgColor,
+            '--el-button-active-border-color': shadeBgColor,
           }
         } else {
-          const lightenBgColor = lighten(buttonColor)
+          const tintBgColor = new TinyColor(buttonColor).tint(20).toString()
           styles = {
             '--el-button-bg-color': buttonColor,
             '--el-button-border-color': buttonColor,
-            '--el-button-hover-bg-color': lightenBgColor,
-            '--el-button-hover-border-color': lightenBgColor,
-            '--el-button-active-bg-color': darkenBgColor,
-            '--el-button-active-border-color': darkenBgColor,
+            '--el-button-hover-bg-color': tintBgColor,
+            '--el-button-hover-border-color': tintBgColor,
+            '--el-button-active-bg-color': shadeBgColor,
+            '--el-button-active-border-color': shadeBgColor,
           }
         }
 
         if (buttonDisabled.value) {
-          const disabledButtonColor = lighten(buttonColor, 0.5)
+          const disabledButtonColor = new TinyColor(buttonColor)
+            .tint(50)
+            .toString()
           styles['--el-button-disabled-bg-color'] = disabledButtonColor
           styles['--el-button-disabled-border-color'] = disabledButtonColor
         }

packages/components/menu/src/use-menu-color.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { darken } from '@element-plus/utils/color'
+import { TinyColor } from '@ctrl/tinycolor'
 
 import type { MenuProps } from './menu'
 
@@ -9,7 +9,7 @@ export default function useMenuColor(props: MenuProps) {
     if (!color) {
       return ''
     } else {
-      return darken(color)
+      return new TinyColor(color).shade(20).toString()
     }
   })
   return menuBarColor

packages/element-plus/package.json

@@ -56,6 +56,7 @@
     "normalize-wheel-es": "^1.1.1"
   },
   "devDependencies": {
+    "@ctrl/tinycolor": "^3.4.0",
     "@types/node": "*",
     "csstype": "^2.6.0",
     "vue-router": "^4.0.0"

packages/utils/color.ts

@@ -1,44 +0,0 @@
-export function calcColorChannels(c: string) {
-  let rawColor = c.trim().replace('#', '')
-  if (/^[0-9a-fA-F]{3}$/.test(rawColor)) {
-    rawColor =
-      rawColor[0].repeat(2) + rawColor[1].repeat(2) + rawColor[2].repeat(2)
-  }
-  if (/^[0-9a-fA-F]{6}$/.test(rawColor)) {
-    return {
-      red: parseInt(rawColor.slice(0, 2), 16),
-      green: parseInt(rawColor.slice(2, 4), 16),
-      blue: parseInt(rawColor.slice(4, 6), 16),
-    }
-  }
-  return {
-    red: 255,
-    green: 255,
-    blue: 255,
-  }
-}
-
-export function mixColor(color: string, percent = 0.2) {
-  let { red, green, blue } = calcColorChannels(color)
-  if (percent > 0) {
-    // shade given color
-    red *= 1 - percent
-    green *= 1 - percent
-    blue *= 1 - percent
-  } else {
-    // tint given color
-    const value = Math.abs(percent)
-    red += (255 - red) * Math.abs(percent)
-    green += (255 - green) * value
-    blue += (255 - blue) * value
-  }
-  return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`
-}
-
-export function lighten(color: string, percent = 0.2) {
-  return mixColor(color, -percent)
-}
-
-export function darken(color: string, percent = 0.2) {
-  return mixColor(color, percent)
-}

pnpm-lock.yaml

@@ -186,6 +186,7 @@ importers:
 
   packages/element-plus:
     specifiers:
+      '@ctrl/tinycolor': ^3.4.0
       '@element-plus/icons-vue': ^0.2.2
       '@popperjs/core': ^2.10.2
       '@types/node': '*'
@@ -207,6 +208,7 @@ importers:
       memoize-one: 6.0.0
       normalize-wheel-es: 1.1.1
     devDependencies:
+      '@ctrl/tinycolor': 3.4.0
       '@types/node': 16.11.6
       csstype: 2.6.18
       vue-router: 4.0.12_vue@3.2.24
@@ -899,6 +901,11 @@ packages:
       shelljs: 0.8.4
     dev: true
 
+  /@ctrl/tinycolor/3.4.0:
+    resolution: {integrity: sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==}
+    engines: {node: '>=10'}
+    dev: true
+
   /@docsearch/css/1.0.0-alpha.28:
     resolution: {integrity: sha512-1AhRzVdAkrWwhaxTX6/R7SnFHz8yLz1W8I/AldlTrfbNvZs9INk1FZiEFTJdgHaP68nhgQNWSGlQiDiI3y2RYg==}
     dev: true