Formatos e Níveis
Use níveis e formas para facilitar a compreensão de como funciona a interface e os componentes, além de expressar e reforçar os princípios da marca RD Station.
Arredondamento
É possível aplicar 3 tipos de arredondamentos em elementos:
| Token | Valor | Aplicações |
|---|---|---|
--border-radius-rounded | 2px | Arredondamento padrão, usado em componentes quando necessário. |
--border-radius-circle | 50% | Arredondamento total, usado para formações elípticas, aplicadas em casos específicos. |
--border-radius-pill | 999px | Arredondamento total, usado para formações circulares, esses elementos precisam ter largura e altura com mesmo tamanho. |
Elevações
São evidenciadas pelo uso de sombras. Usadas para estabelecer uma hierarquia visual, criar destaque e aumentar o contraste entre os elementos e regiões da interface.
| Token | Nível | Aplicações |
|---|---|---|
| 1 | É o nível mais baixo da interface. Casos de uso: textos, botões, formulários e imagens. | |
--shadow-xs | 2 | Onde estão os elementos com um pouco mais de destaque do que as informações do nível 1. Casos de uso: barras de navegação, cards elevados e mudanças de estado de elementos que já estão na tela. |
--shadow-sm | 3 | Elementos que aparecem após uma interação e devem ter relação com gatilhos de nível 1 ou 2. Casos de uso: Dropdown, Popover e DatePickers |
--shadow-md | 4 | Um dos níveis mais altos de elevação, com elementos que precisam de mais destaque do que outros inferiores. Ideal para elementos que não estão presentes na tela inicialmente, mas precisam de atenção e foco. Casos de uso: Toast. |
--shadow-lg | 5 | É o nível mais alto da interface, reservado a elementos que precisam de destaque total ou até mesmo isolamento do restante das informações. Casos de uso: Drawer sobre fundo claro. |
--shadow-xl | 6 | Deve ser aplicado apenas em elementos que precisam de destaque sobre fundo escuro (overlay). Casos de uso: Modal, Dialog e Drawer sobre fundo escuro. |
Z-index
Os z-index desempenham um papel importante em como os componentes se sobrepõem e interagem uns com os outros.
| Token | Nível | Aplicações |
|---|---|---|
--zindex-auto | Auto | Alterar valor de z-index para posição padrão de acordo com ordenação no body |
--zindex-0 | 1 | Elementos selecionados, como botões, Select e Card |
--zindex-1 | 1000 | Dropdown e Popover |
--zindex-2 | 1010 | Tooltip e elementos fixados ao topo como Navbar |
--zindex-3 | 1020 | Overlays para Drawer, Modal e Dialog |
--zindex-4 | 1030 | Drawer, Dialog e Modal |
--zindex-5 | 1040 | Overlays que precisam ficar acima de todos elementos |
--zindex-6 | 1050 | Toast |
--zindex-back | -1 | Enviar para trás após interação de algum elemento que estava acima da base. |