@meganews-ui/tokens

Sistema de Design Tokens para aplicações MegaNews

✨ Sobre

O @meganews-ui/tokens é o coração do nosso sistema de design, fornecendo valores consistentes para cores, tipografia, espaçamentos e outros elementos visuais. Todos os tokens são tipados em TypeScript e seguem as melhores práticas de design systems.

🚀 Instalação

# npm
npm install @meganews-ui/tokens

# yarn
yarn add @meganews-ui/tokens

# pnpm
pnpm add @meganews-ui/tokens

🎨 Tokens Disponíveis

🎨 Cores

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

// Cores principais
colors.bendengo900  // #1a1a1a
colors.bendengo800  // #2d2d2d
colors.bendengo700  // #404040

// Cores de estado
colors.success      // #28a745
colors.warning      // #ffc107
colors.error        // #dc3545
colors.info         // #17a2b8

// Cores neutras
colors.gray900      // #212529
colors.gray800      // #343a40
colors.gray700      // #495057
colors.gray600      // #6c757d
colors.gray500      // #adb5bd
colors.gray400      // #ced4da
colors.gray300      // #dee2e6
colors.gray200      // #e9ecef
colors.gray100      // #f8f9fa
colors.white        // #ffffff

📝 Tipografia

import { fontSizes, fontWeights, fonts, lineHeights } from '@meganews-ui/tokens';

// Tamanhos de fonte
fontSizes.xs        // 12px
fontSizes.sm        // 14px
fontSizes.base      // 16px
fontSizes.lg        // 18px
fontSizes.xl        // 20px
fontSizes.2xl       // 24px
fontSizes.3xl       // 30px
fontSizes.4xl       // 36px

// Pesos de fonte
fontWeights.normal  // 400
fontWeights.medium  // 500
fontWeights.semibold // 600
fontWeights.bold    // 700

// Famílias de fonte
fonts.sans          // 'Inter', sans-serif
fonts.mono          // 'Fira Code', monospace

// Altura da linha
lineHeights.tight   // 1.25
lineHeights.normal  // 1.5
lineHeights.relaxed // 1.75

📏 Espaçamentos

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

space.px            // 1px
space.0             // 0px
space.1             // 4px
space.2             // 8px
space.3             // 12px
space.4             // 16px
space.5             // 20px
space.6             // 24px
space.8             // 32px
space.10            // 40px
space.12            // 48px
space.16            // 64px
space.20            // 80px
space.24            // 96px
space.32            // 128px

🔄 Bordas

import { radii } from '@meganews-ui/tokens';

radii.none          // 0px
radii.sm            // 2px
radii.base          // 4px
radii.md            // 6px
radii.lg            // 8px
radii.xl            // 12px
radii.2xl           // 16px
radii.full          // 9999px

🎯 Uso Prático

Com Styled Components

import styled from 'styled-components';
import { colors, fontSizes, space, radii } from '@meganews-ui/tokens';

const Button = styled.button`
  background-color: ${colors.bendengo900};
  color: ${colors.white};
  font-size: ${fontSizes.sm};
  padding: ${space.2} ${space.4};
  border-radius: ${radii.md};
  border: none;
  cursor: pointer;
  
  &:hover {
    background-color: ${colors.bendengo800};
  }
`;

Com CSS-in-JS (Stitches)

import { styled } from '@stitches/react';
import { colors, fontSizes, space } from '@meganews-ui/tokens';

const Card = styled('div', {
  backgroundColor: colors.white,
  padding: space.4,
  borderRadius: '$md',
  boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
  
  variants: {
    size: {
      sm: {
        padding: space.2,
        fontSize: fontSizes.sm,
      },
      lg: {
        padding: space.6,
        fontSize: fontSizes.lg,
      },
    },
  },
});

Com CSS Custom Properties

import { colors, fontSizes, space } from '@meganews-ui/tokens';

// Definir variáveis CSS
const root = document.documentElement;
root.style.setProperty('--color-primary', colors.bendengo900);
root.style.setProperty('--font-size-base', fontSizes.base);
root.style.setProperty('--spacing-md', space.4);

/* Usar no CSS */
.my-component {
  color: var(--color-primary);
  font-size: var(--font-size-base);
  padding: var(--spacing-md);
}

🎨 Temas Customizados

import { createTheme } from '@meganews-ui/tokens';

const customTheme = createTheme({
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
    success: '#28a745',
    warning: '#ffc107',
    error: '#dc3545',
  },
  fontSizes: {
    xs: '10px',
    sm: '12px',
    base: '14px',
    lg: '16px',
    xl: '18px',
  },
  space: {
    1: '2px',
    2: '4px',
    3: '8px',
    4: '12px',
    5: '16px',
  },
});

🔧 Configuração do TypeScript

// tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

📊 Estrutura dos Tokens

@meganews-ui/tokens/
├── colors.ts          # Paleta de cores
├── font-sizes.ts      # Tamanhos de fonte
├── font-weights.ts    # Pesos de fonte
├── fonts.ts           # Famílias de fonte
├── line-heights.ts    # Alturas de linha
├── radii.ts           # Raios de borda
├── space.ts           # Espaçamentos
└── index.ts           # Exportações principais

🎯 Boas Práticas

✅ Faça

// Use tokens para manter consistência
const Button = styled.button`
  padding: ${space.2} ${space.4};
  font-size: ${fontSizes.sm};
  color: ${colors.white};
`;

// Crie variantes baseadas em tokens
const variants = {
  primary: { backgroundColor: colors.bendengo900 },
  secondary: { backgroundColor: colors.gray600 },
};

❌ Evite

// Não use valores hardcoded
const Button = styled.button`
  padding: 8px 16px;  // ❌ Use space.2 space.4
  font-size: 14px;    // ❌ Use fontSizes.sm
  color: #ffffff;     // ❌ Use colors.white
};

🔄 Migração

Da versão anterior

// Antes
import { primaryColor, smallFontSize } from 'old-tokens';

// Depois
import { colors, fontSizes } from '@meganews-ui/tokens';
// colors.bendengo900, fontSizes.sm

📚 Recursos Adicionais

• 🎨 Figma Design System
• 📖 Guia de Cores
• 🔧 Ferramentas de Design
• 🎯 Exemplos de Uso

🤝 Contribuindo

Contribuições são sempre bem-vindas! Veja nosso guia de contribuição para começar.

Adicionando Novos Tokens

// 1. Adicione o token no arquivo apropriado
// src/colors.ts
export const colors = {
  // ... tokens existentes
  newColor: '#ff6b6b',
} as const;

// 2. Exporte no index.ts
export * from './colors';

// 3. Atualize a documentação

📄 Licença

Este projeto está licenciado sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

👥 Equipe

• Marcos Augusto Rodrigues - Desenvolvedor Principal

Feito com ❤️ pela equipe MegaNews