@flodesk/grain 2.7.2 → 2.7.3

package/es/components/box/index.js

@@ -4,7 +4,7 @@ import "core-js/modules/es.object.define-properties.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
-var _excluded = ["children", "color", "backgroundColor", "borderSide", "borderWidth", "borderColor", "width", "height", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow"];
+var _excluded = ["children", "color", "backgroundColor", "borderSide", "borderWidth", "borderColor", "width", "height", "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;
 
@@ -20,6 +20,7 @@ import { getBorder, getColor, getRadius, getSpace, getShadow } from '../../utili
 import React from "react";
 import styled from "@emotion/styled";
 import { types } from '../../types';
+import { PropTypes } from 'prop-types';
 
 var getSpaceCss = function getSpaceCss(propertyName, propertyValue) {
   if (propertyValue || propertyValue === 0) {
@@ -27,8 +28,10 @@ var getSpaceCss = function getSpaceCss(propertyName, propertyValue) {
   }
 };
 
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n"])), function (p) {
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  position: ", ";\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n"])), function (p) {
   return getBorder(p.borderSide, p.borderWidth, p.borderColor);
+}, function (p) {
+  return getSpaceCss('padding', p.padding);
 }, function (p) {
   return getSpaceCss('padding-top', p.paddingTop);
 }, function (p) {
@@ -37,6 +40,8 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
   return getSpaceCss('padding-left', p.paddingLeft);
 }, function (p) {
   return getSpaceCss('padding-right', p.paddingRight);
+}, function (p) {
+  return getSpaceCss('margin', p.margin);
 }, function (p) {
   return getSpaceCss('margin-top', p.marginTop);
 }, function (p) {
@@ -54,7 +59,7 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
 }, function (p) {
   return getSpaceCss('right', p.right);
 }, function (p) {
-  return p.position && "position: ".concat(p.position);
+  return p.position;
 }, function (p) {
   return getColor(p.color);
 }, function (p) {
@@ -67,6 +72,10 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
   return getRadius(p.radius);
 }, function (p) {
   return getShadow(p.shadow);
+}, function (p) {
+  return p.overflow;
+}, function (p) {
+  return p.aspectRatio;
 });
 export var Box = function Box(_ref) {
   var children = _ref.children,
@@ -98,6 +107,8 @@ export var Box = function Box(_ref) {
       left = _ref.left,
       right = _ref.right,
       shadow = _ref.shadow,
+      overflow = _ref.overflow,
+      aspectRatio = _ref.aspectRatio,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
@@ -109,20 +120,24 @@ export var Box = function Box(_ref) {
     width: width,
     height: height,
     radius: radius,
-    paddingTop: padding || paddingY || paddingTop,
-    paddingBottom: padding || paddingY || paddingBottom,
-    paddingLeft: padding || paddingX || paddingLeft,
-    paddingRight: padding || paddingX || paddingRight,
-    marginTop: margin || marginY || marginTop,
-    marginBottom: margin || marginY || marginBottom,
-    marginLeft: margin || marginX || marginLeft,
-    marginRight: margin || marginX || marginRight,
+    padding: padding,
+    paddingTop: paddingY || paddingTop,
+    paddingBottom: paddingY || paddingBottom,
+    paddingLeft: paddingX || paddingLeft,
+    paddingRight: paddingX || paddingRight,
+    margin: margin,
+    marginTop: marginY || marginTop,
+    marginBottom: marginY || marginBottom,
+    marginLeft: marginX || marginLeft,
+    marginRight: marginX || marginRight,
     position: position,
     top: top,
     bottom: bottom,
     left: left,
     right: right,
-    shadow: shadow
+    shadow: shadow,
+    overflow: overflow,
+    aspectRatio: aspectRatio
   }, props), children);
 };
 Box.propTypes = {
@@ -149,5 +164,7 @@ Box.propTypes = {
   top: types.space,
   bottom: types.space,
   left: types.space,
-  right: types.space
+  right: types.space,
+  overflow: types.overflow,
+  aspectRatio: PropTypes.string
 };

package/es/components/button/index.js

@@ -16,13 +16,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-import { getColor, getRadius, getSpace, getTextSize, getWeight } from '../../utilities';
-import { PropTypes } from 'prop-types';
+import { getColor, getRadius, getTextSize, getWeight } from '../../utilities';
 import React from "react";
 import styled from "@emotion/styled";
-import { types } from '../../types';
-var Wrapper = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: ", ";\n  font-weight: ", ";\n  cursor: pointer;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 0.34em;\n  height: var(--grn-textBoxHeight);\n  padding: 0 var(--grn-buttonTextBoxPaddingX);\n"])), getTextSize('m'), getWeight('medium'), getColor('body'), getColor('white'));
-var ButtonText = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  top: -0.3px;\n"])));
+var Wrapper = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: ", ";\n  font-weight: ", ";\n  cursor: pointer;\n  background-color: ", ";\n  color: ", ";\n  border-radius: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-buttonTextBoxPaddingX-m);\n"])), getTextSize('m'), getWeight('medium'), getColor('body'), getColor('white'), getRadius('m'));
+var ButtonText = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  --opticalCompensation: -0.3px;\n\n  position: relative;\n  top: var(--opticalCompensation);\n"])));
 export var Button = function Button(_ref) {
   var children = _ref.children,
       _ref$size = _ref.size,

package/es/styles/components-variables.css

@@ -1,9 +1,9 @@
 :root {
   --grn-textBoxHeight-s: calc(var(--grn-unit) * 3.5);
   --grn-textBoxHeight-m: calc(var(--grn-unit) * 5);
-
-  --grn-buttonTextBoxPaddingX: calc(var(--grn-textBoxHeight) / 2);
-
+  
   --grn-fieldTextBoxPaddingX-s: calc(var(--grn-unit) * 1);
   --grn-fieldTextBoxPaddingX-m: calc(var(--grn-unit) * 1.5);
+  
+  --grn-buttonTextBoxPaddingX-m: calc(var(--grn-unit) * 2.5);
 }

package/es/styles/variables.css

@@ -41,13 +41,13 @@
   --grn-color-grey4: hsl(0 0% 63%);
   --grn-color-grey3: hsl(0 0% 78%);
   --grn-color-grey2: hsl(0 0% 87%);
-  --grn-color-grey1: hsl(0 0% 96%);
+  --grn-color-grey1: hsl(0 0% 98%);
 
   --grn-color-blue: hsl(218 74% 54%);
   --grn-color-red: hsl(6 66% 65%);
 
   --grn-color-body: var(--grn-color-grey8);
-  --grn-color-bodyDimmed: hsl(var(--grn-color-grey8-HSL) / 60%);
+  --grn-color-bodyDimmed: hsl(var(--grn-color-grey8-HSL) / 50%);
   --grn-color-accent: var(--grn-color-grey8);
   --grn-color-backgroundSecondary: hsl(0 0% 100%);
   --grn-color-background: var(--grn-color-grey1);
@@ -58,23 +58,22 @@
 }
 
 :root {
-  --c: hsl(var(--grn-color-grey8-HSL) / 4%);
-
   --grn-shadow-s:
-    0 0px 1px hsl(0 0% 0% / 6%),
-    0 1px 2px hsl(0 0% 0% / 5%),
-    0 2px 4px hsl(0 0% 0% / 3%),
-    0 4px 8px hsl(0 0% 0% / 3%)
+    0 0px 2px hsl(0 0% 0% / 6%),
+    0 1px 4px hsl(0 0% 0% / 3%),
+    0 2px 8px hsl(0 0% 0% / 2%),
+    0 4px 16px hsl(0 0% 0% / 2%)
   ;
   
   --grn-shadow-m:
-    var(--grn-shadow-s),
-    0 8px 16px hsl(0 0% 0% / 3%)
+    var(--grn-shadow-s), 
+    0 8px 32px hsl(0 0% 0% / 4%)
   ;
   
   --grn-shadow-l:
     var(--grn-shadow-m),
-    0 16px 64px hsl(0 0% 0% / 2%),
-    0 32px 128px hsl(0 0% 0% / 2%)
+    0 16px 64px hsl(0 0% 0% / 4%),
+    0 32px 128px hsl(0 0% 0% / 5%),
+    0 64px 128px -32px hsl(0 0% 0% / 5%)
   ;
 }

package/es/types/index.js

@@ -5,9 +5,10 @@ export var types = {
   color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
   space: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string]),
   side: PropTypes.oneOf(["all", "left", "right", "top", "bottom", "x", "y"]),
-  radius: PropTypes.oneOf(["s", "m", "l"]),
+  radius: PropTypes.oneOfType([PropTypes.oneOf(["s", "m", "l"]), PropTypes.string]),
   position: PropTypes.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
   textSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.textSizes)), PropTypes.number, PropTypes.string]),
   weight: PropTypes.oneOf(Object.keys(vars.weights)),
-  textAlign: PropTypes.oneOf(["left", "center", "right"])
+  textAlign: PropTypes.oneOf(["left", "center", "right"]),
+  overflow: PropTypes.oneOf(["visible", "hidden", "scroll", "auto"])
 };

package/es/utilities/index.js

@@ -57,6 +57,10 @@ export var getRadius = function getRadius(radius) {
   if (radius in vars.radiuses) {
     return getCssVar("radius", radius);
   }
+
+  if (typeof radius === "string") {
+    return radius;
+  }
 };
 export var getSpace = function getSpace(space) {
   if (isNaN(space)) {

package/package.json

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