@flodesk/grain 2.20.2 → 2.20.3

package/es/index.js

@@ -1,3 +1,3 @@
 export * from "./components";
 export * from "./icons";
-export { vars } from "./variables";
+export * from "./variables";

package/es/types.js

@@ -6,7 +6,7 @@ export var types = {
   space: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
   dimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
   side: PropTypes.oneOf(["all", "left", "right", "top", "bottom", "x", "y"]),
-  radius: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.radiuses)), PropTypes.string]),
+  radius: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.radii)), PropTypes.string]),
   shadow: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.shadows)), PropTypes.string]),
   position: PropTypes.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
   textSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.texts)), PropTypes.string, PropTypes.object]),

package/es/utilities/responsive.js

@@ -25,7 +25,7 @@ import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.regexp.exec.js";
 import { getCssVar, isNumber, isString, u, isObject } from ".";
-import { varNames, vars } from "../variables";
+import { vars, varInfo } from "../variables";
 export var getMediaCss = function getMediaCss(breakpoint, property, value) {
   var getValue = function getValue(val) {
     if (val === 0) return val;
@@ -39,15 +39,14 @@ export var getMediaCss = function getMediaCss(breakpoint, property, value) {
 
   return "\n    @media ".concat(breakpoint, " {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
 };
-export var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
-  var varGroupName = varNames[varName].group;
-  var varPrefix = varNames[varName].prefix;
+export var mapObjToMedia = function mapObjToMedia(property, obj, type) {
+  var varPrefix = varInfo[type].prefix;
   var declarations = Object.entries(obj).map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         breakpoint = _ref2[0],
         value = _ref2[1];
 
-    if (value in vars[varGroupName]) {
+    if (value in vars[type]) {
       return getMediaCss(breakpoint, property, getCssVar(varPrefix, value));
     }
 
@@ -64,7 +63,7 @@ export var getDimension = function getDimension(dimension) {
 };
 export var getSpace = function getSpace(value) {
   if (value in vars.spaces) {
-    return getCssVar(varNames.space.prefix, value);
+    return getCssVar(varInfo.spaces.prefix, value);
   }
 
   if (value === 0) return value;
@@ -75,7 +74,7 @@ export var getResponsiveDimension = function getResponsiveDimension(property, di
   if (!dimension) return;
 
   if (isObject(dimension)) {
-    return mapObjToMedia(property, dimension, varNames.space.prefix);
+    return mapObjToMedia(property, dimension, varInfo.spaces.name);
   }
 
   return "".concat(property, ": ").concat(getDimension(dimension));
@@ -84,14 +83,14 @@ export var getResponsiveSpace = function getResponsiveSpace(property, space) {
   if (!space) return;
 
   if (isObject(space)) {
-    return mapObjToMedia(property, space, varNames.space.prefix);
+    return mapObjToMedia(property, space, varInfo.spaces.name);
   }
 
   return "".concat(property, ": ").concat(getSpace(space));
 };
 export var getTextSize = function getTextSize(size) {
   if (size in vars.texts) {
-    return getCssVar(varNames.text.prefix, size);
+    return getCssVar(varInfo.texts.prefix, size);
   }
 
   if (isString(size)) return size;
@@ -101,7 +100,7 @@ export var getResponsiveTextSize = function getResponsiveTextSize(size) {
   var property = "font-size";
 
   if (isObject(size)) {
-    return mapObjToMedia(property, size, varNames.text.prefix);
+    return mapObjToMedia(property, size, varInfo.texts.name);
   }
 
   return "".concat(property, ": ").concat(getTextSize(size));

package/es/utilities/styles.js

@@ -17,33 +17,33 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import { getCssVar, isNumber, isString, u, isArray } from ".";
-import { varNames, vars } from "../variables";
+import { vars, varInfo } from "../variables";
 import { getDimension } from "./responsive";
 
-var allColors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, vars.colors.baseColors), vars.colors.greys), vars.colors.semanticColors), vars.colors.fades);
+var allColors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, vars.colors.bases), vars.colors.greys), vars.colors.semantics), vars.colors.fades);
 
 export var getColor = function getColor(color) {
   if (color in allColors) {
-    return getCssVar(varNames.color.prefix, color);
+    return getCssVar(varInfo.colors.prefix, color);
   }
 
   return color;
 };
 export var getShadow = function getShadow(shadow) {
   if (shadow in vars.shadows) {
-    return getCssVar(varNames.shadow.prefix, shadow);
+    return getCssVar(varInfo.shadows.prefix, shadow);
   }
 
   return shadow;
 };
 export var getWeight = function getWeight(weight) {
   if (weight in vars.weights) {
-    return getCssVar(varNames.weight.prefix, weight);
+    return getCssVar(varInfo.weights.prefix, weight);
   }
 };
 export var getRadius = function getRadius(radius) {
-  if (radius in vars.radiuses) {
-    return getCssVar(varNames.radius.prefix, radius);
+  if (radius in vars.radii) {
+    return getCssVar(varInfo.radii.prefix, 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(varNames.transition.prefix, transition);
+    return getCssVar(varInfo.transitions.prefix, transition);
   }
 };
 export var getIconSize = function getIconSize(size) {
   if (size in vars.icons) {
-    return getCssVar(varNames.icon.prefix, size);
+    return getCssVar(varInfo.icons.prefix, size);
   }
 
   return getDimension(size);

package/es/variables.js

@@ -1,114 +1,117 @@
-var _vars;
-
-import "core-js/modules/es.object.define-property.js";
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 export var grnPrefix = "--grn-";
-export var varNames = {
-  text: {
-    group: "texts",
+export var vars = {
+  texts: {
+    s: "s",
+    m: "m",
+    l: "l",
+    xl: "xl",
+    xxl: "xxl"
+  },
+  icons: {
+    s: "s",
+    m: "m",
+    l: "l",
+    xl: "xl",
+    xxl: "xxl"
+  },
+  spaces: {
+    xs: "xs",
+    s: "s",
+    m: "m",
+    l: "l",
+    xl: "xl",
+    xxl: "xxl"
+  },
+  weights: {
+    normal: "normal",
+    medium: "medium",
+    semiBold: "semiBold"
+  },
+  radii: {
+    s: "s",
+    m: "m",
+    l: "l"
+  },
+  shadows: {
+    s: "s",
+    m: "m",
+    l: "l"
+  },
+  transitions: {
+    slow: "slow",
+    fast: "fast",
+    xFast: "xFast"
+  },
+  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"
+    },
+    bases: {
+      blue: "blue",
+      red: "red"
+    },
+    semantics: {
+      body: "body",
+      bodyDimmed: "bodyDimmed",
+      accent: "accent",
+      backgroundSecondary: "backgroundSecondary",
+      background: "background",
+      overlay: "overlay",
+      border: "border",
+      selection: "selection",
+      danger: "danger",
+      disabledContent: "disabledContent",
+      disabledBackground: "disabledBackground"
+    }
+  }
+};
+export var varInfo = {
+  texts: {
+    name: 'texts',
     prefix: "text"
   },
-  icon: {
-    group: "icons",
+  icons: {
+    name: 'icons',
     prefix: "icon"
   },
-  space: {
-    group: "spaces",
+  spaces: {
+    name: 'spaces',
     prefix: "space"
   },
-  weight: {
-    group: "weights",
+  weights: {
+    name: 'weights',
     prefix: "weight"
   },
-  radius: {
-    group: "radiuses",
+  radii: {
+    name: 'radii',
     prefix: "radius"
   },
-  shadow: {
-    group: "shadows",
+  shadows: {
+    name: 'shadows',
     prefix: "shadow"
   },
-  transition: {
-    group: "transitions",
+  transitions: {
+    name: 'transitions',
     prefix: "transition"
   },
-  color: {
-    group: "colors",
+  colors: {
+    name: 'colors',
     prefix: "color"
   }
-};
-export var vars = (_vars = {}, _defineProperty(_vars, varNames.text.group, {
-  s: "s",
-  m: "m",
-  l: "l",
-  xl: "xl",
-  xxl: "xxl"
-}), _defineProperty(_vars, varNames.icon.group, {
-  s: "s",
-  m: "m",
-  l: "l",
-  xl: "xl",
-  xxl: "xxl"
-}), _defineProperty(_vars, varNames.space.group, {
-  xs: "xs",
-  s: "s",
-  m: "m",
-  l: "l",
-  xl: "xl",
-  xxl: "xxl"
-}), _defineProperty(_vars, varNames.weight.group, {
-  normal: "normal",
-  medium: "medium",
-  semiBold: "semiBold"
-}), _defineProperty(_vars, varNames.radius.group, {
-  s: "s",
-  m: "m",
-  l: "l"
-}), _defineProperty(_vars, varNames.shadow.group, {
-  s: "s",
-  m: "m",
-  l: "l"
-}), _defineProperty(_vars, varNames.transition.group, {
-  slow: "slow",
-  fast: "fast",
-  xFast: "xFast"
-}), _defineProperty(_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);
+};

package/package.json

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