Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Export type-safe StyleX variables with explicit light and dark themes.
tokens.stylex.ts defines the default token values with stylex.defineVars.themes.ts exports lightTheme and darkTheme with stylex.createTheme.npm install @stylexjs/stylex
// tokens.stylex.ts
import * as stylex from "@stylexjs/stylex"
export const tokens = stylex.defineVars({
colorTextDefault: "#1a2035",
colorBgSurface: "#ffffff",
spacingMd: "16px",
})
// themes.ts
import * as stylex from "@stylexjs/stylex"
import { tokens } from "./tokens.stylex"
export const lightTheme = stylex.createTheme(tokens, {
colorTextDefault: "#1a2035",
colorBgSurface: "#ffffff",
spacingMd: "16px",
})
export const darkTheme = stylex.createTheme(tokens, {
colorTextDefault: "#f5f7fa",
colorBgSurface: "#0b0d12",
spacingMd: "16px",
})
stylex.create, then apply a theme to an element
that contains the themed subtree:
import * as stylex from "@stylexjs/stylex"
import { tokens } from "./tokens.stylex"
import { darkTheme } from "./themes"
const styles = stylex.create({
card: {
color: tokens.colorTextDefault,
backgroundColor: tokens.colorBgSurface,
padding: tokens.spacingMd,
},
})
export function Card() {
return <div {...stylex.props(darkTheme, styles.card)}>Hello</div>
}
typographyBodyFontSize and
typographyBodyLineHeight.
curl https://humic.dev/api/v1/export/stylex \
-H "Authorization: Bearer sk_live_your_key" \
--output humic-stylex.zip