about summary refs log tree commit diff
path: root/src/view/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/screens')
-rw-r--r--src/view/screens/Debug.tsx117
-rw-r--r--src/view/screens/Log.tsx6
-rw-r--r--src/view/screens/Search.tsx2
-rw-r--r--src/view/screens/Settings.tsx6
4 files changed, 102 insertions, 29 deletions
diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx
index 34cb6b5ad..f6e2b389c 100644
--- a/src/view/screens/Debug.tsx
+++ b/src/view/screens/Debug.tsx
@@ -87,7 +87,7 @@ function Heading({label}: {label: string}) {
   const pal = usePalette('default')
   return (
     <View style={{paddingTop: 10, paddingBottom: 5}}>
-      <Text type="h3" style={pal.text}>
+      <Text type="title-lg" style={pal.text}>
         {label}
       </Text>
     </View>
@@ -97,14 +97,14 @@ function Heading({label}: {label: string}) {
 function BaseView() {
   return (
     <View style={{paddingHorizontal: 10}}>
+      <Heading label="Typography" />
+      <TypographyView />
       <Heading label="Palettes" />
       <PaletteView palette="default" />
       <PaletteView palette="primary" />
       <PaletteView palette="secondary" />
       <PaletteView palette="inverted" />
       <PaletteView palette="error" />
-      <Heading label="Typography" />
-      <TypographyView />
       <Heading label="Empty state" />
       <EmptyStateView />
       <Heading label="Loading placeholders" />
@@ -197,36 +197,109 @@ function TypographyView() {
   const pal = usePalette('default')
   return (
     <View style={[pal.view]}>
-      <Text type="h1" style={[pal.text]}>
-        Heading 1
+      <Text type="xxl-thin" style={[pal.text]}>
+        'xxl-thin' lorem ipsum dolor
+      </Text>
+      <Text type="xxl" style={[pal.text]}>
+        'xxl' lorem ipsum dolor
+      </Text>
+      <Text type="xxl-medium" style={[pal.text]}>
+        'xxl-medium' lorem ipsum dolor
+      </Text>
+      <Text type="xxl-bold" style={[pal.text]}>
+        'xxl-bold' lorem ipsum dolor
+      </Text>
+      <Text type="xxl-heavy" style={[pal.text]}>
+        'xxl-heavy' lorem ipsum dolor
+      </Text>
+      <Text type="xl-thin" style={[pal.text]}>
+        'xl-thin' lorem ipsum dolor
+      </Text>
+      <Text type="xl" style={[pal.text]}>
+        'xl' lorem ipsum dolor
+      </Text>
+      <Text type="xl-medium" style={[pal.text]}>
+        'xl-medium' lorem ipsum dolor
+      </Text>
+      <Text type="xl-bold" style={[pal.text]}>
+        'xl-bold' lorem ipsum dolor
+      </Text>
+      <Text type="xl-heavy" style={[pal.text]}>
+        'xl-heavy' lorem ipsum dolor
+      </Text>
+      <Text type="lg-thin" style={[pal.text]}>
+        'lg-thin' lorem ipsum dolor
+      </Text>
+      <Text type="lg" style={[pal.text]}>
+        'lg' lorem ipsum dolor
+      </Text>
+      <Text type="lg-medium" style={[pal.text]}>
+        'lg-medium' lorem ipsum dolor
       </Text>
-      <Text type="h2" style={[pal.text]}>
-        Heading 2
+      <Text type="lg-bold" style={[pal.text]}>
+        'lg-bold' lorem ipsum dolor
       </Text>
-      <Text type="h3" style={[pal.text]}>
-        Heading 3
+      <Text type="lg-heavy" style={[pal.text]}>
+        'lg-heavy' lorem ipsum dolor
       </Text>
-      <Text type="h4" style={[pal.text]}>
-        Heading 4
+      <Text type="md-thin" style={[pal.text]}>
+        'md-thin' lorem ipsum dolor
       </Text>
-      <Text type="subtitle1" style={[pal.text]}>
-        Subtitle 1
+      <Text type="md" style={[pal.text]}>
+        'md' lorem ipsum dolor
       </Text>
-      <Text type="subtitle2" style={[pal.text]}>
-        Subtitle 2
+      <Text type="md-medium" style={[pal.text]}>
+        'md-medium' lorem ipsum dolor
       </Text>
-      <Text type="body1" style={[pal.text]}>
-        Body 1
+      <Text type="md-bold" style={[pal.text]}>
+        'md-bold' lorem ipsum dolor
       </Text>
-      <Text type="body2" style={[pal.text]}>
-        Body 2
+      <Text type="md-heavy" style={[pal.text]}>
+        'md-heavy' lorem ipsum dolor
+      </Text>
+      <Text type="sm-thin" style={[pal.text]}>
+        'sm-thin' lorem ipsum dolor
+      </Text>
+      <Text type="sm" style={[pal.text]}>
+        'sm' lorem ipsum dolor
+      </Text>
+      <Text type="sm-medium" style={[pal.text]}>
+        'sm-medium' lorem ipsum dolor
+      </Text>
+      <Text type="sm-bold" style={[pal.text]}>
+        'sm-bold' lorem ipsum dolor
+      </Text>
+      <Text type="sm-heavy" style={[pal.text]}>
+        'sm-heavy' lorem ipsum dolor
+      </Text>
+      <Text type="xs-thin" style={[pal.text]}>
+        'xs-thin' lorem ipsum dolor
+      </Text>
+      <Text type="xs" style={[pal.text]}>
+        'xs' lorem ipsum dolor
+      </Text>
+      <Text type="xs-medium" style={[pal.text]}>
+        'xs-medium' lorem ipsum dolor
+      </Text>
+      <Text type="xs-bold" style={[pal.text]}>
+        'xs-bold' lorem ipsum dolor
+      </Text>
+      <Text type="xs-heavy" style={[pal.text]}>
+        'xs-heavy' lorem ipsum dolor
+      </Text>
+
+      <Text type="title-xl" style={[pal.text]}>
+        'title-xl' lorem ipsum dolor
+      </Text>
+      <Text type="title-lg" style={[pal.text]}>
+        'title-lg' lorem ipsum dolor
+      </Text>
+      <Text type="title" style={[pal.text]}>
+        'title' lorem ipsum dolor
       </Text>
       <Text type="button" style={[pal.text]}>
         Button
       </Text>
-      <Text type="caption" style={[pal.text]}>
-        Caption
-      </Text>
       <Text type="overline" style={[pal.text]}>
         Overline
       </Text>
diff --git a/src/view/screens/Log.tsx b/src/view/screens/Log.tsx
index 86c5e50e2..43036b014 100644
--- a/src/view/screens/Log.tsx
+++ b/src/view/screens/Log.tsx
@@ -49,7 +49,7 @@ export const Log = observer(function Log({navIdx, visible}: ScreenParams) {
                   ) : (
                     <FontAwesomeIcon icon="exclamation" style={s.red3} />
                   )}
-                  <Text type="body2" style={[styles.summary, pal.text]}>
+                  <Text type="sm" style={[styles.summary, pal.text]}>
                     {entry.summary}
                   </Text>
                   {!!entry.details ? (
@@ -60,14 +60,14 @@ export const Log = observer(function Log({navIdx, visible}: ScreenParams) {
                       style={s.mr5}
                     />
                   ) : undefined}
-                  <Text type="body2" style={[styles.ts, pal.textLight]}>
+                  <Text type="sm" style={[styles.ts, pal.textLight]}>
                     {entry.ts ? ago(entry.ts) : ''}
                   </Text>
                 </TouchableOpacity>
                 {expanded.includes(entry.id) ? (
                   <View style={[pal.view, s.pl10, s.pr10, s.pb10]}>
                     <View style={[pal.btn, styles.details]}>
-                      <Text type="mono1" style={pal.text}>
+                      <Text type="mono" style={pal.text}>
                         {entry.details}
                       </Text>
                     </View>
diff --git a/src/view/screens/Search.tsx b/src/view/screens/Search.tsx
index 5844aa11d..cd5607798 100644
--- a/src/view/screens/Search.tsx
+++ b/src/view/screens/Search.tsx
@@ -82,7 +82,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
                   size={36}
                 />
                 <View style={[s.ml10]}>
-                  <Text type="h5" style={pal.text}>
+                  <Text type="title-sm" style={pal.text}>
                     {item.displayName || item.handle}
                   </Text>
                   <Text style={pal.textLight}>@{item.handle}</Text>
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index 39597152d..c36190144 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -37,7 +37,7 @@ export const Settings = observer(function Settings({
           <Text style={pal.text}>Signed in as</Text>
           <View style={s.flex1} />
           <TouchableOpacity onPress={onPressSignout}>
-            <Text type="h5" style={pal.link}>
+            <Text type="xl-heavy" style={pal.link}>
               Sign out
             </Text>
           </TouchableOpacity>
@@ -54,7 +54,7 @@ export const Settings = observer(function Settings({
               avatar={store.me.avatar}
             />
             <View style={[s.ml10]}>
-              <Text type="h5" style={pal.text}>
+              <Text type="xl-bold" style={pal.text}>
                 {store.me.displayName || store.me.handle}
               </Text>
               <Text style={pal.textLight}>@{store.me.handle}</Text>
@@ -62,7 +62,7 @@ export const Settings = observer(function Settings({
           </View>
         </Link>
         <View style={s.flex1} />
-        <Text type="overline1" style={[s.mb5]}>
+        <Text type="sm-medium" style={[s.mb5]}>
           Advanced
         </Text>
         <Link
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-13 23:30:01 +0000