@flodesk/grain 1.3.0 → 1.5.1

package/es/base-styles.css

@@ -26,10 +26,6 @@
 }
 
 :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%);
@@ -38,6 +34,13 @@
   --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% / 9%);
 }
 
 * {
@@ -52,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,28 +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 { textSizes, weights } from '../../variables';
+import { getColor, getTextSize, getWeight } from '../../utilities';
 import PropTypes from 'prop-types';
 import React from "react";
-import { getTextSize } from '../../utilities';
+import { cssVarOptions } from '../../variables';
 import styled from "@emotion/styled";
-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)
+  size: PropTypes.oneOf(cssVarOptions.textSizes),
+  weight: PropTypes.oneOf(cssVarOptions.weights),
+  color: PropTypes.oneOfType([PropTypes.oneOf(cssVarOptions.weights), PropTypes.string])
 };

package/es/utilities/index.js

@@ -1,11 +1,29 @@
+import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.includes.js";
-import "core-js/modules/es.array.concat.js";
-import { cssVarPrefix, textSizes, textVarPrefix } from "../variables";
+import { cssVarOptions, grnPrefix } from "../variables";
+export var getCssVarCore = function getCssVarCore(type, value) {
+  return "".concat(grnPrefix).concat(type, "-").concat(value);
+};
+export var getCssVar = function getCssVar(type, value) {
+  return "var(".concat(getCssVarCore(type, value), ")");
+};
+export var getColor = function getColor(color) {
+  if (cssVarOptions.colors.includes(color)) {
+    return getCssVar("color", color);
+  }
+
+  return color;
+};
 export var getTextSize = function getTextSize(size) {
-  if (textSizes.includes(size)) {
-    return "var(".concat(cssVarPrefix).concat(textVarPrefix).concat(size, ")");
+  if (cssVarOptions.textSizes.includes(size)) {
+    return getCssVar("text", size);
   }
 
   return size;
+};
+export var getWeight = function getWeight(weight) {
+  if (cssVarOptions.weights.includes(weight)) {
+    return getCssVar("weight", weight);
+  }
 };

package/es/variables/index.js

@@ -1,4 +1,27 @@
+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 = [];
 
@@ -6,11 +29,12 @@ 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 grnPrefix = "--grn-";
 export var greys = greysArray.reverse();
-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 semanticColors = ["body", "bodyDimmed", "primary", "backgroundSecondary", "background", "border"];
+export var cssVarOptions = {
+  textSizes: ["s", "m", "l", "xl", "xxl"],
+  spaces: ["xs", "s", "m", "l", "xl", "xxl"],
+  weights: ["normal", "medium", "semiBold"],
+  colors: [].concat(_toConsumableArray(greys), semanticColors)
+};

package/package.json

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