From c5ded77c7be2dd8fcfa7eae24817fb18c3a29bf3 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Mon, 21 Feb 2022 23:11:32 +0800
Subject: [PATCH] fix: support --ripple-color

---
 packages/varlet-ui/src/ripple/docs/en-US.md | 1 +
 packages/varlet-ui/src/ripple/docs/zh-CN.md | 1 +
 packages/varlet-ui/src/ripple/index.ts      | 2 +-
 packages/varlet-ui/src/ripple/ripple.less   | 3 +++
 4 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/varlet-ui/src/ripple/docs/en-US.md b/packages/varlet-ui/src/ripple/docs/en-US.md
index 45fa72da9d5..befd2d36752 100644
--- a/packages/varlet-ui/src/ripple/docs/en-US.md
+++ b/packages/varlet-ui/src/ripple/docs/en-US.md
@@ -45,4 +45,5 @@ Here are the CSS variables used by the component, Styles can be customized using
 | Variable | Default |
 | --- | --- |
 | `--ripple-cubic-bezier` | `cubic-bezier(0.68, 0.01, 0.62, 0.6)` |
+| `--ripple-color` | `currentColor` |
 
diff --git a/packages/varlet-ui/src/ripple/docs/zh-CN.md b/packages/varlet-ui/src/ripple/docs/zh-CN.md
index 211dfc39a9a..00647c706d1 100644
--- a/packages/varlet-ui/src/ripple/docs/zh-CN.md
+++ b/packages/varlet-ui/src/ripple/docs/zh-CN.md
@@ -45,3 +45,4 @@ createApp().use(Ripple)
 | 变量名 | 默认值 |
 | --- | --- |
 | `--ripple-cubic-bezier` | `cubic-bezier(0.68, 0.01, 0.62, 0.6)` |
+| `--ripple-color` | `currentColor` |
diff --git a/packages/varlet-ui/src/ripple/index.ts b/packages/varlet-ui/src/ripple/index.ts
index 36b45e2889a..fab0a8e43e2 100644
--- a/packages/varlet-ui/src/ripple/index.ts
+++ b/packages/varlet-ui/src/ripple/index.ts
@@ -73,7 +73,7 @@ function createRipple(this: RippleHTMLElement, event: TouchEvent) {
     ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`
     ripple.style.width = `${size}px`
     ripple.style.height = `${size}px`
-    ripple.style.backgroundColor = _ripple.color ?? 'currentColor'
+    _ripple.color && (ripple.style.backgroundColor = _ripple.color)
     ripple.dataset.createdAt = String(performance.now())
 
     setStyles(this)
diff --git a/packages/varlet-ui/src/ripple/ripple.less b/packages/varlet-ui/src/ripple/ripple.less
index 3dc6e33a634..382a16cd882 100644
--- a/packages/varlet-ui/src/ripple/ripple.less
+++ b/packages/varlet-ui/src/ripple/ripple.less
@@ -1,7 +1,9 @@
 @ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
+@ripple-color: currentColor;
 
 :root {
   --ripple-cubic-bezier: @ripple-cubic-bezier;
+  --ripple-color: @ripple-color;
 }
 
 .var-ripple {
@@ -14,4 +16,5 @@
   will-change: transform, opacity;
   pointer-events: none;
   z-index: 100;
+  background-color: var(--ripple-color);
 }