@flodesk/grain 2.3.2 → 2.4.0
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.
|
@@ -4,7 +4,7 @@ import "core-js/modules/es.object.define-properties.js";
|
|
|
4
4
|
import "core-js/modules/es.object.keys.js";
|
|
5
5
|
import "core-js/modules/es.array.index-of.js";
|
|
6
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"];
|
|
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", "shadow"];
|
|
8
8
|
|
|
9
9
|
var _templateObject;
|
|
10
10
|
|
|
@@ -16,7 +16,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
16
16
|
|
|
17
17
|
import "core-js/modules/es.array.concat.js";
|
|
18
18
|
import "core-js/modules/es.object.assign.js";
|
|
19
|
-
import { getBorder, getColor, getRadius, getSpace } from '../../utilities';
|
|
19
|
+
import { getBorder, getColor, getRadius, getSpace, getShadow } from '../../utilities';
|
|
20
20
|
import React from "react";
|
|
21
21
|
import styled from "@emotion/styled";
|
|
22
22
|
import { types } from '../../types';
|
|
@@ -27,7 +27,7 @@ var getSpaceCss = function getSpaceCss(propertyName, propertyValue) {
|
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
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) {
|
|
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 box-shadow: ", ";\n"])), function (p) {
|
|
31
31
|
return getBorder(p.borderSide, p.borderWidth, p.borderColor);
|
|
32
32
|
}, function (p) {
|
|
33
33
|
return getSpaceCss('padding-top', p.paddingTop);
|
|
@@ -65,6 +65,8 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
|
|
|
65
65
|
return getSpace(p.height);
|
|
66
66
|
}, function (p) {
|
|
67
67
|
return getRadius(p.radius);
|
|
68
|
+
}, function (p) {
|
|
69
|
+
return getShadow(p.shadow);
|
|
68
70
|
});
|
|
69
71
|
export var Box = function Box(_ref) {
|
|
70
72
|
var children = _ref.children,
|
|
@@ -95,6 +97,7 @@ export var Box = function Box(_ref) {
|
|
|
95
97
|
bottom = _ref.bottom,
|
|
96
98
|
left = _ref.left,
|
|
97
99
|
right = _ref.right,
|
|
100
|
+
shadow = _ref.shadow,
|
|
98
101
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
99
102
|
|
|
100
103
|
return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
|
|
@@ -118,7 +121,8 @@ export var Box = function Box(_ref) {
|
|
|
118
121
|
top: top,
|
|
119
122
|
bottom: bottom,
|
|
120
123
|
left: left,
|
|
121
|
-
right: right
|
|
124
|
+
right: right,
|
|
125
|
+
shadow: shadow
|
|
122
126
|
}, props), children);
|
|
123
127
|
};
|
|
124
128
|
Box.propTypes = {
|
package/es/styles/variables.css
CHANGED
|
@@ -54,4 +54,27 @@
|
|
|
54
54
|
--grn-color-border: hsl(var(--grn-color-grey8-HSL) / 9%);
|
|
55
55
|
--grn-color-selection: var(--grn-color-blue);
|
|
56
56
|
--grn-color-danger: var(--grn-color-red);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
:root {
|
|
60
|
+
--grn-shadowLayer-border: 0 1px 6px hsl(var(--grn-color-grey8-HSL) / 10%);
|
|
61
|
+
--grn-shadowLayer-low: 0 2px 16px hsl(var(--grn-color-grey8-HSL) / 7%);
|
|
62
|
+
--grn-shadowLayer-medium: 0 2px 24px hsl(var(--grn-color-grey8-HSL) / 12%);
|
|
63
|
+
--grn-shadowLayer-high: 0 2px 32px hsl(var(--grn-color-grey8-HSL) / 20%);
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
--grn-shadow-s:
|
|
67
|
+
var(--grn-shadowLayer-border),
|
|
68
|
+
var(--grn-shadowLayer-low)
|
|
69
|
+
;
|
|
70
|
+
|
|
71
|
+
--grn-shadow-m:
|
|
72
|
+
var(--grn-shadowLayer-border),
|
|
73
|
+
var(--grn-shadowLayer-medium)
|
|
74
|
+
;
|
|
75
|
+
|
|
76
|
+
--grn-shadow-l:
|
|
77
|
+
var(--grn-shadowLayer-border),
|
|
78
|
+
var(--grn-shadowLayer-high)
|
|
79
|
+
;
|
|
57
80
|
}
|
package/es/utilities/index.js
CHANGED
|
@@ -33,6 +33,13 @@ export var getColor = function getColor(color) {
|
|
|
33
33
|
|
|
34
34
|
return color;
|
|
35
35
|
};
|
|
36
|
+
export var getShadow = function getShadow(shadow) {
|
|
37
|
+
if (shadow in vars.shadows) {
|
|
38
|
+
return getCssVar("shadow", shadow);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
return shadow;
|
|
42
|
+
};
|
|
36
43
|
export var getTextSize = function getTextSize(size) {
|
|
37
44
|
if (size in vars.textSizes) {
|
|
38
45
|
return getCssVar("text", size);
|
package/es/variables/index.js
CHANGED