@flodesk/grain 2.20.0 → 2.20.1
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.
- package/es/components/arrange.js +33 -260
- package/es/components/box.js +62 -995
- package/es/components/button.js +36 -100
- package/es/components/icon-button.js +30 -93
- package/es/components/icon-toggle.js +39 -94
- package/es/components/icon.js +30 -126
- package/es/components/index.js +11 -107
- package/es/components/stack.js +26 -81
- package/es/components/text-button.js +28 -66
- package/es/components/text-input.js +76 -138
- package/es/components/text-toggle.js +32 -78
- package/es/components/text.js +33 -159
- package/es/foundational/index.js +9 -23
- package/es/hooks/index.js +1 -15
- package/es/hooks/useMedia.js +21 -17
- package/es/icons/icon-align-center.js +5 -43
- package/es/icons/icon-align-left.js +6 -44
- package/es/icons/icon-align-right.js +6 -44
- package/es/icons/icon-arrow-down.js +5 -43
- package/es/icons/icon-arrow-left.js +5 -43
- package/es/icons/icon-arrow-right.js +5 -43
- package/es/icons/icon-arrow-up.js +5 -43
- package/es/icons/icon-browser.js +9 -47
- package/es/icons/icon-chart.js +5 -43
- package/es/icons/icon-check.js +7 -45
- package/es/icons/icon-chevron-down.js +5 -43
- package/es/icons/icon-chevron-horizontal.js +5 -43
- package/es/icons/icon-chevron-left.js +5 -43
- package/es/icons/icon-chevron-right.js +10 -48
- package/es/icons/icon-chevron-up.js +10 -48
- package/es/icons/icon-chevron-vertical.js +13 -51
- package/es/icons/icon-clip.js +5 -43
- package/es/icons/icon-clock.js +6 -44
- package/es/icons/icon-crop.js +5 -43
- package/es/icons/icon-cross.js +5 -43
- package/es/icons/icon-download.js +8 -46
- package/es/icons/icon-duplicate.js +6 -44
- package/es/icons/icon-ellipsis.js +7 -45
- package/es/icons/icon-file.js +5 -43
- package/es/icons/icon-folder-add.js +5 -43
- package/es/icons/icon-folder.js +5 -43
- package/es/icons/icon-gear.js +6 -44
- package/es/icons/icon-globe.js +5 -43
- package/es/icons/icon-heart.js +5 -43
- package/es/icons/icon-image.js +5 -43
- package/es/icons/icon-link.js +6 -44
- package/es/icons/icon-mail.js +5 -43
- package/es/icons/icon-minus.js +5 -43
- package/es/icons/icon-monitor.js +5 -43
- package/es/icons/icon-pencil.js +5 -43
- package/es/icons/icon-phone.js +5 -43
- package/es/icons/icon-plus.js +5 -43
- package/es/icons/icon-redo.js +5 -43
- package/es/icons/icon-search.js +6 -44
- package/es/icons/icon-send.js +5 -43
- package/es/icons/icon-share.js +5 -43
- package/es/icons/icon-smile.js +8 -46
- package/es/icons/icon-switch.js +5 -43
- package/es/icons/icon-tablet.js +5 -43
- package/es/icons/icon-text-align-center.js +5 -43
- package/es/icons/icon-text-align-left.js +5 -43
- package/es/icons/icon-text-align-right.js +5 -43
- package/es/icons/icon-trash.js +5 -43
- package/es/icons/icon-type.js +5 -43
- package/es/icons/icon-undo.js +5 -43
- package/es/icons/icon-upload.js +8 -46
- package/es/icons/index.js +51 -417
- package/es/index.js +3 -52
- package/es/types.js +23 -38
- package/es/utilities/helpers.js +22 -50
- package/es/utilities/index.js +22 -145
- package/es/utilities/responsive.js +59 -79
- package/es/utilities/styles.js +45 -89
- package/es/variables.js +14 -26
- package/package.json +2 -2
package/es/utilities/index.js
CHANGED
|
@@ -1,145 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
return _responsive.breakpoints;
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
Object.defineProperty(exports, "getTextSize", {
|
|
27
|
-
enumerable: true,
|
|
28
|
-
get: function get() {
|
|
29
|
-
return _responsive.getTextSize;
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
Object.defineProperty(exports, "getResponsiveTextSize", {
|
|
33
|
-
enumerable: true,
|
|
34
|
-
get: function get() {
|
|
35
|
-
return _responsive.getResponsiveTextSize;
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
Object.defineProperty(exports, "getResponsiveSpace", {
|
|
39
|
-
enumerable: true,
|
|
40
|
-
get: function get() {
|
|
41
|
-
return _responsive.getResponsiveSpace;
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
Object.defineProperty(exports, "getColor", {
|
|
45
|
-
enumerable: true,
|
|
46
|
-
get: function get() {
|
|
47
|
-
return _styles.getColor;
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
Object.defineProperty(exports, "getShadow", {
|
|
51
|
-
enumerable: true,
|
|
52
|
-
get: function get() {
|
|
53
|
-
return _styles.getShadow;
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
Object.defineProperty(exports, "getWeight", {
|
|
57
|
-
enumerable: true,
|
|
58
|
-
get: function get() {
|
|
59
|
-
return _styles.getWeight;
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
Object.defineProperty(exports, "getRadius", {
|
|
63
|
-
enumerable: true,
|
|
64
|
-
get: function get() {
|
|
65
|
-
return _styles.getRadius;
|
|
66
|
-
}
|
|
67
|
-
});
|
|
68
|
-
Object.defineProperty(exports, "getTransition", {
|
|
69
|
-
enumerable: true,
|
|
70
|
-
get: function get() {
|
|
71
|
-
return _styles.getTransition;
|
|
72
|
-
}
|
|
73
|
-
});
|
|
74
|
-
Object.defineProperty(exports, "getIconSize", {
|
|
75
|
-
enumerable: true,
|
|
76
|
-
get: function get() {
|
|
77
|
-
return _styles.getIconSize;
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
Object.defineProperty(exports, "getGridColumns", {
|
|
81
|
-
enumerable: true,
|
|
82
|
-
get: function get() {
|
|
83
|
-
return _styles.getGridColumns;
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
Object.defineProperty(exports, "getBorder", {
|
|
87
|
-
enumerable: true,
|
|
88
|
-
get: function get() {
|
|
89
|
-
return _styles.getBorder;
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
Object.defineProperty(exports, "isBrowser", {
|
|
93
|
-
enumerable: true,
|
|
94
|
-
get: function get() {
|
|
95
|
-
return _helpers.isBrowser;
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
-
Object.defineProperty(exports, "getCssVarCore", {
|
|
99
|
-
enumerable: true,
|
|
100
|
-
get: function get() {
|
|
101
|
-
return _helpers.getCssVarCore;
|
|
102
|
-
}
|
|
103
|
-
});
|
|
104
|
-
Object.defineProperty(exports, "getCssVar", {
|
|
105
|
-
enumerable: true,
|
|
106
|
-
get: function get() {
|
|
107
|
-
return _helpers.getCssVar;
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
Object.defineProperty(exports, "u", {
|
|
111
|
-
enumerable: true,
|
|
112
|
-
get: function get() {
|
|
113
|
-
return _helpers.u;
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
Object.defineProperty(exports, "isNumber", {
|
|
117
|
-
enumerable: true,
|
|
118
|
-
get: function get() {
|
|
119
|
-
return _helpers.isNumber;
|
|
120
|
-
}
|
|
121
|
-
});
|
|
122
|
-
Object.defineProperty(exports, "isString", {
|
|
123
|
-
enumerable: true,
|
|
124
|
-
get: function get() {
|
|
125
|
-
return _helpers.isString;
|
|
126
|
-
}
|
|
127
|
-
});
|
|
128
|
-
Object.defineProperty(exports, "isArray", {
|
|
129
|
-
enumerable: true,
|
|
130
|
-
get: function get() {
|
|
131
|
-
return _helpers.isArray;
|
|
132
|
-
}
|
|
133
|
-
});
|
|
134
|
-
Object.defineProperty(exports, "isObject", {
|
|
135
|
-
enumerable: true,
|
|
136
|
-
get: function get() {
|
|
137
|
-
return _helpers.isObject;
|
|
138
|
-
}
|
|
139
|
-
});
|
|
140
|
-
|
|
141
|
-
var _responsive = require("./responsive");
|
|
142
|
-
|
|
143
|
-
var _styles = require("./styles");
|
|
144
|
-
|
|
145
|
-
var _helpers = require("./helpers");
|
|
1
|
+
export { getDimension } from "./responsive";
|
|
2
|
+
export { getResponsiveDimension } from "./responsive";
|
|
3
|
+
export { breakpoints } from "./responsive";
|
|
4
|
+
export { getColor } from "./styles";
|
|
5
|
+
export { getShadow } from "./styles";
|
|
6
|
+
export { getTextSize } from "./responsive";
|
|
7
|
+
export { getResponsiveTextSize } from "./responsive";
|
|
8
|
+
export { getWeight } from "./styles";
|
|
9
|
+
export { getRadius } from "./styles";
|
|
10
|
+
export { getTransition } from "./styles";
|
|
11
|
+
export { getResponsiveSpace } from "./responsive";
|
|
12
|
+
export { getIconSize } from "./styles";
|
|
13
|
+
export { getGridColumns } from "./styles";
|
|
14
|
+
export { getBorder } from "./styles";
|
|
15
|
+
export { isBrowser } from "./helpers";
|
|
16
|
+
export { getCssVarCore } from "./helpers";
|
|
17
|
+
export { getCssVar } from "./helpers";
|
|
18
|
+
export { u } from "./helpers";
|
|
19
|
+
export { isNumber } from "./helpers";
|
|
20
|
+
export { isString } from "./helpers";
|
|
21
|
+
export { isArray } from "./helpers";
|
|
22
|
+
export { isObject } from "./helpers";
|
|
@@ -1,33 +1,36 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
|
+
|
|
13
|
+
import "core-js/modules/es.array.concat.js";
|
|
14
|
+
import "core-js/modules/es.array.map.js";
|
|
15
|
+
import "core-js/modules/es.object.entries.js";
|
|
16
|
+
import "core-js/modules/es.array.reverse.js";
|
|
17
|
+
import "core-js/modules/es.symbol.js";
|
|
18
|
+
import "core-js/modules/es.symbol.description.js";
|
|
19
|
+
import "core-js/modules/es.object.to-string.js";
|
|
20
|
+
import "core-js/modules/es.symbol.iterator.js";
|
|
21
|
+
import "core-js/modules/es.array.iterator.js";
|
|
22
|
+
import "core-js/modules/es.string.iterator.js";
|
|
23
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
|
24
|
+
import "core-js/modules/es.array.slice.js";
|
|
25
|
+
import "core-js/modules/es.array.from.js";
|
|
26
|
+
import "core-js/modules/es.regexp.exec.js";
|
|
27
|
+
import { getCssVar, isNumber, isString, u, isObject } from ".";
|
|
28
|
+
import { varNames, vars } from "../variables";
|
|
29
|
+
export var getMediaCss = function getMediaCss(breakpoint, property, value) {
|
|
27
30
|
var getValue = function getValue(val) {
|
|
28
31
|
if (val === 0) return val;
|
|
29
|
-
if (
|
|
30
|
-
if (
|
|
32
|
+
if (isNumber(val)) return u(val);
|
|
33
|
+
if (isString(val)) return val;
|
|
31
34
|
};
|
|
32
35
|
|
|
33
36
|
if (breakpoint === "default") {
|
|
@@ -36,19 +39,16 @@ var getMediaCss = function getMediaCss(breakpoint, property, value) {
|
|
|
36
39
|
|
|
37
40
|
return "\n @media ".concat(breakpoint, " {\n ").concat(property, ": ").concat(getValue(value), ";\n }\n ");
|
|
38
41
|
};
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
|
|
43
|
-
var varGroupName = _variables.varNames[varName].group;
|
|
44
|
-
var varPrefix = _variables.varNames[varName].prefix;
|
|
42
|
+
export var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
|
|
43
|
+
var varGroupName = varNames[varName].group;
|
|
44
|
+
var varPrefix = varNames[varName].prefix;
|
|
45
45
|
var declarations = Object.entries(obj).map(function (_ref) {
|
|
46
|
-
var _ref2 = (
|
|
46
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
|
47
47
|
breakpoint = _ref2[0],
|
|
48
48
|
value = _ref2[1];
|
|
49
49
|
|
|
50
|
-
if (value in
|
|
51
|
-
return getMediaCss(breakpoint, property,
|
|
50
|
+
if (value in vars[varGroupName]) {
|
|
51
|
+
return getMediaCss(breakpoint, property, getCssVar(varPrefix, value));
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
return getMediaCss(breakpoint, property, value);
|
|
@@ -57,72 +57,52 @@ var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
|
|
|
57
57
|
declarations.reverse().join("");
|
|
58
58
|
return declarations;
|
|
59
59
|
};
|
|
60
|
-
|
|
61
|
-
exports.mapObjToMedia = mapObjToMedia;
|
|
62
|
-
|
|
63
|
-
var getDimension = function getDimension(dimension) {
|
|
60
|
+
export var getDimension = function getDimension(dimension) {
|
|
64
61
|
if (dimension === 0) return dimension;
|
|
65
|
-
if (
|
|
66
|
-
if (
|
|
62
|
+
if (isString(dimension)) return dimension;
|
|
63
|
+
if (isNumber(dimension)) return u(dimension);
|
|
67
64
|
};
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
var getSpace = function getSpace(value) {
|
|
72
|
-
if (value in _variables.vars.spaces) {
|
|
73
|
-
return (0, _.getCssVar)(_variables.varNames.space.prefix, value);
|
|
65
|
+
export var getSpace = function getSpace(value) {
|
|
66
|
+
if (value in vars.spaces) {
|
|
67
|
+
return getCssVar(varNames.space.prefix, value);
|
|
74
68
|
}
|
|
75
69
|
|
|
76
70
|
if (value === 0) return value;
|
|
77
|
-
if (
|
|
78
|
-
if (
|
|
71
|
+
if (isString(value)) return value;
|
|
72
|
+
if (isNumber(value)) return u(value);
|
|
79
73
|
};
|
|
80
|
-
|
|
81
|
-
exports.getSpace = getSpace;
|
|
82
|
-
|
|
83
|
-
var getResponsiveDimension = function getResponsiveDimension(property, dimension) {
|
|
74
|
+
export var getResponsiveDimension = function getResponsiveDimension(property, dimension) {
|
|
84
75
|
if (!dimension) return;
|
|
85
76
|
|
|
86
|
-
if (
|
|
87
|
-
return mapObjToMedia(property, dimension,
|
|
77
|
+
if (isObject(dimension)) {
|
|
78
|
+
return mapObjToMedia(property, dimension, varNames.space.prefix);
|
|
88
79
|
}
|
|
89
80
|
|
|
90
81
|
return "".concat(property, ": ").concat(getDimension(dimension));
|
|
91
82
|
};
|
|
92
|
-
|
|
93
|
-
exports.getResponsiveDimension = getResponsiveDimension;
|
|
94
|
-
|
|
95
|
-
var getResponsiveSpace = function getResponsiveSpace(property, space) {
|
|
83
|
+
export var getResponsiveSpace = function getResponsiveSpace(property, space) {
|
|
96
84
|
if (!space) return;
|
|
97
85
|
|
|
98
|
-
if (
|
|
99
|
-
return mapObjToMedia(property, space,
|
|
86
|
+
if (isObject(space)) {
|
|
87
|
+
return mapObjToMedia(property, space, varNames.space.prefix);
|
|
100
88
|
}
|
|
101
89
|
|
|
102
90
|
return "".concat(property, ": ").concat(getSpace(space));
|
|
103
91
|
};
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
var getTextSize = function getTextSize(size) {
|
|
108
|
-
if (size in _variables.vars.texts) {
|
|
109
|
-
return (0, _.getCssVar)(_variables.varNames.text.prefix, size);
|
|
92
|
+
export var getTextSize = function getTextSize(size) {
|
|
93
|
+
if (size in vars.texts) {
|
|
94
|
+
return getCssVar(varNames.text.prefix, size);
|
|
110
95
|
}
|
|
111
96
|
|
|
112
|
-
if (
|
|
97
|
+
if (isString(size)) return size;
|
|
113
98
|
};
|
|
114
|
-
|
|
115
|
-
exports.getTextSize = getTextSize;
|
|
116
|
-
|
|
117
|
-
var getResponsiveTextSize = function getResponsiveTextSize(size) {
|
|
99
|
+
export var getResponsiveTextSize = function getResponsiveTextSize(size) {
|
|
118
100
|
if (!size) return;
|
|
119
101
|
var property = "font-size";
|
|
120
102
|
|
|
121
|
-
if (
|
|
122
|
-
return mapObjToMedia(property, size,
|
|
103
|
+
if (isObject(size)) {
|
|
104
|
+
return mapObjToMedia(property, size, varNames.text.prefix);
|
|
123
105
|
}
|
|
124
106
|
|
|
125
107
|
return "".concat(property, ": ").concat(getTextSize(size));
|
|
126
|
-
};
|
|
127
|
-
|
|
128
|
-
exports.getResponsiveTextSize = getResponsiveTextSize;
|
|
108
|
+
};
|
package/es/utilities/styles.js
CHANGED
|
@@ -1,121 +1,79 @@
|
|
|
1
|
-
|
|
1
|
+
import "core-js/modules/es.array.map.js";
|
|
2
|
+
import "core-js/modules/es.array.concat.js";
|
|
3
|
+
import "core-js/modules/es.object.define-property.js";
|
|
4
|
+
import "core-js/modules/es.object.keys.js";
|
|
5
|
+
import "core-js/modules/es.symbol.js";
|
|
6
|
+
import "core-js/modules/es.array.filter.js";
|
|
7
|
+
import "core-js/modules/es.object.to-string.js";
|
|
8
|
+
import "core-js/modules/es.object.get-own-property-descriptor.js";
|
|
9
|
+
import "core-js/modules/web.dom-collections.for-each.js";
|
|
10
|
+
import "core-js/modules/es.object.get-own-property-descriptors.js";
|
|
11
|
+
import "core-js/modules/es.object.define-properties.js";
|
|
2
12
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
require("core-js/modules/es.symbol.js");
|
|
6
|
-
|
|
7
|
-
require("core-js/modules/es.array.filter.js");
|
|
8
|
-
|
|
9
|
-
require("core-js/modules/es.object.to-string.js");
|
|
10
|
-
|
|
11
|
-
require("core-js/modules/es.object.get-own-property-descriptor.js");
|
|
12
|
-
|
|
13
|
-
require("core-js/modules/web.dom-collections.for-each.js");
|
|
14
|
-
|
|
15
|
-
require("core-js/modules/es.object.get-own-property-descriptors.js");
|
|
16
|
-
|
|
17
|
-
require("core-js/modules/es.object.define-properties.js");
|
|
18
|
-
|
|
19
|
-
require("core-js/modules/es.object.define-property.js");
|
|
20
|
-
|
|
21
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
22
|
-
|
|
23
|
-
Object.defineProperty(exports, "__esModule", {
|
|
24
|
-
value: true
|
|
25
|
-
});
|
|
26
|
-
exports.getBorder = exports.getGridColumns = exports.getIconSize = exports.getTransition = exports.getRadius = exports.getWeight = exports.getShadow = exports.getColor = void 0;
|
|
27
|
-
|
|
28
|
-
require("core-js/modules/es.array.map.js");
|
|
29
|
-
|
|
30
|
-
require("core-js/modules/es.array.concat.js");
|
|
31
|
-
|
|
32
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
33
|
-
|
|
34
|
-
var _ = require(".");
|
|
35
|
-
|
|
36
|
-
var _variables = require("../variables");
|
|
13
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
37
14
|
|
|
38
|
-
var
|
|
15
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
39
16
|
|
|
40
|
-
function
|
|
17
|
+
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; }
|
|
41
18
|
|
|
42
|
-
|
|
19
|
+
import { getCssVar, isNumber, isString, u, isArray } from ".";
|
|
20
|
+
import { varNames, vars } from "../variables";
|
|
21
|
+
import { getDimension } from "./responsive";
|
|
43
22
|
|
|
44
|
-
var allColors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({},
|
|
23
|
+
var allColors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, vars.colors.baseColors), vars.colors.greys), vars.colors.semanticColors), vars.colors.fades);
|
|
45
24
|
|
|
46
|
-
var getColor = function getColor(color) {
|
|
25
|
+
export var getColor = function getColor(color) {
|
|
47
26
|
if (color in allColors) {
|
|
48
|
-
return
|
|
27
|
+
return getCssVar(varNames.color.prefix, color);
|
|
49
28
|
}
|
|
50
29
|
|
|
51
30
|
return color;
|
|
52
31
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
var getShadow = function getShadow(shadow) {
|
|
57
|
-
if (shadow in _variables.vars.shadows) {
|
|
58
|
-
return (0, _.getCssVar)(_variables.varNames.shadow.prefix, shadow);
|
|
32
|
+
export var getShadow = function getShadow(shadow) {
|
|
33
|
+
if (shadow in vars.shadows) {
|
|
34
|
+
return getCssVar(varNames.shadow.prefix, shadow);
|
|
59
35
|
}
|
|
60
36
|
|
|
61
37
|
return shadow;
|
|
62
38
|
};
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
var getWeight = function getWeight(weight) {
|
|
67
|
-
if (weight in _variables.vars.weights) {
|
|
68
|
-
return (0, _.getCssVar)(_variables.varNames.weight.prefix, weight);
|
|
39
|
+
export var getWeight = function getWeight(weight) {
|
|
40
|
+
if (weight in vars.weights) {
|
|
41
|
+
return getCssVar(varNames.weight.prefix, weight);
|
|
69
42
|
}
|
|
70
43
|
};
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
var getRadius = function getRadius(radius) {
|
|
75
|
-
if (radius in _variables.vars.radiuses) {
|
|
76
|
-
return (0, _.getCssVar)(_variables.varNames.radius.prefix, radius);
|
|
44
|
+
export var getRadius = function getRadius(radius) {
|
|
45
|
+
if (radius in vars.radiuses) {
|
|
46
|
+
return getCssVar(varNames.radius.prefix, radius);
|
|
77
47
|
}
|
|
78
48
|
|
|
79
49
|
if (radius === 0) return radius;
|
|
80
|
-
if (
|
|
81
|
-
if (
|
|
50
|
+
if (isString(radius)) return radius;
|
|
51
|
+
if (isNumber(radius)) return u(radius);
|
|
82
52
|
};
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
var getTransition = function getTransition(transition) {
|
|
87
|
-
if (transition in _variables.vars.transitions) {
|
|
88
|
-
return (0, _.getCssVar)(_variables.varNames.transition.prefix, transition);
|
|
53
|
+
export var getTransition = function getTransition(transition) {
|
|
54
|
+
if (transition in vars.transitions) {
|
|
55
|
+
return getCssVar(varNames.transition.prefix, transition);
|
|
89
56
|
}
|
|
90
57
|
};
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
var getIconSize = function getIconSize(size) {
|
|
95
|
-
if (size in _variables.vars.icons) {
|
|
96
|
-
return (0, _.getCssVar)(_variables.varNames.icon.prefix, size);
|
|
58
|
+
export var getIconSize = function getIconSize(size) {
|
|
59
|
+
if (size in vars.icons) {
|
|
60
|
+
return getCssVar(varNames.icon.prefix, size);
|
|
97
61
|
}
|
|
98
62
|
|
|
99
|
-
return
|
|
63
|
+
return getDimension(size);
|
|
100
64
|
};
|
|
101
|
-
|
|
102
|
-
exports.getIconSize = getIconSize;
|
|
103
|
-
|
|
104
|
-
var getGridColumns = function getGridColumns(columns) {
|
|
65
|
+
export var getGridColumns = function getGridColumns(columns) {
|
|
105
66
|
if (columns) {
|
|
106
|
-
if (
|
|
67
|
+
if (isArray(columns)) {
|
|
107
68
|
return columns.map(function (column) {
|
|
108
|
-
return
|
|
69
|
+
return getDimension(column);
|
|
109
70
|
}).join(" ");
|
|
110
71
|
}
|
|
111
72
|
|
|
112
|
-
if (
|
|
73
|
+
if (isString(columns)) return columns;
|
|
113
74
|
}
|
|
114
75
|
};
|
|
115
|
-
|
|
116
|
-
exports.getGridColumns = getGridColumns;
|
|
117
|
-
|
|
118
|
-
var getBorder = function getBorder(borderSide, borderWidth, borderColor) {
|
|
76
|
+
export var getBorder = function getBorder(borderSide, borderWidth, borderColor) {
|
|
119
77
|
var borderSides = {
|
|
120
78
|
all: ["top", "right", "bottom", "left"],
|
|
121
79
|
x: ["right", "left"],
|
|
@@ -129,8 +87,6 @@ var getBorder = function getBorder(borderSide, borderWidth, borderColor) {
|
|
|
129
87
|
if (borderSide in borderSides) {
|
|
130
88
|
return "\n ".concat(borderSides[borderSide].map(function (side) {
|
|
131
89
|
return "border-".concat(side, "-style: solid");
|
|
132
|
-
}).join(";"), ";\n\n border-color: ").concat(getColor(borderColor), ";\n border-width: ").concat(
|
|
90
|
+
}).join(";"), ";\n\n border-color: ").concat(getColor(borderColor), ";\n border-width: ").concat(getDimension(borderWidth), ";\n ");
|
|
133
91
|
}
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
exports.getBorder = getBorder;
|
|
92
|
+
};
|
package/es/variables.js
CHANGED
|
@@ -1,21 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
require("core-js/modules/es.object.define-property.js");
|
|
4
|
-
|
|
5
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports.vars = exports.varNames = exports.grnPrefix = void 0;
|
|
1
|
+
var _vars;
|
|
11
2
|
|
|
12
|
-
|
|
3
|
+
import "core-js/modules/es.object.define-property.js";
|
|
13
4
|
|
|
14
|
-
|
|
5
|
+
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; }
|
|
15
6
|
|
|
16
|
-
var grnPrefix = "--grn-";
|
|
17
|
-
|
|
18
|
-
var varNames = {
|
|
7
|
+
export var grnPrefix = "--grn-";
|
|
8
|
+
export var varNames = {
|
|
19
9
|
text: {
|
|
20
10
|
group: "texts",
|
|
21
11
|
prefix: "text"
|
|
@@ -49,43 +39,42 @@ var varNames = {
|
|
|
49
39
|
prefix: "color"
|
|
50
40
|
}
|
|
51
41
|
};
|
|
52
|
-
|
|
53
|
-
var vars = (_vars = {}, (0, _defineProperty2.default)(_vars, varNames.text.group, {
|
|
42
|
+
export var vars = (_vars = {}, _defineProperty(_vars, varNames.text.group, {
|
|
54
43
|
s: "s",
|
|
55
44
|
m: "m",
|
|
56
45
|
l: "l",
|
|
57
46
|
xl: "xl",
|
|
58
47
|
xxl: "xxl"
|
|
59
|
-
}), (
|
|
48
|
+
}), _defineProperty(_vars, varNames.icon.group, {
|
|
60
49
|
s: "s",
|
|
61
50
|
m: "m",
|
|
62
51
|
l: "l",
|
|
63
52
|
xl: "xl",
|
|
64
53
|
xxl: "xxl"
|
|
65
|
-
}), (
|
|
54
|
+
}), _defineProperty(_vars, varNames.space.group, {
|
|
66
55
|
xs: "xs",
|
|
67
56
|
s: "s",
|
|
68
57
|
m: "m",
|
|
69
58
|
l: "l",
|
|
70
59
|
xl: "xl",
|
|
71
60
|
xxl: "xxl"
|
|
72
|
-
}), (
|
|
61
|
+
}), _defineProperty(_vars, varNames.weight.group, {
|
|
73
62
|
normal: "normal",
|
|
74
63
|
medium: "medium",
|
|
75
64
|
semiBold: "semiBold"
|
|
76
|
-
}), (
|
|
65
|
+
}), _defineProperty(_vars, varNames.radius.group, {
|
|
77
66
|
s: "s",
|
|
78
67
|
m: "m",
|
|
79
68
|
l: "l"
|
|
80
|
-
}), (
|
|
69
|
+
}), _defineProperty(_vars, varNames.shadow.group, {
|
|
81
70
|
s: "s",
|
|
82
71
|
m: "m",
|
|
83
72
|
l: "l"
|
|
84
|
-
}), (
|
|
73
|
+
}), _defineProperty(_vars, varNames.transition.group, {
|
|
85
74
|
slow: "slow",
|
|
86
75
|
fast: "fast",
|
|
87
76
|
xFast: "xFast"
|
|
88
|
-
}), (
|
|
77
|
+
}), _defineProperty(_vars, varNames.color.group, {
|
|
89
78
|
greys: {
|
|
90
79
|
grey8: "grey8",
|
|
91
80
|
grey7: "grey7",
|
|
@@ -122,5 +111,4 @@ var vars = (_vars = {}, (0, _defineProperty2.default)(_vars, varNames.text.group
|
|
|
122
111
|
disabledContent: "disabledContent",
|
|
123
112
|
disabledBackground: "disabledBackground"
|
|
124
113
|
}
|
|
125
|
-
}), _vars);
|
|
126
|
-
exports.vars = vars;
|
|
114
|
+
}), _vars);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flodesk/grain",
|
|
3
|
-
"version": "2.20.
|
|
3
|
+
"version": "2.20.1",
|
|
4
4
|
"description": "Flodesk design system",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"author": "Flodesk",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"start": "next start",
|
|
13
13
|
"lint": "next lint",
|
|
14
14
|
"semantic-release": "semantic-release",
|
|
15
|
-
"build:es": "del es/* && cross-env NODE_ENV=production babel --config-file ./babel.config.es.js --out-dir es --copy-files src"
|
|
15
|
+
"build:es": "del es/* && cross-env NODE_ENV=production babel --no-babelrc --config-file ./babel.config.es.js --out-dir es --copy-files src"
|
|
16
16
|
},
|
|
17
17
|
"publishConfig": {
|
|
18
18
|
"access": "public"
|