Fix greyed out legend key contrast ratio (#24714)

* fix greyed out legend key contrast ratio * add change file
microsoft · Sep 8, 2022 · a67fc63 · a67fc63
1 parent f1f4ab4
commit a67fc63
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/change/@fluentui-react-charting-d686895a-39e2-4755-a198-862dec13351f.json b/change/@fluentui-react-charting-d686895a-39e2-4755-a198-862dec13351f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix greyed out legend key contrast ratio",
+  "packageName": "@fluentui/react-charting",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/Legends/Legends.styles.ts b/packages/react-charting/src/components/Legends/Legends.styles.ts
@@ -81,7 +81,7 @@ export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
       ...fonts.small,
       lineHeight: '16px',
       color: theme?.semanticColors.bodyText,
-      opacity: props.colorOnSelectedState === palette.white ? '0.6' : '',
+      opacity: props.colorOnSelectedState === palette.white ? '0.67' : '',
     },
     hoverChange: {
       width: '12px',

diff --git a/packages/react-charting/src/components/Legends/__snapshots__/Legends.test.tsx.snap b/packages/react-charting/src/components/Legends/__snapshots__/Legends.test.tsx.snap
@@ -1578,7 +1578,7 @@ exports[`Legends snapShot testing renders Legends correctly 1`] = `
                         font-size: 12px;
                         font-weight: 400;
                         line-height: 16px;
-                        opacity: 0.6;
+                        opacity: 0.67;
                       }
                 >
                   Legend 17
@@ -3171,7 +3171,7 @@ exports[`Legends snapShot testing renders allowFocusOnLegends correctly 1`] = `
                         font-size: 12px;
                         font-weight: 400;
                         line-height: 16px;
-                        opacity: 0.6;
+                        opacity: 0.67;
                       }
                 >
                   Legend 17
@@ -4764,7 +4764,7 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends correctly 1`]
                         font-size: 12px;
                         font-weight: 400;
                         line-height: 16px;
-                        opacity: 0.6;
+                        opacity: 0.67;
                       }
                 >
                   Legend 17
@@ -6357,7 +6357,7 @@ exports[`Legends snapShot testing renders styles correctly 1`] = `
                         font-size: 12px;
                         font-weight: 400;
                         line-height: 16px;
-                        opacity: 0.6;
+                        opacity: 0.67;
                       }
                 >
                   Legend 17