@flodesk/grain 2.2.0 → 2.3.2

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/index.js

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

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

@@ -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,7 +27,7 @@ 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);
   }
 
@@ -47,7 +62,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

@@ -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",
@@ -63,8 +22,33 @@ export var vars = {
   },
   radiuses: {
     s: "s",
-    m: "m",
-    l: "l"
+    m: "m"
   },
-  colors: _objectSpread(_objectSpread(_objectSpread({}, greys), baseColors), semanticColors)
+  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,13 +1,13 @@
 {
   "name": "@flodesk/grain",
-  "version": "2.2.0",
+  "version": "2.3.2",
   "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",