@flodesk/grain 2.4.6 → 2.5.0

package/README.md

@@ -14,6 +14,20 @@ npm install @flodesk/grain
 import "@flodesk/grain/es/styles/base.css";
 ```
 
+### Add text styles context
+
+Add `grn-context` class to a parent wrapper, this class sets dynamically the `line-height` and the `letter-spacing`. It can be added to a smaller UI section or to the page wrapper. Set it on as many wrappers as needed.
+
+In the future, once Grain is widely adopted, we will remove these classes and apply the text styles globally.
+
+```jsx
+<div className="some-wrapper grn-context">
+  <Text size="l">Content</Text>
+  // or
+  <div className="element-with-grain-styles">Content</div>
+</div>
+```
+
 ## Usage
 
 ### Component usage

package/es/components/button/index.js

@@ -0,0 +1,43 @@
+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"];
+
+var _templateObject, _templateObject2;
+
+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, getRadius, getSpace, getTextSize, getWeight } from '../../utilities';
+import { PropTypes } from 'prop-types';
+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"])));
+export var Button = function Button(_ref) {
+  var children = _ref.children,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
+      color = _ref.color,
+      tag = _ref.tag,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
+    size: size,
+    weight: weight,
+    color: color,
+    as: tag
+  }, props), /*#__PURE__*/React.createElement(ButtonText, null, children));
+};
+Button.propTypes = {};

package/es/components/index.js

@@ -1,2 +1,4 @@
 export { Text } from "./text";
-export { Box } from "./box";
+export { Box } from "./box";
+export { Button } from "./button";
+export { Input } from "./input";

package/es/components/input/index.js

@@ -0,0 +1,45 @@
+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 = ["value", "placeholder", "size"];
+
+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, getRadius, getSpace, getTextSize, getWeight } from '../../utilities';
+import { PropTypes } from 'prop-types';
+import React from "react";
+import styled from "@emotion/styled";
+import { types } from '../../types';
+var Wrapper = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  height: ", ";\n  padding: 0 ", ";\n  width: 100%;\n"])), function (p) {
+  return getTextSize(p.size);
+}, getRadius('m'), getColor('grey3'), function (p) {
+  return "var(--grn-textBoxHeight-".concat(p.size, ")");
+}, function (p) {
+  return "var(--grn-fieldTextBoxPaddingX-".concat(p.size, ")");
+});
+export var Input = function Input(_ref) {
+  var value = _ref.value,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? 'Placeholder' : _ref$placeholder,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
+    value: value,
+    placeholder: placeholder,
+    size: size
+  }, props));
+};
+Input.propTypes = {};

package/es/styles/base.css

@@ -1,18 +1,19 @@
 @import './variables.css';
+@import './components-variables.css';
 
 :root {
   --grn-letterSpacing-fixed: 1.3px;
   --grn-letterSpacing-relative: 0.07em;
   --grn-letterSpacing-global: calc(var(--grn-letterSpacing-fixed) - var(--grn-letterSpacing-relative));
 
-  --grn-lineHeight-fixed: 8.5px;
+  --grn-lineHeight-fixed: 7px;
   --grn-lineHeight-relative: 0.9em;
   --grn-lineHeight-global: calc(var(--grn-lineHeight-fixed) + var(--grn-lineHeight-relative));
   
   --grn-font-global: 'Beausite Classic', sans-serif;
 }
 
-* {
+.grn-context, .grn-context * {
   letter-spacing: var(--grn-letterSpacing-global);
   line-height: var(--grn-lineHeight-global);
 }

package/es/styles/components-variables.css

@@ -0,0 +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);
+}

package/es/styles/variables.css

@@ -26,8 +26,7 @@
 }
 
 :root {
-  --grn-radius-s: calc(var(--grn-unit) * 0.5);
-  --grn-radius-m: calc(var(--grn-unit) * 1);
+  --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);
 }
@@ -78,4 +77,4 @@
     var(--grn-shadowLayer-1),
     var(--grn-shadowLayer-4)
   ;
-}
+}

package/es/variables/index.js

@@ -21,7 +21,6 @@ export var vars = {
     semiBold: "semiBold"
   },
   radiuses: {
-    s: "s",
     m: "m",
     l: "l",
     xl: "xl"

package/package.json

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