Border

Border width

List of design token names, values and metadata for border-width

Name	Value
border-width-base	1px Defined in src/application.json Refers to dimension.absolute.1
border-width-thick	2px Defined in src/application.json Refers to dimension.absolute.2
border-width-input-radio--checked	6px Defined in src/components.json Refers to dimension.absolute.6

Border style

List of design token names, values and metadata for border-style

Name	Value
border-style-base	solid Defined in src/application.json Refers to border-style.100
border-style-dashed	dashed Defined in src/application.json Refers to border-style.50

Border color

List of design token names, values and metadata for border-color

Name	Value
border-color-base	#a2a9b1 Defined in src/application.json Refers to color.gray400
border-color-interactive	#72777d Defined in src/application.json Refers to color.gray500
border-color-disabled	#c8ccd1 Defined in src/application.json Refers to color.gray300
border-color-subtle	#c8ccd1 Defined in src/application.json Refers to color.gray300
border-color-muted	#eaecf0 Defined in src/application.json Refers to color.gray200
border-color-inverted	#fff Defined in src/application.json Refers to color.white
border-color-progressive	#36c Defined in src/application.json Refers to color.blue600
border-color-progressive--hover	#447ff5 Defined in src/application.json Refers to color.blue500
border-color-progressive--active	#2a4b8d Defined in src/application.json Refers to color.blue700
border-color-progressive--focus	#36c Defined in src/application.json Refers to color.blue600
border-color-destructive	#d73333 Defined in src/application.json Refers to color.red600
border-color-destructive--hover	#ff4242 Defined in src/application.json Refers to color.red500
border-color-destructive--active	#b32424 Defined in src/application.json Refers to color.red700
border-color-destructive--focus	#36c Defined in src/application.json Refers to color.blue600
border-color-error	#b32424 Defined in src/application.json Refers to color.red700
border-color-error--hover	#ff4242 Defined in src/application.json Refers to color.red500
border-color-warning	#a66200 Defined in src/application.json Refers to color.yellow700
border-color-success	#096450 Defined in src/application.json Refers to color.green700
border-color-notice	#54595d Defined in src/application.json Refers to color.gray600
border-color-content-added	#a3d3ff Defined in src/application.json Refers to color.blue999
border-color-content-removed	#ffe49c Defined in src/application.json Refers to color.yellow999
border-color-transparent	transparent Defined in src/application.json Refers to color.transparent
border-color-divider	#a2a9b1 Defined in src/components.json Refers to color.gray400
border-color-input--hover	#72777d Defined in src/components.json Refers to border-color.interactive
border-color-input-binary	#72777d Defined in src/components.json Refers to border-color.interactive
border-color-input-binary--hover	#447ff5 Defined in src/components.json Refers to border-color.progressive--hover
border-color-input-binary--active	#2a4b8d Defined in src/components.json Refers to border-color.progressive--active
border-color-input-binary--focus	#36c Defined in src/components.json Refers to border-color.progressive--focus
border-color-input-binary--checked	#36c Defined in src/components.json Refers to border-color.progressive

Border (shorthand)

Note, that only most common shorthands are provided given the number of border-color variants.

List of design token names, values and metadata for border

Name	Value
border-base	1px solid #a2a9b1 Defined in src/application.json Refers to border-width.base Refers to border-style.base Refers to border-color.base
border-subtle	1px solid #c8ccd1 Defined in src/application.json Refers to border-width.base Refers to border-style.base Refers to border-color.subtle
border-progressive	1px solid #36c Defined in src/application.json Refers to border-width.base Refers to border-style.base Refers to border-color.progressive
border-destructive	1px solid #d73333 Defined in src/application.json Refers to border-width.base Refers to border-style.base Refers to border-color.destructive

Border radius

List of design token names, values and metadata for border-radius

Name	Value
border-radius-base	2px Defined in src/application.json Refers to dimension.absolute.2
border-radius-sharp	0 Defined in src/application.json Refers to dimension.0
border-radius-pill	9999px Defined in src/application.json Refers to dimension.absolute.9999
border-radius-circle	50% Defined in src/application.json Refers to dimension.half Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500