style: Modify the color of Popover arrow to ensure that the configuration can take effect through DSM (#2806)

packages/semi-foundation/popover/popover.scss

@@ -88,5 +88,15 @@ $module-icon: #{$module}-icon-arrow;
     }
 }
 
+.#{$module}-icon-arrow {
+    path:nth-child(1) {
+        fill: $color-popover-arrow-border;
+    }
+  
+    path:nth-child(2) {
+        fill: $color-popover-arrow-bg;
+    }
+}
+
 @import '../tooltip/arrow.scss';
 @import "./rtl.scss";

packages/semi-foundation/popover/variables.scss

@@ -2,6 +2,8 @@
 $color-tooltip_arrow-icon-default: unset; // 箭头图标
 $color-popover-bg-default: var(--semi-color-bg-3); // 默认背景色
 $color-popover-border-default: var(--semi-color-border); // 默认描边颜色
+$color-popover-arrow-border: var(--semi-color-border); // 箭头描边颜色
+$color-popover-arrow-bg: var(--semi-color-bg-3); // 箭头默认背景色
 
 // Width/Height
 $width-popover_arrow: 24px; // 水平箭头宽度 ignore-semi-css-trans

packages/semi-ui/popover/Arrow.tsx

@@ -16,16 +16,16 @@ const Arrow: React.FC<ArrowProps> = (props = {}) => {
     const isVertical = position.indexOf('top') === 0 || position.indexOf('bottom') === 0;
     const cls = classnames(className, cssClasses.ARROW);
 
-    const borderOpacity = get(arrowStyle, 'borderOpacity', strings.DEFAULT_ARROW_STYLE.borderOpacity);
+    const borderOpacity = get(arrowStyle, 'borderOpacity');
     const bgColor = get(
         arrowStyle,
         'backgroundColor',
-        get(popStyle, 'backgroundColor', strings.DEFAULT_ARROW_STYLE.backgroundColor)
+        get(popStyle, 'backgroundColor')
     );
     const borderColor = get(
         arrowStyle,
         'borderColor',
-        get(popStyle, 'borderColor', strings.DEFAULT_ARROW_STYLE.borderColor)
+        get(popStyle, 'borderColor')
     );
 
     const wrapProps = {
@@ -40,19 +40,23 @@ const Arrow: React.FC<ArrowProps> = (props = {}) => {
         <svg {...wrapProps}>
             <path
                 d="M0 0.5L0 1.5C4 1.5, 5.5 3, 7.5 5S10,8 12,8S14.5 7, 16.5 5S20,1.5 24,1.5L24 0.5L0 0.5z"
-                fill={borderColor}
-                opacity={borderOpacity}
+                style={{ fill: borderColor, opacity: borderOpacity }}
+            />
+            <path 
+                d="M0 0L0 1C4 1, 5.5 2, 7.5 4S10,7 12,7S14.5  6, 16.5 4S20,1 24,1L24 0L0 0z" 
+                style={{ fill: bgColor }}
             />
-            <path d="M0 0L0 1C4 1, 5.5 2, 7.5 4S10,7 12,7S14.5  6, 16.5 4S20,1 24,1L24 0L0 0z" fill={bgColor} />
         </svg>
     ) : (
         <svg {...wrapProps}>
             <path
                 d="M0.5 0L1.5 0C1.5 4, 3 5.5, 5 7.5S8,10 8,12S7 14.5, 5 16.5S1.5,20 1.5,24L0.5 24L0.5 0z"
-                fill={borderColor}
-                opacity={borderOpacity}
+                style={{ fill: borderColor, opacity: borderOpacity }}
+            />
+            <path 
+                d="M0 0L1 0C1 4, 2 5.5, 4 7.5S7,10 7,12S6 14.5, 4 16.5S1,20 1,24L0 24L0 0z" 
+                style={{ fill: bgColor }}
             />
-            <path d="M0 0L1 0C1 4, 2 5.5, 4 7.5S7,10 7,12S6 14.5, 4 16.5S1,20 1,24L0 24L0 0z" fill={bgColor} />
         </svg>
     );
 };

packages/semi-ui/popover/_story/popover.stories.jsx

@@ -681,4 +681,38 @@ export const FixNestedPopover = () => {
             </Popover>
         </div>
     );
-}
+}
+
+export const CustomBg = () => {
+  return (
+      <div id='popup-parent' style={{ position: 'relative' }}>
+          <Popover
+              content={
+                  <article style={{ padding: 4 }}>
+                      Hi, Semi UI Popover.
+                  </article>
+              }
+              trigger='custom'
+              visible
+              position='right'
+              showArrow
+              style={{
+                  backgroundColor: 'rgba(var(--semi-blue-4),1)',
+                  borderColor: 'rgba(var(--semi-blue-4),1)',
+                  color: 'var(--semi-color-white)',
+                  borderWidth: 1,
+                  borderStyle: 'solid',
+              }}
+          >
+              <Tag
+                  style={{
+                      backgroundColor: 'rgba(var(--semi-blue-4),1)',
+                      color: 'var(--semi-color-white)'
+                  }}
+              >
+                  Colorful Popover
+              </Tag>
+          </Popover>
+      </div>
+  );
+}