Design system tweaks (#2822)

* Tweak palette, theme naming, update usages

* Update Typography, replace the few usages

src/screens/Deactivated.tsx

@@ -10,9 +10,8 @@ import {pluralize} from '#/lib/strings/helpers'
 
 import {atoms as a, useTheme, useBreakpoints} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {Text} from '#/components/Typography'
+import {Text, P} from '#/components/Typography'
 import {isWeb} from '#/platform/detection'
-import {H2, P} from '#/components/Typography'
 import {ScrollView} from '#/view/com/util/Views'
 import {Loader} from '#/components/Loader'
 import {Logo} from '#/view/icons/Logo'
@@ -100,10 +99,10 @@ export function Deactivated() {
               <Logo width={120} />
             </View>
 
-            <H2 style={[a.pb_sm]}>
+            <Text style={[a.text_4xl, a.font_bold, a.pb_sm]}>
               <Trans>You're in line</Trans>
-            </H2>
-            <P style={[t.atoms.text_contrast_700]}>
+            </Text>
+            <P style={[t.atoms.text_contrast_medium]}>
               <Trans>
                 There's been a rush of new users to Bluesky! We'll activate your
                 account as soon as we can.

src/screens/Onboarding/Layout.tsx

@@ -165,7 +165,7 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
           isWeb ? a.fixed : a.absolute,
           {bottom: 0, left: 0, right: 0},
           t.atoms.bg,
-          t.atoms.border,
+          t.atoms.border_contrast_low,
           a.border_t,
           a.align_center,
           gtMobile ? a.px_5xl : a.px_xl,
@@ -227,5 +227,7 @@ export function Description({
   style,
 }: React.PropsWithChildren<TextStyleProp>) {
   const t = useTheme()
-  return <P style={[t.atoms.text_contrast_700, flatten(style)]}>{children}</P>
+  return (
+    <P style={[t.atoms.text_contrast_medium, flatten(style)]}>{children}</P>
+  )
 }

src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx

@@ -8,7 +8,7 @@ import {msg} from '@lingui/macro'
 import {useTheme, atoms as a} from '#/alf'
 import * as Toggle from '#/components/forms/Toggle'
 import {useFeedSourceInfoQuery, FeedSourceInfo} from '#/state/queries/feed'
-import {Text, H3} from '#/components/Typography'
+import {Text} from '#/components/Typography'
 import {RichText} from '#/components/RichText'
 
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
@@ -94,14 +94,14 @@ function PrimaryFeedCardInner({
         </View>
 
         <View style={[a.pt_xs, a.flex_grow]}>
-          <H3
+          <Text
             style={[
               a.text_lg,
               a.font_bold,
               ctx.selected && styles.textSelected,
             ]}>
             {feed.displayName}
-          </H3>
+          </Text>
 
           <Text
             style={[
@@ -137,7 +137,7 @@ function PrimaryFeedCardInner({
           },
           a.mt_md,
           a.w_full,
-          t.name === 'light' ? t.atoms.border : t.atoms.border_contrast,
+          t.atoms.border_contrast_low,
           ctx.selected && {
             borderTopColor: t.palette.white,
           },
@@ -239,14 +239,14 @@ function FeedCardInner({feed}: {feed: FeedSourceInfo; config: FeedConfig}) {
         </View>
 
         <View style={[a.pt_2xs, a.flex_grow]}>
-          <H3
+          <Text
             style={[
               a.text_md,
               a.font_bold,
               ctx.selected && styles.textSelected,
             ]}>
             {feed.displayName}
-          </H3>
+          </Text>
           <Text
             style={[
               {opacity: 0.8},
@@ -281,7 +281,7 @@ function FeedCardInner({feed}: {feed: FeedSourceInfo; config: FeedConfig}) {
           },
           a.mt_md,
           a.w_full,
-          t.name === 'light' ? t.atoms.border : t.atoms.border_contrast,
+          t.atoms.border_contrast_low,
           ctx.selected && {
             borderTopColor: t.palette.primary_200,
           },
@@ -360,7 +360,7 @@ export function FeedCardPlaceholder({primary}: {primary?: boolean}) {
           },
           a.mt_md,
           a.w_full,
-          t.atoms.border,
+          t.atoms.border_contrast_low,
         ]}
       />
 

src/screens/Onboarding/StepAlgoFeeds/index.tsx

@@ -115,12 +115,22 @@ export function StepAlgoFeeds() {
           onChange={setPrimaryFeedUris}
           label={_(msg`Select your primary algorithmic feeds`)}>
           <Text
-            style={[a.text_md, a.pt_4xl, a.pb_md, t.atoms.text_contrast_700]}>
+            style={[
+              a.text_md,
+              a.pt_4xl,
+              a.pb_md,
+              t.atoms.text_contrast_medium,
+            ]}>
             <Trans>We recommend our "Discover" feed:</Trans>
           </Text>
           <FeedCard config={PRIMARY_FEEDS[0]} />
           <Text
-            style={[a.text_md, a.pt_4xl, a.pb_lg, t.atoms.text_contrast_700]}>
+            style={[
+              a.text_md,
+              a.pt_4xl,
+              a.pb_lg,
+              t.atoms.text_contrast_medium,
+            ]}>
             <Trans>We also think you'll like "For You" by Skygaze:</Trans>
           </Text>
           <FeedCard config={PRIMARY_FEEDS[1]} />
@@ -131,7 +141,12 @@ export function StepAlgoFeeds() {
           onChange={setSeconaryFeedUris}
           label={_(msg`Select your secondary algorithmic feeds`)}>
           <Text
-            style={[a.text_md, a.pt_4xl, a.pb_lg, t.atoms.text_contrast_700]}>
+            style={[
+              a.text_md,
+              a.pt_4xl,
+              a.pb_lg,
+              t.atoms.text_contrast_medium,
+            ]}>
             <Trans>There are many feeds to try:</Trans>
           </Text>
           <View style={[a.gap_md]}>

src/screens/Onboarding/StepFinished.tsx

@@ -101,7 +101,7 @@ export function StepFinished() {
               <Trans>Public</Trans>
             </Text>
             <Text
-              style={[t.atoms.text_contrast_500, a.text_md, a.leading_snug]}>
+              style={[t.atoms.text_contrast_medium, a.text_md, a.leading_snug]}>
               <Trans>
                 Your posts, likes, and blocks are public. Mutes are private.
               </Trans>
@@ -115,7 +115,7 @@ export function StepFinished() {
               <Trans>Open</Trans>
             </Text>
             <Text
-              style={[t.atoms.text_contrast_500, a.text_md, a.leading_snug]}>
+              style={[t.atoms.text_contrast_medium, a.text_md, a.leading_snug]}>
               <Trans>Never lose access to your followers or data.</Trans>
             </Text>
           </View>
@@ -131,7 +131,7 @@ export function StepFinished() {
               <Trans>Flexible</Trans>
             </Text>
             <Text
-              style={[t.atoms.text_contrast_500, a.text_md, a.leading_snug]}>
+              style={[t.atoms.text_contrast_medium, a.text_md, a.leading_snug]}>
               <Trans>Choose the algorithms that power your custom feeds.</Trans>
             </Text>
           </View>

src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx

@@ -96,7 +96,7 @@ export function AdultContentEnabledPref({
           <Text
             style={[
               a.flex_1,
-              t.atoms.text_contrast_700,
+              t.atoms.text_contrast_medium,
               a.leading_snug,
               {paddingTop: 1},
             ]}>

src/screens/Onboarding/StepModeration/ModerationOption.tsx

@@ -57,7 +57,7 @@ export function ModerationOption({
       entering={isMounted.current ? FadeIn : undefined}>
       <View style={[a.gap_xs, {width: '50%'}]}>
         <Text style={[a.font_bold]}>{groupInfo.title}</Text>
-        <Text style={[t.atoms.text_contrast_700, a.leading_snug]}>
+        <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
           {groupInfo.subtitle}
         </Text>
       </View>

src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx

@@ -95,7 +95,7 @@ export function SuggestedAccountCard({
             <Text style={[a.font_bold, a.text_md, a.pb_xs]} numberOfLines={1}>
               {profile.displayName}
             </Text>
-            <Text style={[t.atoms.text_contrast_600]}>{profile.handle}</Text>
+            <Text style={[t.atoms.text_contrast_medium]}>{profile.handle}</Text>
           </View>
         </View>
 
@@ -124,7 +124,7 @@ export function SuggestedAccountCard({
                 borderTopWidth: 1,
               },
               a.w_full,
-              t.name === 'light' ? t.atoms.border : t.atoms.border_contrast,
+              t.atoms.border_contrast_low,
               ctx.selected && {
                 borderTopColor: t.palette.primary_200,
               },