@vetaui/foundations
v0.1.2
Published
Veta foundation layer — design tokens (OKLCH colors, spacing, typography, motion), 7 brand presets, plus the shared runtime utilities (cn, hooks, common types) every Veta package consumes.
Maintainers
wasyraReadme
@vetaui/foundations
The foundation of Veta. Every other Veta package consumes this.
Token catalog: colors (OKLCH, full 50→950 scales), spacing, typography, radius,
shadow, motion, breakpoints + a complete light/dark theming system you can
extend or replace. Also ships the cn() utility and shared React hooks.
Install
pnpm add @vetaui/foundationsUse the CSS variables (recommended, Tailwind v4)
In your app's global stylesheet (e.g. app/globals.css for Next.js):
@import "tailwindcss";
@import "@vetaui/foundations/css";
@import "@vetaui/foundations/reset"; /* optional but recommended */You instantly get:
- OKLCH color scales —
--color-brand-500,--color-success-700, ... - Semantic surface tokens —
--veta-bg,--veta-fg,--veta-primary, ... - Typography, radius, shadow, motion variables
- Light/dark theming via
[data-theme]on any element prefers-color-schemefallback when[data-theme]isn't set
Themes
Switch dark/light
<html data-theme="dark"> <!-- force dark -->
<html data-theme="light"> <!-- force light -->
<html> <!-- follow system preference -->Apply a brand preset
<html data-preset="linear"> <!-- Linear theme -->
<html data-preset="vercel"> <!-- Vercel theme -->
<html data-preset="stripe"> <!-- Stripe theme -->Available presets: linear, vercel, stripe, notion, apple, brutal.
Density and radius packs (optional)
Import after the core CSS:
@import "@vetaui/foundations/theme-packs";Then on <html> or a layout root:
<html data-density="compact" data-radius-pack="soft">See Veta product system for the full token layer model.
Override specific tokens (per-region)
.brand-section {
--veta-primary: oklch(0.7 0.18 30);
--veta-primary-hover: oklch(0.6 0.18 30);
}Build a custom theme in JS
import { createTheme, lightTheme, applyTheme } from "@vetaui/foundations/theme";
const minty = createTheme(lightTheme, {
primary: "oklch(0.65 0.15 160)",
primaryHover: "oklch(0.55 0.15 160)",
ring: "oklch(0.65 0.15 160)",
});
applyTheme(minty); // applies to <html>
applyTheme(minty, document.body); // or any elementUse as JS objects
import { colors, spacing, easing, semantic } from "@vetaui/foundations";
const primary = colors.brand[600];
const transition = `transform 200ms ${easing.swift}`;
const cardBg = semantic.bg; // "var(--veta-bg)"cn() utility
import { cn } from "@vetaui/foundations";
// Merges Tailwind classes safely via tailwind-merge + clsx
const cls = cn("p-4 text-sm", isActive && "font-semibold", className);Tailwind v3 (compat)
Still on Tailwind v3? We ship a preset:
// tailwind.config.ts
import { vetaTailwindV3Preset } from "@vetaui/foundations/tailwind-v3";
export default {
presets: [vetaTailwindV3Preset],
content: ["./src/**/*.{ts,tsx}"],
};Package exports
| Import | Provides |
| --- | --- |
| @vetaui/foundations | All TS objects + types + cn() + hooks |
| @vetaui/foundations/theme | Theming helpers (createTheme, applyTheme, ...) |
| @vetaui/foundations/tailwind-v3 | Tailwind v3 preset |
| @vetaui/foundations/css | The @theme CSS variable definitions |
| @vetaui/foundations/reset | Minimal modern CSS reset |
| @vetaui/foundations/presets | 7 brand preset objects |
| @vetaui/foundations/runtime | Service locator (configureVeta, getStrategy) |
License
MIT — Dambert Munoz