@flodesk/grain 3.1.1 → 3.1.2

package/es/index.js

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './icons';
-export * from './variables';
+export * from './variables';
+export * from './utilities';

package/es/utilities/helpers.js

@@ -8,10 +8,12 @@ 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 { grnPrefix } from '../variables';
+import { grnPrefix, varInfo } from '../variables';
 export var isBrowser = typeof window !== 'undefined';
 export var getCssVarCore = function getCssVarCore(type, value) {
-  return "".concat(grnPrefix).concat(type, "-").concat(value);
+  var typeInfo = varInfo[type];
+  var prefix = typeInfo ? typeInfo.prefix : type;
+  return "".concat(grnPrefix).concat(prefix, "-").concat(value);
 };
 export var getCssVar = function getCssVar(type, value) {
   return "var(".concat(getCssVarCore(type, value), ")");

package/es/utilities/index.js

@@ -1,21 +1,3 @@
-export { getDimension } from './responsive';
-export { getResponsiveDimension } from './responsive';
-export { getResponsiveGridColumns } from './responsive';
-export { getColor } from './styles';
-export { getShadow } from './styles';
-export { getTextSize } from './responsive';
-export { getResponsiveTextSize } from './responsive';
-export { getWeight } from './styles';
-export { getRadius } from './styles';
-export { getTransition } from './styles';
-export { getResponsiveSpace } from './responsive';
-export { getIconSize } from './styles';
-export { getBorder } from './styles';
-export { isBrowser } from './helpers';
-export { getCssVarCore } from './helpers';
-export { getCssVar } from './helpers';
-export { u } from './helpers';
-export { isNumber } from './helpers';
-export { isString } from './helpers';
-export { isArray } from './helpers';
-export { isObject } from './helpers';
+export * from './helpers';
+export * from './responsive';
+export * from './styles';

package/es/utilities/responsive.js

@@ -41,8 +41,7 @@ export var getMediaCss = function getMediaCss(mediaQuery, property, value) {
 export var mapObjToMedia = function mapObjToMedia(property, obj, type) {
   var checkValueInVars = function checkValueInVars(value) {
     if (type && value in vars[type]) {
-      var varPrefix = varInfo[type].prefix;
-      return getCssVar(varPrefix, value);
+      return getCssVar(varInfo[type].name, value);
     }
 
     return value;
@@ -65,7 +64,7 @@ export var getDimension = function getDimension(dimension) {
 };
 export var getSpace = function getSpace(space) {
   if (space in vars.spaces) {
-    return getCssVar(varInfo.spaces.prefix, space);
+    return getCssVar(varInfo.spaces.name, space);
   }
 
   if (space === 0) return space;
@@ -92,7 +91,7 @@ export var getResponsiveSpace = function getResponsiveSpace(property, space) {
 };
 export var getTextSize = function getTextSize(size) {
   if (size in vars.texts) {
-    return getCssVar(varInfo.texts.prefix, size);
+    return getCssVar(varInfo.texts.name, size);
   }
 
   if (isString(size)) return size;

package/es/utilities/styles.js

@@ -24,26 +24,26 @@ var allColors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, vars
 
 export var getColor = function getColor(color) {
   if (color in allColors) {
-    return getCssVar(varInfo.colors.prefix, color);
+    return getCssVar(varInfo.colors.name, color);
   }
 
   return color;
 };
 export var getShadow = function getShadow(shadow) {
   if (shadow in vars.shadows) {
-    return getCssVar(varInfo.shadows.prefix, shadow);
+    return getCssVar(varInfo.shadows.name, shadow);
   }
 
   return shadow;
 };
 export var getWeight = function getWeight(weight) {
   if (weight in vars.weights) {
-    return getCssVar(varInfo.weights.prefix, weight);
+    return getCssVar(varInfo.weights.name, weight);
   }
 };
 export var getRadius = function getRadius(radius) {
   if (radius in vars.radii) {
-    return getCssVar(varInfo.radii.prefix, radius);
+    return getCssVar(varInfo.radii.name, radius);
   }
 
   if (radius === 0) return radius;
@@ -52,12 +52,12 @@ export var getRadius = function getRadius(radius) {
 };
 export var getTransition = function getTransition(transition) {
   if (transition in vars.transitions) {
-    return getCssVar(varInfo.transitions.prefix, transition);
+    return getCssVar(varInfo.transitions.name, transition);
   }
 };
 export var getIconSize = function getIconSize(size) {
   if (size in vars.icons) {
-    return getCssVar(varInfo.icons.prefix, size);
+    return getCssVar(varInfo.icons.name, size);
   }
 
   return getDimension(size);

package/package.json

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