Use 50% opacity version of series color for trendling

frontend/src/metabase/visualizations/components/LineAreaBarChart.css

@@ -196,6 +196,5 @@
 }
 
 .LineAreaBarChart .dc-chart .trend .line {
-  stroke: var(--color-error);
   stroke-dasharray: 5, 5;
 }

frontend/src/metabase/visualizations/lib/LineAreaBarPostRender.js

@@ -240,7 +240,7 @@ function onRenderVoronoiHover(chart) {
     .order();
 }
 
-function onRenderCleanupGoal(chart, onGoalHover, isSplitAxis) {
+function onRenderCleanupGoalAndTrend(chart, onGoalHover, isSplitAxis) {
   // remove dots
   chart.selectAll(".goal .dot, .trend .dot").remove();
 
@@ -368,7 +368,7 @@ function onRender(chart, onGoalHover, isSplitAxis, isStacked) {
   onRenderSetLineWidth(chart);
   onRenderEnableDots(chart);
   onRenderVoronoiHover(chart);
-  onRenderCleanupGoal(chart, onGoalHover, isSplitAxis); // do this before hiding x-axis
+  onRenderCleanupGoalAndTrend(chart, onGoalHover, isSplitAxis); // do this before hiding x-axis
   onRenderHideDisabledLabels(chart);
   onRenderHideDisabledAxis(chart);
   onRenderHideBadAxis(chart);

frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js

@@ -6,6 +6,7 @@ import dc from "dc";
 import _ from "underscore";
 import { updateIn } from "icepick";
 import { t } from "c-3po";
+import { alpha } from "metabase/lib/colors";
 
 import {
   computeSplit,
@@ -627,6 +628,8 @@ function addTrendlineChart(
       .reduce((p, d) => d[1], (p, d) => p, () => 0);
     const trendIndex = charts.length;
 
+    const color = alpha(settings.series(series[0]).color, 0.5);
+
     const trendChart = dc
       .lineChart(parent)
       .dimension(trendDimension)
@@ -637,7 +640,8 @@ function addTrendlineChart(
           .select(".sub._" + trendIndex)
           .classed("sub", false)
           .classed("trend", true);
-      });
+      })
+      .colors([color]);
     charts.push(trendChart);
   }
 }