@flodesk/grain 2.19.13 → 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 -99
- package/es/components/stack.js +39 -0
- 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 +60 -94
- 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,68 +1,54 @@
|
|
|
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
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
exports.breakpoints = breakpoints;
|
|
31
|
-
|
|
32
|
-
var getBrakpoint = function getBrakpoint(breakpoint) {
|
|
33
|
-
if (breakpoint in breakpoints) {
|
|
34
|
-
return "(max-width: ".concat(breakpoints[breakpoint], ")");
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
return breakpoint;
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
var getMediaCss = function getMediaCss(breakpoint, property, value) {
|
|
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) {
|
|
41
30
|
var getValue = function getValue(val) {
|
|
42
31
|
if (val === 0) return val;
|
|
43
|
-
if (
|
|
44
|
-
if (
|
|
32
|
+
if (isNumber(val)) return u(val);
|
|
33
|
+
if (isString(val)) return val;
|
|
45
34
|
};
|
|
46
35
|
|
|
47
36
|
if (breakpoint === "default") {
|
|
48
37
|
return "".concat(property, ": ").concat(getValue(value), ";");
|
|
49
38
|
}
|
|
50
39
|
|
|
51
|
-
return "\n @media ".concat(
|
|
40
|
+
return "\n @media ".concat(breakpoint, " {\n ").concat(property, ": ").concat(getValue(value), ";\n }\n ");
|
|
52
41
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
|
|
57
|
-
var varGroupName = _variables.varNames[varName].group;
|
|
58
|
-
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;
|
|
59
45
|
var declarations = Object.entries(obj).map(function (_ref) {
|
|
60
|
-
var _ref2 = (
|
|
46
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
|
61
47
|
breakpoint = _ref2[0],
|
|
62
48
|
value = _ref2[1];
|
|
63
49
|
|
|
64
|
-
if (value in
|
|
65
|
-
return getMediaCss(breakpoint, property,
|
|
50
|
+
if (value in vars[varGroupName]) {
|
|
51
|
+
return getMediaCss(breakpoint, property, getCssVar(varPrefix, value));
|
|
66
52
|
}
|
|
67
53
|
|
|
68
54
|
return getMediaCss(breakpoint, property, value);
|
|
@@ -71,72 +57,52 @@ var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
|
|
|
71
57
|
declarations.reverse().join("");
|
|
72
58
|
return declarations;
|
|
73
59
|
};
|
|
74
|
-
|
|
75
|
-
exports.mapObjToMedia = mapObjToMedia;
|
|
76
|
-
|
|
77
|
-
var getDimension = function getDimension(dimension) {
|
|
60
|
+
export var getDimension = function getDimension(dimension) {
|
|
78
61
|
if (dimension === 0) return dimension;
|
|
79
|
-
if (
|
|
80
|
-
if (
|
|
62
|
+
if (isString(dimension)) return dimension;
|
|
63
|
+
if (isNumber(dimension)) return u(dimension);
|
|
81
64
|
};
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
var getSpace = function getSpace(value) {
|
|
86
|
-
if (value in _variables.vars.spaces) {
|
|
87
|
-
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);
|
|
88
68
|
}
|
|
89
69
|
|
|
90
70
|
if (value === 0) return value;
|
|
91
|
-
if (
|
|
92
|
-
if (
|
|
71
|
+
if (isString(value)) return value;
|
|
72
|
+
if (isNumber(value)) return u(value);
|
|
93
73
|
};
|
|
94
|
-
|
|
95
|
-
exports.getSpace = getSpace;
|
|
96
|
-
|
|
97
|
-
var getResponsiveDimension = function getResponsiveDimension(property, dimension) {
|
|
74
|
+
export var getResponsiveDimension = function getResponsiveDimension(property, dimension) {
|
|
98
75
|
if (!dimension) return;
|
|
99
76
|
|
|
100
|
-
if (
|
|
101
|
-
return mapObjToMedia(property, dimension,
|
|
77
|
+
if (isObject(dimension)) {
|
|
78
|
+
return mapObjToMedia(property, dimension, varNames.space.prefix);
|
|
102
79
|
}
|
|
103
80
|
|
|
104
81
|
return "".concat(property, ": ").concat(getDimension(dimension));
|
|
105
82
|
};
|
|
106
|
-
|
|
107
|
-
exports.getResponsiveDimension = getResponsiveDimension;
|
|
108
|
-
|
|
109
|
-
var getResponsiveSpace = function getResponsiveSpace(property, space) {
|
|
83
|
+
export var getResponsiveSpace = function getResponsiveSpace(property, space) {
|
|
110
84
|
if (!space) return;
|
|
111
85
|
|
|
112
|
-
if (
|
|
113
|
-
return mapObjToMedia(property, space,
|
|
86
|
+
if (isObject(space)) {
|
|
87
|
+
return mapObjToMedia(property, space, varNames.space.prefix);
|
|
114
88
|
}
|
|
115
89
|
|
|
116
90
|
return "".concat(property, ": ").concat(getSpace(space));
|
|
117
91
|
};
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
var getTextSize = function getTextSize(size) {
|
|
122
|
-
if (size in _variables.vars.texts) {
|
|
123
|
-
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);
|
|
124
95
|
}
|
|
125
96
|
|
|
126
|
-
if (
|
|
97
|
+
if (isString(size)) return size;
|
|
127
98
|
};
|
|
128
|
-
|
|
129
|
-
exports.getTextSize = getTextSize;
|
|
130
|
-
|
|
131
|
-
var getResponsiveTextSize = function getResponsiveTextSize(size) {
|
|
99
|
+
export var getResponsiveTextSize = function getResponsiveTextSize(size) {
|
|
132
100
|
if (!size) return;
|
|
133
101
|
var property = "font-size";
|
|
134
102
|
|
|
135
|
-
if (
|
|
136
|
-
return mapObjToMedia(property, size,
|
|
103
|
+
if (isObject(size)) {
|
|
104
|
+
return mapObjToMedia(property, size, varNames.text.prefix);
|
|
137
105
|
}
|
|
138
106
|
|
|
139
107
|
return "".concat(property, ": ").concat(getTextSize(size));
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
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.
|
|
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"
|