Irodori彩り

StyleX

6 official semantic tokens

6 colors

About StyleX

StyleX is Meta’s CSS-in-JS library for defining statically analyzable design tokens with defineVars. Tokens are colocated with components and compiled to atomic CSS.

How to use

Declare brand tokens via stylex.defineVars and apply them through the stylex.props API. StyleX guarantees deterministic, conflict-free styling.

Official documentation

Primary

colors.primary

Brand primary — stylex.defineVars docs example

Secondary

colors.secondary

Secondary brand color — docs example

Text

colors.text

Primary text color — docs example

Background

colors.background

Page background — docs example

Accent

colors.accent

Accent — docs example (dark: lightblue)

Primary text

colors.primaryText

Typography token — docs example (dark: white)

Source: StyleX · defineVars docs example