Design system tweaks (#2822)

* Tweak palette, theme naming, update usages

* Update Typography, replace the few usages

src/alf/themes.ts

@@ -73,19 +73,19 @@ export const darkPalette: Palette = {
   white: tokens.color.gray_0,
   black: tokens.color.trueBlack,
 
-  contrast_25: tokens.color.gray_975,
+  contrast_25: tokens.color.gray_1000,
-  contrast_50: tokens.color.gray_950,
+  contrast_50: tokens.color.gray_975,
-  contrast_100: tokens.color.gray_900,
+  contrast_100: tokens.color.gray_950,
-  contrast_200: tokens.color.gray_800,
+  contrast_200: tokens.color.gray_900,
-  contrast_300: tokens.color.gray_700,
+  contrast_300: tokens.color.gray_800,
-  contrast_400: tokens.color.gray_600,
+  contrast_400: tokens.color.gray_700,
-  contrast_500: tokens.color.gray_500,
+  contrast_500: tokens.color.gray_600,
-  contrast_600: tokens.color.gray_400,
+  contrast_600: tokens.color.gray_500,
-  contrast_700: tokens.color.gray_300,
+  contrast_700: tokens.color.gray_400,
-  contrast_800: tokens.color.gray_200,
+  contrast_800: tokens.color.gray_300,
-  contrast_900: tokens.color.gray_100,
+  contrast_900: tokens.color.gray_200,
-  contrast_950: tokens.color.gray_50,
+  contrast_950: tokens.color.gray_100,
-  contrast_975: tokens.color.gray_25,
+  contrast_975: tokens.color.gray_50,
 
   primary_25: tokens.color.blue_25,
   primary_50: tokens.color.blue_50,
@@ -133,6 +133,20 @@ export const darkPalette: Palette = {
 export const dimPalette: Palette = {
   ...darkPalette,
   black: tokens.color.gray_1000,
+
+  contrast_25: tokens.color.gray_975,
+  contrast_50: tokens.color.gray_950,
+  contrast_100: tokens.color.gray_900,
+  contrast_200: tokens.color.gray_800,
+  contrast_300: tokens.color.gray_700,
+  contrast_400: tokens.color.gray_600,
+  contrast_500: tokens.color.gray_500,
+  contrast_600: tokens.color.gray_400,
+  contrast_700: tokens.color.gray_300,
+  contrast_800: tokens.color.gray_200,
+  contrast_900: tokens.color.gray_100,
+  contrast_950: tokens.color.gray_50,
+  contrast_975: tokens.color.gray_25,
 } as const
 
 export const light = {
@@ -142,17 +156,14 @@ export const light = {
     text: {
       color: lightPalette.black,
     },
-    text_contrast_700: {
+    text_contrast_low: {
+      color: lightPalette.contrast_400,
+    },
+    text_contrast_medium: {
       color: lightPalette.contrast_700,
     },
-    text_contrast_600: {
+    text_contrast_high: {
-      color: lightPalette.contrast_600,
+      color: lightPalette.contrast_900,
-    },
-    text_contrast_500: {
-      color: lightPalette.contrast_500,
-    },
-    text_contrast_400: {
-      color: lightPalette.contrast_400,
     },
     text_inverted: {
       color: lightPalette.white,
@@ -175,11 +186,38 @@ export const light = {
     bg_contrast_300: {
       backgroundColor: lightPalette.contrast_300,
     },
-    border: {
+    bg_contrast_400: {
+      backgroundColor: lightPalette.contrast_400,
+    },
+    bg_contrast_500: {
+      backgroundColor: lightPalette.contrast_500,
+    },
+    bg_contrast_600: {
+      backgroundColor: lightPalette.contrast_600,
+    },
+    bg_contrast_700: {
+      backgroundColor: lightPalette.contrast_700,
+    },
+    bg_contrast_800: {
+      backgroundColor: lightPalette.contrast_800,
+    },
+    bg_contrast_900: {
+      backgroundColor: lightPalette.contrast_900,
+    },
+    bg_contrast_950: {
+      backgroundColor: lightPalette.contrast_950,
+    },
+    bg_contrast_975: {
+      backgroundColor: lightPalette.contrast_975,
+    },
+    border_contrast_low: {
       borderColor: lightPalette.contrast_100,
     },
-    border_contrast: {
+    border_contrast_medium: {
-      borderColor: lightPalette.contrast_400,
+      borderColor: lightPalette.contrast_200,
+    },
+    border_contrast_high: {
+      borderColor: lightPalette.contrast_300,
     },
     shadow_sm: {
       ...atoms.shadow_sm,
@@ -203,17 +241,14 @@ export const dark: Theme = {
     text: {
       color: darkPalette.white,
     },
-    text_contrast_700: {
+    text_contrast_low: {
+      color: darkPalette.contrast_400,
+    },
+    text_contrast_medium: {
       color: darkPalette.contrast_700,
     },
-    text_contrast_600: {
+    text_contrast_high: {
-      color: darkPalette.contrast_600,
+      color: darkPalette.contrast_900,
-    },
-    text_contrast_500: {
-      color: darkPalette.contrast_500,
-    },
-    text_contrast_400: {
-      color: darkPalette.contrast_400,
     },
     text_inverted: {
       color: darkPalette.black,
@@ -222,24 +257,51 @@ export const dark: Theme = {
       backgroundColor: darkPalette.black,
     },
     bg_contrast_25: {
-      backgroundColor: darkPalette.contrast_50,
+      backgroundColor: darkPalette.contrast_25,
     },
     bg_contrast_50: {
-      backgroundColor: darkPalette.contrast_100,
+      backgroundColor: darkPalette.contrast_50,
     },
     bg_contrast_100: {
-      backgroundColor: darkPalette.contrast_200,
+      backgroundColor: darkPalette.contrast_100,
     },
     bg_contrast_200: {
-      backgroundColor: darkPalette.contrast_300,
+      backgroundColor: darkPalette.contrast_200,
     },
     bg_contrast_300: {
+      backgroundColor: darkPalette.contrast_300,
+    },
+    bg_contrast_400: {
       backgroundColor: darkPalette.contrast_400,
     },
-    border: {
+    bg_contrast_500: {
+      backgroundColor: darkPalette.contrast_500,
+    },
+    bg_contrast_600: {
+      backgroundColor: darkPalette.contrast_600,
+    },
+    bg_contrast_700: {
+      backgroundColor: darkPalette.contrast_700,
+    },
+    bg_contrast_800: {
+      backgroundColor: darkPalette.contrast_800,
+    },
+    bg_contrast_900: {
+      backgroundColor: darkPalette.contrast_900,
+    },
+    bg_contrast_950: {
+      backgroundColor: darkPalette.contrast_950,
+    },
+    bg_contrast_975: {
+      backgroundColor: darkPalette.contrast_975,
+    },
+    border_contrast_low: {
       borderColor: darkPalette.contrast_100,
     },
-    border_contrast: {
+    border_contrast_medium: {
+      borderColor: darkPalette.contrast_200,
+    },
+    border_contrast_high: {
       borderColor: darkPalette.contrast_300,
     },
     shadow_sm: {
@@ -265,11 +327,71 @@ export const dim: Theme = {
   name: 'dim',
   atoms: {
     ...dark.atoms,
+    text: {
+      color: dimPalette.white,
+    },
+    text_contrast_low: {
+      color: dimPalette.contrast_400,
+    },
+    text_contrast_medium: {
+      color: dimPalette.contrast_700,
+    },
+    text_contrast_high: {
+      color: dimPalette.contrast_900,
+    },
     text_inverted: {
       color: dimPalette.black,
     },
     bg: {
       backgroundColor: dimPalette.black,
     },
+    bg_contrast_25: {
+      backgroundColor: dimPalette.contrast_25,
+    },
+    bg_contrast_50: {
+      backgroundColor: dimPalette.contrast_50,
+    },
+    bg_contrast_100: {
+      backgroundColor: dimPalette.contrast_100,
+    },
+    bg_contrast_200: {
+      backgroundColor: dimPalette.contrast_200,
+    },
+    bg_contrast_300: {
+      backgroundColor: dimPalette.contrast_300,
+    },
+    bg_contrast_400: {
+      backgroundColor: dimPalette.contrast_400,
+    },
+    bg_contrast_500: {
+      backgroundColor: dimPalette.contrast_500,
+    },
+    bg_contrast_600: {
+      backgroundColor: dimPalette.contrast_600,
+    },
+    bg_contrast_700: {
+      backgroundColor: dimPalette.contrast_700,
+    },
+    bg_contrast_800: {
+      backgroundColor: dimPalette.contrast_800,
+    },
+    bg_contrast_900: {
+      backgroundColor: dimPalette.contrast_900,
+    },
+    bg_contrast_950: {
+      backgroundColor: dimPalette.contrast_950,
+    },
+    bg_contrast_975: {
+      backgroundColor: dimPalette.contrast_975,
+    },
+    border_contrast_low: {
+      borderColor: dimPalette.contrast_100,
+    },
+    border_contrast_medium: {
+      borderColor: dimPalette.contrast_200,
+    },
+    border_contrast_high: {
+      borderColor: dimPalette.contrast_300,
+    },
   },
 }

src/alf/tokens.ts

@@ -13,13 +13,13 @@ export const color = {
   gray_300: `hsl(${BLUE_HUE}, 20%, 70%)`,
   gray_400: `hsl(${BLUE_HUE}, 20%, 60%)`,
   gray_500: `hsl(${BLUE_HUE}, 20%, 50%)`,
-  gray_600: `hsl(${BLUE_HUE}, 20%, 42%)`,
+  gray_600: `hsl(${BLUE_HUE}, 24%, 42%)`,
-  gray_700: `hsl(${BLUE_HUE}, 20%, 34%)`,
+  gray_700: `hsl(${BLUE_HUE}, 24%, 34%)`,
-  gray_800: `hsl(${BLUE_HUE}, 20%, 26%)`,
+  gray_800: `hsl(${BLUE_HUE}, 28%, 26%)`,
-  gray_900: `hsl(${BLUE_HUE}, 20%, 18%)`,
+  gray_900: `hsl(${BLUE_HUE}, 28%, 18%)`,
-  gray_950: `hsl(${BLUE_HUE}, 20%, 10%)`,
+  gray_950: `hsl(${BLUE_HUE}, 28%, 10%)`,
-  gray_975: `hsl(${BLUE_HUE}, 20%, 7%)`,
+  gray_975: `hsl(${BLUE_HUE}, 28%, 7%)`,
-  gray_1000: `hsl(${BLUE_HUE}, 20%, 4%)`,
+  gray_1000: `hsl(${BLUE_HUE}, 28%, 4%)`,
 
   blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`,
   blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`,

src/components/Divider.tsx

@@ -1,10 +1,18 @@
 import React from 'react'
 import {View} from 'react-native'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, ViewStyleProp, flatten} from '#/alf'
-import {ViewStyleProp} from '#/alf'
 
 export function Divider({style}: ViewStyleProp) {
   const t = useTheme()
 
-  return <View style={[a.w_full, a.border_t, t.atoms.border, style]} />
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.border_t,
+        t.atoms.border_contrast_low,
+        flatten(style),
+      ]}
+    />
+  )
 }

src/components/Prompt.tsx

@@ -4,7 +4,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useTheme, atoms as a} from '#/alf'
-import {H4, P} from '#/components/Typography'
+import {Text} from '#/components/Typography'
 import {Button} from '#/components/Button'
 
 import * as Dialog from '#/components/Dialog'
@@ -50,14 +50,11 @@ export function Outer({
 }
 
 export function Title({children}: React.PropsWithChildren<{}>) {
-  const t = useTheme()
   const {titleId} = React.useContext(Context)
   return (
-    <H4
+    <Text nativeID={titleId} style={[a.text_2xl, a.font_bold, a.pb_sm]}>
-      nativeID={titleId}
-      style={[a.font_bold, t.atoms.text_contrast_700, a.pb_sm]}>
       {children}
-    </H4>
+    </Text>
   )
 }
 
@@ -65,9 +62,11 @@ export function Description({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
   const {descriptionId} = React.useContext(Context)
   return (
-    <P nativeID={descriptionId} style={[t.atoms.text, a.pb_lg]}>
+    <Text
+      nativeID={descriptionId}
+      style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high, a.pb_lg]}>
       {children}
-    </P>
+    </Text>
   )
 }
 

src/components/Typography.tsx

@@ -41,138 +41,42 @@ function normalizeTextStyles(styles: TextStyle[]) {
   return s
 }
 
+/**
+ * Our main text component. Use this most of the time.
+ */
 export function Text({style, ...rest}: TextProps) {
   const t = useTheme()
   const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, flatten(style)])
   return <RNText style={s} {...rest} />
 }
 
-export function H1({style, ...rest}: TextProps) {
+export function createHeadingElement({level}: {level: number}) {
-  const t = useTheme()
+  return function HeadingElement({style, ...rest}: TextProps) {
-  const attr =
+    const t = useTheme()
-    web({
+    const attr =
-      role: 'heading',
+      web({
-      'aria-level': 1,
+        role: 'heading',
-    }) || {}
+        'aria-level': level,
-  return (
+      }) || {}
-    <RNText
+    return (
-      {...attr}
+      <RNText
-      {...rest}
+        {...attr}
-      style={normalizeTextStyles([
+        {...rest}
-        atoms.text_5xl,
+        style={normalizeTextStyles([t.atoms.text, flatten(style)])}
-        atoms.font_bold,
+      />
-        t.atoms.text,
+    )
-        flatten(style),
+  }
-      ])}
-    />
-  )
-}
-
-export function H2({style, ...rest}: TextProps) {
-  const t = useTheme()
-  const attr =
-    web({
-      role: 'heading',
-      'aria-level': 2,
-    }) || {}
-  return (
-    <RNText
-      {...attr}
-      {...rest}
-      style={normalizeTextStyles([
-        atoms.text_4xl,
-        atoms.font_bold,
-        t.atoms.text,
-        flatten(style),
-      ])}
-    />
-  )
-}
-
-export function H3({style, ...rest}: TextProps) {
-  const t = useTheme()
-  const attr =
-    web({
-      role: 'heading',
-      'aria-level': 3,
-    }) || {}
-  return (
-    <RNText
-      {...attr}
-      {...rest}
-      style={normalizeTextStyles([
-        atoms.text_3xl,
-        atoms.font_bold,
-        t.atoms.text,
-        flatten(style),
-      ])}
-    />
-  )
-}
-
-export function H4({style, ...rest}: TextProps) {
-  const t = useTheme()
-  const attr =
-    web({
-      role: 'heading',
-      'aria-level': 4,
-    }) || {}
-  return (
-    <RNText
-      {...attr}
-      {...rest}
-      style={normalizeTextStyles([
-        atoms.text_2xl,
-        atoms.font_bold,
-        t.atoms.text,
-        flatten(style),
-      ])}
-    />
-  )
-}
-
-export function H5({style, ...rest}: TextProps) {
-  const t = useTheme()
-  const attr =
-    web({
-      role: 'heading',
-      'aria-level': 5,
-    }) || {}
-  return (
-    <RNText
-      {...attr}
-      {...rest}
-      style={normalizeTextStyles([
-        atoms.text_xl,
-        atoms.font_bold,
-        t.atoms.text,
-        flatten(style),
-      ])}
-    />
-  )
-}
-
-export function H6({style, ...rest}: TextProps) {
-  const t = useTheme()
-  const attr =
-    web({
-      role: 'heading',
-      'aria-level': 6,
-    }) || {}
-  return (
-    <RNText
-      {...attr}
-      {...rest}
-      style={normalizeTextStyles([
-        atoms.text_lg,
-        atoms.font_bold,
-        t.atoms.text,
-        flatten(style),
-      ])}
-    />
-  )
 }
 
+/*
+ * Use semantic components when it's beneficial to the user or to a web scraper
+ */
+export const H1 = createHeadingElement({level: 1})
+export const H2 = createHeadingElement({level: 2})
+export const H3 = createHeadingElement({level: 3})
+export const H4 = createHeadingElement({level: 4})
+export const H5 = createHeadingElement({level: 5})
+export const H6 = createHeadingElement({level: 6})
 export function P({style, ...rest}: TextProps) {
   const t = useTheme()
   const attr =

src/components/forms/TextField.tsx

@@ -241,7 +241,8 @@ export const Input = createInput(TextInput)
 export function Label({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
   return (
-    <Text style={[a.text_sm, a.font_bold, t.atoms.text_contrast_600, a.mb_sm]}>
+    <Text
+      style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium, a.mb_sm]}>
       {children}
     </Text>
   )
@@ -315,7 +316,7 @@ export function Suffix({
         a.z_20,
         a.pr_sm,
         a.text_md,
-        t.atoms.text_contrast_400,
+        t.atoms.text_contrast_medium,
         {
           pointerEvents: 'none',
         },

src/components/forms/Toggle.tsx

@@ -347,7 +347,7 @@ export function Checkbox() {
         a.align_center,
         a.border,
         a.rounded_xs,
-        t.atoms.border_contrast,
+        t.atoms.border_contrast_high,
         {
           height: 20,
           width: 20,
@@ -393,7 +393,7 @@ export function Switch() {
         a.border,
         a.rounded_full,
         t.atoms.bg,
-        t.atoms.border_contrast,
+        t.atoms.border_contrast_high,
         {
           height: 20,
           width: 30,
@@ -445,7 +445,7 @@ export function Radio() {
         a.align_center,
         a.border,
         a.rounded_full,
-        t.atoms.border_contrast,
+        t.atoms.border_contrast_high,
         {
           height: 20,
           width: 20,

src/components/forms/ToggleButton.tsx

@@ -25,7 +25,7 @@ export function Group({children, multiple, ...props}: GroupProps) {
           a.border,
           a.rounded_sm,
           a.overflow_hidden,
-          t.atoms.border,
+          t.atoms.border_contrast_low,
         ]}>
         {children}
       </View>
@@ -103,7 +103,7 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
         }),
         a.px_sm,
         t.atoms.bg,
-        t.atoms.border,
+        t.atoms.border_contrast_low,
         baseStyles,
         activeStyles,
         (state.hovered || state.focused || state.pressed) && hoverStyles,
@@ -113,7 +113,7 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
           style={[
             a.text_center,
             a.font_bold,
-            t.atoms.text_contrast_500,
+            t.atoms.text_contrast_medium,
             textStyles,
           ]}>
           {children}

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>
+            </Text>
-            <P style={[t.atoms.text_contrast_700]}>
+            <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,
               },

src/view/screens/Storybook/Theming.tsx

@@ -14,22 +14,22 @@ export function Theming() {
 
       <Text style={[a.font_bold, a.pt_xl, a.px_md]}>theme.atoms.text</Text>
 
-      <View style={[a.flex_1, t.atoms.border, a.border_t]} />
+      <View style={[a.flex_1, t.atoms.border_contrast_high, a.border_t]} />
-      <Text style={[a.font_bold, t.atoms.text_contrast_600, a.px_md]}>
+      <Text style={[a.font_bold, t.atoms.text_contrast_high, a.px_md]}>
-        theme.atoms.text_contrast_600
+        theme.atoms.text_contrast_high
       </Text>
 
-      <View style={[a.flex_1, t.atoms.border, a.border_t]} />
+      <View style={[a.flex_1, t.atoms.border_contrast_medium, a.border_t]} />
-      <Text style={[a.font_bold, t.atoms.text_contrast_500, a.px_md]}>
+      <Text style={[a.font_bold, t.atoms.text_contrast_medium, a.px_md]}>
-        theme.atoms.text_contrast_500
+        theme.atoms.text_contrast_medium
       </Text>
 
-      <View style={[a.flex_1, t.atoms.border, a.border_t]} />
+      <View style={[a.flex_1, t.atoms.border_contrast_low, a.border_t]} />
-      <Text style={[a.font_bold, t.atoms.text_contrast_400, a.px_md]}>
+      <Text style={[a.font_bold, t.atoms.text_contrast_low, a.px_md]}>
-        theme.atoms.text_contrast_400
+        theme.atoms.text_contrast_low
       </Text>
 
-      <View style={[a.flex_1, t.atoms.border_contrast, a.border_t]} />
+      <View style={[a.flex_1, t.atoms.border_contrast_low, a.border_t]} />
 
       <View style={[a.w_full, a.gap_md]}>
         <View style={[t.atoms.bg, a.justify_center, a.p_md]}>

src/view/screens/Storybook/Typography.tsx

@@ -2,20 +2,12 @@ import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a} from '#/alf'
-import {Text, H1, H2, H3, H4, H5, H6, P} from '#/components/Typography'
+import {Text} from '#/components/Typography'
 import {RichText} from '#/components/RichText'
 
 export function Typography() {
   return (
     <View style={[a.gap_md]}>
-      <H1>H1 Heading</H1>
-      <H2>H2 Heading</H2>
-      <H3>H3 Heading</H3>
-      <H4>H4 Heading</H4>
-      <H5>H5 Heading</H5>
-      <H6>H6 Heading</H6>
-      <P>P Paragraph</P>
-
       <Text style={[a.text_5xl]}>atoms.text_5xl</Text>
       <Text style={[a.text_4xl]}>atoms.text_4xl</Text>
       <Text style={[a.text_3xl]}>atoms.text_3xl</Text>