@flodesk/grain 1.2.4 → 1.5.0

package/es/base-styles.css

@@ -26,9 +26,21 @@
 }
 
 :root {
-  --grn-color-body: hsl(0 0% 7%);
-  --grn-color-bodyDimmed: hsl(0 0% 7% / 40%);
-  --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%);
+
+  --grn-color-body: var(--grn-color-grey8);
+  --grn-color-bodyDimmed: hsl(0 0% 7% / 50%);
+  --grn-color-primary: var(--grn-color-grey8);
+  --grn-color-backgroundSecondary: hsl(0 0% 100%);
+  --grn-color-background: var(--grn-color-grey1);
+  --grn-color-border: hsl(0 0% 7% / 15%);
 }
 
 * {
@@ -43,7 +55,7 @@
 } 
 
 body {
-  font-family: 'BeausiteClassic';
+  font-family: 'BeausiteClassic', sans-serif;
   color: var(--grn-color-body);
   font-size: var(--grn-text-m);
 }

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 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) {
+import { varOptions } from '../../variables';
+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)
+  size: PropTypes.oneOf(varOptions.textSizes),
+  weight: PropTypes.oneOf(varOptions.weights),
+  color: PropTypes.oneOfType([PropTypes.oneOf(varOptions.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 { grnPrefix, varOptions, varPrefixes } from "../variables";
+export var getColor = function getColor(color) {
+  if (varOptions.allColors.includes(color)) {
+    return "var(".concat(grnPrefix).concat(varPrefixes.color).concat(color, ")");
+  }
+
+  return color;
+};
 export var getTextSize = function getTextSize(size) {
-  if (textSizes.includes(size)) {
-    return "var(--grn-text-".concat(size, ")");
+  if (varOptions.textSizes.includes(size)) {
+    return "var(".concat(grnPrefix).concat(varPrefixes.text).concat(size, ")");
   }
 
   return size;
+};
+export var getWeight = function getWeight(weight) {
+  if (varOptions.weights.includes(weight)) {
+    return "var(".concat(grnPrefix).concat(varPrefixes.weight).concat(weight, ")");
+  }
 };

package/es/variables/index.js

@@ -0,0 +1,46 @@
+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 grnPrefix = "--grn-";
+export var varPrefixes = {
+  space: "space-",
+  weight: "weight-",
+  text: "text-",
+  color: "color-"
+};
+export var greys = greysArray.reverse();
+export var semanticColors = ["body", "bodyDimmed", "primary", "backgroundSecondary", "background", "border"];
+export var varOptions = {
+  textSizes: ["s", "m", "l", "xl", "xxl"],
+  spaces: ["xs", "s", "m", "l", "xl", "xxl"],
+  weights: ["normal", "medium", "semiBold"],
+  allColors: [].concat(_toConsumableArray(greys), semanticColors)
+};

package/package.json

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