Tema
Tokens e temas
Os tokens seguem o método do IBM Carbon, em três camadas:
- Paleta (
--tj-navy-900,--tj-blue-500…): os valores. Nenhum componente usa a paleta direto. - Papéis (
--tj-background,--tj-layer-01,--tj-text-primary…): o que cada valor faz. Um tema troca só esta camada. - Tokens de componente (
--tj-button-*,--tj-avatar-*): os poucos valores que só um componente usa e que nenhum papel cobre.
Os componentes usam só os papéis e os próprios tokens de componente. Todo valor solto fica na paleta, inclusive os do tema escuro, e um teste reprova cor escrita fora dela.
A marca segue o manual de marca do TJES: azul do logo #1e84ff, rosa #f6adcd e azul institucional #2d66f5, que é o azul de ação. O cabeçalho #0c0a39 e a fonte Roboto vêm do portal tjes.jus.br.
Tema claro e escuro
ts
import { getThemePreference, initTheme, setTheme } from '@lab-inovacao-tjes/design-system'
initTheme() // no main.ts: aplica a escolha guardada ou segue o sistema operacional
setTheme('dark') // troca e guarda a escolha
setTheme('system') // apaga a escolha e volta a seguir o sistema
getThemePreference() // 'light', 'dark' ou 'system'O tema vale para a página inteira (data-theme no <html>) ou só para um trecho, com data-theme="dark" num elemento. Para a pessoa escolher, use o BaseThemeSwitch no menu dela.
- Sem escolha guardada, a tela segue o sistema operacional, inclusive quando ele troca de claro para escuro com a página aberta. Nada é guardado enquanto a pessoa não escolhe.
- A escolha fica no
localStorage, na chaveds-theme-choice. Se o navegador bloquear o armazenamento, a escolha vale até a página ser fechada. - Até a versão 0.8.0, a chave era
ds-theme, e oinitTheme()guardava nela o tema do sistema já no primeiro acesso, sem a pessoa escolher nada. Agora oinitTheme()apaga essa chave sem transformá-la em escolha, e a tela volta a seguir o sistema. Se o app chamavasetTheme('light')ousetTheme('dark')na 0.8.0, chame de novo depois de atualizar. - Cada troca dispara no
documento eventods-themechange(THEME_CHANGE_EVENT), com o tema aplicado e a escolha emdetail. - Não há tema próprio de alto contraste. O alto contraste do Windows (
forced-colors) troca as cores pelas do sistema operacional em qualquer tema, e os componentes desenham bordas, seleção e foco com as cores do sistema.
Como ler as tabelas
Cada token tem uma linha: o valor, quando usar e quando não usar. Quando o valor muda com o tema, a coluna mostra os dois, claro / escuro. Os valores soltos, de onde os papéis tiram as cores, ficam na página Paleta. As tabelas desta página e da Paleta cobrem todos os 271 tokens de tokens.css, e o teste tests/docsTokens.test.ts reprova token sem linha nas duas ou com valor diferente do arquivo.
Contraste
O teste tests/contrast.test.ts mede o contraste dos pares de papéis que os componentes usam, nos dois temas: texto sobre cada fundo em que aparece, com 4,5:1 ou mais, e borda de campo, contorno de foco, preenchimento de barra e ícone com 3:1 ou mais. Ficam fora da conta, com o motivo escrito no teste, o texto e o ícone de controle desabilitado, o halo translúcido de foco (que sempre vem com um contorno sólido medido), as divisórias e as formas de situação que sempre vêm com texto.
Fundo e camadas
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-background | #f6f7fb / #08071f | Fundo da página, atrás de cartões e tabelas. | Dentro de cartão, tabela ou modal: use --tj-layer-01. |
--tj-background-brand | #0c0a39 | Cabeçalho institucional do BaseAppShell e fundo do BaseFooter. É o azul-marinho do portal e não muda no tema escuro. | Em botão, faixa de destaque ou fundo de conteúdo. |
--tj-background-inverse | #0c0a39 / #e7e9f6 | Superfície invertida: aviso do BaseToast, dica do BaseStatusLight, página atual da paginação. | Em área grande de conteúdo; o texto sobre ela é --tj-text-inverse. |
--tj-overlay | rgba(12, 10, 57, .48) / rgba(0, 0, 0, .6) | Véu atrás do modal aberto. | Para escurecer imagem ou desativar parte da tela. |
--tj-layer-01 | #ffffff / #1a1948 | Primeira camada sobre o fundo: cartão, tabela, modal, painel. | Como fundo da página, que é --tj-background. |
--tj-layer-02 | #fbfbfe / #211f52 | Camada dentro da camada 01: cabeçalho de tabela, rodapé de modal, área de envio de arquivo, nota da linha do tempo. | Direto sobre --tj-background, onde quase não se distingue. |
--tj-layer-hover-01 | #f6f7fb / #252359 | Hover de linha, item de menu e botão fantasma sobre a camada 01. | Como estado selecionado: use --tj-layer-selected-01. |
--tj-layer-accent-01 | #eef0f6 / #3b3a75 | Trilho de progresso, selo neutro, fundo do controle segmentado, esqueleto. | Como fundo de bloco de texto longo. |
--tj-layer-accent-02 | #e2e5ef / #46458a | Pressionado sobre --tj-layer-accent-01 e contador dentro do segmentado. | Sozinho como fundo de área. |
--tj-layer-selected-01 | #ecf2fd / #25398a | Linha, item ou aba selecionados; lado "depois" do BaseDiff. | Para chamar atenção sem seleção: use uma cor de situação. |
--tj-layer-selected-hover-01 | #dbe7fb / #2c43a0 | Hover sobre um item já selecionado. | Fora de item selecionado. |
--tj-field-01 | #ffffff / #1f1e4d | Fundo de campo, seletor, caixa de seleção e opção. | Como fundo de cartão, mesmo que o valor seja igual. |
--tj-field-disabled | #f6f7fb / #1a1948 | Fundo de campo desabilitado ou somente leitura. | Em campo habilitado, nem para "destacar" um campo. |
Bordas
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-border-subtle-01 | #eef0f6 / #2e2d62 | Divisória entre linhas de tabela e entre seções de um cartão. | Para contornar um controle: some na tela. |
--tj-border-subtle-02 | #e2e5ef / #3a3972 | Borda de cartão, tabela, modal; borda de controle desabilitado. | Como borda de campo habilitado: use --tj-border-strong-01. |
--tj-border-strong-01 | #878da8 / #7d80b3 | Borda de campo, seletor e botão secundário. Passa de 3:1 sobre o fundo, o mínimo para enxergar o controle. | Em divisória decorativa: pesa demais. |
--tj-border-strong-02 | #5d6484 / #9a9dc8 | Campo no hover, borda da caixa de seleção e do rádio, trilho do switch desligado. | Em divisória. |
--tj-border-interactive | #2d66f5 / #5a8cf2 | Campo em foco, contorno de foco do teclado, item selecionado. | Em elemento que não recebe foco nem seleção. |
--tj-border-selected-subtle | #b9cff7 / #2d4590 | Contorno leve de item selecionado: lado "depois" do BaseDiff, contador do menu atual. | Como único sinal de seleção ou de foco. |
Texto e links
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-text-primary | #15173a / #f1f2fa | Texto principal: títulos, valores, conteúdo de tabela. | Sobre fundo de cor ou invertido: use --tj-text-on-color ou --tj-text-inverse. |
--tj-text-secondary | #363b5c / #cfd2ea | Rótulo de campo, texto de apoio com peso de leitura. | Em título ou valor principal. |
--tj-text-helper | #5d6484 / #a9adcf | Ajuda, legenda, placeholder, data e texto discreto. | Em texto que a pessoa precisa ler para agir, como um erro. |
--tj-text-placeholder | #878da8 / #8f93bb | Só texto desabilitado (rótulo de opção inativa, etiqueta desabilitada). Fica abaixo de 4,5:1 de propósito. | Em texto legível, inclusive placeholder de campo, que usa --tj-text-helper. |
--tj-text-on-color | #ffffff | Texto e ícone sobre botão primário, botão de perigo e fundo de cor cheia. | Sobre camada clara ou escura do tema. |
--tj-text-inverse | #ffffff / #15173a | Texto sobre --tj-background-inverse e sobre a etapa concluída do BaseStatusFlow. | Sobre o fundo normal da página. |
--tj-text-brand | #0c0a39 / #f1f2fa | Texto em azul-marinho: item atual do menu e valores do lado "depois" do BaseDiff. | Como cor de link: use --tj-link-primary. |
--tj-link-primary | #1f52d4 / #8cb1f2 | Link no texto e botão com cara de link. | Em texto que não leva a lugar nenhum. |
--tj-link-primary-hover | #1a43ab / #b9cff7 | Link no hover e no pressionado; contador do segmentado selecionado. | Como cor de link em repouso. |
Ícones e interação
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-icon-primary | #15173a / #f1f2fa | Ícone que carrega sentido sozinho, como o "x" de remover ao passar o mouse. | Em ícone decorativo ao lado de texto: use --tj-icon-secondary. |
--tj-icon-secondary | #878da8 / #8d91b8 | Ícone de apoio ao lado de um texto que diz o mesmo; texto e ícone de controle desabilitado. Fica abaixo de 4,5:1 de propósito. | Em ícone que é a única informação, ou em texto. |
--tj-icon-interactive | #2d66f5 / #8cb1f2 | Ícone azul de destaque: o do aviso de informação, o do item atual do menu, o da área de envio e o do estado vazio. | Em ícone de apoio ao lado de texto: use --tj-icon-secondary. |
--tj-interactive | #2d66f5 | Fundo do botão primário, caixa e rádio marcados, switch ligado, barra da aba selecionada. | Como cor de texto: use --tj-link-primary. |
--tj-interactive-hover | #1f52d4 | Os mesmos controles no hover. | Em repouso. |
--tj-interactive-active | #1a43ab | Os mesmos controles pressionados. | Em repouso ou no hover. |
--tj-focus | rgba(45, 102, 244, .28) / rgba(140, 177, 242, .45) | Cor do halo translúcido de foco, dentro de --tj-ring. | Sozinho como sinal de foco: fica abaixo de 3:1. O contorno sólido é --tj-border-interactive. |
--tj-brand-accent-blue | #1e84ff | Azul do logo do TJES, para marca e ilustração. | Em texto, link ou botão. |
--tj-brand-accent-pink | #f6adcd | Rosa da marca: marcador de prazo do BaseExecutionBar. | Como cor de situação: rosa não quer dizer erro nem aviso. |
Cabeçalho institucional
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-text-on-brand | #ffffff | Texto, links e contorno de foco sobre o cabeçalho e o rodapé institucionais. | Fora do cabeçalho e do rodapé. |
--tj-text-on-brand-secondary | #b8bfe0 | Segunda linha do cabeçalho (a secretaria), ícones das ferramentas e endereço do rodapé. | Fora do cabeçalho e do rodapé. |
--tj-text-on-brand-placeholder | #8e93c4 | Placeholder da busca no cabeçalho. | Em texto que a pessoa precisa ler. |
--tj-layer-on-brand | rgba(255, 255, 255, .08) | Hover dos botões e fundo da busca no cabeçalho. | Fora do cabeçalho: é branco translúcido. |
--tj-border-on-brand | rgba(255, 255, 255, .12) / rgba(255, 255, 255, .18) | Divisórias do cabeçalho e do rodapé, botão pressionado no cabeçalho e o brilho de cima do botão primário. | Como borda de controle. |
Situação
Cada tom tem cinco papéis: a forma cheia, o texto, o fundo claro, a borda e o texto forte. Nos selos e avisos, use o texto e o fundo do mesmo tom juntos.
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-support-success | #22a06b | Forma cheia de sucesso que sempre vem com um texto que diz o mesmo: a luz do BaseStatusLight e a borda da nota do BaseTimeline. | Em texto ou ícone que precisa ser lido: use --tj-support-success-text. |
--tj-support-success-text | #16794a / #6fdba6 | Texto, ícone e borda de sucesso, como o texto do selo e do aviso. | Como fundo de área grande. |
--tj-support-success-subtle | #e6f4ec / #12382a | Fundo de sucesso sob --tj-support-success-text ou -strong: selo, aviso, círculo do ícone. | Com texto de outra cor que não a do tom. |
--tj-support-success-border | #a9dcc0 / #1f5c43 | Borda do BaseAlertBanner de sucesso. | Como única marca do tom: é clara demais. |
--tj-support-success-strong | #0f5434 / #a7ecc8 | Texto do BaseAlertBanner de sucesso, sobre -subtle. | Fora do fundo -subtle do mesmo tom. |
--tj-support-warning | #e8a317 | Forma cheia de aviso que sempre vem com um texto que diz o mesmo: a luz do BaseStatusLight, a faixa do BaseKpiCard, a barra do BaseDiff e a borda da nota do BaseTimeline. | Em texto ou ícone que precisa ser lido: use --tj-support-warning-text. |
--tj-support-warning-text | #9a5800 / #f5c56b | Texto, ícone e borda de aviso, como o texto do selo e do aviso. | Como fundo de área grande. |
--tj-support-warning-subtle | #fdf0d9 / #3a2a0c | Fundo de aviso sob --tj-support-warning-text ou -strong: selo, aviso, círculo do ícone. | Com texto de outra cor que não a do tom. |
--tj-support-warning-border | #f2cf8f / #6a4c14 | Borda do BaseAlertBanner de aviso. | Como única marca do tom: é clara demais. |
--tj-support-warning-strong | #6b3d00 / #f9dca3 | Texto do BaseAlertBanner de aviso, sobre -subtle. | Fora do fundo -subtle do mesmo tom. |
--tj-support-error | #e5484d | Forma cheia de erro que sempre vem com um texto que diz o mesmo: a luz do BaseStatusLight, a faixa do BaseKpiCard e a borda da nota do BaseTimeline. | Em texto ou ícone que precisa ser lido: use --tj-support-error-text. |
--tj-support-error-text | #bf2e29 / #ff9a95 | Texto, ícone e borda de erro, como o texto do selo e do aviso. | Como fundo de área grande. |
--tj-support-error-subtle | #fdebea / #431a1d | Fundo de erro sob --tj-support-error-text ou -strong: selo, aviso, círculo do ícone. | Com texto de outra cor que não a do tom. |
--tj-support-error-border | #f5b9b6 / #74302f | Borda do BaseAlertBanner de erro. | Como única marca do tom: é clara demais. |
--tj-support-error-strong | #8c1f1c / #ffc6c2 | Texto do BaseAlertBanner de erro, sobre -subtle. | Fora do fundo -subtle do mesmo tom. |
--tj-support-info | #2d66f5 | Forma cheia de informação que sempre vem com um texto que diz o mesmo: a borda da nota do BaseTimeline. | Em texto ou ícone que precisa ser lido: use --tj-support-info-text. |
--tj-support-info-text | #1f52d4 / #8cb1f2 | Texto, ícone e borda de informação, como o texto do selo e do aviso. | Como fundo de área grande. |
--tj-support-info-subtle | #ecf2fd / #1a2a5c | Fundo de informação sob --tj-support-info-text ou -strong: selo, aviso, círculo do ícone. | Com texto de outra cor que não a do tom. |
--tj-support-info-border | #b9cff7 / #2d4590 | Borda do BaseAlertBanner de informação. | Como única marca do tom: é clara demais. |
--tj-support-info-strong | #173a8a / #b9cff7 | Texto do BaseAlertBanner de informação, sobre -subtle. | Fora do fundo -subtle do mesmo tom. |
--tj-support-attention | #e8590c | Laranja para "atenção" quando aviso e erro já estão em uso na tela. Nenhum componente usa hoje. | No lugar de --tj-support-warning. |
--tj-support-success-on-inverse | #5fd49b / #0f5434 | Sucesso sobre --tj-background-inverse, como um ícone de sucesso num aviso escuro. Nenhum componente usa hoje. | Sobre o fundo normal da página. |
Sombra e foco
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-shadow-rgb | 12, 10, 57 / 0, 0, 0 | Canais da cor da sombra, para rgba(var(--tj-shadow-rgb), …) num estilo de componente. No tema claro a sombra puxa para o azul-marinho; no escuro, é preta. | Como cor de texto, fundo ou borda. |
--tj-shadow-1 | 0 1px 2px rgba(12, 10, 57, .06), 0 1px 1px rgba(12, 10, 57, .03) / 0 1px 2px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .03) | Elevação baixa: cartão de indicador, tabela, seção de formulário. | Em elemento que abre por cima da tela. |
--tj-shadow-2 | 0 2px 4px rgba(12, 10, 57, .05), 0 8px 20px -4px rgba(12, 10, 57, .12) / 0 2px 4px rgba(0, 0, 0, .05), 0 8px 20px -4px rgba(0, 0, 0, .12) | Elevação média: lista do combobox, menu, dica. | Em cartão parado na página. |
--tj-shadow-3 | 0 4px 8px rgba(12, 10, 57, .06), 0 24px 56px -12px rgba(12, 10, 57, .28) / 0 4px 8px rgba(0, 0, 0, .06), 0 24px 56px -12px rgba(0, 0, 0, .28) | Elevação alta: modal e aviso flutuante. | Em elemento que faz parte do fluxo da página. |
--tj-ring | 0 0 0 3px rgba(45, 102, 244, .28) / 0 0 0 3px rgba(140, 177, 242, .45) | Halo de foco de campos e botões, por fora do contorno sólido. | Sozinho como foco: fica abaixo de 3:1. |
--tj-ring-danger | 0 0 0 3px rgba(191, 46, 41, .22) | Halo de foco de campo com erro e do botão de perigo. | Em campo sem erro. |
Tipografia
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-font-sans | "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif | Toda a interface. É a Roboto, a do portal, servida pelo pacote. | Em número que precisa alinhar em coluna: use font-variant-numeric: tabular-nums, não a fonte mono. |
--tj-font-mono | "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace | Código e identificadores lidos caractere por caractere, como a coluna de código da tabela. | Em texto corrido ou em valor em dinheiro. |
--tj-text-xs | 12px | Tamanho de legenda, contador, selo pequeno. Sempre com --tj-leading-xs. | Em texto que a pessoa lê por muito tempo. |
--tj-leading-xs | 16px | Altura de linha do --tj-text-xs. | Com outro tamanho de letra. |
--tj-text-sm | 13px | Tamanho de rótulo de campo, selo, texto secundário. Sempre com --tj-leading-sm. | Com outra altura de linha. |
--tj-leading-sm | 18px | Altura de linha do --tj-text-sm. | Com outro tamanho de letra. |
--tj-text-md | 14px | Tamanho de texto do corpo, o padrão de campos e botões. Sempre com --tj-leading-md. | Com outra altura de linha. |
--tj-leading-md | 20px | Altura de linha do --tj-text-md. | Com outro tamanho de letra. |
--tj-text-lg | 16px | Tamanho de campo e botão grandes, título de seção pequena. Sempre com --tj-leading-lg. | Com outra altura de linha. |
--tj-leading-lg | 24px | Altura de linha do --tj-text-lg. | Com outro tamanho de letra. |
--tj-text-xl | 20px | Tamanho de título de modal e de grupo. Sempre com --tj-leading-xl. | Com outra altura de linha. |
--tj-leading-xl | 28px | Altura de linha do --tj-text-xl. | Com outro tamanho de letra. |
--tj-text-2xl | 24px | Tamanho de título de seção (.tj-h2) e número do BaseKpiCard em tela estreita. Sempre com --tj-leading-2xl. | Com outra altura de linha. |
--tj-leading-2xl | 32px | Altura de linha do --tj-text-2xl. | Com outro tamanho de letra. |
--tj-text-3xl | 30px | Tamanho de título de página (.tj-h1). Sempre com --tj-leading-3xl. | Com outra altura de linha. |
--tj-leading-3xl | 38px | Altura de linha do --tj-text-3xl. | Com outro tamanho de letra. |
--tj-text-4xl | 40px | Tamanho de texto de destaque (.tj-display). Sempre com --tj-leading-4xl. | Com outra altura de linha. |
--tj-leading-4xl | 48px | Altura de linha do --tj-text-4xl. | Com outro tamanho de letra. |
--tj-weight-regular | 400 | Texto do corpo e valores. | Em título. |
--tj-weight-medium | 500 | Rótulo de campo, item de menu, cabeçalho de tabela. | Em parágrafo inteiro. |
--tj-weight-semibold | 600 | Títulos, botão, item selecionado. | Em texto longo. |
--tj-weight-bold | 700 | Número de destaque e total. | Em título comum: use semibold. |
Espaço
Base de 4 px. O número do token é o múltiplo de 4: --tj-space-2 = 8 px, --tj-space-4 = 16 px, --tj-space-6 = 24 px.
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-space-0 | 0 | Zerar um espaço herdado. | Para esconder algo. |
--tj-space-half | 2px | Ajuste ótico de 2 px, como entre um contador e a borda. | Como espaço entre elementos. |
--tj-space-1 | 4px | Entre ícone e texto. | Entre componentes. |
--tj-space-2 | 8px | Dentro de um controle e entre itens de uma lista curta. | Como padding de cartão. |
--tj-space-3 | 12px | Padding de controle e espaço entre botões. | Entre seções. |
--tj-space-4 | 16px | Entre componentes irmãos, como dois campos. | Entre ícone e texto. |
--tj-space-5 | 20px | Entre blocos de um cartão de indicador e passos de linha do tempo. | No lugar de --tj-space-4 ou --tj-space-6 só para "caber". |
--tj-space-6 | 24px | Padding de cartão e espaço entre blocos. | Dentro de um controle. |
--tj-space-8 | 32px | Margem da página e espaço entre seções. | Entre campos do mesmo formulário. |
--tj-space-10 | 40px | Recuo do campo com afixo no fim e espaço de estado de página. | Como espaço comum entre componentes. |
--tj-space-12 | 48px | Começo de seção nova e estados vazios. | Dentro de cartão. |
--tj-space-16 | 64px | Medidas grandes da moldura: respiro no fim da área de conteúdo e coluna de ações da tabela. | Como espaço entre componentes. |
--tj-space-20 | 80px | Respiro no fim da área de conteúdo no celular e largura mínima do painel da pessoa. | Como espaço entre componentes. |
O padding dos controles (campos, seletores e botões) tem tokens próprios, porque sai da altura do controle e não da escala: (altura − 2 px de borda − 20 px de linha) / 2.
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-control-padding-y-sm | 5px | Padding vertical do controle de 32 px. | Fora de controle com linha de 20 px e borda de 1 px. |
--tj-control-padding-y-md | 9px | Padding vertical do controle de 40 px. | Fora de controle com linha de 20 px e borda de 1 px. |
--tj-control-padding-y-lg | 13px | Padding vertical do botão de 48 px e do seletor grande da paginação. | No campo e no seletor grandes, que têm linha de 24 px. |
--tj-control-padding-x-sm | 10px | Padding horizontal do controle de 32 px. | Em controle médio ou grande: use --tj-space-3 ou --tj-space-4. |
O campo e o seletor grandes não usam --tj-control-padding-y-lg: o texto deles tem 24 px de linha (--tj-leading-lg), então o padding vertical é calculado no próprio estilo, (--tj-control-lg − 2 px − --tj-leading-lg) / 2, e dá 11 px. O teste tests/controlHeights.test.ts soma padding, linha e borda de cada controle e reprova o que não tiver exatamente a altura do token.
O teste tests/spacing.test.ts reprova gap, margin, padding e font-size escritos em pixels (a partir de 3 px) fora de tokens.css. As poucas medidas que são o tamanho de uma forma, e não um passo da escala, ficam numa lista no próprio teste, cada uma com o motivo.
Raio e medidas
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-radius-sm | 4px | Caixa de seleção, etiqueta, foco de link. | Em cartão. |
--tj-radius-md | 8px | Botão, campo, item de menu. | Em modal e cartão grande. |
--tj-radius-lg | 12px | Cartão, tabela, modal, aviso. | Em controle. |
--tj-radius-pill | 999px | Selo, contador, trilho de progresso, switch. | Em botão ou campo. |
--tj-control-sm | 32px | Altura do controle pequeno (32 px): tabelas densas, filtros. | Em tela de toque. |
--tj-control-md | 40px | Altura padrão de botão, campo e seletor (40 px). | Misturada com outra altura na mesma linha. |
--tj-control-lg | 48px | Altura do controle grande (48 px): toque e telas de entrada. | Em tabela. |
--tj-row-compact | 40px | Altura da linha da tabela compacta. | Fora de tabela. |
--tj-row-default | 52px | Altura da linha padrão da tabela. | Fora de tabela. |
--tj-icon-sm | 16px | Ícone de 16 px dentro de controle e ao lado de texto. | Em ícone sozinho de estado vazio. |
--tj-icon-md | 20px | Ícone de 20 px de aviso e o padrão do BaseIcon. | Dentro de botão pequeno. |
--tj-icon-lg | 24px | Ícone de 24 px de arquivo, aviso flutuante e destaque. | Ao lado de texto do corpo. |
--tj-sidebar | 272px | Largura do menu lateral aberto. | Para coluna de conteúdo: o BasePageAside tem largura própria. |
--tj-header | 64px | Altura do cabeçalho institucional. | Para outras faixas. |
--tj-content-max | 1280px | Largura máxima da área de conteúdo. | Em tabela larga, que rola dentro do componente. |
--tj-page-gap | 24px | O espaço vertical entre os blocos de uma tela: corpo do BasePage, BasePageState, painel de BaseTabs e BaseCardGrid. | Dentro de um cartão ou de um controle; e não some com margem própria em cima dele. |
Movimento
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-duration-fast-01 | 70ms | Troca de cor de ícone. | Em algo que entra ou sai da tela. |
--tj-duration-fast-02 | 110ms | Hover e foco. | Em abertura de modal. |
--tj-duration-moderate-01 | 150ms | Abrir menu, mostrar ajuda. | Em hover. |
--tj-duration-moderate-02 | 240ms | Abrir modal, aviso, progresso. | Em hover. |
--tj-duration-slow-01 | 400ms | Trocar de conteúdo dentro da tela, barra indeterminada. | Em resposta a clique, que parece lenta. |
--tj-easing-standard | cubic-bezier(.2, 0, .38, .9) | Movimento dentro da tela. | Em algo que entra: use --tj-easing-entrance. |
--tj-easing-entrance | cubic-bezier(0, 0, .38, .9) | Algo que entra: lista, aviso, dica. | Em algo que sai. |
--tj-easing-exit | cubic-bezier(.2, 0, 1, .9) | Algo que sai da tela. | Em algo que entra. |
--tj-ease | cubic-bezier(.2, 0, .38, .9) | Nome curto do protótipo para --tj-easing-standard, usado por botões e campos. | Em estilo novo: prefira --tj-easing-standard. |
--tj-fast | 110ms | Nome curto do protótipo para --tj-duration-fast-02. | Em estilo novo: prefira --tj-duration-fast-02. |
--tj-base | 240ms | Nome curto do protótipo para --tj-duration-moderate-02. Nenhum componente usa hoje. | Em estilo novo: prefira --tj-duration-moderate-02. |
Tokens de componente
São valores que só um componente usa. Ficam num bloco próprio de tokens.css, depois dos papéis, e também mudam com o tema.
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-button-danger | #bf2e29 | Fundo do BaseButton kind="danger". Igual nos dois temas, com texto branco a 5,77:1. | Em outro componente: use --tj-support-error-*. |
--tj-button-danger-hover | #a52622 | O mesmo botão no hover. | Fora do botão de perigo. |
--tj-button-danger-active | #8c1f1c | O mesmo botão pressionado. | Fora do botão de perigo. |
--tj-button-warning-border | #e2b46a / #8a6420 | Borda do botão de aviso com contorno (.btn-warning-outline). | Como borda de campo com aviso: use --tj-support-warning-text. |
--tj-button-warning-hover-text | #7d4700 / #f9dca3 | Texto do botão de aviso no hover e pressionado. | Fora do botão de aviso. |
--tj-button-warning-active | #fae5bf / #4a3510 | Fundo do botão de aviso pressionado. | Fora do botão de aviso. |
--tj-avatar-bg | #dbe7fb / #26376f | Fundo do BaseAvatar azul. | Fora do avatar. |
--tj-avatar-text | #0c0a39 / #dbe7fb | Iniciais do BaseAvatar azul. | Fora do avatar. |
--tj-avatar-alt-bg | #fbd9e8 / #4c2340 | Fundo do BaseAvatar rosa. | Fora do avatar. |
--tj-avatar-alt-text | #6e1f47 / #fbd9e8 | Iniciais do BaseAvatar rosa. | Fora do avatar. |
--tj-logo-pink | #f6adcd | Rosa do símbolo do BaseLogo, igual nos dois temas. | Fora do logo: use --tj-brand-accent-pink. |
--tj-logo-blue | #1e84ff | Azul do símbolo do BaseLogo, igual nos dois temas. | Fora do logo: use --tj-brand-accent-blue. |
--tj-logo-endorsement | #100b20 | Endosso do BaseLogo em fundo claro. | Em texto de tela: use --tj-text-primary. |
--tj-logo-endorsement-on-dark | #fef8fb | Endosso do BaseLogo em fundo escuro, como o cabeçalho. | Em texto de tela: use --tj-text-on-brand. |
Ponte com o Bootstrap
As variáveis --bs-* ligam o Bootstrap aos papéis, para que as classes dele (.btn, .form-control, .text-primary) já saiam com as cores e medidas do TJES. Não use estas variáveis nos estilos dos componentes: use o papel.
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--bs-body-font-family | "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif | Liga a fonte do Bootstrap a --tj-font-sans. | Para trocar a fonte de um trecho: use a do sistema. |
--bs-body-font-size | 14px | Liga o tamanho do corpo a --tj-text-md. | Em estilo de componente: use --tj-text-md. |
--bs-body-line-height | 1.4286 | Altura de linha do corpo (20 px sobre 14 px). | Em estilo de componente: use --tj-leading-md. |
--bs-body-color | #15173a / #f1f2fa | Cor do texto do Bootstrap, ligada a --tj-text-primary. | Em estilo de componente: use o papel. |
--bs-body-bg | #f6f7fb / #08071f | Fundo do Bootstrap, ligado a --tj-background. | Em estilo de componente: use o papel. |
--bs-secondary-color | #5d6484 / #a9adcf | Texto secundário do Bootstrap, ligado a --tj-text-helper. | Em estilo de componente: use o papel. |
--bs-border-color | #e2e5ef / #3a3972 | Borda padrão do Bootstrap, ligada a --tj-border-subtle-02. | Como borda de campo, que usa --tj-border-strong-01. |
--bs-border-radius | 8px | Raio padrão do Bootstrap, ligado a --tj-radius-md. | Em estilo de componente: use o token de raio. |
--bs-border-radius-sm | 4px | Raio pequeno do Bootstrap, ligado a --tj-radius-sm. | Em estilo de componente: use o token de raio. |
--bs-border-radius-lg | 12px | Raio grande do Bootstrap, ligado a --tj-radius-lg. | Em estilo de componente: use o token de raio. |
--bs-primary | #2d66f5 | Cor primária do Bootstrap, ligada a --tj-interactive (o azul de ação, não o azul-marinho). | Em estilo de componente: use o papel. |
--bs-primary-rgb | 45, 102, 244 | Canais da cor primária, para as classes do Bootstrap com transparência. | Em estilo de componente. |
--bs-link-color | #1f52d4 / #8cb1f2 | Cor de link do Bootstrap, ligada a --tj-link-primary. | Em estilo de componente: use o papel. |
--bs-link-color-rgb | 31, 82, 212 / 140, 177, 242 | Canais da cor de link, que o Bootstrap usa nos links. | Em estilo de componente. |
--bs-link-hover-color-rgb | 26, 67, 171 / 185, 207, 247 | Canais da cor de link no hover. | Em estilo de componente. |
--bs-focus-ring-color | rgba(45, 102, 244, .28) / rgba(140, 177, 242, .45) | Cor do anel de foco do Bootstrap, ligada a --tj-focus. | Sozinha como foco. |
--bs-emphasis-color | #15173a / #f1f2fa | Texto de ênfase do Bootstrap, ligado a --tj-text-primary. | Em estilo de componente: use o papel. |
--bs-heading-color | #15173a / #f1f2fa | Cor dos títulos do Bootstrap, ligada a --tj-text-primary. | Em estilo de componente: use o papel. |
--bs-code-color | #15173a / #f1f2fa | Cor do <code>: a do texto, em vez do rosa do Bootstrap, que fica abaixo de 4,5:1. | Para destacar código com cor. |