Fix primary text on dark

app/soapbox/components/ui/button/useButtonStyles.ts

@@ -25,7 +25,7 @@ const useButtonStyles = ({
     accent: 'border-transparent text-white bg-accent-500 hover:bg-accent-300 focus:ring-pink-500 focus:ring-2 focus:ring-offset-2',
     danger: 'border-transparent text-danger-700 bg-danger-100 hover:bg-danger-200 focus:ring-danger-500 focus:ring-2 focus:ring-offset-2',
     transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
-    link: 'border-transparent text-primary-600 hover:bg-gray-100 hover:text-primary-700',
+    link: 'border-transparent text-primary-600 dark:text-primary-400 hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-slate-900/50',
   };
 
   const sizes = {

app/soapbox/components/ui/text/text.tsx

@@ -13,7 +13,7 @@ type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' |
 const themes = {
   default: 'text-gray-900 dark:text-gray-100',
   danger: 'text-danger-600',
-  primary: 'text-primary-600',
+  primary: 'text-primary-600 dark:text-primary-400',
   muted: 'text-gray-500 dark:text-gray-400',
   subtle: 'text-gray-400 dark:text-gray-500',
   success: 'text-success-600',

app/soapbox/features/compose/components/compose_form_button.tsx

@@ -21,7 +21,7 @@ const ComposeFormButton: React.FC<IComposeFormButton> = ({
   return (
     <div>
       <IconButton
-        className={classNames('text-gray-400 hover:text-gray-600', { 'text-primary-600 hover:text-primary-500': active })}
+        className={classNames('text-gray-400 hover:text-gray-600', { 'text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300': active })}
         src={icon}
         title={title}
         disabled={disabled}

app/soapbox/features/directory/components/account_card.js

@@ -76,7 +76,7 @@ class AccountCard extends ImmutablePureComponent {
         <div className='directory__card__extra'>
           <div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('statuses_count'))}</Text> <small><FormattedMessage id='account.posts' defaultMessage='Toots' /></small></div>
           <div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('followers_count'))}</Text> <small><FormattedMessage id='account.followers' defaultMessage='Followers' /></small></div>
-          <div className='accounts-table__count'>{account.get('last_status_at') === null ? <Text theme='primary' size='sm'><FormattedMessage id='account.never_active' defaultMessage='Never' /></Text> : <RelativeTimestamp className='text-primary-600' timestamp={account.get('last_status_at')} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small></div>
+          <div className='accounts-table__count'>{account.get('last_status_at') === null ? <Text theme='primary' size='sm'><FormattedMessage id='account.never_active' defaultMessage='Never' /></Text> : <RelativeTimestamp className='text-primary-600 dark:text-primary-400' timestamp={account.get('last_status_at')} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small></div>
         </div>
       </div>
     );

app/soapbox/features/notifications/components/notification.tsx

@@ -204,7 +204,7 @@ const Notification: React.FC<INotificaton> = (props) => {
       return (
         <Icon
           src={icons[type]}
-          className='text-primary-600 flex-none'
+          className='text-primary-600 dark:text-primary-400 flex-none'
         />
       );
     } else {

app/soapbox/features/onboarding/steps/avatar-selection-step.tsx

@@ -73,7 +73,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-slate-900/50 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />
@@ -102,7 +102,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
                   onClick={openFilePicker}
                   type='button'
                   className={classNames({
-                    'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white hover:bg-primary-700': true,
+                    'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-slate-800 hover:bg-primary-700': true,
                     'opacity-50 pointer-events-none': isSubmitting,
                   })}
                   disabled={isSubmitting}

app/soapbox/features/onboarding/steps/completed-step.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormattedMessage } from'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
 
@@ -7,7 +7,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
   <Card variant='rounded' size='xl'>
     <CardBody>
       <Stack space={2}>
-        <Icon strokeWidth={1} src={require('@tabler/icons/icons/confetti.svg')} className='w-16 h-16 mx-auto text-primary-600' />
+        <Icon strokeWidth={1} src={require('@tabler/icons/icons/confetti.svg')} className='w-16 h-16 mx-auto text-primary-600 dark:text-primary-400' />
 
         <Text size='2xl' align='center' weight='bold'>
           <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />

app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx

@@ -120,7 +120,7 @@ const ReasonStep = (_props: IReasonStep) => {
                       value={rule.id}
                       checked={isSelected}
                       readOnly
-                      className='h-4 w-4 cursor-pointer text-primary-600 border-gray-300 rounded focus:ring-primary-500'
+                      className='h-4 w-4 cursor-pointer text-primary-600 dark:text-primary-400 border-gray-300 rounded focus:ring-primary-500'
                     />
                   </button>
                 );

app/soapbox/features/verification/email_passthru.js

@@ -31,7 +31,7 @@ const Success = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/icons/circle-check.svg')} className='text-primary-600 h-10 w-10' />
+      <Icon src={require('@tabler/icons/icons/circle-check.svg')} className='text-primary-600 dark:text-primary-400 h-10 w-10' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.emailConfirmedHeading)}
       </Text>

app/soapbox/features/verification/steps/email-verification.js

@@ -34,7 +34,7 @@ const EmailSent = ({ handleSubmit }) => {
 
   return (
     <div className='sm:pt-10 mx-auto flex flex-col items-center justify-center'>
-      <Icon src={require('@tabler/icons/icons/send.svg')} className='text-primary-600 h-12 w-12 mb-5' />
+      <Icon src={require('@tabler/icons/icons/send.svg')} className='text-primary-600 dark:text-primary-400 h-12 w-12 mb-5' />
 
       <div className='space-y-1 text-center mb-4'>
         <Text weight='bold' size='3xl'>We sent you an email</Text>

app/styles/components/columns.scss

@@ -771,7 +771,7 @@
   }
 
   a {
-    @apply text-primary-600 no-underline hover:underline;
+    @apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
   }
 }
 

app/styles/components/datepicker.scss

@@ -113,5 +113,5 @@
 .react-datepicker__month-text--keyboard-selected,
 .react-datepicker__quarter-text--keyboard-selected,
 .react-datepicker__year-text--keyboard-selected {
-  @apply bg-primary-50 hover:bg-primary-100 text-primary-600;
+  @apply bg-primary-50 hover:bg-primary-100 text-primary-600 dark:text-primary-400;
 }

app/styles/polls.scss

@@ -193,7 +193,7 @@
   }
 
   .button.button-secondary {
-    @apply h-auto py-1.5 px-2.5 text-primary-600 border-primary-600;
+    @apply h-auto py-1.5 px-2.5 text-primary-600 dark:text-primary-400 border-primary-600;
   }
 
   li {

app/styles/utilities.scss

@@ -13,5 +13,5 @@
 }
 
 .mention {
-  @apply text-primary-600 hover:underline;
+  @apply text-primary-600 dark:text-primary-400 hover:underline;
 }