Irodori彩り

StyleX

6 個の公式セマンティックトークン

全 6 色

概要 StyleX

StyleX は Meta 製の CSS-in-JS ライブラリで、defineVars で静的に解析可能なデザイントークンを定義します。トークンはコンポーネントと同じ場所に置かれ、アトミック CSS にコンパイルされます。

使い方

stylex.defineVars でブランドトークンを宣言し、stylex.props API から適用します。StyleX は決定的で衝突のないスタイルを保証します。

公式ドキュメント

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)

出典: StyleX · defineVars docs example