oolib 2.9.0 → 2.10.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.
- package/dist/components/BlockLabel/index.js +19 -20
- package/dist/components/Tags/index.d.ts +3 -6
- package/dist/components/Tags/index.js +6 -6
- package/dist/components/Tags/index.styled.js +14 -13
- package/dist/components/TextInputs/index.js +1 -1
- package/dist/components/Typo/index.d.ts +1 -0
- package/dist/components/Typo/index.js +6 -4
- package/dist/components/Typo/index.styled.d.ts +1 -0
- package/dist/components/Typo/index.styled.js +8 -7
- package/dist/globalStyles/index.js +1 -1
- package/dist/icons/LangIcon.js +3 -3
- package/dist/themes/mixins/index.d.ts +1 -1
- package/dist/themes/mixins/index.js +1 -7
- package/dist/themes/typo.d.ts +2 -0
- package/dist/themes/typo.js +23 -5
- package/dist/{components/utils.d.ts → utils/index.d.ts} +0 -0
- package/dist/{components/utils.js → utils/index.js} +0 -0
- package/dist/utilsOolib/index.d.ts +5 -0
- package/dist/utilsOolib/index.js +38 -0
- package/package.json +1 -1
|
@@ -16,31 +16,30 @@ var BlockLabel = function (props) {
|
|
|
16
16
|
/*
|
|
17
17
|
missing parts of this component compared to kPlabel:
|
|
18
18
|
- deployment._ShowOptionalTag configuration
|
|
19
|
-
|
|
19
|
+
|
|
20
20
|
*/
|
|
21
21
|
var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, error = props.error, //for storybook view purposes
|
|
22
22
|
errorMsgs = props.errorMsgs;
|
|
23
|
-
var shouldCompRender =
|
|
24
|
-
!readOnly &&
|
|
23
|
+
var shouldCompRender = label ||
|
|
24
|
+
(!readOnly &&
|
|
25
|
+
(sublabel ||
|
|
26
|
+
inputOnlyLabel ||
|
|
27
|
+
isRequired === false ||
|
|
28
|
+
(errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0));
|
|
25
29
|
var optional = readOnly ? false : isRequired === false;
|
|
26
|
-
var errText = errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.map(function (er) { return typeof er ===
|
|
30
|
+
var errText = errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.map(function (er) { return (typeof er === "object" ? er.text : er); }).join(", ");
|
|
27
31
|
//next 2 vars is for 'test link' usecase
|
|
28
32
|
var errLink = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 ? undefined : errorMsgs[0].link;
|
|
29
|
-
var errType = (
|
|
30
|
-
return (shouldCompRender &&
|
|
31
|
-
react_1.default.createElement(
|
|
32
|
-
react_1.default.createElement(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
: (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ?
|
|
41
|
-
react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })
|
|
42
|
-
:
|
|
43
|
-
null)),
|
|
44
|
-
!readOnly && sublabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, sublabel))));
|
|
33
|
+
var errType = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 ? "danger" : errorMsgs[0].type || "danger";
|
|
34
|
+
return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className },
|
|
35
|
+
react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
|
|
36
|
+
(label || inputOnlyLabel) && (react_1.default.createElement(Typo_1.SANS_3, { invert: invert, bold: true, capitalize: true }, label || inputOnlyLabel)),
|
|
37
|
+
optional && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, '(optional)')),
|
|
38
|
+
!readOnly &&
|
|
39
|
+
(error ? (react_1.default.createElement(Typo_1.SANS_3, { color: red },
|
|
40
|
+
" ",
|
|
41
|
+
error,
|
|
42
|
+
" ")) : (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null)),
|
|
43
|
+
!readOnly && sublabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, sublabel)))));
|
|
45
44
|
};
|
|
46
45
|
exports.BlockLabel = BlockLabel;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
export function TagDisplay({ display, style, invert, M, XS,
|
|
1
|
+
export function TagDisplay({ display, style, invert, M, XS, variant }: {
|
|
2
2
|
display: any;
|
|
3
3
|
style: any;
|
|
4
4
|
invert: any;
|
|
5
5
|
M: any;
|
|
6
6
|
XS: any;
|
|
7
|
-
theme: any;
|
|
8
7
|
variant?: string;
|
|
9
8
|
}): JSX.Element;
|
|
10
9
|
export function TagClear({ id, display, value, M, XS, invert, onClick, variant, grey, }: {
|
|
@@ -18,23 +17,21 @@ export function TagClear({ id, display, value, M, XS, invert, onClick, variant,
|
|
|
18
17
|
variant?: string;
|
|
19
18
|
grey: any;
|
|
20
19
|
}): JSX.Element;
|
|
21
|
-
export function TagSelect({ onClick, isSelected, display, value, M, XS,
|
|
20
|
+
export function TagSelect({ onClick, isSelected, display, value, M, XS, style, onMouseDown }: {
|
|
22
21
|
onClick: any;
|
|
23
22
|
isSelected?: boolean;
|
|
24
23
|
display: any;
|
|
25
24
|
value: any;
|
|
26
25
|
M: any;
|
|
27
26
|
XS: any;
|
|
28
|
-
theme: any;
|
|
29
27
|
style: any;
|
|
30
28
|
onMouseDown: any;
|
|
31
29
|
}): JSX.Element;
|
|
32
|
-
export function TagLink({ display, to, invert, M, XS,
|
|
30
|
+
export function TagLink({ display, to, invert, M, XS, variant }: {
|
|
33
31
|
display: any;
|
|
34
32
|
to: any;
|
|
35
33
|
invert: any;
|
|
36
34
|
M: any;
|
|
37
35
|
XS: any;
|
|
38
|
-
theme: any;
|
|
39
36
|
variant?: string;
|
|
40
37
|
}): JSX.Element;
|
|
@@ -34,10 +34,10 @@ var getTypoComp = function (size) { return size === 'XS'
|
|
|
34
34
|
return react_1.default.createElement(Typo_1.SANS_3, null, children);
|
|
35
35
|
}; };
|
|
36
36
|
function TagDisplay(_a) {
|
|
37
|
-
var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, XS = _a.XS,
|
|
37
|
+
var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, XS = _a.XS, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
|
|
38
38
|
var size = M ? 'M' : XS ? 'XS' : 'S';
|
|
39
39
|
var TYPO_COMP = getTypoComp(size);
|
|
40
|
-
return (react_1.default.createElement(index_styled_1.StyledTagDisplay, { variant: variant, invert: invert,
|
|
40
|
+
return (react_1.default.createElement(index_styled_1.StyledTagDisplay, { variant: variant, invert: invert, size: size, style: style },
|
|
41
41
|
react_1.default.createElement(TYPO_COMP, null, display)));
|
|
42
42
|
}
|
|
43
43
|
exports.TagDisplay = TagDisplay;
|
|
@@ -53,7 +53,7 @@ function TagClear(_a) {
|
|
|
53
53
|
}
|
|
54
54
|
exports.TagClear = TagClear;
|
|
55
55
|
function TagSelect(_a) {
|
|
56
|
-
var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M, XS = _a.XS,
|
|
56
|
+
var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M, XS = _a.XS, style = _a.style, onMouseDown = _a.onMouseDown;
|
|
57
57
|
var _c = (0, react_1.useState)(isSelected), selected = _c[0], setSelected = _c[1];
|
|
58
58
|
var handleOnClick = function () {
|
|
59
59
|
setSelected(!selected);
|
|
@@ -66,16 +66,16 @@ function TagSelect(_a) {
|
|
|
66
66
|
}, [isSelected]);
|
|
67
67
|
var size = M ? 'M' : XS ? 'XS' : 'S';
|
|
68
68
|
var TYPO_COMP = getTypoComp(size);
|
|
69
|
-
return (react_1.default.createElement(index_styled_1.StyledTagSelect, {
|
|
69
|
+
return (react_1.default.createElement(index_styled_1.StyledTagSelect, { onClick: onMouseDown ? function () { return null; } : handleOnClick, selected: selected, size: size, style: style, onMouseDown: onMouseDown },
|
|
70
70
|
react_1.default.createElement(TYPO_COMP, null, display)));
|
|
71
71
|
}
|
|
72
72
|
exports.TagSelect = TagSelect;
|
|
73
73
|
function TagLink(_a) {
|
|
74
|
-
var display = _a.display, to = _a.to, invert = _a.invert, M = _a.M, XS = _a.XS,
|
|
74
|
+
var display = _a.display, to = _a.to, invert = _a.invert, M = _a.M, XS = _a.XS, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
|
|
75
75
|
var size = M ? 'M' : XS ? 'XS' : 'S';
|
|
76
76
|
var TYPO_COMP = getTypoComp(size);
|
|
77
77
|
return (react_1.default.createElement(index_styled_1.StyledLink, { to: to },
|
|
78
|
-
react_1.default.createElement(index_styled_1.StyledTagLink, {
|
|
78
|
+
react_1.default.createElement(index_styled_1.StyledTagLink, { variant: variant, invert: invert, size: size },
|
|
79
79
|
react_1.default.createElement(TYPO_COMP, null, display))));
|
|
80
80
|
}
|
|
81
81
|
exports.TagLink = TagLink;
|
|
@@ -28,7 +28,8 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
28
28
|
var colors_1 = require("../../themes/colors");
|
|
29
29
|
var react_router_dom_1 = require("react-router-dom");
|
|
30
30
|
var mixins_1 = require("../../themes/mixins");
|
|
31
|
-
var
|
|
31
|
+
var utilsOolib_1 = require("../../utilsOolib");
|
|
32
|
+
var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor10 = colors_1.colors.greyColor10, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white;
|
|
32
33
|
var SIZES = {
|
|
33
34
|
XS: '2rem',
|
|
34
35
|
S: "3rem",
|
|
@@ -41,10 +42,10 @@ var commonStyle = function (_a) {
|
|
|
41
42
|
var blueHover = function (_a) {
|
|
42
43
|
var invert = _a.invert, colors = _a.colors;
|
|
43
44
|
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\t\t\n\t}\n"], ["\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\t\t\n\t}\n"])), invert
|
|
44
|
-
? (
|
|
45
|
-
: (
|
|
45
|
+
? (0, utilsOolib_1.getPrimaryColor10)(colors)
|
|
46
|
+
: (0, utilsOolib_1.getPrimaryColor40)(colors), invert
|
|
46
47
|
? greyColor100
|
|
47
|
-
: (
|
|
48
|
+
: (0, utilsOolib_1.getPrimaryColorText)(colors));
|
|
48
49
|
};
|
|
49
50
|
var greyHover = function (_a) {
|
|
50
51
|
var invert = _a.invert;
|
|
@@ -70,15 +71,15 @@ var StyledTagClear = styled_components_1.default.div(templateObject_11 || (templ
|
|
|
70
71
|
if (variant === "primary") {
|
|
71
72
|
return grey
|
|
72
73
|
? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), !invert
|
|
73
|
-
? (
|
|
74
|
-
: (
|
|
74
|
+
? (0, utilsOolib_1.getPrimaryColor100)(colors)
|
|
75
|
+
: (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? white : greyColor100);
|
|
75
76
|
}
|
|
76
77
|
else {
|
|
77
78
|
// secondry
|
|
78
79
|
return grey
|
|
79
|
-
? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: none;\n border: ", " solid ", ";\n color: ", ";\n "], ["\n background: none;\n border: ", " solid ", ";\n color: ", ";\n "])), size === "XS" ? "1px" : "2px", !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background: none;\n border: ", " solid\n ", ";\n color: ", ";\n "], ["\n background: none;\n border: ", " solid\n ", ";\n color: ", ";\n "])), size === "XS" ? "1px" : "2px", !invert ? (
|
|
80
|
-
? (
|
|
81
|
-
: (
|
|
80
|
+
? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: none;\n border: ", " solid ", ";\n color: ", ";\n "], ["\n background: none;\n border: ", " solid ", ";\n color: ", ";\n "])), size === "XS" ? "1px" : "2px", !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background: none;\n border: ", " solid\n ", ";\n color: ", ";\n "], ["\n background: none;\n border: ", " solid\n ", ";\n color: ", ";\n "])), size === "XS" ? "1px" : "2px", !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert
|
|
81
|
+
? (0, utilsOolib_1.getPrimaryColorText)(colors)
|
|
82
|
+
: (0, utilsOolib_1.getPrimaryColor40)(colors));
|
|
82
83
|
}
|
|
83
84
|
}, function (_a) {
|
|
84
85
|
var variant = _a.variant;
|
|
@@ -97,7 +98,7 @@ var StyledTagSelect = styled_components_1.default.div(templateObject_15 || (temp
|
|
|
97
98
|
return commonStyle({ size: size });
|
|
98
99
|
}, (0, mixins_1.multiTransition)("background-color"), function (_a) {
|
|
99
100
|
var selected = _a.selected, size = _a.size, colors = _a.theme.colors;
|
|
100
|
-
return (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n border: ", " solid ", ";\n cursor: pointer;\n background-color: ", ";\n\tcolor: ", ";\n\t\t", "\n "], ["\n border: ", " solid ", ";\n cursor: pointer;\n background-color: ", ";\n\tcolor: ", ";\n\t\t", "\n "])), size === "XS" ? "1px" : "2px", (
|
|
101
|
+
return (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n border: ", " solid ", ";\n cursor: pointer;\n background-color: ", ";\n\tcolor: ", ";\n\t\t", "\n "], ["\n border: ", " solid ", ";\n cursor: pointer;\n background-color: ", ";\n\tcolor: ", ";\n\t\t", "\n "])), size === "XS" ? "1px" : "2px", (0, utilsOolib_1.getPrimaryColor100)(colors), selected ? (0, utilsOolib_1.getPrimaryColor100)(colors) : null, !selected ? (0, utilsOolib_1.getPrimaryColorText)(colors) : white, !selected && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\t\t\n\t\t}"], ["&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\t\t\n\t\t}"])), (0, utilsOolib_1.getPrimaryColor40)(colors), (0, utilsOolib_1.getPrimaryColorText)(colors)));
|
|
101
102
|
});
|
|
102
103
|
exports.StyledTagSelect = StyledTagSelect;
|
|
103
104
|
var StyledTagLink = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n \t", "\n\t", ";\n ", "\n"], ["\n \t", "\n\t", ";\n ", "\n"])), function (_a) {
|
|
@@ -107,9 +108,9 @@ var StyledTagLink = styled_components_1.default.div(templateObject_18 || (templa
|
|
|
107
108
|
var variant = _a.variant, invert = _a.invert, size = _a.size, colors = _a.theme.colors;
|
|
108
109
|
return variant === "primary"
|
|
109
110
|
? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n \t\tbackground-color: ", ";\n \t\tcolor: ", ";\n\t\t\t\t", ";\n \t"], ["\n \t\tbackground-color: ", ";\n \t\tcolor: ", ";\n\t\t\t\t", ";\n \t"])), !invert
|
|
110
|
-
? (
|
|
111
|
-
: (
|
|
112
|
-
(0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n \t\tbackground: none;\n \t\tborder: ", " solid ", ";\n \t\tcolor: ", ";\n\t\t\t\t", "\n \t"], ["\n \t\tbackground: none;\n \t\tborder: ", " solid ", ";\n \t\tcolor: ", ";\n\t\t\t\t", "\n \t"])), size === "XS" ? "1px" : "2px", !invert ? (
|
|
111
|
+
? (0, utilsOolib_1.getPrimaryColor100)(colors)
|
|
112
|
+
: (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? white : greyColor100, blueHover({ invert: invert, colors: colors })) : // secondary
|
|
113
|
+
(0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n \t\tbackground: none;\n \t\tborder: ", " solid ", ";\n \t\tcolor: ", ";\n\t\t\t\t", "\n \t"], ["\n \t\tbackground: none;\n \t\tborder: ", " solid ", ";\n \t\tcolor: ", ";\n\t\t\t\t", "\n \t"])), size === "XS" ? "1px" : "2px", !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? (0, utilsOolib_1.getPrimaryColorText)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), blueHover({ invert: invert, colors: colors }));
|
|
113
114
|
});
|
|
114
115
|
exports.StyledTagLink = StyledTagLink;
|
|
115
116
|
var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n text-decoration: none;\n"], ["\n text-decoration: none;\n"])));
|
|
@@ -74,7 +74,7 @@ var Loader_1 = require("../Loader");
|
|
|
74
74
|
var BlockLabel_1 = require("../BlockLabel");
|
|
75
75
|
var Typo_1 = require("../Typo");
|
|
76
76
|
var Buttons_1 = require("../Buttons");
|
|
77
|
-
var utils_1 = require("
|
|
77
|
+
var utils_1 = require("../../utils");
|
|
78
78
|
var DisplayIcon = function (_a) {
|
|
79
79
|
var icon = _a.icon, onClick = _a.onClick, size = _a.size;
|
|
80
80
|
var IconComp = icons_1.icons[icon];
|
|
@@ -10,6 +10,7 @@ export function SERIF_3(props: any): JSX.Element;
|
|
|
10
10
|
export function SERIF_3_4(props: any): JSX.Element;
|
|
11
11
|
export function SERIF_4_5(props: any): JSX.Element;
|
|
12
12
|
export function SERIF_5_6(props: any): JSX.Element;
|
|
13
|
+
export function SERIF_6_7(props: any): JSX.Element;
|
|
13
14
|
export function SERIF_7_8(props: any): JSX.Element;
|
|
14
15
|
export function SERIF_9_10(props: any): JSX.Element;
|
|
15
16
|
export function BLOCKQUOTE(props: any): JSX.Element;
|
|
@@ -14,10 +14,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.TypoClassesProvider = exports.BLOCKQUOTE = exports.SERIF_9_10 = exports.SERIF_7_8 = exports.SERIF_5_6 = exports.SERIF_4_5 = exports.SERIF_3_4 = exports.SERIF_3 = exports.SANS_7_8 = exports.SANS_5_6 = exports.SANS_4_5 = exports.SANS_4 = exports.SANS_3 = exports.SANS_2 = exports.SANS_0 = exports.LABEL = void 0;
|
|
17
|
+
exports.TypoClassesProvider = exports.BLOCKQUOTE = exports.SERIF_9_10 = exports.SERIF_7_8 = exports.SERIF_6_7 = exports.SERIF_5_6 = exports.SERIF_4_5 = exports.SERIF_3_4 = exports.SERIF_3 = exports.SANS_7_8 = exports.SANS_5_6 = exports.SANS_4_5 = exports.SANS_4 = exports.SANS_3 = exports.SANS_2 = exports.SANS_0 = exports.LABEL = void 0;
|
|
18
18
|
var react_1 = __importDefault(require("react"));
|
|
19
19
|
var index_styled_1 = require("./index.styled");
|
|
20
|
-
var
|
|
20
|
+
var utilsOolib_1 = require("../../utilsOolib");
|
|
21
21
|
var genFontStylingProps = function (props) {
|
|
22
22
|
var _a;
|
|
23
23
|
var fontSetting = {
|
|
@@ -47,10 +47,10 @@ var genFontStylingProps = function (props) {
|
|
|
47
47
|
};
|
|
48
48
|
var GenComp = function (_a) {
|
|
49
49
|
var props = _a.props, Comp = _a.Comp;
|
|
50
|
-
var
|
|
50
|
+
var localize = (0, utilsOolib_1.useLocale)();
|
|
51
51
|
var invert = props.invert, value = props.value, suffix = props.suffix, color = props.color, children = props.children, theme = props.theme, style = props.style, className = props.className;
|
|
52
52
|
var displayText = children || value;
|
|
53
|
-
var localText =
|
|
53
|
+
var localText = localize(displayText);
|
|
54
54
|
return (react_1.default.createElement(Comp, __assign({}, genFontStylingProps(props), { color: color, theme: theme, className: className, style: style, invert: invert }),
|
|
55
55
|
localText,
|
|
56
56
|
suffix || ''));
|
|
@@ -79,6 +79,8 @@ var SERIF_4_5 = function (props) { return (react_1.default.createElement(GenComp
|
|
|
79
79
|
exports.SERIF_4_5 = SERIF_4_5;
|
|
80
80
|
var SERIF_5_6 = function (props) { return (react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.SERIF_5_6_STYLED })); };
|
|
81
81
|
exports.SERIF_5_6 = SERIF_5_6;
|
|
82
|
+
var SERIF_6_7 = function (props) { return (react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.SERIF_6_7_STYLED })); };
|
|
83
|
+
exports.SERIF_6_7 = SERIF_6_7;
|
|
82
84
|
var SERIF_7_8 = function (props) { return (react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.SERIF_7_8_STYLED })); };
|
|
83
85
|
exports.SERIF_7_8 = SERIF_7_8;
|
|
84
86
|
var SERIF_9_10 = function (props) { return (react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.SERIF_9_10_STYLED })); };
|
|
@@ -9,6 +9,7 @@ export const SERIF_3_STYLED: any;
|
|
|
9
9
|
export const SERIF_3_4_STYLED: any;
|
|
10
10
|
export const SERIF_4_5_STYLED: any;
|
|
11
11
|
export const SERIF_5_6_STYLED: any;
|
|
12
|
+
export const SERIF_6_7_STYLED: any;
|
|
12
13
|
export const SERIF_7_8_STYLED: any;
|
|
13
14
|
export const SERIF_9_10_STYLED: any;
|
|
14
15
|
export const LABEL_STYLED: any;
|
|
@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.TYPOCLASSES = exports.BLOCKQUOTE_STYLED = exports.LABEL_STYLED = exports.SERIF_9_10_STYLED = exports.SERIF_7_8_STYLED = exports.SERIF_5_6_STYLED = exports.SERIF_4_5_STYLED = exports.SERIF_3_4_STYLED = exports.SERIF_3_STYLED = exports.SANS_7_8_STYLED = exports.SANS_5_6_STYLED = exports.SANS_4_5_STYLED = exports.SANS_4_STYLED = exports.SANS_3_STYLED = exports.SANS_2_STYLED = exports.SANS_0_STYLED = void 0;
|
|
10
|
+
exports.TYPOCLASSES = exports.BLOCKQUOTE_STYLED = exports.LABEL_STYLED = exports.SERIF_9_10_STYLED = exports.SERIF_7_8_STYLED = exports.SERIF_6_7_STYLED = exports.SERIF_5_6_STYLED = exports.SERIF_4_5_STYLED = exports.SERIF_3_4_STYLED = exports.SERIF_3_STYLED = exports.SANS_7_8_STYLED = exports.SANS_5_6_STYLED = exports.SANS_4_5_STYLED = exports.SANS_4_STYLED = exports.SANS_3_STYLED = exports.SANS_2_STYLED = exports.SANS_0_STYLED = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var index_1 = require("../../themes/index");
|
|
13
13
|
exports.SANS_0_STYLED = styled_components_1.default.h6(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SANS_0);
|
|
@@ -21,9 +21,10 @@ exports.SERIF_3_STYLED = styled_components_1.default.h2(templateObject_8 || (tem
|
|
|
21
21
|
exports.SERIF_3_4_STYLED = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SERIF_3_4);
|
|
22
22
|
exports.SERIF_4_5_STYLED = styled_components_1.default.h2(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SERIF_4_5);
|
|
23
23
|
exports.SERIF_5_6_STYLED = styled_components_1.default.h3(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SERIF_5_6);
|
|
24
|
-
exports.
|
|
25
|
-
exports.
|
|
26
|
-
exports.
|
|
27
|
-
exports.
|
|
28
|
-
exports.
|
|
29
|
-
|
|
24
|
+
exports.SERIF_6_7_STYLED = styled_components_1.default.h2(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SERIF_6_7);
|
|
25
|
+
exports.SERIF_7_8_STYLED = styled_components_1.default.h2(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SERIF_7_8);
|
|
26
|
+
exports.SERIF_9_10_STYLED = styled_components_1.default.h1(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SERIF_9_10);
|
|
27
|
+
exports.LABEL_STYLED = styled_components_1.default.h6(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.LABEL);
|
|
28
|
+
exports.BLOCKQUOTE_STYLED = styled_components_1.default.h3(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.BLOCKQUOTE);
|
|
29
|
+
exports.TYPOCLASSES = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n .SANS_0 {\n ", "\n }\n\n .SANS_2 {\n ", "\n }\n\n .SANS_3 {\n ", "\n }\n\n .SANS_4 {\n ", "\n }\n\n .SERIF_3 {\n ", "\n }\n\n .SANS_4_5 {\n ", "\n }\n\n .SANS_5_6 {\n ", "\n }\n\n .SERIF_3_4 {\n ", "\n }\n\n .SERIF_4_5 {\n ", "\n }\n\n .SERIF_5_6 {\n ", "\n }\n\n .SERIF_6_7 {\n ", "\n }\n\n .SERIF_7_8 {\n ", "\n }\n\n .SERIF_9_10 {\n ", "\n }\n\n .LABEL {\n ", "\n }\n\n .SANS_7_8 {\n ", "\n }\n\n .BLOCKQUOTE {\n ", "\n }\n\n .OKE-markdown {\n a,\n p {\n ", "\n }\n }\n"], ["\n .SANS_0 {\n ", "\n }\n\n .SANS_2 {\n ", "\n }\n\n .SANS_3 {\n ", "\n }\n\n .SANS_4 {\n ", "\n }\n\n .SERIF_3 {\n ", "\n }\n\n .SANS_4_5 {\n ", "\n }\n\n .SANS_5_6 {\n ", "\n }\n\n .SERIF_3_4 {\n ", "\n }\n\n .SERIF_4_5 {\n ", "\n }\n\n .SERIF_5_6 {\n ", "\n }\n\n .SERIF_6_7 {\n ", "\n }\n\n .SERIF_7_8 {\n ", "\n }\n\n .SERIF_9_10 {\n ", "\n }\n\n .LABEL {\n ", "\n }\n\n .SANS_7_8 {\n ", "\n }\n\n .BLOCKQUOTE {\n ", "\n }\n\n .OKE-markdown {\n a,\n p {\n ", "\n }\n }\n"])), index_1.typo.SANS_0, index_1.typo.SANS_2, index_1.typo.SANS_3, index_1.typo.SANS_4, index_1.typo.SERIF_3, index_1.typo.SANS_4_5, index_1.typo.SANS_5_6, index_1.typo.SERIF_3_4, index_1.typo.SERIF_4_5, index_1.typo.SERIF_5_6, index_1.typo.SERIF_6_7, index_1.typo.SERIF_7_8, index_1.typo.SERIF_9_10, index_1.typo.LABEL, index_1.typo.SANS_7_8, index_1.typo.BLOCKQUOTE, index_1.typo.SANS_3);
|
|
30
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
@@ -10,5 +10,5 @@ var themes_1 = require("../themes");
|
|
|
10
10
|
var normalize_1 = require("./normalize");
|
|
11
11
|
require("../assets/fonts/style.css");
|
|
12
12
|
var greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80, greyColor100 = themes_1.colors.greyColor100;
|
|
13
|
-
exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n \n"])), normalize_1.normalize, greyColor100, greyColor15, greyColor40, greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
|
|
13
|
+
exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n \n"])), normalize_1.normalize, greyColor100, greyColor15, greyColor40, greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
|
|
14
14
|
var templateObject_1;
|
package/dist/icons/LangIcon.js
CHANGED
|
@@ -8,11 +8,11 @@ var themes_1 = require("../themes");
|
|
|
8
8
|
var LanguageIcon = function (_a) {
|
|
9
9
|
var _b = _a.color, color = _b === void 0 ? themes_1.colors.greyColor100 : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
|
|
10
10
|
return (react_1.default.createElement("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
11
|
-
react_1.default.createElement("path", { d: "M7.96924 10.0556C9.06013 10.0556 9.94447 9.25962 9.94447 8.27778C9.94447 7.29594 9.06013 6.5 7.96924 6.5C7.32302 6.5 6.74928 6.77931 6.38892 7.21111", stroke: color,
|
|
12
|
-
react_1.default.createElement("path", { d: "M7.82804 10.0557C8.9969 10.0557 9.94444 10.8516 9.94444 11.8334C9.94444 12.8153 8.9969 13.6112 7.82804 13.6112C6.64286 13.6112 5.78219 12.426 5.5 11.8334", stroke: color,
|
|
11
|
+
react_1.default.createElement("path", { d: "M7.96924 10.0556C9.06013 10.0556 9.94447 9.25962 9.94447 8.27778C9.94447 7.29594 9.06013 6.5 7.96924 6.5C7.32302 6.5 6.74928 6.77931 6.38892 7.21111", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
12
|
+
react_1.default.createElement("path", { d: "M7.82804 10.0557C8.9969 10.0557 9.94444 10.8516 9.94444 11.8334C9.94444 12.8153 8.9969 13.6112 7.82804 13.6112C6.64286 13.6112 5.78219 12.426 5.5 11.8334", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
13
13
|
react_1.default.createElement("path", { d: "M8.16666 9.05566C7.61438 9.05566 7.16666 9.50338 7.16666 10.0557C7.16666 10.6079 7.61438 11.0557 8.16666 11.0557V9.05566ZM11.7222 11.0557C12.2745 11.0557 12.7222 10.6079 12.7222 10.0557C12.7222 9.50338 12.2745 9.05566 11.7222 9.05566V11.0557ZM8.16666 11.0557H11.7222V9.05566H8.16666V11.0557Z", fill: color }),
|
|
14
14
|
react_1.default.createElement("path", { d: "M11.5 5.5C10.9477 5.5 10.5 5.94772 10.5 6.5C10.5 7.05228 10.9477 7.5 11.5 7.5V5.5ZM14.1667 7.5C14.719 7.5 15.1667 7.05228 15.1667 6.5C15.1667 5.94772 14.719 5.5 14.1667 5.5V7.5ZM11.5 7.5H14.1667V5.5H11.5V7.5Z", fill: color }),
|
|
15
15
|
react_1.default.createElement("path", { d: "M14 6.5C14 5.94772 13.5523 5.5 13 5.5C12.4477 5.5 12 5.94772 12 6.5L14 6.5ZM12 13.6111C12 14.1634 12.4477 14.6111 13 14.6111C13.5523 14.6111 14 14.1634 14 13.6111L12 13.6111ZM12 6.5L12 13.6111L14 13.6111L14 6.5L12 6.5Z", fill: color }),
|
|
16
|
-
react_1.default.createElement("circle", { cx: "10", cy: "10", r: "9", stroke: color,
|
|
16
|
+
react_1.default.createElement("circle", { cx: "10", cy: "10", r: "9", stroke: color, strokeWidth: "2" })));
|
|
17
17
|
};
|
|
18
18
|
exports.default = LanguageIcon;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function mediaQuery(point: any):
|
|
1
|
+
export function mediaQuery(point: any): string;
|
|
2
2
|
export function getBreakPoint(point: any): 0 | 600 | 800 | 1000 | 1300 | 1600 | "pass a valid breakpoint";
|
|
3
3
|
import { transition } from "./transitions";
|
|
4
4
|
import { transitionWithDuration } from "./transitions";
|
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
3
|
exports.isElementInViewport = exports.multiTransition = exports.transitionWithDelay = exports.transitionWithDuration = exports.transition = exports.getBreakPoint = exports.mediaQuery = void 0;
|
|
8
|
-
var styled_components_1 = require("styled-components");
|
|
9
4
|
var transitions_1 = require("./transitions");
|
|
10
5
|
Object.defineProperty(exports, "transition", { enumerable: true, get: function () { return transitions_1.transition; } });
|
|
11
6
|
Object.defineProperty(exports, "transitionWithDuration", { enumerable: true, get: function () { return transitions_1.transitionWithDuration; } });
|
|
@@ -31,7 +26,7 @@ var getBreakPoint = function (point) {
|
|
|
31
26
|
};
|
|
32
27
|
exports.getBreakPoint = getBreakPoint;
|
|
33
28
|
var mediaQuery = function (point) {
|
|
34
|
-
return
|
|
29
|
+
return "@media only screen and (min-width: ".concat(getBreakPoint(point), "px)");
|
|
35
30
|
};
|
|
36
31
|
exports.mediaQuery = mediaQuery;
|
|
37
32
|
var isElementInViewport = function (el) {
|
|
@@ -44,4 +39,3 @@ var isElementInViewport = function (el) {
|
|
|
44
39
|
rect.right <= (window.innerWidth || document.documentElement.clientWidth));
|
|
45
40
|
};
|
|
46
41
|
exports.isElementInViewport = isElementInViewport;
|
|
47
|
-
var templateObject_1;
|
package/dist/themes/typo.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export namespace typo {
|
|
|
11
11
|
export { SERIF_5_6 };
|
|
12
12
|
export { SERIF_9_10 };
|
|
13
13
|
export { SERIF_4_5 };
|
|
14
|
+
export { SERIF_6_7 };
|
|
14
15
|
export { SERIF_7_8 };
|
|
15
16
|
export { SANS_4_5 };
|
|
16
17
|
export { SANS_7_8 };
|
|
@@ -29,6 +30,7 @@ declare const SERIF_3: any;
|
|
|
29
30
|
declare const SERIF_5_6: any;
|
|
30
31
|
declare const SERIF_9_10: any;
|
|
31
32
|
declare const SERIF_4_5: any;
|
|
33
|
+
declare const SERIF_6_7: any;
|
|
32
34
|
declare const SERIF_7_8: any;
|
|
33
35
|
declare const SANS_4_5: any;
|
|
34
36
|
declare const SANS_7_8: any;
|
package/dist/themes/typo.js
CHANGED
|
@@ -185,7 +185,24 @@ var SERIF_5_6 = (0, styled_components_1.css)(templateObject_14 || (templateObjec
|
|
|
185
185
|
return "".concat(msW(6), "px");
|
|
186
186
|
}
|
|
187
187
|
});
|
|
188
|
-
var
|
|
188
|
+
var SERIF_6_7 = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n font-size: ", ";\n line-height: 1.6em;\n ", "\n ", "\n ", " {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n line-height: 1.6em;\n ", "\n ", "\n ", " {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
189
|
+
var theme = _a.theme;
|
|
190
|
+
switch (theme === null || theme === void 0 ? void 0 : theme.lang) {
|
|
191
|
+
case 'hi':
|
|
192
|
+
return "".concat(msW(7), "px");
|
|
193
|
+
default:
|
|
194
|
+
return "".concat(msW(6), "px");
|
|
195
|
+
}
|
|
196
|
+
}, fontCss, serif, (0, mixins_1.mediaQuery)('md'), function (_a) {
|
|
197
|
+
var theme = _a.theme;
|
|
198
|
+
switch (theme === null || theme === void 0 ? void 0 : theme.lang) {
|
|
199
|
+
case 'hi':
|
|
200
|
+
return "".concat(msW(8), "px");
|
|
201
|
+
default:
|
|
202
|
+
return "".concat(msW(7), "px");
|
|
203
|
+
}
|
|
204
|
+
});
|
|
205
|
+
var SERIF_7_8 = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n font-size: ", ";\n line-height: 1.6em;\n ", "\n ", "\n ", " {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n line-height: 1.6em;\n ", "\n ", "\n ", " {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
189
206
|
var theme = _a.theme;
|
|
190
207
|
switch (theme === null || theme === void 0 ? void 0 : theme.lang) {
|
|
191
208
|
case 'hi':
|
|
@@ -202,7 +219,7 @@ var SERIF_7_8 = (0, styled_components_1.css)(templateObject_15 || (templateObjec
|
|
|
202
219
|
return "".concat(msW(8), "px");
|
|
203
220
|
}
|
|
204
221
|
});
|
|
205
|
-
var SERIF_9_10 = (0, styled_components_1.css)(
|
|
222
|
+
var SERIF_9_10 = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n font-size: ", ";\n line-height: 1.5em;\n ", "\n ", "\n ", " {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n line-height: 1.5em;\n ", "\n ", "\n ", " {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
206
223
|
var theme = _a.theme;
|
|
207
224
|
switch (theme === null || theme === void 0 ? void 0 : theme.lang) {
|
|
208
225
|
case 'hi':
|
|
@@ -219,7 +236,7 @@ var SERIF_9_10 = (0, styled_components_1.css)(templateObject_16 || (templateObje
|
|
|
219
236
|
return "".concat(msW(10), "px");
|
|
220
237
|
}
|
|
221
238
|
});
|
|
222
|
-
var LABEL = (0, styled_components_1.css)(
|
|
239
|
+
var LABEL = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n letter-spacing: ", "em;\n font-size: ", ";\n color: ", ";\n line-height: 1.6em;\n font-weight: 600;\n text-transform: uppercase;\n ", "\n"], ["\n letter-spacing: ", "em;\n font-size: ", ";\n color: ", ";\n line-height: 1.6em;\n font-weight: 600;\n text-transform: uppercase;\n ", "\n"])), function (_a) {
|
|
223
240
|
var theme = _a.theme;
|
|
224
241
|
return ((theme === null || theme === void 0 ? void 0 : theme.lang) === 'hi' ? 0 : 0.1);
|
|
225
242
|
}, function (_a) {
|
|
@@ -234,7 +251,7 @@ var LABEL = (0, styled_components_1.css)(templateObject_17 || (templateObject_17
|
|
|
234
251
|
var color = _a.color, invert = _a.invert;
|
|
235
252
|
return (invert ? white : color);
|
|
236
253
|
}, sansSerif);
|
|
237
|
-
var BLOCKQUOTE = (0, styled_components_1.css)(
|
|
254
|
+
var BLOCKQUOTE = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n padding: 2rem;\n border-left: 4px solid\n ", ";\n ", ";\n font-style: italic;\n color: ", ";\n"], ["\n padding: 2rem;\n border-left: 4px solid\n ", ";\n ", ";\n font-style: italic;\n color: ", ";\n"])), function (_a) {
|
|
238
255
|
var invert = _a.invert, colors = _a.theme.colors;
|
|
239
256
|
return invert ? greyColor40 : colors === null || colors === void 0 ? void 0 : colors.primaryColor100;
|
|
240
257
|
}, SERIF_4_5, greyColor80);
|
|
@@ -251,10 +268,11 @@ exports.typo = {
|
|
|
251
268
|
SERIF_5_6: SERIF_5_6,
|
|
252
269
|
SERIF_9_10: SERIF_9_10,
|
|
253
270
|
SERIF_4_5: SERIF_4_5,
|
|
271
|
+
SERIF_6_7: SERIF_6_7,
|
|
254
272
|
SERIF_7_8: SERIF_7_8,
|
|
255
273
|
SANS_4_5: SANS_4_5,
|
|
256
274
|
SANS_7_8: SANS_7_8,
|
|
257
275
|
SANS_5_6: SANS_5_6,
|
|
258
276
|
BLOCKQUOTE: BLOCKQUOTE,
|
|
259
277
|
};
|
|
260
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
|
|
278
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* @note : THESE ARE NOT MEANT TO BE EXPORTED
|
|
4
|
+
*
|
|
5
|
+
* These are utility functions that make certain tasks
|
|
6
|
+
* within oolib easier
|
|
7
|
+
*/
|
|
8
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
9
|
+
exports.getPrimaryColorText = exports.getPrimaryColor100 = exports.getPrimaryColor40 = exports.getPrimaryColor10 = exports.useLocale = void 0;
|
|
10
|
+
var styled_components_1 = require("styled-components");
|
|
11
|
+
var colors_1 = require("../themes/colors");
|
|
12
|
+
var primaryColor10 = colors_1.colors.primaryColor10, primaryColor40 = colors_1.colors.primaryColor40, primaryColor100 = colors_1.colors.primaryColor100, primaryColorText = colors_1.colors.primaryColorText;
|
|
13
|
+
var useLocale = function () {
|
|
14
|
+
var currentTheme = (0, styled_components_1.useTheme)();
|
|
15
|
+
var localize = function (text) {
|
|
16
|
+
return (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.localize)
|
|
17
|
+
? currentTheme.localize(text)
|
|
18
|
+
: text;
|
|
19
|
+
};
|
|
20
|
+
return localize;
|
|
21
|
+
};
|
|
22
|
+
exports.useLocale = useLocale;
|
|
23
|
+
var getPrimaryColor10 = function (colors) {
|
|
24
|
+
return (colors === null || colors === void 0 ? void 0 : colors.primaryColor10) || primaryColor10;
|
|
25
|
+
};
|
|
26
|
+
exports.getPrimaryColor10 = getPrimaryColor10;
|
|
27
|
+
var getPrimaryColor40 = function (colors) {
|
|
28
|
+
return (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40;
|
|
29
|
+
};
|
|
30
|
+
exports.getPrimaryColor40 = getPrimaryColor40;
|
|
31
|
+
var getPrimaryColor100 = function (colors) {
|
|
32
|
+
return (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100;
|
|
33
|
+
};
|
|
34
|
+
exports.getPrimaryColor100 = getPrimaryColor100;
|
|
35
|
+
var getPrimaryColorText = function (colors) {
|
|
36
|
+
return (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText;
|
|
37
|
+
};
|
|
38
|
+
exports.getPrimaryColorText = getPrimaryColorText;
|