Design system tweaks (#2822)

* Tweak palette, theme naming, update usages

* Update Typography, replace the few usages

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 {ViewStyleProp} from '#/alf'
+import {atoms as a, useTheme, ViewStyleProp, flatten} 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
-      nativeID={titleId}
-      style={[a.font_bold, t.atoms.text_contrast_700, a.pb_sm]}>
+    <Text nativeID={titleId} style={[a.text_2xl, a.font_bold, 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) {
-  const t = useTheme()
-  const attr =
-    web({
-      role: 'heading',
-      'aria-level': 1,
-    }) || {}
-  return (
-    <RNText
-      {...attr}
-      {...rest}
-      style={normalizeTextStyles([
-        atoms.text_5xl,
-        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),
-      ])}
-    />
-  )
+export function createHeadingElement({level}: {level: number}) {
+  return function HeadingElement({style, ...rest}: TextProps) {
+    const t = useTheme()
+    const attr =
+      web({
+        role: 'heading',
+        'aria-level': level,
+      }) || {}
+    return (
+      <RNText
+        {...attr}
+        {...rest}
+        style={normalizeTextStyles([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}