From 3fa3e9ff6b4174a41b4cac4896328a7e474663b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Sun, 12 Dec 2021 16:14:42 +0800
Subject: [PATCH] refactor(utils): use @ctrl/tinycolor instead of custom
 color.ts (#4682)

---
 packages/components/button/src/button.vue     | 27 +++++++-----
 .../components/menu/src/use-menu-color.ts     |  4 +-
 packages/element-plus/package.json            |  1 +
 packages/utils/color.ts                       | 44 -------------------
 pnpm-lock.yaml                                |  7 +++
 5 files changed, 25 insertions(+), 58 deletions(-)
 delete mode 100644 packages/utils/color.ts

diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index 4ef8b0b75b..e703b62655 100644
--- a/packages/components/button/src/button.vue
+++ b/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
         }
diff --git a/packages/components/menu/src/use-menu-color.ts b/packages/components/menu/src/use-menu-color.ts
index 102cc37731..b7631bb58c 100644
--- a/packages/components/menu/src/use-menu-color.ts
+++ b/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
diff --git a/packages/element-plus/package.json b/packages/element-plus/package.json
index 13b4ab9718..10303c5cbb 100644
--- a/packages/element-plus/package.json
+++ b/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"
diff --git a/packages/utils/color.ts b/packages/utils/color.ts
deleted file mode 100644
index 48dbb639bb..0000000000
--- a/packages/utils/color.ts
+++ /dev/null
@@ -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)
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 67c11f6a9a..338ab945cd 100644
--- a/pnpm-lock.yaml
+++ b/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