@flodesk/grain 2.19.4 → 2.19.5

package/es/components/arrange.js

@@ -58,7 +58,8 @@ var Arrange = function Arrange(_ref) {
       justifyItems = _ref.justifyItems,
       _ref$alignItems = _ref.alignItems,
       alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
-      justifyContent = _ref.justifyContent,
+      _ref$justifyContent = _ref.justifyContent,
+      justifyContent = _ref$justifyContent === void 0 ? 'start' : _ref$justifyContent,
       alignContent = _ref.alignContent,
       placeItems = _ref.placeItems,
       placeContent = _ref.placeContent,
@@ -124,6 +125,39 @@ Arrange.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "justifyContent": {
+      "defaultValue": {
+        "value": "'start'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"start\"",
+          "computed": false
+        }, {
+          "value": "\"end\"",
+          "computed": false
+        }, {
+          "value": "\"center\"",
+          "computed": false
+        }, {
+          "value": "\"stretch\"",
+          "computed": false
+        }, {
+          "value": "\"space-around\"",
+          "computed": false
+        }, {
+          "value": "\"space-between\"",
+          "computed": false
+        }, {
+          "value": "\"space-evenly\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
     "gap": {
       "type": {
         "name": "union",
@@ -152,6 +186,8 @@ Arrange.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -189,35 +225,6 @@ Arrange.__docgenInfo = {
       "required": false,
       "description": ""
     },
-    "justifyContent": {
-      "type": {
-        "name": "enum",
-        "value": [{
-          "value": "\"start\"",
-          "computed": false
-        }, {
-          "value": "\"end\"",
-          "computed": false
-        }, {
-          "value": "\"center\"",
-          "computed": false
-        }, {
-          "value": "\"stretch\"",
-          "computed": false
-        }, {
-          "value": "\"space-around\"",
-          "computed": false
-        }, {
-          "value": "\"space-between\"",
-          "computed": false
-        }, {
-          "value": "\"space-evenly\"",
-          "computed": false
-        }]
-      },
-      "required": false,
-      "description": ""
-    },
     "alignContent": {
       "type": {
         "name": "enum",

package/es/components/box.js

@@ -206,6 +206,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -297,6 +299,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -309,6 +313,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -321,6 +327,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -333,6 +341,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -345,6 +355,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -357,6 +369,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -434,6 +448,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -467,6 +483,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -500,6 +518,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -533,6 +553,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -566,6 +588,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -599,6 +623,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -632,6 +658,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -665,6 +693,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -698,6 +728,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -731,6 +763,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -764,6 +798,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -797,6 +833,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -830,6 +868,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -863,6 +903,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -919,6 +961,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -952,6 +996,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -985,6 +1031,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -1018,6 +1066,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,

package/es/components/text.js

@@ -101,6 +101,8 @@ Text.__docgenInfo = {
           }]
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,

package/es/types.js

@@ -17,14 +17,14 @@ var _variables = require("./variables");
 
 var types = {
   color: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.colors)), _propTypes.default.string]),
-  space: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.spaces)), _propTypes.default.number, _propTypes.default.string]),
-  dimension: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  space: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.spaces)), _propTypes.default.number, _propTypes.default.string, _propTypes.default.object]),
+  dimension: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.object]),
   side: _propTypes.default.oneOf(["all", "left", "right", "top", "bottom", "x", "y"]),
   radius: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.radiuses)), _propTypes.default.string]),
   shadow: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.shadows)), _propTypes.default.string]),
   position: _propTypes.default.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
-  textSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.textSizes)), _propTypes.default.string]),
-  iconSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.iconSizes)), _propTypes.default.number, _propTypes.default.string]),
+  textSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.texts)), _propTypes.default.string, _propTypes.default.object]),
+  iconSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.icons)), _propTypes.default.number, _propTypes.default.string]),
   weight: _propTypes.default.oneOf(Object.keys(_variables.vars.weights)),
   textAlign: _propTypes.default.oneOf(["left", "center", "right"]),
   overflow: _propTypes.default.oneOf(["visible", "hidden", "scroll", "auto"]),

package/es/utilities/helpers.js

@@ -0,0 +1,61 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isObject = exports.isArray = exports.isString = exports.isNumber = exports.u = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+require("core-js/modules/es.array.concat.js");
+
+var _variables = require("../variables");
+
+var isBrowser = typeof window !== "undefined";
+exports.isBrowser = isBrowser;
+
+var getCssVarCore = function getCssVarCore(type, value) {
+  return "".concat(_variables.grnPrefix).concat(type, "-").concat(value);
+};
+
+exports.getCssVarCore = getCssVarCore;
+
+var getCssVar = function getCssVar(type, value) {
+  return "var(".concat(getCssVarCore(type, value), ")");
+};
+
+exports.getCssVar = getCssVar;
+
+var u = function u(amount) {
+  return "calc(var(--grn-unit) * ".concat(amount, ")");
+};
+
+exports.u = u;
+
+var isNumber = function isNumber(value) {
+  return typeof value === "number";
+};
+
+exports.isNumber = isNumber;
+
+var isString = function isString(value) {
+  return typeof value === "string";
+};
+
+exports.isString = isString;
+
+var isArray = function isArray(value) {
+  return Array.isArray(value);
+};
+
+exports.isArray = isArray;
+
+var isObject = function isObject(value) {
+  return (0, _typeof2.default)(value) === "object";
+};
+
+exports.isObject = isObject;

package/es/utilities/index.js

@@ -1,214 +1,125 @@
 "use strict";
 
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.array.filter.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-require("core-js/modules/web.dom-collections.for-each.js");
-
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-
-require("core-js/modules/es.object.define-properties.js");
-
 require("core-js/modules/es.object.define-property.js");
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBorder = exports.getGridColumns = exports.getIconSize = exports.getSpace = exports.getDimension = exports.getTransition = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.isObject = exports.isArray = exports.isString = exports.isNumber = exports.u = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-require("core-js/modules/es.array.concat.js");
-
-require("core-js/modules/es.array.map.js");
-
-var _variables = require("../variables");
-
-var _responsive = require("./responsive");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var isBrowser = typeof window !== "undefined";
-exports.isBrowser = isBrowser;
-
-var getCssVarCore = function getCssVarCore(type, value) {
-  return "".concat(_variables.grnPrefix).concat(type, "-").concat(value);
-};
-
-exports.getCssVarCore = getCssVarCore;
-
-var getCssVar = function getCssVar(type, value) {
-  return "var(".concat(getCssVarCore(type, value), ")");
-};
-
-exports.getCssVar = getCssVar;
-
-var u = function u(amount) {
-  return "calc(var(--grn-unit) * ".concat(amount, ")");
-};
-
-exports.u = u;
-
-var isNumber = function isNumber(value) {
-  return typeof value === "number";
-};
-
-exports.isNumber = isNumber;
-
-var isString = function isString(value) {
-  return typeof value === "string";
-};
-
-exports.isString = isString;
-
-var isArray = function isArray(value) {
-  return Array.isArray(value);
-};
-
-exports.isArray = isArray;
-
-var isObject = function isObject(value) {
-  return (0, _typeof2.default)(value) === "object";
-};
-
-exports.isObject = isObject;
-
-var allColors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _variables.vars.colors.baseColors), _variables.vars.colors.greys), _variables.vars.colors.semanticColors), _variables.vars.colors.fades);
-
-var getColor = function getColor(color) {
-  if (color in allColors) {
-    return getCssVar(_variables.varNames.color.prefix, color);
+Object.defineProperty(exports, "getDimension", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getDimension;
   }
-
-  return color;
-};
-
-exports.getColor = getColor;
-
-var getShadow = function getShadow(shadow) {
-  if (shadow in _variables.vars.shadows) {
-    return getCssVar(_variables.varNames.shadow.prefix, shadow);
+});
+Object.defineProperty(exports, "getColor", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getColor;
   }
-
-  return shadow;
-};
-
-exports.getShadow = getShadow;
-
-var getTextSize = function getTextSize(size) {
-  var property = "font-size: ";
-
-  if (size in _variables.vars.textSizes) {
-    return property + getCssVar(_variables.varNames.textSize.prefix, size);
+});
+Object.defineProperty(exports, "getShadow", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getShadow;
   }
-
-  if (isString(size)) return property + size;
-  if (isObject(size)) return (0, _responsive.getMediaStyles)(property, size);
-};
-
-exports.getTextSize = getTextSize;
-
-var getWeight = function getWeight(weight) {
-  if (weight in _variables.vars.weights) {
-    return getCssVar(_variables.varNames.weight.prefix, weight);
+});
+Object.defineProperty(exports, "getTextSize", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getTextSize;
   }
-};
-
-exports.getWeight = getWeight;
-
-var getRadius = function getRadius(radius) {
-  if (radius in _variables.vars.radiuses) {
-    return getCssVar(_variables.varNames.radius.prefix, radius);
+});
+Object.defineProperty(exports, "getWeight", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getWeight;
   }
-
-  if (isString(radius)) return radius;
-};
-
-exports.getRadius = getRadius;
-
-var getTransition = function getTransition(transition) {
-  if (transition in _variables.vars.transitions) {
-    return getCssVar(_variables.varNames.transition.prefix, transition);
+});
+Object.defineProperty(exports, "getRadius", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getRadius;
   }
-};
-
-exports.getTransition = getTransition;
-
-var getDimension = function getDimension(property, dimension) {
-  var propertyName = property + ":";
-  if (dimension === 0) return propertyName + dimension;
-  if (isNumber(dimension)) return propertyName + u(dimension);
-  if (isString(dimension)) return propertyName + dimension;
-  if (isObject(dimension)) return (0, _responsive.getMediaStyles)(propertyName, dimension);
-};
-
-exports.getDimension = getDimension;
-
-var getSpace = function getSpace(property, space) {
-  if (space in _variables.vars.spaces) {
-    return "".concat(property, ": ").concat(getCssVar(_variables.varNames.space.prefix, space));
+});
+Object.defineProperty(exports, "getTransition", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getTransition;
   }
-
-  return getDimension(property, space);
-};
-
-exports.getSpace = getSpace;
-
-var getIconSize = function getIconSize(property, size) {
-  if (size in _variables.vars.iconSizes) {
-    return "".concat(property, ": ").concat(getCssVar(_variables.varNames.iconSize.prefix, size));
+});
+Object.defineProperty(exports, "getSpace", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getSpace;
   }
-
-  return getDimension(property, size);
-};
-
-exports.getIconSize = getIconSize;
-
-var getGridColumns = function getGridColumns(columns) {
-  if (columns) {
-    if (isArray(columns)) {
-      return columns.map(function (column) {
-        return getDimension(column);
-      }).join(" ");
-    }
-
-    if (isString(columns)) return columns;
+});
+Object.defineProperty(exports, "getIconSize", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getIconSize;
   }
-};
-
-exports.getGridColumns = getGridColumns;
-
-var getBorder = function getBorder(borderSide) {
-  var borderWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "1px";
-  var borderColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "border";
-  var borderSides = {
-    all: ["top", "right", "bottom", "left"],
-    x: ["right", "left"],
-    y: ["top", "bottom"],
-    top: ["top"],
-    right: ["right"],
-    bottom: ["bottom"],
-    left: ["left"]
-  };
-
-  if (borderSide in borderSides) {
-    return "\n      ".concat(borderSides[borderSide].map(function (side) {
-      return "border-".concat(side, "-style: solid");
-    }).join(";"), ";\n\n      border-color: ").concat(getColor(borderColor), ";\n      ").concat(getDimension("border-width", borderWidth), ";\n    ");
+});
+Object.defineProperty(exports, "getGridColumns", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getGridColumns;
+  }
+});
+Object.defineProperty(exports, "getBorder", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getBorder;
+  }
+});
+Object.defineProperty(exports, "isBrowser", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.isBrowser;
+  }
+});
+Object.defineProperty(exports, "getCssVarCore", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.getCssVarCore;
   }
-};
+});
+Object.defineProperty(exports, "getCssVar", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.getCssVar;
+  }
+});
+Object.defineProperty(exports, "u", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.u;
+  }
+});
+Object.defineProperty(exports, "isNumber", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.isNumber;
+  }
+});
+Object.defineProperty(exports, "isString", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.isString;
+  }
+});
+Object.defineProperty(exports, "isArray", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.isArray;
+  }
+});
+Object.defineProperty(exports, "isObject", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.isObject;
+  }
+});
+
+var _styles = require("./styles");
 
-exports.getBorder = getBorder;
+var _helpers = require("./helpers");

package/es/utilities/responsive.js

@@ -7,25 +7,46 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMediaStyles = void 0;
+exports.mapObjToMedia = exports.getMediaCss = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+require("core-js/modules/es.array.concat.js");
+
 require("core-js/modules/es.array.map.js");
 
 require("core-js/modules/es.object.entries.js");
 
-require("core-js/modules/es.array.concat.js");
+var _ = require(".");
+
+var _variables = require("../variables");
+
+var getMediaCss = function getMediaCss(breakpoint, property, value) {
+  var getValue = function getValue(val) {
+    if (val === 0) return val;
+    if ((0, _.isNumber)(val)) return (0, _.u)(val);
+    if ((0, _.isString)(val)) return val;
+  };
 
-var getMediaStyles = function getMediaStyles(property, obj) {
-  var declarations = Object.entries(obj).map(function (_ref) {
+  return "\n    @media (min-width: ".concat(breakpoint, ") {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
+};
+
+exports.getMediaCss = getMediaCss;
+
+var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
+  var varGroupName = _variables.varNames[varName].group;
+  var varPrefix = _variables.varNames[varName].prefix;
+  return Object.entries(obj).map(function (_ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-        key = _ref2[0],
+        breakpoint = _ref2[0],
         value = _ref2[1];
 
-    return "\n      @media (min-width: ".concat(key, ") {\n        ").concat(property, " ").concat(value, ";\n      }\n    ");
-  });
-  return declarations.join("");
+    if (value in _variables.vars[varGroupName]) {
+      return getMediaCss(breakpoint, property, (0, _.getCssVar)(varPrefix, value));
+    }
+
+    return getMediaCss(breakpoint, property, value);
+  }).join("");
 };
 
-exports.getMediaStyles = getMediaStyles;
+exports.mapObjToMedia = mapObjToMedia;

package/es/utilities/styles.js

@@ -0,0 +1,174 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.object.define-properties.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBorder = exports.getGridColumns = exports.getIconSize = exports.getSpace = exports.getTransition = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.getDimension = void 0;
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.array.map.js");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _ = require(".");
+
+var _variables = require("../variables");
+
+var _responsive = require("./responsive");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var allColors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _variables.vars.colors.baseColors), _variables.vars.colors.greys), _variables.vars.colors.semanticColors), _variables.vars.colors.fades);
+
+var getDimension = function getDimension(property, dimension) {
+  if ((0, _.isObject)(dimension)) {
+    return (0, _responsive.mapObjToMedia)(property, dimension, _variables.varNames.space.prefix);
+  }
+
+  if (dimension === 0) return "".concat(property, ": ").concat(dimension);
+  if ((0, _.isString)(dimension)) return "".concat(property, ": ").concat(dimension);
+  if ((0, _.isNumber)(dimension)) return "".concat(property, ": ").concat((0, _.u)(dimension));
+};
+
+exports.getDimension = getDimension;
+
+var getColor = function getColor(color) {
+  if (color in allColors) {
+    return (0, _.getCssVar)(_variables.varNames.color.prefix, color);
+  }
+
+  return color;
+};
+
+exports.getColor = getColor;
+
+var getShadow = function getShadow(shadow) {
+  if (shadow in _variables.vars.shadows) {
+    return (0, _.getCssVar)(_variables.varNames.shadow.prefix, shadow);
+  }
+
+  return shadow;
+};
+
+exports.getShadow = getShadow;
+
+var getTextSize = function getTextSize(size) {
+  var property = "font-size";
+
+  if (size in _variables.vars.texts) {
+    return "".concat(property, ": ").concat((0, _.getCssVar)(_variables.varNames.text.prefix, size));
+  }
+
+  if ((0, _.isObject)(size)) {
+    return (0, _responsive.mapObjToMedia)(property, size, _variables.varNames.text.prefix);
+  }
+
+  if ((0, _.isString)(size)) return "".concat(property, ": ").concat(size);
+};
+
+exports.getTextSize = getTextSize;
+
+var getWeight = function getWeight(weight) {
+  if (weight in _variables.vars.weights) {
+    return (0, _.getCssVar)(_variables.varNames.weight.prefix, weight);
+  }
+};
+
+exports.getWeight = getWeight;
+
+var getRadius = function getRadius(radius) {
+  if (radius in _variables.vars.radiuses) {
+    return (0, _.getCssVar)(_variables.varNames.radius.prefix, radius);
+  }
+
+  if (radius === 0) return radius;
+  if ((0, _.isString)(radius)) return radius;
+  if ((0, _.isNumber)(radius)) return (0, _.u)(radius);
+};
+
+exports.getRadius = getRadius;
+
+var getTransition = function getTransition(transition) {
+  if (transition in _variables.vars.transitions) {
+    return (0, _.getCssVar)(_variables.varNames.transition.prefix, transition);
+  }
+};
+
+exports.getTransition = getTransition;
+
+var getSpace = function getSpace(property, space) {
+  if (space in _variables.vars.spaces) {
+    return "".concat(property, ": ").concat((0, _.getCssVar)(_variables.varNames.space.prefix, space));
+  }
+
+  return getDimension(property, space);
+};
+
+exports.getSpace = getSpace;
+
+var getIconSize = function getIconSize(property, size) {
+  if (size in _variables.vars.icons) {
+    return "".concat(property, ": ").concat((0, _.getCssVar)(_variables.varNames.icon.prefix, size));
+  }
+
+  return getDimension(property, size);
+};
+
+exports.getIconSize = getIconSize;
+
+var getGridColumns = function getGridColumns(columns) {
+  if (columns) {
+    if (isArray(columns)) {
+      return columns.map(function (column) {
+        return getDimension(column);
+      }).join(" ");
+    }
+
+    if ((0, _.isString)(columns)) return columns;
+  }
+};
+
+exports.getGridColumns = getGridColumns;
+
+var getBorder = function getBorder(borderSide, borderWidth, borderColor) {
+  var borderSides = {
+    all: ["top", "right", "bottom", "left"],
+    x: ["right", "left"],
+    y: ["top", "bottom"],
+    top: ["top"],
+    right: ["right"],
+    bottom: ["bottom"],
+    left: ["left"]
+  };
+
+  if (borderSide in borderSides) {
+    return "\n      ".concat(borderSides[borderSide].map(function (side) {
+      return "border-".concat(side, "-style: solid");
+    }).join(";"), ";\n\n      border-color: ").concat(getColor(borderColor), ";\n      ").concat(getDimension("border-width", borderWidth), ";\n    ");
+  }
+};
+
+exports.getBorder = getBorder;

package/es/variables.js

@@ -16,12 +16,12 @@ var _vars;
 var grnPrefix = "--grn-";
 exports.grnPrefix = grnPrefix;
 var varNames = {
-  textSize: {
-    group: "textSizes",
+  text: {
+    group: "texts",
     prefix: "text"
   },
-  iconSize: {
-    group: "iconSizes",
+  icon: {
+    group: "icons",
     prefix: "icon"
   },
   space: {
@@ -50,13 +50,13 @@ var varNames = {
   }
 };
 exports.varNames = varNames;
-var vars = (_vars = {}, (0, _defineProperty2.default)(_vars, varNames.textSize.group, {
+var vars = (_vars = {}, (0, _defineProperty2.default)(_vars, varNames.text.group, {
   s: "s",
   m: "m",
   l: "l",
   xl: "xl",
   xxl: "xxl"
-}), (0, _defineProperty2.default)(_vars, varNames.iconSize.group, {
+}), (0, _defineProperty2.default)(_vars, varNames.icon.group, {
   s: "s",
   m: "m",
   l: "l",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "2.19.4",
+  "version": "2.19.5",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",