@bgord/design 0.27.28 → 0.27.32

package/README.md

@@ -1,34 +1,242 @@
 # @bgord/design
 
-Spacing:
+## Margins
 
-- margins
-- paddings
+| 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         |
 
-Placement:
+| Key   | Value |
+| ----- | :---: |
+|       |       |
+| 0     |   0   |
+| 3     |  3px  |
+| 6     |  6px  |
+| 12    | 12px  |
+| 24    | 24px  |
+| 36    | 36px  |
+| 48    | 48px  |
+| 72    | 72px  |
+| auto  | auto  |
+| unset | unset |
 
-- displays
-- axis-placements
-- flex-wraps
-- flex-directions
+## Paddings
 
-Position:
+| 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           |
 
-- postions
-- z-index
-- widhts
+| Key   | Value |
+| ----- | :---: |
+|       |       |
+| 0     |   0   |
+| 3     |  3px  |
+| 6     |  6px  |
+| 12    | 12px  |
+| 24    | 24px  |
+| 36    | 36px  |
+| 48    | 48px  |
+| 72    | 72px  |
+| auto  | auto  |
+| unset | unset |
 
-Text:
+export const Displays: Record<DisplayType, string> = {
+flex: 'flex',
+block: 'block',
+'inline-block': 'inline-block',
+none: 'none',
+};
 
-- font-size
-- font-weight
-- font-color
-- line-height
+export const AxisPlacements: Record<AxisPlacementType, string> = {
+start: 'flex-start',
+end: 'flex-end',
+between: 'space-between',
+center: 'center',
+baseline: 'baseline',
+};
 
-Background:
+export const Positions: Record<PositionType, string> = {
+static: 'static',
+relative: 'relative',
+absolute: 'absolute',
+fixed: 'fixed',
+sticky: 'sticky',
+unset: 'unset',
+};
 
-- background-color
+export const FlexWraps: Record<FlexWrapTypes, string> = {
+nowrap: 'nowrap',
+wrap: 'wrap',
+'wrap-reverse': 'wrap-reverse',
+unset: 'unset',
+};
 
-TODO:
+export const ZIndexes: Record<ZIndexType, string> = {
+'-1': '-1',
+'0': '0',
+'1': '1',
+'2': '2',
+'3': '3',
+};
 
-- letter-spacing (ls)
+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',
+};

package/dist/design.cjs.development.js

@@ -2065,6 +2065,52 @@ var PositionersGenerator = /*#__PURE__*/function (_AbstractGenerator) {
   return PositionersGenerator;
 }(AbstractGenerator);
 
+var HeightsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(HeightsGenerator, _AbstractGenerator);
+
+  function HeightsGenerator(config) {
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Heights') || this;
+    _this.heights = config.heights;
+    _this.breakpoints = config.breakpoints;
+    return _this;
+  }
+
+  var _proto = HeightsGenerator.prototype;
+
+  _proto.generateCss = function generateCss() {
+    var output = ''; // Regular display: data-height="*"
+
+    for (var _i = 0, _Object$entries = Object.entries(this.heights); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+      output += "*[data-height='" + key + "'] {\n  height: " + value + ";\n}\n";
+    }
+
+    for (var _i2 = 0, _Object$entries2 = Object.entries(this.breakpoints); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _Object$entries2[_i2],
+          name = _Object$entries2$_i[0],
+          _value = _Object$entries2$_i[1];
+      output += "@media (max-height: " + _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],
+            _key = _Object$entries3$_i[0],
+            _value2 = _Object$entries3$_i[1];
+        output += "  *[data-" + name + "-height='" + _key + "'] {\n    height: " + _value2 + ";\n  }\n";
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  };
+
+  return HeightsGenerator;
+}(AbstractGenerator);
+
 var Spacing = {
   '0': '0',
   '3': '3px',
@@ -2086,6 +2132,8 @@ var Displays = {
 var AxisPlacements = {
   start: 'flex-start',
   end: 'flex-end',
+  around: 'space-around',
+  evenly: 'space-evenly',
   between: 'space-between',
   center: 'center',
   baseline: 'baseline'
@@ -2116,6 +2164,11 @@ var Widths = {
   auto: 'auto',
   unset: 'unset'
 };
+var Heights = {
+  '100%': '100%',
+  auto: 'auto',
+  unset: 'unset'
+};
 var FontSizes = {
   12: '12',
   14: '14',
@@ -2225,6 +2278,7 @@ var MaxWidths = {
   '1296': '1296px',
   '768': '768px',
   '528': '528px',
+  '320': '320px',
   unset: 'unset'
 };
 var Transforms = {
@@ -2374,10 +2428,11 @@ function _main() {
               borderRadiuses: BorderRadiuses,
               maxWidths: MaxWidths,
               transforms: Transforms,
-              overflows: Overflows
+              overflows: Overflows,
+              heights: Heights
             };
             _context2.next = 3;
-            return new GeneratorProcessor().process([new Margins(config), new Paddings(config), new DisplaysGenerator(config), new AxisPlacementsGenerator(config), new FlexWrapGenerator(config), new FlexDirectionsGenerator(config), new FlexGrowsGenerator(config), new WidthsGenerator(config), new PositionsGenerator(config), new ZIndexGenerator(config), new FontSizeGenerator(config), new FontWeightGenerator(config), new FontColorsGenerator(config), new LineHeightsGenerator(config), new LetterSpacingsGenerator(config), new BackgroundsGenerator(config), new BorderWidthsGenerator(config), new BorderColorsGenerator(config), new BorderRadiusesGenerator(config), new MaxWidthsGenerator(config), new TransformsGenerator(config), new OverflowsGenerator(config), new PositionersGenerator()]);
+            return new GeneratorProcessor().process([new Margins(config), new Paddings(config), new DisplaysGenerator(config), new AxisPlacementsGenerator(config), new FlexWrapGenerator(config), new FlexDirectionsGenerator(config), new FlexGrowsGenerator(config), new WidthsGenerator(config), new PositionsGenerator(config), new ZIndexGenerator(config), new FontSizeGenerator(config), new FontWeightGenerator(config), new FontColorsGenerator(config), new LineHeightsGenerator(config), new LetterSpacingsGenerator(config), new BackgroundsGenerator(config), new BorderWidthsGenerator(config), new BorderColorsGenerator(config), new BorderRadiusesGenerator(config), new MaxWidthsGenerator(config), new TransformsGenerator(config), new OverflowsGenerator(config), new PositionersGenerator(), new HeightsGenerator(config)]);
 
           case 3:
           case "end":