@bgord/design 0.22.0 → 0.24.2

package/dist/backgrounds-generator.d.ts

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

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

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

package/dist/design.cjs.development.js

@@ -1586,7 +1586,7 @@ var FlexDirectionsGenerator = /*#__PURE__*/function () {
 
 var BackgroundsGenerator = /*#__PURE__*/function () {
   function BackgroundsGenerator(config) {
-    this.colors = config.colors;
+    this.colors = _extends({}, config.grayscale, config.greens, config.reds);
   }
 
   var _proto = BackgroundsGenerator.prototype;
@@ -1617,7 +1617,7 @@ var BackgroundsGenerator = /*#__PURE__*/function () {
 
 var FontColorsGenerator = /*#__PURE__*/function () {
   function FontColorsGenerator(config) {
-    this.colors = config.colors;
+    this.colors = _extends({}, config.grayscale, config.greens, config.reds);
   }
 
   var _proto = FontColorsGenerator.prototype;
@@ -1854,6 +1854,37 @@ var BorderColorsGenerator = /*#__PURE__*/function () {
   return BorderColorsGenerator;
 }();
 
+var BorderRadiusesGenerator = /*#__PURE__*/function () {
+  function BorderRadiusesGenerator(config) {
+    this.borderRadiuses = config.borderRadiuses;
+  }
+
+  var _proto = BorderRadiusesGenerator.prototype;
+
+  _proto.generateHeader = function generateHeader() {
+    return '/* Border radiuses */\n\n';
+  };
+
+  _proto.generateCss = function generateCss() {
+    var output = '';
+
+    for (var _i = 0, _Object$entries = Object.entries(this.borderRadiuses); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+      output += "*[data-br='" + key + "'] {\n  border-radius: " + value + ";\n}\n";
+    }
+
+    return output;
+  };
+
+  _proto.generateFooter = function generateFooter() {
+    return '/* ===================== */\n\n';
+  };
+
+  return BorderRadiusesGenerator;
+}();
+
 var Spacing = {
   '0': '0',
   '3': '3px',
@@ -1936,7 +1967,7 @@ var FlexDirections = {
   column: 'column',
   'column-reverse': 'column-reverse'
 };
-var Colors = {
+var Grayscale = {
   white: '#F9FAFB',
   'gray-100': '#F3F4F6',
   'gray-200': '#E5E7EB',
@@ -1948,6 +1979,26 @@ var Colors = {
   'gray-800': '#1F2937',
   black: '#111827'
 };
+var Greens = {
+  '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%)'
+};
+var Reds = {
+  '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%)'
+};
 var Breakpoints = {
   md: 768
 };
@@ -1968,9 +2019,16 @@ var BorderWidths = {
   '6': 6,
   '12': 12
 };
-var BorderColors = /*#__PURE__*/_extends({}, Colors, {
+var BorderColors = /*#__PURE__*/_extends({}, Grayscale, {
   transparent: 'transparent'
 });
+var BorderRadiuses = {
+  '0': '0',
+  '1': '1px',
+  '2': '2px',
+  '4': '4px',
+  '50%': '50%'
+};
 
 var GeneratorProcessor = /*#__PURE__*/function () {
   function GeneratorProcessor() {}
@@ -1985,7 +2043,7 @@ var GeneratorProcessor = /*#__PURE__*/function () {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              output = "/* 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";
+              output = '';
 
               for (_iterator = _createForOfIteratorHelperLoose(generators); !(_step = _iterator()).done;) {
                 generator = _step.value;
@@ -2068,15 +2126,18 @@ function _main() {
               fontWeights: FontWeights,
               lineHeights: LineHeights,
               flexDirections: FlexDirections,
-              colors: Colors,
+              grayscale: Grayscale,
+              greens: Greens,
+              reds: Reds,
               breakpoints: Breakpoints,
               letterSpacings: LetterSpacings,
               flexGrows: FlexGrows,
               borderWidths: BorderWidths,
-              borderColors: BorderColors
+              borderColors: BorderColors,
+              borderRadiuses: BorderRadiuses
             };
             _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)]);
+            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)]);
 
           case 3:
           case "end":