From 85202c76764cc645b0e2a4c630d3fd3cb7ad25c7 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 20 Nov 2020 14:19:54 +0800
Subject: [PATCH] style(Popover): add less vars

---
 src/popover/index.less | 28 ++++++++++++++--------------
 src/style/var.less     | 15 +++++++++++++++
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/popover/index.less b/src/popover/index.less
index 7c81be84d..a97e0ec6a 100644
--- a/src/popover/index.less
+++ b/src/popover/index.less
@@ -17,12 +17,12 @@
     height: 0;
     border-color: transparent;
     border-style: solid;
-    border-width: 6px;
+    border-width: @popover-arrow-size;
   }
 
   &__content {
     overflow: hidden;
-    border-radius: @border-radius-lg;
+    border-radius: @popover-border-radius;
   }
 
   &__action {
@@ -30,10 +30,10 @@
     display: flex;
     align-items: center;
     box-sizing: border-box;
-    width: 128px;
-    height: 44px;
+    width: @popover-action-width;
+    height: @popover-action-height;
     padding: 0 @padding-md;
-    font-size: @font-size-md;
+    font-size: @popover-action-font-size;
     line-height: @line-height-md;
 
     &:last-child {
@@ -52,7 +52,7 @@
 
     &-icon {
       margin-right: @padding-xs;
-      font-size: 20px;
+      font-size: @popover-action-icon-size;
     }
 
     &--with-icon {
@@ -195,15 +195,15 @@
   }
 
   &--light {
-    color: @text-color;
+    color: @popover-light-text-color;
 
     .van-popover__content {
-      background-color: @white;
+      background-color: @popover-light-background-color;
       box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
     }
 
     .van-popover__arrow {
-      color: @white;
+      color: @popover-light-background-color;
     }
 
     .van-popover__action {
@@ -212,7 +212,7 @@
       }
 
       &--disabled {
-        color: @gray-5;
+        color: @popover-light-action-disabled-text-color;
 
         &:active {
           background-color: transparent;
@@ -222,14 +222,14 @@
   }
 
   &--dark {
-    color: @white;
+    color: @popover-dark-text-color;
 
     .van-popover__content {
-      background-color: #4a4a4a;
+      background-color: @popover-dark-background-color;
     }
 
     .van-popover__arrow {
-      color: #4a4a4a;
+      color: @popover-dark-background-color;
     }
 
     .van-popover__action {
@@ -238,7 +238,7 @@
       }
 
       &--disabled {
-        color: @gray-6;
+        color: @popover-dark-action-disabled-text-color;
 
         &:active {
           background-color: transparent;
diff --git a/src/style/var.less b/src/style/var.less
index df5fe7ffb..9443f69a3 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -555,6 +555,21 @@
 @picker-loading-icon-color: @blue;
 @picker-loading-mask-color: rgba(255, 255, 255, 0.9);
 
+// Popover
+@popover-arrow-size: 6px;
+@popover-border-radius: @border-radius-lg;
+@popover-action-width: 128px;
+@popover-action-height: 44px;
+@popover-action-font-size: @font-size-md;
+@popover-action-line-height: @line-height-md;
+@popover-action-icon-size: 20px;
+@popover-light-text-color: @text-color;
+@popover-light-background-color: @white;
+@popover-light-action-disabled-text-color: @gray-5;
+@popover-dark-text-color: @white;
+@popover-dark-background-color: #4a4a4a;
+@popover-dark-action-disabled-text-color: @gray-6;
+
 // Popup
 @popup-background-color: @white;
 @popup-transition: transform @animation-duration-base;