@zephora/tokens
v1.0.0
Published
Design tokens for Zephora UI — colors, spacing, radius, typography, elevation, motion and z-index as CSS variables, JSON, TypeScript and React Native outputs.
Maintainers
Readme
@zephora/tokens
Design tokens for Zephora UI — colors, spacing, radius, typography, elevation, motion and z-index, emitted as CSS variables, JSON, TypeScript and React Native outputs.
Install
npm install @zephora/tokensUsage
// TypeScript / JS tokens
import { tokens } from "@zephora/tokens";
tokens.color.primary["500"];
tokens.radius.md;/* CSS variables */
@import "@zephora/tokens/css";
.card {
background: var(--z-bg);
border-radius: var(--z-radius);
}These are the primitives the rest of Zephora UI is built on — themes
(@zephora/theme), the styled
components and the Tailwind preset
all derive from this single source.
