@flodesk/grain 2.6.0 → 2.7.2

package/es/components/text/index.js

@@ -1,9 +1,19 @@
 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", "size", "weight", "color", "tag", "hasEllipsis", "ellipsisLines", "align"];
 
 var _templateObject;
 
+import "core-js/modules/es.object.assign.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; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import { getColor, getTextSize, getWeight } from '../../utilities';
@@ -11,12 +21,14 @@ import { PropTypes } from 'prop-types';
 import React from "react";
 import styled from "@emotion/styled";
 import { types } from '../../types';
-var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
+var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  text-align: ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return getTextSize(p.size);
 }, function (p) {
   return getWeight(p.weight);
 }, function (p) {
   return getColor(p.color);
+}, function (p) {
+  return p.align;
 }, function (p) {
   return p.hasEllipsis && "\n    overflow: hidden;\n    text-overflow: ellipsis;\n  ";
 }, function (p) {
@@ -33,20 +45,25 @@ export var Text = function Text(_ref) {
       color = _ref.color,
       tag = _ref.tag,
       hasEllipsis = _ref.hasEllipsis,
-      ellipsisLines = _ref.ellipsisLines;
-  return /*#__PURE__*/React.createElement(Wrapper, {
+      ellipsisLines = _ref.ellipsisLines,
+      align = _ref.align,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     size: size,
     weight: weight,
     color: color,
     as: tag,
     hasEllipsis: hasEllipsis,
-    ellipsisLines: ellipsisLines
-  }, children);
+    ellipsisLines: ellipsisLines,
+    align: align
+  }, props), children);
 };
 Text.propTypes = {
   size: types.textSize,
   weight: types.weight,
   color: types.color,
+  align: types.textAlign,
   tag: PropTypes.string,
   hasEllipsis: PropTypes.bool,
   ellipsisLines: PropTypes.number

package/es/styles/base.css

@@ -26,11 +26,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.grn-context a {
-  color: inherit;
-  text-decoration: none;
-}
-
 *, *:before, *:after {
   box-sizing: border-box;
 } 

package/es/styles/variables.css

@@ -3,11 +3,11 @@
 }
 
 :root {
-  --grn-text-s: calc(var(--grn-unit) * 1.625);
-  --grn-text-m: calc(var(--grn-unit) * 1.875);
-  --grn-text-l: calc(var(--grn-unit) * 2.5);
-  --grn-text-xl: calc(var(--grn-unit) * 3.125);
-  --grn-text-xxl: calc(var(--grn-unit) * 3.75);
+  --grn-text-s: 13px;
+  --grn-text-m: 15px;
+  --grn-text-l: 20px;
+  --grn-text-xl: 24px;
+  --grn-text-xxl: 30px;
 }
 
 :root {
@@ -26,9 +26,9 @@
 }
 
 :root {
-  --grn-radius-m: calc(var(--grn-unit) * 0.625);
-  --grn-radius-l: calc(var(--grn-unit) * 1.25);
-  --grn-radius-xl: calc(var(--grn-unit) * 2);
+  --grn-radius-m: 5px;
+  --grn-radius-l: 10px;
+  --grn-radius-xl: 15px;
 }
 
 :root {
@@ -58,23 +58,23 @@
 }
 
 :root {
-  --grn-shadowLayer-1: 0 calc(var(--grn-unit) * 0.125) calc(var(--grn-unit) * 0.5) hsl(var(--grn-color-grey8-HSL) / 7%);
-  --grn-shadowLayer-2: 0 calc(var(--grn-unit) * 0.25) calc(var(--grn-unit) * 1.5) hsl(var(--grn-color-grey8-HSL) / 7%);
-  --grn-shadowLayer-3: 0 calc(var(--grn-unit) * 0.25) calc(var(--grn-unit) * 2.5) hsl(var(--grn-color-grey8-HSL) / 10%);
-  --grn-shadowLayer-4: 0 calc(var(--grn-unit) * 0.25) calc(var(--grn-unit) * 7) hsl(var(--grn-color-grey8-HSL) / 10%);
-  
+  --c: hsl(var(--grn-color-grey8-HSL) / 4%);
+
   --grn-shadow-s:
-    var(--grn-shadowLayer-1),
-    var(--grn-shadowLayer-2)
+    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%)
   ;
   
   --grn-shadow-m:
-    var(--grn-shadowLayer-1),
-    var(--grn-shadowLayer-3)
+    var(--grn-shadow-s),
+    0 8px 16px hsl(0 0% 0% / 3%)
   ;
   
   --grn-shadow-l:
-    var(--grn-shadowLayer-1),
-    var(--grn-shadowLayer-4)
+    var(--grn-shadow-m),
+    0 16px 64px hsl(0 0% 0% / 2%),
+    0 32px 128px hsl(0 0% 0% / 2%)
   ;
-}
+}

package/es/types/index.js

@@ -8,5 +8,6 @@ export var types = {
   radius: PropTypes.oneOf(["s", "m", "l"]),
   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))
+  weight: PropTypes.oneOf(Object.keys(vars.weights)),
+  textAlign: PropTypes.oneOf(["left", "center", "right"])
 };

package/package.json

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