@gleissonneves/liz-design-system

v2.13.5

Published

8 months ago

Sistema de design Liz Design System

0High
0Medium
0Low

Liz Design System

Liz é o sistema de design fornecido por Gleisson Neves para produtos e experiências digitais. Com a Liz Design Token como base, o sistema consiste em código funcional, ferramentas e recursos de design, diretrizes de interface humana. O principal objetivo é ser flexível e adaptável, garantindo consistência e eficiência no desenvolvimento de interfaces.

Acesse ao storybook

🌟 Principais objetivos

O Liz Design System foi criado para simplificar o processo de desenvolvimento de interfaces, oferecendo uma biblioteca de componentes reutilizáveis, tokens de design e diretrizes claras. Ele é ideal para equipes que buscam consistência visual, agilidade no desenvolvimento e uma experiência de usuário coesa em diferentes plataformas.

✅ Flexibilidade – Adaptável a diferentes contextos de design e desenvolvimento.

✅ Consistência – Mantém uma identidade visual unificada em diversos produtos.

✅ Acessibilidade – Segue boas práticas para tornar interfaces mais inclusivas.

📦 Como Importar a Versão LTS para Seu Projeto

Usando NPM

npm i @gleissonneves/liz-design-system

Usando Yarn

yarn add @gleissonneves/liz-design-system

Importação no Root do Aplicativo

Para garantir que os estilos e componentes estejam disponíveis globalmente, importe o sistema no arquivo principal da aplicação:

 import '@gleissonneves/liz-design-system'

🌍 Usando via CDN

Caso prefira não instalar via npm/yarn, utilize a versão hospedada via CDN:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    ...
    <!-- START LIZ DESIGN SYSTEM -->
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@gleissonneves/liz-design-system/liz-design-system.css">
    <!-- END LIZ DESIGN SYSTEM -->
    ...
</head>

<body class="light-theme-brand">
  ...
</body>
</html>

🎨 Temas e Personalização

🔄 Como Trocar Temas Dinamicamente

A troca de temas no Liz Design System é feita através da sobrescrita de variáveis CSS.

📁 Estrutura Recomendada

Crie um arquivo token.css dentro de assets/styles/css/ para armazenar as definições das cores dos temas.

🎨 Exemplo de Configuração de Tema

body.light-theme-brand {
  --gray-{token}: #f8f9fa;
  --brand-{token}: #772BFA;
}

📖 Componentes e Utilitários Finalizados

Avatar
Badge
- Com ícone
- Sem ícone
- Número contador
- Diferentes tamanhos: md, sm, xsm, xxsm, xxxsm
Button
- Estados: hover, active, loading, disabled
- Tamanhos: normal, small
- Largura flexível
- Versão com ícone
Flex
Form Control
- Checkboxes
  - Checkbox
  - Radio
  - Toggle
- Input (Prioridade 5)
- Select (Prioridade 5)
- Textarea (Prioridade 5)
- File [Upload] (Prioridade 5)
- Search (Prioridade 3)
Grid
Gap
Label
Margin
Off-canvas (Prioridade 5)
- Com Overlay (2.4.1v)
Overlay (Prioridade 5)
Padding
Typography
- Headline
- Tamanho de fonte
- Peso da fonte
- Cor
- Transformação
- Alinhamento
- Quebra de linha
- Paleta de cores
- Divider
- Altura de linha
Visibility (Controle de display)
Width (Substituído por sizes)

Roadmap

(Prioridade de 1 a 5: do menos prioritário ao mais prioritário)

Accordion (Prioridade 1)
Alert (Prioridade 4)
Animation (Prioridade 0)
Background (Prioridade 0) [Em andamento]
Breadcrumb (Prioridade 0)
Card (Prioridade 4)
Comment (Prioridade 0)
Container (Prioridade 0)
Countdown (Prioridade 1)
Cover (Prioridade 0)
Description (Prioridade 0)
Dropdown (Prioridade 3)
Input OTP (Prioridade 4)
Icon (Prioridade 0)
Image (Prioridade 0)
Leader (Prioridade 0)
List (Prioridade 4)
Marker (Prioridade 0)
Modal (Prioridade 4)
Nav (Prioridade 4)
Navbar (Prioridade 4)
Notification (Prioridade 4)
Pagination (Prioridade 2)
Parallax (Prioridade 0)
Placeholder (Prioridade 1)
Position (Prioridade 1)
Print (Prioridade 0)
Progress (Prioridade 0)
Scroll (Prioridade 0)
Scrollspy (Prioridade a definir)
Slidenav (Prioridade 0)
Slider (Prioridade 0)
Slideshow (Prioridade 0)
Sortable (Prioridade 1)
Spinner (Prioridade 1)
SVG (Prioridade 0)
Tab (Prioridade 3)
Table (Prioridade 4)
Thumbnav (Prioridade 0)
Transition (Prioridade 0)
Utility (Prioridade indefinida – precisa de definição do que se trata)
Video (Prioridade 0)