From bbf4ef42efd1433ab656c8c73671a35e473eed31 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 3 Jun 2022 20:59:53 -0700
Subject: [PATCH] Add ability to toggle higher contrast text in the reader

---
 .../templates/article/ArticleContainer.tsx        | 15 ++++++++++++++-
 packages/web/components/tokens/stitches.config.ts |  2 ++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index 2f5d0dd40..8993bdfb6 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@@ -32,6 +32,7 @@ type ArticleContainerProps = {
   fontSize?: number
   fontFamily?: string
   lineHeight?: number
+  highContrastFont?: boolean
   showHighlightsModal: boolean
   setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
 }
@@ -48,6 +49,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   const [fontFamilyOverride, setFontFamilyOverride] = useState<string | null>(
     null
   )
+  const [highContrastFont, setHighContrastFont] = useState(props.highContrastFont ?? false)
   const highlightHref = useRef(
     window.location.hash ? window.location.hash.split('#')[1] : null
   )
@@ -117,6 +119,15 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
       setFontFamilyOverride(newFontFamily)
     }
 
+    interface UpdateFontContrastEvent extends Event {
+      fontContrast?: 'high' | 'normal'
+    }
+
+    const handleFontContrastChange = async (event: UpdateFontContrastEvent) => {
+      const highContrast = event.fontContrast == 'high'
+      setHighContrastFont(highContrast)
+    }
+
     interface UpdateFontSizeEvent extends Event {
       fontSize?: number
     }
@@ -151,6 +162,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     document.addEventListener('updateMargin', updateMargin)
     document.addEventListener('updateFontSize', handleFontSizeChange)
     document.addEventListener('updateColorMode', updateColorMode)
+    document.addEventListener('handleFontContrastChange', handleFontContrastChange)
     document.addEventListener('share', share)
 
     return () => {
@@ -159,6 +171,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
       document.removeEventListener('updateMargin', updateMargin)
       document.removeEventListener('updateFontSize', handleFontSizeChange)
       document.removeEventListener('updateColorMode', updateColorMode)
+      document.removeEventListener('handleFontContrastChange', handleFontContrastChange)
       document.removeEventListener('share', share)
     }
   })
@@ -168,7 +181,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     margin: marginOverride ?? props.margin ?? 360,
     lineHeight: lineHeightOverride ?? props.lineHeight ?? 150,
     fontFamily: fontFamilyOverride ?? props.fontFamily ?? 'inter',
-    readerFontColor: theme.colors.readerFont.toString(),
+    readerFontColor: highContrastFont ? theme.colors.readerFontHighContrast.toString() : theme.colors.readerFont.toString(),
     readerFontColorTransparent: theme.colors.readerFontTransparent.toString(),
     readerTableHeaderColor: theme.colors.readerTableHeader.toString(),
     readerHeadersColor: theme.colors.readerHeader.toString(),
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 0fa83c52c..300bdb0d1 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -139,6 +139,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         // Reader Colors
         readerBg: '#E5E5E5',
         readerFont: '#3D3D3D',
+        readerFontHighContrast: 'black',
         readerFontTransparent: 'rgba(61,61,61,0.65)',
         readerHeader: '3D3D3D',
         readerTableHeader: '#FFFFFF',
@@ -194,6 +195,7 @@ const darkThemeSpec = {
     // Reader Colors
     readerBg: '#303030',
     readerFont: '#b9b9b9',
+    readerFontHighContrast: 'black',
     readerFontTransparent: 'rgba(185,185,185,0.65)',
     readerHeader: '#b9b9b9',
     readerTableHeader: '#FFFFFF',