# Sistema de design Tabler ## Pré-visualização da interface do sistema de design Tabler Examine decisões e estudos de capa, adicione um marco validado e alterne o modo de cores nativo. ## Referência de design do sistema de design Tabler Variáveis compiladas do CSS 1.6.1 Tabler. Esta versão usa primitivas OKLCH e light-dark()/color-mix() em funções semânticas; exemplos mais antigos de Tabler baseados em valores hexadecimais não devem ser considerados o mesmo tema. Os valores abaixo são os padrões reais da versão instalada. ### Cores padrão de status e ação | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --tblr-primary | oklch(54.6% 0.1724 254.2deg) | Função da ação principal. | | --tblr-secondary | oklch(55.55% 0 0deg) | Função secundária. | | --tblr-success | oklch(67.38% 0.1885 145.43deg) | Função de sucesso. | | --tblr-info | oklch(66.26% 0.1358 246.81deg) | Função informativa. | | --tblr-warning | oklch(77.02% 0.1658 71.02deg) | Função de aviso. | | --tblr-danger | oklch(58.29% 0.1941 25.59deg) | Função de perigo. | | --tblr-purple | oklch(57.83% 0.2186 319.15deg) | Cor da categoria de protótipo neste aplicativo. | | --tblr-body-color | light-dark(oklch(26.86% 0 0deg), oklch(92.19% 0 0deg)) | O texto se adapta ao esquema de cores atual. | | --tblr-body-bg | light-dark(oklch(98.51% 0 0deg), oklch(20.46% 0 0deg)) | O plano de fundo da página se adapta ao esquema de cores. | | --tblr-bg-surface | light-dark(var(--tblr-bg-surface-primary), var(--tblr-gray-800)) | Função de plano de fundo para cartões/superfícies. | ### Tipografia do corpo e escala de cantos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --tblr-font-sans-serif | system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif | Pilha de fontes sans-serif do sistema na versão instalada. | | --tblr-body-font-size | 0.875rem | Equivalente ao padrão de 14 px com a raiz do navegador em 16 px. | | --tblr-body-font-weight | 400 | Peso normal do texto do corpo. | | --tblr-body-line-height | 1.4285714286 | Cerca de 20 px no tamanho padrão do corpo. | | --tblr-border-radius | 6px | Raio padrão de 6 px. | | --tblr-border-radius-sm | 4px | Raio pequeno de 4px. | | --tblr-border-radius-lg | 8px | Raio grande de 8 px. | | --tblr-border-radius-xl | 1rem | Raio extragrande de 1 rem. | | --tblr-border-radius-pill | 100rem | Arredondamento em formato de pílula. | ### Geometria do espaçamento e da linha do tempo nativa | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --tblr-spacer-0 | 0 | Valor de espaçamento nomeado nativo. | | --tblr-spacer-1 | 0.25rem | Valor de espaçamento nomeado nativo. | | --tblr-spacer-2 | 0.5rem | Valor de espaçamento nomeado nativo. | | --tblr-spacer-3 | 1rem | Valor de espaçamento nomeado nativo. | | --tblr-spacer-4 | 1.5rem | Valor de espaçamento nomeado nativo. | | --tblr-spacer-5 | 2rem | Valor de espaçamento nomeado nativo. | | --tblr-spacer-6 | 2.5rem | Valor de espaçamento nomeado nativo. | | --tblr-page-padding | var(--tblr-spacer-3) | Variável do espaçamento entre página e linha do tempo; ajustes responsivos podem alterá-la. | | --tblr-card-spacer-x | 1.25rem | Preenchimento horizontal padrão do corpo do cartão. | | --tblr-card-spacer-y | 1.25rem | Preenchimento vertical padrão do corpo do cartão. | | --tblr-timeline-icon-size | 2.5rem | Nó de ícone de 40 px com raiz padrão de 16 px. | ### Escolhas originais do diário | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Project layout | col-lg-8 + col-lg-4 | Grade nativa; duas colunas a partir do breakpoint lg. | | Page padding | 32px; 24px 14px below 650px | Recuo original do aplicativo. | | Journal title | 32px / 1.2; 27px on mobile | Substituição original do título da página. | | Cover studies | 155px tall; 120px on mobile | Arte decorativa original de CSS. | ## Guia completo do sistema de design Tabler Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design Tabler: use o tema correspondente à versão Tabler ### Use o tema correspondente à versão Tabler > O diário do projeto foi criado com Tabler 1.6.1. Sua paleta compilada usa cores OKLCH, enquanto as variáveis semânticas usam light-dark e color-mix. Por isso, a referência apresenta essas expressões reais, em vez de copiar valores hexadecimais de um guia antigo de Bootstrap ou Tabler. A ação principal, os selos de status e as funções de superfície vêm todos desta versão instalada. Tabler amplia o vocabulário de componentes de Bootstrap com seus próprios padrões de layout e exibição de informações. O exemplo usa as classes nativas de timeline, page-header, datagrid e avatar, além de cartões, formulários e um modal conhecidos. Esses detalhes fazem dele uma composição de Tabler, e não uma grade genérica de cartões com outro logotipo. Consulte a especificação de apoio ## Sistema de design Tabler: o modo de cores altera as superfícies e o texto ### O modo de cores altera as superfícies e o texto O controle de tema altera data-bs-theme no elemento html e atualiza seu próprio estado pressionado e o rótulo da ação. As expressões semânticas de Tabler passam então a selecionar valores claros ou escuros. Para este exemplo simples com dois estados, não é necessário um gerenciador de temas JavaScript separado, e nenhuma preferência é mantida fora da página. Decisão, Protótipo e Revisão usam classes nativas de tonalidade azul, roxa e verde. Seus rótulos de texto continuam fazendo sentido sem depender apenas das cores. A arte dos estudos de capa mantém sua paleta original, semelhante à do papel, nos dois modos; os cartões ao redor, a página e o texto usam o tema real do componente. Consulte a especificação de apoio ## Sistema de design Tabler: texto compacto no corpo com hierarquia de página independente ### Texto compacto no corpo com hierarquia de página independente O corpo padrão usa 0.875rem, com altura de linha próxima a 1.4286, resultando em texto de cerca de 14 px quando a raiz tem 16 px. A pilha de fontes instalada usa as fontes sans-serif do sistema, portanto esta pré-visualização não precisa de fontes remotas. Os títulos dos cartões e os metadados mantêm suas classes nativas, enquanto o título da página recebe um tamanho original de 32 px. Os valores nativos de espaçamento seguem a progressão 0, 0.25, 0.5, 1, 1.5, 2 e 2.5rem. São variáveis nomeadas no CSS instalado, não uma escala estimada. O preenchimento padrão do corpo do cartão é de 1.25rem em ambas as direções. O nó da linha do tempo tem 2.5rem, e seu conector usa a variável de preenchimento da página para cobrir o espaço entre as entradas. Consulte a especificação de apoio ## Sistema de design Tabler: uma linha do tempo é mais do que uma borda vertical ### Uma linha do tempo é mais do que uma borda vertical Cada marco é um item de lista timeline-event, com timeline-event-icon e timeline-event-card. O CSS nativo posiciona o nó, desenha o conector entre as entradas que não são finais e desloca o cartão de conteúdo pela largura do nó mais o preenchimento da página. O exemplo não simula a linha com uma imagem de fundo nem depende de posições absolutas para cada cartão. Os cartões têm conteúdos variados. Um registra uma decisão estrutural, outro contém três estudos de capa reais e o terceiro registra uma revisão de referência. O contexto do projeto fica fora da sequência porque o formato e o foco atual são atributos permanentes, não eventos datados. Em telas menores, a barra lateral aparece depois da linha do tempo na ordem do documento. Consulte a especificação de apoio ## Sistema de design Tabler: use Datagrid para pequenos grupos de rótulos e valores ### Use Datagrid para pequenos grupos de rótulos e valores O cartão de contexto do projeto usa pares de datagrid-item, datagrid-title e datagrid-content. Formato, Equipe, Marcos e Foco atual são atributos paralelos, por isso são apresentados em um datagrid nativo compacto, em vez de uma tabela com cabeçalhos de linha redundantes. Os avatares usam iniciais em texto e não precisam de imagens remotas. A contagem de etapas é o único valor de contexto alterado por este exemplo. Adicionar uma entrada local atualiza a contagem de três para quatro, sem modificar a descrição original do projeto. Assim, evitamos inventar métricas de painel: o número corresponde diretamente às entradas visíveis na lista. Consulte a especificação de apoio ## Sistema de design Tabler: o modal incluído controla a visibilidade e o foco ### O modal integrado controla a visibilidade e o foco O botão Adicionar etapa abre o modal nativo por meio de data-bs-toggle e data-bs-target. O Tabler JavaScript incluído fornece a implementação do modal. Um listener de shown.bs.modal foca o campo de título após a transição, quando a entrada está visível. Os botões Fechar e Cancelar usam data-bs-dismiss para seguir o mesmo ciclo de vida do componente. O modal contém um formulário real. Os atributos de obrigatoriedade e comprimento rejeitam campos incompletos antes da execução do manipulador de envio. O manipulador também verifica o comprimento após remover os espaços das extremidades, pois uma sequência de espaços não é um título nem uma justificativa útil. A validação preserva o texto inserido para que possa ser corrigido; o formulário só é limpo depois que uma entrada é adicionada com sucesso. 1. Abra o modal e envie os campos vazios para conferir o primeiro controle inválido. 2. Informe um título, escolha o tipo de etapa e explique a justificativa. 3. Envie e confirme que a nova entrada e a contagem de contexto são atualizadas juntas. Consulte a especificação de apoio ## Sistema de design Tabler: insira texto com segurança e identifique a origem local ### Insira texto seguro e identifique os limites locais A aplicação cria uma estrutura de cartão conhecida e insere o título e a justificativa com textContent. Apenas um mapeamento fixo dos três tipos do seletor define a classe de cor. O texto fornecido pelo usuário nunca é interpolado no cartão HTML. O novo item é inserido no início da lista com o rótulo LOCAL ENTRY, claramente identificado, em vez de um horário de servidor inventado. Após a inserção, a instância existente do modal é ocultada e uma notificação de status identifica a nova etapa. Ela informa explicitamente que nenhum serviço do projeto foi atualizado. Um diário colaborativo real precisaria de persistência, identidade do autor e garantias de ordenação; adicionar algo ao DOM local não oferece esses recursos. Consulte a especificação de apoio ## Sistema de design Tabler: mantenha o conteúdo denso legível em uma linha do tempo estreita ### Mantenha o conteúdo denso legível em uma linha do tempo estreita A grade principal usa col-lg-8 e col-lg-4. Abaixo do breakpoint nativo large, o contexto do projeto aparece abaixo do diário. A folha de estilos original para telas pequenas reduz o espaço lateral da linha do tempo, permite que grupos de títulos e badges quebrem linha e redimensiona os estudos de capa, mantendo o mesmo texto e as mesmas ações. Uma linha do tempo pode ficar apertada quando a coluna de ícones, o preenchimento dos cartões e um título longo disputam o mesmo espaço. O exemplo para dispositivos móveis mantém o nó como guia estável, mas usa um recuo compacto. Os estudos de capa originais continuam em três comparações pequenas, pois a relação entre eles é importante; as legendas complementam o parágrafo explicativo ao lado. - Mantenha o título e o tipo de etapa legíveis quando quebrarem linha. - Preserve o texto da justificativa, em vez de truncar todas as entradas da linha do tempo. - No celular, posicione o cartão de contexto após a sequência principal de leitura. Consulte a especificação de apoio ## Sistema de design Tabler: carregue um par correspondente de CSS e JavaScript ### Carregue um par CSS e JavaScript compatível A configuração usa @tabler/core 1.6.1 e copia os recursos de dist para um diretório público local. Carregue tabler.min.css antes da folha de estilos da aplicação e tabler.min.js antes do código de interação local. Adicionar outro pacote Bootstrap não relacionado pode inicializar os mesmos atributos de dados duas vezes; este exemplo usa apenas o pacote Tabler correspondente. A folha de estilos atual usa funções de cor modernas. Consulte as orientações de compatibilidade com navegadores de Tabler antes de adotá-la em um produto que precise oferecer suporte a navegadores mais antigos. O exemplo local foi testado no Chromium quanto à validação do modal nativo, à inserção na linha do tempo, ao modo escuro e ao layout de 390px; ele não é uma implantação de produção nem representa uma garantia para todos os navegadores possíveis. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design Tabler ### Linha do tempo, cartão de contexto e modal de entrada Estrutura nativa de evento da linha do tempo, cartão, grade de dados, badge e modal. ```
TABLER · PROJECT JOURNAL

Atlas field notes

Decisions, prototypes and review checkpoints for a small editorial project.

  • A clearer route through the issue

    Decision
    Alex Morgan · 02 OCT

    Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.

  • Three cover directions

    Prototype
    Jules Chen · 01 OCT
    ATLASRIDGE / 01
    ATLASRIVER / 02
    ATLASPLAIN / 03

    Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.

  • Reference package reviewed

    Review
    Sam Rivera · 30 SEP

    Image captions, credit lines and print dimensions are recorded alongside each selected reference.

``` Referência de código - A linha do tempo é uma lista real, na ordem de leitura. - O contexto do projeto usa pares de título e conteúdo em uma grade de dados. - O acionador do modal usa atributos de dados compatíveis com Bootstrap incluído API. ### Adição local de etapa validada Ciclo de vida do modal, inserção segura de texto, sincronização da contagem e modo de cor. ``` const q=s=>document.querySelector(s),modalEl=q('#entry-modal');let count=3; modalEl.addEventListener('shown.bs.modal',()=>q('#entry-name').focus()); q('#theme').onclick=e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.setAttribute('aria-pressed',String(dark));e.currentTarget.textContent=dark?'Light mode':'Dark mode';}; q('#entry-form').onsubmit=e=>{e.preventDefault();const title=q('#entry-name'),detail=q('#entry-detail'),kind=q('#entry-type').value;if(title.value.trim().length<5){title.setCustomValidity('Use at least five non-space characters.');title.reportValidity();return;}if(detail.value.trim().length<15){detail.setCustomValidity('Use at least fifteen non-space characters.');detail.reportValidity();return;}const li=document.createElement('li');li.className='timeline-event';const color={Decision:'blue',Prototype:'purple',Review:'green'}[kind];li.innerHTML=`

You · LOCAL ENTRY

`;li.querySelector('h2').textContent=title.value.trim();li.querySelector('.badge').textContent=kind;li.querySelector('p').textContent=detail.value.trim();q('#timeline').prepend(li);q('#count').textContent=`${++count} recorded`;tabler.Modal.getInstance(modalEl).hide();q('#notice').hidden=false;q('#notice').textContent=`Local ${kind.toLowerCase()} added: ${title.value.trim()}. No project service was updated.`;e.target.reset();};['#entry-name','#entry-detail'].forEach(s=>q(s).oninput=e=>e.target.setCustomValidity('')); ``` Referência de código - As strings inseridas pelo usuário são atribuídas com textContent. - O modal só é limpo depois que uma entrada válida é adicionada. - A notificação informa que nenhum serviço do projeto foi atualizado. ### Layout original do diário e estudos de capa Ajustes responsivos em torno dos componentes nativos de Tabler. ``` html,body{min-height:0;height:auto}body{margin:0}.project-log{max-width:1160px;padding:32px;margin:auto}.project-log .page-header{margin:0 0 24px}.project-log .page-title{font-size:32px;line-height:1.2}.cover-strip{display:flex;gap:12px}.cover-strip>div{flex:1;min-width:0;height:155px;padding:14px;background:#d6dfd2;color:#334834;position:relative;overflow:hidden;border-radius:4px}.cover-strip>div:nth-child(2){background:#cbdbe3;color:#2d4857}.cover-strip>div:nth-child(3){background:#e9d9bc;color:#6a5439}.cover-strip b{letter-spacing:.15em;font-size:14px}.cover-strip i{position:absolute;width:120px;height:90px;border-radius:50%;background:currentColor;opacity:.2;left:20%;top:38%;transform:rotate(-25deg)}.cover-strip>div:nth-child(2) i{width:40px;height:150px;top:30%;left:50%;border-radius:40%}.cover-strip>div:nth-child(3) i{width:160px;height:60px;top:45%;left:10%;border-radius:0;transform:rotate(-12deg)}.cover-strip small{position:absolute;bottom:12px;left:14px;font-size:9px;letter-spacing:.12em}[hidden]{display:none!important}.timeline-event-card .badge{height:fit-content;white-space:nowrap}.timeline-event-card p{line-height:1.65}.timeline-event-icon{font-size:11px;font-weight:700}@media(max-width:650px){.project-log{padding:24px 14px}.project-log .page-title{font-size:27px}.page-header .col-auto{width:100%;margin-top:16px}.cover-strip{gap:6px}.cover-strip>div{height:120px;padding:8px}.cover-strip b{font-size:10px}.cover-strip small{left:8px;font-size:7px}.timeline-event-card .d-flex{flex-wrap:wrap}.timeline-event-card{margin-inline-start:calc(var(--tblr-timeline-icon-size) + 12px)}} ``` Referência de código - A arte das capas representa três estudos de design fictícios. - O documento usa a altura do conteúdo para incorporação. ## Configuração do agente do sistema de design Tabler ### Ponto de partida para implementação Tabler 1.6.1 verificado. Salve os módulos de layout e aplicação correspondentes como style.css e app.js. Usa os atributos de dados do modal nativo API. O wrapper HTML inclui toda a marcação do body; salve os exemplos fornecidos de interação e CSS com os nomes de arquivo indicados aqui. ```
TABLER · PROJECT JOURNAL

Atlas field notes

Decisions, prototypes and review checkpoints for a small editorial project.

  • A clearer route through the issue

    Decision
    Alex Morgan · 02 OCT

    Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.

  • Three cover directions

    Prototype
    Jules Chen · 01 OCT
    ATLASRIDGE / 01
    ATLASRIVER / 02
    ATLASPLAIN / 03

    Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.

  • Reference package reviewed

    Review
    Sam Rivera · 30 SEP

    Image captions, credit lines and print dimensions are recorded alongside each selected reference.

``` ### Um prompt para seu projeto ``` Use Tabler 1.6.1 para reproduzir o diário do projeto Atlas, com sua linha do tempo, cartões de contexto, grade de dados e modal nativo. Mantenha o formulário de etapas validado separado da linha do tempo confirmada: cancelar não altera o diário, e um envio válido adiciona a etapa informada aos registros locais. Preserve os atributos data-bs, o pacote Tabler correspondente e o tratamento de tema. Mantenha decorativos os estudos de capa originais e deixe o texto das etapas legível em telas estreitas. Não sugira a existência de um inventário de infraestrutura nem de publicação externa. ``` ## Fontes e escopo do sistema de design Tabler Tabler 1.6.1. As variáveis de tema e os componentes nativos são diferenciados do conteúdo original do projeto e da arte das capas. As novas etapas permanecem locais. - Instalação Recursos do pacote correspondente. - Cores Referência de funções do tema. - Tipografia Estilos tipográficos nativos. - Linha do tempo Estrutura do nó, conector e cartão de evento. - Grade de dados Atributos compactos do projeto. - Modal Configuração do modal nativo. - Modos de cor Controle de tema claro e escuro. ## Recursos relacionados do sistema de design Tabler ### Tamagui Explore as categorias reais de tokens da v5 e os temas azuis claro e escuro do Tamagui em um painel completo de hábitos com componentes nativos, validação, progresso e recuperação para estados vazios. ### UIkit UIkit combina uma estrutura de CSS, personalização com Less e componentes JavaScript orientados por atributos. No planejador de oficina abaixo, Switcher, Accordion e a grade responsiva funcionam em conjunto, ilustrando onde termina o comportamento nativo dos componentes e começa o estado de seleção da aplicação. ### Vant Um fluxo móvel de seleção de endereço criado com Vant 4: variáveis CSS reais, identidade de endereço controlada, validação de campos, alternância de tema e salvamento explicitamente apenas local. - [Referência de implementação](https://docs.tabler.io/ui/components/timeline) - [Fonte](https://docs.tabler.io/ui/base/colors) - [Fonte](https://docs.tabler.io/ui/base/typography) - [Fonte](https://docs.tabler.io/ui/components/timeline) - [Fonte](https://docs.tabler.io/ui/components/card) - [Consulte a especificação de apoio](https://docs.tabler.io/ui/getting-started/upgrade-to-1.6) - [Consulte a especificação de apoio](https://docs.tabler.io/ui/getting-started/color-modes) - [Consulte a especificação de apoio](https://docs.tabler.io/ui/base/typography) - [Consulte a especificação de apoio](https://docs.tabler.io/ui/components/timeline) - [Consulte a especificação de apoio](https://docs.tabler.io/ui/components/data-grid) - [Consulte a especificação de apoio](https://docs.tabler.io/ui/components/modal) - [Consulte a especificação de apoio](https://docs.tabler.io/ui/layout/page-layouts) - [Consulte a especificação de apoio](https://docs.tabler.io/ui/getting-started/installation) - [Referência de código](https://docs.tabler.io/ui/components/timeline) - [Referência de código](https://docs.tabler.io/ui/components/modal) - [Referência de código](https://docs.tabler.io/ui/layout/page-layouts) - [Instalação Recursos do pacote correspondente.](https://docs.tabler.io/ui/getting-started/installation) - [Cores Referência de funções do tema.](https://docs.tabler.io/ui/base/colors) - [Tipografia Estilos tipográficos nativos.](https://docs.tabler.io/ui/base/typography) - [Linha do tempo Estrutura do nó, conector e cartão de evento.](https://docs.tabler.io/ui/components/timeline) - [Grade de dados Atributos compactos do projeto.](https://docs.tabler.io/ui/components/data-grid) - [Modal Configuração do modal nativo.](https://docs.tabler.io/ui/components/modal) - [Modos de cor Controle de tema claro e escuro.](https://docs.tabler.io/ui/getting-started/color-modes)