@flodesk/grain 2.12.0 → 2.13.0

package/es/icons/index.js

@@ -2,14 +2,360 @@
 
 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.IconArrowRight;
+    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, "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, "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, "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;
   }
 });
+Object.defineProperty(exports, "IconChart", {
+  enumerable: true,
+  get: function get() {
+    return _iconChart.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 _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 _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 _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"));
 
-var _iconArrowRight = require("./icon-arrow-right");
+var _iconChart = _interopRequireDefault(require("./icon-chart"));

package/es/styles/variables.css

@@ -10,12 +10,13 @@
   --grn-text-xxl: 30px;
 }
 
+/* ~ text size ✕ 1.6 */
 :root {
-  --grn-icon-s: calc(var(--grn-unit) * 2.5);
-  --grn-icon-m: calc(var(--grn-unit) * 3);
-  --grn-icon-l: calc(var(--grn-unit) * 4);
-  --grn-icon-xl: calc(var(--grn-unit) * 5);
-  --grn-icon-xxl: calc(var(--grn-unit) * 6);
+  --grn-icon-s: 20px;
+  --grn-icon-m: 24px;
+  --grn-icon-l: 32px;
+  --grn-icon-xl: 38px;
+  --grn-icon-xxl: 48px;
 }
 
 :root {

package/es/types.js

@@ -23,7 +23,7 @@ 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"]),

package/es/utilities.js

@@ -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)) {
@@ -162,7 +164,7 @@ var getIconSize = function getIconSize(size) {
   if (size === 0) return size;
 
   if (size in _variables.vars.iconSizes) {
-    return getCssVar("icon", size);
+    return getCssVar(_variables.varNames.iconSize.prefix, size);
   }
 
   if (isNumber(size) || isString(size)) {

package/es/variables.js

@@ -2,92 +2,125 @@
 
 require("core-js/modules/es.object.define-property.js");
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.vars = exports.grnPrefix = void 0;
+exports.vars = exports.varNames = exports.grnPrefix = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _vars;
+
 var grnPrefix = "--grn-";
 exports.grnPrefix = grnPrefix;
-var vars = {
-  textSizes: {
-    s: "s",
-    m: "m",
-    l: "l",
-    xl: "xl",
-    xxl: "xxl"
+var varNames = {
+  textSize: {
+    group: "textSizes",
+    prefix: "text"
   },
-  iconSizes: {
-    s: "s",
-    m: "m",
-    l: "l",
-    xl: "xl",
-    xxl: "xxl"
+  iconSize: {
+    group: "iconSizes",
+    prefix: "icon"
   },
-  spaces: {
-    xs: "xs",
-    s: "s",
-    m: "m",
-    l: "l",
-    xl: "xl",
-    xxl: "xxl"
+  space: {
+    group: "spaces",
+    prefix: "space"
   },
-  weights: {
-    normal: "normal",
-    medium: "medium",
-    semiBold: "semiBold"
+  weight: {
+    group: "weights",
+    prefix: "weight"
   },
-  radiuses: {
-    xs: "xs",
-    s: "s",
-    m: "m",
-    l: "l"
+  radius: {
+    group: "radiuses",
+    prefix: "radius"
   },
-  shadows: {
-    s: "s",
-    m: "m",
-    l: "l"
+  shadow: {
+    group: "shadows",
+    prefix: "shadow"
   },
-  transitions: {
-    slow: "slow",
-    fast: "fast"
+  transition: {
+    group: "transitions",
+    prefix: "transition"
   },
-  colors: {
-    greys: {
-      grey8: "grey8",
-      grey7: "grey7",
-      grey6: "grey6",
-      grey5: "grey5",
-      grey4: "grey4",
-      grey3: "grey3",
-      grey2: "grey2",
-      grey1: "grey1"
-    },
-    fades: {
-      fade7: "fade7",
-      fade6: "fade6",
-      fade5: "fade5",
-      fade4: "fade4",
-      fade3: "fade3",
-      fade2: "fade2",
-      fade1: "fade1"
-    },
-    baseColors: {
-      blue: "blue",
-      red: "red"
-    },
-    semanticColors: {
-      body: "body",
-      bodyDimmed: "bodyDimmed",
-      accent: "accent",
-      backgroundSecondary: "backgroundSecondary",
-      background: "background",
-      overlay: "overlay",
-      border: "border",
-      selection: "selection",
-      danger: "danger",
-      disabledContent: "disabledContent",
-      disabledBackground: "disabledBackground"
-    }
+  color: {
+    group: "colors",
+    prefix: "color"
   }
 };
+exports.varNames = varNames;
+var vars = (_vars = {}, (0, _defineProperty2.default)(_vars, varNames.textSize.group, {
+  s: "s",
+  m: "m",
+  l: "l",
+  xl: "xl",
+  xxl: "xxl"
+}), (0, _defineProperty2.default)(_vars, varNames.iconSize.group, {
+  s: "s",
+  m: "m",
+  l: "l",
+  xl: "xl",
+  xxl: "xxl"
+}), (0, _defineProperty2.default)(_vars, varNames.space.group, {
+  xs: "xs",
+  s: "s",
+  m: "m",
+  l: "l",
+  xl: "xl",
+  xxl: "xxl"
+}), (0, _defineProperty2.default)(_vars, varNames.weight.group, {
+  normal: "normal",
+  medium: "medium",
+  semiBold: "semiBold"
+}), (0, _defineProperty2.default)(_vars, varNames.radius.group, {
+  xs: "xs",
+  s: "s",
+  m: "m",
+  l: "l"
+}), (0, _defineProperty2.default)(_vars, varNames.shadow.group, {
+  s: "s",
+  m: "m",
+  l: "l"
+}), (0, _defineProperty2.default)(_vars, varNames.transition.group, {
+  slow: "slow",
+  fast: "fast"
+}), (0, _defineProperty2.default)(_vars, varNames.color.group, {
+  greys: {
+    grey8: "grey8",
+    grey7: "grey7",
+    grey6: "grey6",
+    grey5: "grey5",
+    grey4: "grey4",
+    grey3: "grey3",
+    grey2: "grey2",
+    grey1: "grey1"
+  },
+  fades: {
+    fade7: "fade7",
+    fade6: "fade6",
+    fade5: "fade5",
+    fade4: "fade4",
+    fade3: "fade3",
+    fade2: "fade2",
+    fade1: "fade1"
+  },
+  baseColors: {
+    blue: "blue",
+    red: "red"
+  },
+  semanticColors: {
+    body: "body",
+    bodyDimmed: "bodyDimmed",
+    accent: "accent",
+    backgroundSecondary: "backgroundSecondary",
+    background: "background",
+    overlay: "overlay",
+    border: "border",
+    selection: "selection",
+    danger: "danger",
+    disabledContent: "disabledContent",
+    disabledBackground: "disabledBackground"
+  }
+}), _vars);
 exports.vars = vars;

package/package.json

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