Remove unused colors from theme

packages/web/components/elements/Button.tsx

@@ -130,7 +130,7 @@ export const Button = styled('button', {
       ctaModal: {
         height: '32px',
         verticalAlign: 'middle',
-        color: '$textDefault',
+        color: '$thTextContrast',
         backgroundColor: '$grayBase',
         fontWeight: '600',
         padding: '0px 12px',

packages/web/components/elements/MobileInstallHelp.tsx

@@ -257,7 +257,7 @@ export default function MobileInstallHelp({
                     height: 35,
                     width: 35,
                     cursor: 'pointer',
-                    backgroundColor: '$tooltipIcons',
+                    backgroundColor: '$labelButtonsBg',
                     ...(selectedTooltip !== item.label && {
                       filter: 'grayscale(1)',
                     }),

packages/web/components/elements/StyledText.tsx

@@ -85,7 +85,7 @@ const textVariants = {
       fontWeight: '600',
       fontSize: '16px',
       lineHeight: '1',
-      color: '$textDefault',
+      color: '$thTextContrast',
     },
     shareHighlightModalAnnotation: {
       fontSize: '18px',

packages/web/components/templates/article/ArticleContainer.tsx

@@ -263,7 +263,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
       ? theme.colors.readerFontHighContrast.toString()
       : theme.colors.readerFont.toString(),
     readerTableHeaderColor: theme.colors.readerTableHeader.toString(),
-    readerHeadersColor: theme.colors.readerHeader.toString(),
+    readerHeadersColor: theme.colors.readerFont.toString(),
   }
 
   const recommendationsWithNotes = useMemo(() => {

packages/web/components/templates/article/ShareModal.tsx

@@ -3,13 +3,18 @@ import {
   ModalContent,
   ModalOverlay,
 } from '../../elements/ModalPrimitives'
-import { Box, HStack, StyledLink, VStack } from '../../elements/LayoutPrimitives'
+import {
+  Box,
+  HStack,
+  StyledLink,
+  VStack,
+} from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
 import { useCopyLink } from '../../../lib/hooks/useCopyLink'
 import { CloseIcon } from '../../elements/images/CloseIcon'
-import {OmnivoreLogoIcon} from '../../elements/images/OmnivoreNameLogo'
+import { OmnivoreLogoIcon } from '../../elements/images/OmnivoreNameLogo'
 import { useState } from 'react'
 import { TooltipWrapped } from '../../elements/Tooltip'
 import { TwitterLogo, FacebookLogo } from 'phosphor-react'
@@ -26,16 +31,14 @@ type ShareModalLayoutProps = {
   children: React.ReactNode
 }
 
-export function ShareModalLayout(
-  props: ShareModalLayoutProps
-): JSX.Element {
+export function ShareModalLayout(props: ShareModalLayoutProps): JSX.Element {
   const { copyLink, isLinkCopied } = useCopyLink(props.url, props.type)
-  const [switchOn, setSwitchOn] = useState(false);
+  const [switchOn, setSwitchOn] = useState(false)
   const toggleSwitch = () => {
-    setSwitchOn(!switchOn);
+    setSwitchOn(!switchOn)
   }
   const iconColor = theme.colors.grayText.toString()
-  
+
   return (
     <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
       <ModalOverlay />
@@ -43,15 +46,29 @@ export function ShareModalLayout(
         onPointerDownOutside={(event) => {
           event.preventDefault()
         }}
-        css={{ overflow: 'auto', p: '0px', border: '1px solid $grayBorder', boxShadow: 'none'}}
+        css={{
+          overflow: 'auto',
+          p: '0px',
+          border: '1px solid $grayBorder',
+          boxShadow: 'none',
+        }}
       >
         <VStack distribution="start" css={{ p: '0' }}>
           <HStack
             distribution="between"
             alignment="center"
-            css={{ width: '100%', pt: '24px', pl: '24px', pr: '24px', boxSizing: 'border-box', pb: '16px' }}
+            css={{
+              width: '100%',
+              pt: '24px',
+              pl: '24px',
+              pr: '24px',
+              boxSizing: 'border-box',
+              pb: '16px',
+            }}
           >
-            <StyledText style="modalTitle" css={{ p: '0' }}>{props.modalTitle}</StyledText>
+            <StyledText style="modalTitle" css={{ p: '0' }}>
+              {props.modalTitle}
+            </StyledText>
             <Button
               css={{ p: '0' }}
               style="ghost"
@@ -59,17 +76,28 @@ export function ShareModalLayout(
                 props.onOpenChange(false)
               }}
             >
-              <CloseIcon
-                size={24}
-                strokeColor={iconColor}
-              />
+              <CloseIcon size={24} strokeColor={iconColor} />
             </Button>
           </HStack>
           {props.children}
           <HStack
-            alignment='start'
-            distribution='start'
-            css={{ alignItems: 'center', pt: '16px', pb: '16px', pl: '24px', pr: '24px', height:"64px", width: '100%', boxSizing: 'border-box', gap: '8px', mb: '0px', bg: '$grayBg', borderTop: '1px solid $grayBorder', borderRadius: '0px 0px 6px 6px' }}
+            alignment="start"
+            distribution="start"
+            css={{
+              alignItems: 'center',
+              pt: '16px',
+              pb: '16px',
+              pl: '24px',
+              pr: '24px',
+              height: '64px',
+              width: '100%',
+              boxSizing: 'border-box',
+              gap: '8px',
+              mb: '0px',
+              bg: '$grayBg',
+              borderTop: '1px solid $grayBorder',
+              borderRadius: '0px 0px 6px 6px',
+            }}
           >
             <StyledText style="boldText" css={{ m: '0' }}>
               Secret URL
@@ -78,45 +106,83 @@ export function ShareModalLayout(
               tooltipContent="Link copied!"
               tooltipSide="top"
               active={isLinkCopied}
-              style={{background: "linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;"}}
-              arrowStyles={{fill: "linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;"}}
+              style={{
+                background:
+                  'linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;',
+              }}
+              arrowStyles={{
+                fill: 'linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;',
+              }}
             >
-            <button onClick={toggleSwitch} className='track' style={{display:'flex', padding:'2px', flexDirection: `${switchOn ? 'row-reverse' : 'row'}`, alignItems: 'center', width: '40px', height:'24px', background: `${switchOn ? 'rgba(255, 210, 52, 1)' : 'rgba(10, 8, 6, 0.15)'}`, borderRadius: '12px', borderColor: theme.colors.grayBorder.toString(), borderWidth: 1, borderStyle: 'solid',}}>
-              <div className='thumb' style={{width: '20px', height: '20px', borderRadius: '20px', background: 'rgba(255, 255, 255, 1)', border: '2px solid rgba(0, 0, 0, 0.06)',}}>
-                </div>
-            </button>
+              <button
+                onClick={toggleSwitch}
+                className="track"
+                style={{
+                  display: 'flex',
+                  padding: '2px',
+                  flexDirection: `${switchOn ? 'row-reverse' : 'row'}`,
+                  alignItems: 'center',
+                  width: '40px',
+                  height: '24px',
+                  background: `${
+                    switchOn ? 'rgba(255, 210, 52, 1)' : 'rgba(10, 8, 6, 0.15)'
+                  }`,
+                  borderRadius: '12px',
+                  borderColor: theme.colors.grayBorder.toString(),
+                  borderWidth: 1,
+                  borderStyle: 'solid',
+                }}
+              >
+                <div
+                  className="thumb"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    borderRadius: '20px',
+                    background: 'rgba(255, 255, 255, 1)',
+                    border: '2px solid rgba(0, 0, 0, 0.06)',
+                  }}
+                ></div>
+              </button>
             </TooltipWrapped>
-            {switchOn && <Button style='ctaModal' onClick={copyLink}>
-              Copy Link
-            </Button>}
+            {switchOn && (
+              <Button style="ctaModal" onClick={copyLink}>
+                Copy Link
+              </Button>
+            )}
 
-            <Box css={{
-              display:'flex',
-              flexDirection: 'row',
-              marginLeft: 'auto',
-              gap: '24px',
-              alignItems: 'center',
-            }}>
+            <Box
+              css={{
+                display: 'flex',
+                flexDirection: 'row',
+                marginLeft: 'auto',
+                gap: '24px',
+                alignItems: 'center',
+              }}
+            >
               <StyledLink
-                target='_blank'
+                target="_blank"
                 css={{ height: '24px' }}
-                referrerPolicy='no-referrer'
+                referrerPolicy="no-referrer"
                 href={``}
               >
-                <OmnivoreLogoIcon size={26} strokeColor={theme.colors.textNonEssential.toString()} />
+                <OmnivoreLogoIcon
+                  size={26}
+                  strokeColor={theme.colors.thTextContrast.toString()}
+                />
               </StyledLink>
               <StyledLink
-                target='_blank'
+                target="_blank"
                 css={{ height: '24px' }}
-                referrerPolicy='no-referrer'
+                referrerPolicy="no-referrer"
                 href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}&t=${props.title}&display=page`}
               >
                 <FacebookLogo width={26} height={26} color={iconColor} />
               </StyledLink>
               <StyledLink
-                target='_blank'
+                target="_blank"
                 css={{ height: '24px' }}
-                referrerPolicy='no-referrer'
+                referrerPolicy="no-referrer"
                 href={`https://twitter.com/intent/tweet?text=${props.title}&url=${props.url}`}
               >
                 <TwitterLogo width={26} height={26} color={iconColor} />

packages/web/components/templates/article/SkeletonArticleContainer.tsx

@@ -19,7 +19,7 @@ export function SkeletonArticleContainer(
     fontFamily: props.fontFamily ?? 'inter',
     readerFontColor: theme.colors.readerFont.toString(),
     readerTableHeaderColor: theme.colors.readerTableHeader.toString(),
-    readerHeadersColor: theme.colors.readerHeader.toString(),
+    readerHeadersColor: theme.colors.readerFont.toString(),
   }
 
   return (

packages/web/components/tokens/stitches.config.ts

@@ -119,10 +119,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayBg: '#FFFFFF',
         grayBgActive: '#e6e6e6',
         grayBorder: '#F0F0F0',
-        lightBorder: '#F0F0F0',
         grayTextContrast: '#3A3939',
         graySolid: '#9C9B9A',
-        textDefault: 'rgba(255, 255, 255, 0.8)',
         utilityTextDefault: '#3B3938',
         utilityTextSubtle: 'rgba(255, 255, 255, 0.65)',
         textNonessential: 'rgba(10, 8, 6, 0.4)',
@@ -132,8 +130,6 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayLine: 'hsl(0 0% 88.7%)',
         grayBorderHover: 'hsl(0 0% 78.0%)',
         grayText: '#6A6968',
-        graySeparator: '#DADADA',
-        grayProgressBackground: '#FFFFFF',
 
         // Semantic Colors
         highlightBackground: '250, 227, 146',
@@ -145,8 +141,6 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         // Brand Colors
         omnivoreRed: '#FA5E4A;',
         omnivoreGray: '#3D3D3D',
-        omnivoreOrange: '#FF9B3E',
-        omnivorePeach: 'rgb(255, 212, 146)',
         omnivoreYellow: 'rgb(255, 234, 159)',
         omnivoreLightGray: 'rgb(125, 125, 125)',
         omnivoreCtaYellow: 'rgb(255, 210, 52)',
@@ -155,8 +149,6 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         readerBg: 'white',
         readerFont: '#3D3D3D',
         readerFontHighContrast: 'black',
-        readerFontTransparent: 'rgba(61,61,61,0.65)',
-        readerHeader: '3D3D3D',
         readerTableHeader: '#FFFFFF',
 
         // Avatar Fallback color
@@ -164,15 +156,11 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         avatarFont: '#9C7C0A',
 
         labelButtonsBg: '#F5F5F4',
-        tooltipIcons: '#FDFAEC',
 
         textSubtle: '#605F5D',
-        libraryBackground: '#FFFFFF',
-        libraryActiveMenuItem: '#F8F8F8',
         border: '#F0F0F0',
 
         //utility
-        textNonEssential: 'rgba(10, 8, 6, 0.4)',
         overlay: 'rgba(63, 62, 60, 0.2)',
 
         // New theme, special naming to keep things straigh
@@ -223,7 +211,6 @@ const darkThemeSpec = {
     grayTextContrast: '#D8D7D7',
     grayBorder: '#323232',
     graySolid: '#9C9B9A',
-    textDefault: 'rgba(10, 8, 6, 0.8)',
     utilityTextDefault: '#CDCDCD',
     textNonessential: 'rgba(97, 97, 97, 1)',
 
@@ -232,8 +219,6 @@ const darkThemeSpec = {
     grayLine: 'hsl(0 0% 19.9%)',
     grayBorderHover: 'hsl(0 0% 31.2%)',
     grayText: '#CDCDCD',
-    graySeparator: '#323232',
-    grayProgressBackground: '#616161',
 
     // Semantic Colors
     highlightBackground: '134, 119, 64',
@@ -246,20 +231,15 @@ const darkThemeSpec = {
     readerBg: '#303030',
     readerFont: '#b9b9b9',
     readerFontHighContrast: 'white',
-    readerHeader: '#b9b9b9',
     readerTableHeader: '#FFFFFF',
-    tooltipIcons: '#5F5E58',
     avatarBg: '#7B5C3E',
     avatarFont: '#D9D9D9',
 
     textSubtle: '#AAAAAA',
-    libraryBackground: '#252525',
-    libraryActiveMenuItem: '#3B3938',
     border: '#323232',
 
     //utility
     utilityTextSubtle: 'rgba(255, 255, 255, 0.65)',
-    textNonEssential: 'rgba(10, 8, 6, 0.4)',
     overlay: 'rgba(10, 8, 6, 0.65)',
 
     labelButtonsBg: '#5F5E58',