Dynamic font colors for caption and breadcrumbs #1881

web/components/src/Backgrounds/BackgroundContainer.tsx

@@ -42,6 +42,39 @@ export const getBackgroundByColorName = (name: BackgroundColours) => {
   return backgrounds[styleVariant]
 }
 
+export const getHexFromColorName = (color?: BackgroundColours) => {
+  switch (color) {
+    case 'Moss Green':
+      return '#a8cfd1'
+    case 'Moss Green Light':
+      return '#f2f7f8'
+    case 'Spruce Wood':
+      return '#ffede0'
+    case 'Mist Blue':
+      return '#d7ebf4'
+    case 'Slate Blue':
+      return '#182530'
+    case 'White':
+    default:
+      return '#ffffff'
+  }
+}
+
+export function getFontColorForBg(bgColor?: BackgroundColours): string {
+  const hex = getHexFromColorName(bgColor)
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const [r, g, b] = hex
+    .replace(/^#/, '')
+    .match(/.{2}/g)!
+    .map((h) => parseInt(h, 16) / 255)
+  const luminance = [0.2126, 0.7152, 0.0722].reduce(
+    (acc, v, i) =>
+      acc + v * ([r, g, b][i] <= 0.03928 ? [r, g, b][i] / 12.92 : Math.pow(([r, g, b][i] + 0.055) / 1.055, 2.4)),
+    0,
+  )
+  return luminance > 0.5 ? 'var(--default-text)' : 'var(--inverted-text)'
+}
+
 export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContainerProps>(function BackgroundContainer(
   { background = 'White', disableContainerWrapper = false, style, children, ...rest },
   ref,

web/pageComponents/pageTemplates/shared/SharedTitle.tsx

@@ -2,7 +2,8 @@ import styled from 'styled-components'
 import TitleText from '../../shared/portableText/TitleText'
 import type { PortableTextBlock } from '@portabletext/types'
 import type { TitleStyles } from '../../../lib/hooks/useSharedTitleStyles'
-import { getBackgroundByColorName } from '@components'
+import type { BackgroundColours } from 'types'
+import { getBackgroundByColorName, getFontColorForBg } from '@components'
 
 type SharedTitleProps = {
   title: PortableTextBlock[]
@@ -29,16 +30,17 @@ const TitleWrapper = styled.div<{ styles?: TitleStyles }>`
   }}
 `
 
-const StyledHeading = styled(TitleText)`
+const StyledHeading = styled(TitleText)<{ $bgColor?: BackgroundColours }>`
   max-width: 1186px; /* 1920 - (2 * 367) */
   margin-left: auto;
   margin-right: auto;
+  color: ${({ $bgColor }) => getFontColorForBg($bgColor)};
 `
 
 const SharedTitle = ({ title, styles }: SharedTitleProps) => {
   return (
     <TitleWrapper styles={styles}>
-      <StyledHeading value={title} level="h1" size="2xl" />
+      <StyledHeading $bgColor={styles?.backgroundColor} value={title} level="h1" size="2xl" />
     </TitleWrapper>
   )
 }

web/pageComponents/shared/image/StyledCaption.tsx

@@ -1,15 +1,16 @@
 import { BackgroundColours, CaptionData } from '../../../types'
 import styled from 'styled-components'
 import { Caption } from './Caption'
-import { getBackgroundByColorName } from '@components'
+import { getBackgroundByColorName, getFontColorForBg } from '@components'
 
 type CaptionProps = CaptionData & { background?: BackgroundColours }
 
-const CaptionWithPadding = styled(Caption)`
+const CaptionWithPadding = styled(Caption)<{ $bgColor?: BackgroundColours }>`
   max-width: var(--maxViewportWidth);
   padding: 0 var(--layout-paddingHorizontal-small);
   margin-left: auto;
   margin-right: auto;
+  color: ${({ $bgColor }) => getFontColorForBg($bgColor)};
 `
 const CaptionWrapper = styled.div<{ background?: BackgroundColours }>`
   display: inline-block;
@@ -26,7 +27,7 @@ const CaptionWrapper = styled.div<{ background?: BackgroundColours }>`
 export const StyledCaption = ({ attribution, caption, background }: CaptionProps) => {
   return (
     <CaptionWrapper background={background}>
-      <CaptionWithPadding attribution={attribution} caption={caption} />
+      <CaptionWithPadding $bgColor={background} attribution={attribution} caption={caption} />
     </CaptionWrapper>
   )
 }

web/pageComponents/topicPages/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 import { default as NextLink } from 'next/link'
-import { BreadcrumbsList, getBackgroundByColorName, Link } from '@components'
+import { BreadcrumbsList, getBackgroundByColorName, getFontColorForBg } from '@components'
 import { BreadcrumbJsonLd } from 'next-seo'
 import { useRouter } from 'next/router'
 import type { NextRouter } from 'next/router'
@@ -32,6 +32,22 @@ const Container = styled.div<{ $containerStyles?: ContainerStyles }>`
   }}
 `
 
+const StyledBreadcrumbsList = styled(BreadcrumbsList)<{ $bgColor?: BackgroundColours }>`
+  color: ${({ $bgColor }) => getFontColorForBg($bgColor)};
+`
+
+const StyledBreadcrumbsListItem = styled(BreadcrumbsListItem)<{ $bgColor?: BackgroundColours }>`
+  &:last-child {
+    color: ${({ $bgColor }) =>
+      getFontColorForBg($bgColor) === 'var(--inverted-text)' ? 'var(--grey-30)' : 'var(--slate-blue-90)'};
+  }
+`
+
+const StyledNextLink = styled(NextLink)<{ $bgColor?: BackgroundColours }>`
+  text-decoration: none;
+  color: ${({ $bgColor }) => getFontColorForBg($bgColor)};
+`
+
 type BreadcrumbsProps = {
   slug: string
   useCustomBreadcrumbs: boolean
@@ -84,23 +100,25 @@ export const Breadcrumbs = ({
 
   return (
     <Container $containerStyles={containerStyles}>
-      <BreadcrumbsList>
+      <StyledBreadcrumbsList $bgColor={containerStyles.backgroundColor}>
         {crumbs.map((item: Breadcrumb) => {
           if (item.slug === slug) {
-            return <BreadcrumbsListItem key={item.slug}>{item.label}</BreadcrumbsListItem>
+            return (
+              <StyledBreadcrumbsListItem $bgColor={containerStyles.backgroundColor} key={item.slug}>
+                {item.label}
+              </StyledBreadcrumbsListItem>
+            )
           }
 
           return (
             <BreadcrumbsListItem key={item.slug}>
-              <NextLink href={item.slug} passHref legacyBehavior>
-                <Link variant="regular" underline={false}>
-                  {item.label}
-                </Link>
-              </NextLink>
+              <StyledNextLink href={item.slug} $bgColor={containerStyles.backgroundColor}>
+                {item.label}
+              </StyledNextLink>
             </BreadcrumbsListItem>
           )
         })}
-      </BreadcrumbsList>
+      </StyledBreadcrumbsList>
       <BreadcrumbJsonLd itemListElements={buildJsonLdElements(crumbs, router)} />
     </Container>
   )