Skip to content

Fixing few legend colors not visible in dark mode #29652

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
srmukher merged 2 commits into from
Oct 26, 2023
Merged

Fixing few legend colors not visible in dark mode #29652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
967c0be
Fixing few legend colors not visible in dark mode
srmukher Oct 26, 2023
d350de3
Merge branch 'master' of https://github.com/srmukher/fluentui into us…
srmukher Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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={{
Expand Down
37 changes: 18 additions & 19 deletions packages/react-examples/src/react-charting/Legends/Legends.WrapLines.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
},
Expand All @@ -18,7 +17,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 2',
color: DefaultPalette.green,
color: getColorFromToken(DataVizPalette.color2),
action: () => {
alert('Legend2 clicked');
},
Expand All @@ -29,7 +28,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 3',
color: DefaultPalette.yellow,
color: getColorFromToken(DataVizPalette.color3),
action: () => {
alert('Legend3 clicked');
},
Expand All @@ -40,7 +39,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 4',
color: DefaultPalette.blue,
color: getColorFromToken(DataVizPalette.color4),
action: () => {
alert('Legend4 clicked');
},
Expand All @@ -51,7 +50,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 5',
color: DefaultPalette.purpleLight,
color: getColorFromToken(DataVizPalette.color5),
action: () => {
alert('Legend5 clicked');
},
Expand All @@ -62,7 +61,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 6',
color: DefaultPalette.orange,
color: getColorFromToken(DataVizPalette.color6),
action: () => {
alert('Legend6 clicked');
},
Expand All @@ -73,7 +72,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 7',
color: DefaultPalette.magenta,
color: getColorFromToken(DataVizPalette.color7),
action: () => {
alert('Legend7 clicked');
},
Expand All @@ -84,7 +83,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 8',
color: DefaultPalette.themeDark,
color: getColorFromToken(DataVizPalette.color8),
action: () => {
alert('Legend8 clicked');
},
Expand All @@ -95,7 +94,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 9',
color: DefaultPalette.redDark,
color: getColorFromToken(DataVizPalette.color9),
action: () => {
alert('Legend9 clicked');
},
Expand All @@ -106,7 +105,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 10',
color: DefaultPalette.blueMid,
color: getColorFromToken(DataVizPalette.color10),
action: () => {
alert('Legend10 clicked');
},
Expand All @@ -117,7 +116,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 11',
color: DefaultPalette.blackTranslucent40,
color: getColorFromToken(DataVizPalette.color11),
action: () => {
alert('Legend11 clicked');
},
Expand All @@ -128,7 +127,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 12',
color: DefaultPalette.greenDark,
color: getColorFromToken(DataVizPalette.color12),
action: () => {
alert('Legend12 clicked');
},
Expand All @@ -139,7 +138,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 13',
color: DefaultPalette.yellowLight,
color: getColorFromToken(DataVizPalette.color13),
action: () => {
alert('Legend13 clicked');
},
Expand All @@ -150,7 +149,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 14',
color: DefaultPalette.magentaLight,
color: getColorFromToken(DataVizPalette.color14),
action: () => {
alert('Legend14 clicked');
},
Expand All @@ -161,7 +160,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 15',
color: DefaultPalette.purpleDark,
color: getColorFromToken(DataVizPalette.color15),
action: () => {
alert('Legend15 clicked');
},
Expand All @@ -172,7 +171,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 16',
color: DefaultPalette.blueMid,
color: getColorFromToken(DataVizPalette.color16),
action: () => {
alert('Legend16 clicked');
},
Expand All @@ -183,7 +182,7 @@ export class LegendWrapLinesExample extends React.Component<{}, {}> {
},
{
title: 'Legend 17',
color: DefaultPalette.accent,
color: getColorFromToken(DataVizPalette.color17),
action: () => {
alert('Legend17 clicked');
},
Expand Down