@flodesk/grain 2.11.0 → 2.14.0

package/es/icons/index.js

@@ -0,0 +1,377 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IconAlignCenter", {
+  enumerable: true,
+  get: function get() {
+    return _iconAlignCenter.default;
+  }
+});
+Object.defineProperty(exports, "IconAlignLeft", {
+  enumerable: true,
+  get: function get() {
+    return _iconAlignLeft.default;
+  }
+});
+Object.defineProperty(exports, "IconAlignRight", {
+  enumerable: true,
+  get: function get() {
+    return _iconAlignRight.default;
+  }
+});
+Object.defineProperty(exports, "IconArrowDown", {
+  enumerable: true,
+  get: function get() {
+    return _iconArrowDown.default;
+  }
+});
+Object.defineProperty(exports, "IconArrowLeft", {
+  enumerable: true,
+  get: function get() {
+    return _iconArrowLeft.default;
+  }
+});
+Object.defineProperty(exports, "IconArrowRight", {
+  enumerable: true,
+  get: function get() {
+    return _iconArrowRight.default;
+  }
+});
+Object.defineProperty(exports, "IconArrowUp", {
+  enumerable: true,
+  get: function get() {
+    return _iconArrowUp.default;
+  }
+});
+Object.defineProperty(exports, "IconBrowser", {
+  enumerable: true,
+  get: function get() {
+    return _iconBrowser.default;
+  }
+});
+Object.defineProperty(exports, "IconChart", {
+  enumerable: true,
+  get: function get() {
+    return _iconChart.default;
+  }
+});
+Object.defineProperty(exports, "IconCheck", {
+  enumerable: true,
+  get: function get() {
+    return _iconCheck.default;
+  }
+});
+Object.defineProperty(exports, "IconChevronDown", {
+  enumerable: true,
+  get: function get() {
+    return _iconChevronDown.default;
+  }
+});
+Object.defineProperty(exports, "IconChevronLeft", {
+  enumerable: true,
+  get: function get() {
+    return _iconChevronLeft.default;
+  }
+});
+Object.defineProperty(exports, "IconChevronRight", {
+  enumerable: true,
+  get: function get() {
+    return _iconChevronRight.default;
+  }
+});
+Object.defineProperty(exports, "IconChevronUp", {
+  enumerable: true,
+  get: function get() {
+    return _iconChevronUp.default;
+  }
+});
+Object.defineProperty(exports, "IconChevronHorizontal", {
+  enumerable: true,
+  get: function get() {
+    return _iconChevronHorizontal.default;
+  }
+});
+Object.defineProperty(exports, "IconChevronVertical", {
+  enumerable: true,
+  get: function get() {
+    return _iconChevronVertical.default;
+  }
+});
+Object.defineProperty(exports, "IconClip", {
+  enumerable: true,
+  get: function get() {
+    return _iconClip.default;
+  }
+});
+Object.defineProperty(exports, "IconClock", {
+  enumerable: true,
+  get: function get() {
+    return _iconClock.default;
+  }
+});
+Object.defineProperty(exports, "IconCrop", {
+  enumerable: true,
+  get: function get() {
+    return _iconCrop.default;
+  }
+});
+Object.defineProperty(exports, "IconCross", {
+  enumerable: true,
+  get: function get() {
+    return _iconCross.default;
+  }
+});
+Object.defineProperty(exports, "IconDuplicate", {
+  enumerable: true,
+  get: function get() {
+    return _iconDuplicate.default;
+  }
+});
+Object.defineProperty(exports, "IconEllipsis", {
+  enumerable: true,
+  get: function get() {
+    return _iconEllipsis.default;
+  }
+});
+Object.defineProperty(exports, "IconFile", {
+  enumerable: true,
+  get: function get() {
+    return _iconFile.default;
+  }
+});
+Object.defineProperty(exports, "IconFolder", {
+  enumerable: true,
+  get: function get() {
+    return _iconFolder.default;
+  }
+});
+Object.defineProperty(exports, "IconFolderAdd", {
+  enumerable: true,
+  get: function get() {
+    return _iconFolderAdd.default;
+  }
+});
+Object.defineProperty(exports, "IconGear", {
+  enumerable: true,
+  get: function get() {
+    return _iconGear.default;
+  }
+});
+Object.defineProperty(exports, "IconGlobe", {
+  enumerable: true,
+  get: function get() {
+    return _iconGlobe.default;
+  }
+});
+Object.defineProperty(exports, "IconHeart", {
+  enumerable: true,
+  get: function get() {
+    return _iconHeart.default;
+  }
+});
+Object.defineProperty(exports, "IconImage", {
+  enumerable: true,
+  get: function get() {
+    return _iconImage.default;
+  }
+});
+Object.defineProperty(exports, "IconLink", {
+  enumerable: true,
+  get: function get() {
+    return _iconLink.default;
+  }
+});
+Object.defineProperty(exports, "IconMail", {
+  enumerable: true,
+  get: function get() {
+    return _iconMail.default;
+  }
+});
+Object.defineProperty(exports, "IconMinus", {
+  enumerable: true,
+  get: function get() {
+    return _iconMinus.default;
+  }
+});
+Object.defineProperty(exports, "IconPencil", {
+  enumerable: true,
+  get: function get() {
+    return _iconPencil.default;
+  }
+});
+Object.defineProperty(exports, "IconPlus", {
+  enumerable: true,
+  get: function get() {
+    return _iconPlus.default;
+  }
+});
+Object.defineProperty(exports, "IconRedo", {
+  enumerable: true,
+  get: function get() {
+    return _iconRedo.default;
+  }
+});
+Object.defineProperty(exports, "IconSearch", {
+  enumerable: true,
+  get: function get() {
+    return _iconSearch.default;
+  }
+});
+Object.defineProperty(exports, "IconSend", {
+  enumerable: true,
+  get: function get() {
+    return _iconSend.default;
+  }
+});
+Object.defineProperty(exports, "IconShare", {
+  enumerable: true,
+  get: function get() {
+    return _iconShare.default;
+  }
+});
+Object.defineProperty(exports, "IconSmile", {
+  enumerable: true,
+  get: function get() {
+    return _iconSmile.default;
+  }
+});
+Object.defineProperty(exports, "IconSwitch", {
+  enumerable: true,
+  get: function get() {
+    return _iconSwitch.default;
+  }
+});
+Object.defineProperty(exports, "IconTextAlignCenter", {
+  enumerable: true,
+  get: function get() {
+    return _iconTextAlignCenter.default;
+  }
+});
+Object.defineProperty(exports, "IconTextAlignLeft", {
+  enumerable: true,
+  get: function get() {
+    return _iconTextAlignLeft.default;
+  }
+});
+Object.defineProperty(exports, "IconTextAlignRight", {
+  enumerable: true,
+  get: function get() {
+    return _iconTextAlignRight.default;
+  }
+});
+Object.defineProperty(exports, "IconTrash", {
+  enumerable: true,
+  get: function get() {
+    return _iconTrash.default;
+  }
+});
+Object.defineProperty(exports, "IconType", {
+  enumerable: true,
+  get: function get() {
+    return _iconType.default;
+  }
+});
+Object.defineProperty(exports, "IconUndo", {
+  enumerable: true,
+  get: function get() {
+    return _iconUndo.default;
+  }
+});
+
+var _iconAlignCenter = _interopRequireDefault(require("./icon-align-center"));
+
+var _iconAlignLeft = _interopRequireDefault(require("./icon-align-left"));
+
+var _iconAlignRight = _interopRequireDefault(require("./icon-align-right"));
+
+var _iconArrowDown = _interopRequireDefault(require("./icon-arrow-down"));
+
+var _iconArrowLeft = _interopRequireDefault(require("./icon-arrow-left"));
+
+var _iconArrowRight = _interopRequireDefault(require("./icon-arrow-right"));
+
+var _iconArrowUp = _interopRequireDefault(require("./icon-arrow-up"));
+
+var _iconBrowser = _interopRequireDefault(require("./icon-browser"));
+
+var _iconChart = _interopRequireDefault(require("./icon-chart"));
+
+var _iconCheck = _interopRequireDefault(require("./icon-check"));
+
+var _iconChevronDown = _interopRequireDefault(require("./icon-chevron-down"));
+
+var _iconChevronLeft = _interopRequireDefault(require("./icon-chevron-left"));
+
+var _iconChevronRight = _interopRequireDefault(require("./icon-chevron-right"));
+
+var _iconChevronUp = _interopRequireDefault(require("./icon-chevron-up"));
+
+var _iconChevronHorizontal = _interopRequireDefault(require("./icon-chevron-horizontal"));
+
+var _iconChevronVertical = _interopRequireDefault(require("./icon-chevron-vertical"));
+
+var _iconClip = _interopRequireDefault(require("./icon-clip"));
+
+var _iconClock = _interopRequireDefault(require("./icon-clock"));
+
+var _iconCrop = _interopRequireDefault(require("./icon-crop"));
+
+var _iconCross = _interopRequireDefault(require("./icon-cross"));
+
+var _iconDuplicate = _interopRequireDefault(require("./icon-duplicate"));
+
+var _iconEllipsis = _interopRequireDefault(require("./icon-ellipsis"));
+
+var _iconFile = _interopRequireDefault(require("./icon-file"));
+
+var _iconFolder = _interopRequireDefault(require("./icon-folder"));
+
+var _iconFolderAdd = _interopRequireDefault(require("./icon-folder-add"));
+
+var _iconGear = _interopRequireDefault(require("./icon-gear"));
+
+var _iconGlobe = _interopRequireDefault(require("./icon-globe"));
+
+var _iconHeart = _interopRequireDefault(require("./icon-heart"));
+
+var _iconImage = _interopRequireDefault(require("./icon-image"));
+
+var _iconLink = _interopRequireDefault(require("./icon-link"));
+
+var _iconMail = _interopRequireDefault(require("./icon-mail"));
+
+var _iconMinus = _interopRequireDefault(require("./icon-minus"));
+
+var _iconPencil = _interopRequireDefault(require("./icon-pencil"));
+
+var _iconPlus = _interopRequireDefault(require("./icon-plus"));
+
+var _iconRedo = _interopRequireDefault(require("./icon-redo"));
+
+var _iconSearch = _interopRequireDefault(require("./icon-search"));
+
+var _iconSend = _interopRequireDefault(require("./icon-send"));
+
+var _iconShare = _interopRequireDefault(require("./icon-share"));
+
+var _iconSmile = _interopRequireDefault(require("./icon-smile"));
+
+var _iconSwitch = _interopRequireDefault(require("./icon-switch"));
+
+var _iconTextAlignCenter = _interopRequireDefault(require("./icon-text-align-center"));
+
+var _iconTextAlignLeft = _interopRequireDefault(require("./icon-text-align-left"));
+
+var _iconTextAlignRight = _interopRequireDefault(require("./icon-text-align-right"));
+
+var _iconTrash = _interopRequireDefault(require("./icon-trash"));
+
+var _iconType = _interopRequireDefault(require("./icon-type"));
+
+var _iconUndo = _interopRequireDefault(require("./icon-undo"));

package/es/index.js

@@ -35,4 +35,18 @@ Object.keys(_components).forEach(function (key) {
   });
 });
 
+var _icons = require("./icons");
+
+Object.keys(_icons).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _icons[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _icons[key];
+    }
+  });
+});
+
 var _variables = require("./variables");

package/es/styles/variables.css

@@ -10,6 +10,15 @@
   --grn-text-xxl: 30px;
 }
 
+/* ~ text size ✕ 1.6 */
+:root {
+  --grn-icon-s: 20px;
+  --grn-icon-m: 24px;
+  --grn-icon-l: 32px;
+  --grn-icon-xl: 38px;
+  --grn-icon-xxl: 48px;
+}
+
 :root {
   --grn-weight-normal: 400;
   --grn-weight-medium: 500;

package/es/types.js

@@ -23,7 +23,8 @@ var types = {
   radius: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.radiuses)), _propTypes.default.string]),
   shadow: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.shadows)), _propTypes.default.string]),
   position: _propTypes.default.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
-  textSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.textSizes)), _propTypes.default.number, _propTypes.default.string]),
+  textSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.textSizes)), _propTypes.default.string]),
+  iconSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.iconSizes)), _propTypes.default.number, _propTypes.default.string]),
   weight: _propTypes.default.oneOf(Object.keys(_variables.vars.weights)),
   textAlign: _propTypes.default.oneOf(["left", "center", "right"]),
   overflow: _propTypes.default.oneOf(["visible", "hidden", "scroll", "auto"]),

package/es/utilities.js

@@ -23,7 +23,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBorder = exports.getGridColumns = exports.getDimension = exports.getSpace = exports.getTransition = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
+exports.getBorder = exports.getGridColumns = exports.getIconSize = exports.getDimension = exports.getSpace = exports.getTransition = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -70,7 +70,7 @@ var isArray = function isArray(value) {
 
 var getColor = function getColor(color) {
   if (color in _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _variables.vars.colors.baseColors), _variables.vars.colors.greys), _variables.vars.colors.semanticColors), _variables.vars.colors.fades)) {
-    return getCssVar("color", color);
+    return getCssVar(_variables.varNames.color.prefix, color);
   }
 
   return color;
@@ -80,7 +80,7 @@ exports.getColor = getColor;
 
 var getShadow = function getShadow(shadow) {
   if (shadow in _variables.vars.shadows) {
-    return getCssVar("shadow", shadow);
+    return getCssVar(_variables.varNames.shadow.prefix, shadow);
   }
 
   return shadow;
@@ -90,17 +90,19 @@ exports.getShadow = getShadow;
 
 var getTextSize = function getTextSize(size) {
   if (size in _variables.vars.textSizes) {
-    return getCssVar("text", size);
+    return getCssVar(_variables.varNames.textSize.prefix, size);
   }
 
-  return size;
+  if (isString(size)) {
+    return size;
+  }
 };
 
 exports.getTextSize = getTextSize;
 
 var getWeight = function getWeight(weight) {
   if (weight in _variables.vars.weights) {
-    return getCssVar("weight", weight);
+    return getCssVar(_variables.varNames.weight.prefix, weight);
   }
 };
 
@@ -108,10 +110,10 @@ exports.getWeight = getWeight;
 
 var getRadius = function getRadius(radius) {
   if (radius in _variables.vars.radiuses) {
-    return getCssVar("radius", radius);
+    return getCssVar(_variables.varNames.radius.prefix, radius);
   }
 
-  if (typeof radius === "string") {
+  if (isString(radius)) {
     return radius;
   }
 };
@@ -120,7 +122,7 @@ exports.getRadius = getRadius;
 
 var getTransition = function getTransition(transition) {
   if (transition in _variables.vars.transitions) {
-    return getCssVar("transition", transition);
+    return getCssVar(_variables.varNames.transition.prefix, transition);
   }
 };
 
@@ -134,7 +136,7 @@ var getSpace = function getSpace(space) {
   }
 
   if (space in _variables.vars.spaces) {
-    return getCssVar("space", space);
+    return getCssVar(_variables.varNames.space.prefix, space);
   }
 
   if (isString(space)) {
@@ -158,6 +160,20 @@ var getDimension = function getDimension(dimension) {
 
 exports.getDimension = getDimension;
 
+var getIconSize = function getIconSize(size) {
+  if (size === 0) return size;
+
+  if (size in _variables.vars.iconSizes) {
+    return getCssVar(_variables.varNames.iconSize.prefix, size);
+  }
+
+  if (isNumber(size) || isString(size)) {
+    return getDimension(size);
+  }
+};
+
+exports.getIconSize = getIconSize;
+
 var getGridColumns = function getGridColumns(columns) {
   if (columns) {
     if (isArray(columns)) {