@developer_tribe/react-builder 1.2.22 → 1.2.23

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 (100) hide show
  1. package/dist/attribute-analyser/style/native/useExtractImageStyle.d.ts +2 -2
  2. package/dist/build-components/Image/ImageProps.generated.d.ts +2 -4
  3. package/dist/build-components/NavigationBarColor/NavigationBarColor.d.ts +5 -0
  4. package/dist/build-components/NavigationBarColor/NavigationBarColorProps.generated.d.ts +54 -0
  5. package/dist/build-components/OnboardImage/OnboardImageProps.generated.d.ts +1 -3
  6. package/dist/build-components/Separator/Separator.d.ts +5 -0
  7. package/dist/build-components/Separator/SeparatorProps.generated.d.ts +21 -0
  8. package/dist/build-components/StatusBarColor/StatusBarColor.d.ts +5 -0
  9. package/dist/build-components/StatusBarColor/StatusBarColorProps.generated.d.ts +54 -0
  10. package/dist/build-components/index.d.ts +4 -1
  11. package/dist/build-components/patterns.generated.d.ts +2105 -1253
  12. package/dist/components/AttributesEditorPanel.d.ts +1 -1
  13. package/dist/components/BuilderProvider.d.ts +1 -1
  14. package/dist/index.cjs.js +4 -4
  15. package/dist/index.cjs.js.map +1 -1
  16. package/dist/index.esm.js +4 -4
  17. package/dist/index.esm.js.map +1 -1
  18. package/dist/index.web.cjs.js +6 -6
  19. package/dist/index.web.cjs.js.map +1 -1
  20. package/dist/index.web.esm.js +4 -4
  21. package/dist/index.web.esm.js.map +1 -1
  22. package/dist/store.d.ts +4 -0
  23. package/dist/styles.css +1 -1
  24. package/dist/utils/attributeStyle.d.ts +9 -0
  25. package/dist/utils/extractImageStyle.d.ts +1 -1
  26. package/dist/utils/extractViewStyle/extractViewStyleNative.d.ts +1 -1
  27. package/package.json +2 -2
  28. package/src/DeviceMockFrame.tsx +8 -2
  29. package/src/assets/meta.json +1 -1
  30. package/src/assets/samples/paywall-1.json +39 -34
  31. package/src/assets/samples/paywall-2.json +39 -20
  32. package/src/assets/samples/paywall-app-delete-offer.json +40 -21
  33. package/src/assets/samples/paywall-app-open-offer.json +40 -21
  34. package/src/assets/samples/paywall-back-offer.json +40 -21
  35. package/src/assets/samples/paywall-notification-offer.json +40 -21
  36. package/src/assets/samples/vpn-onboard-1.json +84 -39
  37. package/src/assets/samples/vpn-onboard-2.json +85 -40
  38. package/src/assets/samples/vpn-onboard-3.json +84 -39
  39. package/src/assets/samples/vpn-onboard-4.json +84 -39
  40. package/src/assets/samples/vpn-onboard-5.json +102 -55
  41. package/src/assets/samples/vpn-onboard-6.json +87 -38
  42. package/src/attribute-analyser/style/native/useExtractImageStyle.ts +24 -22
  43. package/src/attribute-analyser/style/native/useExtractTextStyle.ts +9 -4
  44. package/src/attribute-analyser/style/native/useExtractViewStyle.ts +19 -7
  45. package/src/attributes-editor/useAttributesEditorModel.ts +23 -17
  46. package/src/build-components/BackgroundImage/pattern.json +9 -7
  47. package/src/build-components/CarouselDots/CarouselDots.tsx +12 -11
  48. package/src/build-components/CarouselProvider/CarouselProvider.tsx +3 -1
  49. package/src/build-components/Image/ImageProps.generated.ts +2 -4
  50. package/src/build-components/Image/pattern.json +12 -25
  51. package/src/build-components/NavigationBarColor/NavigationBarColor.tsx +39 -0
  52. package/src/build-components/NavigationBarColor/NavigationBarColorProps.generated.ts +71 -0
  53. package/src/build-components/NavigationBarColor/pattern.json +34 -0
  54. package/src/build-components/OnboardButtons/OnboardButtons.tsx +8 -10
  55. package/src/build-components/OnboardDot/OnboardDot.tsx +12 -10
  56. package/src/build-components/OnboardImage/OnboardImage.tsx +1 -1
  57. package/src/build-components/OnboardImage/OnboardImageProps.generated.ts +1 -3
  58. package/src/build-components/OnboardProvider/OnboardProvider.tsx +3 -1
  59. package/src/build-components/RenderNode.generated.tsx +15 -0
  60. package/src/build-components/Separator/Separator.tsx +41 -0
  61. package/src/build-components/Separator/SeparatorProps.generated.ts +26 -0
  62. package/src/build-components/Separator/pattern.json +59 -0
  63. package/src/build-components/StatusBarColor/StatusBarColor.tsx +39 -0
  64. package/src/build-components/StatusBarColor/StatusBarColorProps.generated.ts +71 -0
  65. package/src/build-components/StatusBarColor/pattern.json +34 -0
  66. package/src/build-components/Text/pattern.json +45 -38
  67. package/src/build-components/index.ts +15 -0
  68. package/src/build-components/patterns.generated.ts +2149 -1272
  69. package/src/build-components/useNode.ts +24 -25
  70. package/src/components/AttributesEditorPanel.tsx +4 -5
  71. package/src/components/Builder.tsx +1 -2
  72. package/src/components/BuilderProvider.tsx +40 -3
  73. package/src/components/JsonTextEditor.tsx +2 -2
  74. package/src/components/LoadingComponent.tsx +1 -1
  75. package/src/components/RenderErrorBoundary.tsx +1 -3
  76. package/src/migrations/migrations/1.1.2_extract_component_attributes_from_style.ts +3 -3
  77. package/src/modals/BenefitPresetsModal.tsx +1 -1
  78. package/src/modals/ProductPresetsModal.tsx +1 -1
  79. package/src/pages/DebugJsonPage.tsx +7 -4
  80. package/src/pages/ProjectDebug.tsx +1 -1
  81. package/src/pages/ProjectPage.tsx +31 -32
  82. package/src/pages/ProjectValidationPage.tsx +2 -2
  83. package/src/store.ts +13 -0
  84. package/src/styles/layout/_builder.scss +6 -0
  85. package/src/utils/__special_exceptions.ts +5 -5
  86. package/src/utils/analyseNode.ts +2 -2
  87. package/src/utils/analyseNodeByPatterns.ts +10 -9
  88. package/src/utils/analyseNodeStructural.ts +1 -1
  89. package/src/utils/attributeStyle.ts +26 -0
  90. package/src/utils/extractImageStyle.ts +17 -13
  91. package/src/utils/extractTextStyle/extractTextStyle.ts +7 -7
  92. package/src/utils/extractTextStyle/extractTextStyleNative.ts +10 -10
  93. package/src/utils/extractViewStyle/extractViewStyle.ts +8 -11
  94. package/src/utils/extractViewStyle/extractViewStyleNative.ts +19 -19
  95. package/src/utils/loadFontFamily.ts +14 -19
  96. package/src/utils/logRenderStore.ts +5 -4
  97. package/src/utils/nodeTree.ts +1 -1
  98. package/src/utils/patterns.ts +26 -31
  99. package/src/utils/repairNodeKeys.ts +5 -7
  100. package/src/utils/wrapNodeInMain.ts +3 -3
package/src/assets/samples/paywall-2.json CHANGED
@@ -7,12 +7,12 @@
7
7
  "isRtl": false,
8
8
  "screenStyle": {
9
9
  "light": {
10
- "backgroundColor": "#F8FAFF",
11
- "color": "#151725"
10
+ "backgroundColor": "THEME_COLORS.BACKGROUND",
11
+ "color": "THEME_COLORS.TEXT"
12
12
  },
13
13
  "dark": {
14
- "backgroundColor": "#0F1118",
15
- "color": "#E9EBF9"
14
+ "backgroundColor": "THEME_COLORS.BACKGROUND",
15
+ "color": "THEME_COLORS.TEXT"
16
16
  }
17
17
  },
18
18
  "defaultLanguage": "en"
@@ -26,6 +26,28 @@
26
26
  "title": "Main"
27
27
  },
28
28
  "children": [
29
+ {
30
+ "type": "StatusBarColor",
31
+ "attributes": {
32
+ "title": "Status Bar Color",
33
+ "description": "Status bar background color.",
34
+ "styles": {
35
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
36
+ }
37
+ },
38
+ "children": null
39
+ },
40
+ {
41
+ "type": "NavigationBarColor",
42
+ "attributes": {
43
+ "title": "Navigation Bar Color",
44
+ "description": "Navigation bar background color.",
45
+ "styles": {
46
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
47
+ }
48
+ },
49
+ "children": null
50
+ },
29
51
  {
30
52
  "type": "PaywallProvider",
31
53
  "attributes": {
@@ -38,7 +60,7 @@
38
60
  "alignItems": "stretch",
39
61
  "justifyContent": "flex-start",
40
62
  "position": "relative",
41
- "backgroundColor": "#EEF2FF"
63
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
42
64
  }
43
65
  },
44
66
  "children": [
@@ -71,8 +93,8 @@
71
93
  "width": 32,
72
94
  "height": 32,
73
95
  "borderRadius": 16,
74
- "backgroundColor": "#FFFFFF",
75
- "color": "#000",
96
+ "backgroundColor": "STATIC_COLORS.WHITE",
97
+ "color": "STATIC_COLORS.BLACK",
76
98
  "zIndex": 10,
77
99
  "alignItems": "center",
78
100
  "justifyContent": "center"
@@ -114,7 +136,7 @@
114
136
  "description": "Icon item.",
115
137
  "title": "BIcon 1",
116
138
  "styles": {
117
- "color": "#22c55e",
139
+ "color": "THEME_COLORS.ICON",
118
140
  "fontSize": "16",
119
141
  "flex": 0
120
142
  }
@@ -128,7 +150,7 @@
128
150
  "title": "text 1",
129
151
  "styles": {
130
152
  "flex": 1,
131
- "color": "#FFFFFF",
153
+ "color": "STATIC_COLORS.WHITE",
132
154
  "fontWeight": "700"
133
155
  }
134
156
  },
@@ -158,7 +180,7 @@
158
180
  "description": "Icon item.",
159
181
  "title": "BIcon 2",
160
182
  "styles": {
161
- "color": "#22c55e",
183
+ "color": "THEME_COLORS.ICON",
162
184
  "fontSize": "16",
163
185
  "flex": 0
164
186
  }
@@ -172,7 +194,7 @@
172
194
  "title": "text 2",
173
195
  "styles": {
174
196
  "flex": 1,
175
- "color": "#FFFFFF",
197
+ "color": "STATIC_COLORS.WHITE",
176
198
  "fontWeight": "700"
177
199
  }
178
200
  },
@@ -202,7 +224,7 @@
202
224
  "description": "Icon item.",
203
225
  "title": "BIcon 3",
204
226
  "styles": {
205
- "color": "#22c55e",
227
+ "color": "THEME_COLORS.ICON",
206
228
  "fontSize": "16",
207
229
  "flex": 0
208
230
  }
@@ -216,7 +238,7 @@
216
238
  "title": "text 3",
217
239
  "styles": {
218
240
  "flex": 1,
219
- "color": "#FFFFFF",
241
+ "color": "STATIC_COLORS.WHITE",
220
242
  "fontWeight": "700"
221
243
  }
222
244
  },
@@ -233,7 +255,7 @@
233
255
  "title": "Option(s)",
234
256
  "styles": {
235
257
  "borderRadius": 12,
236
- "backgroundColor": "#FFFFFF"
258
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
237
259
  }
238
260
  },
239
261
  "children": [
@@ -254,8 +276,7 @@
254
276
  "description": "Product description.",
255
277
  "title": "Product Desc(s)",
256
278
  "styles": {
257
- "flex": 4,
258
- "color": "#000"
279
+ "flex": 4
259
280
  }
260
281
  },
261
282
  "children": "@productDescription — Unlock all premium features for a month."
@@ -267,8 +288,7 @@
267
288
  "title": "Product Price(s)",
268
289
  "styles": {
269
290
  "flex": 1,
270
- "textAlign": "right",
271
- "color": "#000"
291
+ "textAlign": "right"
272
292
  }
273
293
  },
274
294
  "children": "@localizedPrice"
@@ -284,7 +304,7 @@
284
304
  "marginRight": 4,
285
305
  "flex": 0,
286
306
  "width": 32,
287
- "color": "#000"
307
+ "color": "STATIC_COLORS.BLACK"
288
308
  }
289
309
  },
290
310
  "children": null
@@ -298,7 +318,6 @@
298
318
  "description": "Countdown timer (5 seconds).",
299
319
  "title": "Countdown",
300
320
  "styles": {
301
- "color": "#FF0000",
302
321
  "fontWeight": "700",
303
322
  "fontSize": 40,
304
323
  "textAlign": "center"
package/src/assets/samples/paywall-app-delete-offer.json CHANGED
@@ -7,12 +7,12 @@
7
7
  "isRtl": false,
8
8
  "screenStyle": {
9
9
  "light": {
10
- "backgroundColor": "#FFF3F3",
11
- "color": "#1C0F12"
10
+ "backgroundColor": "THEME_COLORS.BACKGROUND",
11
+ "color": "THEME_COLORS.TEXT"
12
12
  },
13
13
  "dark": {
14
- "backgroundColor": "#140B0D",
15
- "color": "#F7E7E9"
14
+ "backgroundColor": "THEME_COLORS.BACKGROUND",
15
+ "color": "THEME_COLORS.TEXT"
16
16
  }
17
17
  },
18
18
  "defaultLanguage": "en"
@@ -26,6 +26,28 @@
26
26
  "title": "Main"
27
27
  },
28
28
  "children": [
29
+ {
30
+ "type": "StatusBarColor",
31
+ "attributes": {
32
+ "title": "Status Bar Color",
33
+ "description": "Status bar background color.",
34
+ "styles": {
35
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
36
+ }
37
+ },
38
+ "children": null
39
+ },
40
+ {
41
+ "type": "NavigationBarColor",
42
+ "attributes": {
43
+ "title": "Navigation Bar Color",
44
+ "description": "Navigation bar background color.",
45
+ "styles": {
46
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
47
+ }
48
+ },
49
+ "children": null
50
+ },
29
51
  {
30
52
  "type": "PaywallProvider",
31
53
  "attributes": {
@@ -38,7 +60,7 @@
38
60
  "alignItems": "stretch",
39
61
  "justifyContent": "flex-start",
40
62
  "position": "relative",
41
- "backgroundColor": "#FFE2E6"
63
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
42
64
  }
43
65
  },
44
66
  "children": [
@@ -71,8 +93,8 @@
71
93
  "width": 32,
72
94
  "height": 32,
73
95
  "borderRadius": 16,
74
- "backgroundColor": "#FFFFFF",
75
- "color": "#000",
96
+ "backgroundColor": "STATIC_COLORS.WHITE",
97
+ "color": "STATIC_COLORS.BLACK",
76
98
  "zIndex": 10,
77
99
  "alignItems": "center",
78
100
  "justifyContent": "center"
@@ -86,7 +108,7 @@
86
108
  "description": "Title text.",
87
109
  "title": "Paywall Title",
88
110
  "styles": {
89
- "color": "#FFFFFF",
111
+ "color": "STATIC_COLORS.WHITE",
90
112
  "fontWeight": "700",
91
113
  "fontSize": 28,
92
114
  "textAlign": "center"
@@ -128,7 +150,7 @@
128
150
  "description": "Icon item.",
129
151
  "title": "BIcon 1",
130
152
  "styles": {
131
- "color": "#22c55e",
153
+ "color": "THEME_COLORS.ICON",
132
154
  "fontSize": "16",
133
155
  "flex": 0
134
156
  }
@@ -142,7 +164,7 @@
142
164
  "title": "text 1",
143
165
  "styles": {
144
166
  "flex": 1,
145
- "color": "#FFFFFF",
167
+ "color": "STATIC_COLORS.WHITE",
146
168
  "fontWeight": "700"
147
169
  }
148
170
  },
@@ -172,7 +194,7 @@
172
194
  "description": "Icon item.",
173
195
  "title": "BIcon 2",
174
196
  "styles": {
175
- "color": "#22c55e",
197
+ "color": "THEME_COLORS.ICON",
176
198
  "fontSize": "16",
177
199
  "flex": 0
178
200
  }
@@ -186,7 +208,7 @@
186
208
  "title": "text 2",
187
209
  "styles": {
188
210
  "flex": 1,
189
- "color": "#FFFFFF",
211
+ "color": "STATIC_COLORS.WHITE",
190
212
  "fontWeight": "700"
191
213
  }
192
214
  },
@@ -216,7 +238,7 @@
216
238
  "description": "Icon item.",
217
239
  "title": "BIcon 3",
218
240
  "styles": {
219
- "color": "#22c55e",
241
+ "color": "THEME_COLORS.ICON",
220
242
  "fontSize": "16",
221
243
  "flex": 0
222
244
  }
@@ -230,7 +252,7 @@
230
252
  "title": "text 3",
231
253
  "styles": {
232
254
  "flex": 1,
233
- "color": "#FFFFFF",
255
+ "color": "STATIC_COLORS.WHITE",
234
256
  "fontWeight": "700"
235
257
  }
236
258
  },
@@ -247,7 +269,7 @@
247
269
  "title": "Option(s)",
248
270
  "styles": {
249
271
  "borderRadius": 12,
250
- "backgroundColor": "#FFFFFF"
272
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
251
273
  }
252
274
  },
253
275
  "children": [
@@ -268,8 +290,7 @@
268
290
  "description": "Product description.",
269
291
  "title": "Product Desc(s)",
270
292
  "styles": {
271
- "flex": 4,
272
- "color": "#000"
293
+ "flex": 4
273
294
  }
274
295
  },
275
296
  "children": "@productDescription — Unlock all premium features for a month."
@@ -281,8 +302,7 @@
281
302
  "title": "Product Price(s)",
282
303
  "styles": {
283
304
  "flex": 1,
284
- "textAlign": "right",
285
- "color": "#000"
305
+ "textAlign": "right"
286
306
  }
287
307
  },
288
308
  "children": "@localizedPrice"
@@ -298,7 +318,7 @@
298
318
  "marginRight": 4,
299
319
  "flex": 0,
300
320
  "width": 32,
301
- "color": "#000"
321
+ "color": "STATIC_COLORS.BLACK"
302
322
  }
303
323
  },
304
324
  "children": null
@@ -312,7 +332,6 @@
312
332
  "description": "Countdown timer (5 seconds).",
313
333
  "title": "Countdown",
314
334
  "styles": {
315
- "color": "#FF0000",
316
335
  "fontWeight": "700",
317
336
  "fontSize": 40,
318
337
  "textAlign": "center"
package/src/assets/samples/paywall-app-open-offer.json CHANGED
@@ -7,12 +7,12 @@
7
7
  "isRtl": false,
8
8
  "screenStyle": {
9
9
  "light": {
10
- "backgroundColor": "#FFF7F0",
11
- "color": "#1F140F"
10
+ "backgroundColor": "THEME_COLORS.BACKGROUND",
11
+ "color": "THEME_COLORS.TEXT"
12
12
  },
13
13
  "dark": {
14
- "backgroundColor": "#140E0B",
15
- "color": "#F7EDE6"
14
+ "backgroundColor": "THEME_COLORS.BACKGROUND",
15
+ "color": "THEME_COLORS.TEXT"
16
16
  }
17
17
  },
18
18
  "defaultLanguage": "en"
@@ -26,6 +26,28 @@
26
26
  "title": "Main"
27
27
  },
28
28
  "children": [
29
+ {
30
+ "type": "StatusBarColor",
31
+ "attributes": {
32
+ "title": "Status Bar Color",
33
+ "description": "Status bar background color.",
34
+ "styles": {
35
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
36
+ }
37
+ },
38
+ "children": null
39
+ },
40
+ {
41
+ "type": "NavigationBarColor",
42
+ "attributes": {
43
+ "title": "Navigation Bar Color",
44
+ "description": "Navigation bar background color.",
45
+ "styles": {
46
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
47
+ }
48
+ },
49
+ "children": null
50
+ },
29
51
  {
30
52
  "type": "PaywallProvider",
31
53
  "attributes": {
@@ -38,7 +60,7 @@
38
60
  "alignItems": "stretch",
39
61
  "justifyContent": "flex-start",
40
62
  "position": "relative",
41
- "backgroundColor": "#FFE9D7"
63
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
42
64
  }
43
65
  },
44
66
  "children": [
@@ -71,8 +93,8 @@
71
93
  "width": 32,
72
94
  "height": 32,
73
95
  "borderRadius": 16,
74
- "backgroundColor": "#FFFFFF",
75
- "color": "#000",
96
+ "backgroundColor": "STATIC_COLORS.WHITE",
97
+ "color": "STATIC_COLORS.BLACK",
76
98
  "zIndex": 10,
77
99
  "alignItems": "center",
78
100
  "justifyContent": "center"
@@ -86,7 +108,7 @@
86
108
  "description": "Title text.",
87
109
  "title": "Paywall Title",
88
110
  "styles": {
89
- "color": "#FFFFFF",
111
+ "color": "STATIC_COLORS.WHITE",
90
112
  "fontWeight": "700",
91
113
  "fontSize": 28,
92
114
  "textAlign": "center"
@@ -128,7 +150,7 @@
128
150
  "description": "Icon item.",
129
151
  "title": "BIcon 1",
130
152
  "styles": {
131
- "color": "#22c55e",
153
+ "color": "THEME_COLORS.ICON",
132
154
  "fontSize": "16",
133
155
  "flex": 0
134
156
  }
@@ -142,7 +164,7 @@
142
164
  "title": "text 1",
143
165
  "styles": {
144
166
  "flex": 1,
145
- "color": "#FFFFFF",
167
+ "color": "STATIC_COLORS.WHITE",
146
168
  "fontWeight": "700"
147
169
  }
148
170
  },
@@ -172,7 +194,7 @@
172
194
  "description": "Icon item.",
173
195
  "title": "BIcon 2",
174
196
  "styles": {
175
- "color": "#22c55e",
197
+ "color": "THEME_COLORS.ICON",
176
198
  "fontSize": "16",
177
199
  "flex": 0
178
200
  }
@@ -186,7 +208,7 @@
186
208
  "title": "text 2",
187
209
  "styles": {
188
210
  "flex": 1,
189
- "color": "#FFFFFF",
211
+ "color": "STATIC_COLORS.WHITE",
190
212
  "fontWeight": "700"
191
213
  }
192
214
  },
@@ -216,7 +238,7 @@
216
238
  "description": "Icon item.",
217
239
  "title": "BIcon 3",
218
240
  "styles": {
219
- "color": "#22c55e",
241
+ "color": "THEME_COLORS.ICON",
220
242
  "fontSize": "16",
221
243
  "flex": 0
222
244
  }
@@ -230,7 +252,7 @@
230
252
  "title": "text 3",
231
253
  "styles": {
232
254
  "flex": 1,
233
- "color": "#FFFFFF",
255
+ "color": "STATIC_COLORS.WHITE",
234
256
  "fontWeight": "700"
235
257
  }
236
258
  },
@@ -247,7 +269,7 @@
247
269
  "title": "Option(s)",
248
270
  "styles": {
249
271
  "borderRadius": 12,
250
- "backgroundColor": "#FFFFFF"
272
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
251
273
  }
252
274
  },
253
275
  "children": [
@@ -268,8 +290,7 @@
268
290
  "description": "Product description.",
269
291
  "title": "Product Desc(s)",
270
292
  "styles": {
271
- "flex": 4,
272
- "color": "#000"
293
+ "flex": 4
273
294
  }
274
295
  },
275
296
  "children": "@productDescription — Unlock all premium features for a month."
@@ -281,8 +302,7 @@
281
302
  "title": "Product Price(s)",
282
303
  "styles": {
283
304
  "flex": 1,
284
- "textAlign": "right",
285
- "color": "#000"
305
+ "textAlign": "right"
286
306
  }
287
307
  },
288
308
  "children": "@localizedPrice"
@@ -298,7 +318,7 @@
298
318
  "marginRight": 4,
299
319
  "flex": 0,
300
320
  "width": 32,
301
- "color": "#000"
321
+ "color": "STATIC_COLORS.BLACK"
302
322
  }
303
323
  },
304
324
  "children": null
@@ -312,7 +332,6 @@
312
332
  "description": "Countdown timer (5 seconds).",
313
333
  "title": "Countdown",
314
334
  "styles": {
315
- "color": "#FF0000",
316
335
  "fontWeight": "700",
317
336
  "fontSize": 40,
318
337
  "textAlign": "center"
package/src/assets/samples/paywall-back-offer.json CHANGED
@@ -7,12 +7,12 @@
7
7
  "isRtl": false,
8
8
  "screenStyle": {
9
9
  "light": {
10
- "backgroundColor": "#F6F8FF",
11
- "color": "#151725"
10
+ "backgroundColor": "THEME_COLORS.BACKGROUND",
11
+ "color": "THEME_COLORS.TEXT"
12
12
  },
13
13
  "dark": {
14
- "backgroundColor": "#0D0F15",
15
- "color": "#E9EBF9"
14
+ "backgroundColor": "THEME_COLORS.BACKGROUND",
15
+ "color": "THEME_COLORS.TEXT"
16
16
  }
17
17
  },
18
18
  "defaultLanguage": "en"
@@ -26,6 +26,28 @@
26
26
  "title": "Main"
27
27
  },
28
28
  "children": [
29
+ {
30
+ "type": "StatusBarColor",
31
+ "attributes": {
32
+ "title": "Status Bar Color",
33
+ "description": "Status bar background color.",
34
+ "styles": {
35
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
36
+ }
37
+ },
38
+ "children": null
39
+ },
40
+ {
41
+ "type": "NavigationBarColor",
42
+ "attributes": {
43
+ "title": "Navigation Bar Color",
44
+ "description": "Navigation bar background color.",
45
+ "styles": {
46
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
47
+ }
48
+ },
49
+ "children": null
50
+ },
29
51
  {
30
52
  "type": "PaywallProvider",
31
53
  "attributes": {
@@ -38,7 +60,7 @@
38
60
  "alignItems": "stretch",
39
61
  "justifyContent": "flex-start",
40
62
  "position": "relative",
41
- "backgroundColor": "#E9EEFF"
63
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
42
64
  }
43
65
  },
44
66
  "children": [
@@ -71,8 +93,8 @@
71
93
  "width": 32,
72
94
  "height": 32,
73
95
  "borderRadius": 16,
74
- "backgroundColor": "#FFFFFF",
75
- "color": "#000",
96
+ "backgroundColor": "STATIC_COLORS.WHITE",
97
+ "color": "STATIC_COLORS.BLACK",
76
98
  "zIndex": 10,
77
99
  "alignItems": "center",
78
100
  "justifyContent": "center"
@@ -86,7 +108,7 @@
86
108
  "description": "Title text.",
87
109
  "title": "Paywall Title",
88
110
  "styles": {
89
- "color": "#FFFFFF",
111
+ "color": "STATIC_COLORS.WHITE",
90
112
  "fontWeight": "700",
91
113
  "fontSize": 28,
92
114
  "textAlign": "center"
@@ -128,7 +150,7 @@
128
150
  "description": "Icon item.",
129
151
  "title": "BIcon 1",
130
152
  "styles": {
131
- "color": "#22c55e",
153
+ "color": "THEME_COLORS.ICON",
132
154
  "fontSize": "16",
133
155
  "flex": 0
134
156
  }
@@ -142,7 +164,7 @@
142
164
  "title": "text 1",
143
165
  "styles": {
144
166
  "flex": 1,
145
- "color": "#FFFFFF",
167
+ "color": "STATIC_COLORS.WHITE",
146
168
  "fontWeight": "700"
147
169
  }
148
170
  },
@@ -172,7 +194,7 @@
172
194
  "description": "Icon item.",
173
195
  "title": "BIcon 2",
174
196
  "styles": {
175
- "color": "#22c55e",
197
+ "color": "THEME_COLORS.ICON",
176
198
  "fontSize": "16",
177
199
  "flex": 0
178
200
  }
@@ -186,7 +208,7 @@
186
208
  "title": "text 2",
187
209
  "styles": {
188
210
  "flex": 1,
189
- "color": "#FFFFFF",
211
+ "color": "STATIC_COLORS.WHITE",
190
212
  "fontWeight": "700"
191
213
  }
192
214
  },
@@ -216,7 +238,7 @@
216
238
  "description": "Icon item.",
217
239
  "title": "BIcon 3",
218
240
  "styles": {
219
- "color": "#22c55e",
241
+ "color": "THEME_COLORS.ICON",
220
242
  "fontSize": "16",
221
243
  "flex": 0
222
244
  }
@@ -230,7 +252,7 @@
230
252
  "title": "text 3",
231
253
  "styles": {
232
254
  "flex": 1,
233
- "color": "#FFFFFF",
255
+ "color": "STATIC_COLORS.WHITE",
234
256
  "fontWeight": "700"
235
257
  }
236
258
  },
@@ -247,7 +269,7 @@
247
269
  "title": "Option(s)",
248
270
  "styles": {
249
271
  "borderRadius": 12,
250
- "backgroundColor": "#FFFFFF"
272
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
251
273
  }
252
274
  },
253
275
  "children": [
@@ -268,8 +290,7 @@
268
290
  "description": "Product description.",
269
291
  "title": "Product Desc(s)",
270
292
  "styles": {
271
- "flex": 4,
272
- "color": "#000"
293
+ "flex": 4
273
294
  }
274
295
  },
275
296
  "children": "@productDescription — Unlock all premium features for a month."
@@ -281,8 +302,7 @@
281
302
  "title": "Product Price(s)",
282
303
  "styles": {
283
304
  "flex": 1,
284
- "textAlign": "right",
285
- "color": "#000"
305
+ "textAlign": "right"
286
306
  }
287
307
  },
288
308
  "children": "@localizedPrice"
@@ -298,7 +318,7 @@
298
318
  "marginRight": 4,
299
319
  "flex": 0,
300
320
  "width": 32,
301
- "color": "#000"
321
+ "color": "STATIC_COLORS.BLACK"
302
322
  }
303
323
  },
304
324
  "children": null
@@ -312,7 +332,6 @@
312
332
  "description": "Countdown timer (5 seconds).",
313
333
  "title": "Countdown",
314
334
  "styles": {
315
- "color": "#FF0000",
316
335
  "fontWeight": "700",
317
336
  "fontSize": 40,
318
337
  "textAlign": "center"