danielweinmann.com
forked from
esb.lol/alf
Bluesky's "Application Layout Framework"
Fix imprecisions on API reference
+15
-6
+15
-6
api-reference.md
+15
-6
api-reference.md
···
13
13
themes,
14
14
createTheme,
15
15
createThemes,
16
+
DEFAULT_PALETTE,
17
+
DEFAULT_SUBDUED_PALETTE,
16
18
invertPalette,
17
19
isWeb,
18
20
isNative,
···
141
143
142
144
### Border radius
143
145
144
-
All values come from `tokens.borderRadius`.
146
+
Values come from `tokens.borderRadius` (zero variants use literal `0`).
145
147
146
148
| Atom | Value (px) |
147
149
|------|------------|
···
194
196
195
197
### Gap
196
198
197
-
All values come from `tokens.space`.
199
+
Values come from `tokens.space` (zero variants use literal `0`).
198
200
199
201
| Atom | Value (px) |
200
202
|------|------------|
···
296
298
297
299
### Border curves (iOS only)
298
300
299
-
These resolve to empty objects on web and Android. On iOS, they set `borderCurve`.
301
+
These resolve to `undefined` on web and Android (via the `ios()` platform selector). On iOS, they set `borderCurve`.
300
302
301
303
| Atom | iOS Style |
302
304
|------|-----------|
···
327
329
328
330
### Padding
329
331
330
-
All values come from `tokens.space`. Each size has `p_`, `px_`, `py_`, `pt_`, `pb_`, `pl_`, `pr_` variants.
332
+
Values come from `tokens.space` (zero variants use literal `0`). Each size has `p_`, `px_`, `py_`, `pt_`, `pb_`, `pl_`, `pr_` variants.
331
333
332
334
| Size | Value (px) |
333
335
|------|------------|
···
705
707
// Returns '#000000'
706
708
```
707
709
708
-
You can use a `default` fallback instead of specifying every theme:
710
+
The type signature accepts either an exhaustive map of all three theme names, or a partial map with a `default` key. When using `default`, you still need to provide values for every theme name you want to handle — the `default` value only applies when the `name` argument falls outside the known `ThemeName` union (which shouldn't happen in practice). If a theme name is omitted from the options, its value will be `undefined`:
709
711
710
712
```typescript
711
713
utils.select('dim', { light: 'white', default: 'black' })
714
+
// Returns undefined — 'dim' matches the switch case but options.dim is not set
715
+
```
716
+
717
+
For reliable results, always provide all three theme names:
718
+
719
+
```typescript
720
+
utils.select('dim', { light: 'white', dark: 'black', dim: 'black' })
712
721
// Returns 'black'
713
722
```
714
723
···
721
730
// { flexDirection: 'row', gap: 12 }
722
731
```
723
732
724
-
On web, this uses a custom implementation. On native, it delegates to `StyleSheet.flatten`.
733
+
On both web and native, this delegates to `StyleSheet.flatten`. A custom fallback implementation exists for environments where neither `.web.ts` nor `.native.ts` is resolved.
725
734
726
735
Returns: merged style object
727
736