Nomeando Tokens

Para nomear um token, indicamos a Prop a qual ele se refere, seguida da variante desejada.

Segue a lista de tokens oficiais válidos e seus valores default:

Cores Oficiais:

ColorLightNeutral — #9E9E9E

ColorSurfaceLightNeutral — #E8E8E8

ColorMediumNeutral — #464646

ColorDarkNeutral — #212121

ColorPrimary — #A94CC9

ColorPrimaryDark — #792297

ColorComplementary — #FFFFFF

ColorError — #D0021B

ColorSuccess — #58CE6C

Font Family Oficiais:

FontFamilyBase — (NÃO DEFINIR) SF Pro Text / Roboto

FontFamilyBrand — SF Pro Display / Robot

Font Size Oficiais:

FontSizeHighlight — 18

FontSizeHeading — 16

FontSizeBody — 14

FontSizeButton — 12

FontSizeForm — 14

FontSizeFormAuxiliary — 12

Line Height Oficiais:

LineHeightBase — 20

LineHeightTitle — 24

LineHeightNotification — 18

Font Weight Oficiais:

FontWeightBold — Bold (700)

FontWeightNormal — Regular (400)

FontWeightLight — Light (200)

Text Alignment Oficiais:

TextAlignmentTitle — Center

TextAlignmentHeader — Left

TextAlignmentBody — Left

TextAlignmentButton — Center

TextAlignmentAuxiliary — Right

Text Case Oficiais:

TextCaseHighlight — Sentence

TextCaseButton — Center

TextCaseBody — Sentence

Height Oficiais:

HeightButtonBase — 32

HeightButtonAuxiliary — 32

HeightDividerRegular — 1

HeightDividerStrong — 2

HeightImageLogo — 120

Size Oficiais:

SizeAvatarBase — 64

SizeAvatarComment — 48

SizeAvatarReply — 24

SizeIconBase — 24

SizeIconAuxiliary — 16

Espaçamento Oficiais:

SpacingAtomic — 4

SpacingBase — 8

SpacingMarginal — 16

SpacingWide — 64

BorderWidth Oficiais:

BorderWidthButton —1

BorderWidthAvatar — 0

Border Corner Oficiais:

BorderRadiusButton — 10

BorderRadiusAvatar — 32

Mask Oficiais:

MaskPassword

MaskCEP

MaskCPF

MaskDate

MaskPhone

MaskCurrency

Multiline

MultilineLimit — noLimit

Opacity

OpacityDisable — 0.3