message: feat: pick mutation badge text color depending on background color
diff: import React from 'react'
  import { get } from 'lodash'
  -import styled from 'styled-components'
  +import styled, { useTheme } from 'styled-components'
  import { AMINOACID_GAP } from 'src/constants'
  import { Aminoacid, AminoacidDeletion, AminoacidSubstitution, Gene } from 'src/algorithms/types'
  import { getAminoacidColor } from 'src/helpers/getAminoacidColor'
  +import { getContrast } from 'polished'
  +import { Theme } from 'src/theme'
  export const MutationBadgeBox = styled.span`
  display: inline-block;
  @@ -31,16 +33,17 @@ export const MutationWrapper = styled.span`
  }
  `
  -export const GeneText = styled.span<{ $color: string }>`
  +export const GeneText = styled.span<{ $background?: string; $color?: string }>`
  padding: 1px 2px;
  - background-color: ${(props) => props.$color};
  - color: ${(props) => props.theme.gray100};
  + background-color: ${(props) => props.$background};
  + color: ${(props) => props.$color ?? props.theme.gray100};
  font-weight: 700;
  `
  -export const ColoredText = styled.span<{ $color: string }>`
  +export const ColoredText = styled.span<{ $background?: string; $color?: string }>`
  padding: 1px 2px;
  - background-color: ${(props) => props.$color};
  + background-color: ${(props) => props.$background};
  + color: ${(props) => props.$color ?? props.theme.gray100};
  `
  export const PositionText = styled.span`
  @@ -55,31 +58,47 @@ export const VersionText = styled.span`
  color: ${(props) => props.theme.gray800};
  `
  +export function getTextColor(theme: Theme, backgroundColor: string) {
  + const contrast = getContrast(backgroundColor, theme.gray100)
  + if (contrast > 5) {
  + return theme.gray100
  + }
  + return theme.gray800
  +}
  +
  export interface MutationBadgeProps {
  mutation: AminoacidSubstitution | AminoacidDeletion
  geneMap: Gene[]
  }
  export function AminoacidMutationBadge({ mutation, geneMap }: MutationBadgeProps) {
  + const theme = useTheme()
  +
  const { gene: geneName, refAA, codon } = mutation
  const queryAA = get(mutation, 'queryAA', AMINOACID_GAP) as Aminoacid
  const gene = geneMap.find((gene) => gene.geneName === geneName)
  - const geneColor = gene?.color ?? '#999'
  - const refColor = getAminoacidColor(refAA)
  - const queryColor = getAminoacidColor(queryAA)
  + const geneBg = gene?.color ?? '#999'
  + const refBg = getAminoacidColor(refAA)
  + const refFg = getTextColor(theme, refBg)
  + const queryBg = getAminoacidColor(queryAA)
  + const queryFg = getTextColor(theme, queryBg)
  const codonOneBased = codon + 1
  return (
  <MutationBadgeBox>
  <MutationWrapper>
  - <GeneText $color={geneColor}>
  + <GeneText $background={geneBg}>
  {geneName}
  <span>{':'}</span>
  </GeneText>
  - <ColoredText $color={refColor}>{refAA}</ColoredText>
  + <ColoredText $background={refBg} $color={refFg}>
  + {refAA}
  + </ColoredText>
  <PositionText>{codonOneBased}</PositionText>
  - <ColoredText $color={queryColor}>{queryAA}</ColoredText>
  + <ColoredText $background={queryBg} $color={queryFg}>
  + {queryAA}
  + </ColoredText>
  </MutationWrapper>
  </MutationBadgeBox>
  )
  