Nos últimos anos, tenho acompanhado de perto a transição do design responsivo para o Intrinsic Design, e não poderia estar mais empolgada com o impacto dessa mudança na forma como desenvolvemos interfaces — especialmente no que diz respeito à escalabilidade. A grande contribuição para isso vem da evolução do CSS, e as suas últimas atualizações trouxeram mudanças significativas na forma de trabalhar com design tokens.
Intrinsic o que?
Se você ainda não conhece o intrinsic design, vou tentar explicar de forma simples: a ideia é criar interfaces flexíveis e fluídas, que se ajustam naturalmente, ao invés de serem rígidas e baseadas em padrões fixos. Basicamente, vamos deixar de lado abordagens baseadas em breakpoints para trabalhar alternativas adaptáveis ao conteúdo ou contexto de uso.
As funções CSS desempenham um papel importante no intrinsic design, pois permitem criar layouts e estilos mais flexíveis e adaptáveis. Aliadas aos design tokens, ganham um poder de escalabilidade gigantesco.
Reuni algumas das funções CSS que, na minha concepção, vão causar grandes impactos na forma de projetar design tokens e suas interfaces.
1. color-mix()
Essa função é um sonho para quem trabalha com paletas de cores. Com color-mix(), você pode misturar duas cores e criar variantes diretamente no CSS.
:root {
--primary-color: #ff5722;
--secondary-color: #2196f3;
--blend-color: color-mix(in srgb, var(--primary-color) 60%, var(--secondary-color) 40%);
}
Incrível, né? Imagine as possibilidades para criar cores dinâmicas sem precisar de ferramentas externas.
2. clamp()
Eu amo utilizar esta função para tipografias e espaçamentos fluídos. Ela possibilita definir um valor mínimo e um máximo de uma só vez, dessa forma a tipografia ou o espaçamento são calculados pelo tamanho da área de exibição (viewport) ou do container em que o elemento está inserido, sem ultrapassar os limites.
:root {
--font-size-base: clamp(1rem, 2vw, 1.5rem);
}
Quer ver o clamp() em ação? Dá uma olhadinha no utopia.fyi
3. min-content, max-content, fit-content (novos valores para width, height, flex, etc)
Esses novos valores ajudam a definir as dimensões de um elemento com base no conteúdo. min-content e max-content permitem que o tamanho do elemento se ajuste para o tamanho mínimo ou máximo do conteúdo, enquanto fit-content ajusta o tamanho de maneira mais flexível, mas dentro de limites definidos.
width: max-content;
height: min-content;
Isso fará com que o elemento tenha a largura ajustada ao seu conteúdo, mas a altura será ajustada para o mínimo possível que ainda permita o conteúdo.
4. O meu mais novo amor: light-dark() ❤️
Essa função vai definitivamente abalar a forma que você cria tokens para temas claros e escuros. Com ela, é possível atribuir duas cores a uma propriedade, e o navegador escolhe automaticamente a mais adequada com base no esquema de cores definido, seja pelo desenvolvedor ou pelas preferências do usuário. Isso elimina a necessidade de media queries adicionais e simplifica o gerenciamento de temas responsivos.
button {
border: 1px solid light-dark(#cccccc, #333333);
background: light-dark(#f9f9f9, #1a1a1a);
color: light-dark(#333333, #f9f9f9);
}
Designers, isso também é para vocês!
Eu sei que muitas vezes essas novidades do CSS parecem algo mais para desenvolvedores, mas, olha, não são não! Se você atua com design systems, dominar essas ferramentas pode fazer toda a diferença! Elas permitem criar diretrizes que consideram o comportamento dinâmico dos tokens, ajudam a antecipar situações reais em produção e, o melhor de tudo, tornam a colaboração com os devs muito mais eficiente.
E ai? Tem alguma função CSS que você curte demais?