fix: restrict custom data label colors (#10205)

To ensure a good contrast between the background color of a series and
its data label color, a custom color is calculated and set to the data
labels. That works well for some types of charts where the labels are
placed within an area colored by the series color, like for
Organization, Gantt, and Treemap. For other types, however, it can lead
to unexpected results, when the data labels are placed in an area
covered by the chart's background, when `useHTML` is used.

This change restricts the setting of these custom colors to the types
mentioned above, where they are expected to work well.

Fixes #9988

Author: DiegoCardoso

packages/charts/src/styles/vaadin-chart-base-styles.js

@@ -359,100 +359,110 @@ export const chartStyles = css`
   :where([styled-mode]) .highcharts-color-0 {
     fill: var(--_color-0);
     stroke: var(--_color-0);
-    color: var(--_color-0-label);
   }
 
   :where([styled-mode]) .highcharts-color-1 {
     fill: var(--_color-1);
     stroke: var(--_color-1);
-    color: var(--_color-1-label);
   }
 
   :where([styled-mode]) .highcharts-color-2 {
     fill: var(--_color-2);
     stroke: var(--_color-2);
-    color: var(--_color-2-label);
   }
 
   :where([styled-mode]) .highcharts-color-3 {
     fill: var(--_color-3);
     stroke: var(--_color-3);
-    color: var(--_color-2-label);
   }
 
   :where([styled-mode]) .highcharts-color-4 {
     fill: var(--_color-4);
     stroke: var(--_color-4);
-    color: var(--_color-4-label);
   }
 
   :where([styled-mode]) .highcharts-color-5 {
     fill: var(--_color-5);
     stroke: var(--_color-5);
-    color: var(--_color-5-label);
   }
 
   :where([styled-mode]) .highcharts-color-6 {
     fill: var(--_color-6);
     stroke: var(--_color-6);
-    color: var(--_color-6-label);
   }
 
   :where([styled-mode]) .highcharts-color-7 {
     fill: var(--_color-7);
-    stroke: var(--_color-7);
     color: var(--_color-7-label);
   }
 
   :where([styled-mode]) .highcharts-color-8 {
     fill: var(--_color-8);
     stroke: var(--_color-8);
-    color: var(--_color-8-label);
   }
 
   :where([styled-mode]) .highcharts-color-9 {
     fill: var(--_color-9);
     stroke: var(--_color-9);
-    color: var(--_color-9-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-0 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-0 {
     color: var(--_color-0-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-1 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-1 {
     color: var(--_color-1-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-2 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-2 {
     color: var(--_color-2-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-3 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-3 {
     color: var(--_color-3-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-4 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-4 {
     color: var(--_color-4-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-5 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-5 {
     color: var(--_color-5-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-6 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-6 {
     color: var(--_color-6-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-7 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-7 {
     color: var(--_color-7-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-8 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-8 {
     color: var(--_color-8-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-9 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-9 {
     color: var(--_color-9-label);
   }