@codenhub/styles 0.6.0 → 0.8.0

package/docs/pt-BR/usage/forms.md

@@ -0,0 +1,256 @@
+---
+title: Formulários
+description: Campos com rótulo, dicas e erros, ícones e prefixos fixos, selects e toggles de checkbox, radio e switch.
+order: 2
+source: 00e6a57cfd62f524fde5a550af721786edd7a5dd
+---
+
+# Formulários
+
+O card de perfil tem um botão de salvar, mas nada para salvar. Esta página o preenche: um nome de exibição com uma dica, um endereço de e-mail que mostra um erro de validação, um endereço de perfil com prefixo fixo, um select de idioma e os toggles de notificações, cobrança e visibilidade do perfil. O pacote estiliza cada controle; o seu HTML fornece os rótulos, a validação e as mensagens de erro, e esta página mostra como ligar uma coisa à outra.
+
+## Um campo com rótulo
+
+Um campo é um rótulo, um controle e uma dica opcional, empilhados:
+
+```html
+<div class="field">
+  <label class="label" for="display-name">Display name</label>
+  <input class="ipt" id="display-name" name="display-name" aria-describedby="display-name-hint" />
+  <span class="hint" id="display-name-hint">Shown on invoices and shared projects.</span>
+</div>
+```
+
+- `.field` empilha os filhos com um espaçamento pequeno (0.35rem) e ocupa a largura toda.
+- `.label` define o texto do rótulo: 1rem, peso médio.
+- `.hint` é um texto de ajuda menor, na cor secundária. Mantenha-o fora do `<label>` e aponte o `aria-describedby` para ele, para que um leitor de tela o anuncie como descrição em vez de lê-lo como parte do nome do campo.
+- `.ipt` estiliza um `<input>`. Use `.textarea` para um `<textarea>` e `.select` para um `<select>`.
+
+Um controle de texto tem pelo menos 2.5rem de altura (`--control-height`), a mesma altura de um botão padrão, então um campo e um botão ficam alinhados numa linha. O visual padrão dele é sem preenchimento e com borda. Um `.textarea` tem pelo menos 7rem de altura e pode ser redimensionado na vertical.
+
+### Tamanhos
+
+`.ipt`, `.select`, `.textarea` e `.input-group` aceitam as classes de tamanho do botão, então um campo pequeno e um botão pequeno ficam alinhados numa linha:
+
+| Classe | Altura | Padding lateral | Texto     |
+| ------ | ------ | --------------- | --------- |
+| `.sm`  | 2rem   | 0.625rem        | 0.875rem  |
+| padrão | 2.5rem | 0.75rem         | herdado   |
+| `.lg`  | 3rem   | 1rem            | 1.0625rem |
+
+Os cantos acompanham o tamanho, como num botão. Um `.textarea` mantém a altura mínima de 7rem em todos os tamanhos; a classe muda o texto, o padding e os cantos dele. Defina o tamanho de um `.input-group` no grupo, não no controle dentro dele: o controle e os adornos recebem o tamanho de texto do grupo.
+
+```html
+<div class="cluster tight">
+  <input class="ipt sm" aria-label="Coupon code" />
+  <button class="btn sm" type="button">Apply</button>
+</div>
+```
+
+## Mostre um erro de validação
+
+Marque o controle como inválido com `aria-invalid="true"` e dê à mensagem de erro `.hint.destructive`:
+
+```html
+<div class="field">
+  <label class="label" for="email">Email</label>
+  <input class="ipt" type="email" id="email" name="email" value="ada@" aria-invalid="true" aria-describedby="email-error" />
+  <span class="hint destructive" id="email-error">Enter a full email address, such as ada@example.com.</span>
+</div>
+```
+
+Um controle inválido desenha a borda, o anel de foco e o texto digitado na cor destrutiva, seja qual for a classe de intenção dele. O texto usa o tom legível dessa cor, `--intent-strong`, para continuar legível na página. O pacote só pinta o estado: decidir que o valor é inválido, definir e remover o `aria-invalid` e escrever a mensagem ficam por conta do seu código. Remova o `aria-invalid` assim que o valor voltar a ser válido; se ele continuar definido, o campo continua vermelho. Num checkbox, radio ou switch, `aria-invalid="true"` desenha o toggle exatamente como `.destructive` desenha, marca de seleção incluída.
+
+Um hint aceita qualquer uma das seis intenções embutidas, não só `.destructive`: `.hint.success` confirma que um valor foi aceito, e `.hint.warning` sinaliza um valor permitido, mas incomum. Cada um aparece no tom legível da sua intenção, `--intent-strong`, que mantém 4.5:1 em relação à página nos dois temas. Um hint sem intenção, com `.neutral` ou com uma [intenção que você mesmo definiu](./theming.md#sua-própria-intenção) continua na cor secundária. Só uma classe no próprio hint o colore; uma intenção no campo ou num contêiner em volta dele não.
+
+```html
+<input class="ipt success" id="username" value="ada" aria-describedby="username-hint" /> <span class="hint success" id="username-hint">That username is available.</span>
+```
+
+## Monte o formulário de perfil
+
+```html
+<form class="card stack" aria-labelledby="profile-title">
+  <h2 class="text-title-sm" id="profile-title">Profile</h2>
+
+  <div class="field">
+    <label class="label" for="display-name">Display name</label>
+    <input class="ipt" id="display-name" name="display-name" value="Ada Lovelace" aria-describedby="display-name-hint" />
+    <span class="hint" id="display-name-hint">Shown on invoices and shared projects.</span>
+  </div>
+
+  <div class="field">
+    <label class="label" for="email">Email</label>
+    <input class="ipt" type="email" id="email" name="email" value="ada@example.com" />
+  </div>
+
+  <div class="field">
+    <label class="label" for="bio">Bio</label>
+    <textarea class="textarea" id="bio" name="bio" rows="3"></textarea>
+  </div>
+
+  <div class="field">
+    <label class="label" for="language">Language</label>
+    <select class="select" id="language" name="language">
+      <option>English</option>
+      <option>Português</option>
+      <option>Español</option>
+    </select>
+  </div>
+
+  <div class="cluster">
+    <button class="btn primary" type="submit">Save changes</button>
+    <button class="btn ghost" type="reset">Cancel</button>
+  </div>
+</form>
+```
+
+Um `.select` desenha a sua própria seta. Com `multiple` ou com `size` maior que 1, ele vira uma caixa de listagem: sem seta, com a altura das linhas que mostra. A lista aberta de opções é desenhada pelo navegador e pelo sistema operacional, então ela não pega o visual do pacote.
+
+## Adicione um ícone ou um prefixo fixo
+
+`.input-group` coloca um ícone ou um trecho de texto dentro da borda de um campo. O grupo desenha a borda, o fundo, o anel de foco e os estados inválido e desabilitado; o controle dentro dele abre mão dos seus, para que a borda seja desenhada uma vez só. Coloque o adorno antes do controle para que ele fique no início, ou depois para que fique no fim. Um grupo tem a altura de um campo sozinho, então fica alinhado com os campos e botões ao lado dele.
+
+O endereço do perfil sempre começa com o mesmo host, então ele é um prefixo fixo:
+
+```html
+<div class="field">
+  <label class="label" for="profile-url">Profile address</label>
+  <div class="input-group" style="--input-group-gap: 0">
+    <span>app.example.com/u/</span>
+    <input class="ipt" id="profile-url" name="profile-url" value="ada" />
+  </div>
+</div>
+```
+
+O espaçamento entre o controle e o adorno é `--input-group-gap`, 0.5rem por padrão. Isso funciona bem para um ícone, mas um texto que deve parecer parte do valor fica estranho com um espaço depois dele, então o exemplo define o valor como `0`. Defina-o no próprio `.input-group`: o grupo declara o seu próprio padrão, então um valor definido num elemento pai não tem efeito. Ela é uma das seis [variáveis públicas de componente](./customizing.md#variáveis-de-componente).
+
+Uma busca de membros, com um ícone no início (as classes `ic-lucide-*` precisam do `@codenhub/icons` carregado; veja [Botões → Carregando ícones](./buttons.md#carregando-ícones)):
+
+```html
+<div class="field">
+  <label class="label" for="member-search">Find a member</label>
+  <div class="input-group">
+    <i class="ic-lucide-search" aria-hidden="true"></i>
+    <input class="ipt" type="search" id="member-search" name="q" />
+  </div>
+</div>
+```
+
+Um `.select` também funciona num grupo. O grupo remove o padding lateral do controle, exceto no fim de um select de uma linha, que mantém 1.75rem para que o texto da opção escolhida não passe por baixo da seta.
+
+Qualquer elemento serve de adorno: uma classe de ícone, um `<svg>` inline, um `<img>` ou texto. O pacote não entrega ícones para campos, porque uma imagem embutida não conseguiria acompanhar a cor do seu texto, o seu tema ou a sua estética.
+
+O grupo lê intenção e apresentação do mesmo jeito que um `.ipt` sozinho: `.input-group.primary` colore a borda e o texto digitado, e `.input-group.soft.edgeless` é um campo afundado na página. Coloque a intenção no grupo, não no controle de dentro: o grupo desenha o campo, então o texto do controle recebe a intenção do grupo, e uma classe de intenção no controle não tem efeito. `aria-invalid="true"` ou `disabled` no controle de dentro se aplica ao grupo inteiro, e o mesmo vale para qualquer um dos dois no próprio grupo. O anel de foco do grupo aparece quando o campo dele tem foco, então, diferente de um campo sozinho, ele também aparece depois de um clique do mouse. Um botão dentro do grupo, como um botão de limpar, desenha o seu próprio anel quando tem foco, e o grupo não desenha nenhum: um único anel sempre marca o único controle que tem foco.
+
+## Decorações do navegador
+
+Alguns tipos de input vêm com botões embutidos: o botão de seletor de um campo de data ou hora, as setas para cima e para baixo de um campo numérico e o botão de limpar de um campo de busca. O pacote os mantém, porque cada um também faz alguma coisa: o botão de seletor é o único jeito de abrir o seletor com o mouse, e o botão de limpar esvazia o campo.
+
+`.unadorned` os remove, para um campo em que você desenha os seus próprios. Coloque a classe no controle ou no `.input-group` dele. Remover uma decoração remove o que ela fazia, então ligue o seu substituto você mesmo: `input.showPicker()` abre um seletor, `stepUp()` e `stepDown()` substituem as setas, e definir `value` como `""` e disparar um evento `input` substitui um botão de limpar. Digitar continua funcionando em qualquer caso. O Firefox não oferece um jeito de remover o botão do seletor de data, então ele continua lá.
+
+```html
+<div class="field">
+  <label class="label" for="member-filter">Find a member</label>
+  <div class="input-group unadorned">
+    <i class="ic-lucide-search" aria-hidden="true"></i>
+    <input class="ipt" type="search" id="member-filter" name="q" />
+    <button class="btn icon ghost p-xs" type="button" aria-label="Clear search">
+      <i class="ic-lucide-x" aria-hidden="true"></i>
+    </button>
+  </div>
+</div>
+```
+
+O botão de limpar acima é um `<button>` de verdade, com nome acessível. Um botão dentro de um grupo mantém as suas próprias classes: um `.btn.ghost` não tem preenchimento e, como todo botão por padrão, não tem borda, então ele fica dentro da borda do campo sem desenhar uma própria.
+
+## Toggles
+
+A tela de configurações tem três tipos de toggle: um checkbox para optar por receber e-mails de fatura, radio buttons para escolher o período de cobrança e um switch para deixar o perfil público. Cada classe vai num `<input>` nativo do tipo correspondente:
+
+```html
+<fieldset class="stack tight">
+  <legend class="label">Notifications</legend>
+  <label class="cluster tight">
+    <input class="checkbox" type="checkbox" name="invoice-email" checked />
+    Email me when an invoice is ready
+  </label>
+</fieldset>
+
+<fieldset class="stack tight">
+  <legend class="label">Billing period</legend>
+  <label class="cluster tight">
+    <input class="radio" type="radio" name="period" value="monthly" />
+    Monthly
+  </label>
+  <label class="cluster tight">
+    <input class="radio" type="radio" name="period" value="yearly" checked />
+    Yearly, two months free
+  </label>
+</fieldset>
+
+<label class="cluster tight">
+  <input class="switch primary" type="checkbox" role="switch" name="public-profile" />
+  Public profile
+</label>
+```
+
+- `.checkbox` vai em `type="checkbox"`, `.radio` em `type="radio"` e `.switch` em `type="checkbox"`. Dê você mesmo `role="switch"` a um switch, para que ele seja anunciado como ligado ou desligado, e não como marcado.
+- `.cluster.tight` no `<label>` alinha o controle com o texto e deixa um espaçamento de 0.5rem.
+- Um checkbox com a propriedade `indeterminate` definida, para um grupo em que só alguns itens estão marcados, mostra um traço, e mantém o traço mesmo quando também está `checked`, como faz o checkbox nativo do navegador. Defina-a por script (`input.indeterminate = true`); não existe atributo para isso.
+
+### Cores de marcado e desmarcado
+
+Uma classe de intenção define a cor de marcado. Sem intenção, um toggle marcado é preenchido com a cor do texto, e a marca é desenhada na cor da página: uma caixa preta com um visto branco numa página clara. Diferente de um botão neutro, um toggle neutro é preenchido por completo quando marcado.
+
+A apresentação muda só o visual desmarcado. Todo toggle fica em `.soft` por padrão; depois de marcado, cada um tem um único visual, seja qual for a apresentação:
+
+| Toggle          | Preenchimento desmarcado | Marcado                                                |
+| --------------- | ------------------------ | ------------------------------------------------------ |
+| `.ghost`        | 0%                       | 100% de preenchimento, com a marca na cor de contraste |
+| `.soft`, padrão | 12%                      | 100% de preenchimento, com a marca na cor de contraste |
+| `.solid`        | 40%                      | 100% de preenchimento, com a marca na cor de contraste |
+
+Um checkbox marcado e um switch marcado recortam a marca da placa preenchida. Um radio marcado engrossa o anel para o dobro da espessura de linha em repouso, até 3px, ganha a cor cheia da intenção nele e mostra um ponto. O limite de 3px impede que o anel engula o ponto numa estética de linha grossa.
+
+`.checkbox` e `.radio` sempre desenham a borda, mesmo com `.edgeless`, porque a borda é a única coisa que mostra uma caixa desmarcada. `.switch.ghost` também mantém a borda, já que, sem preenchimento e sem borda, nada marcaria o trilho. Esses casos estão listados em [Composição](./composing.md#referência-de-eixos-por-componente).
+
+Uma estética que desenha a borda como uma sombra interna, como a `.pixel`, não consegue deixar essa sombra mais larga que a espessura da borda do toggle. Um checkbox de 16px ou um switch de 20px não tem espaço para um anel interno mais grosso sem cobrir a marca. Isso só importa se você mesmo definir `--ui-shadow-spread`; veja [Personalização → Tokens de material](./customizing.md#tokens-de-material).
+
+## Preenchimento e borda em controles de texto
+
+Controles de texto aceitam intenção, que colore a borda, o anel de foco e o texto digitado, este no tom legível da intenção (`--intent-strong`). Eles também aceitam os dois eixos de apresentação. O preenchimento deles tem um teto baixo, para que o texto digitado continue legível:
+
+| Num controle de texto                                              | Preenchimento |
+| ------------------------------------------------------------------ | ------------- |
+| `.ghost`, padrão                                                   | 0%            |
+| Qualquer preenchimento vindo de um contêiner (`.soft` ou `.solid`) | 6%            |
+| `.soft` no controle                                                | 12%           |
+| `.solid` no controle                                               | 20%           |
+
+O preenchimento de um contêiner é pensado para as superfícies dentro dele, então um campo sem classe pega só um leve 6% dele. Para mais, coloque a classe no próprio campo.
+
+A borda funciona do mesmo jeito. Um `.edgeless` herdado de um contêiner é ignorado, para que uma toolbar não deixe um campo sem contorno visível. Um `.edgeless` escrito no próprio controle é respeitado: é assim que você pede um campo sem borda. Um campo sem borda não atende ao requisito de contraste do WCAG 1.4.11 para o limite de um controle, então ele nunca é o padrão; o anel de foco dele continua aparecendo.
+
+```html
+<input class="ipt success" placeholder="Matches your current password" />
+<input class="ipt soft edged" placeholder="Tinted, with a border" />
+<input class="ipt soft edgeless" placeholder="Sunk into the page" />
+<div class="soft">
+  <input class="ipt" placeholder="A container's .soft gives a 6% tint" />
+</div>
+```
+
+Em repouso, a borda de um campo é propositalmente mais clara que 3:1 em relação à página, para que o hover e o foco tenham uma mudança visível a fazer. [Acessibilidade → Limites dos controles](../accessibility.md#limites-dos-controles) explica esse trade-off e como conseguir uma borda mais forte.
+
+## Controles desabilitados
+
+`disabled`, `aria-disabled="true"`, `data-disabled` ou `.disabled` num controle o desenham com opacidade reduzida e cursor de não permitido. Assim como nos botões, só o atributo `disabled` impede a digitação; os outros mudam apenas a aparência.
+
+## Criando o seu próprio controle
+
+Para um controle parecido com texto que o pacote não entrega, `.text-control` dá a um elemento os mesmos estilos de borda, placeholder, hover, foco, inválido e desabilitado do `.ipt`, sem a altura nem o padding dele. [Personalização → Helpers de composição](./customizing.md#helpers-de-composição) explica essa classe junto com os outros blocos de construção.
+
+## A seguir
+
+O formulário já pode ser preenchido e enviado. [Feedback](./feedback.md) mostra o que a tela faz em seguida: um botão de salvar que avisa que está salvando, uma mensagem de sucesso, um badge de plano e uma barra de uso do armazenamento.

package/docs/pt-BR/usage/index.md

@@ -0,0 +1,33 @@
+---
+title: Visão geral
+description: Os guias que terminam a tela de configurações e, depois, as páginas de consulta com cada classe, token e padrão.
+group: Uso
+order: 4
+source: ccdf1949cd4f7688574d6f4fae9ad2cf34465fb3
+---
+
+# Uso
+
+Estes guias terminam a tela de configurações começada em [Montando uma tela](../concepts.md). Leia os sete primeiros em ordem: cada um acrescenta uma parte da tela e pressupõe os anteriores. As três seguintes são páginas de consulta; os guias mandam você para elas quando precisam da tabela completa, e você pode voltar sempre que precisar de um padrão ou de uma regra. A última, Predefinições, é para quando a tela já funciona e você cansou de digitar as mesmas classes.
+
+Guias, em ordem:
+
+1. [Botões](./buttons.md): a ação destrutiva da zona de perigo, botões de ícone, tamanhos, links com cara de botão e estados desabilitados, além de como carregar ícones.
+2. [Formulários](./forms.md): o formulário de perfil, com rótulos, dicas, erros de validação, um input com ícone ou com prefixo fixo, um select e toggles de checkbox, radio e switch.
+3. [Feedback](./feedback.md): o que a tela mostra durante e depois do salvamento: um botão carregando, um alerta de sucesso, um badge de plano, um placeholder de carregamento e uma barra de uso do armazenamento.
+4. [Tooltips](./tooltips.md): texto de ajuda ao lado de um campo de formulário, como prepará-lo para quem usa teclado e leitor de tela, e onde um tooltip pode ser cortado.
+5. [Temas](./theming.md): modo claro e escuro, como trocar a paleta pelas cores da marca e como definir uma intenção própria, com as tabelas completas de tokens de cor e tokens fundamentais.
+6. [Estéticas](./aesthetics.md): os seis visuais opcionais, o que cada um muda e os seus limites.
+7. [Classes solo](./solo.md): como aplicar uma estética a um componente de outra biblioteca.
+
+Páginas de consulta:
+
+- [Composição](./composing.md): as regras completas para combinar intenção, apresentação e elevação, os padrões de cada componente e quais eixos cada componente lê.
+- [Personalização](./customizing.md): tokens de apresentação e de material, ajustes de estética, as seis variáveis públicas de componente, a paleta gerada e os helpers de composição para montar os seus próprios componentes.
+- [Conteúdo e layout](./content-and-layout.md): todos os utilitários de layout, a escala tipográfica, cards e painéis, tabelas, citações, código e teclas de teclado.
+
+Quando a tela estiver funcionando:
+
+- [Predefinições](./presets.md): defina um visual uma única vez, com classes de eixo em um contêiner, tokens de tema e de material, ou as suas próprias classes de componente feitas com `@apply`.
+
+Quando terminar, a página de [Acessibilidade](../accessibility.md) reúne o que o CSS faz por você e o que a sua aplicação ainda deve aos usuários.

package/docs/pt-BR/usage/presets.md

@@ -0,0 +1,92 @@
+---
+title: Predefinições
+description: Três formas de definir um visual uma única vez em vez de em cada elemento, e quando usar cada uma.
+order: 11
+source: 308b21076223635a3323bcfecb70abe3a9e6d1c7
+---
+
+# Predefinições
+
+A esta altura, a tela de configurações diz `btn primary soft sm` em uma dúzia de lugares, e mudar de ideia significa mudar uma dúzia de lugares. Esta página trata das três formas de definir um visual uma única vez: classes de eixo em um contêiner, tokens de tema e de material, e as suas próprias classes de componente feitas com `@apply`. Cada uma serve para um tipo diferente de "uma única vez".
+
+## Qual usar
+
+| Você quer                                                                                      | Use                                                                         |
+| ---------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| Que todos os componentes de uma região compartilhem um preenchimento, uma borda ou um material | [Classes de eixo em um contêiner](#classes-de-eixo-em-um-contêiner)         |
+| Outras cores, cantos, bordas ou profundidade para uma página ou uma região                     | [Tokens de tema e de material](#tokens-de-tema-e-de-material)               |
+| Um nome para uma receita que você repete, como "o botão de salvar"                             | [Suas próprias classes de componente](#suas-próprias-classes-de-componente) |
+
+Elas se combinam. Uma região pode definir um token de material, ficar sob uma estética e conter a sua própria classe de botão, e cada elemento ainda pode sobrescrever o que herda.
+
+## Classes de eixo em um contêiner
+
+Algumas classes funcionam num contêiner além de num componente, e tudo dentro dele as recebe:
+
+- As classes de apresentação: `.solid`, `.soft`, `.ghost`, `.edged` e `.edgeless`.
+- Os padrões de canto: `.cut-diagonal` e `.cut-diagonal-reverse`.
+- As [estéticas](./aesthetics.md), como `.glass` ou `.pixel`.
+
+```html
+<div class="cluster soft edged">
+  <button class="btn primary" type="button">Negrito</button>
+  <button class="btn" type="button">Itálico</button>
+  <button class="btn destructive solid" type="button">Limpar formatação</button>
+</div>
+```
+
+Os botões da barra são soft e com borda, e o último pede o próprio preenchimento. Uma classe no elemento sempre vence a de um contêiner.
+
+Os outros eixos não são herdados. A intenção, a elevação (`.flat`, `.raised`, `.floating`) e o tamanho (`.sm`, `.lg`) mudam só o elemento em que estão, então uma barra `.sm` não encolhe os seus botões; [Composição → Combinando classes](./composing.md#combinando-classes) explica por quê. Uma classe de estética também define o próprio padrão de canto na sua região, então um `.cut-diagonal` acima de uma região `.pixel` não chega dentro dela.
+
+Use uma classe de contêiner quando o visual pertence à região, como uma barra lateral discreta, e não aos componentes dentro dela.
+
+## Tokens de tema e de material
+
+Tokens são propriedades personalizadas de CSS. Defina um no `:root` e a página inteira segue; defina num elemento e só o que está dentro segue. Eles vão mais longe que as classes, porque os componentes os leem enquanto são desenhados:
+
+```css
+.admin {
+  --radius-control: 0.25rem;
+  --radius-surface: 0.5rem;
+  --border-width: 2px;
+}
+```
+
+Todo botão, campo, balão de tooltip e superfície dentro de `.admin` recebe os cantos mais fechados e a borda mais grossa, sem classe em nenhum deles. Checkboxes, `.kbd` e `.code` mantêm o próprio canto menor, `--radius-small`.
+
+As tabelas ficam onde os tokens são explicados, então esta página não as repete:
+
+- [Temas → Tokens de cor](./theming.md#tokens-de-cor): cores de marca e de status, nos dois temas.
+- [Temas → Tokens fundamentais](./theming.md#tokens-fundamentais): cantos, largura da borda, altura dos controles, anel de foco, profundidade e movimento.
+- [Personalização → Tokens de apresentação](./customizing.md#tokens-de-apresentação): quanto um preenchimento, uma borda ou um hover acrescenta.
+- [Personalização → Tokens de material](./customizing.md#tokens-de-material): o que uma estética define, e que você mesmo pode definir, como `--ui-radius`.
+- [Personalização → Tokens de estética](./customizing.md#tokens-de-estética): os ajustes de cada estética, como `--neo-offset`.
+
+Use tokens quando a mudança é um valor, como uma cor ou um canto, e não uma escolha entre classes.
+
+## Suas próprias classes de componente
+
+Com os entrypoints de código-fonte do Tailwind, todo componente, helper e classe de eixo é um utilitário do Tailwind, então uma classe sua pode carregar a receita inteira:
+
+```css
+@import "@codenhub/styles/tw";
+
+@utility btn-save {
+  @apply btn primary soft sm;
+}
+```
+
+```html
+<button class="btn-save" type="submit">Salvar alterações</button>
+```
+
+`btn-save` se comporta como `btn primary soft sm` escrito por extenso, com estéticas e hover incluídos, e mudar a receita muda todos os botões de salvar. Modificadores que pertencem a um componente, como `.tight` no `.stack` ou `.icon` no `.btn`, também são utilitários, então `@apply btn icon` dá a você um botão de ícone próprio. [Tailwind CSS v4 → Construa seus próprios componentes com `@apply`](../integrating/tailwind.md#construa-seus-próprios-componentes-com-apply) tem as regras, inclusive por que `@utility` é melhor que uma regra simples.
+
+Com o CSS compilado não existe `@apply`. Mantenha a receita num único lugar do outro lado: um partial de template, um componente do seu framework ou uma constante como `const saveButton = "btn primary soft sm"`.
+
+Use a sua própria classe quando a mesma combinação nomeia uma única coisa no seu design, como o botão de salvar ou o card de plano.
+
+## A seguir
+
+A página de [Acessibilidade](../accessibility.md) lista o que o CSS faz pelos seus usuários e o que a sua aplicação ainda deve a eles.

package/docs/pt-BR/usage/solo.md

@@ -0,0 +1,86 @@
+---
+title: Classes solo
+description: Como aplicar uma estética a um único elemento de outra biblioteca, como um toast ou um dialog, e o que uma classe solo lê e ignora.
+order: 7
+source: c44308a8768737292529d4f93b703b3fa200255a
+---
+
+# Classes solo
+
+Suponha que a tela de configurações mostre "Profile saved" num toast de uma biblioteca de notificações, e não no alerta deste pacote. Sob `.neobrutalism`, todo card e botão tem o contorno grosso e a sombra dura, e o toast não: uma classe de estética só define valores que os componentes deste pacote leem, então não muda nada num elemento que o pacote não estiliza. Uma classe solo aplica a estética diretamente no único elemento que a carrega:
+
+```html
+<div class="toast neobrutalism-solo success" role="status">Profile saved.</div>
+```
+
+## As seis classes solo
+
+Cada estética entrega a sua classe solo no mesmo entrypoint, e uma classe solo não precisa de mais nada carregado:
+
+```css
+/* The only stylesheet from this package on the page. */
+@import "@codenhub/styles/aesthetics/glass";
+```
+
+```html
+<div class="toast glass-solo">A pane over whatever is behind it.</div>
+```
+
+| Estética        | Classe solo          | Desenha                                                                                                                                                                                                                                        |
+| --------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.glass`        | `.glass-solo`        | Um fundo translúcido, uma borda fina de brilho, o desfoque, uma sombra suave em duas camadas e o canto de superfície. Com `.glass-liquid`, a placa liquid, desenhada no seu `::before` e `::after`.                                            |
+| `.neobrutalism` | `.neobrutalism-solo` | Uma borda de 2px na cor da tinta, cantos retos e a sombra dura deslocada.                                                                                                                                                                      |
+| `.pixel`        | `.pixel-solo`        | O contorno escalonado, o anel interno no lugar de uma borda e a fonte pixelada.                                                                                                                                                                |
+| `.chunky-tile`  | `.chunky-tile-solo`  | O canto do bloco, uma borda de 2px, a barra embaixo dele e a fonte arredondada.                                                                                                                                                                |
+| `.cyber`        | `.cyber-solo`        | A diagonal de superfície (a diagonal de controle num botão ou link), uma borda de 1px, o brilho e a fonte.                                                                                                                                     |
+| `.sketch`       | `.sketch-solo`       | Cantos elípticos irregulares (um contorno mais fechado numa placa, um mais solto num botão ou link, e cantos pequenos e arredondados com `.sketch-rounded`), uma linha de tinta sólida de 1px, a sombra deslocada de 2px e a fonte manuscrita. |
+
+Não coloque uma classe solo nos componentes deste pacote. Um `.card` já desenha o seu preenchimento, a sua borda e a sua intenção, e uma classe solo desenharia uma segunda borda e um segundo preenchimento por cima deles. Use a classe de estética ali; ela também funciona num único elemento: `<button class="btn pixel">`.
+
+## O que uma classe solo lê
+
+Um elemento solo aceita as mesmas classes de apresentação, intenção e elevação que um `.card` aceitaria:
+
+```html
+<div class="toast pixel-solo edgeless">No ring</div>
+<div class="toast glass-solo solid success">An opaque green pane</div>
+<div class="toast neobrutalism-solo flat">No offset shadow</div>
+
+<section class="soft edged">
+  <div class="toast chunky-tile-solo info">Soft and edged from the container, info from itself</div>
+</section>
+```
+
+| O quê                                         | Lido de                                                                                                 |
+| --------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| Preenchimento e borda (`.solid`, `.edged`, …) | O elemento ou qualquer contêiner: a apresentação é herdada, como acontece com os componentes.           |
+| Intenção (`.success`, …)                      | Só o elemento, como nos componentes. Um contêiner `.success` deixa neutro um elemento solo dentro dele. |
+| Elevação (`.flat`, `.raised`, …)              | Só o elemento, como nos componentes. Ela escala a sombra deslocada, a barra e a sombra do sketch.       |
+| A estética em volta (`.pixel`, …)             | Nunca. Veja [O que uma classe solo ignora](#o-que-uma-classe-solo-ignora).                              |
+
+Sem nenhuma dessas classes, uma classe solo desenha só o material (borda, canto, profundidade, contorno, desfoque, fonte e clique) e deixa o fundo e a cor do texto do próprio elemento como estavam.
+
+- **Só as seis intenções embutidas.** Uma classe solo só lê a intenção de `.primary`, `.secondary`, `.success`, `.warning`, `.destructive` e `.info`. Uma classe de intenção definida por você, como em [Temas → Sua própria intenção](./theming.md#sua-própria-intenção), não é lida, e o elemento é desenhado neutro. Para dar uma cor personalizada a um elemento solo, mude o tema de uma das intenções embutidas nele ou num contêiner, como aquela seção descreve.
+- **O preenchimento é uma camada sobre o fundo do próprio elemento.** Cinco das seis desenham o preenchimento como uma sombra interna e não definem `background`, então um toast solo `.soft` é um tom sobre o que o toast já era, e um `.solid` com uma intenção colorida é opaco. O glass define o seu próprio fundo, porque o fundo translúcido é o seu material, e mistura o preenchimento sobre ele. Um `.solid` neutro é um tom de 20%, e não o cinza opaco que um componente desenha.
+- **A cor do texto pressupõe o tema.** Ela só é definida onde um preenchimento ou uma intenção é pedido, e é a cor que o tema usa na página ou no preenchimento. Num elemento cujo próprio fundo não segue o tema, como um toast branco numa página escura, uma intenção `.soft` ou `.ghost` pode pôr texto claro sobre fundo claro; use `.solid` ou deixe a intenção de fora.
+- **Não há tom de hover.** Não se sabe se um elemento solo é clicável, então ele não recebe a cor de hover que um `.btn` recebe.
+- **Ela lê os ajustes da sua estética e os tokens do tema, com os valores entregues como fallback.** `--glass-radius-surface`, `--neo-offset`, `--pixel-unit`, `--tile-lift`, `--tile-radius`, `--cyber-cut`, `--cyber-shape`, `--cyber-shape-surface`, `--cyber-glow`, `--cyber-ink`, `--sketch-radius`, `--sketch-radius-surface`, `--sketch-radius-rounded`, `--sketch-radius-surface-rounded` e os tokens de fonte, como `--font-sketch`, funcionam todos, definidos no elemento ou em qualquer ancestral. Com o tema carregado, ela segue o tema; sem ele, renderiza o visual entregue.
+- **Os valores escuros precisam de um esquema de cores.** Os pares claro e escuro usam `light-dark()`, que segue o `color-scheme` do elemento. O tema do pacote o define; uma página sem o tema recebe os valores claros.
+- **As classes que ela lê vêm do tema.** `.solid`, `.edgeless`, `.success`, `.flat` e as demais vêm na folha de estilos base e em `@codenhub/styles/theme`. Com só um entrypoint de estética na página, essas classes não fazem nada, e a classe solo desenha o seu visual sem classes.
+
+## O que uma classe solo ignora
+
+- **A estética em volta.** Ela não lê nenhum dos valores que uma classe de estética define, nem `--elevation-color`. Um `.glass-solo` dentro de uma região `.pixel` mantém os seus próprios cantos, e `--ui-radius` ou `--ui-border-width` definidos nele ou acima dele não fazem nada. Ajuste-o pelos seus ajustes.
+- **Os seus próprios filhos.** Um elemento solo não é uma região de estética. Um componente dentro dele mantém o visual da página em volta, mesmo com `.glass-liquid` ou `.sketch-rounded` ao lado da classe solo. Ele só passa adiante o que qualquer contêiner passa: a fonte da classe solo e o preenchimento ou a borda de uma classe de apresentação nele, então um `.card` dentro de uma placa `.glass-solo.solid` é sólido, como dentro de qualquer contêiner `.solid`.
+- **A sombra do glass e `.flat`.** `.flat` não remove a sombra de `.glass-solo`, assim como não remove sob `.glass`.
+
+## Como ela vence e quando ela se move
+
+- **Ela vence os estilos da outra biblioteca.** As regras são sem camada e têm uma classe de profundidade, então vencem as regras com camada de um componente, e as de especificidade zero, onde quer que as duas carreguem. Uma regra externa sem camada que seja mais específica, ou igualmente específica e posterior na página, ainda vence. O outro lado disso é que um utilitário do Tailwind no mesmo elemento, como `rounded-none`, perde para a classe solo: use os ajustes dela em vez disso.
+- **Ela só faz clicar uma ação.** Neobrutalism, chunky tile e cyber afundam ao clicar um `button`, um `a[href]`, um `[role="button"]`, um `summary` ou um `input` do tipo botão que não esteja desabilitado. Todo o resto fica parado, então um toast não afunda ao ser clicado. O rótulo mais pesado do chunky tile segue a mesma regra.
+- **Ela não mexe no movimento de um contêiner.** Só uma ação recebe a `transition` do clique, e o clique move o elemento pelas propriedades `translate` e `scale`, não por `transform`. Um toast mantém as suas próprias transições e o seu próprio `transform`. Numa ação, a `transition` do clique substitui qualquer uma que o elemento tivesse.
+- **O movimento reduzido mantém o clique e tira o movimento dele.** Com `prefers-reduced-motion: reduce`, neobrutalism, chunky tile e cyber ainda respondem ao clique, mas de imediato: o elemento pousa na sua sombra ou barra, ou encolhe, sem se deslocar até lá.
+
+## A seguir
+
+Os guias terminam aqui. [Composição](./composing.md), [Personalização](./customizing.md) e [Conteúdo e layout](./content-and-layout.md) são as páginas de consulta, e a página de [Acessibilidade](../accessibility.md) lista o que o CSS faz pelos seus usuários e o que a sua aplicação ainda deve a eles.