Skip to content
Telescope

Border

We use borders to contain elements or to separate them from each other in order to group content in ways that make it easier to decode and understand.
TokenValueExample
borderInteractive
var(--sizeBorderDefault) solid var(--colorBorderInteractive)
borderInteractiveQuiet
var(--sizeBorderDefault) solid var(--colorBorderInteractiveQuiet)
borderInteractiveLoud
var(--sizeBorderDefault) solid var(--colorBorderInteractiveLoud)
borderInteractiveHover
var(--sizeBorderDefault) solid var(--colorBorderInteractiveHover)
borderInteractiveDisabled
var(--sizeBorderDefault) solid var(--colorBorderInteractiveDisabled)
borderInteractiveSelected
var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelected)
borderInteractiveSelectedHover
var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelectedHover)
borderStatic
var(--sizeBorderDefault) solid var(--colorBorderStatic)
borderStaticLoud
var(--sizeBorderDefault) solid var(--colorBorderStaticLoud)
borderNeutral
var(--sizeBorderDefault) solid var(--colorBorderNeutral)
borderNegative
var(--sizeBorderDefault) solid var(--colorBorderNegative)
borderNegativeHover
var(--sizeBorderDefault) solid var(--colorBorderNegativeHover)
borderPositive
var(--sizeBorderDefault) solid var(--colorBorderPositive)
borderWarning
var(--sizeBorderDefault) solid var(--colorBorderWarning)
borderInfo
var(--sizeBorderDefault) solid var(--colorBorderInfo)
borderDiscover
var(--sizeBorderDefault) solid var(--colorBorderDiscover)
borderDark
1px solid #333333
borderDarkest
1px solid #000000
borderError
1px solid #e91c1c
borderLight
1px solid #f5f5f5
borderLightest
1px solid #ffffff
borderPrimary
1px solid #ececec
borderSuccess
1px solid #85d69e
sizeBorderDefault
1px
sizeBorderThick
2px
sizeBorderThickest
3px

Usage

import {tokens} from '@pleo-io/telescope'


const element = styled.div`
    border: ${tokens.borderDark};
`