Fixing few legend colors not visible in dark mode (#29652)

microsoft · Oct 26, 2023 · 25e02bd · 25e02bd
1 parent 2210212
commit 25e02bd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 22 deletions.
diff --git a/packages/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx b/packages/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ILegend, Legends, DataVizPalette, getColorFromToken } from '@fluentui/react-charting';
-import { DefaultPalette, FontWeights } from '@fluentui/react/lib/Styling';
+import { FontWeights } from '@fluentui/react/lib/Styling';
 
 export class LegendStyledExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
@@ -83,9 +83,9 @@ export class LegendStyledExample extends React.Component<{}, {}> {
         canSelectMultipleLegends={false}
         overflowProps={{
           styles: {
-            item: { border: `1px dotted ${DefaultPalette.green}` },
+            item: { border: `1px dotted ${getColorFromToken(DataVizPalette.color5)}` },
             root: {},
-            overflowButton: { backgroundColor: DefaultPalette.neutralLight },
+            overflowButton: {},
           },
         }}
         styles={{

diff --git a/packages/react-examples/src/react-charting/Legends/Legends.WrapLines.Example.tsx b/packages/react-examples/src/react-charting/Legends/Legends.WrapLines.Example.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
-import { ILegend, Legends } from '@fluentui/react-charting';
-import { DefaultPalette } from '@fluentui/react/lib/Styling';
+import { DataVizPalette, ILegend, Legends, getColorFromToken } from '@fluentui/react-charting';
 
 export class LegendWrapLinesExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     const legends: ILegend[] = [
       {
         title: 'Legend 1',
-        color: DefaultPalette.red,
+        color: getColorFromToken(DataVizPalette.color1),
         action: () => {
           alert('Legend1 clicked');
         },
@@ -18,7 +17,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 2',
-        color: DefaultPalette.green,
+        color: getColorFromToken(DataVizPalette.color2),
         action: () => {
           alert('Legend2 clicked');
         },
@@ -29,7 +28,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 3',
-        color: DefaultPalette.yellow,
+        color: getColorFromToken(DataVizPalette.color3),
         action: () => {
           alert('Legend3 clicked');
         },
@@ -40,7 +39,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 4',
-        color: DefaultPalette.blue,
+        color: getColorFromToken(DataVizPalette.color4),
         action: () => {
           alert('Legend4 clicked');
         },
@@ -51,7 +50,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 5',
-        color: DefaultPalette.purpleLight,
+        color: getColorFromToken(DataVizPalette.color5),
         action: () => {
           alert('Legend5 clicked');
         },
@@ -62,7 +61,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 6',
-        color: DefaultPalette.orange,
+        color: getColorFromToken(DataVizPalette.color6),
         action: () => {
           alert('Legend6 clicked');
         },
@@ -73,7 +72,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 7',
-        color: DefaultPalette.magenta,
+        color: getColorFromToken(DataVizPalette.color7),
         action: () => {
           alert('Legend7 clicked');
         },
@@ -84,7 +83,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 8',
-        color: DefaultPalette.themeDark,
+        color: getColorFromToken(DataVizPalette.color8),
         action: () => {
           alert('Legend8 clicked');
         },
@@ -95,7 +94,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 9',
-        color: DefaultPalette.redDark,
+        color: getColorFromToken(DataVizPalette.color9),
         action: () => {
           alert('Legend9 clicked');
         },
@@ -106,7 +105,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 10',
-        color: DefaultPalette.blueMid,
+        color: getColorFromToken(DataVizPalette.color10),
         action: () => {
           alert('Legend10 clicked');
         },
@@ -117,7 +116,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 11',
-        color: DefaultPalette.blackTranslucent40,
+        color: getColorFromToken(DataVizPalette.color11),
         action: () => {
           alert('Legend11 clicked');
         },
@@ -128,7 +127,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 12',
-        color: DefaultPalette.greenDark,
+        color: getColorFromToken(DataVizPalette.color12),
         action: () => {
           alert('Legend12 clicked');
         },
@@ -139,7 +138,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 13',
-        color: DefaultPalette.yellowLight,
+        color: getColorFromToken(DataVizPalette.color13),
         action: () => {
           alert('Legend13 clicked');
         },
@@ -150,7 +149,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 14',
-        color: DefaultPalette.magentaLight,
+        color: getColorFromToken(DataVizPalette.color14),
         action: () => {
           alert('Legend14 clicked');
         },
@@ -161,7 +160,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 15',
-        color: DefaultPalette.purpleDark,
+        color: getColorFromToken(DataVizPalette.color15),
         action: () => {
           alert('Legend15 clicked');
         },
@@ -172,7 +171,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 16',
-        color: DefaultPalette.blueMid,
+        color: getColorFromToken(DataVizPalette.color16),
         action: () => {
           alert('Legend16 clicked');
         },
@@ -183,7 +182,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
       },
       {
         title: 'Legend 17',
-        color: DefaultPalette.accent,
+        color: getColorFromToken(DataVizPalette.color17),
         action: () => {
           alert('Legend17 clicked');
         },