O que é?
Token é uma variável de estilo. Também chamados de modificadores, essas propriedades se referem aos atributos dos elementos de UI de um design system. Um token em nosso contexto é uma propriedade que contém uma informação que pode variar.
Para mais informações sobre helpers gerais do Bulma, como espaçamentos, flexbox, visibilidade e outros, recomendamos conferir a documentação oficial
Table of Contents
- Brand Colors
- Support Colors
- Feedback Colors
- Text Styles
- Border Styles
- Shadows
- Opacity
Colors
Brand Colors
| Classe CSS |
Hexadecimal |
Aplicação |
.has-text-main |
#5A4CFB |
|
.has-text-main-light |
#DEDBFE |
|
.has-text-main-dark |
#483DC9 |
|
.has-text-base |
#000000 |
|
Brand Colors (background)
| Classe CSS |
Hexadecimal |
Aplicação |
.has-background-main |
#5A4CFB |
|
.has-background-main-light |
#DEDBFE |
|
.has-background-main-dark |
#483DC9 |
|
.has-background-base |
#000000 |
|
Support Colors
| Classe CSS |
Hexadecimal |
Aplicação |
.has-text-grey-light |
#D8D8DF |
|
.has-text-grey-lighter |
#F3F5F6 |
|
.has-text-grey-lightest |
#FFFFFF |
|
.has-text-grey-dark |
#898B94 |
|
.has-text-grey-darker |
#656771 |
|
.has-text-grey-darkest |
#393946 |
|
Support Colors (background)
| Classe CSS |
Hexadecimal |
Aplicação |
.has-background-grey-light |
#D8D8DF |
|
.has-background-grey-lighter |
#F3F5F6 |
|
.has-background-grey-lightest |
#FFFFFF |
|
.has-background-grey-dark |
#898B94 |
|
.has-background-grey-darker |
#656771 |
|
.has-background-grey-darkest |
#393946 |
|
Feedback Colors
| Classe CSS |
Hexadecimal |
Aplicação |
.has-text-success |
#21A330 |
|
.has-text-success-light |
#D3EDD6 |
|
.has-text-success-dark |
#1A8226 |
|
.has-text-warning |
#FF9720 |
|
.has-text-warning-light |
#FFEAD2 |
|
.has-text-warning-dark |
#BF7118 |
|
.has-text-danger |
#B7213C |
|
.has-text-danger-light |
#F1D3D8 |
|
.has-text-danger-dark |
#921A30 |
|
Feedback Colors (background)
| Classe CSS |
Hexadecimal |
Aplicação |
.has-background-success |
#21A330 |
|
.has-background-success-light |
#D3EDD6 |
|
.has-background-success-dark |
#1A8226 |
|
.has-background-warning |
#FF9720 |
|
.has-background-warning-light |
#FFEAD2 |
|
.has-background-warning-dark |
#BF7118 |
|
.has-background-danger |
#B7213C |
|
.has-background-danger-light |
#F1D3D8 |
|
.has-background-danger-dark |
#921A30 |
|
Voltar ao topo
Text Styles
Os estilos de texto possum versões focus, para usá-las, adicione e elemento strong.
| Classe CSS |
Estilo do Figma |
Aplicação |
.title .is-display |
Title Display |
Display |
.title .is-1 |
Title 1 |
Title 1 |
.title .is-2 |
Title 2 |
Title 2 |
.title .is-3 |
Title 3 |
Title 3 |
.has-text-body |
Body Text |
Body Text |
.has-text-caption |
Caption |
Caption |
.has-text-small |
Small Text |
Small Text |
Text Styles - Versões com destaque
| Classe CSS |
Estilo do Figma |
Aplicação |
.title .has-text-weight-medium .is-display |
Title Display |
Display |
.title .has-text-weight-medium .is-1 |
Title 1 |
Title 1 |
.title .has-text-weight-medium .is-2 |
Title 2 |
Title 2 |
.title .has-text-weight-medium .is-3 |
Title 3 |
Title 3 |
.has-text-body .has-text-weight-medium |
Body Text |
Body Text |
.has-text-caption .has-text-weight-medium |
Caption |
Caption |
.has-text-small .has-text-weight-medium |
Small Text |
Small Text |
Voltar ao topo
Border
Border widths
| Classe CSS |
Espessura (px) |
Aplicação |
.is-borderless |
0 |
|
.has-border-small |
1 |
|
.has-border-medium |
2 |
|
.has-border-large |
3 |
|
Adicione as nomenclaturas top, bottom, left ou right para referenciar as direções a serem aplicadas as bordas. Veja o exemplo abaixo:
| Classe CSS |
Espessura (px) |
Aplicação |
.has-border-left-medium |
2 |
|
.has-border-top-small |
1 |
|
Border Radius
| Classe CSS |
Radius (px) |
Aplicação |
.is-radiusless |
0 |
|
.has-radius-small |
2 |
|
.has-radius-medium |
4 |
|
.has-radius-large |
8 |
|
.has-radius-rounded |
> 500 |
|
Adicione as nomenclaturas top, bottom, left ou right para referenciar as direções a serem aplicadas os radius. Veja o exemplo abaixo:
| Classe CSS |
Radius (px) |
Aplicação |
.has-radius-left-medium |
4 |
|
.has-radius-top-large |
8 |
|
Voltar ao topo
Shadows
| Classe CSS |
Blur, Offset X, Offset Y (px) |
Aplicação |
.is-shadowless |
0 |
|
.has-shadow-level-1 |
4, 0, 2 |
|
.has-shadow-level-2 |
8, 0, 4 |
|
.has-shadow-level-3 |
16, 0, 8 |
|
Voltar ao topo
Opacity
| Classe CSS |
Value |
Aplicação |
.has-opacity-low |
0.3 |
|
.has-opacity-medium |
0.5 |
|
.has-opacity-high |
0.8 |
|
Background opacity
| Classe CSS |
Value |
Aplicação |
.has-opacity-background-main |
0.3 |
|
.has-opacity-background-success |
0.5 |
|
.has-opacity-background-warning |
0.5 |
|
.has-opacity-background-danger |
0.5 |
|
Voltar ao topo