styling
Installation
SKILL.md
StyleX Styling
This project uses StyleX for all styling. The system has three layers: design tokens for values, design primitives for multi-property patterns, and stylex.create for component-specific styles. All styles are applied via a custom css prop.
Quick Decision Guide
| Need | Use | Example |
|---|---|---|
| Flex layout, fills, truncation, resets, transitions | Design primitives | css={flex.row} |
| Override a primitive's default | Layout modifier | css={[flex.row, align.end]} |
| Single-property styling (color, spacing, font, border) | stylex.create + tokens |
color: color.textMain |
| Responsive behavior | stylex.create + breakpoints |
{ default: "none", [breakpoints.md]: "flex" } |
| Pseudo-selectors (hover, focus) | stylex.create |
{ default: val, ":hover": hoverVal } |
Custom css Prop
Use css={styles.foo} instead of {...stylex.props(styles.foo)}. This is transpiled by a custom Babel plugin.