@flodesk/grain 1.1.3 → 1.2.0

package/es/base-styles.css

@@ -1,20 +1,41 @@
 :root {
-  --base: 15px;
-  --ratio: calc(0.2vw + 2px);
+  --baseTextSize: 15px;
+  --textIncrement: calc(0.2vw + 2px);
 
   --grn-text-s: 13px;
-  --grn-text-m: var(--base);
-  --grn-text-l: calc(var(--grn-text-m) + var(--ratio));
-  --grn-text-xl: calc(var(--grn-text-l) + var(--ratio));
-  --grn-text-xxl: calc(var(--grn-text-xl) + var(--ratio));
+  --grn-text-m: var(--baseTextSize);
+  --grn-text-l: calc(var(--grn-text-m) + var(--textIncrement));
+  --grn-text-xl: calc(var(--grn-text-l) + var(--textIncrement));
+  --grn-text-xxl: calc(var(--grn-text-xl) + var(--textIncrement));
+}
 
+:root {
   --grn-weight-normal: 400;
+  --grn-weight-medium: 500;
   --grn-weight-semiBold: 600;
 }
 
+:root {
+  --grn-space-xs: 4px;
+  --grn-space-s: 8px;
+  --grn-space-m: 16px;
+  --grn-space-l: 24px;
+  --grn-space-xl: 40px;
+  --grn-space-xxl: 56px;
+}
+
 * {
   letter-spacing: calc(1.3px - 0.07em);
   line-height: calc(5px + 1em);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: 'BeausiteClassic';
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
 }

package/es/components/index.js

@@ -1,3 +1 @@
-export { TestComponent } from "./test-component";
-export { AnotherTestComponent } from "./another-test-component";
 export { Text } from "./text";

package/es/components/text/index.js

@@ -4,17 +4,16 @@ import "core-js/modules/es.object.define-properties.js";
 
 var _templateObject;
 
-import "core-js/modules/es.array.includes.js";
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import PropTypes from 'prop-types';
 import React from "react";
+import { getTextSize } from '../../utilities';
 import styled from "@emotion/styled";
-var sizes = ['s', 'm', 'l', 'xl', 'xxl'];
-var weights = ['normal', 'semiBold'];
+export var textSizes = ['s', 'm', 'l', 'xl', 'xxl'];
+export var weights = ['normal', 'medium', 'semiBold'];
 var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: ", ";\n  font-weight: var(--grn-weight-", ");\n"])), function (p) {
-  return sizes.includes(p.size) ? "var(--grn-text-".concat(p.size, ")") : p.size;
+  return getTextSize(p.size);
 }, function (p) {
   return p.weight;
 });
@@ -30,6 +29,6 @@ export var Text = function Text(_ref) {
   }, children);
 };
 Text.propTypes = {
-  size: PropTypes.oneOf(sizes),
+  size: PropTypes.oneOf(textSizes),
   weight: PropTypes.oneOf(weights)
 };

package/es/utilities/index.js

@@ -0,0 +1,10 @@
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import { textSizes } from "../components/text";
+export var getTextSize = function getTextSize(size) {
+  if (textSizes.includes(size)) {
+    return "var(--grn-text-".concat(size, ")");
+  }
+
+  return size;
+};

package/package.json

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

package/es/components/another-test-component/index.js

@@ -1,5 +0,0 @@
-import React from "react";
-export var AnotherTestComponent = function AnotherTestComponent(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("h1", null, children);
-};

package/es/components/test-component/index.js

@@ -1,5 +0,0 @@
-import React from "react";
-export var TestComponent = function TestComponent(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("button", null, children);
-};