@flodesk/grain 5.3.2 → 5.4.2

package/es/components/arrange.js

@@ -68,13 +68,13 @@ export var Arrange = function Arrange(_ref) {
   }, props), children);
 };
 Arrange.propTypes = {
-  gap: types.space,
-  columns: types.columns,
+  gap: types.responsiveSpace,
+  columns: types.responsiveColumns,
   autoFlow: types.autoFlow,
   alignItems: types.gridItemsAlignment,
   justifyItems: types.gridItemsAlignment,
   justifyContent: types.gridContentPosition,
   alignContent: types.gridContentPosition,
-  width: types.dimension,
-  height: types.dimension
+  width: types.responsiveDimension,
+  height: types.responsiveDimension
 };

package/es/components/box.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", "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 _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", "zIndex"];
 
 var _templateObject;
 
@@ -21,7 +21,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { types } from '../types';
 import PropTypes from 'prop-types';
-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  ", ";\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) {
+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  ", ";\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  ", ";\n"])), function (p) {
   return getBorder(p.borderSide, p.borderWidth, p.borderColor);
 }, function (p) {
   return getResponsiveSpace('padding', p.padding);
@@ -77,6 +77,8 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
   return p.overflow;
 }, function (p) {
   return p.aspectRatio;
+}, function (p) {
+  return p.zIndex && "z-index: ".concat(p.zIndex);
 });
 export var Box = function Box(_ref) {
   var children = _ref.children,
@@ -116,6 +118,7 @@ export var Box = function Box(_ref) {
       shadow = _ref.shadow,
       overflow = _ref.overflow,
       aspectRatio = _ref.aspectRatio,
+      zIndex = _ref.zIndex,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
@@ -148,7 +151,8 @@ export var Box = function Box(_ref) {
     right: right,
     shadow: shadow,
     overflow: overflow,
-    aspectRatio: aspectRatio
+    aspectRatio: aspectRatio,
+    zIndex: zIndex
   }, props), children);
 };
 Box.propTypes = {
@@ -157,33 +161,34 @@ Box.propTypes = {
   borderSide: types.side,
   borderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   borderColor: types.color,
-  width: types.dimension,
-  minWidth: types.dimension,
-  maxWidth: types.dimension,
-  height: types.dimension,
-  minHeight: types.dimension,
-  maxHeight: types.dimension,
+  width: types.responsiveDimension,
+  minWidth: types.responsiveDimension,
+  maxWidth: types.responsiveDimension,
+  height: types.responsiveDimension,
+  minHeight: types.responsiveDimension,
+  maxHeight: types.responsiveDimension,
   radius: types.radius,
   shadow: types.shadow,
-  padding: types.space,
-  paddingTop: types.space,
-  paddingBottom: types.space,
-  paddingLeft: types.space,
-  paddingRight: types.space,
-  paddingX: types.space,
-  paddingY: types.space,
-  margin: types.space,
-  marginTop: types.space,
-  marginBottom: types.space,
-  marginLeft: types.space,
-  marginRight: types.space,
-  marginX: types.space,
-  marginY: types.space,
+  padding: types.responsiveSpace,
+  paddingTop: types.responsiveSpace,
+  paddingBottom: types.responsiveSpace,
+  paddingLeft: types.responsiveSpace,
+  paddingRight: types.responsiveSpace,
+  paddingX: types.responsiveSpace,
+  paddingY: types.responsiveSpace,
+  margin: types.responsiveSpace,
+  marginTop: types.responsiveSpace,
+  marginBottom: types.responsiveSpace,
+  marginLeft: types.responsiveSpace,
+  marginRight: types.responsiveSpace,
+  marginX: types.responsiveSpace,
+  marginY: types.responsiveSpace,
   position: types.position,
-  top: types.space,
-  bottom: types.space,
-  left: types.space,
-  right: types.space,
+  top: types.responsiveSpace,
+  bottom: types.responsiveSpace,
+  left: types.responsiveSpace,
+  right: types.responsiveSpace,
   overflow: types.overflow,
-  aspectRatio: PropTypes.string
+  aspectRatio: PropTypes.string,
+  zIndex: types.zIndex
 };

package/es/components/button.js

@@ -1,6 +1,7 @@
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.object.freeze.js";
 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", "variant", "isDisabled", "icon", "hasFullWidth", "hasSpinner"];
@@ -8,7 +9,6 @@ var _excluded = ["children", "variant", "isDisabled", "icon", "hasFullWidth", "h
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import "core-js/modules/es.object.assign.js";
-import "core-js/modules/es.object.keys.js";
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -24,16 +24,25 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { transitions } from '../foundational';
 import { Spinner } from './spinner';
-var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-paddingX-m: 16px;\n  --grn-borderColor: var(--grn-color-fade4);\n  --grn-borderColor-hover: var(--grn-color-fade6);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
+var accentCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: white;\n  background-color: ", ";\n  border-color: transparent;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), getColor('accent'), getColor('grey7'), getColor('grey6'));
+var variables = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  --grn-paddingX-m: 16px;\n  --grn-borderColor: var(--grn-color-fade4);\n  --grn-borderColor-hover: var(--grn-color-fade6);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
 var variants = {
-  neutral: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: inherit;\n    background-color: transparent;\n    border-color: var(--grn-borderColor);\n\n    &:hover {\n      border-color: var(--grn-borderColor-hover);\n    }\n    &:active {\n      border-color: var(--grn-borderColor-active);\n    }\n  "]))),
-  primary: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    color: white;\n    background-color: ", ";\n    border-color: transparent;\n\n    &:hover {\n      background-color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n    }\n  "])), getColor('accent'), getColor('grey7'), getColor('grey6'))
+  neutral: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    color: inherit;\n    background-color: transparent;\n    border-color: var(--grn-borderColor);\n\n    &:hover {\n      border-color: var(--grn-borderColor-hover);\n    }\n    &:active {\n      border-color: var(--grn-borderColor-active);\n    }\n  "]))),
+  primary: accentCss,
+  accent: accentCss
 };
 var Wrapper = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-paddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n\n  ", ";\n  ", ";\n\n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n    border-color: transparent;\n    cursor: default;\n  }\n"])), variables, transitions, getWeight('medium'), getRadius('s'), function (p) {
   return !p.isDisabled && variants[p.variant];
 }, function (p) {
   return p.hasFullWidth && "width: 100%";
 }, getColor('disabledContent'), getColor('disabledBackground'));
+
+var checkDeprecatedVariant = function checkDeprecatedVariant(variant) {
+  if (variant === 'primary') {
+    console.warn('Grain: The variant `primary` name has changed, use `accent` instead.');
+  }
+};
+
 export var Button = function Button(_ref) {
   var children = _ref.children,
       _ref$variant = _ref.variant,
@@ -44,6 +53,7 @@ export var Button = function Button(_ref) {
       hasSpinner = _ref.hasSpinner,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  checkDeprecatedVariant(variant);
   return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     variant: variant,
     disabled: isDisabled,
@@ -60,7 +70,7 @@ export var Button = function Button(_ref) {
 Button.propTypes = {
   children: PropTypes.node,
   icon: PropTypes.node,
-  variant: PropTypes.oneOf(Object.keys(variants)),
+  variant: PropTypes.oneOf(['neutral', 'accent']),
   onClick: PropTypes.func,
   isDisabled: PropTypes.bool,
   hasFullWidth: PropTypes.bool,

package/es/components/stack.js

@@ -35,5 +35,5 @@ export var Stack = function Stack(_ref) {
 };
 Stack.propTypes = {
   children: PropTypes.node,
-  gap: types.space
+  gap: types.responsiveSpace
 };

package/es/components/text.js

@@ -61,7 +61,7 @@ export var Text = function Text(_ref) {
   }, props), children);
 };
 Text.propTypes = {
-  size: types.textSize,
+  size: types.responsiveTextSize,
   weight: types.weight,
   color: types.color,
   align: types.textAlign,

package/es/styles/variables.css

@@ -5,7 +5,7 @@
 :root {
   --grn-text-s: 12px;
   --grn-text-m: 14px;
-  --grn-text-l: 20px;
+  --grn-text-l: 18px;
   --grn-text-xl: 24px;
   --grn-text-xxl: 30px;
 }
@@ -96,16 +96,16 @@
     0 2px 8px hsl(0 0% 0% / 2%),
     0 4px 16px hsl(0 0% 0% / 2%)
   ;
-  
+
   --grn-shadow-m:
-    var(--grn-shadow-s), 
+    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% / 4%),
     0 32px 128px hsl(0 0% 0% / 5%),
     0 64px 128px -32px hsl(0 0% 0% / 5%)
   ;
-}
+}

package/es/types.js

@@ -6,22 +6,24 @@ export var gridItemsAlignments = ['start', 'end', 'center', 'stretch'];
 export var autoFlows = ['column', 'row'];
 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, PropTypes.object]),
-  dimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
+  responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
+  dimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  responsiveDimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
   side: PropTypes.oneOf(['all', 'left', 'right', 'top', 'bottom', 'x', 'y']),
   radius: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.radii)), PropTypes.string, PropTypes.number]),
   shadow: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.shadows)), PropTypes.string]),
   position: PropTypes.oneOf(['static', 'relative', 'fixed', 'absolute', 'sticky']),
-  textSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.texts)), PropTypes.string, PropTypes.object]),
+  responsiveTextSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.texts)), PropTypes.string, PropTypes.object]),
   iconSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.icons)), PropTypes.number, PropTypes.string]),
   weight: PropTypes.oneOf(Object.keys(vars.weights)),
   textAlign: PropTypes.oneOf(['left', 'center', 'right']),
   overflow: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto']),
   fieldSize: PropTypes.oneOf(['s', 'm']),
   textTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span']),
-  columns: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  responsiveColumns: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   autoFlow: PropTypes.oneOf(autoFlows),
   gridItemsAlignment: PropTypes.oneOf(gridItemsAlignments),
   gridContentPosition: PropTypes.oneOf(gridContentPositions),
-  icon: PropTypes.node
+  icon: PropTypes.node,
+  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };

package/package.json

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