# BLiP Design Tokens
Um sistema de design completo com tokens, temas e utilitários para produtos BLiP.
> ⚠️ **Aviso**: Este é um projeto pessoal inspirado no design system da BLiP. Não é oficial e não possui afiliação com a BLiP.
## 🎨 Características
- **Tokens em JSON** - Para integração com ferramentas de design
- **CSS Custom Properties** - Para uso em qualquer framework
- **TypeScript Support** - Tipagem completa para projetos JS/TS
- **Temas Dark/Light** - Com suporte a tema automático baseado no sistema
- **Utilitários CSS** - Classes prontas para uso
- **Extensível** - Fácil customização e extensão
## 📦 Instalação
```bash
npm install @lucasmiqueias/blip-tokens
```
## 🚀 Uso
### CSS Puro
```css
/* Importe todos os tokens e temas */
@import "@lucasmiqueias/blip-tokens/css";
/* Ou importe apenas o que precisar */
@import "@lucasmiqueias/blip-tokens/css/tokens.css";
@import "@lucasmiqueias/blip-tokens/css/themes/light.css";
```
### JavaScript/TypeScript
```javascript
import { ThemeManager, tokens } from "@lucasmiqueias/blip-tokens";
// Gerenciamento de tema
const themeManager = new ThemeManager();
themeManager.setTheme("dark");
// Acesso aos tokens
console.log(tokens.colors.primary);
```
### React
```jsx
import "@lucasmiqueias/blip-tokens/css";
import { useTheme } from "@lucasmiqueias/blip-tokens";
function App() {
const { theme, setTheme } = useTheme();
return (
);
}
```
## 🎯 Tokens Disponíveis
### Cores
- **Surface**: `--surface-0` até `--surface-4`
- **Content**: `--content-default`, `--content-ghost`, `--content-bright`
- **Borders**: `--border-1`, `--border-2`, `--border-3`
- **Status**: `--color-success`, `--color-error`, `--color-warning`
### Tipografia
- **Sizes**: `--font-size-xs` até `--font-size-4xl`
- **Weights**: `--font-weight-normal`, `--font-weight-bold`
- **Families**: `--font-family-sans`, `--font-family-mono`
### Espaçamento
- **Sizes**: `--size-0` até `--size-12`
- **Radius**: `--radius-sm` até `--radius-3xl`
## 🌙 Temas
### Configuração do Tema
```html
```
### Classes Utilitárias
```html
Background primário
Background superficie
Texto padrãoTexto de erro
Com borda
```
## 📂 Estrutura dos Tokens
```json
{
"colors": {
"brand": "#0096FA",
"light": {
"primary": "#1E6BF1",
"surface": {
"0": "#FFFFFF",
"1": "#F6F6F6"
}
},
"dark": {
"primary": "#498BFF",
"surface": {
"0": "#424242",
"1": "#393939"
}
}
}
}
```
## 🛠️ Desenvolvimento
```bash
# Instalar dependências
npm install
# Desenvolvimento
npm run dev
# Build
npm run build
# Lint
npm run lint
```