@bgord/design

Breakpoints

Definition	Value
data-md-*	@media (max-width: ${value}px)

Key	Value
768	@media (max-width: 768px)

You can use almost all design tokens after data-md, e.g data-md-mx.

Margins

Definition	Value
data-m	margin
data-mx	margin-{left,right}
data-my	margin-{top,bottom}
data-mt	margin-top
data-mr	margin-right
data-mb	margin-bottom
data-ml	margin-left

Key	Value
0	0
3	3px
6	6px
12	12px
24	24px
36	36px
48	48px
72	72px
auto	auto
unset	unset

Paddings

Definition	Value
data-p	padding
data-px	padding-{left,padding}
data-py	padding-{top,bottom}
data-pt	padding-top
data-pr	padding-right
data-pb	padding-bottom
data-pl	padding-left

Key	Value
0	0
3	3px
6	6px
12	12px
24	24px
36	36px
48	48px
72	72px
auto	auto
unset	unset

Displays

Definition	Value
data-display	display

Key	Value
flex	flex
block	block
inline-block	inline-block
none	none

Axis placements

Definition	Value
data-main	justify-content
data-cross	align-items
data-self	align-items

Key	Value	Available for data-self
start	flex-start	yes
end	flex-end	yes
around	space-around	no
between	space-between	no
evenly	space-evenly	no
center	center	yes
baseline	baseline	yes

Positions

Definition	Value
data-position	position

Key	Value
static	static
relative	relative
absolute	absolute
fixed	fixed
sticky	sticky
unset	unset

Flex wraps

Definition	Value
data-wrap	flex-wrap

Key	Value
nowrap	nowrap
wrap	wrap
wrap-reverse	wrap-reverse
unset	unset

Z indexes

Definition	Value
data-z	z-index

Key	Value
-1	-1
0	0
1	1
2	2
3	3

Widths

Definition	Value
data-width	width

Key	Value
100%	100%
auto	auto
unset	unset

Font sizes

Definition	Value
data-fs	font-size

Key	Value
12	12
14	14
16	16
20	20
24	24
32	32
36	36

Font weights

Definition	Value
data-fw	font-weight

Key	Value
300	300
400	400
500	500
700	700
900	900
unset	unset

Font colors

Definition	Value
data-color	color

Possible values: see the Colors section.

Line heights

Definition	Value
data-lh	line-height

Key	Value
12	12
16	16
20	20
24	24
32	32
36	36
unset	unset

Flex directions

Definition	Value
data-direction	flex-direction

Key	Value
row	row
row-reverse	row-reverse
column	column
column-reverse	column-reverse

Letter spacings

Definition	Value
data-ls	letter-spacing

Key	Value
0.5	0.5
1	1
1.5	1.5
2	2

Flex grows

Definition	Value
data-grow	flex-grow

Key	Value
1	1
unset	unset

Flex shrinks

Definition	Value
data-shrink	flex-shrink

Key	Value
0	0
unset	unset

Border widths

Definition	Value
data-bw	border-width
data-bwx	border-width-{right,left}
data-bwy	border-width-{top,bottom}
data-bwt	border-width-top
data-bwr	border-width-right
data-bwb	border-width-bottom
data-bwl	border-width-left

Key	Value
1	1
2	2
4	4
6	6
12	12

Border radiuses

Definition	Value
data-br	border-radius

Key	Value
0	0
1	1px
2	2px
4	4px
50%	50%

Max widths

Definition	Value
data-max-width	max-width

Key	Value
100%	100%
1296	1296px
768	768px
528	528px
320	320px
unset	unset

Transforms

Definition	Value
data-direction	flex-direction

Key	Value
uppercase	uppercase
lowercase	lowercase
capitalize	capitalize
upper-first	upper-first
truncate	truncate
center	center
none	none

Overflows

Definition	Value
data-overflow	overflow

Key	Value
auto	auto
scroll	scroll
hidden	hidden

Heights

Definition	Value
data-height	height

Key	Value
100%	100%
auto	auto
unset	unset

Positioners

Definition	Value
data-top	top
data-right	right
data-bottom	bottom
data-left	left
data-inset	inset

Key	Value
0	0

Transform

Accepts multiple values.

Definition	Value
data-transform	text-transform
data-transform	*

Key	Value
uppercase	uppercase
lowercase	lowercase
capitalize	capitalize
upper-first	:first-letter { text-transform: uppercase }
center	text-align: center
none	none
truncate	overflow: hidden, white-space: nowrap, text-overflow: ellipsis

Backgrounds

Definition	Value
data-bg	background-color

Possible values: see the Colors section.

Border colors

Definition	Value
data-bc	border-color
data-bcx	border-color-{right,left}
data-bcy	border-color-{top,bottom}
data-bct	border-color-top
data-bcr	border-color-right
data-bcb	border-color-bottom
data-bcl	border-color-left

Possible values: see the Colors section.

Colors

Grayscale

Key	Value
white	#F9FAFB
gray-100	#F3F4F6
gray-200	#E5E7EB
gray-300	#D1D5DB
gray-400	#9CA3AF
gray-500	#6B7280
gray-600	#4B5563
gray-700	#374151
gray-800	#1F2937
black	#111827

Green

Key	Value
green-100	hsl(112, 50%, 85%)
green-200	hsl(112, 50%, 75%)
green-300	hsl(112, 50%, 65%)
green-400	hsl(112, 50%, 55%)
green-500	hsl(112, 50%, 45%)
green-600	hsl(112, 50%, 35%)
green-700	hsl(112, 50%, 25%)
green-800	hsl(112, 50%, 20%)

Red

Key	Value
red-100	hsl(5, 80%, 90%)
red-200	hsl(5, 80%, 83%)
red-300	hsl(5, 80%, 72.5%)
red-400	hsl(5, 80%, 62.5%)
red-500	hsl(5, 80%, 52.5%)
red-600	hsl(5, 80%, 42%)
red-700	hsl(5, 80%, 32.5%)
red-800	hsl(5, 80%, 22.5%)

Orange

Key	Value
orange-100	hsl(25, 88%, 85%)
orange-200	hsl(25, 88%, 75%)
orange-300	hsl(25, 88%, 65%)
orange-400	hsl(25, 88%, 55%)
orange-500	hsl(25, 88%, 45%)
orange-600	hsl(25, 88%, 37.5%)
orange-700	hsl(25, 88%, 27.5%)
orange-800	hsl(25, 88%, 20%)

Cursors

Definition	Value
data-cursor	cursor

Key	Value
wait	wait
auto	auto
pointer	pointer
not-allowed	not-allowed

Backdrops

Definition	Value
data-backdrop	backdrop

Key	Value
black	rgba(0, 0, 0, 0.75)
none	none

Object fits

Definition	Value
data-object-fit	object-fit

Key	Value
contain	contain
cover	cover
fill	fill
scale-down	scale-down
none	none

Object positions

Definition	Value
data-object-position	object-position

Key	Value
top	top
bottom	bottom
left	left
right	right
center	center

Rotates

Definition	Value
data-rotate	transform: rotate(x deg)

Key	Value
0	0
90	90
180	180
270	270