From 0fb3ec4e4f969246f2d25fbf6abe40912330a6b3 Mon Sep 17 00:00:00 2001 From: Bruno Lemos Date: Thu, 7 Feb 2019 15:12:33 -0200 Subject: [PATCH] Fix Label color constrast ratio Specially from read notifications on light themes --- .../cards/partials/NotificationCardHeader.tsx | 1 + .../partials/rows/IssueOrPullRequestRow.tsx | 4 ++- .../partials/rows/NotificationReasonRow.tsx | 1 + .../src/components/common/Label.tsx | 31 ++++++++++++------- .../components/src/utils/helpers/colors.ts | 6 ++++ 5 files changed, 31 insertions(+), 12 deletions(-) diff --git a/packages/components/src/components/cards/partials/NotificationCardHeader.tsx b/packages/components/src/components/cards/partials/NotificationCardHeader.tsx index 9d3235d8..41bafc8b 100644 --- a/packages/components/src/components/cards/partials/NotificationCardHeader.tsx +++ b/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 } }} diff --git a/packages/components/src/components/cards/partials/rows/IssueOrPullRequestRow.tsx b/packages/components/src/components/cards/partials/rows/IssueOrPullRequestRow.tsx index f9196fa4..5a64077e 100644 --- a/packages/components/src/components/cards/partials/rows/IssueOrPullRequestRow.tsx +++ b/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 > diff --git a/packages/components/src/components/cards/partials/rows/NotificationReasonRow.tsx b/packages/components/src/components/cards/partials/rows/NotificationReasonRow.tsx index 6564aaec..442f428d 100644 --- a/packages/components/src/components/cards/partials/rows/NotificationReasonRow.tsx +++ b/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 }} > diff --git a/packages/components/src/components/common/Label.tsx b/packages/components/src/components/common/Label.tsx index a26b9d20..b8ec6802 100644 --- a/packages/components/src/components/common/Label.tsx +++ b/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) && ( diff --git a/packages/components/src/utils/helpers/colors.ts b/packages/components/src/utils/helpers/colors.ts index 4d68dff1..13f4f4cc 100644 --- a/packages/components/src/utils/helpers/colors.ts +++ b/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) +}