@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.
- package/lib/commonjs/DefaultTheme.js +1 -1
- package/lib/commonjs/Provider.js +1 -1
- package/lib/commonjs/createTheme.js +1 -1
- package/lib/commonjs/createThemeValuesProxy.js +1 -1
- package/lib/commonjs/types.js +1 -0
- package/lib/commonjs/validators.js +1 -1
- package/lib/typescript/src/DefaultTheme.js +38 -38
- package/lib/typescript/src/DefaultTheme.js.map +1 -1
- package/lib/typescript/src/Provider.js +29 -11
- package/lib/typescript/src/Provider.js.map +1 -1
- package/lib/typescript/src/createTheme.js +25 -3
- package/lib/typescript/src/createTheme.js.map +1 -1
- package/lib/typescript/src/createThemeValuesProxy.d.ts +9 -1
- package/lib/typescript/src/createThemeValuesProxy.js +41 -27
- package/lib/typescript/src/createThemeValuesProxy.js.map +1 -1
- package/lib/typescript/src/types.d.ts +30 -2
- package/lib/typescript/src/validators.d.ts +3 -1
- package/lib/typescript/src/validators.js +81 -42
- package/lib/typescript/src/validators.js.map +1 -1
- package/lib/typescript/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/src/DefaultTheme.js +38 -38
- package/src/DefaultTheme.js.map +1 -1
- package/src/DefaultTheme.ts +38 -38
- package/src/Provider.js +29 -11
- package/src/Provider.js.map +1 -1
- package/src/Provider.tsx +29 -41
- package/src/createTheme.js +25 -3
- package/src/createTheme.js.map +1 -1
- package/src/createTheme.ts +30 -2
- package/src/createThemeValuesProxy.js +41 -27
- package/src/createThemeValuesProxy.js.map +1 -1
- package/src/createThemeValuesProxy.ts +68 -96
- package/src/types.ts +33 -2
- package/src/validators.js +81 -42
- package/src/validators.js.map +1 -1
- package/src/validators.ts +103 -46
package/src/DefaultTheme.js
CHANGED
|
@@ -61,84 +61,84 @@ const DraftbitTheme = createTheme({
|
|
|
61
61
|
},
|
|
62
62
|
},
|
|
63
63
|
typography: {
|
|
64
|
-
|
|
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.
|
|
95
|
+
...systemWeights.bold,
|
|
72
96
|
fontSize: 48,
|
|
73
97
|
letterSpacing: 0,
|
|
74
98
|
lineHeight: 58,
|
|
75
99
|
},
|
|
76
100
|
headline3: {
|
|
77
|
-
...systemWeights.
|
|
101
|
+
...systemWeights.bold,
|
|
78
102
|
fontSize: 34,
|
|
79
103
|
letterSpacing: 0,
|
|
80
104
|
lineHeight: 40,
|
|
81
105
|
},
|
|
82
106
|
headline4: {
|
|
83
|
-
...systemWeights.
|
|
107
|
+
...systemWeights.bold,
|
|
84
108
|
fontSize: 24,
|
|
85
109
|
letterSpacing: 0,
|
|
86
110
|
lineHeight: 34,
|
|
87
111
|
},
|
|
88
112
|
headline5: {
|
|
89
|
-
...systemWeights.
|
|
113
|
+
...systemWeights.bold,
|
|
90
114
|
fontSize: 20,
|
|
91
115
|
letterSpacing: 0,
|
|
92
116
|
lineHeight: 26,
|
|
93
117
|
},
|
|
94
|
-
|
|
95
|
-
...systemWeights.
|
|
118
|
+
headline6: {
|
|
119
|
+
...systemWeights.bold,
|
|
96
120
|
fontSize: 16,
|
|
97
121
|
letterSpacing: 0,
|
|
98
|
-
lineHeight:
|
|
122
|
+
lineHeight: 24,
|
|
99
123
|
},
|
|
100
|
-
|
|
124
|
+
overline: {
|
|
101
125
|
...systemWeights.regular,
|
|
102
|
-
fontSize:
|
|
103
|
-
letterSpacing:
|
|
104
|
-
lineHeight:
|
|
126
|
+
fontSize: 12,
|
|
127
|
+
letterSpacing: 2,
|
|
128
|
+
lineHeight: 16,
|
|
105
129
|
},
|
|
106
|
-
|
|
130
|
+
subtitle1: {
|
|
107
131
|
...systemWeights.regular,
|
|
108
132
|
fontSize: 16,
|
|
109
133
|
letterSpacing: 0,
|
|
110
134
|
lineHeight: 26,
|
|
111
135
|
},
|
|
112
|
-
|
|
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
|
});
|
package/src/DefaultTheme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultTheme.js","sourceRoot":"","sources":["DefaultTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,WAAW,MAAM,eAAe,CAAC;AAGxC,MAAM,QAAQ,GAAkB;IAC9B,QAAQ,EAAE;QACR,OAAO,EAAE,kBAAkB;QAC3B,SAAS,EAAE,mBAAmB;QAC9B,QAAQ,EAAE,gBAAgB;QAC1B,UAAU,EAAE,wBAAwB;QACpC,KAAK,EAAE,uBAAuB;QAC9B,OAAO,EAAE,wBAAwB;QACjC,MAAM,EAAE,qBAAqB;QAC7B,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CAAC;AAEF,MAAM,aAAa,GAAG,WAAW,CAAC;IAChC,WAAW,EAAE,EAAE;IACf,QAAQ;IACR,KAAK,EAAE;QACL,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE;YACN,QAAQ,EAAE;gBACR,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO;gBAClC,SAAS,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS;gBACtC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ;gBACpC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS;aACpC;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,MAAM;gBAChC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,MAAM;gBAChC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI;gBAC9B,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,KAAK;gBAC9B,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO;gBAClC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO;gBAClC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,KAAK;aAChC;YACD,UAAU,EAAE;gBACV,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,UAAU;gBACnC,IAAI,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI;gBAC5B,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO;gBAClC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO;gBAClC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,KAAK;aAChC;YACD,UAAU,EAAE;gBACV,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,KAAK;gBAC9B,IAAI,EAAE,QAAQ,CAAC,QAAQ,CAAC,MAAM;gBAC9B,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,KAAK;gBAChC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,KAAK;gBAChC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,KAAK;aAChC;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO;gBAChC,IAAI,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO;gBAC/B,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO;gBAClC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO;gBAClC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO;aAClC;SACF;QACD,UAAU,EAAE;YACV,
|
|
1
|
+
{"version":3,"file":"DefaultTheme.js","sourceRoot":"","sources":["DefaultTheme.ts"],"names":[],"mappings":"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"}
|
package/src/DefaultTheme.ts
CHANGED
|
@@ -64,84 +64,84 @@ const DraftbitTheme = createTheme({
|
|
|
64
64
|
},
|
|
65
65
|
},
|
|
66
66
|
typography: {
|
|
67
|
-
|
|
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.
|
|
98
|
+
...systemWeights.bold,
|
|
75
99
|
fontSize: 48,
|
|
76
100
|
letterSpacing: 0,
|
|
77
101
|
lineHeight: 58,
|
|
78
102
|
},
|
|
79
103
|
headline3: {
|
|
80
|
-
...systemWeights.
|
|
104
|
+
...systemWeights.bold,
|
|
81
105
|
fontSize: 34,
|
|
82
106
|
letterSpacing: 0,
|
|
83
107
|
lineHeight: 40,
|
|
84
108
|
},
|
|
85
109
|
headline4: {
|
|
86
|
-
...systemWeights.
|
|
110
|
+
...systemWeights.bold,
|
|
87
111
|
fontSize: 24,
|
|
88
112
|
letterSpacing: 0,
|
|
89
113
|
lineHeight: 34,
|
|
90
114
|
},
|
|
91
115
|
headline5: {
|
|
92
|
-
...systemWeights.
|
|
116
|
+
...systemWeights.bold,
|
|
93
117
|
fontSize: 20,
|
|
94
118
|
letterSpacing: 0,
|
|
95
119
|
lineHeight: 26,
|
|
96
120
|
},
|
|
97
|
-
|
|
98
|
-
...systemWeights.
|
|
121
|
+
headline6: {
|
|
122
|
+
...systemWeights.bold,
|
|
99
123
|
fontSize: 16,
|
|
100
124
|
letterSpacing: 0,
|
|
101
|
-
lineHeight:
|
|
125
|
+
lineHeight: 24,
|
|
102
126
|
},
|
|
103
|
-
|
|
127
|
+
overline: {
|
|
104
128
|
...systemWeights.regular,
|
|
105
|
-
fontSize:
|
|
106
|
-
letterSpacing:
|
|
107
|
-
lineHeight:
|
|
129
|
+
fontSize: 12,
|
|
130
|
+
letterSpacing: 2,
|
|
131
|
+
lineHeight: 16,
|
|
108
132
|
},
|
|
109
|
-
|
|
133
|
+
subtitle1: {
|
|
110
134
|
...systemWeights.regular,
|
|
111
135
|
fontSize: 16,
|
|
112
136
|
letterSpacing: 0,
|
|
113
137
|
lineHeight: 26,
|
|
114
138
|
},
|
|
115
|
-
|
|
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
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
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
|
-
|
|
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();
|
package/src/Provider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.js","sourceRoot":"","sources":["Provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,YAAY,MAAM,2CAA2C,CAAC;AACrE,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,YAAY,MAAM,gBAAgB,CAAC;
|
|
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:
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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();
|
package/src/createTheme.js
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
|
-
import
|
|
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 =
|
|
32
|
+
resultTheme = themeMerge(baseTheme, theme);
|
|
11
33
|
}
|
|
12
34
|
return {
|
|
13
35
|
...resultTheme,
|
package/src/createTheme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","sourceRoot":"","sources":["createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
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"}
|
package/src/createTheme.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
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 =
|
|
61
|
+
resultTheme = themeMerge(baseTheme, theme);
|
|
34
62
|
}
|
|
35
63
|
|
|
36
64
|
return {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
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
|
-
|
|
17
|
-
|
|
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(
|
|
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(
|
|
30
|
+
return createThemeValuesProxy(input);
|
|
26
31
|
}
|
|
27
32
|
else if (keysType === "platform") {
|
|
28
|
-
return getPlatformValue(
|
|
33
|
+
return getPlatformValue(input);
|
|
29
34
|
}
|
|
30
35
|
else if (keysType === "breakpoint") {
|
|
31
|
-
return getBreakpointValue(
|
|
36
|
+
return getBreakpointValue(input);
|
|
32
37
|
}
|
|
33
38
|
else if (keysType === "lightDark") {
|
|
34
|
-
return getLightDarkValue(
|
|
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(
|
|
86
|
+
function getPlatformValue(input) {
|
|
79
87
|
var _a;
|
|
80
|
-
const
|
|
81
|
-
|
|
82
|
-
|
|
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
|
|
95
|
+
return currentPlatformValue;
|
|
86
96
|
}
|
|
87
97
|
}
|
|
88
|
-
function getBreakpointValue(
|
|
98
|
+
function getBreakpointValue(input) {
|
|
89
99
|
var _a;
|
|
90
|
-
const
|
|
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
|
-
|
|
100
|
-
|
|
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
|
|
115
|
+
return currentBreakpointValue;
|
|
104
116
|
}
|
|
105
117
|
}
|
|
106
|
-
function getLightDarkValue(
|
|
118
|
+
function getLightDarkValue(input) {
|
|
107
119
|
var _a;
|
|
108
|
-
const
|
|
109
|
-
|
|
110
|
-
|
|
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
|
|
127
|
+
return currentLightDarkValue;
|
|
114
128
|
}
|
|
115
129
|
}
|
|
116
130
|
//# sourceMappingURL=createThemeValuesProxy.js.map
|