@bgord/design 0.19.0 → 0.20.2

package/dist/border-colors-generator.d.ts

@@ -0,0 +1,8 @@
+import { GeneratorInterface, GeneratorConfigType } from './generator';
+export declare class BorderColorsGenerator implements GeneratorInterface {
+    borderColors: GeneratorConfigType['borderColors'];
+    constructor(config: GeneratorConfigType);
+    generateHeader(): string;
+    generateCss(): string;
+    generateFooter(): string;
+}

package/dist/border-widths-generator.d.ts

@@ -0,0 +1,8 @@
+import { GeneratorInterface, GeneratorConfigType } from './generator';
+export declare class BorderWidthsGenerator implements GeneratorInterface {
+    borderWidths: GeneratorConfigType['borderWidths'];
+    constructor(config: GeneratorConfigType);
+    generateHeader(): string;
+    generateCss(): string;
+    generateFooter(): string;
+}

package/dist/design.cjs.development.js

@@ -38,6 +38,24 @@ function _asyncToGenerator(fn) {
   };
 }
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -1411,6 +1429,7 @@ var WidthsGenerator = /*#__PURE__*/function () {
 var FontSizeGenerator = /*#__PURE__*/function () {
   function FontSizeGenerator(config) {
     this.fontSizes = config.fontSizes;
+    this.breakpoints = config.breakpoints;
   }
 
   var _proto = FontSizeGenerator.prototype;
@@ -1429,7 +1448,7 @@ var FontSizeGenerator = /*#__PURE__*/function () {
       output += "*[data-fs='" + key + "'] {\n  font-size: " + value + "px;\n}\n";
     }
 
-    for (var _i2 = 0, _Object$entries2 = Object.entries(this.fontSizes); _i2 < _Object$entries2.length; _i2++) {
+    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];
@@ -1658,6 +1677,183 @@ var LetterSpacingsGenerator = /*#__PURE__*/function () {
   return LetterSpacingsGenerator;
 }();
 
+var FlexGrowsGenerator = /*#__PURE__*/function () {
+  function FlexGrowsGenerator(config) {
+    this.flexGrows = config.flexGrows;
+  }
+
+  var _proto = FlexGrowsGenerator.prototype;
+
+  _proto.generateHeader = function generateHeader() {
+    return '/* Line heights */\n\n';
+  };
+
+  _proto.generateCss = function generateCss() {
+    var output = ''; // Regular display: data-grow="*"
+
+    for (var _i = 0, _Object$entries = Object.entries(this.flexGrows); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+      output += "*[data-grow='" + key + "'] {\n  flex-grow: " + value + ";\n}\n";
+    }
+
+    return output;
+  };
+
+  _proto.generateFooter = function generateFooter() {
+    return '/* ===================== */\n\n';
+  };
+
+  return FlexGrowsGenerator;
+}();
+
+var BorderWidthsGenerator = /*#__PURE__*/function () {
+  function BorderWidthsGenerator(config) {
+    this.borderWidths = config.borderWidths;
+  }
+
+  var _proto = BorderWidthsGenerator.prototype;
+
+  _proto.generateHeader = function generateHeader() {
+    return '/* Border widths */\n\n';
+  };
+
+  _proto.generateCss = function generateCss() {
+    var output = '';
+
+    for (var _i = 0, _Object$entries = Object.entries(this.borderWidths); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+      output += "*[data-bw='" + key + "'] {\n  border-width: " + value + "px;\n}\n";
+    }
+
+    for (var _i2 = 0, _Object$entries2 = Object.entries(this.borderWidths); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _Object$entries2[_i2],
+          _key = _Object$entries2$_i[0],
+          _value = _Object$entries2$_i[1];
+      output += "*[data-bwx='" + _key + "'] {\n  border-left-width: " + _value + "px;\n  border-right-width: " + _value + "px;\n}\n";
+    }
+
+    for (var _i3 = 0, _Object$entries3 = Object.entries(this.borderWidths); _i3 < _Object$entries3.length; _i3++) {
+      var _Object$entries3$_i = _Object$entries3[_i3],
+          _key2 = _Object$entries3$_i[0],
+          _value2 = _Object$entries3$_i[1];
+      output += "*[data-bwy='" + _key2 + "'] {\n  border-top-width: " + _value2 + "px;\n  border-bottom-width: " + _value2 + "px;\n}\n";
+    }
+
+    for (var _i4 = 0, _Object$entries4 = Object.entries(this.borderWidths); _i4 < _Object$entries4.length; _i4++) {
+      var _Object$entries4$_i = _Object$entries4[_i4],
+          _key3 = _Object$entries4$_i[0],
+          _value3 = _Object$entries4$_i[1];
+      output += "*[data-bwt='" + _key3 + "'] {\n  border-top-width: " + _value3 + "px;\n}\n";
+    }
+
+    for (var _i5 = 0, _Object$entries5 = Object.entries(this.borderWidths); _i5 < _Object$entries5.length; _i5++) {
+      var _Object$entries5$_i = _Object$entries5[_i5],
+          _key4 = _Object$entries5$_i[0],
+          _value4 = _Object$entries5$_i[1];
+      output += "*[data-bwr='" + _key4 + "'] {\n  border-right-width: " + _value4 + "px;\n}\n";
+    }
+
+    for (var _i6 = 0, _Object$entries6 = Object.entries(this.borderWidths); _i6 < _Object$entries6.length; _i6++) {
+      var _Object$entries6$_i = _Object$entries6[_i6],
+          _key5 = _Object$entries6$_i[0],
+          _value5 = _Object$entries6$_i[1];
+      output += "*[data-bwb='" + _key5 + "'] {\n  border-bottom-width: " + _value5 + "px;\n}\n";
+    }
+
+    for (var _i7 = 0, _Object$entries7 = Object.entries(this.borderWidths); _i7 < _Object$entries7.length; _i7++) {
+      var _Object$entries7$_i = _Object$entries7[_i7],
+          _key6 = _Object$entries7$_i[0],
+          _value6 = _Object$entries7$_i[1];
+      output += "*[data-bwl='" + _key6 + "'] {\n  border-left-width: " + _value6 + "px;\n}\n";
+    }
+
+    return output;
+  };
+
+  _proto.generateFooter = function generateFooter() {
+    return '/* ===================== */\n\n';
+  };
+
+  return BorderWidthsGenerator;
+}();
+
+var BorderColorsGenerator = /*#__PURE__*/function () {
+  function BorderColorsGenerator(config) {
+    this.borderColors = config.borderColors;
+  }
+
+  var _proto = BorderColorsGenerator.prototype;
+
+  _proto.generateHeader = function generateHeader() {
+    return '/* Border colors */\n\n';
+  };
+
+  _proto.generateCss = function generateCss() {
+    var output = '';
+
+    for (var _i = 0, _Object$entries = Object.entries(this.borderColors); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+      output += "*[data-bc='" + key + "'] {\n  border-color: " + value + ";\n  border-style: solid;\n}\n";
+    }
+
+    for (var _i2 = 0, _Object$entries2 = Object.entries(this.borderColors); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _Object$entries2[_i2],
+          _key = _Object$entries2$_i[0],
+          _value = _Object$entries2$_i[1];
+      output += "*[data-bcx='" + _key + "'] {\n  border-right-color: " + _value + ";\n  border-left-color: " + _value + ";\n border-right-style: solid;\n  border-left-style: solid;\n}\n";
+    }
+
+    for (var _i3 = 0, _Object$entries3 = Object.entries(this.borderColors); _i3 < _Object$entries3.length; _i3++) {
+      var _Object$entries3$_i = _Object$entries3[_i3],
+          _key2 = _Object$entries3$_i[0],
+          _value2 = _Object$entries3$_i[1];
+      output += "*[data-bcy='" + _key2 + "'] {\n  border-top-color: " + _value2 + ";\n  border-bottom-color: " + _value2 + ";\n border-top-style: solid;\n  border-bottom-style: solid;\n}\n";
+    }
+
+    for (var _i4 = 0, _Object$entries4 = Object.entries(this.borderColors); _i4 < _Object$entries4.length; _i4++) {
+      var _Object$entries4$_i = _Object$entries4[_i4],
+          _key3 = _Object$entries4$_i[0],
+          _value3 = _Object$entries4$_i[1];
+      output += "*[data-bct='" + _key3 + "'] {\n  border-top-color: " + _value3 + ";\n  border-top-style: solid;\n}\n";
+    }
+
+    for (var _i5 = 0, _Object$entries5 = Object.entries(this.borderColors); _i5 < _Object$entries5.length; _i5++) {
+      var _Object$entries5$_i = _Object$entries5[_i5],
+          _key4 = _Object$entries5$_i[0],
+          _value4 = _Object$entries5$_i[1];
+      output += "*[data-bcr='" + _key4 + "'] {\n  border-right-color: " + _value4 + ";\n  border-right-style: solid;\n}\n";
+    }
+
+    for (var _i6 = 0, _Object$entries6 = Object.entries(this.borderColors); _i6 < _Object$entries6.length; _i6++) {
+      var _Object$entries6$_i = _Object$entries6[_i6],
+          _key5 = _Object$entries6$_i[0],
+          _value5 = _Object$entries6$_i[1];
+      output += "*[data-bcb='" + _key5 + "'] {\n  border-bottom-color: " + _value5 + ";\n  border-bottom-style: solid;\n}\n";
+    }
+
+    for (var _i7 = 0, _Object$entries7 = Object.entries(this.borderColors); _i7 < _Object$entries7.length; _i7++) {
+      var _Object$entries7$_i = _Object$entries7[_i7],
+          _key6 = _Object$entries7$_i[0],
+          _value6 = _Object$entries7$_i[1];
+      output += "*[data-bcl='" + _key6 + "'] {\n  border-left-color: " + _value6 + ";\n  border-left-style: solid;\n}\n";
+    }
+
+    return output;
+  };
+
+  _proto.generateFooter = function generateFooter() {
+    return '/* ===================== */\n\n';
+  };
+
+  return BorderColorsGenerator;
+}();
+
 var Spacing = {
   '0': '0',
   '3': '3px',
@@ -1765,6 +1961,16 @@ var FlexGrows = {
   '1': '1',
   unset: 'unset'
 };
+var BorderWidths = {
+  '1': 1,
+  '2': 2,
+  '4': 4,
+  '6': 6,
+  '12': 12
+};
+var BorderColors = /*#__PURE__*/_extends({}, Colors, {
+  transparent: 'transparent'
+});
 
 var GeneratorProcessor = /*#__PURE__*/function () {
   function GeneratorProcessor() {}
@@ -1853,10 +2059,12 @@ function _main() {
               colors: Colors,
               breakpoints: Breakpoints,
               letterSpacings: LetterSpacings,
-              flexGrows: FlexGrows
+              flexGrows: FlexGrows,
+              borderWidths: BorderWidths,
+              borderColors: BorderColors
             };
             _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 LetterSpacingsGenerator(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 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)]);
 
           case 3:
           case "end":