@flodesk/grain 10.9.6 → 10.9.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/es/components/box2.js +6 -5
  2. package/es/styles/utilities.js +51 -9
  3. package/es/utilities/style-config.js +47 -15
  4. package/package.json +1 -1
package/es/components/box2.js CHANGED
@@ -9,7 +9,7 @@ import "core-js/modules/web.dom-collections.for-each.js";
9
9
  import "core-js/modules/es.object.get-own-property-descriptors.js";
10
10
  import "core-js/modules/es.object.define-properties.js";
11
11
  import "core-js/modules/es.object.assign.js";
12
- var _excluded = ["all", "color", "colorHover", "backgroundColor", "backgroundColorHover", "borderColorHover", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "shadowHover", "overflow", "overflowX", "overflowY", "aspectRatio", "zIndex", "tag", "opacity", "opacityHover", "order", "alignSelf", "flex", "transition", "transitionHover", "cursor", "children", "className", "style"];
12
+ var _excluded = ["color", "colorHover", "backgroundColor", "backgroundColorHover", "borderColorHover", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "shadowHover", "overflow", "overflowX", "overflowY", "aspectRatio", "zIndex", "tag", "opacity", "opacityHover", "order", "alignSelf", "flex", "transition", "transitionHover", "cursor", "children", "className", "style"];
13
13
 
14
14
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
15
 
@@ -35,8 +35,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
35
35
  export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
36
36
  var _generateClassNameAtt;
37
37
 
38
- var all = _ref.all,
39
- color = _ref.color,
38
+ var color = _ref.color,
40
39
  colorHover = _ref.colorHover,
41
40
  backgroundColor = _ref.backgroundColor,
42
41
  backgroundColorHover = _ref.backgroundColorHover,
@@ -123,7 +122,9 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
123
122
  transition: transition,
124
123
  transitionHover: transitionHover,
125
124
  aspectRatio: aspectRatio,
126
- flex: flex
125
+ flex: flex,
126
+ opacity: opacity,
127
+ opacityHover: opacityHover
127
128
  }));
128
129
 
129
130
  var propClassName = className ? className : '';
@@ -154,7 +155,7 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
154
155
  shadow: shadow,
155
156
  shadowHover: shadowHover,
156
157
  radius: radius
157
- }, _defineProperty(_generateClassNameAtt, "position", position), _defineProperty(_generateClassNameAtt, "overflow", overflow), _defineProperty(_generateClassNameAtt, "transition", transition), _defineProperty(_generateClassNameAtt, "transitionHover", transitionHover), _defineProperty(_generateClassNameAtt, "cursor", cursor), _generateClassNameAtt)), propClassName].join(' ').replace(/\s+/g, ' ').trim();
158
+ }, _defineProperty(_generateClassNameAtt, "position", position), _defineProperty(_generateClassNameAtt, "overflow", overflow), _defineProperty(_generateClassNameAtt, "transition", transition), _defineProperty(_generateClassNameAtt, "transitionHover", transitionHover), _defineProperty(_generateClassNameAtt, "cursor", cursor), _defineProperty(_generateClassNameAtt, "alignSelf", alignSelf), _generateClassNameAtt)), propClassName].join(' ').replace(/\s+/g, ' ').trim();
158
159
  var Tag = tag;
159
160
  return ___EmotionJSX(Tag, _extends({
160
161
  ref: ref,
package/es/styles/utilities.js CHANGED
@@ -1,17 +1,41 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+
3
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
4
+
5
+ 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); }
6
+
7
+ 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; }
8
+
9
+ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
10
+
11
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
12
+
1
13
  import "core-js/modules/es.object.to-string.js";
2
14
  import "core-js/modules/web.dom-collections.for-each.js";
15
+ import "core-js/modules/es.array.includes.js";
16
+ import "core-js/modules/es.string.includes.js";
3
17
  import "core-js/modules/es.array.concat.js";
18
+ import "core-js/modules/es.object.entries.js";
19
+ import "core-js/modules/es.symbol.js";
20
+ import "core-js/modules/es.symbol.description.js";
21
+ import "core-js/modules/es.symbol.iterator.js";
22
+ import "core-js/modules/es.array.iterator.js";
23
+ import "core-js/modules/es.string.iterator.js";
24
+ import "core-js/modules/web.dom-collections.iterator.js";
25
+ import "core-js/modules/es.array.slice.js";
26
+ import "core-js/modules/es.array.from.js";
27
+ import "core-js/modules/es.regexp.exec.js";
4
28
  import { styleConfig } from '../utilities';
5
29
  import { propNameToShort } from '../utilities/style-config';
6
30
 
7
- var generateUtilityClasses = function generateUtilityClasses(propertySets) {
31
+ var generateUtilityClassDeclarations = function generateUtilityClassDeclarations(propertySets) {
8
32
  var css = '';
9
33
  propertySets.forEach(function (set) {
10
34
  set.variables.forEach(function (variable) {
11
35
  set.props.forEach(function (prop) {
12
36
  var property = prop.property;
13
37
  var cssValue = set.valueTransformer ? set.valueTransformer(variable) : variable;
14
- var hasHover = prop.modifier === 'hover';
38
+ var hasHover = prop.propName.includes('Hover');
15
39
 
16
40
  if (!hasHover) {
17
41
  css += "\n .".concat(propNameToShort(prop.propName), "-").concat(variable, " {\n ").concat(property, ": ").concat(cssValue, "\n }");
@@ -26,25 +50,37 @@ var generateUtilityClasses = function generateUtilityClasses(propertySets) {
26
50
  return css;
27
51
  };
28
52
 
29
- var generateStyleClasses = function generateStyleClasses(propertySets) {
53
+ var breakpoints = {
54
+ tab: 1169,
55
+ mob: 767
56
+ };
57
+
58
+ var generateStyleClassDeclarations = function generateStyleClassDeclarations(propertySets) {
30
59
  var css = '';
31
60
  propertySets.forEach(function (set) {
32
61
  set.props.forEach(function (prop) {
33
62
  var property = prop.property;
34
63
  var propName = prop.propName;
35
64
  var cssVar = "--".concat(propNameToShort(propName));
36
- var hasHover = prop.modifier === 'hover';
65
+ var hasHover = prop.propName.includes('Hover');
37
66
 
38
67
  if (!hasHover) {
39
- css += "\n [style*=\"".concat(cssVar, ":\"] {\n ").concat(property, ": var(").concat(cssVar, ")\n }");
68
+ css += "[style*=\"".concat(cssVar, ":\"] {").concat(property, ": var(").concat(cssVar, ")}");
40
69
  }
41
70
 
42
71
  if (hasHover) {
43
- css += "\n [style*=\"".concat(cssVar, "\"]:hover {\n ").concat(property, ": var(").concat(cssVar, ")\n }");
72
+ css += "[style*=\"".concat(cssVar, "\"]:hover {").concat(property, ": var(").concat(cssVar, ")}");
44
73
  }
45
74
 
46
75
  if (set.isResponsive) {
47
- css += "\n [style*=\"".concat(cssVar, "-def\"] {\n ").concat(property, ": var(").concat(cssVar, "-def)\n }\n\n @media (max-width: 1169px) {\n [style*=\"").concat(cssVar, "-tab\"] {\n ").concat(property, ": var(").concat(cssVar, "-tab);\n }\n }\n\n @media (max-width: 767px) {\n [style*=\"").concat(cssVar, "-mob\"] {\n ").concat(property, ": var(").concat(cssVar, "-mob);\n }\n }\n ");
76
+ css += "\n [style*=\"".concat(cssVar, "-def\"] {").concat(property, ": var(").concat(cssVar, "-def)}\n ");
77
+ Object.entries(breakpoints).forEach(function (_ref) {
78
+ var _ref2 = _slicedToArray(_ref, 2),
79
+ device = _ref2[0],
80
+ screenSize = _ref2[1];
81
+
82
+ css += "\n @media (max-width: ".concat(screenSize, "px) {\n [style*=\"").concat(cssVar, "-").concat(device, "\"] {").concat(property, ": var(").concat(cssVar, "-").concat(device, ")}\n }\n ");
83
+ });
48
84
  }
49
85
  });
50
86
  });
@@ -62,6 +98,12 @@ var spaceProps = styleConfig.spaceProps,
62
98
  dimensionProps = styleConfig.dimensionProps,
63
99
  aspectRatioProps = styleConfig.aspectRatioProps,
64
100
  orderProps = styleConfig.orderProps,
65
- flexProps = styleConfig.flexProps;
66
- var utilities = "\n ".concat(generateUtilityClasses([spaceProps, colorProps, shadowProps, radiusProps, positionProps, overflowProps, transitionProps, cursorProps]), ";\n\n ").concat(generateStyleClasses([dimensionProps, spaceProps, colorProps, shadowProps, radiusProps, transitionProps, aspectRatioProps, orderProps, flexProps]), ";\n");
101
+ flexProps = styleConfig.flexProps,
102
+ sizeProps = styleConfig.sizeProps,
103
+ opacityProps = styleConfig.opacityProps,
104
+ alignSelfProps = styleConfig.alignSelfProps;
105
+ var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radiusProps, transitionProps, sizeProps];
106
+ var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, alignSelfProps]);
107
+ var styleDeclarationProps = [].concat(classAndStyleDeclarationProps, [dimensionProps, aspectRatioProps, orderProps, flexProps, opacityProps]);
108
+ var utilities = "\n ".concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n");
67
109
  export default utilities;
package/es/utilities/style-config.js CHANGED
@@ -27,15 +27,16 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
27
27
 
28
28
  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; }
29
29
 
30
- import { cursors, overflows, positions } from '../types';
30
+ import { alignSelfs, cursors, overflows, positions } from '../types';
31
31
  import { vars } from '../variables';
32
- import { getDimension, getSpace, isSpaceVar } from './responsive';
32
+ import { getDimension, getSpace, getTextSize, isSpaceVar } from './responsive';
33
33
  import { getColor, getRadius, getShadow, getTransition, isColorVar, isRadiusVar, isShadowVar, isTrasitionVar } from './styles';
34
34
  var spaces = [].concat(_toConsumableArray(Object.keys(vars.spaces)), _toConsumableArray(Object.keys(vars.spaceUtils)));
35
35
  var colors = [].concat(_toConsumableArray(Object.keys(vars.colors)), _toConsumableArray(Object.keys(vars.colorUtils)));
36
36
  var shadows = Object.keys(vars.shadows);
37
37
  var radii = Object.keys(vars.radii);
38
38
  var transitions = [].concat(_toConsumableArray(Object.keys(vars.transitions)), _toConsumableArray(Object.keys(vars.transitionUtils)));
39
+ var sizes = Object.keys(vars.texts);
39
40
  export var styleConfig = {
40
41
  spaceProps: {
41
42
  props: [{
@@ -131,7 +132,7 @@ export var styleConfig = {
131
132
  short: 'max-w'
132
133
  }, {
133
134
  propName: 'height',
134
- property: 'max-width',
135
+ property: 'height',
135
136
  short: 'h'
136
137
  }, {
137
138
  propName: 'minHeight',
@@ -153,8 +154,7 @@ export var styleConfig = {
153
154
  }, {
154
155
  propName: 'colorHover',
155
156
  property: 'color',
156
- modifier: 'hover',
157
- short: 'c-hover'
157
+ short: 'c-h'
158
158
  }, {
159
159
  propName: 'backgroundColor',
160
160
  property: 'background-color',
@@ -162,8 +162,7 @@ export var styleConfig = {
162
162
  }, {
163
163
  propName: 'backgroundColorHover',
164
164
  property: 'background-color',
165
- modifier: 'hover',
166
- short: 'bgc-hover'
165
+ short: 'bgc-h'
167
166
  }],
168
167
  valueTransformer: getColor,
169
168
  variableChecker: isColorVar,
@@ -177,8 +176,7 @@ export var styleConfig = {
177
176
  }, {
178
177
  propName: 'shadowHover',
179
178
  property: 'box-shadow',
180
- modifier: 'hover',
181
- short: 'sh-hover'
179
+ short: 'sh-h'
182
180
  }],
183
181
  valueTransformer: getShadow,
184
182
  variableChecker: isShadowVar,
@@ -205,7 +203,7 @@ export var styleConfig = {
205
203
  props: [{
206
204
  propName: 'flex',
207
205
  property: 'flex',
208
- short: 'flex'
206
+ short: 'flx'
209
207
  }],
210
208
  isResponsive: true
211
209
  },
@@ -231,15 +229,15 @@ export var styleConfig = {
231
229
  props: [{
232
230
  propName: 'overflow',
233
231
  property: 'overflow',
234
- short: 'ovf'
232
+ short: 'of'
235
233
  }, {
236
234
  propName: 'overflowX',
237
235
  property: 'overflow-x',
238
- short: 'ovf-x'
236
+ short: 'of-x'
239
237
  }, {
240
238
  propName: 'overflowY',
241
239
  property: 'overflow-y',
242
- short: 'ovf-y'
240
+ short: 'of-y'
243
241
  }],
244
242
  variableChecker: function variableChecker(value) {
245
243
  return overflows.includes(value);
@@ -254,8 +252,7 @@ export var styleConfig = {
254
252
  }, {
255
253
  propName: 'transitionHover',
256
254
  property: 'transition',
257
- modifier: 'hover',
258
- short: 'tr-hover'
255
+ short: 'tr-h'
259
256
  }],
260
257
  valueTransformer: getTransition,
261
258
  variableChecker: isTrasitionVar,
@@ -278,6 +275,41 @@ export var styleConfig = {
278
275
  property: 'aspect-ratio',
279
276
  short: 'ar'
280
277
  }]
278
+ },
279
+ sizeProps: {
280
+ props: [{
281
+ propName: 'size',
282
+ property: 'font-size',
283
+ short: 'txt'
284
+ }],
285
+ isResponsive: true,
286
+ variables: sizes,
287
+ valueTransformer: getTextSize,
288
+ variableChecker: function variableChecker(value) {
289
+ return sizes.includes(value);
290
+ }
291
+ },
292
+ opacityProps: {
293
+ props: [{
294
+ propName: 'opacity',
295
+ property: 'opacity',
296
+ short: 'op'
297
+ }, {
298
+ propName: 'opacityHover',
299
+ property: 'opacity',
300
+ short: 'op-h'
301
+ }]
302
+ },
303
+ alignSelfProps: {
304
+ props: [{
305
+ propName: 'alignSelf',
306
+ property: 'align-self',
307
+ short: 'als'
308
+ }],
309
+ variables: alignSelfs,
310
+ variableChecker: function variableChecker(value) {
311
+ return alignSelfs.includes(value);
312
+ }
281
313
  }
282
314
  };
283
315
  export var propNameToShort = function propNameToShort(propName) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flodesk/grain",
3
- "version": "10.9.6",
3
+ "version": "10.9.7",
4
4
  "description": "Flodesk design system",
5
5
  "module": "es/index.js",
6
6
  "author": "Flodesk",