faculdadephorte.edu.br

Efeitos & Tokens

Raios e sombras. Os raios derivam de um raio base; as sombras são quatro degraus de elevação, cada um com o seu token.

Raios

Os quatro derivam de --radius: 0.5rem por calc(). Mudar o raio base reflete nos quatro de uma vez — é a vantagem de derivar em vez de listar.

rounded-sm--radius-sm

calc(8px - 4px) = 4px

rounded-md--radius-md

calc(8px - 2px) = 6px

rounded-lg--radius-lg

8px — o raio base

rounded-xl--radius-xl

calc(8px + 4px) = 12px

Sombras

Quatro degraus de elevação desde a E53, cada um com o seu token em :root. A contagem de usos sai do código de app/components na hora em que a página é gerada — não é escrita à mão. O Figma, na Fase 2, só confere os valores.

shadow-sm--sombra-repouso

Repouso — cartão parado

19 usos no código

shadow-md--sombra-hover

Hover de cartão e botão

11 usos no código

shadow-lg--sombra-flutuante

Flutuante — cartão destacado, menu

19 usos no código

shadow-xl--sombra-sobreposicao

Sobreposição — o que passa por cima da página

10 usos no código

shadow-2xl

Fora dos degraus: mega-menu e destaque (valor do Tailwind)

11 usos no código