@flodesk/grain 1.2.3 → 1.4.0

package/es/base-styles.css

@@ -3,13 +3,11 @@
 }
 
 :root {
-  --textIncrement: calc(0.2vw + 2px);
-
   --grn-text-s: calc(var(--grn-unit) * 1.625);
   --grn-text-m: calc(var(--grn-unit) * 1.875);
-  --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));
+  --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 {
@@ -29,8 +27,17 @@
 
 :root {
   --grn-color-body: hsl(0 0% 7%);
-  --grn-color-bodyDimmed: hsl(0 0% 7% / 40%);
+  --grn-color-bodyDimmed: hsl(0 0% 7% / 50%);
   --grn-color-primary: hsl(0 0% 7%);
+  
+  --grn-color-grey8: hsl(0 0% 7%);
+  --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%);
 }
 
 * {

package/es/components/text/index.js

@@ -6,29 +6,33 @@ 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 { textSizes, weights } from '../../variables';
 import PropTypes from 'prop-types';
 import React from "react";
-import { getTextSize } from '../../utilities';
 import styled from "@emotion/styled";
-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) {
+var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n"])), function (p) {
   return getTextSize(p.size);
 }, function (p) {
-  return p.weight;
+  return getWeight(p.weight);
+}, function (p) {
+  return getColor(p.color);
 });
 export var Text = function Text(_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;
+      weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
+      color = _ref.color;
   return /*#__PURE__*/React.createElement(Wrapper, {
     size: size,
-    weight: weight
+    weight: weight,
+    color: color
   }, children);
 };
 Text.propTypes = {
   size: PropTypes.oneOf(textSizes),
-  weight: PropTypes.oneOf(weights)
+  weight: PropTypes.oneOf(weights),
+  color: PropTypes.oneOfType([PropTypes.oneOf(weights), PropTypes.string])
 };

package/es/utilities/index.js

@@ -1,10 +1,23 @@
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.includes.js";
-import { textSizes } from "../components/text";
+import "core-js/modules/es.array.concat.js";
+import { allColors, colorVarPrefix, cssVarPrefix, textSizes, textVarPrefix, weightVarPrefix, weights } from "../variables";
+export var getColor = function getColor(color) {
+  if (allColors.includes(color)) {
+    return "var(".concat(cssVarPrefix).concat(colorVarPrefix).concat(color, ")");
+  }
+
+  return color;
+};
 export var getTextSize = function getTextSize(size) {
   if (textSizes.includes(size)) {
-    return "var(--grn-text-".concat(size, ")");
+    return "var(".concat(cssVarPrefix).concat(textVarPrefix).concat(size, ")");
   }
 
   return size;
+};
+export var getWeight = function getWeight(weight) {
+  if (weights.includes(weight)) {
+    return "var(".concat(cssVarPrefix).concat(weightVarPrefix).concat(weight, ")");
+  }
 };

package/es/variables/index.js

@@ -0,0 +1,42 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import "core-js/modules/es.array.reverse.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.regexp.exec.js";
+var greysAmount = 8;
+var greysArray = [];
+
+for (var step = 1; step < greysAmount + 1; step++) {
+  greysArray.push("grey" + step);
+}
+
+export var cssVarPrefix = "--grn-";
+export var spaceVarPrefix = "space-";
+export var weightVarPrefix = "weight-";
+export var textVarPrefix = "text-";
+export var colorVarPrefix = "color-";
+export var greys = greysArray.reverse();
+export var semanticColors = ["body", "bodyDimmed", "primary"];
+export var textSizes = ["s", "m", "l", "xl", "xxl"];
+export var spaces = ["xs", "s", "m", "l", "xl", "xxl"];
+export var weights = ["normal", "medium", "semiBold"];
+export var allColors = [].concat(_toConsumableArray(greys), semanticColors);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "1.2.3",
+  "version": "1.4.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",
@@ -47,6 +47,7 @@
     "eslint-config-next": "12.1.6",
     "next": "12.1.6",
     "react-live": "^3.1.0",
-    "semantic-release": "^19.0.2"
+    "semantic-release": "^19.0.2",
+    "vercel": "^25.1.0"
   }
 }