@dovela-ui/core
v0.2.0
Published
Design tokens and shared utilities for Dovela UI
Maintainers
Readme
@dovela-ui/core
Design tokens for Dovela UI — every color, radius, spacing step, shadow and font as a CSS custom property.
Ships a single stylesheet plus a typed registry of the token names. Installed automatically with @dovela-ui/react; install it directly only if you want the tokens without the components.
Install
pnpm add @dovela-ui/coreUsage
Import after Tailwind, in your CSS entry:
@import "tailwindcss";
@import "@dovela-ui/core/tokens.css";Raw values live on :root and .dark as plain CSS variables, so you can override any of them — globally or scoped to a subtree:
:root {
--dovela-color-accent: oklch(0.62 0.19 145);
--dovela-radius-md: 0.125rem;
}@theme inline maps them into Tailwind utilities, so bg-surface, text-fg-muted, rounded-md and friends resolve to your values.
Dark mode
Tokens ship in two sets: light on :root, dark on .dark / [data-theme="dark"]. Toggle the class on <html>.
Token names in JS
import { tokens, cssVar } from "@dovela-ui/core";
cssVar(tokens.color.accent); // "var(--dovela-color-accent)"Links
MIT © Daniel Mora
