@flodesk/grain 10.9.5 → 10.9.7

package/es/components/box2.js

@@ -9,7 +9,7 @@ import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
 import "core-js/modules/es.object.define-properties.js";
 import "core-js/modules/es.object.assign.js";
-var _excluded = ["all", "color", "colorHover", "backgroundColor", "backgroundColorHover", "borderColorHover", "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", "shadowHover", "overflow", "overflowX", "overflowY", "aspectRatio", "zIndex", "tag", "opacity", "opacityHover", "order", "alignSelf", "flex", "transition", "transitionHover", "cursor", "children", "className", "style"];
+var _excluded = ["color", "colorHover", "backgroundColor", "backgroundColorHover", "borderColorHover", "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", "shadowHover", "overflow", "overflowX", "overflowY", "aspectRatio", "zIndex", "tag", "opacity", "opacityHover", "order", "alignSelf", "flex", "transition", "transitionHover", "cursor", "children", "className", "style"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
@@ -30,24 +30,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef } from 'react';
 import { types } from '../types';
 import PropTypes from 'prop-types';
-import { styleConfig, generateStyleAttributes, generateClassNameAttributes } from '../utilities';
+import { generateStyleAttributes, generateClassNameAttributes } from '../utilities';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var dimensionProps = styleConfig.dimensionProps,
-    colorProps = styleConfig.colorProps,
-    zIndexProps = styleConfig.zIndexProps,
-    aspectRatioProps = styleConfig.aspectRatioProps,
-    flexProps = styleConfig.flexProps,
-    spaceProps = styleConfig.spaceProps,
-    shadowProps = styleConfig.shadowProps,
-    radiusProps = styleConfig.radiusProps,
-    orderProps = styleConfig.orderProps,
-    positionProps = styleConfig.positionProps,
-    overflowProps = styleConfig.overflowProps,
-    transitionProps = styleConfig.transitionProps,
-    cursorProps = styleConfig.cursorProps;
 export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var all = _ref.all,
-      color = _ref.color,
+  var _generateClassNameAtt;
+
+  var color = _ref.color,
       colorHover = _ref.colorHover,
       backgroundColor = _ref.backgroundColor,
       backgroundColorHover = _ref.backgroundColorHover,
@@ -101,21 +89,46 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
       style = _ref.style,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  var allProps = {
-    all: all,
-    color: color,
-    colorHover: colorHover,
-    backgroundColor: backgroundColor,
-    backgroundColorHover: backgroundColorHover,
-    borderColorHover: borderColorHover,
-    borderSide: borderSide,
+  var styles = _objectSpread({}, generateStyleAttributes({
     width: width,
     minWidth: minWidth,
     maxWidth: maxWidth,
     height: height,
     minHeight: minHeight,
     maxHeight: maxHeight,
+    color: color,
+    colorHover: colorHover,
+    backgroundColor: backgroundColor,
+    backgroundColorHover: backgroundColorHover,
+    padding: padding,
+    paddingTop: paddingTop,
+    paddingBottom: paddingBottom,
+    paddingLeft: paddingLeft,
+    paddingRight: paddingRight,
+    paddingX: paddingX,
+    paddingY: paddingY,
+    margin: margin,
+    marginTop: marginTop,
+    marginBottom: marginBottom,
+    marginLeft: marginLeft,
+    marginRight: marginRight,
+    marginX: marginX,
+    marginY: marginY,
+    shadow: shadow,
+    shadowHover: shadowHover,
     radius: radius,
+    order: order,
+    zIndex: zIndex,
+    transition: transition,
+    transitionHover: transitionHover,
+    aspectRatio: aspectRatio,
+    flex: flex,
+    opacity: opacity,
+    opacityHover: opacityHover
+  }));
+
+  var propClassName = className ? className : '';
+  var classNames = [generateClassNameAttributes((_generateClassNameAtt = {
     padding: padding,
     paddingTop: paddingTop,
     paddingBottom: paddingBottom,
@@ -135,28 +148,14 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     bottom: bottom,
     left: left,
     right: right,
+    color: color,
+    colorHover: colorHover,
+    backgroundColor: backgroundColor,
+    backgroundColorHover: backgroundColorHover,
     shadow: shadow,
     shadowHover: shadowHover,
-    overflow: overflow,
-    overflowX: overflowX,
-    overflowY: overflowY,
-    aspectRatio: aspectRatio,
-    zIndex: zIndex,
-    tag: tag,
-    opacity: opacity,
-    opacityHover: opacityHover,
-    order: order,
-    alignSelf: alignSelf,
-    flex: flex,
-    transition: transition,
-    transitionHover: transitionHover,
-    cursor: cursor
-  };
-
-  var styles = _objectSpread({}, generateStyleAttributes([dimensionProps, colorProps, spaceProps, shadowProps, radiusProps, orderProps, zIndexProps, transitionProps, aspectRatioProps, flexProps], allProps));
-
-  var propClassName = className ? className : '';
-  var classNames = [generateClassNameAttributes([spaceProps, colorProps, shadowProps, radiusProps, positionProps, overflowProps, transitionProps, cursorProps], allProps), propClassName].join(' ').replace(/\s+/g, ' ').trim();
+    radius: radius
+  }, _defineProperty(_generateClassNameAtt, "position", position), _defineProperty(_generateClassNameAtt, "overflow", overflow), _defineProperty(_generateClassNameAtt, "transition", transition), _defineProperty(_generateClassNameAtt, "transitionHover", transitionHover), _defineProperty(_generateClassNameAtt, "cursor", cursor), _defineProperty(_generateClassNameAtt, "alignSelf", alignSelf), _generateClassNameAtt)), propClassName].join(' ').replace(/\s+/g, ' ').trim();
   var Tag = tag;
   return ___EmotionJSX(Tag, _extends({
     ref: ref,

package/es/styles/utilities.js

@@ -1,17 +1,41 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.entries.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.regexp.exec.js";
 import { styleConfig } from '../utilities';
 import { propNameToShort } from '../utilities/style-config';
 
-var generateUtilityClasses = function generateUtilityClasses(propertySets) {
+var generateUtilityClassDeclarations = function generateUtilityClassDeclarations(propertySets) {
   var css = '';
   propertySets.forEach(function (set) {
     set.variables.forEach(function (variable) {
       set.props.forEach(function (prop) {
         var property = prop.property;
         var cssValue = set.valueTransformer ? set.valueTransformer(variable) : variable;
-        var hasHover = prop.modifier === 'hover';
+        var hasHover = prop.propName.includes('Hover');
 
         if (!hasHover) {
           css += "\n            .".concat(propNameToShort(prop.propName), "-").concat(variable, " {\n              ").concat(property, ": ").concat(cssValue, "\n            }");
@@ -26,25 +50,37 @@ var generateUtilityClasses = function generateUtilityClasses(propertySets) {
   return css;
 };
 
-var generateStyleClasses = function generateStyleClasses(propertySets) {
+var breakpoints = {
+  tab: 1169,
+  mob: 767
+};
+
+var generateStyleClassDeclarations = function generateStyleClassDeclarations(propertySets) {
   var css = '';
   propertySets.forEach(function (set) {
     set.props.forEach(function (prop) {
       var property = prop.property;
       var propName = prop.propName;
       var cssVar = "--".concat(propNameToShort(propName));
-      var hasHover = prop.modifier === 'hover';
+      var hasHover = prop.propName.includes('Hover');
 
       if (!hasHover) {
-        css += "\n          [style*=\"".concat(cssVar, ":\"] {\n            ").concat(property, ": var(").concat(cssVar, ")\n          }");
+        css += "[style*=\"".concat(cssVar, ":\"] {").concat(property, ": var(").concat(cssVar, ")}");
       }
 
       if (hasHover) {
-        css += "\n          [style*=\"".concat(cssVar, "\"]:hover {\n            ").concat(property, ": var(").concat(cssVar, ")\n          }");
+        css += "[style*=\"".concat(cssVar, "\"]:hover {").concat(property, ": var(").concat(cssVar, ")}");
       }
 
       if (set.isResponsive) {
-        css += "\n          [style*=\"".concat(cssVar, "-def\"] {\n            ").concat(property, ": var(").concat(cssVar, "-def)\n          }\n\n          @media (max-width: 1169px) {\n            [style*=\"").concat(cssVar, "-tab\"] {\n              ").concat(property, ": var(").concat(cssVar, "-tab);\n            }\n          }\n\n          @media (max-width: 767px) {\n            [style*=\"").concat(cssVar, "-mob\"] {\n              ").concat(property, ": var(").concat(cssVar, "-mob);\n            }\n          }\n        ");
+        css += "\n          [style*=\"".concat(cssVar, "-def\"] {").concat(property, ": var(").concat(cssVar, "-def)}\n        ");
+        Object.entries(breakpoints).forEach(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+              device = _ref2[0],
+              screenSize = _ref2[1];
+
+          css += "\n            @media (max-width: ".concat(screenSize, "px) {\n              [style*=\"").concat(cssVar, "-").concat(device, "\"] {").concat(property, ": var(").concat(cssVar, "-").concat(device, ")}\n            }\n          ");
+        });
       }
     });
   });
@@ -62,6 +98,12 @@ var spaceProps = styleConfig.spaceProps,
     dimensionProps = styleConfig.dimensionProps,
     aspectRatioProps = styleConfig.aspectRatioProps,
     orderProps = styleConfig.orderProps,
-    flexProps = styleConfig.flexProps;
-var utilities = "\n  ".concat(generateUtilityClasses([spaceProps, colorProps, shadowProps, radiusProps, positionProps, overflowProps, transitionProps, cursorProps]), ";\n\n  ").concat(generateStyleClasses([dimensionProps, spaceProps, colorProps, shadowProps, radiusProps, transitionProps, aspectRatioProps, orderProps, flexProps]), ";\n");
+    flexProps = styleConfig.flexProps,
+    sizeProps = styleConfig.sizeProps,
+    opacityProps = styleConfig.opacityProps,
+    alignSelfProps = styleConfig.alignSelfProps;
+var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radiusProps, transitionProps, sizeProps];
+var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, alignSelfProps]);
+var styleDeclarationProps = [].concat(classAndStyleDeclarationProps, [dimensionProps, aspectRatioProps, orderProps, flexProps, opacityProps]);
+var utilities = "\n  ".concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n  ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n");
 export default utilities;

package/es/utilities/attributes.js

@@ -1,14 +1,17 @@
+import "core-js/modules/es.object.values.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.concat.js";
 import { isObject } from './helpers';
-import { propNameToShort } from './style-config';
-export var generateStyleAttributes = function generateStyleAttributes(propsSets, allProps) {
+import { propNameToShort, styleConfig } from './style-config';
+export var generateStyleAttributes = function generateStyleAttributes(props) {
   var styles = {};
-  propsSets.forEach(function (propsSet) {
+  var styleConfigValues = Object.values(styleConfig);
+  styleConfigValues.forEach(function (propsSet) {
     propsSet.props.forEach(function (_ref) {
       var propName = _ref.propName;
-      var value = allProps[propName];
+      var value = props[propName];
       var hasVariable = propsSet.variableChecker ? propsSet.variableChecker(value) : false;
       var hasTransformer = propsSet.valueTransformer ? true : false;
       if (hasVariable) return;
@@ -18,34 +21,35 @@ export var generateStyleAttributes = function generateStyleAttributes(propsSets,
 
       if (!isObject(value)) {
         styles["--".concat(propNameShort)] = cssValue;
-      }
-
-      if (isObject(value)) {
+      } else {
         var def = value.default,
             mobile = value.mobile,
             tablet = value.tablet;
-        var defaultValueCss = hasTransformer ? propsSet.valueTransformer(def) : def;
-        var mobileValueCss = hasTransformer ? propsSet.valueTransformer(mobile) : mobile;
-        var tabletValueCss = hasTransformer ? propsSet.valueTransformer(tablet) : tablet;
-        styles["--".concat(propNameShort, "-def")] = defaultValueCss;
-        styles["--".concat(propNameShort, "-mob")] = mobileValueCss;
-        styles["--".concat(propNameShort, "-tab")] = tabletValueCss;
+        styles["--".concat(propNameShort, "-def")] = hasTransformer ? propsSet.valueTransformer(def) : def;
+        styles["--".concat(propNameShort, "-mob")] = hasTransformer ? propsSet.valueTransformer(mobile) : mobile;
+        styles["--".concat(propNameShort, "-tab")] = hasTransformer ? propsSet.valueTransformer(tablet) : tablet;
       }
     });
   });
   return styles;
 };
-export var generateClassNameAttributes = function generateClassNameAttributes(propsSets, allProps) {
+export var generateClassNameAttributes = function generateClassNameAttributes(props) {
   var classNames = [];
-  propsSets.forEach(function (propsSet) {
-    propsSet.props.forEach(function (_ref2) {
-      var propName = _ref2.propName;
-      var value = allProps[propName];
-      var hasVariable = propsSet.variableChecker ? propsSet.variableChecker(value) : false;
-      if (!hasVariable) return;
-      if (!value) return;
-      var className = "".concat(propNameToShort(propName), "-").concat(value);
-      classNames.push(className);
+  var propKeys = Object.keys(props);
+  var styleConfigValues = Object.values(styleConfig);
+  propKeys.forEach(function (prop) {
+    styleConfigValues.forEach(function (styleConfigItem) {
+      styleConfigItem.props.forEach(function (propItem) {
+        if (propItem.propName === prop) {
+          var propName = propItem.propName;
+          var value = props[propName];
+          var hasVariable = styleConfigItem.variableChecker ? styleConfigItem.variableChecker(value) : false;
+          if (!hasVariable) return;
+          if (!value) return;
+          var className = "".concat(propNameToShort(propName), "-").concat(value);
+          classNames.push(className);
+        }
+      });
     });
   });
   return classNames.join(' ');

package/es/utilities/style-config.js

@@ -27,15 +27,16 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import { cursors, overflows, positions } from '../types';
+import { alignSelfs, cursors, overflows, positions } from '../types';
 import { vars } from '../variables';
-import { getDimension, getSpace, isSpaceVar } from './responsive';
+import { getDimension, getSpace, getTextSize, isSpaceVar } from './responsive';
 import { getColor, getRadius, getShadow, getTransition, isColorVar, isRadiusVar, isShadowVar, isTrasitionVar } from './styles';
 var spaces = [].concat(_toConsumableArray(Object.keys(vars.spaces)), _toConsumableArray(Object.keys(vars.spaceUtils)));
 var colors = [].concat(_toConsumableArray(Object.keys(vars.colors)), _toConsumableArray(Object.keys(vars.colorUtils)));
 var shadows = Object.keys(vars.shadows);
 var radii = Object.keys(vars.radii);
 var transitions = [].concat(_toConsumableArray(Object.keys(vars.transitions)), _toConsumableArray(Object.keys(vars.transitionUtils)));
+var sizes = Object.keys(vars.texts);
 export var styleConfig = {
   spaceProps: {
     props: [{
@@ -131,7 +132,7 @@ export var styleConfig = {
       short: 'max-w'
     }, {
       propName: 'height',
-      property: 'max-width',
+      property: 'height',
       short: 'h'
     }, {
       propName: 'minHeight',
@@ -153,8 +154,7 @@ export var styleConfig = {
     }, {
       propName: 'colorHover',
       property: 'color',
-      modifier: 'hover',
-      short: 'c-hover'
+      short: 'c-h'
     }, {
       propName: 'backgroundColor',
       property: 'background-color',
@@ -162,8 +162,7 @@ export var styleConfig = {
     }, {
       propName: 'backgroundColorHover',
       property: 'background-color',
-      modifier: 'hover',
-      short: 'bgc-hover'
+      short: 'bgc-h'
     }],
     valueTransformer: getColor,
     variableChecker: isColorVar,
@@ -177,8 +176,7 @@ export var styleConfig = {
     }, {
       propName: 'shadowHover',
       property: 'box-shadow',
-      modifier: 'hover',
-      short: 'sh-hover'
+      short: 'sh-h'
     }],
     valueTransformer: getShadow,
     variableChecker: isShadowVar,
@@ -205,7 +203,7 @@ export var styleConfig = {
     props: [{
       propName: 'flex',
       property: 'flex',
-      short: 'flex'
+      short: 'flx'
     }],
     isResponsive: true
   },
@@ -231,15 +229,15 @@ export var styleConfig = {
     props: [{
       propName: 'overflow',
       property: 'overflow',
-      short: 'ovf'
+      short: 'of'
     }, {
       propName: 'overflowX',
       property: 'overflow-x',
-      short: 'ovf-x'
+      short: 'of-x'
     }, {
       propName: 'overflowY',
       property: 'overflow-y',
-      short: 'ovf-y'
+      short: 'of-y'
     }],
     variableChecker: function variableChecker(value) {
       return overflows.includes(value);
@@ -254,8 +252,7 @@ export var styleConfig = {
     }, {
       propName: 'transitionHover',
       property: 'transition',
-      modifier: 'hover',
-      short: 'tr-hover'
+      short: 'tr-h'
     }],
     valueTransformer: getTransition,
     variableChecker: isTrasitionVar,
@@ -278,6 +275,41 @@ export var styleConfig = {
       property: 'aspect-ratio',
       short: 'ar'
     }]
+  },
+  sizeProps: {
+    props: [{
+      propName: 'size',
+      property: 'font-size',
+      short: 'txt'
+    }],
+    isResponsive: true,
+    variables: sizes,
+    valueTransformer: getTextSize,
+    variableChecker: function variableChecker(value) {
+      return sizes.includes(value);
+    }
+  },
+  opacityProps: {
+    props: [{
+      propName: 'opacity',
+      property: 'opacity',
+      short: 'op'
+    }, {
+      propName: 'opacityHover',
+      property: 'opacity',
+      short: 'op-h'
+    }]
+  },
+  alignSelfProps: {
+    props: [{
+      propName: 'alignSelf',
+      property: 'align-self',
+      short: 'als'
+    }],
+    variables: alignSelfs,
+    variableChecker: function variableChecker(value) {
+      return alignSelfs.includes(value);
+    }
   }
 };
 export var propNameToShort = function propNameToShort(propName) {

package/package.json

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