Fix Label color constrast ratio

Specially from read notifications on light themes

packages/components/src/components/cards/partials/NotificationCardHeader.tsx

@@ -210,6 +210,7 @@ export function NotificationCardHeader(props: NotificationCardHeaderProps) {
                   color={reasonDetails.color}
                   containerStyle={{ alignSelf: 'flex-start' }}
                   isPrivate={isPrivate}
+                  muted={isRead}
                   outline={isRead}
                   small
                   textProps={{ style: { paddingBottom: 1 } }}

packages/components/src/components/cards/partials/rows/IssueOrPullRequestRow.tsx

@@ -10,7 +10,7 @@ import {
 } from '@devhub/core'
 import { useCSSVariablesOrSpringAnimatedTheme } from '../../../../hooks/use-css-variables-or-spring--animated-theme'
 import { Platform } from '../../../../libs/platform'
-import { contentPadding } from '../../../../styles/variables'
+import { contentPadding, mutedOpacity } from '../../../../styles/variables'
 import { fixURL } from '../../../../utils/helpers/github/url'
 import {
   SpringAnimatedIcon,
@@ -129,6 +129,7 @@ export const IssueOrPullRequestRow = React.memo(
                     getCardStylesForTheme(springAnimatedTheme).normalText,
                     getCardStylesForTheme(springAnimatedTheme).icon,
                     { color: iconColor },
+                    isRead && { opacity: mutedOpacity },
                   ]}
                 />{' '}
                 {title}
@@ -156,6 +157,7 @@ export const IssueOrPullRequestRow = React.memo(
                           alignSelf: 'flex-start',
                           margin: contentPadding / 4,
                         }}
+                        muted={isRead}
                         outline={isRead}
                         small
                       >

packages/components/src/components/cards/partials/rows/NotificationReasonRow.tsx

@@ -43,6 +43,7 @@ export const NotificationReasonRow = React.memo(
             color={labelColor}
             containerStyle={{ alignSelf: 'flex-start' }}
             isPrivate={isPrivate}
+            muted={isRead}
             outline
             textProps={{ numberOfLines: 1 }}
           >

packages/components/src/components/common/Label.tsx

@@ -8,6 +8,7 @@ import {
   mutedOpacity,
   radius as defaultRadius,
 } from '../../styles/variables'
+import { getLuminanceDifference } from '../../utils/helpers/colors'
 import { parseTextWithEmojisToReactComponents } from '../../utils/helpers/github/emojis'
 import { SpringAnimatedIcon } from '../animated/spring/SpringAnimatedIcon'
 import { SpringAnimatedText } from '../animated/spring/SpringAnimatedText'
@@ -49,19 +50,27 @@ export function Label(props: LabelProps) {
     textProps = {},
   } = props
 
-  const color =
-    _color ||
-    (muted
-      ? springAnimatedTheme.foregroundColorMuted50
-      : springAnimatedTheme.foregroundColor)
+  const _colorLuminanceDiff = _color
+    ? Math.abs(getLuminanceDifference(_color, theme.backgroundColor))
+    : 0
+
+  const _readableColor =
+    _color &&
+    (outline && _colorLuminanceDiff < 0.4
+      ? theme.isDark
+        ? lighten(0.6 - _colorLuminanceDiff, _color)
+        : darken(0.6 - _colorLuminanceDiff, _color)
+      : _color)
+
+  const color = _readableColor || springAnimatedTheme.foregroundColor
 
   const foregroundColor =
     _textColor ||
     (outline && color) ||
-    (_color
-      ? getLuminance(_color) > 0.4
-        ? darken(0.9, _color)
-        : lighten(0.9, _color)
+    (_readableColor
+      ? getLuminance(_readableColor) > 0.4
+        ? darken(0.9, _readableColor)
+        : lighten(0.9, _readableColor)
       : springAnimatedTheme.foregroundColor)
 
   return (
@@ -78,11 +87,12 @@ export function Label(props: LabelProps) {
         {
           borderColor: borderColor || color,
           backgroundColor: outline
-            ? _color
+            ? _readableColor
               ? springAnimatedTheme.backgroundColor
               : undefined
             : color,
         },
+        muted && { opacity: mutedOpacity },
         Boolean(radius) && { borderRadius: radius },
       ]}
     >
@@ -96,7 +106,6 @@ export function Label(props: LabelProps) {
             color: foregroundColor,
           },
           textProps && textProps.style,
-          muted && { opacity: mutedOpacity },
         ]}
       >
         {Boolean(isPrivate) && (

packages/components/src/utils/helpers/colors.ts

@@ -1,3 +1,5 @@
+import { getLuminance } from 'polished'
+
 import { Platform } from '../../libs/platform'
 
 export function computeThemeColor(color: string) {
@@ -9,3 +11,7 @@ export function computeThemeColor(color: string) {
       : undefined
     : color
 }
+
+export function getLuminanceDifference(colorA: string, colorB: string) {
+  return getLuminance(colorA) - getLuminance(colorB)
+}