@draftbit/theme 50.5.2 → 50.5.3-22879.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.
Files changed (30) hide show
  1. package/lib/commonjs/DefaultTheme.js +1 -1
  2. package/lib/commonjs/Provider.js +1 -1
  3. package/lib/commonjs/createThemeValuesProxy.js +1 -1
  4. package/lib/commonjs/types.js +1 -0
  5. package/lib/commonjs/validators.js +1 -1
  6. package/lib/typescript/src/DefaultTheme.js +38 -38
  7. package/lib/typescript/src/DefaultTheme.js.map +1 -1
  8. package/lib/typescript/src/Provider.js +38 -10
  9. package/lib/typescript/src/Provider.js.map +1 -1
  10. package/lib/typescript/src/createThemeValuesProxy.js +23 -19
  11. package/lib/typescript/src/createThemeValuesProxy.js.map +1 -1
  12. package/lib/typescript/src/types.d.ts +30 -2
  13. package/lib/typescript/src/validators.d.ts +2 -1
  14. package/lib/typescript/src/validators.js +62 -42
  15. package/lib/typescript/src/validators.js.map +1 -1
  16. package/lib/typescript/tsconfig.tsbuildinfo +1 -1
  17. package/package.json +4 -4
  18. package/src/DefaultTheme.js +38 -38
  19. package/src/DefaultTheme.js.map +1 -1
  20. package/src/DefaultTheme.ts +38 -38
  21. package/src/Provider.js +38 -10
  22. package/src/Provider.js.map +1 -1
  23. package/src/Provider.tsx +60 -36
  24. package/src/createThemeValuesProxy.js +23 -19
  25. package/src/createThemeValuesProxy.js.map +1 -1
  26. package/src/createThemeValuesProxy.ts +32 -23
  27. package/src/types.ts +33 -2
  28. package/src/validators.js +62 -42
  29. package/src/validators.js.map +1 -1
  30. package/src/validators.ts +82 -46
package/src/DefaultTheme.ts CHANGED
@@ -64,84 +64,84 @@ const DraftbitTheme = createTheme({
64
64
  },
65
65
  },
66
66
  typography: {
67
- headline1: {
67
+ body1: {
68
68
  ...systemWeights.regular,
69
+ fontSize: 16,
70
+ letterSpacing: 0,
71
+ lineHeight: 26,
72
+ },
73
+ body2: {
74
+ ...systemWeights.regular,
75
+ fontSize: 14,
76
+ letterSpacing: 0,
77
+ lineHeight: 22,
78
+ },
79
+ button: {
80
+ ...systemWeights.bold,
81
+ fontSize: 14,
82
+ letterSpacing: 0,
83
+ lineHeight: 16,
84
+ },
85
+ caption: {
86
+ ...systemWeights.regular,
87
+ fontSize: 12,
88
+ letterSpacing: 0,
89
+ lineHeight: 16,
90
+ },
91
+ headline1: {
92
+ ...systemWeights.bold,
69
93
  fontSize: 60,
70
94
  letterSpacing: 0,
71
95
  lineHeight: 71,
72
96
  },
73
97
  headline2: {
74
- ...systemWeights.regular,
98
+ ...systemWeights.bold,
75
99
  fontSize: 48,
76
100
  letterSpacing: 0,
77
101
  lineHeight: 58,
78
102
  },
79
103
  headline3: {
80
- ...systemWeights.regular,
104
+ ...systemWeights.bold,
81
105
  fontSize: 34,
82
106
  letterSpacing: 0,
83
107
  lineHeight: 40,
84
108
  },
85
109
  headline4: {
86
- ...systemWeights.regular,
110
+ ...systemWeights.bold,
87
111
  fontSize: 24,
88
112
  letterSpacing: 0,
89
113
  lineHeight: 34,
90
114
  },
91
115
  headline5: {
92
- ...systemWeights.regular,
116
+ ...systemWeights.bold,
93
117
  fontSize: 20,
94
118
  letterSpacing: 0,
95
119
  lineHeight: 26,
96
120
  },
97
- subtitle1: {
98
- ...systemWeights.regular,
121
+ headline6: {
122
+ ...systemWeights.bold,
99
123
  fontSize: 16,
100
124
  letterSpacing: 0,
101
- lineHeight: 26,
125
+ lineHeight: 24,
102
126
  },
103
- subtitle2: {
127
+ overline: {
104
128
  ...systemWeights.regular,
105
- fontSize: 14,
106
- letterSpacing: 0,
107
- lineHeight: 22,
129
+ fontSize: 12,
130
+ letterSpacing: 2,
131
+ lineHeight: 16,
108
132
  },
109
- body1: {
133
+ subtitle1: {
110
134
  ...systemWeights.regular,
111
135
  fontSize: 16,
112
136
  letterSpacing: 0,
113
137
  lineHeight: 26,
114
138
  },
115
- body2: {
139
+ subtitle2: {
116
140
  ...systemWeights.regular,
117
141
  fontSize: 14,
118
142
  letterSpacing: 0,
119
143
  lineHeight: 22,
120
144
  },
121
- button: {
122
- ...systemWeights.regular,
123
- fontSize: 14,
124
- letterSpacing: 0,
125
- lineHeight: 16,
126
- },
127
- caption: {
128
- ...systemWeights.regular,
129
- fontSize: 12,
130
- letterSpacing: 0,
131
- lineHeight: 16,
132
- },
133
- overline: {
134
- ...systemWeights.regular,
135
- fontSize: 12,
136
- letterSpacing: 2,
137
- lineHeight: 16,
138
- },
139
- headline6: {
140
- ...systemWeights.regular,
141
- fontSize: 16,
142
- letterSpacing: 0,
143
- lineHeight: 24,
144
- },
145
145
  },
146
146
  },
147
147
  });
package/src/Provider.js CHANGED
@@ -3,6 +3,7 @@ import { Dimensions, Platform, useColorScheme } from "react-native";
3
3
  import AsyncStorage from "@react-native-async-storage/async-storage";
4
4
  import createThemeValuesProxy from "./createThemeValuesProxy";
5
5
  import DefaultTheme from "./DefaultTheme";
6
+ import { asThemeValuesObject } from "./validators";
6
7
  const SAVED_SELECTED_THEME_KEY = "saved_selected_theme";
7
8
  const ThemeContext = React.createContext({
8
9
  theme: DefaultTheme,
@@ -28,16 +29,43 @@ const Provider = ({ themes, breakpoints, initialThemeName, children, }) => {
28
29
  });
29
30
  }
30
31
  }, [themes, setCurrentTheme]);
31
- const proxiedTheme = React.useMemo(() => ({
32
- ...currentTheme,
33
- colors: {
34
- branding: createThemeValuesProxy(currentTheme.colors.branding, breakpoints, deviceWidth, Platform.OS, lightDarkSelection),
35
- text: createThemeValuesProxy(currentTheme.colors.text, breakpoints, deviceWidth, Platform.OS, lightDarkSelection),
36
- background: createThemeValuesProxy(currentTheme.colors.background, breakpoints, deviceWidth, Platform.OS, lightDarkSelection),
37
- foreground: createThemeValuesProxy(currentTheme.colors.foreground, breakpoints, deviceWidth, Platform.OS, lightDarkSelection),
38
- border: createThemeValuesProxy(currentTheme.colors.border, breakpoints, deviceWidth, Platform.OS, lightDarkSelection),
39
- },
40
- }), [currentTheme, deviceWidth, breakpoints, lightDarkSelection]);
32
+ const proxiedTheme = React.useMemo(() => {
33
+ const createProxiedThemeValue = (value) => createThemeValuesProxy(value, breakpoints, deviceWidth, Platform.OS, lightDarkSelection);
34
+ const createProxiedTypographyValue = (value) => {
35
+ const valueAsThemeValues = asThemeValuesObject(value);
36
+ if (valueAsThemeValues) {
37
+ return createProxiedThemeValue(valueAsThemeValues);
38
+ }
39
+ else {
40
+ return value;
41
+ }
42
+ };
43
+ return {
44
+ ...currentTheme,
45
+ colors: {
46
+ branding: createProxiedThemeValue(currentTheme.colors.branding),
47
+ text: createProxiedThemeValue(currentTheme.colors.text),
48
+ background: createProxiedThemeValue(currentTheme.colors.background),
49
+ foreground: createProxiedThemeValue(currentTheme.colors.foreground),
50
+ border: createProxiedThemeValue(currentTheme.colors.border),
51
+ },
52
+ typography: {
53
+ body1: createProxiedTypographyValue(currentTheme.typography.body1),
54
+ body2: createProxiedTypographyValue(currentTheme.typography.body2),
55
+ button: createProxiedTypographyValue(currentTheme.typography.button),
56
+ caption: createProxiedTypographyValue(currentTheme.typography.caption),
57
+ headline1: createProxiedTypographyValue(currentTheme.typography.headline1),
58
+ headline2: createProxiedTypographyValue(currentTheme.typography.headline2),
59
+ headline3: createProxiedTypographyValue(currentTheme.typography.headline3),
60
+ headline4: createProxiedTypographyValue(currentTheme.typography.headline4),
61
+ headline5: createProxiedTypographyValue(currentTheme.typography.headline5),
62
+ headline6: createProxiedTypographyValue(currentTheme.typography.headline6),
63
+ overline: createProxiedTypographyValue(currentTheme.typography.overline),
64
+ subtitle1: createProxiedTypographyValue(currentTheme.typography.subtitle1),
65
+ subtitle2: createProxiedTypographyValue(currentTheme.typography.subtitle2),
66
+ },
67
+ };
68
+ }, [currentTheme, deviceWidth, breakpoints, lightDarkSelection]);
41
69
  React.useEffect(() => {
42
70
  const listener = Dimensions.addEventListener("change", ({ window }) => setDeviceWidth(window.width));
43
71
  return () => {
package/src/Provider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Provider.js","sourceRoot":"","sources":["Provider.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Provider.js","sourceRoot":"","sources":["Provider.tsx"],"names":[],"mappings":"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"}
package/src/Provider.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { Dimensions, Platform, useColorScheme } from "react-native";
2
+ import { Dimensions, Platform, useColorScheme, TextStyle } from "react-native";
3
3
  import AsyncStorage from "@react-native-async-storage/async-storage";
4
4
  import createThemeValuesProxy from "./createThemeValuesProxy";
5
5
  import DefaultTheme from "./DefaultTheme";
@@ -7,8 +7,10 @@ import {
7
7
  Breakpoints,
8
8
  ChangeThemeOptions,
9
9
  ReadTheme,
10
+ ThemeValues,
10
11
  ValidatedTheme,
11
12
  } from "./types";
13
+ import { asThemeValuesObject } from "./validators";
12
14
 
13
15
  const SAVED_SELECTED_THEME_KEY = "saved_selected_theme";
14
16
 
@@ -66,49 +68,71 @@ const Provider: React.FC<React.PropsWithChildren<ProviderProps>> = ({
66
68
  [themes, setCurrentTheme]
67
69
  );
68
70
 
69
- const proxiedTheme: ReadTheme = React.useMemo(
70
- () => ({
71
+ const proxiedTheme: ReadTheme = React.useMemo(() => {
72
+ const createProxiedThemeValue = (value: ThemeValues | undefined) =>
73
+ createThemeValuesProxy(
74
+ value,
75
+ breakpoints,
76
+ deviceWidth,
77
+ Platform.OS,
78
+ lightDarkSelection
79
+ );
80
+
81
+ const createProxiedTypographyValue = (
82
+ value: TextStyle | ThemeValues | undefined
83
+ ) => {
84
+ const valueAsThemeValues = asThemeValuesObject(value);
85
+ if (valueAsThemeValues) {
86
+ return createProxiedThemeValue(valueAsThemeValues);
87
+ } else {
88
+ return value;
89
+ }
90
+ };
91
+
92
+ return {
71
93
  ...currentTheme,
72
94
  colors: {
73
- branding: createThemeValuesProxy(
74
- currentTheme.colors.branding,
75
- breakpoints,
76
- deviceWidth,
77
- Platform.OS,
78
- lightDarkSelection
95
+ branding: createProxiedThemeValue(currentTheme.colors.branding),
96
+ text: createProxiedThemeValue(currentTheme.colors.text),
97
+ background: createProxiedThemeValue(currentTheme.colors.background),
98
+ foreground: createProxiedThemeValue(currentTheme.colors.foreground),
99
+ border: createProxiedThemeValue(currentTheme.colors.border),
100
+ },
101
+ typography: {
102
+ body1: createProxiedTypographyValue(currentTheme.typography.body1),
103
+ body2: createProxiedTypographyValue(currentTheme.typography.body2),
104
+ button: createProxiedTypographyValue(currentTheme.typography.button),
105
+ caption: createProxiedTypographyValue(currentTheme.typography.caption),
106
+ headline1: createProxiedTypographyValue(
107
+ currentTheme.typography.headline1
79
108
  ),
80
- text: createThemeValuesProxy(
81
- currentTheme.colors.text,
82
- breakpoints,
83
- deviceWidth,
84
- Platform.OS,
85
- lightDarkSelection
109
+ headline2: createProxiedTypographyValue(
110
+ currentTheme.typography.headline2
86
111
  ),
87
- background: createThemeValuesProxy(
88
- currentTheme.colors.background,
89
- breakpoints,
90
- deviceWidth,
91
- Platform.OS,
92
- lightDarkSelection
112
+ headline3: createProxiedTypographyValue(
113
+ currentTheme.typography.headline3
93
114
  ),
94
- foreground: createThemeValuesProxy(
95
- currentTheme.colors.foreground,
96
- breakpoints,
97
- deviceWidth,
98
- Platform.OS,
99
- lightDarkSelection
115
+ headline4: createProxiedTypographyValue(
116
+ currentTheme.typography.headline4
100
117
  ),
101
- border: createThemeValuesProxy(
102
- currentTheme.colors.border,
103
- breakpoints,
104
- deviceWidth,
105
- Platform.OS,
106
- lightDarkSelection
118
+ headline5: createProxiedTypographyValue(
119
+ currentTheme.typography.headline5
120
+ ),
121
+ headline6: createProxiedTypographyValue(
122
+ currentTheme.typography.headline6
123
+ ),
124
+ overline: createProxiedTypographyValue(
125
+ currentTheme.typography.overline
126
+ ),
127
+ subtitle1: createProxiedTypographyValue(
128
+ currentTheme.typography.subtitle1
129
+ ),
130
+ subtitle2: createProxiedTypographyValue(
131
+ currentTheme.typography.subtitle2
107
132
  ),
108
133
  },
109
- }),
110
- [currentTheme, deviceWidth, breakpoints, lightDarkSelection]
111
- );
134
+ };
135
+ }, [currentTheme, deviceWidth, breakpoints, lightDarkSelection]);
112
136
 
113
137
  React.useEffect(() => {
114
138
  const listener = Dimensions.addEventListener("change", ({ window }) =>
package/src/createThemeValuesProxy.js CHANGED
@@ -1,4 +1,4 @@
1
- import { isObject } from "lodash";
1
+ import { asThemeValuesObject } from "./validators";
2
2
  /**
3
3
  * Creates a proxy for theme value objects to select a value whenever
4
4
  * multiple values are provided for different platforms, breakpoints, and/or light/dark modes
@@ -13,30 +13,31 @@ export default function createThemeValuesProxy(value, breakpoints, deviceWidth,
13
13
  return new Proxy(value, {
14
14
  get: (target, key) => {
15
15
  const currentValue = target[key];
16
- if (!isObject(currentValue)) {
17
- return currentValue;
18
- }
19
- else {
16
+ const valueAsThemeValues = asThemeValuesObject(currentValue);
17
+ if (valueAsThemeValues) {
20
18
  const platformKeys = ["ios", "android", "web", "macos", "windows"];
21
19
  const breakpointKeys = Object.keys(breakpoints);
22
20
  const lightDarkKeys = ["light", "dark"];
23
- const keysType = getKeysType(currentValue, platformKeys, breakpointKeys, lightDarkKeys);
21
+ const keysType = getKeysType(valueAsThemeValues, platformKeys, breakpointKeys, lightDarkKeys);
24
22
  if (keysType === "default") {
25
- return createThemeValuesProxy(currentValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
23
+ return createThemeValuesProxy(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
26
24
  }
27
25
  else if (keysType === "platform") {
28
- return getPlatformValue(currentValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
26
+ return getPlatformValue(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
29
27
  }
30
28
  else if (keysType === "breakpoint") {
31
- return getBreakpointValue(currentValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
29
+ return getBreakpointValue(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
32
30
  }
33
31
  else if (keysType === "lightDark") {
34
- return getLightDarkValue(currentValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
32
+ return getLightDarkValue(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
35
33
  }
36
34
  else {
37
35
  return undefined;
38
36
  }
39
37
  }
38
+ else {
39
+ return currentValue;
40
+ }
40
41
  },
41
42
  set: () => {
42
43
  throw new Error("Theme is read only, cannot be modified at runtime");
@@ -78,11 +79,12 @@ function allFalse(a, b, c, d) {
78
79
  function getPlatformValue(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
79
80
  var _a;
80
81
  const currentPlatformValue = (_a = value[devicePlatform]) !== null && _a !== void 0 ? _a : value.default;
81
- if (!isObject(currentPlatformValue)) {
82
- return currentPlatformValue;
82
+ const valueAsThemeValues = asThemeValuesObject(currentPlatformValue);
83
+ if (valueAsThemeValues) {
84
+ return createThemeValuesProxy(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
83
85
  }
84
86
  else {
85
- return createThemeValuesProxy(currentPlatformValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
87
+ return currentPlatformValue;
86
88
  }
87
89
  }
88
90
  function getBreakpointValue(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
@@ -96,21 +98,23 @@ function getBreakpointValue(value, breakpoints, deviceWidth, devicePlatform, cur
96
98
  }
97
99
  }
98
100
  const currentBreakpointValue = (_a = value[currentBreakpointKey]) !== null && _a !== void 0 ? _a : value.default;
99
- if (!isObject(currentBreakpointValue)) {
100
- return currentBreakpointValue;
101
+ const valueAsThemeValues = asThemeValuesObject(currentBreakpointValue);
102
+ if (valueAsThemeValues) {
103
+ return createThemeValuesProxy(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
101
104
  }
102
105
  else {
103
- return createThemeValuesProxy(currentBreakpointValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
106
+ return currentBreakpointValue;
104
107
  }
105
108
  }
106
109
  function getLightDarkValue(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
107
110
  var _a;
108
111
  const currentLightDarkValue = (_a = value[currentLightDarkSelection]) !== null && _a !== void 0 ? _a : value.default;
109
- if (!isObject(currentLightDarkValue)) {
110
- return currentLightDarkValue;
112
+ const valueAsThemeValues = asThemeValuesObject(currentLightDarkValue);
113
+ if (valueAsThemeValues) {
114
+ return createThemeValuesProxy(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
111
115
  }
112
116
  else {
113
- return createThemeValuesProxy(currentLightDarkValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
117
+ return currentLightDarkValue;
114
118
  }
115
119
  }
116
120
  //# sourceMappingURL=createThemeValuesProxy.js.map
package/src/createThemeValuesProxy.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"createThemeValuesProxy.js","sourceRoot":"","sources":["createThemeValuesProxy.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"createThemeValuesProxy.js","sourceRoot":"","sources":["createThemeValuesProxy.ts"],"names":[],"mappings":"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"}
package/src/createThemeValuesProxy.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ThemeValues, Breakpoints } from "./types";
2
- import { Platform } from "react-native";
3
- import { isObject } from "lodash";
2
+ import { Platform, TextStyle } from "react-native";
3
+ import { asThemeValuesObject } from "./validators";
4
4
 
5
5
  /**
6
6
  * Creates a proxy for theme value objects to select a value whenever
@@ -23,16 +23,18 @@ export default function createThemeValuesProxy(
23
23
  get: (
24
24
  target: ThemeValues,
25
25
  key: string
26
- ): string | number | ThemeValues | undefined => {
26
+ ): string | number | ThemeValues | TextStyle | undefined => {
27
27
  const currentValue = target[key];
28
- if (!isObject(currentValue)) {
29
- return currentValue;
30
- } else {
28
+
29
+ const valueAsThemeValues = asThemeValuesObject(currentValue);
30
+
31
+ if (valueAsThemeValues) {
31
32
  const platformKeys = ["ios", "android", "web", "macos", "windows"];
32
33
  const breakpointKeys = Object.keys(breakpoints);
33
34
  const lightDarkKeys = ["light", "dark"];
35
+
34
36
  const keysType = getKeysType(
35
- currentValue,
37
+ valueAsThemeValues,
36
38
  platformKeys,
37
39
  breakpointKeys,
38
40
  lightDarkKeys
@@ -40,7 +42,7 @@ export default function createThemeValuesProxy(
40
42
 
41
43
  if (keysType === "default") {
42
44
  return createThemeValuesProxy(
43
- currentValue,
45
+ valueAsThemeValues,
44
46
  breakpoints,
45
47
  deviceWidth,
46
48
  devicePlatform,
@@ -48,7 +50,7 @@ export default function createThemeValuesProxy(
48
50
  );
49
51
  } else if (keysType === "platform") {
50
52
  return getPlatformValue(
51
- currentValue,
53
+ valueAsThemeValues,
52
54
  breakpoints,
53
55
  deviceWidth,
54
56
  devicePlatform,
@@ -56,7 +58,7 @@ export default function createThemeValuesProxy(
56
58
  );
57
59
  } else if (keysType === "breakpoint") {
58
60
  return getBreakpointValue(
59
- currentValue,
61
+ valueAsThemeValues,
60
62
  breakpoints,
61
63
  deviceWidth,
62
64
  devicePlatform,
@@ -64,7 +66,7 @@ export default function createThemeValuesProxy(
64
66
  );
65
67
  } else if (keysType === "lightDark") {
66
68
  return getLightDarkValue(
67
- currentValue,
69
+ valueAsThemeValues,
68
70
  breakpoints,
69
71
  deviceWidth,
70
72
  devicePlatform,
@@ -73,6 +75,8 @@ export default function createThemeValuesProxy(
73
75
  } else {
74
76
  return undefined;
75
77
  }
78
+ } else {
79
+ return currentValue;
76
80
  }
77
81
  },
78
82
  set: () => {
@@ -147,16 +151,18 @@ function getPlatformValue(
147
151
  currentLightDarkSelection: "light" | "dark"
148
152
  ) {
149
153
  const currentPlatformValue = value[devicePlatform] ?? value.default;
150
- if (!isObject(currentPlatformValue)) {
151
- return currentPlatformValue;
152
- } else {
154
+ const valueAsThemeValues = asThemeValuesObject(currentPlatformValue);
155
+
156
+ if (valueAsThemeValues) {
153
157
  return createThemeValuesProxy(
154
- currentPlatformValue,
158
+ valueAsThemeValues,
155
159
  breakpoints,
156
160
  deviceWidth,
157
161
  devicePlatform,
158
162
  currentLightDarkSelection
159
163
  );
164
+ } else {
165
+ return currentPlatformValue;
160
166
  }
161
167
  }
162
168
 
@@ -178,16 +184,18 @@ function getBreakpointValue(
178
184
  }
179
185
  }
180
186
  const currentBreakpointValue = value[currentBreakpointKey] ?? value.default;
181
- if (!isObject(currentBreakpointValue)) {
182
- return currentBreakpointValue;
183
- } else {
187
+ const valueAsThemeValues = asThemeValuesObject(currentBreakpointValue);
188
+
189
+ if (valueAsThemeValues) {
184
190
  return createThemeValuesProxy(
185
- currentBreakpointValue,
191
+ valueAsThemeValues,
186
192
  breakpoints,
187
193
  deviceWidth,
188
194
  devicePlatform,
189
195
  currentLightDarkSelection
190
196
  );
197
+ } else {
198
+ return currentBreakpointValue;
191
199
  }
192
200
  }
193
201
 
@@ -200,16 +208,17 @@ function getLightDarkValue(
200
208
  ) {
201
209
  const currentLightDarkValue =
202
210
  value[currentLightDarkSelection] ?? value.default;
211
+ const valueAsThemeValues = asThemeValuesObject(currentLightDarkValue);
203
212
 
204
- if (!isObject(currentLightDarkValue)) {
205
- return currentLightDarkValue;
206
- } else {
213
+ if (valueAsThemeValues) {
207
214
  return createThemeValuesProxy(
208
- currentLightDarkValue,
215
+ valueAsThemeValues,
209
216
  breakpoints,
210
217
  deviceWidth,
211
218
  devicePlatform,
212
219
  currentLightDarkSelection
213
220
  );
221
+ } else {
222
+ return currentLightDarkValue;
214
223
  }
215
224
  }
package/src/types.ts CHANGED
@@ -1,5 +1,7 @@
1
+ import { TextStyle } from "react-native";
2
+
1
3
  export type ThemeValues = {
2
- [key: string]: string | number | ThemeValues;
4
+ [key: string]: string | number | TextStyle | ThemeValues;
3
5
  };
4
6
 
5
7
  export type Theme = {
@@ -11,7 +13,21 @@ export type Theme = {
11
13
  foreground?: ThemeValues;
12
14
  border?: ThemeValues;
13
15
  };
14
- typography: { [key: string]: any }; //TODO: Update theme to support typography. Left as 'any' for legacy support until updated and migrated
16
+ typography: {
17
+ body1?: ThemeValues | TextStyle;
18
+ body2?: ThemeValues | TextStyle;
19
+ button?: ThemeValues | TextStyle;
20
+ caption?: ThemeValues | TextStyle;
21
+ headline1?: ThemeValues | TextStyle;
22
+ headline2?: ThemeValues | TextStyle;
23
+ headline3?: ThemeValues | TextStyle;
24
+ headline4?: ThemeValues | TextStyle;
25
+ headline5?: ThemeValues | TextStyle;
26
+ headline6?: ThemeValues | TextStyle;
27
+ overline?: ThemeValues | TextStyle;
28
+ subtitle1?: ThemeValues | TextStyle;
29
+ subtitle2?: ThemeValues | TextStyle;
30
+ };
15
31
  };
16
32
 
17
33
  export type ValidatedTheme = Theme & {
@@ -26,6 +42,21 @@ export type ReadTheme = Theme & {
26
42
  foreground?: any;
27
43
  border?: any;
28
44
  };
45
+ typography: {
46
+ body1?: any;
47
+ body2?: any;
48
+ button?: any;
49
+ caption?: any;
50
+ headline1?: any;
51
+ headline2?: any;
52
+ headline3?: any;
53
+ headline4?: any;
54
+ headline5?: any;
55
+ headline6?: any;
56
+ overline?: any;
57
+ subtitle1?: any;
58
+ subtitle2?: any;
59
+ };
29
60
  };
30
61
 
31
62
  export type ColorPaletteValues = {