@flodesk/grain 2.1.0 → 2.3.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/box/index.js +64 -17
- package/es/components/text/index.js +7 -3
- package/es/styles/base.css +15 -54
- package/es/styles/variables.css +57 -0
- package/es/types/index.js +8 -5
- package/es/utilities/index.js +26 -7
- package/es/variables/index.js +52 -39
- package/package.json +2 -2
|
@@ -1,35 +1,60 @@
|
|
|
1
1
|
import "core-js/modules/es.array.slice.js";
|
|
2
2
|
import "core-js/modules/es.object.freeze.js";
|
|
3
3
|
import "core-js/modules/es.object.define-properties.js";
|
|
4
|
+
import "core-js/modules/es.object.keys.js";
|
|
5
|
+
import "core-js/modules/es.array.index-of.js";
|
|
6
|
+
import "core-js/modules/es.symbol.js";
|
|
7
|
+
var _excluded = ["children", "color", "backgroundColor", "borderSide", "borderWidth", "borderColor", "width", "height", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right"];
|
|
4
8
|
|
|
5
9
|
var _templateObject;
|
|
6
10
|
|
|
11
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
12
|
+
|
|
13
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
14
|
+
|
|
7
15
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
8
16
|
|
|
9
|
-
import
|
|
10
|
-
import
|
|
17
|
+
import "core-js/modules/es.array.concat.js";
|
|
18
|
+
import "core-js/modules/es.object.assign.js";
|
|
19
|
+
import { getBorder, getColor, getRadius, getSpace } from '../../utilities';
|
|
11
20
|
import React from "react";
|
|
12
|
-
import { cssVars } from '../../variables';
|
|
13
21
|
import styled from "@emotion/styled";
|
|
14
22
|
import { types } from '../../types';
|
|
15
|
-
|
|
23
|
+
|
|
24
|
+
var getSpaceCss = function getSpaceCss(propertyName, propertyValue) {
|
|
25
|
+
if (propertyValue || propertyValue === 0) {
|
|
26
|
+
return "".concat(propertyName, ": ").concat(getSpace(propertyValue));
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", ";\n \n ", ";\n ", ";\n ", ";\n ", ";\n \n ", ";\n ", ";\n ", ";\n ", ";\n \n ", ";\n ", ";\n ", ";\n ", ";\n \n ", ";\n \n color: ", ";\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: ", ";\n"])), function (p) {
|
|
16
31
|
return getBorder(p.borderSide, p.borderWidth, p.borderColor);
|
|
17
32
|
}, function (p) {
|
|
18
|
-
return
|
|
33
|
+
return getSpaceCss('padding-top', p.paddingTop);
|
|
34
|
+
}, function (p) {
|
|
35
|
+
return getSpaceCss('padding-bottom', p.paddingBottom);
|
|
19
36
|
}, function (p) {
|
|
20
|
-
return
|
|
37
|
+
return getSpaceCss('padding-left', p.paddingLeft);
|
|
21
38
|
}, function (p) {
|
|
22
|
-
return
|
|
39
|
+
return getSpaceCss('padding-right', p.paddingRight);
|
|
23
40
|
}, function (p) {
|
|
24
|
-
return
|
|
41
|
+
return getSpaceCss('margin-top', p.marginTop);
|
|
25
42
|
}, function (p) {
|
|
26
|
-
return
|
|
43
|
+
return getSpaceCss('margin-bottom', p.marginBottom);
|
|
27
44
|
}, function (p) {
|
|
28
|
-
return
|
|
45
|
+
return getSpaceCss('margin-left', p.marginLeft);
|
|
29
46
|
}, function (p) {
|
|
30
|
-
return
|
|
47
|
+
return getSpaceCss('margin-right', p.marginRight);
|
|
31
48
|
}, function (p) {
|
|
32
|
-
return
|
|
49
|
+
return getSpaceCss('top', p.top);
|
|
50
|
+
}, function (p) {
|
|
51
|
+
return getSpaceCss('bottom', p.bottom);
|
|
52
|
+
}, function (p) {
|
|
53
|
+
return getSpaceCss('left', p.left);
|
|
54
|
+
}, function (p) {
|
|
55
|
+
return getSpaceCss('right', p.right);
|
|
56
|
+
}, function (p) {
|
|
57
|
+
return p.position && "position: ".concat(p.position);
|
|
33
58
|
}, function (p) {
|
|
34
59
|
return getColor(p.color);
|
|
35
60
|
}, function (p) {
|
|
@@ -38,6 +63,8 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
|
|
|
38
63
|
return getSpace(p.width);
|
|
39
64
|
}, function (p) {
|
|
40
65
|
return getSpace(p.height);
|
|
66
|
+
}, function (p) {
|
|
67
|
+
return getRadius(p.radius);
|
|
41
68
|
});
|
|
42
69
|
export var Box = function Box(_ref) {
|
|
43
70
|
var children = _ref.children,
|
|
@@ -48,6 +75,7 @@ export var Box = function Box(_ref) {
|
|
|
48
75
|
borderColor = _ref.borderColor,
|
|
49
76
|
width = _ref.width,
|
|
50
77
|
height = _ref.height,
|
|
78
|
+
radius = _ref.radius,
|
|
51
79
|
padding = _ref.padding,
|
|
52
80
|
paddingTop = _ref.paddingTop,
|
|
53
81
|
paddingBottom = _ref.paddingBottom,
|
|
@@ -61,8 +89,15 @@ export var Box = function Box(_ref) {
|
|
|
61
89
|
marginLeft = _ref.marginLeft,
|
|
62
90
|
marginRight = _ref.marginRight,
|
|
63
91
|
marginX = _ref.marginX,
|
|
64
|
-
marginY = _ref.marginY
|
|
65
|
-
|
|
92
|
+
marginY = _ref.marginY,
|
|
93
|
+
position = _ref.position,
|
|
94
|
+
top = _ref.top,
|
|
95
|
+
bottom = _ref.bottom,
|
|
96
|
+
left = _ref.left,
|
|
97
|
+
right = _ref.right,
|
|
98
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
99
|
+
|
|
100
|
+
return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
|
|
66
101
|
backgroundColor: backgroundColor,
|
|
67
102
|
color: color,
|
|
68
103
|
borderSide: borderSide,
|
|
@@ -70,6 +105,7 @@ export var Box = function Box(_ref) {
|
|
|
70
105
|
borderColor: borderColor,
|
|
71
106
|
width: width,
|
|
72
107
|
height: height,
|
|
108
|
+
radius: radius,
|
|
73
109
|
paddingTop: padding || paddingY || paddingTop,
|
|
74
110
|
paddingBottom: padding || paddingY || paddingBottom,
|
|
75
111
|
paddingLeft: padding || paddingX || paddingLeft,
|
|
@@ -77,14 +113,20 @@ export var Box = function Box(_ref) {
|
|
|
77
113
|
marginTop: margin || marginY || marginTop,
|
|
78
114
|
marginBottom: margin || marginY || marginBottom,
|
|
79
115
|
marginLeft: margin || marginX || marginLeft,
|
|
80
|
-
marginRight: margin || marginX || marginRight
|
|
81
|
-
|
|
116
|
+
marginRight: margin || marginX || marginRight,
|
|
117
|
+
position: position,
|
|
118
|
+
top: top,
|
|
119
|
+
bottom: bottom,
|
|
120
|
+
left: left,
|
|
121
|
+
right: right
|
|
122
|
+
}, props), children);
|
|
82
123
|
};
|
|
83
124
|
Box.propTypes = {
|
|
84
125
|
color: types.color,
|
|
85
126
|
borderSide: types.side,
|
|
86
127
|
width: types.space,
|
|
87
128
|
height: types.space,
|
|
129
|
+
radius: types.radius,
|
|
88
130
|
padding: types.space,
|
|
89
131
|
paddingTop: types.space,
|
|
90
132
|
paddingBottom: types.space,
|
|
@@ -98,5 +140,10 @@ Box.propTypes = {
|
|
|
98
140
|
marginLeft: types.space,
|
|
99
141
|
marginRight: types.space,
|
|
100
142
|
marginX: types.space,
|
|
101
|
-
marginY: types.space
|
|
143
|
+
marginY: types.space,
|
|
144
|
+
position: types.position,
|
|
145
|
+
top: types.space,
|
|
146
|
+
bottom: types.space,
|
|
147
|
+
left: types.space,
|
|
148
|
+
right: types.space
|
|
102
149
|
};
|
|
@@ -7,6 +7,7 @@ var _templateObject;
|
|
|
7
7
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
8
8
|
|
|
9
9
|
import { getColor, getTextSize, getWeight } from '../../utilities';
|
|
10
|
+
import { PropTypes } from 'prop-types';
|
|
10
11
|
import React from "react";
|
|
11
12
|
import styled from "@emotion/styled";
|
|
12
13
|
import { types } from '../../types';
|
|
@@ -23,15 +24,18 @@ export var Text = function Text(_ref) {
|
|
|
23
24
|
size = _ref$size === void 0 ? 'm' : _ref$size,
|
|
24
25
|
_ref$weight = _ref.weight,
|
|
25
26
|
weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
|
|
26
|
-
color = _ref.color
|
|
27
|
+
color = _ref.color,
|
|
28
|
+
tag = _ref.tag;
|
|
27
29
|
return /*#__PURE__*/React.createElement(Wrapper, {
|
|
28
30
|
size: size,
|
|
29
31
|
weight: weight,
|
|
30
|
-
color: color
|
|
32
|
+
color: color,
|
|
33
|
+
as: tag
|
|
31
34
|
}, children);
|
|
32
35
|
};
|
|
33
36
|
Text.propTypes = {
|
|
34
37
|
size: types.textSize,
|
|
35
38
|
weight: types.weight,
|
|
36
|
-
color: types.color
|
|
39
|
+
color: types.color,
|
|
40
|
+
tag: PropTypes.string
|
|
37
41
|
};
|
package/es/styles/base.css
CHANGED
|
@@ -1,61 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
--grn-unit: 8px;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
:root {
|
|
6
|
-
--grn-text-s: calc(var(--grn-unit) * 1.625);
|
|
7
|
-
--grn-text-m: calc(var(--grn-unit) * 1.875);
|
|
8
|
-
--grn-text-l: calc(var(--grn-unit) * 2.5);
|
|
9
|
-
--grn-text-xl: calc(var(--grn-unit) * 3.125);
|
|
10
|
-
--grn-text-xxl: calc(var(--grn-unit) * 3.75);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:root {
|
|
14
|
-
--grn-weight-normal: 400;
|
|
15
|
-
--grn-weight-medium: 500;
|
|
16
|
-
--grn-weight-semiBold: 600;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:root {
|
|
20
|
-
--grn-space-xs: calc(var(--grn-unit) / 2);
|
|
21
|
-
--grn-space-s: calc(var(--grn-unit) * 1);
|
|
22
|
-
--grn-space-m: calc(var(--grn-unit) * 2);
|
|
23
|
-
--grn-space-l: calc(var(--grn-unit) * 3);
|
|
24
|
-
--grn-space-xl: calc(var(--grn-unit) * 5);
|
|
25
|
-
--grn-space-xxl: calc(var(--grn-unit) * 7);
|
|
26
|
-
}
|
|
1
|
+
@import './variables.css';
|
|
27
2
|
|
|
28
3
|
:root {
|
|
29
|
-
--
|
|
30
|
-
|
|
31
|
-
--grn-
|
|
32
|
-
|
|
33
|
-
--grn-
|
|
34
|
-
--grn-
|
|
35
|
-
--grn-
|
|
36
|
-
|
|
37
|
-
--grn-
|
|
38
|
-
--grn-color-grey1: hsl(0 0% 96%);
|
|
39
|
-
|
|
40
|
-
--grn-color-blue: hsl(218 74% 54%);
|
|
41
|
-
--grn-color-red: hsl(6 66% 65%);
|
|
42
|
-
|
|
43
|
-
--grn-color-body: var(--grn-color-grey8);
|
|
44
|
-
--grn-color-bodyDimmed: hsl(var(--grey8-HSL) / 50%);
|
|
45
|
-
--grn-color-accent: var(--grn-color-grey8);
|
|
46
|
-
--grn-color-backgroundSecondary: hsl(0 0% 100%);
|
|
47
|
-
--grn-color-background: var(--grn-color-grey1);
|
|
48
|
-
--grn-color-overlay: hsl(var(--grey8-HSL) / 7%);
|
|
49
|
-
--grn-color-border: hsl(var(--grey8-HSL) / 9%);
|
|
50
|
-
--grn-color-selection: var(--grn-color-blue);
|
|
51
|
-
--grn-color-danger: var(--grn-color-red);
|
|
4
|
+
--grn-letterSpacing-fixed: 1.3px;
|
|
5
|
+
--grn-letterSpacing-relative: 0.07em;
|
|
6
|
+
--grn-letterSpacing-global: calc(var(--grn-letterSpacing-fixed) - var(--grn-letterSpacing-relative));
|
|
7
|
+
|
|
8
|
+
--grn-lineHeight-fixed: 5px;
|
|
9
|
+
--grn-lineHeight-relative: 1em;
|
|
10
|
+
--grn-lineHeight-global: calc(var(--grn-lineHeight-fixed) + var(--grn-lineHeight-relative));
|
|
11
|
+
|
|
12
|
+
--grn-font-global: 'Beausite Classic', sans-serif;
|
|
52
13
|
}
|
|
53
14
|
|
|
54
15
|
* {
|
|
55
|
-
letter-spacing:
|
|
56
|
-
line-height:
|
|
57
|
-
-webkit-font-smoothing: antialiased;
|
|
58
|
-
-moz-osx-font-smoothing: grayscale;
|
|
16
|
+
letter-spacing: var(--grn-letterSpacing-global);
|
|
17
|
+
line-height: var(--grn-lineHeight-global);
|
|
59
18
|
}
|
|
60
19
|
|
|
61
20
|
*, *:before, *:after {
|
|
@@ -63,9 +22,11 @@
|
|
|
63
22
|
}
|
|
64
23
|
|
|
65
24
|
body {
|
|
66
|
-
font-family:
|
|
25
|
+
font-family: var(--grn-font-global);
|
|
67
26
|
color: var(--grn-color-body);
|
|
68
27
|
font-size: var(--grn-text-m);
|
|
28
|
+
-webkit-font-smoothing: antialiased;
|
|
29
|
+
-moz-osx-font-smoothing: grayscale;
|
|
69
30
|
}
|
|
70
31
|
|
|
71
32
|
a {
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--grn-unit: 8px;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--grn-text-s: calc(var(--grn-unit) * 1.625);
|
|
7
|
+
--grn-text-m: calc(var(--grn-unit) * 1.875);
|
|
8
|
+
--grn-text-l: calc(var(--grn-unit) * 2.5);
|
|
9
|
+
--grn-text-xl: calc(var(--grn-unit) * 3.125);
|
|
10
|
+
--grn-text-xxl: calc(var(--grn-unit) * 3.75);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:root {
|
|
14
|
+
--grn-weight-normal: 400;
|
|
15
|
+
--grn-weight-medium: 500;
|
|
16
|
+
--grn-weight-semiBold: 600;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:root {
|
|
20
|
+
--grn-space-xs: calc(var(--grn-unit) / 2);
|
|
21
|
+
--grn-space-s: calc(var(--grn-unit) * 1);
|
|
22
|
+
--grn-space-m: calc(var(--grn-unit) * 2);
|
|
23
|
+
--grn-space-l: calc(var(--grn-unit) * 3);
|
|
24
|
+
--grn-space-xl: calc(var(--grn-unit) * 5);
|
|
25
|
+
--grn-space-xxl: calc(var(--grn-unit) * 7);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
:root {
|
|
29
|
+
--grn-radius-s: calc(var(--grn-unit) / 1.333333);
|
|
30
|
+
--grn-radius-m: calc(var(--grn-unit) * 1.5);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:root {
|
|
34
|
+
--grn-color-grey8-HSL: 0 0% 7%;
|
|
35
|
+
|
|
36
|
+
--grn-color-grey8: hsl(var(--grn-color-grey8-HSL));
|
|
37
|
+
--grn-color-grey7: hsl(0 0% 20%);
|
|
38
|
+
--grn-color-grey6: hsl(0 0% 32%);
|
|
39
|
+
--grn-color-grey5: hsl(0 0% 44%);
|
|
40
|
+
--grn-color-grey4: hsl(0 0% 63%);
|
|
41
|
+
--grn-color-grey3: hsl(0 0% 78%);
|
|
42
|
+
--grn-color-grey2: hsl(0 0% 87%);
|
|
43
|
+
--grn-color-grey1: hsl(0 0% 96%);
|
|
44
|
+
|
|
45
|
+
--grn-color-blue: hsl(218 74% 54%);
|
|
46
|
+
--grn-color-red: hsl(6 66% 65%);
|
|
47
|
+
|
|
48
|
+
--grn-color-body: var(--grn-color-grey8);
|
|
49
|
+
--grn-color-bodyDimmed: hsl(var(--grn-color-grey8-HSL) / 50%);
|
|
50
|
+
--grn-color-accent: var(--grn-color-grey8);
|
|
51
|
+
--grn-color-backgroundSecondary: hsl(0 0% 100%);
|
|
52
|
+
--grn-color-background: var(--grn-color-grey1);
|
|
53
|
+
--grn-color-overlay: hsl(var(--grn-color-grey8-HSL) / 7%);
|
|
54
|
+
--grn-color-border: hsl(var(--grn-color-grey8-HSL) / 9%);
|
|
55
|
+
--grn-color-selection: var(--grn-color-blue);
|
|
56
|
+
--grn-color-danger: var(--grn-color-red);
|
|
57
|
+
}
|
package/es/types/index.js
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
|
+
import "core-js/modules/es.object.keys.js";
|
|
1
2
|
import PropTypes from "prop-types";
|
|
2
|
-
import {
|
|
3
|
+
import { vars } from "../variables";
|
|
3
4
|
export var types = {
|
|
4
|
-
color: PropTypes.oneOfType([PropTypes.oneOf(
|
|
5
|
-
space: PropTypes.oneOfType([PropTypes.oneOf(
|
|
5
|
+
color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
|
|
6
|
+
space: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string]),
|
|
6
7
|
side: PropTypes.oneOf(["all", "left", "right", "top", "bottom", "x", "y"]),
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
radius: PropTypes.oneOf(["s", "m", "l"]),
|
|
9
|
+
position: PropTypes.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
|
|
10
|
+
textSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.textSizes)), PropTypes.number, PropTypes.string]),
|
|
11
|
+
weight: PropTypes.oneOf(Object.keys(vars.weights))
|
|
9
12
|
};
|
package/es/utilities/index.js
CHANGED
|
@@ -1,7 +1,20 @@
|
|
|
1
|
+
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; }
|
|
2
|
+
|
|
3
|
+
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; }
|
|
4
|
+
|
|
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; }
|
|
6
|
+
|
|
1
7
|
import "core-js/modules/es.array.concat.js";
|
|
2
|
-
import "core-js/modules/es.
|
|
3
|
-
import "core-js/modules/es.
|
|
4
|
-
import
|
|
8
|
+
import "core-js/modules/es.object.define-property.js";
|
|
9
|
+
import "core-js/modules/es.object.keys.js";
|
|
10
|
+
import "core-js/modules/es.symbol.js";
|
|
11
|
+
import "core-js/modules/es.array.filter.js";
|
|
12
|
+
import "core-js/modules/es.object.to-string.js";
|
|
13
|
+
import "core-js/modules/es.object.get-own-property-descriptor.js";
|
|
14
|
+
import "core-js/modules/web.dom-collections.for-each.js";
|
|
15
|
+
import "core-js/modules/es.object.get-own-property-descriptors.js";
|
|
16
|
+
import "core-js/modules/es.object.define-properties.js";
|
|
17
|
+
import { grnPrefix, vars } from "../variables";
|
|
5
18
|
export var getCssVarCore = function getCssVarCore(type, value) {
|
|
6
19
|
return "".concat(grnPrefix).concat(type, "-").concat(value);
|
|
7
20
|
};
|
|
@@ -14,33 +27,39 @@ var u = function u(amount) {
|
|
|
14
27
|
};
|
|
15
28
|
|
|
16
29
|
export var getColor = function getColor(color) {
|
|
17
|
-
if (
|
|
30
|
+
if (color in _objectSpread(_objectSpread(_objectSpread({}, vars.colors.baseColors), vars.colors.greys), vars.colors.semanticColors)) {
|
|
18
31
|
return getCssVar("color", color);
|
|
19
32
|
}
|
|
20
33
|
|
|
21
34
|
return color;
|
|
22
35
|
};
|
|
23
36
|
export var getTextSize = function getTextSize(size) {
|
|
24
|
-
if (
|
|
37
|
+
if (size in vars.textSizes) {
|
|
25
38
|
return getCssVar("text", size);
|
|
26
39
|
}
|
|
27
40
|
|
|
28
41
|
return size;
|
|
29
42
|
};
|
|
30
43
|
export var getWeight = function getWeight(weight) {
|
|
31
|
-
if (
|
|
44
|
+
if (weight in vars.weights) {
|
|
32
45
|
return getCssVar("weight", weight);
|
|
33
46
|
}
|
|
34
47
|
};
|
|
48
|
+
export var getRadius = function getRadius(radius) {
|
|
49
|
+
if (radius in vars.radiuses) {
|
|
50
|
+
return getCssVar("radius", radius);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
35
53
|
export var getSpace = function getSpace(space) {
|
|
36
54
|
if (isNaN(space)) {
|
|
37
|
-
if (
|
|
55
|
+
if (space in vars.spaces) {
|
|
38
56
|
return getCssVar("space", space);
|
|
39
57
|
}
|
|
40
58
|
|
|
41
59
|
return space;
|
|
42
60
|
}
|
|
43
61
|
|
|
62
|
+
if (space === 0) return space;
|
|
44
63
|
return u(space);
|
|
45
64
|
};
|
|
46
65
|
export var getBorder = function getBorder(borderSide) {
|
package/es/variables/index.js
CHANGED
|
@@ -1,41 +1,54 @@
|
|
|
1
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
2
|
-
|
|
3
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
8
|
-
|
|
9
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
10
|
-
|
|
11
|
-
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; }
|
|
12
|
-
|
|
13
|
-
import "core-js/modules/es.array.reverse.js";
|
|
14
|
-
import "core-js/modules/es.array.concat.js";
|
|
15
|
-
import "core-js/modules/es.symbol.js";
|
|
16
|
-
import "core-js/modules/es.symbol.description.js";
|
|
17
|
-
import "core-js/modules/es.object.to-string.js";
|
|
18
|
-
import "core-js/modules/es.symbol.iterator.js";
|
|
19
|
-
import "core-js/modules/es.array.iterator.js";
|
|
20
|
-
import "core-js/modules/es.string.iterator.js";
|
|
21
|
-
import "core-js/modules/web.dom-collections.iterator.js";
|
|
22
|
-
import "core-js/modules/es.array.from.js";
|
|
23
|
-
import "core-js/modules/es.array.slice.js";
|
|
24
|
-
import "core-js/modules/es.regexp.exec.js";
|
|
25
|
-
var greysAmount = 8;
|
|
26
|
-
var greysArray = [];
|
|
27
|
-
|
|
28
|
-
for (var step = 1; step < greysAmount + 1; step++) {
|
|
29
|
-
greysArray.push("grey" + step);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
1
|
export var grnPrefix = "--grn-";
|
|
33
|
-
export var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
2
|
+
export var vars = {
|
|
3
|
+
textSizes: {
|
|
4
|
+
s: "s",
|
|
5
|
+
m: "m",
|
|
6
|
+
l: "l",
|
|
7
|
+
xl: "xl",
|
|
8
|
+
xxl: "xxl"
|
|
9
|
+
},
|
|
10
|
+
spaces: {
|
|
11
|
+
xs: "xs",
|
|
12
|
+
s: "s",
|
|
13
|
+
m: "m",
|
|
14
|
+
l: "l",
|
|
15
|
+
xl: "xl",
|
|
16
|
+
xxl: "xxl"
|
|
17
|
+
},
|
|
18
|
+
weights: {
|
|
19
|
+
normal: "normal",
|
|
20
|
+
medium: "medium",
|
|
21
|
+
semiBold: "semiBold"
|
|
22
|
+
},
|
|
23
|
+
radiuses: {
|
|
24
|
+
s: "s",
|
|
25
|
+
m: "m"
|
|
26
|
+
},
|
|
27
|
+
colors: {
|
|
28
|
+
greys: {
|
|
29
|
+
grey8: "grey8",
|
|
30
|
+
grey7: "grey7",
|
|
31
|
+
grey6: "grey6",
|
|
32
|
+
grey5: "grey5",
|
|
33
|
+
grey4: "grey4",
|
|
34
|
+
grey3: "grey3",
|
|
35
|
+
grey2: "grey2",
|
|
36
|
+
grey1: "grey1"
|
|
37
|
+
},
|
|
38
|
+
baseColors: {
|
|
39
|
+
blue: "blue",
|
|
40
|
+
red: "red"
|
|
41
|
+
},
|
|
42
|
+
semanticColors: {
|
|
43
|
+
body: "body",
|
|
44
|
+
bodyDimmed: "bodyDimmed",
|
|
45
|
+
accent: "accent",
|
|
46
|
+
backgroundSecondary: "backgroundSecondary",
|
|
47
|
+
background: "background",
|
|
48
|
+
overlay: "overlay",
|
|
49
|
+
border: "border",
|
|
50
|
+
selection: "selection",
|
|
51
|
+
danger: "danger"
|
|
52
|
+
}
|
|
53
|
+
}
|
|
41
54
|
};
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flodesk/grain",
|
|
3
|
-
"version": "2.1
|
|
3
|
+
"version": "2.3.1",
|
|
4
4
|
"description": "Flodesk design system",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"author": "Flodesk",
|
|
7
7
|
"license": "UNLICENSED",
|
|
8
8
|
"scripts": {
|
|
9
9
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
10
|
-
"dev": "next dev",
|
|
10
|
+
"dev": "next dev -p 4000",
|
|
11
11
|
"build": "next build",
|
|
12
12
|
"start": "next start",
|
|
13
13
|
"lint": "next lint",
|