@flodesk/grain 10.10.9 → 10.10.10

package/es/styles/utilities.js

@@ -27,6 +27,7 @@ import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.regexp.exec.js";
 import { styleConfig } from '../utilities';
 import { propNameToShort } from '../utilities/style-config';
+import { breakpoints, deviceShort } from '../variables';
 
 var generateUtilityClassDeclarations = function generateUtilityClassDeclarations(propertySets) {
   var css = '';
@@ -46,11 +47,6 @@ var generateUtilityClassDeclarations = function generateUtilityClassDeclarations
   return css;
 };
 
-var breakpoints = {
-  tab: 1169,
-  mob: 767
-};
-
 var generateStyleClassDeclarations = function generateStyleClassDeclarations(propertySets) {
   var css = '';
   propertySets.forEach(function (set) {
@@ -64,12 +60,14 @@ var generateStyleClassDeclarations = function generateStyleClassDeclarations(pro
       if (hasHover) css += "[style*=\"".concat(cssVar, ":\"]:hover ").concat(declaration);
 
       if (set.isResponsive) {
-        css += "\n          [style*=\"".concat(cssVar, "-def\"] {").concat(property, ": var(").concat(cssVar, "-def)}\n        ");
+        var device = deviceShort.default;
+        css += "\n          [style*=\"".concat(cssVar, "-").concat(device, "\"] {").concat(property, ": var(").concat(cssVar, "-").concat(device, ")}\n        ");
         Object.entries(breakpoints).forEach(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
-              device = _ref2[0],
+              deviceName = _ref2[0],
               screenSize = _ref2[1];
 
+          var device = deviceShort[deviceName];
           css += "\n            @media (max-width: ".concat(screenSize, "px) {\n              [style*=\"").concat(cssVar, "-").concat(device, "\"] {").concat(property, ": var(").concat(cssVar, "-").concat(device, ")}\n            }\n          ");
         });
       }

package/es/utilities/attributes.js

@@ -1,10 +1,15 @@
 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.object.keys.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);
@@ -24,10 +29,15 @@ export var generateStyleAttributes = function generateStyleAttributes(props) {
       } else {
         var def = value.default,
             mobile = value.mobile,
-            tablet = value.tablet;
-        styles["--".concat(propNameShort, "-def")] = hasTransformer ? propsSet.valueTransformer(def) : def;
-        styles["--".concat(propNameShort, "-mob")] = hasTransformer ? propsSet.valueTransformer(mobile) : mobile;
-        styles["--".concat(propNameShort, "-tab")] = hasTransformer ? propsSet.valueTransformer(tablet) : tablet;
+            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;
       }
     });
   });

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/index.js

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

package/package.json

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