From a84bb0259f14bdf75846163ce5a44b663fb2760f Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 11 Jun 2024 17:49:14 +0800
Subject: [PATCH] More work on themes

---
 .../icons/home/AddToLibraryActionIcon.tsx     |  1 -
 .../web/components/tokens/stitches.config.ts  | 66 ++++++++++++-------
 packages/web/pages/highlights/index.tsx       |  1 +
 packages/web/pages/home/index.tsx             | 35 +++++-----
 4 files changed, 64 insertions(+), 39 deletions(-)

diff --git a/packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx b/packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx
index b2db19fe2..ae852aac8 100644
--- a/packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx
+++ b/packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx
@@ -7,7 +7,6 @@ import React from 'react'
 export class AddToLibraryActionIcon extends React.Component<IconProps> {
   render() {
     const strokeColor = (this.props.color || '#D9D9D9').toString()
-    const backgroundColor = (this.props.color || '#3D3D3D').toString()
 
     return (
       <svg
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index f69f0fd27..bb27a1aae 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -151,7 +151,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         searchActiveOutline: 'rgb(255, 210, 52)',
 
         // Reader Colors
-        readerBg: 'white',
+        readerBg: '#FAFAFA',
         readerFont: '#3D3D3D',
         readerFontHighContrast: 'black',
         readerTableHeader: '#FFFFFF',
@@ -180,7 +180,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thBackground5: '#F5F5F5',
         thBackgroundActive: '#FFEA9F',
         thBackgroundContrast: '#FFFFFF',
-        thLeftMenuBackground: '#FCFCFC',
+        thLeftMenuBackground: '#F2F2F2',
         thNavMenuFooter: '#DFDFDF',
         thLibraryBackground: '#FFFFFF',
         thLibrarySearchbox: '#FCFCFC',
@@ -230,6 +230,14 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thHighContrast: '#3D3D3D',
         thHighlightBar: '#D9D9D9',
 
+        homeCardHover: '#FFFFFF',
+        homeTextTitle: '#2A2A2A',
+        homeTextSource: '#3D3D3D',
+        homeTextBody: '#3D3D3D',
+        homeTextSubtle: '#898989',
+        homeActionIcons: '#898989',
+        homeDivider: '#D9D9D9',
+
         thLibraryAISummaryBorder: '#6A6968',
         thLibraryAISummaryBackground: '#343434',
 
@@ -331,7 +339,7 @@ const darkThemeSpec = {
     thLibraryMenuPrimary: '#EBEBEB',
     thLibraryMenuSecondary: '#EBEBEB',
     thLibraryMenuUnselected: 'white',
-    thLibrarySelectionColor: '#6A6968',
+    thLibrarySelectionColor: '#DFDFDF',
     thLibraryNavigationMenuFooter: '#3D3D3D',
     thLibraryMenuFooterHover: '#6A6968',
     thLibraryMultiselectHover: '#6A6968',
@@ -376,6 +384,14 @@ const darkThemeSpec = {
 
     thHighlightBar: '#6A6968',
 
+    homeCardHover: '#323232',
+    homeTextTitle: '#FFFFFF',
+    homeTextSource: '#D9D9D9',
+    homeTextBody: '#D9D9D9',
+    homeTextSubtle: '#898989',
+    homeActionIcons: '#898989',
+    homeDivider: '#3D3D3D',
+
     thLibraryAISummaryBorder: '#6A6968',
     thLibraryAISummaryBackground: '#343434',
 
@@ -394,6 +410,29 @@ const blackThemeSpec = {
   },
 }
 
+const apolloThemeSpec = {
+  colors: {
+    readerBg: '#6A6968',
+    readerFont: '#F3F3F3',
+    readerMargin: '#474747',
+    readerFontHighContrast: 'white',
+    readerTableHeader: '#FFFFFF',
+
+    thLeftMenuBackground: '#3D3D3D',
+    thNavMenuFooter: '#515151',
+
+    thLibrarySelectionColor: '#515151',
+    thBorderColor: '#6A6968',
+
+    homeCardHover: '#525252',
+    homeDivider: '#6A6968',
+
+    thBackground: '#474747',
+    thBackground2: '#515151',
+    thLibraryMultiselectHover: '#EEE8D5',
+  },
+}
+
 const sepiaThemeSpec = {
   colorScheme: {
     colorScheme: 'light',
@@ -413,26 +452,9 @@ const sepiaThemeSpec = {
 
     thBackground: '#FDF6E3',
 
-    thLibraryMultiselectHover: '#EEE8D5',
-  },
-}
+    homeCardHover: '#EEE8D5',
+    homeDivider: '#DDD6C1',
 
-const apolloThemeSpec = {
-  colors: {
-    readerBg: '#6A6968',
-    readerFont: '#F3F3F3',
-    readerMargin: '#474747',
-    readerFontHighContrast: 'white',
-    readerTableHeader: '#FFFFFF',
-
-    thLeftMenuBackground: '#3D3D3D',
-    thNavMenuFooter: '#515151',
-
-    thLibrarySelectionColor: '#515151',
-    thBorderColor: '#6A6968',
-
-    thBackground: '#474747',
-    thBackground2: '#515151',
     thLibraryMultiselectHover: '#EEE8D5',
   },
 }
diff --git a/packages/web/pages/highlights/index.tsx b/packages/web/pages/highlights/index.tsx
index 8b6f86e5d..12cf56ea4 100644
--- a/packages/web/pages/highlights/index.tsx
+++ b/packages/web/pages/highlights/index.tsx
@@ -30,6 +30,7 @@ import {
 import { highlightColor } from '../../lib/themeUpdater'
 
 import { HighlightViewNote } from '../../components/patterns/HighlightNotes'
+import { theme } from '../../components/tokens/stitches.config'
 
 const PAGE_SIZE = 10
 
diff --git a/packages/web/pages/home/index.tsx b/packages/web/pages/home/index.tsx
index 9a854acd3..6d9dd8907 100644
--- a/packages/web/pages/home/index.tsx
+++ b/packages/web/pages/home/index.tsx
@@ -122,12 +122,11 @@ const JustAddedHomeSection = (props: HomeSectionProps): JSX.Element => {
           fontFamily: '$inter',
           fontSize: '16px',
           fontWeight: '600',
-          color: '$readerText',
+          color: '$homeTextTitle',
         }}
       >
         {props.homeSection.title}
       </SpanBox>
-
       {props.homeSection.items.map((homeItem) => {
         return <JustAddedItemView key={homeItem.id} homeItem={homeItem} />
       })}
@@ -149,7 +148,7 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
           fontFamily: '$inter',
           fontSize: '16px',
           fontWeight: '600',
-          color: '$readerText',
+          color: '$homeTextTitle',
         }}
       >
         {props.homeSection.title}
@@ -232,7 +231,7 @@ const HiddenHomeSection = (props: HomeSectionProps): JSX.Element => {
             fontFamily: '$inter',
             fontSize: '16px',
             fontWeight: '600',
-            color: '$readerText',
+            color: '$homeTextTitle',
           }}
         >
           {props.homeSection.title}
@@ -299,7 +298,7 @@ const TimeAgo = (props: HomeItemViewProps): JSX.Element => {
         fontSize: '12px',
         fontWeight: 'medium',
         fontFamily: '$inter',
-        color: '$readerTextSubtle',
+        color: '$homeTextSubtle',
       }}
     >
       {timeAgo(props.homeItem.date)}
@@ -317,7 +316,7 @@ const Title = (props: HomeItemViewProps): JSX.Element => {
         lineHeight: '20px',
         fontWeight: '600',
         fontFamily: '$inter',
-        color: '$readerText',
+        color: '$homeTextTitle',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         wordBreak: 'break-word',
@@ -366,7 +365,7 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => {
         padding: '5px',
         borderRadius: '5px',
         '&:hover': {
-          bg: '$thBackground',
+          bg: '$homeCardHover',
           borderRadius: '0px',
         },
       }}
@@ -403,7 +402,7 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
 
         borderRadius: '5px',
         '&:hover': {
-          bg: '#323232',
+          bg: '$homeCardHover',
           borderRadius: '0px',
         },
       }}
@@ -450,22 +449,26 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
       </SpanBox>
       <HStack css={{ gap: '10px', my: '15px', px: '20px' }}>
         <Button style="homeAction">
-          <AddToLibraryActionIcon />
+          <AddToLibraryActionIcon
+            color={theme.colors.homeActionIcons.toString()}
+          />
         </Button>
         <Button style="homeAction">
-          <CommentActionIcon />
+          <CommentActionIcon color={theme.colors.homeActionIcons.toString()} />
         </Button>
         <Button style="homeAction">
-          <ShareActionIcon />
+          <ShareActionIcon color={theme.colors.homeActionIcons.toString()} />
         </Button>
         <Button style="homeAction">
-          <ArchiveActionIcon />
+          <ArchiveActionIcon color={theme.colors.homeActionIcons.toString()} />
         </Button>
         <Button style="homeAction">
-          <RemoveActionIcon />
+          <RemoveActionIcon color={theme.colors.homeActionIcons.toString()} />
         </Button>
       </HStack>
-      <Box css={{ mt: '15px', width: '100%', height: '1px', bg: '#3D3D3D' }} />
+      <Box
+        css={{ mt: '15px', width: '100%', height: '1px', bg: '$homeDivider' }}
+      />
     </VStack>
   )
 }
@@ -537,7 +540,7 @@ const SourceInfo = (props: HomeItemViewProps) => (
             fontFamily: '$inter',
             fontWeight: '500',
             fontSize: '13px',
-            color: '$readerFont',
+            color: '$homeTextSource',
             textDecoration: 'underline',
           }}
         >
@@ -625,7 +628,7 @@ const SubscriptionSourceHoverContent = (
         css={{
           fontFamily: '$inter',
           fontSize: '13px',
-          color: '$thTextSubtle4',
+          color: '$homeTextBody',
         }}
       >
         {subscription ? <>{subscription.description}</> : <></>}