@lucasmiqueias/blip-tokens
v1.0.1
Published
Design token system inspired by BLiP's design language
Downloads
14
Maintainers
lucasmiqueiasReadme
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
npm install @lucasmiqueias/blip-tokens🚀 Uso
CSS Puro
/* 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
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
import "@lucasmiqueias/blip-tokens/css";
import { useTheme } from "@lucasmiqueias/blip-tokens";
function App() {
const { theme, setTheme } = useTheme();
return (
<div className="bg-surface-0 text-content-default">
<button onClick={() => setTheme("dark")}>Tema Escuro</button>
</div>
);
}🎯 Tokens Disponíveis
Cores
- Surface:
--surface-0até--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-xsaté--font-size-4xl - Weights:
--font-weight-normal,--font-weight-bold - Families:
--font-family-sans,--font-family-mono
Espaçamento
- Sizes:
--size-0até--size-12 - Radius:
--radius-smaté--radius-3xl
🌙 Temas
Configuração do Tema
<!-- Tema claro -->
<html data-theme="light">
<!-- Tema escuro -->
<html data-theme="dark">
<!-- Tema automático (segue preferência do sistema) -->
<html data-theme="auto"></html>
</html>
</html>Classes Utilitárias
<!-- Backgrounds -->
<div class="bg-primary">Background primário</div>
<div class="bg-surface-1">Background superficie</div>
<!-- Textos -->
<span class="text-content-default">Texto padrão</span>
<span class="text-error">Texto de erro</span>
<!-- Bordas -->
<div class="border-1 border-primary">Com borda</div>📂 Estrutura dos Tokens
{
"colors": {
"brand": "#0096FA",
"light": {
"primary": "#1E6BF1",
"surface": {
"0": "#FFFFFF",
"1": "#F6F6F6"
}
},
"dark": {
"primary": "#498BFF",
"surface": {
"0": "#424242",
"1": "#393939"
}
}
}
}🛠️ Desenvolvimento
# Instalar dependências
npm install
# Desenvolvimento
npm run dev
# Build
npm run build
# Lint
npm run lint