@bnplx/tokens
v0.2.0
Published
Design tokens for the BNPLX component library. CSS custom properties, Tailwind preset, and JSON tokens.
Downloads
85
Readme
@bnplx/tokens
Design tokens for the BNPLX component library. CSS custom properties, Tailwind preset, and JSON tokens.
Install
npm install @bnplx/tokensUsage
CSS Variables
Import in your app entry point:
import '@bnplx/tokens/css';This provides all --bnplx-* custom properties on :root.
Tailwind Preset
Add to your tailwind.config.ts:
import bnplxPreset from '@bnplx/tokens/tailwind';
export default {
presets: [bnplxPreset],
content: ['./src/**/*.{ts,tsx}'],
};Dark Mode
Add data-theme="dark" to your <html> element:
<html data-theme="dark">Dark mode overrides are included automatically.
Token Reference
| Category | Example | Values |
|----------|---------|--------|
| Primary | --bnplx-primary | #635BFF |
| Spacing | --bnplx-space-md | 16px (4px base scale) |
| Radius | --bnplx-radius-sm | 6px |
| Surfaces | --bnplx-bg-card | #FFFFFF |
| Text | --bnplx-text-primary | #1A1D26 |
| Borders | --bnplx-border | #E6E9F0 |
| Shadows | --bnplx-shadow-md | Purple-tinted depth |
| Status | --bnplx-success | #0E9F6E |
| Fonts | --bnplx-font-sans | Figtree |
License
MIT