@useokiwi/tokens

Design tokens da kiwi — paleta, tipografia, espaçamento, raios e mais. Gerados a partir de uma única fonte JSON, distribuídos em CSS vars, JSON, TypeScript e Tailwind preset.

Instalar

npm install @useokiwi/tokens
# ou
pnpm add @useokiwi/tokens

Como usar

CSS puro / Vue / qualquer stack web

@import "@useokiwi/tokens/tokens.css";

.btn {
  background: var(--kiwi-green-neon);
  color: var(--kiwi-black);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
}

TypeScript / React

import { colors, tokens } from "@useokiwi/tokens";

<div style={{ background: colors["green-neon"] }} />
// ou tokens.color.kiwi["green-neon"]

Tailwind

// tailwind.config.js
module.exports = {
  presets: [require("@useokiwi/tokens/tailwind-preset")],
  content: ["./src/**/*.{ts,tsx}"],
};

<div className="bg-kiwi-green-neon text-kiwi-black rounded-pill" />

JSON

import tokens from "@useokiwi/tokens/tokens.json";

Conteúdo

• Cores (kiwi-green-neon, kiwi-black, kiwi-paper, etc.)
• Tipografia (font-display, font-body, fontSize, fontWeight, lineHeight, letterSpacing)
• Espaçamento (space-0 a space-10)
• Raios (radius-xs a radius-pill)
• Sombras (shadow-1 a shadow-4, glow-green)
• Motion (ease/duration)

Veja tokens.json para o source completo.

Versionamento

Segue SemVer. Releases gerenciadas com changesets. Veja CHANGELOG.md.

Licença

MIT