bsky-app/src/alf
Hailey 573cf31d86
fix theme cross-tab write loop (#2774)
* don't write on onUpdate, memoize

* refac useColorModeTheme
2024-02-06 21:16:50 -08:00
..
util fix theme cross-tab write loop (#2774) 2024-02-06 21:16:50 -08:00
atoms.ts New Onboarding (#2596) 2024-01-25 20:22:40 -08:00
index.tsx New Onboarding (#2596) 2024-01-25 20:22:40 -08:00
README.md Application Layout Framework (#1732) 2024-01-08 19:43:56 -06:00
themes.ts Options for selecting dark theme, fix some white flashes when in dark mode (#2722) 2024-02-06 11:43:51 -08:00
tokens.ts New Onboarding (#2596) 2024-01-25 20:22:40 -08: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
}