@flodesk/grain 2.18.1 → 2.18.2
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/button.js
CHANGED
|
@@ -25,7 +25,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
|
25
25
|
|
|
26
26
|
var _react2 = require("@emotion/react");
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var _foundational = require("../foundational");
|
|
29
29
|
|
|
30
30
|
var _excluded = ["children", "variant", "isDisabled", "icon", "hasFullWidth"];
|
|
31
31
|
|
|
@@ -38,11 +38,11 @@ var variants = {
|
|
|
38
38
|
primary: (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: white;\n background-color: ", ";\n border-color: transparent;\n\n &:hover {\n background-color: ", ";\n }\n &:active {\n color: ", ";\n background-color: black;\n }\n "])), (0, _utilities.getColor)('accent'), (0, _utilities.getColor)('grey7'), (0, _utilities.getColor)('grey2'))
|
|
39
39
|
};
|
|
40
40
|
|
|
41
|
-
var Wrapper = _styled.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n appearance: none;\n border: none;\n font-family: inherit;\n font-size: inherit;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n font-weight: ", ";\n border-radius: ", ";\n
|
|
41
|
+
var Wrapper = _styled.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n ", ";\n appearance: none;\n border: none;\n font-family: inherit;\n font-size: inherit;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n font-weight: ", ";\n border-radius: ", ";\n height: var(--grn-textBoxHeight-m);\n padding: 0 var(--grn-paddingX-m);\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n\n ", ";\n ", ";\n \n &:disabled {\n color: ", ";\n background-color: ", ";\n border-color: transparent;\n cursor: default;\n }\n"])), variables, _foundational.transitions, (0, _utilities.getWeight)('medium'), (0, _utilities.getRadius)('s'), function (p) {
|
|
42
42
|
return !p.isDisabled && variants[p.variant];
|
|
43
43
|
}, function (p) {
|
|
44
44
|
return p.hasFullWidth && "width: 100%";
|
|
45
|
-
}, (0, _utilities.
|
|
45
|
+
}, (0, _utilities.getColor)('disabledContent'), (0, _utilities.getColor)('disabledBackground'));
|
|
46
46
|
|
|
47
47
|
var Button = function Button(_ref) {
|
|
48
48
|
var children = _ref.children,
|
|
@@ -31,6 +31,8 @@ var _box = require("./box");
|
|
|
31
31
|
|
|
32
32
|
var _icon = require("./icon");
|
|
33
33
|
|
|
34
|
+
var _foundational = require("../foundational");
|
|
35
|
+
|
|
34
36
|
var _excluded = ["value", "placeholder", "size", "label", "id", "icon"];
|
|
35
37
|
|
|
36
38
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
@@ -70,13 +72,13 @@ var Label = _styled.default.label(_templateObject3 || (_templateObject3 = (0, _t
|
|
|
70
72
|
return sizesStyles[p.size].labelGap;
|
|
71
73
|
});
|
|
72
74
|
|
|
73
|
-
var InputField = _styled.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n appearance: none;\n border: none;\n font-family: inherit;\n background-color: transparent;\n color: inherit;\n font-size: inherit;\n transition: border-color
|
|
75
|
+
var InputField = _styled.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n appearance: none;\n border: none;\n font-family: inherit;\n background-color: transparent;\n color: inherit;\n font-size: inherit;\n transition-property: border-color; \n border: 1px solid var(--grn-color-fieldBorder);\n width: 100%;\n ", ";\n ", ";\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:hover {\n border-color: var(--grn-color-fieldBorder-hover);\n }\n \n &:focus {\n transition: 0s;\n border-color: var(--grn-color-grey6);\n }\n"])), _foundational.transitions, function (p) {
|
|
74
76
|
return inputSizesStyles[p.size];
|
|
75
77
|
}, function (p) {
|
|
76
78
|
return p.paddingLeft && "padding-left: ".concat(p.paddingLeft, "px");
|
|
77
|
-
}, (0, _utilities.getColor)('grey5')
|
|
79
|
+
}, (0, _utilities.getColor)('grey5'));
|
|
78
80
|
|
|
79
|
-
var IconSection = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n margin: auto;\n left: ", "px;\n top: 0; \n bottom: 0;\n height: fit-content;\n"])), function (p) {
|
|
81
|
+
var IconSection = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n margin: auto;\n left: ", "px;\n top: 0; \n bottom: 0;\n height: fit-content;\n pointer-events: none;\n"])), function (p) {
|
|
80
82
|
return sizesStyles[p.size].iconOffset;
|
|
81
83
|
});
|
|
82
84
|
|
package/es/foundational/index.js
CHANGED
|
@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.ClearButtonBox = void 0;
|
|
10
|
+
exports.ClearButtonBox = exports.transitions = void 0;
|
|
11
11
|
|
|
12
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
13
|
|
|
@@ -19,8 +19,9 @@ var _utilities = require("../utilities");
|
|
|
19
19
|
|
|
20
20
|
var _templateObject, _templateObject2;
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var transitions = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n transition: ", ";\n \n &:hover {\n transition: ", ";\n }\n\n &:active {\n transition: 0s;\n }\n"])), (0, _utilities.getTransition)('slow'), (0, _utilities.getTransition)('fast'));
|
|
23
|
+
exports.transitions = transitions;
|
|
23
24
|
|
|
24
|
-
var ClearButtonBox = _styled.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n appearance: none;\n border: 1px solid transparent;\n padding: 0;\n font-family: inherit;\n font-size: inherit;\n cursor: pointer;\n font-weight: ", ";\n border-radius: ", ";\n
|
|
25
|
+
var ClearButtonBox = _styled.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n --grn-borderColor-active: var(--grn-color-fade5);\n \n appearance: none;\n border: 1px solid transparent;\n padding: 0;\n font-family: inherit;\n font-size: inherit;\n cursor: pointer;\n font-weight: ", ";\n border-radius: ", ";\n height: var(--grn-clearButtonHeight-m);\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n background-color: var(--grn-color-overlay);\n }\n\n &:active {\n border-color: var(--grn-borderColor-active);\n outline-color: var(--grn-borderColor-active);\n background-color: transparent;\n }\n\n &:disabled {\n color: ", ";\n cursor: default;\n border-color: transparent;\n\n &:hover {\n background-color: transparent;\n }\n }\n"])), transitions, (0, _utilities.getWeight)("medium"), (0, _utilities.getRadius)('s'), (0, _utilities.getColor)('disabledContent'));
|
|
25
26
|
|
|
26
27
|
exports.ClearButtonBox = ClearButtonBox;
|