bsky-app/src/alf
Eric Bailey 5cda807d9d
Tweak avi follow button styles (#4304)
* Tighten up

* Tweak colors

* Tweak for night mode

* Add missing file

* Contrast plus
2024-05-31 20:45:41 +01:00
..
util Tweak avi follow button styles (#4304) 2024-05-31 20:45:41 +01:00
atoms.ts Change many border widths from 1 to hairlineWidth (#4294) 2024-05-31 05:32:54 +01:00
index.tsx Tweak avi follow button styles (#4304) 2024-05-31 20:45:41 +01:00
README.md Application Layout Framework (#1732) 2024-01-08 19:43:56 -06:00
themes.ts Tweak avi follow button styles (#4304) 2024-05-31 20:45:41 +01:00
tokens.ts Signup shell tweaks 2024-03-20 16:26:30 -05:00
types.ts New Onboarding (#2596) 2024-01-25 20:22:40 -08:00

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.

import { atoms } from '#/alf'

<View style={[atoms.flex_row]} />

Theme

Any values that rely on the theme, namely colors.

const t = useTheme()

<View style={[atoms.flex_row, t.atoms.bg]} />

Breakpoints

const b = useBreakpoints()

if (b.gtMobile) {
  // render tablet or desktop UI
}