Borders and Outlines

Borders

The borders and also rings colors of Persona is based on semantics borders colors.

Name

token-namefigma-style-nametailwind-class-name

Base

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-name

defaultoutlineColor.defaultoutline-default

InfooutlineColor.infooutline-info

successoutlineColor.successoutline-success

warningoutlineColor.warningoutline-warning

dangeroutlineColor.dangeroutline-danger

Radius

Name

token-nametailwind-class-namesize

noneborderRadius.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