@flodesk/grain 2.19.6 → 2.19.7

package/es/components/arrange.js

@@ -32,7 +32,7 @@ var __jsx = _react.default.createElement;
 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)('gap', p.gap);
+  return (0, _utilities.getResponsiveSpace)('gap', p.gap);
 }, function (p) {
   return (0, _utilities.getGridColumns)(p.columns);
 }, function (p) {

package/es/components/box.js

@@ -32,45 +32,45 @@ var __jsx = _react.default.createElement;
 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)('padding', p.padding);
+  return (0, _utilities.getResponsiveSpace)('padding', p.padding);
 }, function (p) {
-  return (0, _utilities.getSpace)('padding-top', p.paddingTop);
+  return (0, _utilities.getResponsiveSpace)('padding-top', p.paddingTop);
 }, function (p) {
-  return (0, _utilities.getSpace)('padding-bottom', p.paddingBottom);
+  return (0, _utilities.getResponsiveSpace)('padding-bottom', p.paddingBottom);
 }, function (p) {
-  return (0, _utilities.getSpace)('padding-left', p.paddingLeft);
+  return (0, _utilities.getResponsiveSpace)('padding-left', p.paddingLeft);
 }, function (p) {
-  return (0, _utilities.getSpace)('padding-right', p.paddingRight);
+  return (0, _utilities.getResponsiveSpace)('padding-right', p.paddingRight);
 }, function (p) {
-  return (0, _utilities.getSpace)('margin', p.margin);
+  return (0, _utilities.getResponsiveSpace)('margin', p.margin);
 }, function (p) {
-  return (0, _utilities.getSpace)('margin-top', p.marginTop);
+  return (0, _utilities.getResponsiveSpace)('margin-top', p.marginTop);
 }, function (p) {
-  return (0, _utilities.getSpace)('margin-bottom', p.marginBottom);
+  return (0, _utilities.getResponsiveSpace)('margin-bottom', p.marginBottom);
 }, function (p) {
-  return (0, _utilities.getSpace)('margin-left', p.marginLeft);
+  return (0, _utilities.getResponsiveSpace)('margin-left', p.marginLeft);
 }, function (p) {
-  return (0, _utilities.getSpace)('margin-right', p.marginRight);
+  return (0, _utilities.getResponsiveSpace)('margin-right', p.marginRight);
 }, function (p) {
-  return (0, _utilities.getSpace)('top', p.top);
+  return (0, _utilities.getResponsiveSpace)('top', p.top);
 }, function (p) {
-  return (0, _utilities.getSpace)('bottom', p.bottom);
+  return (0, _utilities.getResponsiveSpace)('bottom', p.bottom);
 }, function (p) {
-  return (0, _utilities.getSpace)('left', p.left);
+  return (0, _utilities.getResponsiveSpace)('left', p.left);
 }, function (p) {
-  return (0, _utilities.getSpace)('right', p.right);
+  return (0, _utilities.getResponsiveSpace)('right', p.right);
 }, function (p) {
-  return (0, _utilities.getDimension)('width', p.width);
+  return (0, _utilities.getResponsiveDimension)('width', p.width);
 }, function (p) {
-  return (0, _utilities.getDimension)('min-width', p.minWidth);
+  return (0, _utilities.getResponsiveDimension)('min-width', p.minWidth);
 }, function (p) {
-  return (0, _utilities.getDimension)('max-width', p.maxWidth);
+  return (0, _utilities.getResponsiveDimension)('max-width', p.maxWidth);
 }, function (p) {
-  return (0, _utilities.getDimension)('height', p.height);
+  return (0, _utilities.getResponsiveDimension)('height', p.height);
 }, function (p) {
-  return (0, _utilities.getDimension)('min-height', p.minHeight);
+  return (0, _utilities.getResponsiveDimension)('min-height', p.minHeight);
 }, function (p) {
-  return (0, _utilities.getDimension)('max-height', p.maxHeight);
+  return (0, _utilities.getResponsiveDimension)('max-height', p.maxHeight);
 }, function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {

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    ", ";\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    height: ", ";\n    ", "\n"])), function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
-  return (0, _utilities.getIconSize)('height', p.size);
+  return (0, _utilities.getIconSize)(p.size);
 }, function (p) {
-  return p.hasEvenBoundary && (0, _utilities.getIconSize)('width', p.size);
+  return p.hasEvenBoundary && "width: ".concat((0, _utilities.getIconSize)(p.size), "}");
 });
 
 var Icon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {

package/es/components/text-input.js

@@ -42,13 +42,11 @@ var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _tagg
 var inputSizesStyles = {
   s: {
     height: 'var(--grn-textBoxHeight-s)',
-    padding: '0 var(--grn-fieldTextBoxPaddingX-s)',
-    borderRadius: (0, _utilities.getRadius)('xs')
+    padding: '0 var(--grn-fieldTextBoxPaddingX-s)'
   },
   m: {
     height: 'var(--grn-textBoxHeight-m)',
-    padding: '0 var(--grn-fieldTextBoxPaddingX-m)',
-    borderRadius: (0, _utilities.getRadius)('s')
+    padding: '0 var(--grn-fieldTextBoxPaddingX-m)'
   }
 };
 var sizesStyles = {
@@ -72,7 +70,9 @@ var Label = _styled.default.label(_templateObject3 || (_templateObject3 = (0, _t
   return sizesStyles[p.size].labelGap;
 });
 
-var InputField = _styled.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition-property: border-color;  \n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n  \n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-grey6);\n  }\n"])), _foundational.transitions, function (p) {
+var InputField = _styled.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition-property: border-color;  \n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  border-radius: ", ";\n  ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n  \n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-grey6);\n  }\n"])), _foundational.transitions, function (p) {
+  return (0, _utilities.getRadius)('s');
+}, function (p) {
   return inputSizesStyles[p.size];
 }, function (p) {
   return p.paddingLeft && "padding-left: ".concat(p.paddingLeft, "px");

package/es/components/text.js

@@ -30,7 +30,7 @@ var _templateObject;
 var __jsx = _react.default.createElement;
 
 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);
+  return (0, _utilities.getResponsiveTextSize)(p.size);
 }, function (p) {
   return (0, _utilities.getWeight)(p.weight);
 }, function (p) {

package/es/utilities/index.js

@@ -8,25 +8,43 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "getDimension", {
   enumerable: true,
   get: function get() {
-    return _styles.getDimension;
+    return _responsive.getDimension;
   }
 });
-Object.defineProperty(exports, "getColor", {
+Object.defineProperty(exports, "getResponsiveDimension", {
   enumerable: true,
   get: function get() {
-    return _styles.getColor;
+    return _responsive.getResponsiveDimension;
   }
 });
-Object.defineProperty(exports, "getShadow", {
+Object.defineProperty(exports, "getTextSize", {
   enumerable: true,
   get: function get() {
-    return _styles.getShadow;
+    return _responsive.getTextSize;
   }
 });
-Object.defineProperty(exports, "getTextSize", {
+Object.defineProperty(exports, "getResponsiveTextSize", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.getResponsiveTextSize;
+  }
+});
+Object.defineProperty(exports, "getResponsiveSpace", {
   enumerable: true,
   get: function get() {
-    return _styles.getTextSize;
+    return _responsive.getResponsiveSpace;
+  }
+});
+Object.defineProperty(exports, "getColor", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getColor;
+  }
+});
+Object.defineProperty(exports, "getShadow", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getShadow;
   }
 });
 Object.defineProperty(exports, "getWeight", {
@@ -47,12 +65,6 @@ Object.defineProperty(exports, "getTransition", {
     return _styles.getTransition;
   }
 });
-Object.defineProperty(exports, "getSpace", {
-  enumerable: true,
-  get: function get() {
-    return _styles.getSpace;
-  }
-});
 Object.defineProperty(exports, "getIconSize", {
   enumerable: true,
   get: function get() {
@@ -120,6 +132,8 @@ Object.defineProperty(exports, "isObject", {
   }
 });
 
+var _responsive = require("./responsive");
+
 var _styles = require("./styles");
 
 var _helpers = require("./helpers");

package/es/utilities/responsive.js

@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mapObjToMedia = exports.getMediaCss = void 0;
+exports.getResponsiveTextSize = exports.getTextSize = exports.getResponsiveSpace = exports.getResponsiveDimension = exports.getDimension = exports.mapObjToMedia = exports.getMediaCss = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -49,4 +49,60 @@ var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
   }).join("");
 };
 
-exports.mapObjToMedia = mapObjToMedia;
+exports.mapObjToMedia = mapObjToMedia;
+
+var getDimension = function getDimension(dimension) {
+  if (dimension === 0) return dimension;
+  if ((0, _.isString)(dimension)) return dimension;
+  if ((0, _.isNumber)(dimension)) return (0, _.u)(dimension);
+};
+
+exports.getDimension = getDimension;
+
+var getResponsiveDimension = function getResponsiveDimension(property, dimension) {
+  if ((0, _.isObject)(dimension)) {
+    return 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.getResponsiveDimension = getResponsiveDimension;
+
+var getResponsiveSpace = function getResponsiveSpace(property, space) {
+  if (space in _variables.vars.spaces) {
+    return "".concat(property, ": ").concat((0, _.getCssVar)(_variables.varNames.space.prefix, space));
+  }
+
+  return getResponsiveDimension(property, space);
+};
+
+exports.getResponsiveSpace = getResponsiveSpace;
+
+var getTextSize = function getTextSize(size) {
+  if (size in _variables.vars.texts) {
+    return (0, _.getCssVar)(_variables.varNames.text.prefix, size);
+  }
+
+  if ((0, _.isString)(size)) return size;
+};
+
+exports.getTextSize = getTextSize;
+
+var getResponsiveTextSize = function getResponsiveTextSize(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 mapObjToMedia(property, size, _variables.varNames.text.prefix);
+  }
+
+  if ((0, _.isString)(size)) return "".concat(property, ": ").concat(size);
+};
+
+exports.getResponsiveTextSize = getResponsiveTextSize;

package/es/utilities/styles.js

@@ -23,12 +23,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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");
+exports.getBorder = exports.getGridColumns = exports.getIconSize = exports.getTransition = exports.getRadius = exports.getWeight = exports.getShadow = exports.getColor = void 0;
 
 require("core-js/modules/es.array.map.js");
 
+require("core-js/modules/es.array.concat.js");
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _ = require(".");
@@ -43,18 +43,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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);
@@ -75,22 +63,6 @@ var getShadow = function getShadow(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);
@@ -119,22 +91,12 @@ var getTransition = function getTransition(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) {
+var getIconSize = function getIconSize(size) {
   if (size in _variables.vars.icons) {
-    return "".concat(property, ": ").concat((0, _.getCssVar)(_variables.varNames.icon.prefix, size));
+    return (0, _.getCssVar)(_variables.varNames.icon.prefix, size);
   }
 
-  return getDimension(property, size);
+  return (0, _responsive.getDimension)(size);
 };
 
 exports.getIconSize = getIconSize;
@@ -143,7 +105,7 @@ var getGridColumns = function getGridColumns(columns) {
   if (columns) {
     if ((0, _.isArray)(columns)) {
       return columns.map(function (column) {
-        return getDimension(column);
+        return (0, _responsive.getDimension)(column);
       }).join(" ");
     }
 
@@ -167,7 +129,7 @@ var getBorder = function getBorder(borderSide, borderWidth, borderColor) {
   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    ");
+    }).join(";"), ";\n\n      border-color: ").concat(getColor(borderColor), ";\n      ").concat((0, _responsive.getDimension)("border-width", borderWidth), ";\n    ");
   }
 };
 

package/package.json

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