@developer_tribe/react-builder 1.2.21 → 1.2.23

package/src/assets/samples/paywall-notification-offer.json

@@ -7,12 +7,12 @@
     "isRtl": false,
     "screenStyle": {
       "light": {
-        "backgroundColor": "#F9FBF4",
-        "color": "#141A12"
+        "backgroundColor": "THEME_COLORS.BACKGROUND",
+        "color": "THEME_COLORS.TEXT"
       },
       "dark": {
-        "backgroundColor": "#0F140F",
-        "color": "#E8F2E4"
+        "backgroundColor": "THEME_COLORS.BACKGROUND",
+        "color": "THEME_COLORS.TEXT"
       }
     },
     "defaultLanguage": "en"
@@ -26,6 +26,28 @@
       "title": "Main"
     },
     "children": [
+      {
+        "type": "StatusBarColor",
+        "attributes": {
+          "title": "Status Bar Color",
+          "description": "Status bar background color.",
+          "styles": {
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
+          }
+        },
+        "children": null
+      },
+      {
+        "type": "NavigationBarColor",
+        "attributes": {
+          "title": "Navigation Bar Color",
+          "description": "Navigation bar background color.",
+          "styles": {
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
+          }
+        },
+        "children": null
+      },
       {
         "type": "PaywallProvider",
         "attributes": {
@@ -38,7 +60,7 @@
             "alignItems": "stretch",
             "justifyContent": "flex-start",
             "position": "relative",
-            "backgroundColor": "#EAF7E5"
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
           }
         },
         "children": [
@@ -71,8 +93,8 @@
                     "width": 32,
                     "height": 32,
                     "borderRadius": 16,
-                    "backgroundColor": "#FFFFFF",
-                    "color": "#000",
+                    "backgroundColor": "STATIC_COLORS.WHITE",
+                    "color": "STATIC_COLORS.BLACK",
                     "zIndex": 10,
                     "alignItems": "center",
                     "justifyContent": "center"
@@ -86,7 +108,7 @@
                   "description": "Title text.",
                   "title": "Paywall Title",
                   "styles": {
-                    "color": "#FFFFFF",
+                    "color": "STATIC_COLORS.WHITE",
                     "fontWeight": "700",
                     "fontSize": 28,
                     "textAlign": "center"
@@ -128,7 +150,7 @@
                           "description": "Icon item.",
                           "title": "BIcon 1",
                           "styles": {
-                            "color": "#22c55e",
+                            "color": "THEME_COLORS.ICON",
                             "fontSize": "16",
                             "flex": 0
                           }
@@ -142,7 +164,7 @@
                           "title": "text 1",
                           "styles": {
                             "flex": 1,
-                            "color": "#FFFFFF",
+                            "color": "STATIC_COLORS.WHITE",
                             "fontWeight": "700"
                           }
                         },
@@ -172,7 +194,7 @@
                           "description": "Icon item.",
                           "title": "BIcon 2",
                           "styles": {
-                            "color": "#22c55e",
+                            "color": "THEME_COLORS.ICON",
                             "fontSize": "16",
                             "flex": 0
                           }
@@ -186,7 +208,7 @@
                           "title": "text 2",
                           "styles": {
                             "flex": 1,
-                            "color": "#FFFFFF",
+                            "color": "STATIC_COLORS.WHITE",
                             "fontWeight": "700"
                           }
                         },
@@ -216,7 +238,7 @@
                           "description": "Icon item.",
                           "title": "BIcon 3",
                           "styles": {
-                            "color": "#22c55e",
+                            "color": "THEME_COLORS.ICON",
                             "fontSize": "16",
                             "flex": 0
                           }
@@ -230,7 +252,7 @@
                           "title": "text 3",
                           "styles": {
                             "flex": 1,
-                            "color": "#FFFFFF",
+                            "color": "STATIC_COLORS.WHITE",
                             "fontWeight": "700"
                           }
                         },
@@ -247,7 +269,7 @@
                   "title": "Option(s)",
                   "styles": {
                     "borderRadius": 12,
-                    "backgroundColor": "#FFFFFF"
+                    "backgroundColor": "THEME_COLORS.BACKGROUND"
                   }
                 },
                 "children": [
@@ -268,8 +290,7 @@
                       "description": "Product description.",
                       "title": "Product Desc(s)",
                       "styles": {
-                        "flex": 4,
-                        "color": "#000"
+                        "flex": 4
                       }
                     },
                     "children": "@productDescription — Unlock all premium features for a month."
@@ -281,8 +302,7 @@
                       "title": "Product Price(s)",
                       "styles": {
                         "flex": 1,
-                        "textAlign": "right",
-                        "color": "#000"
+                        "textAlign": "right"
                       }
                     },
                     "children": "@localizedPrice"
@@ -298,7 +318,7 @@
                         "marginRight": 4,
                         "flex": 0,
                         "width": 32,
-                        "color": "#000"
+                        "color": "STATIC_COLORS.BLACK"
                       }
                     },
                     "children": null
@@ -312,7 +332,6 @@
                   "description": "Countdown timer (5 seconds).",
                   "title": "Countdown",
                   "styles": {
-                    "color": "#FF0000",
                     "fontWeight": "700",
                     "fontSize": 40,
                     "textAlign": "center"

package/src/assets/samples/vpn-onboard-1.json

@@ -66,9 +66,34 @@
     "attributes": {
       "useSafeAreaView": true,
       "description": "Ekranın ana kapsayıcısı. (#1)",
-      "title": "Main 1"
+      "title": "Main 1",
+      "styles": {
+        "paddingBottom": 16
+      }
     },
     "children": [
+      {
+        "type": "StatusBarColor",
+        "attributes": {
+          "title": "Status Bar Color",
+          "description": "Status bar background color.",
+          "styles": {
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
+          }
+        },
+        "children": null
+      },
+      {
+        "type": "NavigationBarColor",
+        "attributes": {
+          "title": "Navigation Bar Color",
+          "description": "Navigation bar background color.",
+          "styles": {
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
+          }
+        },
+        "children": null
+      },
       {
         "type": "OnboardProvider",
         "children": [
@@ -85,7 +110,7 @@
                       "description": "Sayfa başlığı. (#1)",
                       "title": "OnboardTitle 1",
                       "styles": {
-                        "color": "#FDFDFD",
+                        "color": "THEME_COLORS.ONBOARD_TITLE",
                         "textAlign": "center",
                         "marginTop": 40
                       }
@@ -108,7 +133,7 @@
                       "description": "Sayfa alt başlığı. (#1)",
                       "title": "OnboardSubtitle 1",
                       "styles": {
-                        "color": "#C7C7C7",
+                        "color": "THEME_COLORS.ONBOARD_SUBTITLE",
                         "fontSize": 16,
                         "textAlign": "center"
                       }
@@ -131,7 +156,7 @@
                       "description": "Sayfa başlığı. (#2)",
                       "title": "OnboardTitle 2",
                       "styles": {
-                        "color": "#FDFDFD",
+                        "color": "THEME_COLORS.ONBOARD_TITLE",
                         "textAlign": "center",
                         "marginTop": 40
                       }
@@ -154,7 +179,7 @@
                       "description": "Sayfa alt başlığı. (#2)",
                       "title": "OnboardSubtitle 2",
                       "styles": {
-                        "color": "#C7C7C7",
+                        "color": "THEME_COLORS.ONBOARD_SUBTITLE",
                         "fontSize": 16,
                         "textAlign": "center"
                       }
@@ -177,7 +202,7 @@
                       "description": "Sayfa başlığı. (#3)",
                       "title": "OnboardTitle 3",
                       "styles": {
-                        "color": "#FDFDFD",
+                        "color": "THEME_COLORS.ONBOARD_TITLE",
                         "textAlign": "center",
                         "marginTop": 40
                       }
@@ -200,7 +225,7 @@
                       "description": "Sayfa alt başlığı. (#3)",
                       "title": "OnboardSubtitle 3",
                       "styles": {
-                        "color": "#C7C7C7",
+                        "color": "THEME_COLORS.ONBOARD_SUBTITLE",
                         "fontSize": 16,
                         "textAlign": "center"
                       }
@@ -223,7 +248,7 @@
                       "description": "Sayfa başlığı. (#4)",
                       "title": "OnboardTitle 4",
                       "styles": {
-                        "color": "#FDFDFD",
+                        "color": "THEME_COLORS.ONBOARD_TITLE",
                         "textAlign": "center",
                         "marginTop": 40
                       }
@@ -246,7 +271,7 @@
                       "description": "Sayfa alt başlığı. (#4)",
                       "title": "OnboardSubtitle 4",
                       "styles": {
-                        "color": "#C7C7C7",
+                        "color": "THEME_COLORS.ONBOARD_SUBTITLE",
                         "fontSize": 16,
                         "textAlign": "center"
                       }
@@ -262,7 +287,10 @@
             ],
             "attributes": {
               "description": "Onboarding ana yapısı. (#1)",
-              "title": "Onboard 1"
+              "title": "Onboard 1",
+              "styles": {
+                "flex": 1
+              }
             }
           },
           {
@@ -271,10 +299,22 @@
               "dotType": "expanding_dot",
               "dot_thickness": 20,
               "inactive_dot_opacity": 0.3,
-              "inactive_dot_color": "#E4E5E7",
-              "active_dot_color": "#007AFF",
+              "inactive_dot_color": "STATIC_COLORS.ONBOARD_DOT_INACTIVE",
+              "active_dot_color": "STATIC_COLORS.ONBOARD_DOT_ACTIVE",
+              "styles": {
+                "paddingVertical": 12
+              }
+            }
+          },
+          {
+            "type": "Separator",
+            "attributes": {
+              "title": "Separator",
+              "description": "Horizontal separator line",
               "styles": {
-                "flex": 2
+                "width": "100%",
+                "height": 2,
+                "backgroundColor": "STATIC_COLORS.SEPARATOR_COLOR"
               }
             }
           },
@@ -287,8 +327,9 @@
               "description": "Sayfa buton grubu. (#1)",
               "title": "OnboardButtons 1",
               "styles": {
-                "flex": 2,
-                "justifyContent": "flex-end"
+                "height": 40,
+                "marginVertical": 12,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -296,8 +337,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.one-page",
-                  "button_text_color": "#A9AAAC",
-                  "button_background_color": "#ffffff00",
+                  "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -314,8 +355,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.one-page",
-                  "button_text_color": "#FFFFFF",
-                  "button_background_color": "#0066FF",
+                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -339,8 +380,9 @@
               "description": "Sayfa buton grubu. (#2)",
               "title": "OnboardButtons 2",
               "styles": {
-                "flex": 2,
-                "justifyContent": "flex-end"
+                "height": 40,
+                "marginVertical": 12,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -348,8 +390,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.two-page",
-                  "button_text_color": "#A9AAAC",
-                  "button_background_color": "#ffffff00",
+                  "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Permission",
@@ -370,8 +412,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.two-page",
-                  "button_text_color": "#FFFFFF",
-                  "button_background_color": "#0066FF",
+                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -399,8 +441,9 @@
               "description": "Sayfa buton grubu. (#3)",
               "title": "OnboardButtons 3",
               "styles": {
-                "flex": 2,
-                "justifyContent": "flex-end"
+                "height": 40,
+                "marginVertical": 12,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -408,8 +451,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.three-page",
-                  "button_text_color": "#A9AAAC",
-                  "button_background_color": "#ffffff00",
+                  "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -426,8 +469,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.three-page",
-                  "button_text_color": "#FFFFFF",
-                  "button_background_color": "#0066FF",
+                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -455,8 +498,9 @@
               "description": "Sayfa buton grubu. (#4)",
               "title": "OnboardButtons 4",
               "styles": {
-                "flex": 2,
-                "justifyContent": "flex-end"
+                "height": 40,
+                "marginVertical": 12,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -464,8 +508,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.allow.four-page",
-                  "button_text_color": "#FFFFFF",
-                  "button_background_color": "#0066FF",
+                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -489,7 +533,8 @@
               "title": "Onboard Footer Wrap",
               "description": "Wrapper for OnboardFooter component",
               "styles": {
-                "flex": 2
+                "marginHorizontal": 25,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -498,14 +543,14 @@
                 "attributes": {
                   "textLocalizationKey": "view.onboarding.footer.description",
                   "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
-                  "linkedWordFirstColor": "#1778F2",
+                  "linkedWordFirstColor": "STATIC_COLORS.LINK_COLOR",
                   "linkedWordFirstPage": "privacy",
                   "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
-                  "linkedWordSecondColor": "#1778F2",
+                  "linkedWordSecondColor": "STATIC_COLORS.LINK_COLOR",
                   "linkedWordSecondPage": "terms",
                   "styles": {
                     "gap": 8,
-                    "color": "#A2A4B1"
+                    "color": "THEME_COLORS.FOOTER_TEXT"
                   }
                 }
               }