@nextime-ui/tokens NPM

@nextime-ui/tokens

version

@nextime-ui/tokens é um pacote de design tokens que fornece valores reutilizáveis para cores, tamanhos de fonte, espaçamentos, raios de borda e outros estilos fundamentais. Ele foi projetado para ser usado em conjunto com os componentes da NeXTIME UI, garantindo consistência visual em todos os projetos.

📚 Sobre

Os design tokens são definidos em um formato escalável e tipado (TypeScript), permitindo fácil integração em projetos modernos de front-end. Eles podem ser usados diretamente ou como base para bibliotecas de componentes.

📦 Instalação

Você pode instalar o pacote com o seguinte comando:

pnpm add @nextime-ui/tokens

🛠️ Como Usar

Os tokens podem ser importados e usados diretamente no seu projeto. Aqui estão alguns exemplos:

Exemplo de Uso

Importando Cores

import { colors } from '@nextime-ui/tokens';

console.log(colors.gray900); // '#1E1E1E'

Importando Tamanhos de Fonte

import { fontSizes } from '@nextime-ui/tokens';

console.log(fontSizes.md); // '1rem'

Importando Espaçamentos

import { space } from '@nextime-ui/tokens';

console.log(space[4]); // '16px'

Tokens Disponíveis

Cores (`colors`)

Predefinidas: Inclui tons de cinza, cores de destaque (ignite), e mais.
Exemplo:
- white: #FFFFFF
- ignite500: #00875F

Tamanhos de Fonte (`fontSizes`)

Valores disponíveis:
- xxs: 0.625rem
- md: 1rem
- 9xl: 6rem

Pesos de Fonte (`fontWeights`)

Valores disponíveis:
- regular: 400
- medium: 500
- bold: 700

Espaçamentos (`space`)

Valores disponíveis:
- 1: 4px
- 4: 16px

Outros Tokens

Raios de Borda (radii)
Alturas de Linha (lineHeights)

🚀 Scripts Sugeridos

Adicione os seguintes scripts ao seu package.json para facilitar o desenvolvimento:

"scripts": {
  "build": "tsup src/index.ts --format esm,cjs --dts",
  "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
  "lint": "eslint src/**/*.ts* --fix",
  "typecheck": "tsc --noEmit"
}

build: Gera os arquivos prontos para produção.
dev: Inicia o modo de desenvolvimento com watch.
lint: Analisa o código com ESLint e corrige problemas automaticamente.
typecheck: Verifica os tipos TypeScript.