PersonaBorders and Outlines
Borders
The borders and also rings colors of Persona is based on semantics borders colors.
Name
token-namefigma-style-nametailwind-class-nameBase
DefaultborderColor.defaultborder/defaultBorderborder-defaultRingring-default
Default AlphaborderColor.default.alphaborder/defaultAlphaBorderborder-default-alphaRingring-default-alpha
SubtleborderColor.subtleborder/subtleBorderborder-subtleRingring-subtle
Subtle AlphaborderColor.subtle.alphaborder/subtleAlphaBorderborder-subtle-alphaRingring-subtle-alpha
MutedborderColor.mutedborder/mutedBorderborder-mutedRingring-muted
InverseborderColor.inverseborder/inverseBorderborder-inverseRingring-inverse
Roles
InfoborderColor.infoborder/infoBorderborder-infoRingring-info
Info EmphasisborderColor.info.emphasisborder/infoEmphasisBorderborder-info-emphasisRingring-info-emphasis
SuccessborderColor.successborder/successBorderborder-successRingring-success
Success EmphasisborderColor.success.emphasisborder/successEmphasisBorderborder-success-emphasisRingring-success-emphasis
WarningborderColor.warningborder/warningBorderborder-warningRingring-warning
Warning EmphasisborderColor.warning.emphasisborder/warningEmphasisBorderborder-warning-emphasisRingring-warning-emphasis
DangerborderColor.dangerborder/dangerBorderborder-dangerRingring-danger
Danger EmphasisborderColor.danger.emphasisborder/dangerEmphasisBorderborder-danger-emphasisRingring-danger-emphasis
Outlines
Name
token-nametailwind-class-namedefaultoutlineColor.defaultoutline-default
InfooutlineColor.infooutline-info
successoutlineColor.successoutline-success
warningoutlineColor.warningoutline-warning
dangeroutlineColor.dangeroutline-danger
Radius
Name
token-nametailwind-class-namesizenoneborderRadius.nonerounded-none0
tinyborderRadius.tnrounded-tn4px
xsmallborderRadius.xsrounded-xs6px
smallborderRadius.smrounded-sm7px
DEFAULTborderRadius.DEFAULTrounded8px
mediumborderRadius.mdrounded-md12px
largeborderRadius.lgrounded-lg14px
xlargeborderRadius.xlrounded-xl16px
2xlargeborderRadius.2xlrounded-2xl20px
3xlargeborderRadius.3xlrounded-3xl22px
fullborderRadius.fullrounded-full999999px