Make ButtonProperties.buttonColor nullable

buttonColor defaulted to black and black was left out of the JSON, so a
renderer could not tell an unset colour from a chosen black: a black text
button rendered transparent. It is now nullable and defaults to null, the
button type's default colour. A missing key (designs that omitted black)
reads as null; an explicit colour, black included, is written and read back.
The field setter can clear it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VtH72Dg3rGsqwaEe62Sha4

Author: claude

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Unreleased
 
+- Breaking: `ButtonProperties.buttonColor` is nullable and defaults to `null`,
+  the button type's default colour. It was black, and black was left out of
+  the JSON, so a missing key now reads as `null` and an explicit black is
+  written and read back as black.
 - `TextFieldProperties.maxLines`: `null` (unlimited lines) is written as an
   explicit `null` and reads back as `null`; a missing key still reads as 1.
 - `VariableData.getValue()` returns an empty text variable as `''` instead of

lib/src/api/nodes/button_node.dart

@@ -211,8 +211,12 @@ class ButtonProperties extends CustomProperties
   /// Type of the button.
   late ButtonTypeEnum buttonType;
 
-  /// Background color of the button.
-  late ColorRGBA buttonColor;
+  /// Background color of the button, or null for the button type's default
+  /// (no fill for a text or outlined button).
+  ///
+  /// Designs saved before this was nullable omit black, then the default:
+  /// a missing key reads as null, an explicit color (black too) as set.
+  ColorRGBA? buttonColor;
 
   /// Elevation shadow color of the button.
   late ColorRGBA shadowColor;
@@ -248,7 +252,7 @@ class ButtonProperties extends CustomProperties
   /// Creates a [ButtonProperties] with given data.
   ButtonProperties({
     this.buttonType = ButtonTypeEnum.elevated,
-    this.buttonColor = ColorRGBA.black,
+    this.buttonColor,
     this.shadowColor = const ColorRGBA(r: 0.65, g: 0.65, b: 0.65, a: 1),
     this.label = '',
     this.elevation = 0,
@@ -321,13 +325,11 @@ class ButtonProperties extends CustomProperties
     //   },
     //   ButtonTypeEnum.values,
     // ),
-    'buttonColor': ColorFieldAccess<ColorRGBA>(
+    'buttonColor': ColorFieldAccess<ColorRGBA?>(
       'Button Color',
       'Color of the button.',
       () => buttonColor,
-      (ColorRGBA? value) {
-        if (value != null) buttonColor = value;
-      },
+      (ColorRGBA? value) => buttonColor = value,
     ),
     'shadowColor': ColorFieldAccess<ColorRGBA>(
       'Shadow Color',

lib/src/api/nodes/button_node.g.dart

@@ -0,0 +1,50 @@
+import 'dart:convert';
+
+import 'package:codelessly_api/codelessly_api.dart';
+import 'package:test/test.dart';
+
+ButtonProperties roundTrip(ButtonProperties properties) =>
+    ButtonProperties.fromJson(jsonDecode(jsonEncode(properties.toJson())));
+
+void main() {
+  group('ButtonProperties.buttonColor', () {
+    test('is unset by default and left out of the JSON', () {
+      final properties = ButtonProperties();
+      expect(properties.buttonColor, isNull);
+      expect(properties.toJson().containsKey('buttonColor'), isFalse);
+      expect(roundTrip(properties).buttonColor, isNull);
+    });
+
+    test('keeps an explicit black', () {
+      final properties = ButtonProperties(buttonColor: ColorRGBA.black);
+      expect(properties.toJson()['buttonColor'], ColorRGBA.black.toJson());
+      expect(roundTrip(properties).buttonColor, ColorRGBA.black);
+    });
+
+    test('reads old JSON: a missing key is unset, a written color is kept', () {
+      final Map<String, dynamic> json = ButtonProperties(
+        buttonType: ButtonTypeEnum.text,
+      ).toJson();
+      expect(ButtonProperties.fromJson(json).buttonColor, isNull);
+      for (final ColorRGBA color in [
+        ColorRGBA.black,
+        const ColorRGBA(r: 0.2, g: 0.4, b: 0.8, a: 1),
+      ]) {
+        expect(
+          ButtonProperties.fromJson({...json, 'buttonColor': color.toJson()})
+              .buttonColor,
+          color,
+        );
+      }
+    });
+
+    test('can be set and cleared through its field', () {
+      final properties = ButtonProperties();
+      final field = properties.fields['buttonColor']!;
+      field.setValue(ColorRGBA.black);
+      expect(properties.buttonColor, ColorRGBA.black);
+      field.setValue(null);
+      expect(properties.buttonColor, isNull);
+    });
+  });
+}