@draftbit/theme 50.6.2-531e17.2 → 50.6.2-8430ca.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/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 +0 -1
- 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 +11 -23
- package/lib/typescript/src/Provider.js.map +1 -1
- package/lib/typescript/src/createTheme.d.ts +1 -13
- package/lib/typescript/src/createTheme.js +6 -17
- package/lib/typescript/src/createTheme.js.map +1 -1
- package/lib/typescript/src/createThemeValuesProxy.js +22 -34
- package/lib/typescript/src/createThemeValuesProxy.js.map +1 -1
- package/lib/typescript/src/types.d.ts +2 -30
- package/lib/typescript/src/validators.d.ts +1 -3
- package/lib/typescript/src/validators.js +45 -10
- package/lib/typescript/src/validators.js.map +1 -1
- package/lib/typescript/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -2
- package/src/DefaultTheme.js +38 -38
- package/src/DefaultTheme.js.map +1 -1
- package/src/DefaultTheme.ts +38 -38
- package/src/Provider.js +11 -23
- package/src/Provider.js.map +1 -1
- package/src/Provider.tsx +41 -29
- package/src/createTheme.js +6 -17
- package/src/createTheme.js.map +1 -1
- package/src/createTheme.ts +12 -19
- package/src/createThemeValuesProxy.js +22 -34
- package/src/createThemeValuesProxy.js.map +1 -1
- package/src/createThemeValuesProxy.ts +31 -49
- package/src/types.ts +2 -33
- package/src/validators.js +45 -10
- package/src/validators.js.map +1 -1
- package/src/validators.ts +49 -12
package/src/DefaultTheme.ts
CHANGED
|
@@ -64,84 +64,84 @@ const DraftbitTheme = createTheme({
|
|
|
64
64
|
},
|
|
65
65
|
},
|
|
66
66
|
typography: {
|
|
67
|
-
body1: {
|
|
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
67
|
headline1: {
|
|
92
|
-
...systemWeights.
|
|
68
|
+
...systemWeights.regular,
|
|
93
69
|
fontSize: 60,
|
|
94
70
|
letterSpacing: 0,
|
|
95
71
|
lineHeight: 71,
|
|
96
72
|
},
|
|
97
73
|
headline2: {
|
|
98
|
-
...systemWeights.
|
|
74
|
+
...systemWeights.regular,
|
|
99
75
|
fontSize: 48,
|
|
100
76
|
letterSpacing: 0,
|
|
101
77
|
lineHeight: 58,
|
|
102
78
|
},
|
|
103
79
|
headline3: {
|
|
104
|
-
...systemWeights.
|
|
80
|
+
...systemWeights.regular,
|
|
105
81
|
fontSize: 34,
|
|
106
82
|
letterSpacing: 0,
|
|
107
83
|
lineHeight: 40,
|
|
108
84
|
},
|
|
109
85
|
headline4: {
|
|
110
|
-
...systemWeights.
|
|
86
|
+
...systemWeights.regular,
|
|
111
87
|
fontSize: 24,
|
|
112
88
|
letterSpacing: 0,
|
|
113
89
|
lineHeight: 34,
|
|
114
90
|
},
|
|
115
91
|
headline5: {
|
|
116
|
-
...systemWeights.
|
|
92
|
+
...systemWeights.regular,
|
|
117
93
|
fontSize: 20,
|
|
118
94
|
letterSpacing: 0,
|
|
119
95
|
lineHeight: 26,
|
|
120
96
|
},
|
|
121
|
-
|
|
122
|
-
...systemWeights.
|
|
97
|
+
subtitle1: {
|
|
98
|
+
...systemWeights.regular,
|
|
123
99
|
fontSize: 16,
|
|
124
100
|
letterSpacing: 0,
|
|
125
|
-
lineHeight:
|
|
101
|
+
lineHeight: 26,
|
|
126
102
|
},
|
|
127
|
-
|
|
103
|
+
subtitle2: {
|
|
128
104
|
...systemWeights.regular,
|
|
129
|
-
fontSize:
|
|
130
|
-
letterSpacing:
|
|
131
|
-
lineHeight:
|
|
105
|
+
fontSize: 14,
|
|
106
|
+
letterSpacing: 0,
|
|
107
|
+
lineHeight: 22,
|
|
132
108
|
},
|
|
133
|
-
|
|
109
|
+
body1: {
|
|
134
110
|
...systemWeights.regular,
|
|
135
111
|
fontSize: 16,
|
|
136
112
|
letterSpacing: 0,
|
|
137
113
|
lineHeight: 26,
|
|
138
114
|
},
|
|
139
|
-
|
|
115
|
+
body2: {
|
|
140
116
|
...systemWeights.regular,
|
|
141
117
|
fontSize: 14,
|
|
142
118
|
letterSpacing: 0,
|
|
143
119
|
lineHeight: 22,
|
|
144
120
|
},
|
|
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,20 +28,16 @@ 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
|
-
|
|
41
|
-
},
|
|
42
|
-
typography: currentTheme.typography,
|
|
43
|
-
};
|
|
44
|
-
}, [currentTheme, deviceWidth, breakpoints, lightDarkSelection]);
|
|
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]);
|
|
45
41
|
React.useEffect(() => {
|
|
46
42
|
const listener = Dimensions.addEventListener("change", ({ window }) => setDeviceWidth(window.width));
|
|
47
43
|
return () => {
|
|
@@ -51,16 +47,8 @@ const Provider = ({ themes, breakpoints, initialThemeName, children, }) => {
|
|
|
51
47
|
React.useEffect(() => {
|
|
52
48
|
const run = async () => {
|
|
53
49
|
const savedSelectedThemeName = await AsyncStorage.getItem(SAVED_SELECTED_THEME_KEY);
|
|
54
|
-
const themeExists = themes.some((t) => t.name === savedSelectedThemeName);
|
|
55
50
|
if (savedSelectedThemeName) {
|
|
56
|
-
|
|
57
|
-
changeTheme(savedSelectedThemeName);
|
|
58
|
-
}
|
|
59
|
-
else {
|
|
60
|
-
AsyncStorage.removeItem(SAVED_SELECTED_THEME_KEY).catch((e) => {
|
|
61
|
-
console.warn("Failed to reset persisted selected theme", e);
|
|
62
|
-
});
|
|
63
|
-
}
|
|
51
|
+
changeTheme(savedSelectedThemeName);
|
|
64
52
|
}
|
|
65
53
|
};
|
|
66
54
|
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,7 +7,6 @@ import {
|
|
|
7
7
|
Breakpoints,
|
|
8
8
|
ChangeThemeOptions,
|
|
9
9
|
ReadTheme,
|
|
10
|
-
ThemeValues,
|
|
11
10
|
ValidatedTheme,
|
|
12
11
|
} from "./types";
|
|
13
12
|
|
|
@@ -67,28 +66,49 @@ const Provider: React.FC<React.PropsWithChildren<ProviderProps>> = ({
|
|
|
67
66
|
[themes, setCurrentTheme]
|
|
68
67
|
);
|
|
69
68
|
|
|
70
|
-
const proxiedTheme: ReadTheme = React.useMemo(
|
|
71
|
-
|
|
72
|
-
createThemeValuesProxy(
|
|
73
|
-
value,
|
|
74
|
-
breakpoints,
|
|
75
|
-
deviceWidth,
|
|
76
|
-
Platform.OS,
|
|
77
|
-
lightDarkSelection
|
|
78
|
-
);
|
|
79
|
-
|
|
80
|
-
return {
|
|
69
|
+
const proxiedTheme: ReadTheme = React.useMemo(
|
|
70
|
+
() => ({
|
|
81
71
|
...currentTheme,
|
|
82
72
|
colors: {
|
|
83
|
-
branding:
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
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
|
+
),
|
|
88
108
|
},
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
109
|
+
}),
|
|
110
|
+
[currentTheme, deviceWidth, breakpoints, lightDarkSelection]
|
|
111
|
+
);
|
|
92
112
|
|
|
93
113
|
React.useEffect(() => {
|
|
94
114
|
const listener = Dimensions.addEventListener("change", ({ window }) =>
|
|
@@ -104,16 +124,8 @@ const Provider: React.FC<React.PropsWithChildren<ProviderProps>> = ({
|
|
|
104
124
|
const savedSelectedThemeName = await AsyncStorage.getItem(
|
|
105
125
|
SAVED_SELECTED_THEME_KEY
|
|
106
126
|
);
|
|
107
|
-
const themeExists = themes.some((t) => t.name === savedSelectedThemeName);
|
|
108
|
-
|
|
109
127
|
if (savedSelectedThemeName) {
|
|
110
|
-
|
|
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
|
-
}
|
|
128
|
+
changeTheme(savedSelectedThemeName);
|
|
117
129
|
}
|
|
118
130
|
};
|
|
119
131
|
run();
|
package/src/createTheme.js
CHANGED
|
@@ -1,23 +1,12 @@
|
|
|
1
1
|
import merge from "deepmerge";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
*
|
|
8
|
-
* Text style objects can break this logic when merged with other objects.
|
|
9
|
-
* For example, if you merge a standard text style object with another object that
|
|
10
|
-
* has variability through the special keys, you get an object with both special
|
|
11
|
-
* keys and the keys of the style object which breaks how the proxy is able to
|
|
12
|
-
* return the correct value.
|
|
13
|
-
*/
|
|
14
|
-
export default function createTheme({ theme, baseTheme, }) {
|
|
15
|
-
// validateBreakpoints(breakpoints);
|
|
16
|
-
// validatePalettes(palettes);
|
|
17
|
-
// validateTheme(theme);
|
|
2
|
+
import { validateBreakpoints, validatePalettes, validateTheme, } from "./validators";
|
|
3
|
+
export default function createTheme({ breakpoints, palettes, theme, baseTheme, }) {
|
|
4
|
+
validateBreakpoints(breakpoints);
|
|
5
|
+
validatePalettes(palettes);
|
|
6
|
+
validateTheme(theme);
|
|
18
7
|
let resultTheme = theme;
|
|
19
8
|
if (baseTheme) {
|
|
20
|
-
|
|
9
|
+
validateTheme(baseTheme);
|
|
21
10
|
resultTheme = merge(baseTheme, theme);
|
|
22
11
|
}
|
|
23
12
|
return {
|
package/src/createTheme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","sourceRoot":"","sources":["createTheme.ts"],"names":[],"mappings":"
|
|
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"}
|
package/src/createTheme.ts
CHANGED
|
@@ -1,26 +1,19 @@
|
|
|
1
|
+
import merge from "deepmerge";
|
|
1
2
|
import type {
|
|
2
3
|
Breakpoints,
|
|
3
4
|
Theme,
|
|
4
5
|
ValidatedTheme,
|
|
5
6
|
ColorPalettes,
|
|
6
7
|
} from "./types";
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
*
|
|
13
|
-
* The theme object allows for special keys that trigger variability depending
|
|
14
|
-
* on platform, breakpoint, color mode, etc.
|
|
15
|
-
*
|
|
16
|
-
* Text style objects can break this logic when merged with other objects.
|
|
17
|
-
* For example, if you merge a standard text style object with another object that
|
|
18
|
-
* has variability through the special keys, you get an object with both special
|
|
19
|
-
* keys and the keys of the style object which breaks how the proxy is able to
|
|
20
|
-
* return the correct value.
|
|
21
|
-
*/
|
|
8
|
+
import {
|
|
9
|
+
validateBreakpoints,
|
|
10
|
+
validatePalettes,
|
|
11
|
+
validateTheme,
|
|
12
|
+
} from "./validators";
|
|
22
13
|
|
|
23
14
|
export default function createTheme({
|
|
15
|
+
breakpoints,
|
|
16
|
+
palettes,
|
|
24
17
|
theme,
|
|
25
18
|
baseTheme,
|
|
26
19
|
}: {
|
|
@@ -29,14 +22,14 @@ export default function createTheme({
|
|
|
29
22
|
theme: Theme;
|
|
30
23
|
baseTheme?: Theme;
|
|
31
24
|
}): ValidatedTheme {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
25
|
+
validateBreakpoints(breakpoints);
|
|
26
|
+
validatePalettes(palettes);
|
|
27
|
+
validateTheme(theme);
|
|
35
28
|
|
|
36
29
|
let resultTheme = theme;
|
|
37
30
|
|
|
38
31
|
if (baseTheme) {
|
|
39
|
-
|
|
32
|
+
validateTheme(baseTheme);
|
|
40
33
|
resultTheme = merge(baseTheme, theme);
|
|
41
34
|
}
|
|
42
35
|
|
|
@@ -13,33 +13,30 @@ 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
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
if (!isObject(currentValue)) {
|
|
17
|
+
return currentValue;
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
20
|
const platformKeys = ["ios", "android", "web", "macos", "windows"];
|
|
21
21
|
const breakpointKeys = Object.keys(breakpoints);
|
|
22
22
|
const lightDarkKeys = ["light", "dark"];
|
|
23
|
-
const keysType = getKeysType(
|
|
23
|
+
const keysType = getKeysType(currentValue, platformKeys, breakpointKeys, lightDarkKeys);
|
|
24
24
|
if (keysType === "default") {
|
|
25
|
-
return createThemeValuesProxy(
|
|
25
|
+
return createThemeValuesProxy(currentValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
26
26
|
}
|
|
27
27
|
else if (keysType === "platform") {
|
|
28
|
-
return getPlatformValue(
|
|
28
|
+
return getPlatformValue(currentValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
29
29
|
}
|
|
30
30
|
else if (keysType === "breakpoint") {
|
|
31
|
-
return getBreakpointValue(
|
|
31
|
+
return getBreakpointValue(currentValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
32
32
|
}
|
|
33
33
|
else if (keysType === "lightDark") {
|
|
34
|
-
return getLightDarkValue(
|
|
34
|
+
return getLightDarkValue(currentValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
35
35
|
}
|
|
36
36
|
else {
|
|
37
37
|
return undefined;
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
|
-
else {
|
|
41
|
-
return currentValue;
|
|
42
|
-
}
|
|
43
40
|
},
|
|
44
41
|
set: () => {
|
|
45
42
|
throw new Error("Theme is read only, cannot be modified at runtime");
|
|
@@ -80,20 +77,17 @@ function allFalse(a, b, c, d) {
|
|
|
80
77
|
}
|
|
81
78
|
function getPlatformValue(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
|
|
82
79
|
var _a;
|
|
83
|
-
const currentPlatformValue = (_a = value
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
: undefined;
|
|
87
|
-
if (valueAsThemeValues) {
|
|
88
|
-
return createThemeValuesProxy(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
80
|
+
const currentPlatformValue = (_a = value[devicePlatform]) !== null && _a !== void 0 ? _a : value.default;
|
|
81
|
+
if (!isObject(currentPlatformValue)) {
|
|
82
|
+
return currentPlatformValue;
|
|
89
83
|
}
|
|
90
84
|
else {
|
|
91
|
-
return currentPlatformValue;
|
|
85
|
+
return createThemeValuesProxy(currentPlatformValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
92
86
|
}
|
|
93
87
|
}
|
|
94
88
|
function getBreakpointValue(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
|
|
95
89
|
var _a;
|
|
96
|
-
const keysToBreakpointValue = Object.keys(value
|
|
90
|
+
const keysToBreakpointValue = Object.keys(value).map((key) => [key, breakpoints[key]]);
|
|
97
91
|
const orderedBreakpoints = keysToBreakpointValue.sort(([_, val]) => val);
|
|
98
92
|
let currentBreakpointKey = "";
|
|
99
93
|
for (const [breakpointKey, breakpointValue] of orderedBreakpoints) {
|
|
@@ -101,28 +95,22 @@ function getBreakpointValue(value, breakpoints, deviceWidth, devicePlatform, cur
|
|
|
101
95
|
currentBreakpointKey = breakpointKey;
|
|
102
96
|
}
|
|
103
97
|
}
|
|
104
|
-
const currentBreakpointValue = (_a = value
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
: undefined;
|
|
108
|
-
if (valueAsThemeValues) {
|
|
109
|
-
return createThemeValuesProxy(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
98
|
+
const currentBreakpointValue = (_a = value[currentBreakpointKey]) !== null && _a !== void 0 ? _a : value.default;
|
|
99
|
+
if (!isObject(currentBreakpointValue)) {
|
|
100
|
+
return currentBreakpointValue;
|
|
110
101
|
}
|
|
111
102
|
else {
|
|
112
|
-
return currentBreakpointValue;
|
|
103
|
+
return createThemeValuesProxy(currentBreakpointValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
113
104
|
}
|
|
114
105
|
}
|
|
115
106
|
function getLightDarkValue(value, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection) {
|
|
116
107
|
var _a;
|
|
117
|
-
const currentLightDarkValue = (_a = value
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
: undefined;
|
|
121
|
-
if (valueAsThemeValues) {
|
|
122
|
-
return createThemeValuesProxy(valueAsThemeValues, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
108
|
+
const currentLightDarkValue = (_a = value[currentLightDarkSelection]) !== null && _a !== void 0 ? _a : value.default;
|
|
109
|
+
if (!isObject(currentLightDarkValue)) {
|
|
110
|
+
return currentLightDarkValue;
|
|
123
111
|
}
|
|
124
112
|
else {
|
|
125
|
-
return currentLightDarkValue;
|
|
113
|
+
return createThemeValuesProxy(currentLightDarkValue, breakpoints, deviceWidth, devicePlatform, currentLightDarkSelection);
|
|
126
114
|
}
|
|
127
115
|
}
|
|
128
116
|
//# sourceMappingURL=createThemeValuesProxy.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createThemeValuesProxy.js","sourceRoot":"","sources":["createThemeValuesProxy.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,KAA8B,EAC9B,WAAwB,EACxB,WAAmB,EACnB,cAAkC,EAClC,yBAA2C;IAE3C,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;QACzC,OAAO,SAAS,CAAC;KAClB;IACD,OAAO,IAAI,KAAK,CAAC,KAAK,EAAE;QACtB,GAAG,EAAE,CACH,MAAmB,EACnB,GAAW,
|
|
1
|
+
{"version":3,"file":"createThemeValuesProxy.js","sourceRoot":"","sources":["createThemeValuesProxy.ts"],"names":[],"mappings":"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"}
|