Use Tokens quando a interface precisar de cores, espaçamento, tipografia, sombra e z-index que sustentam todos os componentes.
Tokens
Cores, espaçamento, tipografia, sombra e z-index que sustentam todos os componentes. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.
Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Timing / Motion (transitions)
Timing / Motion (transitions), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="doc-muted" style="margin: 0 0 10px;">Passe o mouse para sentir a diferença de “timing/easing”.</div>
<div style="display:flex; gap:10px; flex-wrap:wrap;">
<button class="sc-btn sc-btn-primary sc-dur-fast" type="button">Rápido</button>
<button class="sc-btn sc-btn-primary" type="button">Padrão</button>
<button class="sc-btn sc-btn-primary sc-dur-slow sc-ease-spring" type="button">Lento + Spring</button>
</div>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.