Estúdio de personalização

Tokens

117 editáveis · 11 bloqueados

Navy

Hex oficial de referência. Experimentar no estúdio não altera os arquivos do repo.

Azul

Laranja

Acento único. É bisturi, não tinta: no máximo 2% da tela.

Off-white

Branco

Papel

Não editáveis em tempo real

derived.color-mix-stops--fe-*-soft|muted|strongTons derivados usam color-mix a partir das hues de marca. Alterar a hue no estúdio já recalcula; editar o % do mix exigiria reescrever a fórmula CSS e não é seguro em tempo real.
motion.reduced-motion@media (prefers-reduced-motion: reduce)Preferência do sistema zera durações/distâncias. Não deve ser contornada pelo estúdio.
icons.strokeWidth-jsstrokeWidth dos ícones Lucide vem de constante TypeScript (lib/icons). --fe-icon-stroke só afeta uso via CSS.
radius.full--fe-radius-full9999px para círculos/avatars. Editar em tempo real quebraria padrões circulares sem ganho visual útil.
motion.duration-instant--fe-duration-instantSempre 0ms por contrato; não faz sentido editar.
shadcn-tw-animate-keyframesKeyframes enter/exit de overlays (tw-animate-css / Radix) não são tokens --fe-*; o estúdio não mexe neles.
chart.recharts-js-animationisAnimationActive e timings internos do Recharts não leem --fe-duration; só cores de série são tokens.
material.glass-fill-color-mix--fe-glass-fill|highlight|borderPreenchimentos usam color-mix com tokens de marca. Editar o mix completo no estúdio é frágil; ajuste blur/sombra/radius e as hues de marca.
material.reduced-transparency@media (prefers-reduced-transparency)Preferência do sistema força fallback opaco. Não deve ser contornada.
borders.transparent--fe-border | --fe-border-subtleDireção flat (2026-09-15): não há bordas. A cor é transparente por contrato e a delimitação vem de --fe-field, das superfícies e da sombra; um color picker reintroduziria strokes.
apple.native-refractionRefração óptica nativa não existe em CSS web; backdrop-filter é uma interpretação do vidro leve.

Total no registro: 117 variáveis cobertas pelo editor.

Preview

Carregando preview…