> ## Documentation Index
> Fetch the complete documentation index at: https://docs.humic.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# StyleX

> Export type-safe StyleX variables with explicit light and dark themes.

The StyleX export is a zip containing two generated TypeScript modules:

* `tokens.stylex.ts` defines the default token values with `stylex.defineVars`.
* `themes.ts` exports `lightTheme` and `darkTheme` with `stylex.createTheme`.

Install and configure StyleX in the consuming project first:

```bash theme={null}
npm install @stylexjs/stylex
```

## Output

```typescript theme={null}
// tokens.stylex.ts
import * as stylex from "@stylexjs/stylex"

export const tokens = stylex.defineVars({
  colorTextDefault: "#1a2035",
  colorBgSurface: "#ffffff",
  spacingMd: "16px",
})
```

```typescript theme={null}
// 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",
})
```

Use the generated variables in `stylex.create`, then apply a theme to an element
that contains the themed subtree:

```tsx theme={null}
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>
}
```

Humic generates stable camelCase keys because StyleX variables are imported
JavaScript properties rather than public CSS custom-property names. The CSS
prefix and naming-convention settings therefore do not apply to this format.

Typography and other composite tokens that need several CSS properties are
expanded into separate variables such as `typographyBodyFontSize` and
`typographyBodyLineHeight`.

## API

Download the zip from the published version:

```bash theme={null}
curl https://humic.dev/api/v1/export/stylex \
  -H "Authorization: Bearer sk_live_your_key" \
  --output humic-stylex.zip
```