@draftbit/theme 50.5.5 → 50.6.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.
Files changed (37) hide show
  1. package/lib/commonjs/DefaultTheme.js +1 -1
  2. package/lib/commonjs/Provider.js +1 -1
  3. package/lib/commonjs/createTheme.js +1 -1
  4. package/lib/commonjs/createThemeValuesProxy.js +1 -1
  5. package/lib/commonjs/types.js +1 -0
  6. package/lib/commonjs/validators.js +1 -1
  7. package/lib/typescript/src/DefaultTheme.js +38 -38
  8. package/lib/typescript/src/DefaultTheme.js.map +1 -1
  9. package/lib/typescript/src/Provider.js +29 -11
  10. package/lib/typescript/src/Provider.js.map +1 -1
  11. package/lib/typescript/src/createTheme.js +25 -3
  12. package/lib/typescript/src/createTheme.js.map +1 -1
  13. package/lib/typescript/src/createThemeValuesProxy.d.ts +9 -1
  14. package/lib/typescript/src/createThemeValuesProxy.js +41 -27
  15. package/lib/typescript/src/createThemeValuesProxy.js.map +1 -1
  16. package/lib/typescript/src/types.d.ts +30 -2
  17. package/lib/typescript/src/validators.d.ts +3 -1
  18. package/lib/typescript/src/validators.js +81 -42
  19. package/lib/typescript/src/validators.js.map +1 -1
  20. package/lib/typescript/tsconfig.tsbuildinfo +1 -1
  21. package/package.json +5 -5
  22. package/src/DefaultTheme.js +38 -38
  23. package/src/DefaultTheme.js.map +1 -1
  24. package/src/DefaultTheme.ts +38 -38
  25. package/src/Provider.js +29 -11
  26. package/src/Provider.js.map +1 -1
  27. package/src/Provider.tsx +29 -41
  28. package/src/createTheme.js +25 -3
  29. package/src/createTheme.js.map +1 -1
  30. package/src/createTheme.ts +30 -2
  31. package/src/createThemeValuesProxy.js +41 -27
  32. package/src/createThemeValuesProxy.js.map +1 -1
  33. package/src/createThemeValuesProxy.ts +68 -96
  34. package/src/types.ts +33 -2
  35. package/src/validators.js +81 -42
  36. package/src/validators.js.map +1 -1
  37. package/src/validators.ts +103 -46
@@ -61,84 +61,84 @@ const DraftbitTheme = createTheme({
61
61
  },
62
62
  },
63
63
  typography: {
64
- headline1: {
64
+ body1: {
65
65
  ...systemWeights.regular,
66
+ fontSize: 16,
67
+ letterSpacing: 0,
68
+ lineHeight: 26,
69
+ },
70
+ body2: {
71
+ ...systemWeights.regular,
72
+ fontSize: 14,
73
+ letterSpacing: 0,
74
+ lineHeight: 22,
75
+ },
76
+ button: {
77
+ ...systemWeights.bold,
78
+ fontSize: 14,
79
+ letterSpacing: 0,
80
+ lineHeight: 16,
81
+ },
82
+ caption: {
83
+ ...systemWeights.regular,
84
+ fontSize: 12,
85
+ letterSpacing: 0,
86
+ lineHeight: 16,
87
+ },
88
+ headline1: {
89
+ ...systemWeights.bold,
66
90
  fontSize: 60,
67
91
  letterSpacing: 0,
68
92
  lineHeight: 71,
69
93
  },
70
94
  headline2: {
71
- ...systemWeights.regular,
95
+ ...systemWeights.bold,
72
96
  fontSize: 48,
73
97
  letterSpacing: 0,
74
98
  lineHeight: 58,
75
99
  },
76
100
  headline3: {
77
- ...systemWeights.regular,
101
+ ...systemWeights.bold,
78
102
  fontSize: 34,
79
103
  letterSpacing: 0,
80
104
  lineHeight: 40,
81
105
  },
82
106
  headline4: {
83
- ...systemWeights.regular,
107
+ ...systemWeights.bold,
84
108
  fontSize: 24,
85
109
  letterSpacing: 0,
86
110
  lineHeight: 34,
87
111
  },
88
112
  headline5: {
89
- ...systemWeights.regular,
113
+ ...systemWeights.bold,
90
114
  fontSize: 20,
91
115
  letterSpacing: 0,
92
116
  lineHeight: 26,
93
117
  },
94
- subtitle1: {
95
- ...systemWeights.regular,
118
+ headline6: {
119
+ ...systemWeights.bold,
96
120
  fontSize: 16,
97
121
  letterSpacing: 0,
98
- lineHeight: 26,
122
+ lineHeight: 24,
99
123
  },
100
- subtitle2: {
124
+ overline: {
101
125
  ...systemWeights.regular,
102
- fontSize: 14,
103
- letterSpacing: 0,
104
- lineHeight: 22,
126
+ fontSize: 12,
127
+ letterSpacing: 2,
128
+ lineHeight: 16,
105
129
  },
106
- body1: {
130
+ subtitle1: {
107
131
  ...systemWeights.regular,
108
132
  fontSize: 16,
109
133
  letterSpacing: 0,
110
134
  lineHeight: 26,
111
135
  },
112
- body2: {
136
+ subtitle2: {
113
137
  ...systemWeights.regular,
114
138
  fontSize: 14,
115
139
  letterSpacing: 0,
116
140
  lineHeight: 22,
117
141
  },
118
- button: {
119
- ...systemWeights.regular,
120
- fontSize: 14,
121
- letterSpacing: 0,
122
- lineHeight: 16,
123
- },
124
- caption: {
125
- ...systemWeights.regular,
126
- fontSize: 12,
127
- letterSpacing: 0,
128
- lineHeight: 16,
129
- },
130
- overline: {
131
- ...systemWeights.regular,
132
- fontSize: 12,
133
- letterSpacing: 2,
134
- lineHeight: 16,
135
- },
136
- headline6: {
137
- ...systemWeights.regular,
138
- fontSize: 16,
139
- letterSpacing: 0,
140
- lineHeight: 24,
141
- },
142
142
  },
143
143
  },
144
144
  });
@@ -1 +1 @@
1
- {"version":3,"file":"DefaultTheme.js","sourceRoot":"","sources":["DefaultTheme.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DefaultTheme.js","sourceRoot":"","sources":["DefaultTheme.ts"],"names":[],"mappings":"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"}
@@ -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
@@ -28,16 +28,26 @@ const Provider = ({ themes, breakpoints, initialThemeName, children, }) => {
28
28
  });
29
29
  }
30
30
  }, [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]);
31
+ const proxiedTheme = React.useMemo(() => {
32
+ const createProxiedThemeValue = (value) => createThemeValuesProxy({
33
+ value,
34
+ breakpoints,
35
+ deviceWidth,
36
+ devicePlatform: Platform.OS,
37
+ currentLightDarkSelection: lightDarkSelection,
38
+ });
39
+ return {
40
+ ...currentTheme,
41
+ colors: {
42
+ branding: createProxiedThemeValue(currentTheme.colors.branding),
43
+ text: createProxiedThemeValue(currentTheme.colors.text),
44
+ background: createProxiedThemeValue(currentTheme.colors.background),
45
+ foreground: createProxiedThemeValue(currentTheme.colors.foreground),
46
+ border: createProxiedThemeValue(currentTheme.colors.border),
47
+ },
48
+ typography: createProxiedThemeValue(currentTheme.typography),
49
+ };
50
+ }, [currentTheme, deviceWidth, breakpoints, lightDarkSelection]);
41
51
  React.useEffect(() => {
42
52
  const listener = Dimensions.addEventListener("change", ({ window }) => setDeviceWidth(window.width));
43
53
  return () => {
@@ -47,8 +57,16 @@ const Provider = ({ themes, breakpoints, initialThemeName, children, }) => {
47
57
  React.useEffect(() => {
48
58
  const run = async () => {
49
59
  const savedSelectedThemeName = await AsyncStorage.getItem(SAVED_SELECTED_THEME_KEY);
60
+ const themeExists = themes.some((t) => t.name === savedSelectedThemeName);
50
61
  if (savedSelectedThemeName) {
51
- changeTheme(savedSelectedThemeName);
62
+ if (themeExists) {
63
+ changeTheme(savedSelectedThemeName);
64
+ }
65
+ else {
66
+ AsyncStorage.removeItem(SAVED_SELECTED_THEME_KEY).catch((e) => {
67
+ console.warn("Failed to reset persisted selected theme", e);
68
+ });
69
+ }
52
70
  }
53
71
  };
54
72
  run();
@@ -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
@@ -7,6 +7,7 @@ import {
7
7
  Breakpoints,
8
8
  ChangeThemeOptions,
9
9
  ReadTheme,
10
+ ThemeValues,
10
11
  ValidatedTheme,
11
12
  } from "./types";
12
13
 
@@ -66,49 +67,28 @@ const Provider: React.FC<React.PropsWithChildren<ProviderProps>> = ({
66
67
  [themes, setCurrentTheme]
67
68
  );
68
69
 
69
- const proxiedTheme: ReadTheme = React.useMemo(
70
- () => ({
70
+ const proxiedTheme: ReadTheme = React.useMemo(() => {
71
+ const createProxiedThemeValue = (value: ThemeValues | undefined) =>
72
+ createThemeValuesProxy({
73
+ value,
74
+ breakpoints,
75
+ deviceWidth,
76
+ devicePlatform: Platform.OS,
77
+ currentLightDarkSelection: lightDarkSelection,
78
+ });
79
+
80
+ return {
71
81
  ...currentTheme,
72
82
  colors: {
73
- branding: createThemeValuesProxy(
74
- currentTheme.colors.branding,
75
- breakpoints,
76
- deviceWidth,
77
- Platform.OS,
78
- lightDarkSelection
79
- ),
80
- text: createThemeValuesProxy(
81
- currentTheme.colors.text,
82
- breakpoints,
83
- deviceWidth,
84
- Platform.OS,
85
- lightDarkSelection
86
- ),
87
- background: createThemeValuesProxy(
88
- currentTheme.colors.background,
89
- breakpoints,
90
- deviceWidth,
91
- Platform.OS,
92
- lightDarkSelection
93
- ),
94
- foreground: createThemeValuesProxy(
95
- currentTheme.colors.foreground,
96
- breakpoints,
97
- deviceWidth,
98
- Platform.OS,
99
- lightDarkSelection
100
- ),
101
- border: createThemeValuesProxy(
102
- currentTheme.colors.border,
103
- breakpoints,
104
- deviceWidth,
105
- Platform.OS,
106
- lightDarkSelection
107
- ),
83
+ branding: createProxiedThemeValue(currentTheme.colors.branding),
84
+ text: createProxiedThemeValue(currentTheme.colors.text),
85
+ background: createProxiedThemeValue(currentTheme.colors.background),
86
+ foreground: createProxiedThemeValue(currentTheme.colors.foreground),
87
+ border: createProxiedThemeValue(currentTheme.colors.border),
108
88
  },
109
- }),
110
- [currentTheme, deviceWidth, breakpoints, lightDarkSelection]
111
- );
89
+ typography: createProxiedThemeValue(currentTheme.typography),
90
+ };
91
+ }, [currentTheme, deviceWidth, breakpoints, lightDarkSelection]);
112
92
 
113
93
  React.useEffect(() => {
114
94
  const listener = Dimensions.addEventListener("change", ({ window }) =>
@@ -124,8 +104,16 @@ const Provider: React.FC<React.PropsWithChildren<ProviderProps>> = ({
124
104
  const savedSelectedThemeName = await AsyncStorage.getItem(
125
105
  SAVED_SELECTED_THEME_KEY
126
106
  );
107
+ const themeExists = themes.some((t) => t.name === savedSelectedThemeName);
108
+
127
109
  if (savedSelectedThemeName) {
128
- changeTheme(savedSelectedThemeName);
110
+ if (themeExists) {
111
+ changeTheme(savedSelectedThemeName);
112
+ } else {
113
+ AsyncStorage.removeItem(SAVED_SELECTED_THEME_KEY).catch((e) => {
114
+ console.warn("Failed to reset persisted selected theme", e);
115
+ });
116
+ }
129
117
  }
130
118
  };
131
119
  run();
@@ -1,5 +1,27 @@
1
- import merge from "deepmerge";
2
- import { validateBreakpoints, validatePalettes, validateTheme, } from "./validators";
1
+ import { deepmergeCustom } from "deepmerge-ts";
2
+ import { isTextStyleObject, validateBreakpoints, validatePalettes, validateTheme, } from "./validators";
3
+ /**
4
+ * Custom deepmerge function to skip merging of typography/text style objects.
5
+ *
6
+ * The theme object allows for special keys that trigger variability depending
7
+ * on platform, breakpoint, color mode, etc.
8
+ *
9
+ * Text style objects can break this logic when merged with other objects.
10
+ * For example, if you merge a standard text style object with another object that
11
+ * has variability through the special keys, you get an object with both special
12
+ * keys and the keys of the style object which breaks how the proxy is able to
13
+ * return the correct value.
14
+ */
15
+ const themeMerge = deepmergeCustom({
16
+ enableImplicitDefaultMerging: true,
17
+ mergeRecords(values, utils, meta) {
18
+ const firstValue = values[0];
19
+ if (isTextStyleObject(firstValue)) {
20
+ return utils.defaultMergeFunctions.mergeRecords(values.slice(1), utils, meta);
21
+ }
22
+ return utils.defaultMergeFunctions.mergeRecords(values, utils, meta);
23
+ },
24
+ });
3
25
  export default function createTheme({ breakpoints, palettes, theme, baseTheme, }) {
4
26
  validateBreakpoints(breakpoints);
5
27
  validatePalettes(palettes);
@@ -7,7 +29,7 @@ export default function createTheme({ breakpoints, palettes, theme, baseTheme, }
7
29
  let resultTheme = theme;
8
30
  if (baseTheme) {
9
31
  validateTheme(baseTheme);
10
- resultTheme = merge(baseTheme, theme);
32
+ resultTheme = themeMerge(baseTheme, theme);
11
33
  }
12
34
  return {
13
35
  ...resultTheme,
@@ -1 +1 @@
1
- {"version":3,"file":"createTheme.js","sourceRoot":"","sources":["createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,WAAW,CAAC;AAO9B,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,GACd,MAAM,cAAc,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,WAAW,EACX,QAAQ,EACR,KAAK,EACL,SAAS,GAMV;IACC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACjC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC3B,aAAa,CAAC,KAAK,CAAC,CAAC;IAErB,IAAI,WAAW,GAAG,KAAK,CAAC;IAExB,IAAI,SAAS,EAAE;QACb,aAAa,CAAC,SAAS,CAAC,CAAC;QACzB,WAAW,GAAG,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;KACvC;IAED,OAAO;QACL,GAAG,WAAW;QACd,SAAS,EAAE,IAAI;KAChB,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"createTheme.js","sourceRoot":"","sources":["createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAO/C,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,GACd,MAAM,cAAc,CAAC;AAEtB;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,GAAG,eAAe,CAAC;IACjC,4BAA4B,EAAE,IAAI;IAClC,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI;QAC9B,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QAC7B,IAAI,iBAAiB,CAAC,UAAU,CAAC,EAAE;YACjC,OAAO,KAAK,CAAC,qBAAqB,CAAC,YAAY,CAC7C,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EACf,KAAK,EACL,IAAI,CACL,CAAC;SACH;QACD,OAAO,KAAK,CAAC,qBAAqB,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;IACvE,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,WAAW,EACX,QAAQ,EACR,KAAK,EACL,SAAS,GAMV;IACC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACjC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC3B,aAAa,CAAC,KAAK,CAAC,CAAC;IAErB,IAAI,WAAW,GAAG,KAAK,CAAC;IAExB,IAAI,SAAS,EAAE;QACb,aAAa,CAAC,SAAS,CAAC,CAAC;QACzB,WAAW,GAAG,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;KAC5C;IAED,OAAO;QACL,GAAG,WAAW;QACd,SAAS,EAAE,IAAI;KAChB,CAAC;AACJ,CAAC"}
@@ -1,4 +1,4 @@
1
- import merge from "deepmerge";
1
+ import { deepmergeCustom } from "deepmerge-ts";
2
2
  import type {
3
3
  Breakpoints,
4
4
  Theme,
@@ -6,11 +6,39 @@ import type {
6
6
  ColorPalettes,
7
7
  } from "./types";
8
8
  import {
9
+ isTextStyleObject,
9
10
  validateBreakpoints,
10
11
  validatePalettes,
11
12
  validateTheme,
12
13
  } from "./validators";
13
14
 
15
+ /**
16
+ * Custom deepmerge function to skip merging of typography/text style objects.
17
+ *
18
+ * The theme object allows for special keys that trigger variability depending
19
+ * on platform, breakpoint, color mode, etc.
20
+ *
21
+ * Text style objects can break this logic when merged with other objects.
22
+ * For example, if you merge a standard text style object with another object that
23
+ * has variability through the special keys, you get an object with both special
24
+ * keys and the keys of the style object which breaks how the proxy is able to
25
+ * return the correct value.
26
+ */
27
+ const themeMerge = deepmergeCustom({
28
+ enableImplicitDefaultMerging: true,
29
+ mergeRecords(values, utils, meta) {
30
+ const firstValue = values[0];
31
+ if (isTextStyleObject(firstValue)) {
32
+ return utils.defaultMergeFunctions.mergeRecords(
33
+ values.slice(1),
34
+ utils,
35
+ meta
36
+ );
37
+ }
38
+ return utils.defaultMergeFunctions.mergeRecords(values, utils, meta);
39
+ },
40
+ });
41
+
14
42
  export default function createTheme({
15
43
  breakpoints,
16
44
  palettes,
@@ -30,7 +58,7 @@ export default function createTheme({
30
58
 
31
59
  if (baseTheme) {
32
60
  validateTheme(baseTheme);
33
- resultTheme = merge(baseTheme, theme);
61
+ resultTheme = themeMerge(baseTheme, theme);
34
62
  }
35
63
 
36
64
  return {
@@ -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
@@ -6,37 +6,45 @@ 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(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
9
+ export default function createThemeValuesProxy({ value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection, }) {
10
10
  if (value === undefined || value === null) {
11
11
  return undefined;
12
12
  }
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);
22
+ const input = {
23
+ value: valueAsThemeValues,
24
+ breakpoints,
25
+ deviceWidth,
26
+ devicePlatform,
27
+ currentLightDarkSelection,
28
+ };
24
29
  if (keysType === "default") {
25
- return createThemeValuesProxy(currentValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
30
+ return createThemeValuesProxy(input);
26
31
  }
27
32
  else if (keysType === "platform") {
28
- return getPlatformValue(currentValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
33
+ return getPlatformValue(input);
29
34
  }
30
35
  else if (keysType === "breakpoint") {
31
- return getBreakpointValue(currentValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
36
+ return getBreakpointValue(input);
32
37
  }
33
38
  else if (keysType === "lightDark") {
34
- return getLightDarkValue(currentValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
39
+ return getLightDarkValue(input);
35
40
  }
36
41
  else {
37
42
  return undefined;
38
43
  }
39
44
  }
45
+ else {
46
+ return currentValue;
47
+ }
40
48
  },
41
49
  set: () => {
42
50
  throw new Error("Theme is read only, cannot be modified at runtime");
@@ -75,19 +83,22 @@ function onlyOneTrue(a, b, c, d) {
75
83
  function allFalse(a, b, c, d) {
76
84
  return [a, b, c, d].filter((x) => x).length === 0;
77
85
  }
78
- function getPlatformValue(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
86
+ function getPlatformValue(input) {
79
87
  var _a;
80
- const currentPlatformValue = (_a = value[devicePlatform]) !== null && _a !== void 0 ? _a : value.default;
81
- if (!isObject(currentPlatformValue)) {
82
- return currentPlatformValue;
88
+ const { value, devicePlatform } = input;
89
+ 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;
90
+ const valueAsThemeValues = asThemeValuesObject(currentPlatformValue);
91
+ if (valueAsThemeValues) {
92
+ return createThemeValuesProxy({ ...input, value: valueAsThemeValues });
83
93
  }
84
94
  else {
85
- return createThemeValuesProxy(currentPlatformValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
95
+ return currentPlatformValue;
86
96
  }
87
97
  }
88
- function getBreakpointValue(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
98
+ function getBreakpointValue(input) {
89
99
  var _a;
90
- const keysToBreakpointValue = Object.keys(value).map((key) => [key, breakpoints[key]]);
100
+ const { value, breakpoints, deviceWidth } = input;
101
+ const keysToBreakpointValue = Object.keys(value !== null && value !== void 0 ? value : {}).map((key) => [key, breakpoints[key]]);
91
102
  const orderedBreakpoints = keysToBreakpointValue.sort(([_, val]) => val);
92
103
  let currentBreakpointKey = "";
93
104
  for (const [breakpointKey, breakpointValue] of orderedBreakpoints) {
@@ -95,22 +106,25 @@ function getBreakpointValue(value, breakpoints, deviceWidth, devicePlatform, cur
95
106
  currentBreakpointKey = breakpointKey;
96
107
  }
97
108
  }
98
- const currentBreakpointValue = (_a = value[currentBreakpointKey]) !== null && _a !== void 0 ? _a : value.default;
99
- if (!isObject(currentBreakpointValue)) {
100
- return currentBreakpointValue;
109
+ const currentBreakpointValue = (_a = value === null || value === void 0 ? void 0 : value[currentBreakpointKey]) !== null && _a !== void 0 ? _a : value === null || value === void 0 ? void 0 : value.default;
110
+ const valueAsThemeValues = asThemeValuesObject(currentBreakpointValue);
111
+ if (valueAsThemeValues) {
112
+ return createThemeValuesProxy({ ...input, value: valueAsThemeValues });
101
113
  }
102
114
  else {
103
- return createThemeValuesProxy(currentBreakpointValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
115
+ return currentBreakpointValue;
104
116
  }
105
117
  }
106
- function getLightDarkValue(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
118
+ function getLightDarkValue(input) {
107
119
  var _a;
108
- const currentLightDarkValue = (_a = value[currentLightDarkSelection]) !== null && _a !== void 0 ? _a : value.default;
109
- if (!isObject(currentLightDarkValue)) {
110
- return currentLightDarkValue;
120
+ const { value, currentLightDarkSelection } = input;
121
+ 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;
122
+ const valueAsThemeValues = asThemeValuesObject(currentLightDarkValue);
123
+ if (valueAsThemeValues) {
124
+ return createThemeValuesProxy({ ...input, value: valueAsThemeValues });
111
125
  }
112
126
  else {
113
- return createThemeValuesProxy(currentLightDarkValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
127
+ return currentLightDarkValue;
114
128
  }
115
129
  }
116
130
  //# sourceMappingURL=createThemeValuesProxy.js.map