@draftbit/theme 50.6.2-4142fd.2 → 50.6.2-531e17.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/lib/commonjs/Provider.js +1 -1
- package/lib/commonjs/createTheme.js +1 -1
- package/lib/commonjs/createThemeValuesProxy.js +1 -1
- package/lib/commonjs/validators.js +1 -1
- package/lib/typescript/src/Provider.js +1 -7
- package/lib/typescript/src/Provider.js.map +1 -1
- package/lib/typescript/src/createTheme.d.ts +1 -1
- package/lib/typescript/src/createTheme.js +5 -6
- package/lib/typescript/src/createTheme.js.map +1 -1
- package/lib/typescript/src/createThemeValuesProxy.d.ts +1 -9
- package/lib/typescript/src/createThemeValuesProxy.js +11 -21
- package/lib/typescript/src/createThemeValuesProxy.js.map +1 -1
- package/lib/typescript/src/validators.js +6 -80
- package/lib/typescript/src/validators.js.map +1 -1
- package/lib/typescript/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -4
- package/src/Provider.js +1 -7
- package/src/Provider.js.map +1 -1
- package/src/Provider.tsx +4 -4
- package/src/createTheme.js +5 -6
- package/src/createTheme.js.map +1 -1
- package/src/createTheme.ts +5 -11
- package/src/createThemeValuesProxy.js +11 -21
- package/src/createThemeValuesProxy.js.map +1 -1
- package/src/createThemeValuesProxy.ts +77 -39
- package/src/validators.js +6 -80
- package/src/validators.js.map +1 -1
- package/src/validators.ts +6 -100
|
@@ -6,7 +6,7 @@ import { isObject } from "lodash";
|
|
|
6
6
|
* Ex: {color: {ios: "blue", android: "red"}}
|
|
7
7
|
* -> theme.color returns "blue" when the platform is ios and "red" when android
|
|
8
8
|
*/
|
|
9
|
-
export default function createThemeValuesProxy(
|
|
9
|
+
export default function createThemeValuesProxy(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
|
|
10
10
|
if (value === undefined || value === null) {
|
|
11
11
|
return undefined;
|
|
12
12
|
}
|
|
@@ -21,24 +21,17 @@ export default function createThemeValuesProxy({ value, breakpoints, deviceWidth
|
|
|
21
21
|
const breakpointKeys = Object.keys(breakpoints);
|
|
22
22
|
const lightDarkKeys = ["light", "dark"];
|
|
23
23
|
const keysType = getKeysType(valueAsThemeValues, platformKeys, breakpointKeys, lightDarkKeys);
|
|
24
|
-
const input = {
|
|
25
|
-
value: valueAsThemeValues,
|
|
26
|
-
breakpoints,
|
|
27
|
-
deviceWidth,
|
|
28
|
-
devicePlatform,
|
|
29
|
-
currentLightDarkSelection,
|
|
30
|
-
};
|
|
31
24
|
if (keysType === "default") {
|
|
32
|
-
return createThemeValuesProxy(
|
|
25
|
+
return createThemeValuesProxy(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
33
26
|
}
|
|
34
27
|
else if (keysType === "platform") {
|
|
35
|
-
return getPlatformValue(
|
|
28
|
+
return getPlatformValue(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
36
29
|
}
|
|
37
30
|
else if (keysType === "breakpoint") {
|
|
38
|
-
return getBreakpointValue(
|
|
31
|
+
return getBreakpointValue(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
39
32
|
}
|
|
40
33
|
else if (keysType === "lightDark") {
|
|
41
|
-
return getLightDarkValue(
|
|
34
|
+
return getLightDarkValue(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
42
35
|
}
|
|
43
36
|
else {
|
|
44
37
|
return undefined;
|
|
@@ -85,23 +78,21 @@ function onlyOneTrue(a, b, c, d) {
|
|
|
85
78
|
function allFalse(a, b, c, d) {
|
|
86
79
|
return [a, b, c, d].filter((x) => x).length === 0;
|
|
87
80
|
}
|
|
88
|
-
function getPlatformValue(
|
|
81
|
+
function getPlatformValue(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
|
|
89
82
|
var _a;
|
|
90
|
-
const { value, devicePlatform } = input;
|
|
91
83
|
const currentPlatformValue = (_a = value === null || value === void 0 ? void 0 : value[devicePlatform]) !== null && _a !== void 0 ? _a : value === null || value === void 0 ? void 0 : value.default;
|
|
92
84
|
const valueAsThemeValues = isObject(currentPlatformValue)
|
|
93
85
|
? currentPlatformValue
|
|
94
86
|
: undefined;
|
|
95
87
|
if (valueAsThemeValues) {
|
|
96
|
-
return createThemeValuesProxy(
|
|
88
|
+
return createThemeValuesProxy(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
97
89
|
}
|
|
98
90
|
else {
|
|
99
91
|
return currentPlatformValue;
|
|
100
92
|
}
|
|
101
93
|
}
|
|
102
|
-
function getBreakpointValue(
|
|
94
|
+
function getBreakpointValue(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
|
|
103
95
|
var _a;
|
|
104
|
-
const { value, breakpoints, deviceWidth } = input;
|
|
105
96
|
const keysToBreakpointValue = Object.keys(value !== null && value !== void 0 ? value : {}).map((key) => [key, breakpoints[key]]);
|
|
106
97
|
const orderedBreakpoints = keysToBreakpointValue.sort(([_, val]) => val);
|
|
107
98
|
let currentBreakpointKey = "";
|
|
@@ -115,21 +106,20 @@ function getBreakpointValue(input) {
|
|
|
115
106
|
? currentBreakpointKey
|
|
116
107
|
: undefined;
|
|
117
108
|
if (valueAsThemeValues) {
|
|
118
|
-
return createThemeValuesProxy(
|
|
109
|
+
return createThemeValuesProxy(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
119
110
|
}
|
|
120
111
|
else {
|
|
121
112
|
return currentBreakpointValue;
|
|
122
113
|
}
|
|
123
114
|
}
|
|
124
|
-
function getLightDarkValue(
|
|
115
|
+
function getLightDarkValue(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
|
|
125
116
|
var _a;
|
|
126
|
-
const { value, currentLightDarkSelection } = input;
|
|
127
117
|
const currentLightDarkValue = (_a = value === null || value === void 0 ? void 0 : value[currentLightDarkSelection]) !== null && _a !== void 0 ? _a : value === null || value === void 0 ? void 0 : value.default;
|
|
128
118
|
const valueAsThemeValues = isObject(currentLightDarkSelection)
|
|
129
119
|
? currentLightDarkSelection
|
|
130
120
|
: undefined;
|
|
131
121
|
if (valueAsThemeValues) {
|
|
132
|
-
return createThemeValuesProxy(
|
|
122
|
+
return createThemeValuesProxy(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
133
123
|
}
|
|
134
124
|
else {
|
|
135
125
|
return currentLightDarkValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createThemeValuesProxy.js","sourceRoot":"","sources":["createThemeValuesProxy.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"createThemeValuesProxy.js","sourceRoot":"","sources":["createThemeValuesProxy.ts"],"names":[],"mappings":"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"}
|
|
@@ -2,14 +2,6 @@ import { ThemeValues, Breakpoints } from "./types";
|
|
|
2
2
|
import { Platform, TextStyle } from "react-native";
|
|
3
3
|
import { isObject } from "lodash";
|
|
4
4
|
|
|
5
|
-
interface CreateThemeValuesProxyInput {
|
|
6
|
-
value: ThemeValues | undefined;
|
|
7
|
-
breakpoints: Breakpoints;
|
|
8
|
-
deviceWidth: number;
|
|
9
|
-
devicePlatform: typeof Platform.OS;
|
|
10
|
-
currentLightDarkSelection: "light" | "dark";
|
|
11
|
-
}
|
|
12
|
-
|
|
13
5
|
/**
|
|
14
6
|
* Creates a proxy for theme value objects to select a value whenever
|
|
15
7
|
* multiple values are provided for different platforms, breakpoints, and/or light/dark modes
|
|
@@ -17,13 +9,13 @@ interface CreateThemeValuesProxyInput {
|
|
|
17
9
|
* Ex: {color: {ios: "blue", android: "red"}}
|
|
18
10
|
* -> theme.color returns "blue" when the platform is ios and "red" when android
|
|
19
11
|
*/
|
|
20
|
-
export default function createThemeValuesProxy(
|
|
21
|
-
value,
|
|
22
|
-
breakpoints,
|
|
23
|
-
deviceWidth,
|
|
24
|
-
devicePlatform,
|
|
25
|
-
currentLightDarkSelection
|
|
26
|
-
|
|
12
|
+
export default function createThemeValuesProxy(
|
|
13
|
+
value: ThemeValues | undefined,
|
|
14
|
+
breakpoints: Breakpoints,
|
|
15
|
+
deviceWidth: number,
|
|
16
|
+
devicePlatform: typeof Platform.OS,
|
|
17
|
+
currentLightDarkSelection: "light" | "dark"
|
|
18
|
+
): any /* return type 'any' to allow arbitrary object references (object.example.another.there) */ {
|
|
27
19
|
if (value === undefined || value === null) {
|
|
28
20
|
return undefined;
|
|
29
21
|
}
|
|
@@ -50,22 +42,38 @@ export default function createThemeValuesProxy({
|
|
|
50
42
|
lightDarkKeys
|
|
51
43
|
);
|
|
52
44
|
|
|
53
|
-
const input: CreateThemeValuesProxyInput = {
|
|
54
|
-
value: valueAsThemeValues,
|
|
55
|
-
breakpoints,
|
|
56
|
-
deviceWidth,
|
|
57
|
-
devicePlatform,
|
|
58
|
-
currentLightDarkSelection,
|
|
59
|
-
};
|
|
60
|
-
|
|
61
45
|
if (keysType === "default") {
|
|
62
|
-
return createThemeValuesProxy(
|
|
46
|
+
return createThemeValuesProxy(
|
|
47
|
+
valueAsThemeValues,
|
|
48
|
+
breakpoints,
|
|
49
|
+
deviceWidth,
|
|
50
|
+
devicePlatform,
|
|
51
|
+
currentLightDarkSelection
|
|
52
|
+
);
|
|
63
53
|
} else if (keysType === "platform") {
|
|
64
|
-
return getPlatformValue(
|
|
54
|
+
return getPlatformValue(
|
|
55
|
+
valueAsThemeValues,
|
|
56
|
+
breakpoints,
|
|
57
|
+
deviceWidth,
|
|
58
|
+
devicePlatform,
|
|
59
|
+
currentLightDarkSelection
|
|
60
|
+
);
|
|
65
61
|
} else if (keysType === "breakpoint") {
|
|
66
|
-
return getBreakpointValue(
|
|
62
|
+
return getBreakpointValue(
|
|
63
|
+
valueAsThemeValues,
|
|
64
|
+
breakpoints,
|
|
65
|
+
deviceWidth,
|
|
66
|
+
devicePlatform,
|
|
67
|
+
currentLightDarkSelection
|
|
68
|
+
);
|
|
67
69
|
} else if (keysType === "lightDark") {
|
|
68
|
-
return getLightDarkValue(
|
|
70
|
+
return getLightDarkValue(
|
|
71
|
+
valueAsThemeValues,
|
|
72
|
+
breakpoints,
|
|
73
|
+
deviceWidth,
|
|
74
|
+
devicePlatform,
|
|
75
|
+
currentLightDarkSelection
|
|
76
|
+
);
|
|
69
77
|
} else {
|
|
70
78
|
return undefined;
|
|
71
79
|
}
|
|
@@ -137,24 +145,38 @@ function allFalse(a: boolean, b: boolean, c: boolean, d: boolean) {
|
|
|
137
145
|
return [a, b, c, d].filter((x) => x).length === 0;
|
|
138
146
|
}
|
|
139
147
|
|
|
140
|
-
function getPlatformValue(
|
|
141
|
-
|
|
142
|
-
|
|
148
|
+
function getPlatformValue(
|
|
149
|
+
value: ThemeValues | undefined,
|
|
150
|
+
breakpoints: Breakpoints,
|
|
151
|
+
deviceWidth: number,
|
|
152
|
+
devicePlatform: typeof Platform.OS,
|
|
153
|
+
currentLightDarkSelection: "light" | "dark"
|
|
154
|
+
) {
|
|
143
155
|
const currentPlatformValue = value?.[devicePlatform] ?? value?.default;
|
|
144
156
|
const valueAsThemeValues = isObject(currentPlatformValue)
|
|
145
157
|
? (currentPlatformValue as ThemeValues)
|
|
146
158
|
: undefined;
|
|
147
159
|
|
|
148
160
|
if (valueAsThemeValues) {
|
|
149
|
-
return createThemeValuesProxy(
|
|
161
|
+
return createThemeValuesProxy(
|
|
162
|
+
valueAsThemeValues,
|
|
163
|
+
breakpoints,
|
|
164
|
+
deviceWidth,
|
|
165
|
+
devicePlatform,
|
|
166
|
+
currentLightDarkSelection
|
|
167
|
+
);
|
|
150
168
|
} else {
|
|
151
169
|
return currentPlatformValue;
|
|
152
170
|
}
|
|
153
171
|
}
|
|
154
172
|
|
|
155
|
-
function getBreakpointValue(
|
|
156
|
-
|
|
157
|
-
|
|
173
|
+
function getBreakpointValue(
|
|
174
|
+
value: ThemeValues | undefined,
|
|
175
|
+
breakpoints: Breakpoints,
|
|
176
|
+
deviceWidth: number,
|
|
177
|
+
devicePlatform: typeof Platform.OS,
|
|
178
|
+
currentLightDarkSelection: "light" | "dark"
|
|
179
|
+
) {
|
|
158
180
|
const keysToBreakpointValue: [string, number][] = Object.keys(
|
|
159
181
|
value ?? {}
|
|
160
182
|
).map((key) => [key, breakpoints[key]]);
|
|
@@ -172,15 +194,25 @@ function getBreakpointValue(input: CreateThemeValuesProxyInput) {
|
|
|
172
194
|
: undefined;
|
|
173
195
|
|
|
174
196
|
if (valueAsThemeValues) {
|
|
175
|
-
return createThemeValuesProxy(
|
|
197
|
+
return createThemeValuesProxy(
|
|
198
|
+
valueAsThemeValues,
|
|
199
|
+
breakpoints,
|
|
200
|
+
deviceWidth,
|
|
201
|
+
devicePlatform,
|
|
202
|
+
currentLightDarkSelection
|
|
203
|
+
);
|
|
176
204
|
} else {
|
|
177
205
|
return currentBreakpointValue;
|
|
178
206
|
}
|
|
179
207
|
}
|
|
180
208
|
|
|
181
|
-
function getLightDarkValue(
|
|
182
|
-
|
|
183
|
-
|
|
209
|
+
function getLightDarkValue(
|
|
210
|
+
value: ThemeValues | undefined,
|
|
211
|
+
breakpoints: Breakpoints,
|
|
212
|
+
deviceWidth: number,
|
|
213
|
+
devicePlatform: typeof Platform.OS,
|
|
214
|
+
currentLightDarkSelection: "light" | "dark"
|
|
215
|
+
) {
|
|
184
216
|
const currentLightDarkValue =
|
|
185
217
|
value?.[currentLightDarkSelection] ?? value?.default;
|
|
186
218
|
const valueAsThemeValues = isObject(currentLightDarkSelection)
|
|
@@ -188,7 +220,13 @@ function getLightDarkValue(input: CreateThemeValuesProxyInput) {
|
|
|
188
220
|
: undefined;
|
|
189
221
|
|
|
190
222
|
if (valueAsThemeValues) {
|
|
191
|
-
return createThemeValuesProxy(
|
|
223
|
+
return createThemeValuesProxy(
|
|
224
|
+
valueAsThemeValues,
|
|
225
|
+
breakpoints,
|
|
226
|
+
deviceWidth,
|
|
227
|
+
devicePlatform,
|
|
228
|
+
currentLightDarkSelection
|
|
229
|
+
);
|
|
192
230
|
} else {
|
|
193
231
|
return currentLightDarkValue;
|
|
194
232
|
}
|
package/src/validators.js
CHANGED
|
@@ -1,91 +1,17 @@
|
|
|
1
|
-
import { z } from "zod";
|
|
2
|
-
const PaletteSchema = z.record(z.string(), z.record(z.string(), z.string()));
|
|
3
|
-
const BreakpointSchema = z.record(z.string(), z.number());
|
|
4
|
-
const TextStyleSchema = z.union([
|
|
5
|
-
z.object({
|
|
6
|
-
fontSize: z.number(),
|
|
7
|
-
}),
|
|
8
|
-
z.object({
|
|
9
|
-
fontFamily: z.string(),
|
|
10
|
-
}),
|
|
11
|
-
z.object({
|
|
12
|
-
fontWeight: z.enum([
|
|
13
|
-
"normal",
|
|
14
|
-
"bold",
|
|
15
|
-
"100",
|
|
16
|
-
"200",
|
|
17
|
-
"300",
|
|
18
|
-
"400",
|
|
19
|
-
"500",
|
|
20
|
-
"600",
|
|
21
|
-
"700",
|
|
22
|
-
"800",
|
|
23
|
-
"900",
|
|
24
|
-
]),
|
|
25
|
-
}),
|
|
26
|
-
z.object({
|
|
27
|
-
fontStyle: z.enum(["normal", "italic"]),
|
|
28
|
-
}),
|
|
29
|
-
z.object({
|
|
30
|
-
letterSpacing: z.number(),
|
|
31
|
-
}),
|
|
32
|
-
z.object({
|
|
33
|
-
lineHeight: z.number(),
|
|
34
|
-
}),
|
|
35
|
-
]);
|
|
36
|
-
const ThemeValuesSchema = z.record(z.string(), z.lazy(() => z.union([z.string(), z.number(), TextStyleSchema, ThemeValuesSchema])));
|
|
37
|
-
const TextStyleOrThemeValuesSchema = z.union([TextStyleSchema, ThemeValuesSchema]);
|
|
38
|
-
const ThemeSchema = z.object({
|
|
39
|
-
name: z.string(),
|
|
40
|
-
colors: z.object({
|
|
41
|
-
branding: ThemeValuesSchema.optional(),
|
|
42
|
-
text: ThemeValuesSchema.optional(),
|
|
43
|
-
background: ThemeValuesSchema.optional(),
|
|
44
|
-
foreground: ThemeValuesSchema.optional(),
|
|
45
|
-
border: ThemeValuesSchema.optional(),
|
|
46
|
-
}),
|
|
47
|
-
typography: z.object({
|
|
48
|
-
body1: TextStyleOrThemeValuesSchema.optional(),
|
|
49
|
-
body2: TextStyleOrThemeValuesSchema.optional(),
|
|
50
|
-
button: TextStyleOrThemeValuesSchema.optional(),
|
|
51
|
-
caption: TextStyleOrThemeValuesSchema.optional(),
|
|
52
|
-
headline1: TextStyleOrThemeValuesSchema.optional(),
|
|
53
|
-
headline2: TextStyleOrThemeValuesSchema.optional(),
|
|
54
|
-
headline3: TextStyleOrThemeValuesSchema.optional(),
|
|
55
|
-
headline4: TextStyleOrThemeValuesSchema.optional(),
|
|
56
|
-
headline5: TextStyleOrThemeValuesSchema.optional(),
|
|
57
|
-
headline6: TextStyleOrThemeValuesSchema.optional(),
|
|
58
|
-
overline: TextStyleOrThemeValuesSchema.optional(),
|
|
59
|
-
subtitle1: TextStyleOrThemeValuesSchema.optional(),
|
|
60
|
-
subtitle2: TextStyleOrThemeValuesSchema.optional(),
|
|
61
|
-
}),
|
|
62
|
-
});
|
|
63
1
|
export function validatePalettes(palettes) {
|
|
64
|
-
|
|
65
|
-
if (!result.success) {
|
|
66
|
-
throw new Error("Invalid palettes object: " + result.error.message);
|
|
67
|
-
}
|
|
2
|
+
palettes;
|
|
68
3
|
}
|
|
69
4
|
export function validateBreakpoints(breakpoints) {
|
|
70
|
-
|
|
71
|
-
if (!result.success) {
|
|
72
|
-
throw new Error("Invalid breakpoints object: " + result.error.message);
|
|
73
|
-
}
|
|
5
|
+
breakpoints;
|
|
74
6
|
}
|
|
75
7
|
export function validateTheme(theme) {
|
|
76
|
-
|
|
77
|
-
if (!result.success) {
|
|
78
|
-
throw new Error("Invalid theme object: " + result.error.message);
|
|
79
|
-
}
|
|
8
|
+
theme;
|
|
80
9
|
}
|
|
81
10
|
export function isTextStyleObject(value) {
|
|
82
|
-
|
|
11
|
+
value;
|
|
12
|
+
return true;
|
|
83
13
|
}
|
|
84
14
|
export function asThemeValuesObject(value) {
|
|
85
|
-
|
|
86
|
-
if (isTextStyleObject(value)) {
|
|
87
|
-
return null;
|
|
88
|
-
}
|
|
89
|
-
return ThemeValuesSchema.safeParse(value).success ? value : null;
|
|
15
|
+
return value;
|
|
90
16
|
}
|
|
91
17
|
//# sourceMappingURL=validators.js.map
|
package/src/validators.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"validators.js","sourceRoot":"","sources":["validators.ts"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"file":"validators.js","sourceRoot":"","sources":["validators.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,gBAAgB,CAAC,QAAuB;IACtD,QAAQ,CAAC;AACX,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,WAAwB;IAC1D,WAAW,CAAC;AACd,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAAY;IACxC,KAAK,CAAC;AACR,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,KAAU;IAC1C,KAAK,CAAC;IACN,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAU;IAC5C,OAAO,KAAK,CAAC;AACf,CAAC"}
|
package/src/validators.ts
CHANGED
|
@@ -1,116 +1,22 @@
|
|
|
1
1
|
import { ColorPalettes, Breakpoints, Theme, ThemeValues } from "./types";
|
|
2
|
-
import { TextStyle } from "react-native";
|
|
3
|
-
import { z } from "zod";
|
|
4
|
-
|
|
5
|
-
const PaletteSchema: z.ZodType<ColorPalettes> = z.record(
|
|
6
|
-
z.string(),
|
|
7
|
-
z.record(z.string(), z.string())
|
|
8
|
-
);
|
|
9
|
-
|
|
10
|
-
const BreakpointSchema: z.ZodType<Breakpoints> = z.record(
|
|
11
|
-
z.string(),
|
|
12
|
-
z.number()
|
|
13
|
-
);
|
|
14
|
-
|
|
15
|
-
const TextStyleSchema: z.ZodType<TextStyle> = z.union([
|
|
16
|
-
z.object({
|
|
17
|
-
fontSize: z.number(),
|
|
18
|
-
}),
|
|
19
|
-
z.object({
|
|
20
|
-
fontFamily: z.string(),
|
|
21
|
-
}),
|
|
22
|
-
z.object({
|
|
23
|
-
fontWeight: z.enum([
|
|
24
|
-
"normal",
|
|
25
|
-
"bold",
|
|
26
|
-
"100",
|
|
27
|
-
"200",
|
|
28
|
-
"300",
|
|
29
|
-
"400",
|
|
30
|
-
"500",
|
|
31
|
-
"600",
|
|
32
|
-
"700",
|
|
33
|
-
"800",
|
|
34
|
-
"900",
|
|
35
|
-
]),
|
|
36
|
-
}),
|
|
37
|
-
z.object({
|
|
38
|
-
fontStyle: z.enum(["normal", "italic"]),
|
|
39
|
-
}),
|
|
40
|
-
z.object({
|
|
41
|
-
letterSpacing: z.number(),
|
|
42
|
-
}),
|
|
43
|
-
z.object({
|
|
44
|
-
lineHeight: z.number(),
|
|
45
|
-
}),
|
|
46
|
-
]);
|
|
47
|
-
|
|
48
|
-
const ThemeValuesSchema: z.ZodType<ThemeValues> = z.record(
|
|
49
|
-
z.string(),
|
|
50
|
-
z.lazy(() =>
|
|
51
|
-
z.union([z.string(), z.number(), TextStyleSchema, ThemeValuesSchema])
|
|
52
|
-
)
|
|
53
|
-
);
|
|
54
|
-
|
|
55
|
-
const TextStyleOrThemeValuesSchema: z.ZodType<ThemeValues | TextStyle> =
|
|
56
|
-
z.union([TextStyleSchema, ThemeValuesSchema]);
|
|
57
|
-
|
|
58
|
-
const ThemeSchema: z.ZodType<Theme> = z.object({
|
|
59
|
-
name: z.string(),
|
|
60
|
-
colors: z.object({
|
|
61
|
-
branding: ThemeValuesSchema.optional(),
|
|
62
|
-
text: ThemeValuesSchema.optional(),
|
|
63
|
-
background: ThemeValuesSchema.optional(),
|
|
64
|
-
foreground: ThemeValuesSchema.optional(),
|
|
65
|
-
border: ThemeValuesSchema.optional(),
|
|
66
|
-
}),
|
|
67
|
-
typography: z.object({
|
|
68
|
-
body1: TextStyleOrThemeValuesSchema.optional(),
|
|
69
|
-
body2: TextStyleOrThemeValuesSchema.optional(),
|
|
70
|
-
button: TextStyleOrThemeValuesSchema.optional(),
|
|
71
|
-
caption: TextStyleOrThemeValuesSchema.optional(),
|
|
72
|
-
headline1: TextStyleOrThemeValuesSchema.optional(),
|
|
73
|
-
headline2: TextStyleOrThemeValuesSchema.optional(),
|
|
74
|
-
headline3: TextStyleOrThemeValuesSchema.optional(),
|
|
75
|
-
headline4: TextStyleOrThemeValuesSchema.optional(),
|
|
76
|
-
headline5: TextStyleOrThemeValuesSchema.optional(),
|
|
77
|
-
headline6: TextStyleOrThemeValuesSchema.optional(),
|
|
78
|
-
overline: TextStyleOrThemeValuesSchema.optional(),
|
|
79
|
-
subtitle1: TextStyleOrThemeValuesSchema.optional(),
|
|
80
|
-
subtitle2: TextStyleOrThemeValuesSchema.optional(),
|
|
81
|
-
}),
|
|
82
|
-
});
|
|
83
2
|
|
|
84
3
|
export function validatePalettes(palettes: ColorPalettes) {
|
|
85
|
-
|
|
86
|
-
if (!result.success) {
|
|
87
|
-
throw new Error("Invalid palettes object: " + result.error.message);
|
|
88
|
-
}
|
|
4
|
+
palettes;
|
|
89
5
|
}
|
|
90
6
|
|
|
91
7
|
export function validateBreakpoints(breakpoints: Breakpoints) {
|
|
92
|
-
|
|
93
|
-
if (!result.success) {
|
|
94
|
-
throw new Error("Invalid breakpoints object: " + result.error.message);
|
|
95
|
-
}
|
|
8
|
+
breakpoints;
|
|
96
9
|
}
|
|
97
10
|
|
|
98
11
|
export function validateTheme(theme: Theme) {
|
|
99
|
-
|
|
100
|
-
if (!result.success) {
|
|
101
|
-
throw new Error("Invalid theme object: " + result.error.message);
|
|
102
|
-
}
|
|
12
|
+
theme;
|
|
103
13
|
}
|
|
104
14
|
|
|
105
15
|
export function isTextStyleObject(value: any): boolean {
|
|
106
|
-
|
|
16
|
+
value;
|
|
17
|
+
return true;
|
|
107
18
|
}
|
|
108
19
|
|
|
109
20
|
export function asThemeValuesObject(value: any): ThemeValues | null {
|
|
110
|
-
|
|
111
|
-
if (isTextStyleObject(value)) {
|
|
112
|
-
return null;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
return ThemeValuesSchema.safeParse(value).success ? value : null;
|
|
21
|
+
return value;
|
|
116
22
|
}
|