@datametria/design-tokens

Design Tokens centralizados DATAMETRIA para todas as plataformas

89 tokens • 8 formatos • 5 plataformas • Geração automática

🎨 Tokens Disponíveis

• Colors: 54 tokens (Primary, Secondary, Success, Warning, Error, Info, Gray)
• Gradients: 6 gradientes corporativos
• Borders: 5 cores temáticas
• Spacing: 8 valores (xs → 4xl)
• Typography: 16 tokens (fontFamily, fontSize, fontWeight, lineHeight)
• Border Radius: 7 valores (none → full)
• Shadows: 4 níveis (sm → xl)
• Transitions: 5 curvas (fast → smooth)
• Breakpoints: 6 pontos (xs → 2xl)
• Z-Index: 13 camadas (hide → tooltip)

📦 Instalação

npm install @datametria/design-tokens

🚀 Uso

CSS Variables

@import '@datametria/design-tokens/css';

.button {
  background: var(--dm-colors-primary-500);
  color: white;
  padding: var(--dm-spacing-md) var(--dm-spacing-lg);
  border-radius: var(--dm-borderRadius-md);
  transition: var(--dm-transitions-normal);
}

SCSS Variables

@import '@datametria/design-tokens/scss';

.button {
  background: $dm-colors-primary-500;
  color: white;
  padding: $dm-spacing-md $dm-spacing-lg;
  border-radius: $dm-borderRadius-md;
  transition: $dm-transitions-normal;
}

JavaScript/TypeScript

import { tokens } from '@datametria/design-tokens';

const Button = styled.button`
  background: ${tokens.colors.primary[500]};
  color: white;
  padding: ${tokens.spacing.md} ${tokens.spacing.lg};
  border-radius: ${tokens.borderRadius.md};
  transition: ${tokens.transitions.normal};
`;

React Native

import { tokens } from '@datametria/design-tokens';

const styles = StyleSheet.create({
  button: {
    backgroundColor: tokens.colors.primary[500],
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 6,
  }
});

📱 Plataformas Suportadas

Swift (iOS)

import DatametriaTokens

let button = UIButton()
button.backgroundColor = DatametriaTokens.Colors.Primary.primary500
button.layer.cornerRadius = DatametriaTokens.Spacing.md

Kotlin (Android)

import io.datametria.tokens.DatametriaTokens

val button = Button(
    colors = ButtonDefaults.buttonColors(
        backgroundColor = DatametriaTokens.Colors.Primary.primary500
    )
)

Dart (Flutter)

import 'package:datametria_tokens/datametria_tokens.dart';

Container(
  decoration: BoxDecoration(
    color: DatametriaTokens.colors.primary500,
    borderRadius: BorderRadius.circular(DatametriaTokens.spacing.md),
  ),
)

🎯 Formatos Disponíveis

| Formato | Arquivo | Uso | |---------|---------|-----| | CSS Variables | tokens.css | Web, CSS-in-JS | | SCSS Variables | tokens.scss | Sass, SCSS | | JavaScript | tokens.js | React, Vue, Node.js | | TypeScript | index.d.ts | Type definitions | | JSON | tokens.json | Raw data | | Swift | DatametriaTokens.swift | iOS native | | Kotlin | DatametriaTokens.kt | Android Compose | | Dart | datametria_tokens.dart | Flutter |

🎨 Design System

Cores Principais

/* Primary - Azul DATAMETRIA */
--dm-colors-primary-500: #0072CE;

/* Secondary - Roxo DATAMETRIA */
--dm-colors-secondary-500: #4B0078;

/* Semantic Colors */
--dm-colors-success-500: #10b981;
--dm-colors-warning-500: #f59e0b;
--dm-colors-error-500: #ef4444;
--dm-colors-info-500: #06b6d4;

Gradientes Corporativos

--dm-gradients-primary: linear-gradient(135deg, #0072CE 0%, #005ba3 100%);
--dm-gradients-secondary: linear-gradient(135deg, #4B0078 0%, #3a005c 100%);

Sistema de Espaçamento

--dm-spacing-xs: 0.25rem;   /* 4px */
--dm-spacing-sm: 0.5rem;    /* 8px */
--dm-spacing-md: 0.75rem;   /* 12px */
--dm-spacing-lg: 1rem;      /* 16px */
--dm-spacing-xl: 1.5rem;    /* 24px */
--dm-spacing-2xl: 2rem;     /* 32px */

🔧 Desenvolvimento

Build Local

git clone https://github.com/datametria/DATAMETRIA-common-libraries.git
cd packages/design-tokens
npm install
npm run build

Scripts Disponíveis

npm run build          # Build completo
npm run build:tokens   # Gerar CSS, SCSS, JS
npm run build:platforms # Gerar Swift, Kotlin, Dart
npm run build:types    # Gerar TypeScript definitions
npm run clean          # Limpar dist/

📚 Documentação

• Design System Guide
• Migration Guide
• Platform Integration

🤝 Contribuindo

1. Fork o repositório
2. Crie uma branch: git checkout -b feature/nova-feature
3. Commit: git commit -m 'feat(tokens): adiciona novos tokens'
4. Push: git push origin feature/nova-feature
5. Abra um Pull Request

📄 Licença

MIT © 2025 DATAMETRIA - Vander Loto (CTO)

Versão: 1.1.0 Última Atualização: 05/11/2025 Autor: Vander Loto - CTO DATAMETRIA

🔗 Links

• NPM Package
• GitHub Repository
• DATAMETRIA Website

Desenvolvido com ❤️ pela equipe DATAMETRIA