@flodesk/grain 10.10.3 → 10.10.5

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 = ["color", "colorHover", "backgroundColor", "backgroundColorHover", "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", "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", "borderXColor", "borderYColor", "borderWidth", "borderLeftWidth", "borderRightWidth", "borderTopWidth", "borderBottomWidth", "borderXWidth", "borderYWidth"];
+var _excluded = ["color", "colorHover", "backgroundColor", "backgroundColorHover", "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", "borderColor", "borderColorHover", "borderWidth", "borderWidthLeft", "borderWidthRight", "borderWidthTop", "borderWidthBottom", "borderWidthX", "borderWidthY"];
 
 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); }
 
@@ -86,19 +86,14 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className = _ref.className,
       style = _ref.style,
       borderColor = _ref.borderColor,
-      borderTopColor = _ref.borderTopColor,
-      borderRightColor = _ref.borderRightColor,
-      borderBottomColor = _ref.borderBottomColor,
-      borderLeftColor = _ref.borderLeftColor,
-      borderXColor = _ref.borderXColor,
-      borderYColor = _ref.borderYColor,
+      borderColorHover = _ref.borderColorHover,
       borderWidth = _ref.borderWidth,
-      borderLeftWidth = _ref.borderLeftWidth,
-      borderRightWidth = _ref.borderRightWidth,
-      borderTopWidth = _ref.borderTopWidth,
-      borderBottomWidth = _ref.borderBottomWidth,
-      borderXWidth = _ref.borderXWidth,
-      borderYWidth = _ref.borderYWidth,
+      borderWidthLeft = _ref.borderWidthLeft,
+      borderWidthRight = _ref.borderWidthRight,
+      borderWidthTop = _ref.borderWidthTop,
+      borderWidthBottom = _ref.borderWidthBottom,
+      borderWidthX = _ref.borderWidthX,
+      borderWidthY = _ref.borderWidthY,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
   var styles = _objectSpread({}, generateStyleAttributes({
@@ -138,12 +133,7 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     opacity: opacity,
     opacityHover: opacityHover,
     borderColor: borderColor,
-    borderTopColor: borderTopColor,
-    borderRightColor: borderRightColor,
-    borderBottomColor: borderBottomColor,
-    borderLeftColor: borderLeftColor,
-    borderXColor: borderXColor,
-    borderYColor: borderYColor
+    borderColorHover: borderColorHover
   }));
 
   var propClassName = className ? className : '';
@@ -174,7 +164,7 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     shadow: shadow,
     shadowHover: shadowHover,
     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), _defineProperty(_generateClassNameAtt, "borderColor", borderColor), _defineProperty(_generateClassNameAtt, "borderTopColor", borderTopColor), _defineProperty(_generateClassNameAtt, "borderRightColor", borderRightColor), _defineProperty(_generateClassNameAtt, "borderBottomColor", borderBottomColor), _defineProperty(_generateClassNameAtt, "borderLeftColor", borderLeftColor), _defineProperty(_generateClassNameAtt, "borderXColor", borderXColor), _defineProperty(_generateClassNameAtt, "borderYColor", borderYColor), _defineProperty(_generateClassNameAtt, "borderWidth", borderWidth), _defineProperty(_generateClassNameAtt, "borderLeftWidth", borderLeftWidth), _defineProperty(_generateClassNameAtt, "borderRightWidth", borderRightWidth), _defineProperty(_generateClassNameAtt, "borderTopWidth", borderTopWidth), _defineProperty(_generateClassNameAtt, "borderBottomWidth", borderBottomWidth), _defineProperty(_generateClassNameAtt, "borderXWidth", borderXWidth), _defineProperty(_generateClassNameAtt, "borderYWidth", borderYWidth), _generateClassNameAtt)), propClassName].join(' ').replace(/\s+/g, ' ').trim();
+  }, _defineProperty(_generateClassNameAtt, "position", position), _defineProperty(_generateClassNameAtt, "overflow", overflow), _defineProperty(_generateClassNameAtt, "transition", transition), _defineProperty(_generateClassNameAtt, "transitionHover", transitionHover), _defineProperty(_generateClassNameAtt, "cursor", cursor), _defineProperty(_generateClassNameAtt, "alignSelf", alignSelf), _defineProperty(_generateClassNameAtt, "borderColor", borderColor), _defineProperty(_generateClassNameAtt, "borderColorHover", borderColorHover), _defineProperty(_generateClassNameAtt, "borderWidth", borderWidth), _defineProperty(_generateClassNameAtt, "borderWidthLeft", borderWidthLeft), _defineProperty(_generateClassNameAtt, "borderWidthRight", borderWidthRight), _defineProperty(_generateClassNameAtt, "borderWidthTop", borderWidthTop), _defineProperty(_generateClassNameAtt, "borderWidthBottom", borderWidthBottom), _defineProperty(_generateClassNameAtt, "borderWidthX", borderWidthX), _defineProperty(_generateClassNameAtt, "borderWidthY", borderWidthY), _generateClassNameAtt)), propClassName].join(' ').replace(/\s+/g, ' ').trim();
   var Tag = tag;
   return ___EmotionJSX(Tag, _extends({
     ref: ref,
@@ -188,10 +178,15 @@ Box2.propTypes = {
   colorHover: types.color,
   backgroundColor: types.color,
   backgroundColorHover: types.color,
-  borderSide: types.side,
-  borderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   borderColor: types.color,
   borderColorHover: types.color,
+  borderWidth: types.borderWidth,
+  borderWidthLeft: types.borderWidth,
+  borderWidthRight: types.borderWidth,
+  borderWidthTop: types.borderWidth,
+  borderWidthBottom: types.borderWidth,
+  borderWidthX: types.borderWidth,
+  borderWidthY: types.borderWidth,
   width: types.responsiveDimension,
   minWidth: types.responsiveDimension,
   maxWidth: types.responsiveDimension,

package/es/styles/utilities.js

@@ -26,6 +26,7 @@ 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 { borderWidths } from '../types';
 import { styleConfig } from '../utilities';
 import { propNameToShort } from '../utilities/style-config';
 
@@ -37,14 +38,10 @@ var generateUtilityClassDeclarations = function generateUtilityClassDeclarations
         var property = prop.property;
         var cssValue = set.valueTransformer ? set.valueTransformer(variable) : variable;
         var hasHover = prop.propName.includes('Hover');
-
-        if (!hasHover) {
-          css += "\n            .".concat(propNameToShort(prop.propName), "-").concat(variable, " {\n              ").concat(property, ": ").concat(cssValue, "\n            }");
-        }
-
-        if (hasHover) {
-          css += "\n            .".concat(propNameToShort(prop.propName), "-").concat(variable, ":hover {\n              ").concat(property, ": ").concat(cssValue, "\n            }");
-        }
+        var selector = ".".concat(propNameToShort(prop.propName), "-").concat(variable);
+        var declaration = "{".concat(property, ": ").concat(cssValue, "}");
+        if (!hasHover) css += "".concat(selector, " ").concat(declaration);
+        if (hasHover) css += "".concat(selector, ":hover ").concat(declaration);
       });
     });
   });
@@ -64,14 +61,9 @@ var generateStyleClassDeclarations = function generateStyleClassDeclarations(pro
       var propName = prop.propName;
       var cssVar = "--".concat(propNameToShort(propName));
       var hasHover = prop.propName.includes('Hover');
-
-      if (!hasHover) {
-        css += "[style*=\"".concat(cssVar, ":\"] {").concat(property, ": var(").concat(cssVar, ")}");
-      }
-
-      if (hasHover) {
-        css += "[style*=\"".concat(cssVar, "\"]:hover {").concat(property, ": var(").concat(cssVar, ")}");
-      }
+      var declaration = "{".concat(property, ": var(").concat(cssVar, ")}");
+      if (!hasHover) css += "[style*=\"".concat(cssVar, ":\"] ").concat(declaration);
+      if (hasHover) css += "[style*=\"".concat(cssVar, ":\"]:hover ").concat(declaration);
 
       if (set.isResponsive) {
         css += "\n          [style*=\"".concat(cssVar, "-def\"] {").concat(property, ": var(").concat(cssVar, "-def)}\n        ");
@@ -124,11 +116,14 @@ var generateBorderStyle = function generateBorderStyle() {
         shortSide = _ref4[0],
         side = _ref4[1];
 
-    css += "\n        [class*=\"bd".concat(shortSide, "w-\"] { border-").concat(side, "-style: solid }\n      ");
+    css += "\n        [class*=\"bdw-".concat(shortSide, "\"] { border-").concat(side, "-style: solid }\n      ");
   }).join('');
-  css += "\n    [class*=\"bdw-\"] { border-style: solid }\n  ";
+  css += "\n    ".concat(borderWidths.map(function (w) {
+    return ".bdw-".concat(w);
+  }), " { border-style: solid }\n  ");
   return css;
 };
 
-var utilities = "\n  ".concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n  ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n  ").concat(generateBorderStyle(), "\n");
+var defaultBorderColor = "\n  [class*=\"bd\"] {\n    border-color: var(--grn-color-border);\n  }\n";
+var utilities = "\n  ".concat(defaultBorderColor, "\n  ").concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n  ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n  ").concat(generateBorderStyle(), "\n");
 export default utilities;

package/es/types.js

@@ -21,6 +21,7 @@ export var overflows = ['visible', 'hidden', 'scroll', 'auto'];
 export var positions = ['static', 'relative', 'fixed', 'absolute', 'sticky'];
 export var cursors = ['default', 'pointer'];
 export var sides = ['all', 'left', 'right', 'top', 'bottom', 'x', 'y'];
+export var borderWidths = ['1', '2', '3', '4'];
 export var types = {
   color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
   responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
@@ -61,7 +62,8 @@ export var types = {
   buttonTag: PropTypes.oneOf(['button', 'a', 'span']),
   hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   transition: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.transitions)), PropTypes.string]),
-  cursor: PropTypes.oneOf(cursors)
+  cursor: PropTypes.oneOf(cursors),
+  borderWidth: PropTypes.oneOf(borderWidths)
 };
 export var defaultProps = {
   menuMaxHeight: '468px',

package/es/utilities/style-config.js

@@ -1,7 +1,3 @@
-var _styleConfig;
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.includes.js";
@@ -18,7 +14,6 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.object.define-property.js";
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -42,7 +37,7 @@ 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 = (_styleConfig = {
+export var styleConfig = {
   spaceProps: {
     props: [{
       propName: 'padding',
@@ -326,79 +321,49 @@ export var styleConfig = (_styleConfig = {
       property: 'border-color',
       short: 'bdc-h'
     }],
-    valueTransformer: getColor
-  }
-}, _defineProperty(_styleConfig, "borderColorProps", {
-  props: [{
-    propName: 'borderColor',
-    property: 'border-color',
-    short: 'bdc'
-  }, {
-    propName: 'borderTopColor',
-    property: 'border-top-color',
-    short: 'bdtc'
-  }, {
-    propName: 'borderRightColor',
-    property: 'border-right-color',
-    short: 'bdrc'
-  }, {
-    propName: 'borderBottomColor',
-    property: 'border-bottom-color',
-    short: 'bdbc'
-  }, {
-    propName: 'borderLeftColor',
-    property: 'border-left-color',
-    short: 'bdlc'
-  }, {
-    propName: 'borderXColor',
-    property: 'border-inline-color',
-    short: 'bdxc'
-  }, {
-    propName: 'borderYColor',
-    property: 'border-block-color',
-    short: 'bdyc'
-  }],
-  valueTransformer: getColor,
-  variableChecker: isColorVar,
-  variables: colors
-}), _defineProperty(_styleConfig, "borderWidthProps", {
-  props: [{
-    propName: 'borderWidth',
-    property: 'border-width',
-    short: 'bdw'
-  }, {
-    propName: 'borderTopWidth',
-    property: 'border-top-width',
-    short: 'bdtw'
-  }, {
-    propName: 'borderRightWidth',
-    property: 'border-right-width',
-    short: 'bdrw'
-  }, {
-    propName: 'borderBottomWidth',
-    property: 'border-bottom-width',
-    short: 'bdbw'
-  }, {
-    propName: 'borderLeftWidth',
-    property: 'border-left-width',
-    short: 'bdlw'
-  }, {
-    propName: 'borderXWidth',
-    property: 'border-inline-width',
-    short: 'bdxw'
-  }, {
-    propName: 'borderYWidth',
-    property: 'border-block-width',
-    short: 'bdyw'
-  }],
-  valueTransformer: function valueTransformer(borderWidth) {
-    return "".concat(borderWidth, "px");
+    valueTransformer: getColor,
+    variableChecker: isColorVar,
+    variables: colors
   },
-  variables: ['1', '2', '3', '4'],
-  variableChecker: function variableChecker(value) {
-    return ['1', '2', '3', '4'].includes(value);
+  borderWidthProps: {
+    props: [{
+      propName: 'borderWidth',
+      property: 'border-width',
+      short: 'bdw'
+    }, {
+      propName: 'borderWidthTop',
+      property: 'border-top-width',
+      short: 'bdw-t'
+    }, {
+      propName: 'borderWidthRight',
+      property: 'border-right-width',
+      short: 'bdw-r'
+    }, {
+      propName: 'borderWidthBottom',
+      property: 'border-bottom-width',
+      short: 'bdw-b'
+    }, {
+      propName: 'borderWidthLeft',
+      property: 'border-left-width',
+      short: 'bdw-l'
+    }, {
+      propName: 'borderWidthX',
+      property: 'border-inline-width',
+      short: 'bdw-x'
+    }, {
+      propName: 'borderWidthY',
+      property: 'border-block-width',
+      short: 'bdw-y'
+    }],
+    valueTransformer: function valueTransformer(borderWidth) {
+      return "".concat(borderWidth, "px");
+    },
+    variables: ['1', '2', '3', '4'],
+    variableChecker: function variableChecker(value) {
+      return ['1', '2', '3', '4'].includes(value);
+    }
   }
-}), _styleConfig);
+};
 export var propNameToShort = function propNameToShort(propName) {
   var _prop$props$find;
 

package/package.json

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