@bgord/design 0.27.32 → 0.27.35

package/README.md

@@ -1,5 +1,17 @@
 # @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               |
@@ -14,7 +26,6 @@
 
 | Key   | Value |
 | ----- | :---: |
-|       |       |
 | 0     |   0   |
 | 3     |  3px  |
 | 6     |  6px  |
@@ -52,191 +63,377 @@
 | auto  | auto  |
 | unset | unset |
 
-export const Displays: Record<DisplayType, string> = {
-flex: 'flex',
-block: 'block',
-'inline-block': 'inline-block',
-none: 'none',
-};
-
-export const AxisPlacements: Record<AxisPlacementType, string> = {
-start: 'flex-start',
-end: 'flex-end',
-between: 'space-between',
-center: 'center',
-baseline: 'baseline',
-};
-
-export const Positions: Record<PositionType, string> = {
-static: 'static',
-relative: 'relative',
-absolute: 'absolute',
-fixed: 'fixed',
-sticky: 'sticky',
-unset: 'unset',
-};
-
-export const FlexWraps: Record<FlexWrapTypes, string> = {
-nowrap: 'nowrap',
-wrap: 'wrap',
-'wrap-reverse': 'wrap-reverse',
-unset: 'unset',
-};
-
-export const ZIndexes: Record<ZIndexType, string> = {
-'-1': '-1',
-'0': '0',
-'1': '1',
-'2': '2',
-'3': '3',
-};
-
-export const Widths: Record<WidthType, string> = {
-'100%': '100%',
-auto: 'auto',
-unset: 'unset',
-};
-
-export const FontSizes: Record<FontSizeType, string> = {
-12: '12',
-14: '14',
-16: '16',
-20: '20',
-24: '24',
-32: '32',
-36: '36',
-};
-
-export const FontWeights: Record<FontWeightType, string> = {
-'300': '300',
-'400': '400',
-'500': '500',
-'700': '700',
-'900': '900',
-unset: 'unset',
-};
-
-export const LineHeights: Record<LineHeightType, string> = {
-'12': '12',
-'16': '16',
-'20': '20',
-'24': '24',
-'32': '32',
-'36': '36',
-unset: 'unset',
-};
-
-export const FlexDirections: Record<FlexDirectionType, string> = {
-row: 'row',
-'row-reverse': 'row-reverse',
-column: 'column',
-'column-reverse': 'column-reverse',
-};
-
-export const Grayscale: Record<GrayscaleType, string> = {
-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',
-};
-
-export const Greens: Record<GreenType, string> = {
-'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%)',
-};
-
-export const Reds: Record<RedType, string> = {
-'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%)',
-};
-
-export const Oranges: Record<OrangeType, string> = {
-'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%)',
-};
-
-export const Breakpoints: Record<BreakpointType, number> = {
-md: 768,
-};
-
-export const LetterSpacings: Record<LetterSpacingType, number> = {
-'0.5': 0.5,
-'1': 1,
-'1.5': 1.5,
-'2': 2,
-};
-
-export const FlexGrows: Record<FlexGrowType, string> = {
-'1': '1',
-unset: 'unset',
-};
-
-export const BorderWidths: Record<BorderWidthType, number> = {
-'1': 1,
-'2': 2,
-'4': 4,
-'6': 6,
-'12': 12,
-};
-
-export const BorderColors: Record<BorderColorType, string> = {
-...Grayscale,
-transparent: 'transparent',
-};
-
-export const BorderRadiuses: Record<BorderRadiusType, string> = {
-'0': '0',
-'1': '1px',
-'2': '2px',
-'4': '4px',
-'50%': '50%',
-};
-
-export const MaxWidths: Record<MaxWidthType, string> = {
-'100%': '100%',
-'1296': '1296px',
-'768': '768px',
-'528': '528px',
-'320': '320px',
-unset: 'unset',
-};
-
-export const Transforms: Record<TransformType, string> = {
-uppercase: 'uppercase',
-lowercase: 'lowercase',
-capitalize: 'capitalize',
-'upper-first': 'upper-first',
-truncate: 'truncate',
-center: 'center',
-none: 'none',
-};
-
-export const Overflows: Record<OverflowType, string> = {
-auto: 'auto',
-scroll: 'scroll',
-hidden: 'hidden',
-};
+## 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     |
+
+| Key      |     Value     |
+| -------- | :-----------: |
+| start    |  flex-start   |
+| end      |   flex-end    |
+| between  | space-between |
+| center   |    center     |
+| baseline |   baseline    |
+
+## 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 |
+
+## 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%)  |

package/dist/design.cjs.development.js

@@ -2005,6 +2005,11 @@ var TransformsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
         continue;
       }
 
+      if (key === 'nowrap') {
+        output += "*[data-transform~='nowrap'] {\n  white-space: nowrap;\n}\n";
+        continue;
+      }
+
       output += "*[data-transform~='" + key + "'] {\n  text-transform: " + value + ";\n}\n";
     }
 
@@ -2093,7 +2098,7 @@ var HeightsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
       var _Object$entries2$_i = _Object$entries2[_i2],
           name = _Object$entries2$_i[0],
           _value = _Object$entries2$_i[1];
-      output += "@media (max-height: " + _value + "px) {\n";
+      output += "@media (max-width: " + _value + "px) {\n";
 
       for (var _i3 = 0, _Object$entries3 = Object.entries(this.heights); _i3 < _Object$entries3.length; _i3++) {
         var _Object$entries3$_i = _Object$entries3[_i3],
@@ -2288,6 +2293,7 @@ var Transforms = {
   'upper-first': 'upper-first',
   truncate: 'truncate',
   center: 'center',
+  nowrap: 'nowrap',
   none: 'none'
 };
 var Overflows = {