fix(Pie- & DonutChart): improve label and legend text contrast (#8521)

Fixes #8395

Author: Lukas742

packages/charts/src/components/PieChart/PieChart.module.css

@@ -4,10 +4,11 @@
     outline: none;
   }
 
+  :global(.recharts-legend-item-text) {
+    color: var(--sapTextColor) !important;
+  }
+
   [data-active-legend] {
     background: color-mix(in srgb, var(--sapSelectedColor), transparent 87%);
-    :global(.recharts-legend-item-text) {
-      color: var(--sapTextColor) !important;
-    }
   }
 }

packages/charts/src/components/PieChart/index.tsx

@@ -154,7 +154,15 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
     }
 
     return (
-      <RechartsText {...props} alignmentBaseline="middle" className="recharts-pie-label-text">
+      <RechartsText
+        {...props}
+        alignmentBaseline="middle"
+        className="recharts-pie-label-text"
+        style={{ paintOrder: 'stroke fill' }}
+        stroke="var(--sapTextColor)"
+        strokeWidth={0.5}
+        strokeLinejoin="round"
+      >
         {measure.formatter(props.value)}
       </RechartsText>
     );
@@ -237,10 +245,29 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
             <>
               <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
               <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
-              <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill={fill}>
+              <text
+                x={ex + (cos >= 0 ? 1 : -1) * 12}
+                y={ey}
+                textAnchor={textAnchor}
+                fill={fill}
+                style={{ paintOrder: 'stroke fill' }}
+                stroke="var(--sapTextColor)"
+                strokeWidth={0.5}
+                strokeLinejoin="round"
+              >
                 {measure.formatter(value)}
               </text>
-              <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill={fill}>
+              <text
+                x={ex + (cos >= 0 ? 1 : -1) * 12}
+                y={ey}
+                dy={18}
+                textAnchor={textAnchor}
+                fill={fill}
+                style={{ paintOrder: 'stroke fill' }}
+                stroke="var(--sapTextColor)"
+                strokeWidth={0.5}
+                strokeLinejoin="round"
+              >
                 {`(${(percent * 100).toFixed(2)}%)`}
               </text>
             </>
@@ -317,7 +344,11 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
           activeShape={chartConfig.activeSegment != null && renderActiveShape}
           rootTabIndex={-1}
         >
-          {centerLabel && <RechartsLabel position="center">{centerLabel}</RechartsLabel>}
+          {centerLabel && (
+            <RechartsLabel position="center" fill="var(--sapTextColor)">
+              {centerLabel}
+            </RechartsLabel>
+          )}
           {dataset &&
             dataset.map((data, index) => (
               <Cell