@bgord/design 0.9.0 → 0.11.0

package/dist/design.esm.js

@@ -845,7 +845,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;
@@ -855,55 +855,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],
@@ -912,6 +906,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;
   };
 
@@ -925,7 +977,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;
@@ -992,6 +1044,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;
   };
 
@@ -1004,7 +1114,6 @@ var Paddings = /*#__PURE__*/function () {
 
 var DisplaysGenerator = /*#__PURE__*/function () {
   function DisplaysGenerator(config) {
-    this.spacing = config.spacing;
     this.displays = config.displays;
   }
 
@@ -1041,8 +1150,6 @@ var DisplaysGenerator = /*#__PURE__*/function () {
 
 var AxisPlacementsGenerator = /*#__PURE__*/function () {
   function AxisPlacementsGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.axisPlacements = config.axisPlacements;
   }
 
@@ -1082,8 +1189,6 @@ var AxisPlacementsGenerator = /*#__PURE__*/function () {
 
 var PositionsGenerator = /*#__PURE__*/function () {
   function PositionsGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.positions = config.positions;
   }
 
@@ -1115,8 +1220,6 @@ var PositionsGenerator = /*#__PURE__*/function () {
 
 var FlexWrapGenerator = /*#__PURE__*/function () {
   function FlexWrapGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.flexWraps = config.flexWraps;
   }
 
@@ -1148,8 +1251,6 @@ var FlexWrapGenerator = /*#__PURE__*/function () {
 
 var ZIndexGenerator = /*#__PURE__*/function () {
   function ZIndexGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.zIndexes = config.zIndexes;
   }
 
@@ -1181,9 +1282,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;
@@ -1202,6 +1302,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;
   };
 
@@ -1214,8 +1330,6 @@ var WidthsGenerator = /*#__PURE__*/function () {
 
 var FontSizeGenerator = /*#__PURE__*/function () {
   function FontSizeGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.fontSizes = config.fontSizes;
   }
 
@@ -1247,8 +1361,6 @@ var FontSizeGenerator = /*#__PURE__*/function () {
 
 var FontWeightGenerator = /*#__PURE__*/function () {
   function FontWeightGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.fontWeights = config.fontWeights;
   }
 
@@ -1280,8 +1392,6 @@ var FontWeightGenerator = /*#__PURE__*/function () {
 
 var LineHeightsGenerator = /*#__PURE__*/function () {
   function LineHeightsGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.lineHeights = config.lineHeights;
   }
 
@@ -1313,9 +1423,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;
@@ -1325,7 +1434,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],
@@ -1334,6 +1443,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;
   };
 
@@ -1346,8 +1471,6 @@ var FlexDirectionsGenerator = /*#__PURE__*/function () {
 
 var BackgroundsGenerator = /*#__PURE__*/function () {
   function BackgroundsGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.colors = config.colors;
   }
 
@@ -1379,8 +1502,6 @@ var BackgroundsGenerator = /*#__PURE__*/function () {
 
 var FontColorsGenerator = /*#__PURE__*/function () {
   function FontColorsGenerator(config) {
-    this.spacing = config.spacing;
-    this.displays = config.displays;
     this.colors = config.colors;
   }
 
@@ -1427,9 +1548,9 @@ var Displays = {
   'inline-block': 'inline-block'
 };
 var AxisPlacements = {
-  start: 'start',
-  end: 'end',
-  between: 'between',
+  start: 'flex-start',
+  end: 'flex-end',
+  between: 'space-between',
   center: 'center',
   baseline: 'baseline'
 };
@@ -1500,6 +1621,9 @@ var Colors = {
   'gray-800': '#1F2937',
   black: '#111827'
 };
+var Breakpoints = {
+  md: 768
+};
 
 var GeneratorProcessor = /*#__PURE__*/function () {
   function GeneratorProcessor() {}
@@ -1514,7 +1638,7 @@ var GeneratorProcessor = /*#__PURE__*/function () {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              output = "\n/* General */\n\n* {\n  box-sizing: border-box;\n  line-height: 24px;\n  padding: 0;\n  margin: 0;\n}\n\n";
+              output = "\n/* General */\n\n* {\n  box-sizing: border-box;\n  line-height: 24px;\n  padding: 0;\n  margin: 0;\n}\n\nsmall {\n  display: block;\n}\n\n";
 
               for (_iterator = _createForOfIteratorHelperLoose(generators); !(_step = _iterator()).done;) {
                 generator = _step.value;
@@ -1568,7 +1692,8 @@ function _main() {
               fontWeights: FontWeights,
               lineHeights: LineHeights,
               flexDirections: FlexDirections,
-              colors: Colors
+              colors: Colors,
+              breakpoints: Breakpoints
             };
             _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)]);