@bgord/design 0.9.2 → 0.13.0

package/dist/axis-placements-generator.d.ts

@@ -1,8 +1,7 @@
 import { GeneratorInterface, GeneratorConfigType } from './generator';
 export declare class AxisPlacementsGenerator implements GeneratorInterface {
-    spacing: GeneratorConfigType['spacing'];
-    displays: GeneratorConfigType['displays'];
     axisPlacements: GeneratorConfigType['axisPlacements'];
+    breakpoints: GeneratorConfigType['breakpoints'];
     constructor(config: GeneratorConfigType);
     generateHeader(): string;
     generateCss(): string;

package/dist/backgrounds-generator.d.ts

@@ -1,7 +1,5 @@
 import { GeneratorInterface, GeneratorConfigType } from './generator';
 export declare class BackgroundsGenerator implements GeneratorInterface {
-    spacing: GeneratorConfigType['spacing'];
-    displays: GeneratorConfigType['displays'];
     colors: GeneratorConfigType['colors'];
     constructor(config: GeneratorConfigType);
     generateHeader(): string;

package/dist/design.cjs.development.js

@@ -847,7 +847,7 @@ var File = /*#__PURE__*/function () {
 var Margins = /*#__PURE__*/function () {
   function Margins(config) {
     this.spacing = config.spacing;
-    this.displays = config.displays;
+    this.breakpoints = config.breakpoints;
   }
 
   var _proto = Margins.prototype;
@@ -857,55 +857,49 @@ var Margins = /*#__PURE__*/function () {
   };
 
   _proto.generateCss = function generateCss() {
-    var output = ''; // Regular margin: data-m="*"
+    var output = '';
 
     for (var _i = 0, _Object$entries = Object.entries(this.spacing); _i < _Object$entries.length; _i++) {
       var _Object$entries$_i = _Object$entries[_i],
           key = _Object$entries$_i[0],
           value = _Object$entries$_i[1];
       output += "*[data-m='" + key + "'] {\n  margin: " + value + ";\n}\n";
-    } // Horizontal margin: data-mx="*"
-
+    }
 
     for (var _i2 = 0, _Object$entries2 = Object.entries(this.spacing); _i2 < _Object$entries2.length; _i2++) {
       var _Object$entries2$_i = _Object$entries2[_i2],
           _key = _Object$entries2$_i[0],
           _value = _Object$entries2$_i[1];
       output += "*[data-mx='" + _key + "'] {\n  margin-left: " + _value + ";\n  margin-right: " + _value + ";\n}\n";
-    } // Vertical margin: data-my="*"
-
+    }
 
     for (var _i3 = 0, _Object$entries3 = Object.entries(this.spacing); _i3 < _Object$entries3.length; _i3++) {
       var _Object$entries3$_i = _Object$entries3[_i3],
           _key2 = _Object$entries3$_i[0],
           _value2 = _Object$entries3$_i[1];
       output += "*[data-my='" + _key2 + "'] {\n  margin-top: " + _value2 + ";\n  margin-bottom: " + _value2 + ";\n}\n";
-    } // Top margin: data-mt="*"
-
+    }
 
     for (var _i4 = 0, _Object$entries4 = Object.entries(this.spacing); _i4 < _Object$entries4.length; _i4++) {
       var _Object$entries4$_i = _Object$entries4[_i4],
           _key3 = _Object$entries4$_i[0],
           _value3 = _Object$entries4$_i[1];
       output += "*[data-mt='" + _key3 + "'] {\n  margin-top: " + _value3 + ";\n}\n";
-    } // Right margin: data-mr="*"
-
+    }
 
     for (var _i5 = 0, _Object$entries5 = Object.entries(this.spacing); _i5 < _Object$entries5.length; _i5++) {
       var _Object$entries5$_i = _Object$entries5[_i5],
           _key4 = _Object$entries5$_i[0],
           _value4 = _Object$entries5$_i[1];
       output += "*[data-mr='" + _key4 + "'] {\n  margin-right: " + _value4 + ";\n}\n";
-    } // Bottom margin: data-mb="*"
-
+    }
 
     for (var _i6 = 0, _Object$entries6 = Object.entries(this.spacing); _i6 < _Object$entries6.length; _i6++) {
       var _Object$entries6$_i = _Object$entries6[_i6],
           _key5 = _Object$entries6$_i[0],
           _value5 = _Object$entries6$_i[1];
       output += "*[data-mb='" + _key5 + "'] {\n  margin-bottom: " + _value5 + ";\n}\n";
-    } // Left margin: data-ml="*"
-
+    }
 
     for (var _i7 = 0, _Object$entries7 = Object.entries(this.spacing); _i7 < _Object$entries7.length; _i7++) {
       var _Object$entries7$_i = _Object$entries7[_i7],
@@ -914,6 +908,64 @@ var Margins = /*#__PURE__*/function () {
       output += "*[data-ml='" + _key6 + "'] {\n  margin-left: " + _value6 + ";\n}\n";
     }
 
+    for (var _i8 = 0, _Object$entries8 = Object.entries(this.breakpoints); _i8 < _Object$entries8.length; _i8++) {
+      var _Object$entries8$_i = _Object$entries8[_i8],
+          name = _Object$entries8$_i[0],
+          _value7 = _Object$entries8$_i[1];
+      output += "@media (max-width: " + _value7 + "px) {\n";
+
+      for (var _i9 = 0, _Object$entries9 = Object.entries(this.spacing); _i9 < _Object$entries9.length; _i9++) {
+        var _Object$entries9$_i = _Object$entries9[_i9],
+            _key7 = _Object$entries9$_i[0],
+            _value8 = _Object$entries9$_i[1];
+        output += "  *[data-" + name + "-m='" + _key7 + "'] {\n    margin: " + _value8 + ";\n  }\n";
+      }
+
+      for (var _i10 = 0, _Object$entries10 = Object.entries(this.spacing); _i10 < _Object$entries10.length; _i10++) {
+        var _Object$entries10$_i = _Object$entries10[_i10],
+            _key8 = _Object$entries10$_i[0],
+            _value9 = _Object$entries10$_i[1];
+        output += "  *[data-" + name + "-mx='" + _key8 + "'] {\n    margin-left: " + _value9 + ";\n    margin-right: " + _value9 + ";\n  }\n";
+      }
+
+      for (var _i11 = 0, _Object$entries11 = Object.entries(this.spacing); _i11 < _Object$entries11.length; _i11++) {
+        var _Object$entries11$_i = _Object$entries11[_i11],
+            _key9 = _Object$entries11$_i[0],
+            _value10 = _Object$entries11$_i[1];
+        output += "  *[data-" + name + "-my='" + _key9 + "'] {\n    margin-top: " + _value10 + ";\n    margin-bottom: " + _value10 + ";\n  }\n";
+      }
+
+      for (var _i12 = 0, _Object$entries12 = Object.entries(this.spacing); _i12 < _Object$entries12.length; _i12++) {
+        var _Object$entries12$_i = _Object$entries12[_i12],
+            _key10 = _Object$entries12$_i[0],
+            _value11 = _Object$entries12$_i[1];
+        output += "  *[data-" + name + "-mt='" + _key10 + "'] {\n    margin-top: " + _value11 + ";\n  }\n";
+      }
+
+      for (var _i13 = 0, _Object$entries13 = Object.entries(this.spacing); _i13 < _Object$entries13.length; _i13++) {
+        var _Object$entries13$_i = _Object$entries13[_i13],
+            _key11 = _Object$entries13$_i[0],
+            _value12 = _Object$entries13$_i[1];
+        output += "  *[data-" + name + "-mr='" + _key11 + "'] {\n    margin-right: " + _value12 + ";\n  }\n";
+      }
+
+      for (var _i14 = 0, _Object$entries14 = Object.entries(this.spacing); _i14 < _Object$entries14.length; _i14++) {
+        var _Object$entries14$_i = _Object$entries14[_i14],
+            _key12 = _Object$entries14$_i[0],
+            _value13 = _Object$entries14$_i[1];
+        output += "  *[data-" + name + "-mb='" + _key12 + "'] {\n    margin-bottom: " + _value13 + ";\n  }\n";
+      }
+
+      for (var _i15 = 0, _Object$entries15 = Object.entries(this.spacing); _i15 < _Object$entries15.length; _i15++) {
+        var _Object$entries15$_i = _Object$entries15[_i15],
+            _key13 = _Object$entries15$_i[0],
+            _value14 = _Object$entries15$_i[1];
+        output += "  *[data-" + name + "-ml='" + _key13 + "'] {\n    margin-left: " + _value14 + ";\n  }\n";
+      }
+
+      output += "}\n";
+    }
+
     return output;
   };
 
@@ -927,7 +979,7 @@ var Margins = /*#__PURE__*/function () {
 var Paddings = /*#__PURE__*/function () {
   function Paddings(config) {
     this.spacing = config.spacing;
-    this.displays = config.displays;
+    this.breakpoints = config.breakpoints;
   }
 
   var _proto = Paddings.prototype;
@@ -994,6 +1046,64 @@ var Paddings = /*#__PURE__*/function () {
       output += "*[data-pl='" + _key6 + "'] {\n  padding-left: " + _value6 + ";\n}\n";
     }
 
+    for (var _i8 = 0, _Object$entries8 = Object.entries(this.breakpoints); _i8 < _Object$entries8.length; _i8++) {
+      var _Object$entries8$_i = _Object$entries8[_i8],
+          name = _Object$entries8$_i[0],
+          _value7 = _Object$entries8$_i[1];
+      output += "@media (max-width: " + _value7 + "px) {\n";
+
+      for (var _i9 = 0, _Object$entries9 = Object.entries(this.spacing); _i9 < _Object$entries9.length; _i9++) {
+        var _Object$entries9$_i = _Object$entries9[_i9],
+            _key7 = _Object$entries9$_i[0],
+            _value8 = _Object$entries9$_i[1];
+        output += "  *[data-" + name + "-p='" + _key7 + "'] {\n    padding: " + _value8 + ";\n  }\n";
+      }
+
+      for (var _i10 = 0, _Object$entries10 = Object.entries(this.spacing); _i10 < _Object$entries10.length; _i10++) {
+        var _Object$entries10$_i = _Object$entries10[_i10],
+            _key8 = _Object$entries10$_i[0],
+            _value9 = _Object$entries10$_i[1];
+        output += "  *[data-" + name + "-px='" + _key8 + "'] {\n    padding-left: " + _value9 + ";\n    padding-right: " + _value9 + ";\n  }\n";
+      }
+
+      for (var _i11 = 0, _Object$entries11 = Object.entries(this.spacing); _i11 < _Object$entries11.length; _i11++) {
+        var _Object$entries11$_i = _Object$entries11[_i11],
+            _key9 = _Object$entries11$_i[0],
+            _value10 = _Object$entries11$_i[1];
+        output += "  *[data-" + name + "-py='" + _key9 + "'] {\n    padding-top: " + _value10 + ";\n    padding-bottom: " + _value10 + ";\n  }\n";
+      }
+
+      for (var _i12 = 0, _Object$entries12 = Object.entries(this.spacing); _i12 < _Object$entries12.length; _i12++) {
+        var _Object$entries12$_i = _Object$entries12[_i12],
+            _key10 = _Object$entries12$_i[0],
+            _value11 = _Object$entries12$_i[1];
+        output += "  *[data-" + name + "-pt='" + _key10 + "'] {\n    padding-top: " + _value11 + ";\n  }\n";
+      }
+
+      for (var _i13 = 0, _Object$entries13 = Object.entries(this.spacing); _i13 < _Object$entries13.length; _i13++) {
+        var _Object$entries13$_i = _Object$entries13[_i13],
+            _key11 = _Object$entries13$_i[0],
+            _value12 = _Object$entries13$_i[1];
+        output += "  *[data-" + name + "-pr='" + _key11 + "'] {\n    padding-right: " + _value12 + ";\n  }\n";
+      }
+
+      for (var _i14 = 0, _Object$entries14 = Object.entries(this.spacing); _i14 < _Object$entries14.length; _i14++) {
+        var _Object$entries14$_i = _Object$entries14[_i14],
+            _key12 = _Object$entries14$_i[0],
+            _value13 = _Object$entries14$_i[1];
+        output += "  *[data-" + name + "-pb='" + _key12 + "'] {\n    padding-bottom: " + _value13 + ";\n  }\n";
+      }
+
+      for (var _i15 = 0, _Object$entries15 = Object.entries(this.spacing); _i15 < _Object$entries15.length; _i15++) {
+        var _Object$entries15$_i = _Object$entries15[_i15],
+            _key13 = _Object$entries15$_i[0],
+            _value14 = _Object$entries15$_i[1];
+        output += "  *[data-" + name + "-pl='" + _key13 + "'] {\n    padding-left: " + _value14 + ";\n  }\n";
+      }
+
+      output += "}\n";
+    }
+
     return output;
   };
 
@@ -1006,7 +1116,6 @@ var Paddings = /*#__PURE__*/function () {
 
 var DisplaysGenerator = /*#__PURE__*/function () {
   function DisplaysGenerator(config) {
-    this.spacing = config.spacing;
     this.displays = config.displays;
   }
 
@@ -1043,9 +1152,8 @@ var DisplaysGenerator = /*#__PURE__*/function () {
 
 var AxisPlacementsGenerator = /*#__PURE__*/function () {
   function AxisPlacementsGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.axisPlacements = config.axisPlacements;
+    this.breakpoints = config.breakpoints;
   }
 
   var _proto = AxisPlacementsGenerator.prototype;
@@ -1072,6 +1180,29 @@ var AxisPlacementsGenerator = /*#__PURE__*/function () {
       output += "*[data-cross='" + _key + "'] {\n  align-items: " + _value + ";\n}\n";
     }
 
+    for (var _i3 = 0, _Object$entries3 = Object.entries(this.breakpoints); _i3 < _Object$entries3.length; _i3++) {
+      var _Object$entries3$_i = _Object$entries3[_i3],
+          name = _Object$entries3$_i[0],
+          _value2 = _Object$entries3$_i[1];
+      output += "@media (max-width: " + _value2 + "px) {\n";
+
+      for (var _i4 = 0, _Object$entries4 = Object.entries(this.axisPlacements); _i4 < _Object$entries4.length; _i4++) {
+        var _Object$entries4$_i = _Object$entries4[_i4],
+            _key2 = _Object$entries4$_i[0],
+            _value3 = _Object$entries4$_i[1];
+        output += "  *[data-" + name + "-main='" + _key2 + "'] {\n    justify-content: " + _value3 + ";\n  }\n";
+      }
+
+      for (var _i5 = 0, _Object$entries5 = Object.entries(this.axisPlacements); _i5 < _Object$entries5.length; _i5++) {
+        var _Object$entries5$_i = _Object$entries5[_i5],
+            _key3 = _Object$entries5$_i[0],
+            _value4 = _Object$entries5$_i[1];
+        output += "  *[data-" + name + "-cross='" + _key3 + "'] {\n    align-items: " + _value4 + ";\n  }\n";
+      }
+
+      output += "}\n";
+    }
+
     return output;
   };
 
@@ -1084,8 +1215,6 @@ var AxisPlacementsGenerator = /*#__PURE__*/function () {
 
 var PositionsGenerator = /*#__PURE__*/function () {
   function PositionsGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.positions = config.positions;
   }
 
@@ -1117,8 +1246,6 @@ var PositionsGenerator = /*#__PURE__*/function () {
 
 var FlexWrapGenerator = /*#__PURE__*/function () {
   function FlexWrapGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.flexWraps = config.flexWraps;
   }
 
@@ -1150,8 +1277,6 @@ var FlexWrapGenerator = /*#__PURE__*/function () {
 
 var ZIndexGenerator = /*#__PURE__*/function () {
   function ZIndexGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.zIndexes = config.zIndexes;
   }
 
@@ -1183,9 +1308,8 @@ var ZIndexGenerator = /*#__PURE__*/function () {
 
 var WidthsGenerator = /*#__PURE__*/function () {
   function WidthsGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.widhts = config.widths;
+    this.breakpoints = config.breakpoints;
   }
 
   var _proto = WidthsGenerator.prototype;
@@ -1204,6 +1328,22 @@ var WidthsGenerator = /*#__PURE__*/function () {
       output += "*[data-width='" + key + "'] {\n  width: " + 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-width: " + _value + "px) {\n";
+
+      for (var _i3 = 0, _Object$entries3 = Object.entries(this.widhts); _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 + "-width='" + _key + "'] {\n    width: " + _value2 + ";\n  }\n";
+      }
+
+      output += "}\n";
+    }
+
     return output;
   };
 
@@ -1216,8 +1356,6 @@ var WidthsGenerator = /*#__PURE__*/function () {
 
 var FontSizeGenerator = /*#__PURE__*/function () {
   function FontSizeGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.fontSizes = config.fontSizes;
   }
 
@@ -1249,8 +1387,6 @@ var FontSizeGenerator = /*#__PURE__*/function () {
 
 var FontWeightGenerator = /*#__PURE__*/function () {
   function FontWeightGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.fontWeights = config.fontWeights;
   }
 
@@ -1282,8 +1418,6 @@ var FontWeightGenerator = /*#__PURE__*/function () {
 
 var LineHeightsGenerator = /*#__PURE__*/function () {
   function LineHeightsGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.lineHeights = config.lineHeights;
   }
 
@@ -1315,9 +1449,8 @@ var LineHeightsGenerator = /*#__PURE__*/function () {
 
 var FlexDirectionsGenerator = /*#__PURE__*/function () {
   function FlexDirectionsGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.flexDirections = config.flexDirections;
+    this.breakpoints = config.breakpoints;
   }
 
   var _proto = FlexDirectionsGenerator.prototype;
@@ -1327,7 +1460,7 @@ var FlexDirectionsGenerator = /*#__PURE__*/function () {
   };
 
   _proto.generateCss = function generateCss() {
-    var output = ''; // Regular display: data-direction="*"
+    var output = '';
 
     for (var _i = 0, _Object$entries = Object.entries(this.flexDirections); _i < _Object$entries.length; _i++) {
       var _Object$entries$_i = _Object$entries[_i],
@@ -1336,6 +1469,22 @@ var FlexDirectionsGenerator = /*#__PURE__*/function () {
       output += "*[data-direction='" + key + "'] {\n  flex-direction: " + 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-width: " + _value + "px) {\n";
+
+      for (var _i3 = 0, _Object$entries3 = Object.entries(this.flexDirections); _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 + "-direction='" + _key + "'] {\n    flex-direction: " + _value2 + ";\n  }\n";
+      }
+
+      output += "}\n";
+    }
+
     return output;
   };
 
@@ -1348,8 +1497,6 @@ var FlexDirectionsGenerator = /*#__PURE__*/function () {
 
 var BackgroundsGenerator = /*#__PURE__*/function () {
   function BackgroundsGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.colors = config.colors;
   }
 
@@ -1381,8 +1528,6 @@ var BackgroundsGenerator = /*#__PURE__*/function () {
 
 var FontColorsGenerator = /*#__PURE__*/function () {
   function FontColorsGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.colors = config.colors;
   }
 
@@ -1412,6 +1557,37 @@ var FontColorsGenerator = /*#__PURE__*/function () {
   return FontColorsGenerator;
 }();
 
+var LetterSpacingsGenerator = /*#__PURE__*/function () {
+  function LetterSpacingsGenerator(config) {
+    this.letterSpacings = config.letterSpacings;
+  }
+
+  var _proto = LetterSpacingsGenerator.prototype;
+
+  _proto.generateHeader = function generateHeader() {
+    return '/* Font sizes */\n\n';
+  };
+
+  _proto.generateCss = function generateCss() {
+    var output = ''; // Regular display: data-ls="*"
+
+    for (var _i = 0, _Object$entries = Object.entries(this.letterSpacings); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+      output += "*[data-ls='" + key + "'] {\n  letter-spacing: " + value + "px;\n}\n";
+    }
+
+    return output;
+  };
+
+  _proto.generateFooter = function generateFooter() {
+    return '/* ===================== */\n\n';
+  };
+
+  return LetterSpacingsGenerator;
+}();
+
 var Spacing = {
   '0': '0',
   '3': '3px',
@@ -1502,6 +1678,15 @@ var Colors = {
   'gray-800': '#1F2937',
   black: '#111827'
 };
+var Breakpoints = {
+  md: 768
+};
+var LetterSpacings = {
+  '0.5': 0.5,
+  '1': 1,
+  '1.5': 1.5,
+  '2': 2
+};
 
 var GeneratorProcessor = /*#__PURE__*/function () {
   function GeneratorProcessor() {}
@@ -1570,10 +1755,12 @@ function _main() {
               fontWeights: FontWeights,
               lineHeights: LineHeights,
               flexDirections: FlexDirections,
-              colors: Colors
+              colors: Colors,
+              breakpoints: Breakpoints,
+              letterSpacings: LetterSpacings
             };
             _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 WidthsGenerator(config), new PositionsGenerator(config), new ZIndexGenerator(config), new FontSizeGenerator(config), new FontWeightGenerator(config), new FontColorsGenerator(config), new LineHeightsGenerator(config), new BackgroundsGenerator(config)]);
+            return new GeneratorProcessor().process([new Margins(config), new Paddings(config), new DisplaysGenerator(config), new AxisPlacementsGenerator(config), new FlexWrapGenerator(config), new FlexDirectionsGenerator(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)]);
 
           case 3:
           case "end":