eddev 0.3.7 → 0.3.9
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/admin/components/FileWell.d.ts +8 -0
- package/admin/components/FileWell.js +189 -0
- package/admin/index.d.ts +1 -0
- package/admin/index.js +1 -0
- package/dev-ui/components/ResponsiveLerpControl.js +0 -1
- package/dev-ui/components/ResponsiveScaleEditor.js +5 -0
- package/dev-ui/components/panels/ColorEditor.js +4 -3
- package/dev-ui/components/panels/TypographyEditor.js +4 -2
- package/entry/Root.js +0 -1
- package/package.json +1 -1
- package/style/createStitches.d.ts +3 -4
- package/style/createStitches.js +20 -3
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.FileWell = void 0;
|
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
|
+
var react_1 = require("@stitches/react");
|
|
17
|
+
var react_2 = require("react");
|
|
18
|
+
var selectMedia_1 = require("../selectMedia");
|
|
19
|
+
function FileWell(props) {
|
|
20
|
+
// @ts-ignore
|
|
21
|
+
var acf = window.acf;
|
|
22
|
+
var _a = (0, react_2.useState)(null), selectedFile = _a[0], setSelectedFile = _a[1];
|
|
23
|
+
var _b = (0, react_2.useState)(false), imageIsLoading = _b[0], setImageIsLoading = _b[1];
|
|
24
|
+
(0, react_2.useEffect)(function () {
|
|
25
|
+
if (props.value) {
|
|
26
|
+
var cancelled_1 = false;
|
|
27
|
+
setImageIsLoading(true);
|
|
28
|
+
fetch("/wp-json/ed/v1/media/" + Number(props.value))
|
|
29
|
+
.then(function (response) { return response.json(); })
|
|
30
|
+
.then(function (image) {
|
|
31
|
+
if (cancelled_1)
|
|
32
|
+
return;
|
|
33
|
+
setImageIsLoading(false);
|
|
34
|
+
setSelectedFile(image);
|
|
35
|
+
});
|
|
36
|
+
return function () {
|
|
37
|
+
cancelled_1 = true;
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
setSelectedFile(null);
|
|
42
|
+
setImageIsLoading(false);
|
|
43
|
+
}
|
|
44
|
+
}, [props.value]);
|
|
45
|
+
return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ noBorder: props.noBorder }, { children: [imageIsLoading ? ((0, jsx_runtime_1.jsx)(Loading, { children: (0, jsx_runtime_1.jsx)(Spinner, {}, void 0) }, void 0)) : selectedFile ? ((0, jsx_runtime_1.jsxs)(FileInfo, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "name" }, { children: selectedFile.filename }), void 0), (0, jsx_runtime_1.jsx)("div", __assign({ className: "size" }, { children: selectedFile.filesize ? Math.round(selectedFile.filesize / 1024 / 1024).toFixed(2) + "mb" : "Unknown size" }), void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(NoSelection, { children: (0, jsx_runtime_1.jsx)(ChooseButton, __assign({ onClick: function (e) {
|
|
46
|
+
e.preventDefault();
|
|
47
|
+
(0, selectMedia_1.selectMedia)({
|
|
48
|
+
mode: "select",
|
|
49
|
+
type: props.mediaType,
|
|
50
|
+
title: "Select a file",
|
|
51
|
+
select: function (selected) {
|
|
52
|
+
if (selected) {
|
|
53
|
+
props.onChange(selected.id);
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
} }, { children: "Choose a file" }), void 0) }, void 0)), selectedFile || imageIsLoading ? ((0, jsx_runtime_1.jsx)(Toolbar, { children: (0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarButton, __assign({ onClick: function (e) {
|
|
58
|
+
e.preventDefault();
|
|
59
|
+
props.onChange(null);
|
|
60
|
+
} }, { children: (0, jsx_runtime_1.jsx)("span", { className: "dashicons dashicons-trash" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(ToolbarButton, __assign({ onClick: function (e) {
|
|
61
|
+
e.preventDefault();
|
|
62
|
+
(0, selectMedia_1.selectMedia)({
|
|
63
|
+
mode: "edit",
|
|
64
|
+
type: props.mediaType,
|
|
65
|
+
attachment: Number(props.value),
|
|
66
|
+
title: "Edit Image",
|
|
67
|
+
});
|
|
68
|
+
} }, { children: (0, jsx_runtime_1.jsx)("span", { className: "dashicons dashicons-edit" }, void 0) }), void 0), selectedFile && ((0, jsx_runtime_1.jsx)(ToolbarButton, __assign({ onClick: function (e) {
|
|
69
|
+
e.preventDefault();
|
|
70
|
+
window.open(selectedFile.url);
|
|
71
|
+
} }, { children: (0, jsx_runtime_1.jsx)("span", { className: "dashicons dashicons-external" }, void 0) }), void 0))] }, void 0) }, void 0)) : null] }), void 0));
|
|
72
|
+
}
|
|
73
|
+
exports.FileWell = FileWell;
|
|
74
|
+
var Wrapper = (0, react_1.styled)("div", {
|
|
75
|
+
position: "relative",
|
|
76
|
+
display: "block",
|
|
77
|
+
width: "100%",
|
|
78
|
+
border: "1px solid #eeeeee",
|
|
79
|
+
borderRadius: "4px",
|
|
80
|
+
variants: {
|
|
81
|
+
noBorder: {
|
|
82
|
+
true: {
|
|
83
|
+
border: "0px",
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
});
|
|
88
|
+
var ImageContainer = (0, react_1.styled)("div", {
|
|
89
|
+
margin: "4px",
|
|
90
|
+
display: "block",
|
|
91
|
+
position: "relative",
|
|
92
|
+
img: {
|
|
93
|
+
maxWidth: "min(100%, 300px)",
|
|
94
|
+
display: "block",
|
|
95
|
+
},
|
|
96
|
+
});
|
|
97
|
+
var spin = (0, react_1.keyframes)({
|
|
98
|
+
from: {
|
|
99
|
+
transform: "rotate(0deg)",
|
|
100
|
+
},
|
|
101
|
+
to: {
|
|
102
|
+
transform: "rotate(360deg)",
|
|
103
|
+
},
|
|
104
|
+
});
|
|
105
|
+
var Spinner = (0, react_1.styled)("div", {
|
|
106
|
+
display: "block",
|
|
107
|
+
width: "16px",
|
|
108
|
+
height: "16px",
|
|
109
|
+
borderRadius: "100px",
|
|
110
|
+
border: "4px solid transparent",
|
|
111
|
+
borderTopColor: "currentColor",
|
|
112
|
+
animation: "".concat(spin, " 0.5s linear infinite"),
|
|
113
|
+
});
|
|
114
|
+
var Loading = (0, react_1.styled)("div", {
|
|
115
|
+
display: "flex",
|
|
116
|
+
justifyContent: "center",
|
|
117
|
+
alignItems: "center",
|
|
118
|
+
padding: "10px",
|
|
119
|
+
});
|
|
120
|
+
var Toolbar = (0, react_1.styled)("div", {
|
|
121
|
+
position: "relative",
|
|
122
|
+
display: "flex",
|
|
123
|
+
flexDirection: "row",
|
|
124
|
+
justifyContent: "center",
|
|
125
|
+
alignItems: "center",
|
|
126
|
+
gap: "$2",
|
|
127
|
+
padding: "$2",
|
|
128
|
+
});
|
|
129
|
+
var ToolbarButton = (0, react_1.styled)("button", {
|
|
130
|
+
width: "24px",
|
|
131
|
+
height: "24px",
|
|
132
|
+
fontSize: "12px",
|
|
133
|
+
borderRadius: "100px",
|
|
134
|
+
background: "white",
|
|
135
|
+
border: "none",
|
|
136
|
+
color: "black",
|
|
137
|
+
cursor: "pointer",
|
|
138
|
+
appearance: "none",
|
|
139
|
+
boxShadow: "rgba(0,0,0,0.2) 0px 1px 3px",
|
|
140
|
+
display: "flex",
|
|
141
|
+
alignItems: "center",
|
|
142
|
+
justifyContent: "center",
|
|
143
|
+
});
|
|
144
|
+
ToolbarButton.defaultProps = {
|
|
145
|
+
className: "dashicons",
|
|
146
|
+
};
|
|
147
|
+
var NoSelection = (0, react_1.styled)("div", {
|
|
148
|
+
display: "flex",
|
|
149
|
+
justifyContent: "center",
|
|
150
|
+
padding: "10px 0px",
|
|
151
|
+
});
|
|
152
|
+
var ChooseButton = (0, react_1.styled)("button", {
|
|
153
|
+
appearance: "none",
|
|
154
|
+
border: "0px",
|
|
155
|
+
background: "#f6f6f6",
|
|
156
|
+
color: "black",
|
|
157
|
+
padding: "10px 16px",
|
|
158
|
+
borderRadius: "100px",
|
|
159
|
+
cursor: "pointer",
|
|
160
|
+
});
|
|
161
|
+
var AspectWrapper = (0, react_1.styled)("div", {
|
|
162
|
+
position: "absolute",
|
|
163
|
+
left: 0,
|
|
164
|
+
top: 0,
|
|
165
|
+
width: "100%",
|
|
166
|
+
height: "100%",
|
|
167
|
+
opacity: 0.3,
|
|
168
|
+
transition: "opacity 0.3s",
|
|
169
|
+
"&:hover": {
|
|
170
|
+
opacity: 1,
|
|
171
|
+
},
|
|
172
|
+
});
|
|
173
|
+
var AspectDisplay = (0, react_1.styled)("div", {
|
|
174
|
+
position: "absolute",
|
|
175
|
+
border: "1px solid white",
|
|
176
|
+
left: "50%",
|
|
177
|
+
top: "50%",
|
|
178
|
+
transform: "translate(-50%, -50%)",
|
|
179
|
+
});
|
|
180
|
+
var FileInfo = (0, react_1.styled)("div", {
|
|
181
|
+
display: "block",
|
|
182
|
+
textAlign: "center",
|
|
183
|
+
pt: "$2",
|
|
184
|
+
px: "$2",
|
|
185
|
+
fontFamily: "monospace",
|
|
186
|
+
".size": {
|
|
187
|
+
opacity: 0.5,
|
|
188
|
+
},
|
|
189
|
+
});
|
package/admin/index.d.ts
CHANGED
package/admin/index.js
CHANGED
|
@@ -13,3 +13,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
13
13
|
__exportStar(require("./defineField"), exports);
|
|
14
14
|
__exportStar(require("./defineWidget"), exports);
|
|
15
15
|
__exportStar(require("./components/ImageWell"), exports);
|
|
16
|
+
__exportStar(require("./components/FileWell"), exports);
|
|
@@ -66,7 +66,6 @@ function ResponsiveLerpControl(props) {
|
|
|
66
66
|
});
|
|
67
67
|
return points;
|
|
68
68
|
}, [props.data, ranges]);
|
|
69
|
-
console.log("Ranges", ranges, lerpablePoints);
|
|
70
69
|
return ((0, jsx_runtime_1.jsxs)(Outer, { children: [ranges.map(function (item, i) {
|
|
71
70
|
return ((0, jsx_runtime_1.jsx)(RangeItem, __assign({ css: { $$length: item.length } }, { children: (0, jsx_runtime_1.jsx)(RangeLine, { lerping: item.lerped, hasStart: !item.isStart, hasEnd: !item.isEnd }, void 0) }), i));
|
|
72
71
|
}), props.onToggleLerping &&
|
|
@@ -34,6 +34,11 @@ function ResponsiveScaleEditor(props) {
|
|
|
34
34
|
var rows = (0, react_1.useMemo)(function () {
|
|
35
35
|
return Object.entries(props.data).map(function (_a) {
|
|
36
36
|
var key = _a[0], row = _a[1];
|
|
37
|
+
if (!row || typeof row !== "object") {
|
|
38
|
+
row = {
|
|
39
|
+
"@initial": row,
|
|
40
|
+
};
|
|
41
|
+
}
|
|
37
42
|
var info = (0, style_1.parseResponsiveObject)(props.breakpoints, row);
|
|
38
43
|
return {
|
|
39
44
|
token: key,
|
|
@@ -43,7 +43,7 @@ function colorsToCSS(values) {
|
|
|
43
43
|
return "\n body {\n ".concat(Object.entries(values)
|
|
44
44
|
.map(function (_a) {
|
|
45
45
|
var token = _a[0], value = _a[1];
|
|
46
|
-
return "--colors-".concat(token, ": ").concat(value, ";");
|
|
46
|
+
return "--colors-".concat(token, ": ").concat(value.includes("$") ? "var(--colors-".concat(value.replace("$", ""), ")") : value, ";");
|
|
47
47
|
})
|
|
48
48
|
.join("\n"), "\n }\n ");
|
|
49
49
|
// const parsedBreakpoints = parseBreakpoints(originalConfig.breakpoints, originalConfig.media)
|
|
@@ -74,6 +74,7 @@ function ColorEditor() {
|
|
|
74
74
|
console.log("COLOR", values, _theme_1.originalConfig);
|
|
75
75
|
var stylesheet = (0, useStylesheet_1.useStylesheet)("colors");
|
|
76
76
|
(0, react_1.useEffect)(function () {
|
|
77
|
+
console.log("Result", colorsToCSS(values));
|
|
77
78
|
stylesheet.set(colorsToCSS(values));
|
|
78
79
|
}, [values]);
|
|
79
80
|
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Colour Tokens", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
|
|
@@ -92,10 +93,10 @@ function ColorEditor() {
|
|
|
92
93
|
setValues(_theme_1.originalConfig.theme.colors);
|
|
93
94
|
} }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: Object.entries(values).map(function (_a) {
|
|
94
95
|
var token = _a[0], value = _a[1];
|
|
95
|
-
return ((0, jsx_runtime_1.jsxs)(ColorRow, { children: [(0, jsx_runtime_1.jsxs)(Cell, __assign({ mono: true }, { children: ["$", token] }), void 0), (0, jsx_runtime_1.jsx)(Cell, __assign({ mono: true, small: true }, { children: value }), void 0), (0, jsx_runtime_1.jsx)(Cell, { children: (0, jsx_runtime_1.jsx)("input", { type: "color", value: value, onChange: function (e) {
|
|
96
|
+
return ((0, jsx_runtime_1.jsxs)(ColorRow, { children: [(0, jsx_runtime_1.jsxs)(Cell, __assign({ mono: true }, { children: ["$", token] }), void 0), (0, jsx_runtime_1.jsx)(Cell, __assign({ mono: true, small: true }, { children: value }), void 0), value.includes("$") ? ((0, jsx_runtime_1.jsxs)(Cell, __assign({ mono: true }, { children: ["\u21AA", value] }), void 0)) : ((0, jsx_runtime_1.jsx)(Cell, { children: (0, jsx_runtime_1.jsx)("input", { type: "color", value: value, onChange: function (e) {
|
|
96
97
|
var _a;
|
|
97
98
|
setValues(__assign(__assign({}, values), (_a = {}, _a[token] = e.target.value, _a)));
|
|
98
|
-
} }, void 0) }, void 0)] },
|
|
99
|
+
} }, void 0) }, void 0))] }, token));
|
|
99
100
|
}) }), void 0) }, void 0));
|
|
100
101
|
}
|
|
101
102
|
exports.ColorEditor = ColorEditor;
|
|
@@ -48,7 +48,9 @@ function TypographyEditor() {
|
|
|
48
48
|
// alert("Error decoding pasted content: " + (err as any).message + ". You pasted:\n" + text)
|
|
49
49
|
// }
|
|
50
50
|
// })
|
|
51
|
-
} }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: reset }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: (0, jsx_runtime_1.jsx)(Wrapper, {
|
|
51
|
+
} }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: reset }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: (0, jsx_runtime_1.jsx)(Wrapper, __assign({ onWheel: function (e) {
|
|
52
|
+
e.stopPropagation();
|
|
53
|
+
} }, { children: Object.entries(values).map(function (_a, index) {
|
|
52
54
|
var name = _a[0], settings = _a[1];
|
|
53
55
|
return ((0, jsx_runtime_1.jsxs)(TypographyItem, { children: [(0, jsx_runtime_1.jsx)(Meta, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "monoBold" }, { children: name }), void 0) }, void 0), (0, jsx_runtime_1.jsxs)(Details, { children: [(0, jsx_runtime_1.jsx)(Preview, { css: { typography: name }, value: previewText, onChange: function (e) {
|
|
54
56
|
setPreviewText(e.currentTarget.value);
|
|
@@ -59,7 +61,7 @@ function TypographyEditor() {
|
|
|
59
61
|
var _a;
|
|
60
62
|
setValues(__assign(__assign({}, values), (_a = {}, _a[name] = __assign(__assign({}, settings), { fontSize: data.fontSize, lineHeight: data.lineHeight }), _a)));
|
|
61
63
|
}, modes: ["px", "multiplier"] }, void 0)] }, void 0)] }, index));
|
|
62
|
-
}) }, void 0) }), void 0));
|
|
64
|
+
}) }), void 0) }), void 0));
|
|
63
65
|
}
|
|
64
66
|
exports.TypographyEditor = TypographyEditor;
|
|
65
67
|
var TypographyItem = (0, theme_1.styled)("div", {
|
package/entry/Root.js
CHANGED
|
@@ -40,7 +40,6 @@ var next_1 = require("@trpc/next");
|
|
|
40
40
|
function Root() {
|
|
41
41
|
var _a, _b, _c;
|
|
42
42
|
var route = (0, routing_1.useRoute)();
|
|
43
|
-
console.log("RRR", route);
|
|
44
43
|
var Component = views_1.default[(_a = route.data) === null || _a === void 0 ? void 0 : _a.view];
|
|
45
44
|
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(routing_1.RouteItemContext, __assign({ route: route }, { children: [process.devUI && (0, jsx_runtime_1.jsx)(loader_1.DevUILoader, {}, void 0), (0, jsx_runtime_1.jsx)(views_1.App, __assign({ path: route.pathname }, { children: Component ? (0, jsx_runtime_1.jsx)(Component, __assign({}, (((_c = (_b = route.data) === null || _b === void 0 ? void 0 : _b.viewData) === null || _c === void 0 ? void 0 : _c.data) || {})), void 0) : null }), void 0)] }), void 0) }, void 0));
|
|
46
45
|
}
|
package/package.json
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { DefaultThemeMap } from "@stitches/react";
|
|
3
2
|
import { ConfigType } from "@stitches/core/types/config";
|
|
4
3
|
import { Properties as CSS } from "csstype";
|
|
@@ -80,7 +79,7 @@ export declare type ResponsiveAtomCalc = ResponsiveAtom & {
|
|
|
80
79
|
concreteValue: number | null;
|
|
81
80
|
};
|
|
82
81
|
export declare function parseResponsiveObject(breakpoints: ReturnType<typeof parseBreakpoints>, object: any): ResponsiveAtomCalc[];
|
|
83
|
-
export declare function getResponsiveObjectStyles(breakpoints: ReturnType<typeof parseBreakpoints>, object: any, varName: string, unit?: string): any[];
|
|
82
|
+
export declare function getResponsiveObjectStyles(breakpoints: ReturnType<typeof parseBreakpoints>, object: any, varName: string, unit?: string, unitlessUnit?: string): any[];
|
|
84
83
|
export declare function parseResponsiveTokens(theme: any, breakpoints: any): {
|
|
85
84
|
initialResponsive: any;
|
|
86
85
|
globalResponsive: any;
|
|
@@ -659,7 +658,7 @@ export declare function createStitches<Prefix extends string = "", Media extends
|
|
|
659
658
|
} & { [Scale_4 in keyof (Theme & { [Scale_1 in keyof Responsive]: { [T_1 in keyof Responsive[Scale_1]]: string; }; })]: { [Token_2 in keyof (Theme & { [Scale_1 in keyof Responsive]: { [T_1 in keyof Responsive[Scale_1]]: string; }; })[Scale_4]]: import("@stitches/react/types/theme").Token<Extract<Token_2, string | number>, string, Extract<Scale_4, string | void>, "">; }; };
|
|
660
659
|
reset: () => void;
|
|
661
660
|
getCssText: () => string;
|
|
662
|
-
css: <Composers extends (string | import("react").
|
|
661
|
+
css: <Composers extends (string | import("@stitches/react/types/util").Function | import("react").ExoticComponent<any> | import("react").JSXElementConstructor<any> | {
|
|
663
662
|
[name: string]: unknown;
|
|
664
663
|
})[], CSS_1 = import("@stitches/react/types/css-util").CSS<{
|
|
665
664
|
initial: "";
|
|
@@ -782,7 +781,7 @@ export declare function createStitches<Prefix extends string = "", Media extends
|
|
|
782
781
|
gridColumn: string;
|
|
783
782
|
"--grid-columns": number;
|
|
784
783
|
};
|
|
785
|
-
}>>(...composers: { [K_1 in keyof Composers]: string extends Composers[K_1] ? Composers[K_1] : Composers[K_1] extends string | import("react").
|
|
784
|
+
}>>(...composers: { [K_1 in keyof Composers]: string extends Composers[K_1] ? Composers[K_1] : Composers[K_1] extends string | import("@stitches/react/types/util").Function | import("react").ExoticComponent<any> | import("react").JSXElementConstructor<any> ? Composers[K_1] : import("@stitches/react/types/stitches").RemoveIndex<CSS_1> & {
|
|
786
785
|
variants?: {
|
|
787
786
|
[x: string]: {
|
|
788
787
|
[x: string]: CSS_1;
|
package/style/createStitches.js
CHANGED
|
@@ -89,12 +89,21 @@ function parseTypography(theme, breakpoints, typography) {
|
|
|
89
89
|
var tokenPrefix = typeKeyMap[key];
|
|
90
90
|
if (typeof value === "string" || typeof value === "number") {
|
|
91
91
|
// A simple string or number value is used
|
|
92
|
-
|
|
92
|
+
var result = void 0;
|
|
93
|
+
if (key === "lineHeight" &&
|
|
94
|
+
(typeof value === "number" || (typeof value === "string" && value.match(/^[0-9\.]+$/)))) {
|
|
95
|
+
result = value + "em";
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
result = resolveThemeVar(tokenPrefix, value);
|
|
99
|
+
}
|
|
100
|
+
globals["@initial"][varName] = result;
|
|
93
101
|
}
|
|
94
102
|
else if (value && typeof value === "object") {
|
|
95
103
|
// A responsive object value
|
|
96
104
|
var unit = key === "lineHeight" ? "%" : "px";
|
|
97
|
-
var
|
|
105
|
+
var unitlessUnit = key === "lineHeight" ? "em" : unit;
|
|
106
|
+
var _a = getResponsiveObjectStyles(breakpoints, value, varName, unit, unitlessUnit), tokenGlobals = _a[0], initial = _a[1];
|
|
98
107
|
for (var key_1 in tokenGlobals) {
|
|
99
108
|
globals[key_1] = __assign(__assign({}, globals[key_1]), tokenGlobals[key_1]);
|
|
100
109
|
}
|
|
@@ -273,12 +282,20 @@ function parseResponsiveObject(breakpoints, object) {
|
|
|
273
282
|
return result;
|
|
274
283
|
}
|
|
275
284
|
exports.parseResponsiveObject = parseResponsiveObject;
|
|
276
|
-
function getResponsiveObjectStyles(breakpoints, object, varName, unit) {
|
|
285
|
+
function getResponsiveObjectStyles(breakpoints, object, varName, unit, unitlessUnit) {
|
|
277
286
|
var _a, _b, _c;
|
|
278
287
|
var _d;
|
|
279
288
|
if (unit === void 0) { unit = "px"; }
|
|
289
|
+
if (unitlessUnit === void 0) { unitlessUnit = unit; }
|
|
280
290
|
// Prescale object
|
|
281
291
|
object = __assign({}, object);
|
|
292
|
+
if (unitlessUnit) {
|
|
293
|
+
for (var key in object) {
|
|
294
|
+
if (typeof object[key] === "number") {
|
|
295
|
+
object[key] = object[key] + unitlessUnit;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
}
|
|
282
299
|
var parsed = parseResponsiveObject(breakpoints, object);
|
|
283
300
|
var globals = {};
|
|
284
301
|
for (var _i = 0, parsed_1 = parsed; _i < parsed_1.length; _i++) {
|