npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@gleissonneves/liz-design-system

v2.13.5

Published

Sistema de design Liz Design System

Readme

Liz Design System

Versão

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

  1. Avatar

  2. Badge

    • Com ícone
    • Sem ícone
    • Número contador
    • Diferentes tamanhos: md, sm, xsm, xxsm, xxxsm
  3. Button

    • Estados: hover, active, loading, disabled
    • Tamanhos: normal, small
    • Largura flexível
    • Versão com ícone
  4. Flex

  5. Form Control

    • Checkboxes
      • Checkbox
      • Radio
      • Toggle
    • Input (Prioridade 5)
    • Select (Prioridade 5)
    • Textarea (Prioridade 5)
    • File [Upload] (Prioridade 5)
    • Search (Prioridade 3)
  6. Grid

  7. Gap

  8. Label

  9. Margin

  10. Off-canvas (Prioridade 5)

    • Com Overlay (2.4.1v)
  11. Overlay (Prioridade 5)

  12. Padding

  13. Typography

    • Headline
    • Tamanho de fonte
    • Peso da fonte
    • Cor
    • Transformação
    • Alinhamento
    • Quebra de linha
    • Paleta de cores
    • Divider
    • Altura de linha
  14. Visibility (Controle de display)

  15. 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)