danielweinmann.com
forked from
esb.lol/alf
Bluesky's "Application Layout Framework"
More improvements to the API reference
+30
-12
+30
-12
api-reference.md
+30
-12
api-reference.md
···
298
298
299
299
### Border curves (iOS only)
300
300
301
-
These resolve to `undefined` on web and Android (via the `ios()` platform selector). On iOS, they set `borderCurve`.
301
+
These resolve to empty objects `{}` on web. On native, they use the `ios()` platform selector, returning the style on iOS and `undefined` on Android.
302
302
303
303
| Atom | iOS Style |
304
304
|------|-----------|
···
349
349
350
350
### Margin
351
351
352
-
Same size scale as padding. Each size has `m_`, `mx_`, `my_`, `mt_`, `mb_`, `ml_`, `mr_` variants, plus `_auto` variants for centering.
352
+
Values come from `tokens.space` (zero variants use literal `0`). Each size has `m_`, `mx_`, `my_`, `mt_`, `mb_`, `ml_`, `mr_` variants.
353
+
354
+
| Size | Value (px) |
355
+
|------|------------|
356
+
| `0` | 0 |
357
+
| `2xs` | 2 |
358
+
| `xs` | 4 |
359
+
| `sm` | 8 |
360
+
| `md` | 12 |
361
+
| `lg` | 16 |
362
+
| `xl` | 20 |
363
+
| `2xl` | 24 |
364
+
| `3xl` | 28 |
365
+
| `4xl` | 32 |
366
+
| `5xl` | 40 |
367
+
368
+
Full atom names follow the pattern: `m_md`, `mx_lg`, `my_sm`, `mt_xl`, `mb_2xl`, `ml_xs`, `mr_3xl`.
353
369
354
370
Auto margins: `m_auto`, `mx_auto`, `my_auto`, `mt_auto`, `mb_auto`, `ml_auto`, `mr_auto`.
355
371
···
562
578
563
579
### `invertPalette(palette)`
564
580
565
-
Flips a palette's color scales for dark mode. Swaps contrast_0 with contrast_1000, contrast_25 with contrast_975, and so on. Keeps `white`, `black`, and `like` unchanged.
581
+
Flips **all four** color scales (contrast, primary, positive, negative) for dark mode. Swaps `_0`/`_25` with `_1000`/`_975`, and so on symmetrically. Keeps `white`, `black`, and `like` unchanged.
566
582
567
583
```typescript
568
584
const darkPalette = invertPalette(DEFAULT_PALETTE)
···
750
766
type ViewStyleProp = { style?: StyleProp<ViewStyle> }
751
767
```
752
768
753
-
### `ShadowStyle`
769
+
### `ThemeAtoms`
754
770
755
-
```typescript
756
-
type ShadowStyle = Pick<
757
-
ViewStyle,
758
-
'shadowColor' | 'shadowOpacity' | 'shadowRadius' | 'elevation' | 'shadowOffset' | 'boxShadow'
759
-
>
760
-
```
771
+
The type of `t.atoms` (where `t = useTheme()`). Maps each theme atom name to its style object.
772
+
773
+
| Key group | Keys |
774
+
|-----------|------|
775
+
| Text | `text`, `text_contrast_low`, `text_contrast_medium`, `text_contrast_high`, `text_inverted` |
776
+
| Background | `bg`, `bg_contrast_25`, `bg_contrast_50`, `bg_contrast_100` through `bg_contrast_900`, `bg_contrast_950`, `bg_contrast_975` |
777
+
| Border | `border_contrast_low`, `border_contrast_medium`, `border_contrast_high` |
778
+
| Shadow | `shadow_sm`, `shadow_md`, `shadow_lg` |
761
779
762
780
---
763
781
···
772
790
| `overflow_auto` | `overflow: 'auto'` | Empty object |
773
791
| `flex_0` | `flex: '0 0 auto'` | `flex: 0` |
774
792
| `border`, `border_t`, `border_b`, `border_l`, `border_r`, `border_x`, `border_y` | `borderWidth: 1` | `borderWidth: StyleSheet.hairlineWidth` |
775
-
| `curve_circular` | Empty object | iOS: `borderCurve: 'circular'` |
776
-
| `curve_continuous` | Empty object | iOS: `borderCurve: 'continuous'` |
793
+
| `curve_circular` | Empty object | iOS: `borderCurve: 'circular'`, Android: `undefined` |
794
+
| `curve_continuous` | Empty object | iOS: `borderCurve: 'continuous'`, Android: `undefined` |
777
795
| `shadow_sm`, `shadow_md`, `shadow_lg` | Empty object | Shadow props with `elevation` (Fabric: empty) |
778
796
| `inline`, `block` | `display: 'inline'` / `'block'` | Empty object |
779
797
| `pointer` | `cursor: 'pointer'` | Empty object |