@flodesk/grain 2.3.0 → 2.4.0

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"];
+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 _templateObject;
 
@@ -16,7 +16,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.object.assign.js";
-import { getBorder, getColor, getRadius, getSpace } from '../../utilities';
+import { getBorder, getColor, getRadius, getSpace, getShadow } from '../../utilities';
 import React from "react";
 import styled from "@emotion/styled";
 import { types } from '../../types';
@@ -27,7 +27,7 @@ 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"])), 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  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n"])), function (p) {
   return getBorder(p.borderSide, p.borderWidth, p.borderColor);
 }, function (p) {
   return getSpaceCss('padding-top', p.paddingTop);
@@ -65,6 +65,8 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
   return getSpace(p.height);
 }, function (p) {
   return getRadius(p.radius);
+}, function (p) {
+  return getShadow(p.shadow);
 });
 export var Box = function Box(_ref) {
   var children = _ref.children,
@@ -95,6 +97,7 @@ export var Box = function Box(_ref) {
       bottom = _ref.bottom,
       left = _ref.left,
       right = _ref.right,
+      shadow = _ref.shadow,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
@@ -118,7 +121,8 @@ export var Box = function Box(_ref) {
     top: top,
     bottom: bottom,
     left: left,
-    right: right
+    right: right,
+    shadow: shadow
   }, props), children);
 };
 Box.propTypes = {

package/es/index.js

@@ -1 +1,2 @@
-export * from "./components";
+export * from "./components";
+export { vars } from "./variables";

package/es/styles/variables.css

@@ -54,4 +54,27 @@
   --grn-color-border: hsl(var(--grn-color-grey8-HSL) / 9%);
   --grn-color-selection: var(--grn-color-blue);
   --grn-color-danger: var(--grn-color-red);
+}
+
+:root {
+  --grn-shadowLayer-border: 0 1px 6px hsl(var(--grn-color-grey8-HSL) / 10%);
+  --grn-shadowLayer-low: 0 2px 16px hsl(var(--grn-color-grey8-HSL) / 7%);
+  --grn-shadowLayer-medium: 0 2px 24px hsl(var(--grn-color-grey8-HSL) / 12%);
+  --grn-shadowLayer-high: 0 2px 32px hsl(var(--grn-color-grey8-HSL) / 20%);
+  
+
+  --grn-shadow-s:
+    var(--grn-shadowLayer-border),
+    var(--grn-shadowLayer-low)
+  ;
+  
+  --grn-shadow-m:
+    var(--grn-shadowLayer-border),
+    var(--grn-shadowLayer-medium)
+  ;
+  
+  --grn-shadow-l:
+    var(--grn-shadowLayer-border),
+    var(--grn-shadowLayer-high)
+  ;
 }

package/es/utilities/index.js

@@ -1,4 +1,19 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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.define-property.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+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 { grnPrefix, vars } from "../variables";
 export var getCssVarCore = function getCssVarCore(type, value) {
   return "".concat(grnPrefix).concat(type, "-").concat(value);
@@ -12,12 +27,19 @@ var u = function u(amount) {
 };
 
 export var getColor = function getColor(color) {
-  if (color in vars.colors) {
+  if (color in _objectSpread(_objectSpread(_objectSpread({}, vars.colors.baseColors), vars.colors.greys), vars.colors.semanticColors)) {
     return getCssVar("color", color);
   }
 
   return color;
 };
+export var getShadow = function getShadow(shadow) {
+  if (shadow in vars.shadows) {
+    return getCssVar("shadow", shadow);
+  }
+
+  return shadow;
+};
 export var getTextSize = function getTextSize(size) {
   if (size in vars.textSizes) {
     return getCssVar("text", size);

package/es/variables/index.js

@@ -1,45 +1,4 @@
-import "core-js/modules/es.object.define-property.js";
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-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";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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; }
-
 export var grnPrefix = "--grn-";
-export var greys = {
-  grey8: "grey8",
-  grey7: "grey7",
-  grey6: "grey6",
-  grey5: "grey5",
-  grey4: "grey4",
-  grey3: "grey3",
-  grey2: "grey2",
-  grey1: "grey1"
-};
-export var semanticColors = {
-  body: "body",
-  bodyDimmed: "bodyDimmed",
-  accent: "accent",
-  backgroundSecondary: "backgroundSecondary",
-  background: "background",
-  overlay: "overlay",
-  border: "border",
-  selection: "selection",
-  danger: "danger"
-};
-export var baseColors = {
-  blue: "blue",
-  red: "red"
-};
 export var vars = {
   textSizes: {
     s: "s",
@@ -65,5 +24,36 @@ export var vars = {
     s: "s",
     m: "m"
   },
-  colors: _objectSpread(_objectSpread(_objectSpread({}, greys), baseColors), semanticColors)
+  shadows: {
+    s: "s",
+    m: "m",
+    l: "l"
+  },
+  colors: {
+    greys: {
+      grey8: "grey8",
+      grey7: "grey7",
+      grey6: "grey6",
+      grey5: "grey5",
+      grey4: "grey4",
+      grey3: "grey3",
+      grey2: "grey2",
+      grey1: "grey1"
+    },
+    baseColors: {
+      blue: "blue",
+      red: "red"
+    },
+    semanticColors: {
+      body: "body",
+      bodyDimmed: "bodyDimmed",
+      accent: "accent",
+      backgroundSecondary: "backgroundSecondary",
+      background: "background",
+      overlay: "overlay",
+      border: "border",
+      selection: "selection",
+      danger: "danger"
+    }
+  }
 };

package/package.json

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