@flodesk/grain 2.19.1 → 2.19.4

package/es/components/arrange.js

@@ -23,18 +23,16 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _types = require("../types");
 
-var _box = require("./box");
-
 var _excluded = ["children", "gap", "columns", "autoFlow", "justifyItems", "alignItems", "justifyContent", "alignContent", "placeItems", "placeContent"];
 
 var _templateObject;
 
 var __jsx = _react.default.createElement;
 
-var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  ", ";\n  justify-content: start;\n  align-items: center;\n  gap: ", ";\n  grid-template-columns: ", ";\n  justify-items: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  align-content: ", ";\n  place-items: ", ";\n  place-content: ", ";\n"])), function (p) {
+var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  ", ";\n  ", ";\n  grid-template-columns: ", ";\n  justify-items: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  align-content: ", ";\n  place-items: ", ";\n  place-content: ", ";\n"])), function (p) {
   return !p.columns && "grid-auto-flow: ".concat(p.autoFlow);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.gap);
+  return (0, _utilities.getSpace)('gap', p.gap);
 }, function (p) {
   return (0, _utilities.getGridColumns)(p.columns);
 }, function (p) {

package/es/components/box.js

@@ -23,54 +23,54 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _types = require("../types");
 
-var _excluded = ["children", "color", "backgroundColor", "borderSide", "borderWidth", "borderColor", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio"];
+var _excluded = ["children", "color", "backgroundColor", "borderColor", "borderWidth", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio"];
 
 var _templateObject;
 
 var __jsx = _react.default.createElement;
 
-var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  \n  padding:", ";\n  padding-top:", ";\n  padding-bottom:", ";\n  padding-left:", ";\n  padding-right:", ";\n  \n  margin:", ";\n  margin-top:", ";\n  margin-bottom:", ";\n  margin-left:", ";\n  margin-right:", ";\n  \n  top:", ";\n  bottom:", ";\n  left:", ";\n  right:", ";\n  \n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n\n  color: ", ";\n  background-color: ", ";\n  \n  position: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n"])), function (p) {
+var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  color: ", ";\n  background-color: ", ";\n  \n  position: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n"])), function (p) {
   return (0, _utilities.getBorder)(p.borderSide, p.borderWidth, p.borderColor);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.padding);
+  return (0, _utilities.getSpace)('padding', p.padding);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.paddingTop);
+  return (0, _utilities.getSpace)('padding-top', p.paddingTop);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.paddingBottom);
+  return (0, _utilities.getSpace)('padding-bottom', p.paddingBottom);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.paddingLeft);
+  return (0, _utilities.getSpace)('padding-left', p.paddingLeft);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.paddingRight);
+  return (0, _utilities.getSpace)('padding-right', p.paddingRight);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.margin);
+  return (0, _utilities.getSpace)('margin', p.margin);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.marginTop);
+  return (0, _utilities.getSpace)('margin-top', p.marginTop);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.marginBottom);
+  return (0, _utilities.getSpace)('margin-bottom', p.marginBottom);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.marginLeft);
+  return (0, _utilities.getSpace)('margin-left', p.marginLeft);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.marginRight);
+  return (0, _utilities.getSpace)('margin-right', p.marginRight);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.top);
+  return (0, _utilities.getSpace)('top', p.top);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.bottom);
+  return (0, _utilities.getSpace)('bottom', p.bottom);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.left);
+  return (0, _utilities.getSpace)('left', p.left);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.right);
+  return (0, _utilities.getSpace)('right', p.right);
 }, function (p) {
-  return (0, _utilities.getDimension)(p.width);
+  return (0, _utilities.getDimension)('width', p.width);
 }, function (p) {
-  return (0, _utilities.getDimension)(p.minWidth);
+  return (0, _utilities.getDimension)('min-width', p.minWidth);
 }, function (p) {
-  return (0, _utilities.getDimension)(p.maxWidth);
+  return (0, _utilities.getDimension)('max-width', p.maxWidth);
 }, function (p) {
-  return (0, _utilities.getDimension)(p.height);
+  return (0, _utilities.getDimension)('height', p.height);
 }, function (p) {
-  return (0, _utilities.getDimension)(p.minHeight);
+  return (0, _utilities.getDimension)('min-height', p.minHeight);
 }, function (p) {
-  return (0, _utilities.getDimension)(p.maxHeight);
+  return (0, _utilities.getDimension)('max-height', p.maxHeight);
 }, function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
@@ -91,9 +91,11 @@ var Box = function Box(_ref) {
   var children = _ref.children,
       color = _ref.color,
       backgroundColor = _ref.backgroundColor,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? 'border' : _ref$borderColor,
+      _ref$borderWidth = _ref.borderWidth,
+      borderWidth = _ref$borderWidth === void 0 ? '1px' : _ref$borderWidth,
       borderSide = _ref.borderSide,
-      borderWidth = _ref.borderWidth,
-      borderColor = _ref.borderColor,
       width = _ref.width,
       minWidth = _ref.minWidth,
       maxWidth = _ref.maxWidth,
@@ -164,6 +166,51 @@ Box.__docgenInfo = {
   "methods": [],
   "displayName": "Box",
   "props": {
+    "borderColor": {
+      "defaultValue": {
+        "value": "'border'",
+        "computed": false
+      },
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"greys\"",
+            "computed": false
+          }, {
+            "value": "\"fades\"",
+            "computed": false
+          }, {
+            "value": "\"baseColors\"",
+            "computed": false
+          }, {
+            "value": "\"semanticColors\"",
+            "computed": false
+          }]
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "borderWidth": {
+      "defaultValue": {
+        "value": "'1px'",
+        "computed": false
+      },
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
     "color": {
       "type": {
         "name": "union",
@@ -243,43 +290,6 @@ Box.__docgenInfo = {
       "required": false,
       "description": ""
     },
-    "borderWidth": {
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "number"
-        }, {
-          "name": "string"
-        }]
-      },
-      "required": false,
-      "description": ""
-    },
-    "borderColor": {
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "enum",
-          "value": [{
-            "value": "\"greys\"",
-            "computed": false
-          }, {
-            "value": "\"fades\"",
-            "computed": false
-          }, {
-            "value": "\"baseColors\"",
-            "computed": false
-          }, {
-            "value": "\"semanticColors\"",
-            "computed": false
-          }]
-        }, {
-          "name": "string"
-        }]
-      },
-      "required": false,
-      "description": ""
-    },
     "width": {
       "type": {
         "name": "union",

package/es/components/icon.js

@@ -31,14 +31,14 @@ var _templateObject;
 
 var __jsx = _react.default.createElement;
 
-var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  width: ", ";\n  color: ", ";\n  \n  svg {\n    display: block;\n    height: ", ";\n    ", ";\n  }\n"])), function (p) {
+var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  width: ", ";\n  color: ", ";\n  \n  svg {\n    display: block;\n    ", ";\n    ", ";\n  }\n"])), function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
-  return (0, _utilities.getIconSize)(p.size);
+  return (0, _utilities.getIconSize)('height', p.size);
 }, function (p) {
-  return p.hasEvenBoundary && "width: ".concat((0, _utilities.getIconSize)(p.size));
+  return p.hasEvenBoundary && (0, _utilities.getIconSize)('width', p.size);
 });
 
 var Icon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {

package/es/components/text.js

@@ -29,7 +29,7 @@ var _templateObject;
 
 var __jsx = _react.default.createElement;
 
-var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  text-align: ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
+var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  ", ";\n  font-weight: ", ";\n  color: ", ";\n  text-align: ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return (0, _utilities.getTextSize)(p.size);
 }, function (p) {
   return (0, _utilities.getWeight)(p.weight);

package/es/{utilities.js → utilities/index.js}

@@ -23,15 +23,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBorder = exports.getGridColumns = exports.getIconSize = exports.getDimension = exports.getSpace = exports.getTransition = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
+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 _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; }
 
@@ -56,20 +60,36 @@ 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 _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _variables.vars.colors.baseColors), _variables.vars.colors.greys), _variables.vars.colors.semanticColors), _variables.vars.colors.fades)) {
+  if (color in allColors) {
     return getCssVar(_variables.varNames.color.prefix, color);
   }
 
@@ -89,13 +109,14 @@ var getShadow = function getShadow(shadow) {
 exports.getShadow = getShadow;
 
 var getTextSize = function getTextSize(size) {
+  var property = "font-size: ";
+
   if (size in _variables.vars.textSizes) {
-    return getCssVar(_variables.varNames.textSize.prefix, size);
+    return property + getCssVar(_variables.varNames.textSize.prefix, size);
   }
 
-  if (isString(size)) {
-    return size;
-  }
+  if (isString(size)) return property + size;
+  if (isObject(size)) return (0, _responsive.getMediaStyles)(property, size);
 };
 
 exports.getTextSize = getTextSize;
@@ -113,9 +134,7 @@ var getRadius = function getRadius(radius) {
     return getCssVar(_variables.varNames.radius.prefix, radius);
   }
 
-  if (isString(radius)) {
-    return radius;
-  }
+  if (isString(radius)) return radius;
 };
 
 exports.getRadius = getRadius;
@@ -128,48 +147,32 @@ var getTransition = function getTransition(transition) {
 
 exports.getTransition = getTransition;
 
-var getSpace = function getSpace(space) {
-  if (space === 0) return space;
+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);
+};
 
-  if (isNumber(space)) {
-    return u(space);
-  }
+exports.getDimension = getDimension;
 
+var getSpace = function getSpace(property, space) {
   if (space in _variables.vars.spaces) {
-    return getCssVar(_variables.varNames.space.prefix, space);
+    return "".concat(property, ": ").concat(getCssVar(_variables.varNames.space.prefix, space));
   }
 
-  if (isString(space)) {
-    return space;
-  }
+  return getDimension(property, space);
 };
 
 exports.getSpace = getSpace;
 
-var getDimension = function getDimension(dimension) {
-  if (dimension === 0) return dimension;
-
-  if (isNumber(dimension)) {
-    return u(dimension);
-  }
-
-  if (isString(dimension)) {
-    return dimension;
-  }
-};
-
-exports.getDimension = getDimension;
-
-var getIconSize = function getIconSize(size) {
-  if (size === 0) return size;
-
+var getIconSize = function getIconSize(property, size) {
   if (size in _variables.vars.iconSizes) {
-    return getCssVar(_variables.varNames.iconSize.prefix, size);
+    return "".concat(property, ": ").concat(getCssVar(_variables.varNames.iconSize.prefix, size));
   }
 
-  if (isNumber(size) || isString(size)) {
-    return getDimension(size);
-  }
+  return getDimension(property, size);
 };
 
 exports.getIconSize = getIconSize;
@@ -182,9 +185,7 @@ var getGridColumns = function getGridColumns(columns) {
       }).join(" ");
     }
 
-    if (isString(columns)) {
-      return columns;
-    }
+    if (isString(columns)) return columns;
   }
 };
 
@@ -193,19 +194,20 @@ 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 w = getSpace(borderWidth);
-  var borderSideStyles = {
-    x: "0 ".concat(w),
-    y: "".concat(w, " 0"),
-    all: "".concat(w),
-    top: "".concat(w, " 0 0 0"),
-    right: "0 ".concat(w, " 0 0"),
-    bottom: "0 0 ".concat(w, " 0"),
-    left: "0 0 0 ".concat(w)
+  var borderSides = {
+    all: ["top", "right", "bottom", "left"],
+    x: ["right", "left"],
+    y: ["top", "bottom"],
+    top: ["top"],
+    right: ["right"],
+    bottom: ["bottom"],
+    left: ["left"]
   };
 
-  if (borderSide in borderSideStyles) {
-    return "\n      border-style: solid;\n      border-width: ".concat(borderSideStyles[borderSide], ";\n      border-color: ").concat(getColor(borderColor), ";\n    ");
+  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    ");
   }
 };
 

package/es/utilities/responsive.js

@@ -0,0 +1,31 @@
+"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.getMediaStyles = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+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 getMediaStyles = function getMediaStyles(property, obj) {
+  var declarations = Object.entries(obj).map(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return "\n      @media (min-width: ".concat(key, ") {\n        ").concat(property, " ").concat(value, ";\n      }\n    ");
+  });
+  return declarations.join("");
+};
+
+exports.getMediaStyles = getMediaStyles;

package/package.json

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