@developer_tribe/react-builder 1.2.30 → 1.2.31

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

@@ -350,8 +350,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.one-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "THEME_COLORS.LINE",
                   "events": [
                     {
                       "type": "Navigate",
@@ -360,7 +358,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "THEME_COLORS.LINE"
                   }
                 }
               },
@@ -368,8 +368,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.one-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -378,7 +376,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -403,8 +403,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.two-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "THEME_COLORS.LINE",
                   "events": [
                     {
                       "type": "Navigate",
@@ -413,7 +411,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "THEME_COLORS.LINE"
                   }
                 }
               },
@@ -421,8 +421,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.two-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -431,7 +429,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -456,8 +456,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.three-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "THEME_COLORS.LINE",
                   "events": [
                     {
                       "type": "Navigate",
@@ -466,7 +464,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "THEME_COLORS.LINE"
                   }
                 }
               },
@@ -474,8 +474,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.three-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -484,7 +482,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -509,8 +509,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.five-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "THEME_COLORS.LINE",
                   "events": [
                     {
                       "type": "Navigate",
@@ -519,7 +517,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "THEME_COLORS.LINE"
                   }
                 }
               },
@@ -527,8 +527,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.five-page",
-                  "button_text_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -541,7 +539,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -566,8 +566,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.five-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "THEME_COLORS.LINE",
                   "events": [
                     {
                       "type": "Navigate",
@@ -576,7 +574,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "THEME_COLORS.LINE"
                   }
                 }
               },
@@ -584,8 +584,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.five-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -598,7 +596,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -623,8 +623,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.allow.four-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -636,7 +634,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }

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

@@ -264,8 +264,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.one-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "THEME_COLORS.TEXT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -274,7 +272,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "THEME_COLORS.TEXT"
                   }
                 }
               },
@@ -282,8 +282,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.one-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -292,7 +290,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -317,8 +317,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.two-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "THEME_COLORS.TEXT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -327,7 +325,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "THEME_COLORS.TEXT"
                   }
                 }
               },
@@ -335,8 +335,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.two-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -345,7 +343,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -370,8 +370,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.three-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "THEME_COLORS.TEXT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -380,7 +378,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "THEME_COLORS.TEXT"
                   }
                 }
               },
@@ -388,8 +388,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.three-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -402,7 +400,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -427,8 +427,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.allow.four-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -440,7 +438,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }

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

@@ -288,8 +288,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.one-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -298,7 +296,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.TRANSPARENT"
                   }
                 }
               },
@@ -306,8 +306,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.one-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -316,7 +314,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -343,8 +343,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.two-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Permission",
@@ -357,7 +355,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.TRANSPARENT"
                   }
                 }
               },
@@ -365,8 +365,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.two-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -379,7 +377,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -406,8 +406,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.three-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -416,7 +414,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.TRANSPARENT"
                   }
                 }
               },
@@ -424,8 +424,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.three-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -438,7 +436,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -465,8 +465,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.allow.four-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -478,7 +476,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }

package/src/build-components/BIcon/BIcon.tsx

@@ -9,7 +9,7 @@ import { Icon } from '../../components/Icon.generated';
 import { IconsType } from '../../types/Icons.generated';
 import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
 
-function BIcon({ node }: BIconComponentProps) {
+export function BIcon({ node }: BIconComponentProps) {
   useLogRender('BIcon');
   node = useNode(node);
   const generatedId = useId();

package/src/build-components/BackgroundImage/BackgroundImage.tsx

@@ -8,7 +8,7 @@ import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 
-function BackgroundImage({ node }: BackgroundImageComponentProps) {
+export function BackgroundImage({ node }: BackgroundImageComponentProps) {
   useLogRender('BackgroundImage');
   node = useNode(node);
   const generatedId = useId();

package/src/build-components/Button/Button.tsx

@@ -9,7 +9,7 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useLocalize } from '../../hooks/useLocalize';
 
-function Button({ node }: ButtonComponentProps) {
+export function Button({ node }: ButtonComponentProps) {
   useLogRender('Button');
   node = useNode(node);
   const generatedId = useId();

package/src/build-components/CarouselDots/CarouselDots.tsx

@@ -34,9 +34,7 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   const onboardApi = useContext(onboardContext);
   const emblaApi = isOnboard ? onboardApi?.emblaApi : carouselApi;
 
-  // When used as OnboardDot (sourceType), support OnboardDot-specific attributes too.
-  const GHOST_DOT_DARK_COLOR = '#E4E5E7';
-  const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
+  const { mockTheme: theme, projectColors, baseSize } = useBuilderParams();
   const inactiveDotOpacity =
     (stylesBag?.inactive_dot_opacity as number | undefined) ??
     (attrRecord.inactive_dot_opacity as number | undefined) ??
@@ -51,23 +49,14 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
     (stylesBag?.dot_thickness as string | number | undefined) ??
     (attrRecord.dot_thickness as string | number | undefined);
 
-  const { mockTheme: theme, projectColors, baseSize } = useBuilderParams();
-  const isDark = theme === 'dark';
-  const inactiveDotColorBase = isDark
-    ? GHOST_DOT_DARK_COLOR
-    : GHOST_DOT_LIGHT_COLOR;
-
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme, projectColors }),
     [activeDotColor, theme, projectColors],
   );
-  const resolvedInactiveDotColor = useMemo(() => {
-    const parsed = parseColor(inactiveDotColorOverride, {
-      theme,
-      projectColors,
-    });
-    return parsed ?? inactiveDotColorBase;
-  }, [inactiveDotColorBase, inactiveDotColorOverride, theme, projectColors]);
+  const resolvedInactiveDotColor = useMemo(
+    () => parseColor(inactiveDotColorOverride, { theme, projectColors }),
+    [inactiveDotColorOverride, theme, projectColors],
+  );
 
   const dotSizeCss = useMemo(() => {
     const parsed = parseSize(dotThicknessRaw, baseSize);
@@ -132,7 +121,9 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
           isDotSelected && resolvedActiveDotColor
             ? resolvedActiveDotColor
             : resolvedInactiveDotColor;
-        const activeFallback = '#007AFF';
+        const activeFallback =
+          resolvedActiveDotColor ??
+          parseColor('STATIC_COLORS.ONBOARD_DOT_ACTIVE', { projectColors });
         const dotColor = resolvedColor ?? activeFallback;
 
         return (

package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts

@@ -69,6 +69,10 @@ export interface CarouselDotsPropsGenerated {
     style?: CarouselDotsStyleGenerated;
     scrollable?: boolean;
     dotType?: DotTypeOptionType;
+    dot_thickness?: string;
+    inactive_dot_opacity?: number;
+    inactive_dot_color?: string;
+    active_dot_color?: string;
   };
 }
 

package/src/build-components/CarouselDots/pattern.json

@@ -14,9 +14,20 @@
         "sliding_border",
         "sliding_dot",
         "liquid_like"
-      ]
+      ],
+      "dot_thickness": "size",
+      "inactive_dot_opacity": "number",
+      "inactive_dot_color": "color",
+      "active_dot_color": "color"
     }
   },
+  "defaults": {
+    "dotType": "expanding_dot",
+    "dot_thickness": 10,
+    "inactive_dot_opacity": 0.3,
+    "active_dot_color": "STATIC_COLORS.ONBOARD_DOT_ACTIVE",
+    "inactive_dot_color": "THEME_COLORS.BACKGROUND"
+  },
   "meta": {
     "desiredParent": [">CarouselProvider"],
     "label": "Carousel Dots",

package/src/build-components/Main/Main.tsx

@@ -33,6 +33,7 @@ function Main({ node }: MainComponentProps) {
   const style = useMergedStyle(
     layoutStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+    { boxSizing: 'content-box' },
   );
 
   return (

package/src/build-components/OnboardButton/OnboardButton.tsx

@@ -11,9 +11,10 @@ import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtra
 import { useMockOSContext, useMockPermission } from '../../mockOS';
 import { useLocalize } from '../../hooks/useLocalize';
 import { parseColor } from '../../utils/parseColor';
+import { defaultProjectColors } from '../../utils/projectColors';
 import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
-function OnboardButton({ node }: OnboardButtonComponentProps) {
+export function OnboardButton({ node }: OnboardButtonComponentProps) {
   useLogRender('OnboardButton');
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardButton';
@@ -35,17 +36,18 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
 
   const flex = (attrRecord.flex ?? styleBag?.flex ?? 1) as number;
 
-  // The editor saves color attrs inside `styles` (meta category === 'style'),
-  // but legacy JSON may have them at the top level.
-  const rawTextColor = (attrRecord.button_text_color ??
-    styleBag?.button_text_color) as string | undefined;
-  const rawBgColor = (attrRecord.button_background_color ??
-    styleBag?.button_background_color) as string | undefined;
+  // color and backgroundColor are now stored inside `styles`
+  const rawTextColor = styleBag?.color as string | undefined;
+  const rawBgColor = styleBag?.backgroundColor as string | undefined;
 
   const textColor =
-    parseColor(rawTextColor, { projectColors, theme }) ?? '#FFFFFF';
+    parseColor(rawTextColor, { projectColors, theme }) ??
+    projectColors?.STATIC_COLORS?.ONBOARD_BUTTON_PRIMARY_TEXT ??
+    defaultProjectColors.STATIC_COLORS!.ONBOARD_BUTTON_PRIMARY_TEXT;
   const backgroundColor =
-    parseColor(rawBgColor, { projectColors, theme }) ?? '#0066FF';
+    parseColor(rawBgColor, { projectColors, theme }) ??
+    projectColors?.STATIC_COLORS?.ONBOARD_BUTTON_PRIMARY_BACKGROUND ??
+    defaultProjectColors.STATIC_COLORS!.ONBOARD_BUTTON_PRIMARY_BACKGROUND;
   const viewStyle = useExtractViewStyle(node);
 
   const handleClick = () => {

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -77,10 +77,8 @@ export interface OnboardButtonPropsGenerated {
     style?: OnboardButtonStyleGenerated;
     scrollable?: boolean;
     labelKey?: string;
-    button_text_color?: string;
     animation?: AnimationOptionType;
     animation_color?: string;
-    button_background_color?: string;
     flex?: number;
     events?: EventObjectGenerated[];
   };