@flodesk/grain 2.2.0 → 2.3.0

package/es/components/text/index.js

@@ -7,6 +7,7 @@ var _templateObject;
 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';
+import { PropTypes } from 'prop-types';
 import React from "react";
 import styled from "@emotion/styled";
 import { types } from '../../types';
@@ -23,15 +24,18 @@ export var Text = function Text(_ref) {
       size = _ref$size === void 0 ? 'm' : _ref$size,
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
-      color = _ref.color;
+      color = _ref.color,
+      tag = _ref.tag;
   return /*#__PURE__*/React.createElement(Wrapper, {
     size: size,
     weight: weight,
-    color: color
+    color: color,
+    as: tag
   }, children);
 };
 Text.propTypes = {
   size: types.textSize,
   weight: types.weight,
-  color: types.color
+  color: types.color,
+  tag: PropTypes.string
 };

package/es/styles/base.css

@@ -1,67 +1,20 @@
-:root {
-  --grn-unit: 8px;
-}
-
-: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);
-}
-
-:root {
-  --grn-weight-normal: 400;
-  --grn-weight-medium: 500;
-  --grn-weight-semiBold: 600;
-}
-
-:root {
-  --grn-space-xs: calc(var(--grn-unit) / 2);
-  --grn-space-s: calc(var(--grn-unit) * 1);
-  --grn-space-m: calc(var(--grn-unit) * 2);
-  --grn-space-l: calc(var(--grn-unit) * 3);
-  --grn-space-xl: calc(var(--grn-unit) * 5);
-  --grn-space-xxl: calc(var(--grn-unit) * 7);
-}
+@import './variables.css';
 
 :root {
-  --grn-radius-s: calc(var(--grn-unit) / 2);
-  --grn-radius-m: calc(var(--grn-unit) / 1.33);
-  --grn-radius-l: calc(var(--grn-unit) * 1.25);
-}
-
-:root {
-  --grey8-HSL: 0 0% 7%;
-
-  --grn-color-grey8: hsl(var(--grey8-HSL));
-  --grn-color-grey7: hsl(0 0% 20%);
-  --grn-color-grey6: hsl(0 0% 32%);
-  --grn-color-grey5: hsl(0 0% 44%);
-  --grn-color-grey4: hsl(0 0% 63%);
-  --grn-color-grey3: hsl(0 0% 78%);
-  --grn-color-grey2: hsl(0 0% 87%);
-  --grn-color-grey1: hsl(0 0% 96%);
+  --grn-letterSpacing-fixed: 1.3px;
+  --grn-letterSpacing-relative: 0.07em;
+  --grn-letterSpacing-global: calc(var(--grn-letterSpacing-fixed) - var(--grn-letterSpacing-relative));
 
-  --grn-color-blue: hsl(218 74% 54%);
-  --grn-color-red: hsl(6 66% 65%);
-
-  --grn-color-body: var(--grn-color-grey8);
-  --grn-color-bodyDimmed: hsl(var(--grey8-HSL) / 50%);
-  --grn-color-accent: var(--grn-color-grey8);
-  --grn-color-backgroundSecondary: hsl(0 0% 100%);
-  --grn-color-background: var(--grn-color-grey1);
-  --grn-color-overlay: hsl(var(--grey8-HSL) / 7%);
-  --grn-color-border: hsl(var(--grey8-HSL) / 9%);
-  --grn-color-selection: var(--grn-color-blue);
-  --grn-color-danger: var(--grn-color-red);
+  --grn-lineHeight-fixed: 5px;
+  --grn-lineHeight-relative: 1em;
+  --grn-lineHeight-global: calc(var(--grn-lineHeight-fixed) + var(--grn-lineHeight-relative));
+  
+  --grn-font-global: 'Beausite Classic', sans-serif;
 }
 
 * {
-  letter-spacing: calc(1.3px - 0.07em);
-  line-height: calc(5px + 1em);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: var(--grn-letterSpacing-global);
+  line-height: var(--grn-lineHeight-global);
 }
 
 *, *:before, *:after {
@@ -69,9 +22,11 @@
 } 
 
 body {
-  font-family: 'BeausiteClassic', sans-serif;
+  font-family: var(--grn-font-global);
   color: var(--grn-color-body);
   font-size: var(--grn-text-m);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 a {

package/es/styles/variables.css

@@ -0,0 +1,57 @@
+:root {
+  --grn-unit: 8px;
+}
+
+: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);
+}
+
+:root {
+  --grn-weight-normal: 400;
+  --grn-weight-medium: 500;
+  --grn-weight-semiBold: 600;
+}
+
+:root {
+  --grn-space-xs: calc(var(--grn-unit) / 2);
+  --grn-space-s: calc(var(--grn-unit) * 1);
+  --grn-space-m: calc(var(--grn-unit) * 2);
+  --grn-space-l: calc(var(--grn-unit) * 3);
+  --grn-space-xl: calc(var(--grn-unit) * 5);
+  --grn-space-xxl: calc(var(--grn-unit) * 7);
+}
+
+:root {
+  --grn-radius-s: calc(var(--grn-unit) / 1.333333);
+  --grn-radius-m: calc(var(--grn-unit) * 1.5);
+}
+
+:root {
+  --grn-color-grey8-HSL: 0 0% 7%;
+
+  --grn-color-grey8: hsl(var(--grn-color-grey8-HSL));
+  --grn-color-grey7: hsl(0 0% 20%);
+  --grn-color-grey6: hsl(0 0% 32%);
+  --grn-color-grey5: hsl(0 0% 44%);
+  --grn-color-grey4: hsl(0 0% 63%);
+  --grn-color-grey3: hsl(0 0% 78%);
+  --grn-color-grey2: hsl(0 0% 87%);
+  --grn-color-grey1: hsl(0 0% 96%);
+
+  --grn-color-blue: hsl(218 74% 54%);
+  --grn-color-red: hsl(6 66% 65%);
+
+  --grn-color-body: var(--grn-color-grey8);
+  --grn-color-bodyDimmed: hsl(var(--grn-color-grey8-HSL) / 50%);
+  --grn-color-accent: var(--grn-color-grey8);
+  --grn-color-backgroundSecondary: hsl(0 0% 100%);
+  --grn-color-background: var(--grn-color-grey1);
+  --grn-color-overlay: hsl(var(--grn-color-grey8-HSL) / 7%);
+  --grn-color-border: hsl(var(--grn-color-grey8-HSL) / 9%);
+  --grn-color-selection: var(--grn-color-blue);
+  --grn-color-danger: var(--grn-color-red);
+}

package/es/utilities/index.js

@@ -47,7 +47,6 @@ export var getSpace = function getSpace(space) {
   if (space === 0) return space;
   return u(space);
 };
-console.log("getSpace", getSpace(0));
 export var getBorder = function getBorder(borderSide) {
   var borderWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "1px";
   var borderColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "border";

package/es/variables/index.js

@@ -63,8 +63,7 @@ export var vars = {
   },
   radiuses: {
     s: "s",
-    m: "m",
-    l: "l"
+    m: "m"
   },
   colors: _objectSpread(_objectSpread(_objectSpread({}, greys), baseColors), semanticColors)
 };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@flodesk/grain",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",
   "license": "UNLICENSED",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "next dev",
+    "dev": "next dev -p 4000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",