A couple small font/color tweaks

packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx

@@ -33,14 +33,14 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           display: 'grid',
           gridTemplateColumns: '0.01fr 1fr 2fr 150px',
           gridTemplateRows: '1fr',
-          borderBottom: '1px solid $graySolid',
+          borderBottom: '1px solid $graySeparator',
           height: '45px',
         }}
       >
         <ProgressBarVertical
           fillPercentage={props.item.readingProgressPercent}
           fillColor={theme.colors.highlight.toString()}
-          backgroundColor={theme.colors.lightBorder.toString()}
+          backgroundColor={theme.colors.grayProgressBackground.toString()}
           borderRadius={
             props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
           }
@@ -86,7 +86,8 @@ function CardTitle(props: CardTitleProps): JSX.Element {
       data-testid="listTitle"
       css={{
         ...ellipsisText,
-        fontSize: '18px',
+        fontSize: '14px',
+        fontWeight: '600',
         textAlign: 'left',
       }}
     >

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

@@ -125,6 +125,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayLine: 'hsl(0 0% 88.7%)',
         grayBorderHover: 'hsl(0 0% 78.0%)',
         grayText: '#3B3938',
+        graySeparator: '#DADADA',
+        grayProgressBackground: '#FFFFFF',
 
         // Semantic Colors
         highlightBackground: 'rgba(255, 210, 52, 0.65)',
@@ -196,6 +198,8 @@ const darkThemeSpec = {
     grayLine: 'hsl(0 0% 19.9%)',
     grayBorderHover: 'hsl(0 0% 31.2%)',
     grayText: '#CDCDCD',
+    graySeparator: '#323232',
+    grayProgressBackground: '#616161',
 
     // Semantic Colors
     highlightBackground: '#867740',