@bgord/design v0.27.82
@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.gdata-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 |
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
5 months ago
5 months ago
5 months ago
6 months ago
9 months ago
10 months ago
10 months ago
10 months ago
6 months ago
7 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago