Some docs, fix line-height values, export tokens

src/alf/README.md

@@ -1 +1,56 @@
 # Application Layout Framework (ALF)
+
+A set of UI primitives and components.
+
+## Usage
+
+Naming conventions follow Tailwind — delimited with a `_` instead of `-` to
+enable object access — with a couple exceptions:
+
+**Spacing**
+
+Uses "t-shirt" sizes `xxs`, `xs`, `sm`, `md`, `lg`, `xl` and `xxl` instead of
+increments of 4px. We only use a few common spacings, and otherwise typically
+rely on many one-off values.
+
+**Text Size**
+
+Uses "t-shirt" sizes `xxs`, `xs`, `sm`, `md`, `lg`, `xl` and `xxl` to match our
+type scale.
+
+**Line Height**
+
+The text size atoms also apply a line-height with the same value as the size,
+for a 1:1 ratio. `tight` and `normal` are retained for use in the few places
+where we need leading.
+
+### Atoms
+
+An (mostly-complete) set of style definitions that match Tailwind CSS selectors.
+These are static and reused throughout the app.
+
+```tsx
+import { atoms } from '#/alf'
+
+<View style={[atoms.flex_row]} />
+```
+
+### Theme
+
+Any values that rely on the theme, namely colors.
+
+```tsx
+const t = useTheme()
+
+<View style={[atoms.flex_row, t.atoms.bg]} />
+```
+
+### Breakpoints
+
+```tsx
+const b = useBreakpoints()
+
+if (b.gtMobile) {
+  // render tablet or desktop UI
+}
+```

src/alf/atoms.ts

@@ -153,26 +153,11 @@ export const atoms = {
     fontSize: tokens.fontSize.xxl,
     lineHeight: tokens.fontSize.xxl,
   },
-  leading_xxs: {
+  leading_tight: {
-    lineHeight: tokens.fontSize.xxs,
+    lineHeight: 1.25,
   },
-  leading_xs: {
+  leading_normal: {
-    lineHeight: tokens.fontSize.xs,
+    lineHeight: 1.5,
-  },
-  leading_sm: {
-    lineHeight: tokens.fontSize.sm,
-  },
-  leading_md: {
-    lineHeight: tokens.fontSize.md,
-  },
-  leading_lg: {
-    lineHeight: tokens.fontSize.lg,
-  },
-  leading_xl: {
-    lineHeight: tokens.fontSize.xl,
-  },
-  leading_xxl: {
-    lineHeight: tokens.fontSize.xxl,
   },
   font_normal: {
     fontWeight: tokens.fontWeight.normal,

src/alf/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {Dimensions} from 'react-native'
 import * as themes from '#/alf/themes'
 
+export * as tokens from '#/alf/tokens'
 export {atoms} from '#/alf/atoms'
 export * from '#/alf/util/platform'