Make CssVars and DataAttributes enums public
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Feature request
## Summary
Export typed constants (enums) for CSS custom properties and data attributes exposed by Base UI components, so consumers can reference them in a statically-typed way instead of hardcoding string literals.
## Examples in other libraries
ArkUI kinda does that with their `@ark-ui/react/anatomy`. While it mainly exposes "parts", it has `_open` states, etc.
## Motivation
CSS variable and data attribute names exposed by Base UI components are currently only documented as plain strings, e.g.:
```
var(--nested-dialogs)
```
Instead, we could have something like:
```
var(${DialogPopupCssVars.nestedDialogs})
```
This would give autocomplete, compile-time safety against typos, and refactor safety if Base UI ever renames an internal var or attribute - all of which TypeScript can't currently catch, leading to silently broken styles.
This is mainly for developers building custom styling on top of Base UI's unstyled components (CSS-in-JS, vanilla CSS with var(), or JS reading data-* attributes for conditional logic).
Contributor guide
Assessment
This issue has not been assessed yet.