@bgord/design v0.28.0
@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 |
10 months ago
1 year ago
1 year ago
1 year 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
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
3 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
3 years ago
4 years ago
3 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago