@flodesk/grain 10.17.4 → 10.18.0

package/es/types.js

@@ -17,22 +17,32 @@ export var autoFlows = directions;
 export var flexDirections = directions;
 export var alignSelfs = [].concat(axisAlignments, ['baseline']);
 export var flexWraps = ['nowrap', 'wrap', 'wrap-reverse'];
+export var overflows = ['visible', 'hidden', 'scroll', 'auto'];
+export var positions = ['static', 'relative', 'fixed', 'absolute', 'sticky'];
+export var cursors = ['default', 'pointer'];
+export var sides = ['all', 'left', 'right', 'top', 'bottom', 'x', 'y'];
+export var borderWidths = ['1px', '2px', '3px', '4px'];
+export var textTransforms = ['capitalize', 'uppercase', 'lowercase'];
+export var textDisplays = ['block', 'inline-block', 'inline'];
+export var textAlignments = ['left', 'center', 'right'];
+export var spaces = Object.keys(vars.spaces);
 export var types = {
+  spaces: PropTypes.oneOf(spaces),
   color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
-  responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
+  responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(spaces), PropTypes.number, PropTypes.string, PropTypes.object]),
   dimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   responsiveDimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
-  side: PropTypes.oneOf(['all', 'left', 'right', 'top', 'bottom', 'x', 'y']),
+  side: PropTypes.oneOf(sides),
   radius: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.radii)), PropTypes.string, PropTypes.number]),
   shadow: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.shadows)), PropTypes.string]),
-  position: PropTypes.oneOf(['static', 'relative', 'fixed', 'absolute', 'sticky']),
+  position: PropTypes.oneOf(positions),
   responsiveTextSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.texts)), PropTypes.string, PropTypes.object]),
-  responsiveTextAlign: PropTypes.oneOfType([PropTypes.oneOf(['left', 'center', 'right']), PropTypes.string, PropTypes.object]),
+  responsiveTextAlign: PropTypes.oneOfType([PropTypes.oneOf(textAlignments), PropTypes.string, PropTypes.object]),
   iconSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.icons)), PropTypes.number, PropTypes.string]),
   weight: PropTypes.oneOf(Object.keys(vars.weights)),
-  overflow: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto']),
+  overflow: PropTypes.oneOf(overflows),
   textTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label']),
-  textDisplay: PropTypes.oneOf(['block', 'inline-block', 'inline']),
+  textDisplay: PropTypes.oneOf(textDisplays),
   responsiveColumns: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   responsiveRows: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   autoFlow: PropTypes.oneOfType([PropTypes.oneOf(autoFlows), PropTypes.string, PropTypes.object]),
@@ -57,7 +67,8 @@ export var types = {
   buttonTag: PropTypes.oneOf(['button', 'a', 'span']),
   hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   transition: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.transitions)), PropTypes.string]),
-  cursor: PropTypes.oneOf(['default', 'pointer'])
+  cursor: PropTypes.oneOf(cursors),
+  borderWidth: PropTypes.oneOf(borderWidths)
 };
 export var defaultProps = {
   menuMaxHeight: '468px',

package/es/utilities/attributes.js

@@ -0,0 +1,66 @@
+import "core-js/modules/es.object.values.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.keys.js";
+import { breakpoints, deviceShort } from '../variables';
+import { isObject } from './helpers';
+import { propNameToShort, styleConfig } from './style-config';
+var mediaQueries = {
+  tablet: "@media (max-width: ".concat(breakpoints.tablet, "px)"),
+  mobile: "@media (max-width: ".concat(breakpoints.mobile, "px)")
+};
+export var generateStyleAttributes = function generateStyleAttributes(props) {
+  var styles = {};
+  var styleConfigValues = Object.values(styleConfig);
+  styleConfigValues.forEach(function (propsSet) {
+    propsSet.props.forEach(function (_ref) {
+      var propName = _ref.propName;
+      var value = props[propName];
+      var hasVariable = propsSet.variableChecker ? propsSet.variableChecker(value) : false;
+      var hasTransformer = propsSet.valueTransformer ? true : false;
+      if (hasVariable) return;
+      if (value === null || value === undefined || value === '') return;
+      var cssValue = hasTransformer ? propsSet.valueTransformer(value) : value;
+      var propNameShort = propNameToShort(propName);
+
+      if (!isObject(value)) {
+        styles["--".concat(propNameShort)] = cssValue;
+      } else {
+        var def = value.default,
+            mobile = value.mobile,
+            tablet = value.tablet; // accept fixed string media queries to help migration
+
+        var mobileMediaValue = value[mediaQueries.mobile];
+        var tabletMediaValue = value[mediaQueries.tablet];
+        var mob = mobileMediaValue || mobile;
+        var tab = tabletMediaValue || tablet;
+        styles["--".concat(propNameShort, "-").concat(deviceShort.default)] = hasTransformer ? propsSet.valueTransformer(def) : def;
+        styles["--".concat(propNameShort, "-").concat(deviceShort.mobile)] = hasTransformer ? propsSet.valueTransformer(mob) : mob;
+        styles["--".concat(propNameShort, "-").concat(deviceShort.tablet)] = hasTransformer ? propsSet.valueTransformer(tab) : tab;
+      }
+    });
+  });
+  return styles;
+};
+export var generateClassNameAttributes = function generateClassNameAttributes(props) {
+  var classNames = [];
+  var propKeys = Object.keys(props);
+  var styleConfigValues = Object.values(styleConfig);
+  propKeys.forEach(function (prop) {
+    styleConfigValues.forEach(function (styleConfigItem) {
+      styleConfigItem.props.forEach(function (propItem) {
+        if (propItem.propName === prop) {
+          var propName = propItem.propName;
+          var value = props[propName];
+          var hasVariable = styleConfigItem.variableChecker ? styleConfigItem.variableChecker(value) : false;
+          if (!hasVariable) return;
+          if (value === null || value === undefined || value === '') return;
+          var className = "".concat(propNameToShort(propName), "-").concat(value);
+          classNames.push(className);
+        }
+      });
+    });
+  });
+  return classNames.join(' ');
+};

package/es/utilities/helpers.js

@@ -1,9 +1,10 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.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";
@@ -32,4 +33,15 @@ export var isArray = function isArray(value) {
 };
 export var isObject = function isObject(value) {
   return _typeof(value) === 'object';
+};
+export var mergeRefs = function mergeRefs(refs) {
+  return function (value) {
+    refs.forEach(function (ref) {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
 };

package/es/utilities/index.js

@@ -1,3 +1,5 @@
 export * from './helpers';
 export * from './responsive';
-export * from './styles';
+export * from './styles';
+export * from './style-config';
+export * from './attributes';

package/es/utilities/responsive.js

@@ -61,6 +61,9 @@ export var getDimension = function getDimension(dimension) {
   if (isString(dimension)) return dimension;
   if (isNumber(dimension)) return u(dimension);
 };
+export var isSpaceVar = function isSpaceVar(space) {
+  return space in vars.spaces || space in vars.spaceUtils;
+};
 export var getSpace = function getSpace(space) {
   if (space in vars.spaceUtils) {
     return getCssVar(varInfo.spaceUtils.name, space);

package/es/utilities/style-config.js

@@ -0,0 +1,442 @@
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.values.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.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";
+
+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 { alignSelfs, borderWidths, cursors, overflows, positions, sides, textAlignments, textDisplays, textTransforms } from '../types';
+import { vars } from '../variables';
+import { getDimension, getSpace, getTextSize, isSpaceVar } from './responsive';
+import { getColor, getRadius, getShadow, getTransition, getWeight, isColorVar, isRadiusVar, isShadowVar, isTrasitionVar } from './styles';
+var spaces = [].concat(_toConsumableArray(Object.keys(vars.spaces)), _toConsumableArray(Object.keys(vars.spaceUtils)));
+var colors = [].concat(_toConsumableArray(Object.keys(vars.colors)), _toConsumableArray(Object.keys(vars.colorUtils)));
+var shadows = Object.keys(vars.shadows);
+var radii = Object.keys(vars.radii);
+var transitions = [].concat(_toConsumableArray(Object.keys(vars.transitions)), _toConsumableArray(Object.keys(vars.transitionUtils)));
+var sizes = Object.keys(vars.texts);
+var weights = Object.keys(vars.weights);
+
+var borderSideToStyle = function borderSideToStyle(side) {
+  if (side === 'all') return 'solid';
+  var borderConfig = {
+    top: ['top'],
+    right: ['right'],
+    bottom: ['bottom'],
+    left: ['left'],
+    y: ['top', 'bottom'],
+    x: ['right', 'left']
+  };
+  var borderStyles = ['top', 'right', 'bottom', 'left'].map(function (s) {
+    return borderConfig[side].includes(s) ? 'solid' : 'none';
+  });
+  return borderStyles.join(' ');
+};
+
+export var styleConfig = {
+  spaceProps: {
+    props: [{
+      propName: 'padding',
+      property: 'padding',
+      short: 'p'
+    }, {
+      propName: 'paddingTop',
+      property: 'padding-top',
+      short: 'pt'
+    }, {
+      propName: 'paddingBottom',
+      property: 'padding-bottom',
+      short: 'pb'
+    }, {
+      propName: 'paddingLeft',
+      property: 'padding-left',
+      short: 'pl'
+    }, {
+      propName: 'paddingRight',
+      property: 'padding-right',
+      short: 'pr'
+    }, {
+      propName: 'paddingX',
+      property: 'padding-inline',
+      short: 'px'
+    }, {
+      propName: 'paddingY',
+      property: 'padding-block',
+      short: 'py'
+    }, {
+      propName: 'margin',
+      property: 'margin',
+      short: 'm'
+    }, {
+      propName: 'marginTop',
+      property: 'margin-top',
+      short: 'mt'
+    }, {
+      propName: 'marginBottom',
+      property: 'margin-bottom',
+      short: 'mb'
+    }, {
+      propName: 'marginLeft',
+      property: 'margin-left',
+      short: 'ml'
+    }, {
+      propName: 'marginRight',
+      property: 'margin-right',
+      short: 'mr'
+    }, {
+      propName: 'marginX',
+      property: 'margin-inline',
+      short: 'mx'
+    }, {
+      propName: 'marginY',
+      property: 'margin-block',
+      short: 'my'
+    }, {
+      propName: 'top',
+      property: 'top',
+      short: 't'
+    }, {
+      propName: 'bottom',
+      property: 'bottom',
+      short: 'b'
+    }, {
+      propName: 'left',
+      property: 'left',
+      short: 'l'
+    }, {
+      propName: 'right',
+      property: 'right',
+      short: 'r'
+    }],
+    valueTransformer: getSpace,
+    variableChecker: isSpaceVar,
+    variables: spaces,
+    isResponsive: true
+  },
+  dimensionProps: {
+    props: [{
+      propName: 'width',
+      property: 'width',
+      short: 'w'
+    }, {
+      propName: 'minWidth',
+      property: 'min-width',
+      short: 'min-w'
+    }, {
+      propName: 'maxWidth',
+      property: 'max-width',
+      short: 'max-w'
+    }, {
+      propName: 'height',
+      property: 'height',
+      short: 'h'
+    }, {
+      propName: 'minHeight',
+      property: 'min-height',
+      short: 'min-h'
+    }, {
+      propName: 'maxHeight',
+      property: 'max-height',
+      short: 'max-h'
+    }],
+    valueTransformer: getDimension,
+    isResponsive: true
+  },
+  colorProps: {
+    props: [{
+      propName: 'color',
+      property: 'color',
+      short: 'c'
+    }, {
+      propName: 'colorHover',
+      property: 'color',
+      short: 'c-h'
+    }, {
+      propName: 'backgroundColor',
+      property: 'background-color',
+      short: 'bgc'
+    }, {
+      propName: 'backgroundColorHover',
+      property: 'background-color',
+      short: 'bgc-h'
+    }],
+    valueTransformer: getColor,
+    variableChecker: isColorVar,
+    variables: colors
+  },
+  shadowProps: {
+    props: [{
+      propName: 'shadow',
+      property: 'box-shadow',
+      short: 'sh'
+    }, {
+      propName: 'shadowHover',
+      property: 'box-shadow',
+      short: 'sh-h'
+    }],
+    valueTransformer: getShadow,
+    variableChecker: isShadowVar,
+    variables: shadows
+  },
+  radiusProps: {
+    props: [{
+      propName: 'radius',
+      property: 'border-radius',
+      short: 'rad'
+    }],
+    valueTransformer: getRadius,
+    variableChecker: isRadiusVar,
+    variables: radii
+  },
+  orderProps: {
+    props: [{
+      propName: 'order',
+      property: 'order',
+      short: 'ord'
+    }]
+  },
+  flexProps: {
+    props: [{
+      propName: 'flex',
+      property: 'flex',
+      short: 'flx'
+    }],
+    isResponsive: true
+  },
+  zIndexProps: {
+    props: [{
+      propName: 'zIndex',
+      property: 'z-index',
+      short: 'z'
+    }]
+  },
+  positionProps: {
+    props: [{
+      propName: 'position',
+      property: 'position',
+      short: 'pos'
+    }],
+    variableChecker: function variableChecker(value) {
+      return positions.includes(value);
+    },
+    variables: positions
+  },
+  overflowProps: {
+    props: [{
+      propName: 'overflow',
+      property: 'overflow',
+      short: 'of'
+    }, {
+      propName: 'overflowX',
+      property: 'overflow-x',
+      short: 'of-x'
+    }, {
+      propName: 'overflowY',
+      property: 'overflow-y',
+      short: 'of-y'
+    }],
+    variableChecker: function variableChecker(value) {
+      return overflows.includes(value);
+    },
+    variables: overflows
+  },
+  transitionProps: {
+    props: [{
+      propName: 'transition',
+      property: 'transition',
+      short: 'tr'
+    }, {
+      propName: 'transitionHover',
+      property: 'transition',
+      short: 'tr-h'
+    }],
+    valueTransformer: getTransition,
+    variableChecker: isTrasitionVar,
+    variables: transitions
+  },
+  cursorProps: {
+    props: [{
+      propName: 'cursor',
+      property: 'cursor',
+      short: 'cur'
+    }],
+    variableChecker: function variableChecker(value) {
+      return cursors.includes(value);
+    },
+    variables: cursors
+  },
+  aspectRatioProps: {
+    props: [{
+      propName: 'aspectRatio',
+      property: 'aspect-ratio',
+      short: 'ar'
+    }]
+  },
+  sizeProps: {
+    props: [{
+      propName: 'size',
+      property: 'font-size',
+      short: 'txt'
+    }],
+    isResponsive: true,
+    variables: sizes,
+    valueTransformer: getTextSize,
+    variableChecker: function variableChecker(value) {
+      return sizes.includes(value);
+    }
+  },
+  opacityProps: {
+    props: [{
+      propName: 'opacity',
+      property: 'opacity',
+      short: 'op'
+    }, {
+      propName: 'opacityHover',
+      property: 'opacity',
+      short: 'op-h'
+    }]
+  },
+  alignSelfProps: {
+    props: [{
+      propName: 'alignSelf',
+      property: 'align-self',
+      short: 'als'
+    }],
+    variables: alignSelfs,
+    variableChecker: function variableChecker(value) {
+      return alignSelfs.includes(value);
+    }
+  },
+  borderColorProps: {
+    props: [{
+      propName: 'borderColor',
+      property: 'border-color',
+      short: 'bdc'
+    }, {
+      propName: 'borderColorHover',
+      property: 'border-color',
+      short: 'bdc-h'
+    }],
+    valueTransformer: getColor,
+    variableChecker: isColorVar,
+    variables: colors
+  },
+  borderWidthProps: {
+    props: [{
+      propName: 'borderWidth',
+      property: 'border-width',
+      short: 'bdw'
+    }],
+    valueTransformer: function valueTransformer(borderWidth) {
+      return borderWidth;
+    },
+    variables: borderWidths,
+    variableChecker: function variableChecker(value) {
+      return borderWidths.includes(value);
+    }
+  },
+  borderSideProps: {
+    props: [{
+      propName: 'borderSide',
+      property: 'border-style',
+      short: 'bds'
+    }],
+    valueTransformer: borderSideToStyle,
+    variables: sides,
+    variableChecker: function variableChecker(value) {
+      return sides.includes(value);
+    }
+  },
+  alignProps: {
+    props: [{
+      propName: 'align',
+      property: 'text-align',
+      short: 'al'
+    }],
+    variables: textAlignments,
+    variableChecker: function variableChecker(value) {
+      return textAlignments.includes(value);
+    },
+    isResponsive: true
+  },
+  weightProps: {
+    props: [{
+      propName: 'weight',
+      property: 'font-weight',
+      short: 'w'
+    }],
+    variables: weights,
+    variableChecker: function variableChecker(value) {
+      return weights.includes(value);
+    },
+    valueTransformer: getWeight
+  },
+  textDisplayProps: {
+    props: [{
+      propName: 'display',
+      property: 'display',
+      short: 'ds' // instead of 'd' to avoid conflict with _display.scss in frontend
+
+    }],
+    variables: textDisplays,
+    variableChecker: function variableChecker(value) {
+      return textDisplays.includes(value);
+    }
+  },
+  letterSpacingProps: {
+    props: [{
+      propName: 'letterSpacing',
+      property: 'letter-spacing',
+      short: 'ls'
+    }]
+  },
+  textTransformProps: {
+    props: [{
+      propName: 'textTransform',
+      property: 'text-transform',
+      short: 'tt'
+    }],
+    variables: textTransforms,
+    variableChecker: function variableChecker(value) {
+      return textTransforms.includes(value);
+    }
+  }
+};
+export var propNameToShort = function propNameToShort(propName) {
+  var _prop$props$find;
+
+  var prop = Object.values(styleConfig).find(function (_ref) {
+    var props = _ref.props;
+    return props.find(function (_ref2) {
+      var prop = _ref2.propName;
+      return prop === propName;
+    });
+  });
+  return prop === null || prop === void 0 ? void 0 : (_prop$props$find = prop.props.find(function (_ref3) {
+    var prop = _ref3.propName;
+    return prop === propName;
+  })) === null || _prop$props$find === void 0 ? void 0 : _prop$props$find.short;
+};

package/es/utilities/styles.js

@@ -3,6 +3,9 @@ import "core-js/modules/es.array.map.js";
 import { getCssVar, isNumber, isString, u } from '.';
 import { vars, varInfo } from '../variables';
 import { getDimension } from './responsive';
+export var isColorVar = function isColorVar(color) {
+  return color in vars.colorUtils || color in vars.colors;
+};
 export var getColor = function getColor(color) {
   if (color in vars.colorUtils) {
     return getCssVar(varInfo.colorUtils.name, color);
@@ -14,8 +17,11 @@ export var getColor = function getColor(color) {
 
   return color;
 };
+export var isShadowVar = function isShadowVar(shadow) {
+  return shadow in vars.shadows;
+};
 export var getShadow = function getShadow(shadow) {
-  if (shadow in vars.shadows) {
+  if (isShadowVar(shadow)) {
     return getCssVar(varInfo.shadows.name, shadow);
   }
 
@@ -26,8 +32,11 @@ export var getWeight = function getWeight(weight) {
     return getCssVar(varInfo.weights.name, weight);
   }
 };
+export var isRadiusVar = function isRadiusVar(radius) {
+  return radius in vars.radii;
+};
 export var getRadius = function getRadius(radius) {
-  if (radius in vars.radii) {
+  if (isRadiusVar(radius)) {
     return getCssVar(varInfo.radii.name, radius);
   }
 
@@ -35,6 +44,9 @@ export var getRadius = function getRadius(radius) {
   if (isString(radius)) return radius;
   if (isNumber(radius)) return u(radius);
 };
+export var isTrasitionVar = function isTrasitionVar(transition) {
+  return transition in vars.transitionUtils || transition in vars.transitions;
+};
 export var getTransition = function getTransition(transition) {
   if (transition in vars.transitionUtils) {
     return getCssVar(varInfo.transitionUtils.name, transition);

package/es/variables/breakpoints.js

@@ -0,0 +1,9 @@
+export var breakpoints = {
+  tablet: 1169,
+  mobile: 767
+};
+export var deviceShort = {
+  default: 'def',
+  mobile: 'mob',
+  tablet: 'tab'
+};

package/es/variables/colors.js

@@ -82,7 +82,8 @@ export var colors = {
     content2: 'content2',
     content3: 'content3',
     disabledContent: 'disabledContent',
-    icon: 'icon'
+    icon: 'icon',
+    disabledIcon: 'disabledIcon'
   },
   backgrounds: {
     background: 'background',

package/es/variables/index.js

@@ -1,2 +1,3 @@
 export * from './vars';
-export * from './colors';
+export * from './colors';
+export * from './breakpoints';

package/es/variables/vars.js

@@ -34,9 +34,12 @@ export var vars = {
   spaces: {
     xs: 'xs',
     s: 's',
+    s2: 's2',
     m: 'm',
     l: 'l',
+    l2: 'l2',
     xl: 'xl',
+    xl2: 'xl2',
     xxl: 'xxl'
   },
   weights: {