continued out the reuse

src/pages/Discover/PodcastCard.tsx

@@ -29,7 +29,7 @@ export function PodcastCard(props: PodcastCardProps) {
       onMouseDown={props.onSelect}
     >
       <box flexDirection="row" gap={2} alignItems="center">
-        <SelectableText selected={() => props.selected}>
+        <SelectableText selected={() => props.selected} primary>
           <strong>{props.podcast.title}</strong>
         </SelectableText>
 
@@ -42,7 +42,7 @@ export function PodcastCard(props: PodcastCardProps) {
       <Show when={props.podcast.author && !props.compact}>
         <SelectableText
           selected={() => props.selected}
-          fg={theme.textMuted}
+          tertiary
         >
           by {props.podcast.author}
         </SelectableText>
@@ -52,7 +52,7 @@ export function PodcastCard(props: PodcastCardProps) {
       <Show when={props.podcast.description && !props.compact}>
         <SelectableText
           selected={() => props.selected}
-          fg={theme.text}
+          tertiary
         >
           {props.podcast.description!.length > 80
             ? props.podcast.description!.slice(0, 80) + "..."

src/pages/Feed/FeedItem.tsx

@@ -54,26 +54,26 @@ export function FeedItem(props: FeedItemProps) {
       >
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.primary}
+          primary
         >
           {props.isSelected ? ">" : " "}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={visibilityColor()}
+          tertiary
         >
           {visibilityIcon()}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.text}
+          primary
         >
           {props.feed.customName || props.feed.podcast.title}
         </SelectableText>
         {props.showEpisodeCount && (
           <SelectableText
             selected={() => props.isSelected}
-            fg={theme.textMuted}
+            tertiary
           >
             ({episodeCount()})
           </SelectableText>
@@ -95,25 +95,25 @@ export function FeedItem(props: FeedItemProps) {
       <box flexDirection="row" gap={1}>
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.primary}
+          primary
         >
           {props.isSelected ? ">" : " "}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={visibilityColor()}
+          tertiary
         >
           {visibilityIcon()}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.warning}
+          secondary
         >
           {pinnedIndicator()}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.text}
+          primary
         >
           <strong>{props.feed.customName || props.feed.podcast.title}</strong>
         </SelectableText>
@@ -123,7 +123,7 @@ export function FeedItem(props: FeedItemProps) {
         {props.showEpisodeCount && (
           <SelectableText
             selected={() => props.isSelected}
-            fg={theme.textMuted}
+            tertiary
           >
             {episodeCount()} episodes ({unplayedCount()} new)
           </SelectableText>
@@ -131,7 +131,7 @@ export function FeedItem(props: FeedItemProps) {
         {props.showLastUpdated && (
           <SelectableText
             selected={() => props.isSelected}
-            fg={theme.textMuted}
+            tertiary
           >
             Updated: {formatDate(props.feed.lastUpdated)}
           </SelectableText>
@@ -143,7 +143,7 @@ export function FeedItem(props: FeedItemProps) {
           selected={() => props.isSelected}
           paddingLeft={4}
           paddingTop={0}
-          fg={theme.textMuted}
+          tertiary
         >
           {props.feed.podcast.description.slice(0, 60)}
           {props.feed.podcast.description.length > 60 ? "..." : ""}

src/pages/Feed/FeedPage.tsx

@@ -80,9 +80,9 @@ export function FeedPage(props: PageProps) {
           <For each={Object.entries(episodesByDate()).sort(([a], [b]) => b.localeCompare(a))}>
             {([date, episode], groupIndex) => (
               <>
-                <box flexDirection="column" gap={0} paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
-                  <text fg={theme.primary}>{date}</text>
-                </box>
+                 <box flexDirection="column" gap={0} paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
+                   <SelectableText selected={() => false} primary>{date}</SelectableText>
+                 </box>
                 <SelectableBox
                   selected={() => groupIndex() === selectedIndex()}
                   flexDirection="column"
@@ -93,23 +93,25 @@ export function FeedPage(props: PageProps) {
                   paddingBottom={0}
                   onMouseDown={() => setSelectedIndex(groupIndex())}
                 >
-                  <SelectableText selected={() => groupIndex() === selectedIndex()}>
+                   <SelectableText selected={() => groupIndex() === selectedIndex()} primary>
                     {groupIndex() === selectedIndex() ? ">" : " "}
                   </SelectableText>
                   <SelectableText
                     selected={() => groupIndex() === selectedIndex()}
-                    fg={theme.text}
+                    primary
                   >
                     {episode.episode.title}
                   </SelectableText>
                   <box flexDirection="row" gap={2} paddingLeft={2}>
-                    <text fg={theme.primary}>{episode.feed.podcast.title}</text>
-                    <text fg={theme.textMuted}>
+                    <SelectableText selected={() => groupIndex() === selectedIndex()} primary>
+                      {episode.feed.podcast.title}
+                    </SelectableText>
+                    <SelectableText selected={() => groupIndex() === selectedIndex()} tertiary>
                       {formatDate(episode.episode.pubDate)}
-                    </text>
-                    <text fg={theme.textMuted}>
+                    </SelectableText>
+                    <SelectableText selected={() => groupIndex() === selectedIndex()} tertiary>
                       {formatDuration(episode.episode.duration)}
-                    </text>
+                    </SelectableText>
                   </box>
                 </SelectableBox>
               </>

src/pages/Search/ResultCard.tsx

@@ -27,19 +27,19 @@ export function ResultCard(props: ResultCardProps) {
         justifyContent="space-between"
         alignItems="center"
       >
-        <box flexDirection="row" gap={2} alignItems="center">
-            <SelectableText
-              selected={() => props.selected}
-              fg={theme.primary}
-            >
-              <strong>{podcast().title}</strong>
-            </SelectableText>
-          <SourceBadge
-            sourceId={props.result.sourceId}
-            sourceName={props.result.sourceName}
-            sourceType={props.result.sourceType}
-          />
-        </box>
+         <box flexDirection="row" gap={2} alignItems="center">
+             <SelectableText
+               selected={() => props.selected}
+               primary
+             >
+               <strong>{podcast().title}</strong>
+             </SelectableText>
+           <SourceBadge
+             sourceId={props.result.sourceId}
+             sourceName={props.result.sourceName}
+             sourceType={props.result.sourceType}
+           />
+         </box>
         <Show when={podcast().isSubscribed}>
             <text fg={theme.success}>[Subscribed]</text>
         </Show>