btwld · tilucasoli · Apr 16, 2026 · Apr 16, 2026 · Apr 16, 2026 · Apr 16, 2026
diff --git a/components/HomeContent.tsx b/components/HomeContent.tsx
@@ -165,8 +165,8 @@ export const HomeContent = () => {
                 <HighlightedCode code={`// Style can live outside the widget
 final cardStyle = BoxStyler()
     .color(Colors.blue)
-    .paddingAll(16)
-    .borderRounded(8);
+    .padding(.all(16))
+    .borderRadius(.circular(8));
 
 // Widget stays clean
 Box(style: cardStyle, child: ...)`} />

diff --git a/packages/mix_docs_preview/lib/components/chip_button.dart b/packages/mix_docs_preview/lib/components/chip_button.dart
@@ -11,7 +11,7 @@ final chipButtonContainer = BoxStyler()
     .height(40)
     .width(120)
     .color(Colors.blue)
-    .borderRounded(20)
+    .borderRadius(.circular(20))
     .onHovered(.color(Colors.blue.shade700))
     .variant(ContextVariant.widgetState(.selected), .color(Colors.black))
     .alignment(.center)

diff --git a/packages/mix_docs_preview/lib/guides/animations/implicit_curved_scale.dart b/packages/mix_docs_preview/lib/guides/animations/implicit_curved_scale.dart
@@ -34,7 +34,7 @@ class _ExampleState extends State<Example> {
         .color(Colors.black)
         .height(100)
         .width(100)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .translate(appear ? 0 : -50, 0)
         .scale(appear ? 1 : 0.1)
         .animate(.easeInOut(1.s));

diff --git a/packages/mix_docs_preview/lib/guides/animations/implicit_spring_translate.dart b/packages/mix_docs_preview/lib/guides/animations/implicit_spring_translate.dart
@@ -23,7 +23,7 @@ class _ExampleState extends State<Example> {
         .color(Colors.black)
         .height(100)
         .width(100)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .transform(.identity())
         .translate(0, _translated ? 100 : -100)
         .animate(.spring(300.ms, bounce: 0.6));

diff --git a/packages/mix_docs_preview/lib/guides/animations/implicit_variant_hover.dart b/packages/mix_docs_preview/lib/guides/animations/implicit_variant_hover.dart
@@ -23,7 +23,7 @@ class ImplicitVariantHoverExample extends StatelessWidget {
     final box = BoxStyler()
         .color(Colors.black)
         .size(100, 100)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .scale(1)
         .onHovered(.color(Colors.blue).scale(1.5))
         .animate(.spring(800.ms));

diff --git a/packages/mix_docs_preview/lib/guides/animations/phase_tap_compress.dart b/packages/mix_docs_preview/lib/guides/animations/phase_tap_compress.dart
@@ -40,15 +40,15 @@ class _PhaseTapCompressExampleState extends State<PhaseTapCompressExample> {
         .color(Colors.deepPurple)
         .height(100)
         .width(100)
-        .borderRounded(40)
+        .borderRadius(.circular(40))
         .phaseAnimation(
           trigger: _isExpanded,
           phases: AnimationPhases.values,
           styleBuilder: (phase, style) => switch (phase) {
             .initial => style.scale(1),
             .compress => style.scale(0.75).color(Colors.red.shade800),
             .expanded =>
-              style.scale(1.25).borderRounded(20).color(Colors.yellow.shade300),
+              style.scale(1.25).borderRadius(.circular(20)).color(Colors.yellow.shade300),
           },
           configBuilder: (phase) => switch (phase) {
             .initial => .springWithDampingRatio(800.ms, ratio: 0.3),

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/composing.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/composing.dart
@@ -16,7 +16,7 @@ class Example extends StatelessWidget {
         .color(Colors.red)
         .height(100)
         .width(100)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .onHovered(.color(Colors.blue).width(200));
 
     final styleB = styleA.onHovered(.color(Colors.green));

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/context_variant_flag.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/context_variant_flag.dart
@@ -52,7 +52,7 @@ class _ExampleState extends State<Example> {
           style: BoxStyler()
               .color(Colors.red)
               .size(100, 100)
-              .borderRounded(10)
+              .borderRadius(.circular(10))
               .variant(
                 ContextVariant('custom_flag', (context) {
                   return CustomInheritedWidget.of(context)?.flag ?? false;

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/disabled.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/disabled.dart
@@ -16,7 +16,7 @@ class Example extends StatelessWidget {
         .color(Colors.red)
         .height(100)
         .width(100)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .onDisabled(.color(Colors.grey));
 
     return Pressable(enabled: false, child: box());

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/focused.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/focused.dart
@@ -38,7 +38,7 @@ class _ExampleState extends State<Example> {
         .color(Colors.red)
         .height(100)
         .width(100)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .wrap(.new().opacity(0.4))
         .onFocused(
           .color(Colors.blue).border(.all(.color(Colors.blue.shade700).width(3))),

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/hovered.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/hovered.dart
@@ -16,7 +16,7 @@ class Example extends StatelessWidget {
         .color(Colors.red)
         .height(100)
         .width(100)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .onHovered(.color(Colors.blue));
 
     return box();

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/nesting.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/nesting.dart
@@ -27,7 +27,7 @@ class _ExampleState extends State<Example> {
         .color(Colors.red)
         .height(100)
         .width(100)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .onHovered(hoverStyle);
 
     return MediaQuery(

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/on_dark_light.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/on_dark_light.dart
@@ -23,7 +23,7 @@ class _ExampleState extends State<Example> {
     final buttonStyle = BoxStyler()
         .height(60)
         .width(60)
-        .borderRounded(30)
+        .borderRadius(.circular(30))
         .color(Colors.grey.shade200)
         .animate(.easeInOut(600.ms))
         .onDark(.color(Colors.grey.shade800))

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/pressed.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/pressed.dart
@@ -16,7 +16,7 @@ class Example extends StatelessWidget {
         .color(Colors.red)
         .height(100)
         .width(100)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .onPressed(.color(Colors.blue));
 
     return Pressable(

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/responsive_size.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/responsive_size.dart
@@ -17,7 +17,7 @@ class Example extends StatelessWidget {
         .height(100)
         .color(Colors.blue.shade400)
         .onBreakpoint(Breakpoint.maxWidth(575), .color(Colors.green))
-        .borderRounded(16)
+        .borderRadius(.circular(16))
         .shadow(.color(Colors.black.withValues(alpha: 0.2)).blurRadius(20))
         .wrap(
           WidgetModifierConfig.defaultText(

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/selected.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/selected.dart
@@ -29,7 +29,7 @@ class _ExampleState extends State<Example> {
         .color(Colors.red)
         .height(100)
         .width(100)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .variant(ContextVariant.widgetState(.selected), .color(Colors.blue));
 
     return Pressable(

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/selected_toggle.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/selected_toggle.dart
@@ -28,7 +28,7 @@ class _ExampleState extends State<Example> {
     final style = BoxStyler()
         .height(60)
         .width(120)
-        .borderRounded(30)
+        .borderRadius(.circular(30))
         .color(Colors.grey.shade200)
         .border(.all(.color(Colors.grey.shade300).width(2)))
         .animate(.spring(300.ms))

diff --git a/packages/mix_docs_preview/lib/guides/gradients/gradient_linear.dart b/packages/mix_docs_preview/lib/guides/gradients/gradient_linear.dart
@@ -13,7 +13,7 @@ class Example extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final style = BoxStyler.size(200, 100)
-        .borderRounded(16)
+        .borderRadius(.circular(16))
         .shadow(
           .color(Colors.purple.shade200).offset(x: 0, y: 8).blurRadius(20),
         )

diff --git a/packages/mix_docs_preview/lib/guides/gradients/gradient_radial.dart b/packages/mix_docs_preview/lib/guides/gradients/gradient_radial.dart
@@ -12,7 +12,7 @@ class Example extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final style = BoxStyler.size(150, 150)
-        .borderRounded(75)
+        .borderRadius(.circular(75))
         .shadow(.color(Colors.orange.shade400).blurRadius(30).spreadRadius(5))
         .radialGradient(
           colors: [Colors.orange.shade300, Colors.deepOrange.shade600],

diff --git a/packages/mix_docs_preview/lib/guides/gradients/gradient_sweep.dart b/packages/mix_docs_preview/lib/guides/gradients/gradient_sweep.dart
@@ -14,7 +14,7 @@ class Example extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final style = BoxStyler.size(120, 120)
-        .borderRounded(60)
+        .borderRadius(.circular(60))
         .shadow(.color(Colors.purple.shade300).blurRadius(25).spreadRadius(2))
         .sweepGradient(
           colors: [

diff --git a/packages/mix_docs_preview/lib/guides/styling/preview_1.dart b/packages/mix_docs_preview/lib/guides/styling/preview_1.dart
@@ -21,7 +21,7 @@ class Example extends StatelessWidget {
     final base = BoxStyler()
         .paddingX(16)
         .paddingY(8)
-        .borderRounded(8)
+        .borderRadius(.circular(8))
         .color(Colors.black);
 
     final solid = base.color(Colors.blue);

diff --git a/packages/mix_docs_preview/lib/homepage/buttons_showcase.dart b/packages/mix_docs_preview/lib/homepage/buttons_showcase.dart
@@ -17,7 +17,7 @@ class Example extends StatelessWidget {
     final buttonStyle = BoxStyler()
         .height(40)
         .paddingX(14)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .alignment(.center)
         .animate(.easeInOut(180.ms))
         .scale(1)

diff --git a/packages/mix_docs_preview/lib/homepage/styling_showcase.dart b/packages/mix_docs_preview/lib/homepage/styling_showcase.dart
@@ -17,7 +17,7 @@ class Example extends StatelessWidget {
     // #docregion showcase
     final boxStyle = BoxStyler()
         .size(120, 120)
-        .borderRounded(16)
+        .borderRadius(.circular(16))
         .color(Colors.deepPurple);
 
     return boxStyle();

diff --git a/packages/mix_docs_preview/lib/homepage/variants_showcase.dart b/packages/mix_docs_preview/lib/homepage/variants_showcase.dart
@@ -16,7 +16,7 @@ class Example extends StatelessWidget {
     // #docregion showcase
     final cardStyle = BoxStyler()
         .size(120, 120)
-        .borderRounded(16)
+        .borderRadius(.circular(16))
         .color(Colors.cyan)
         .alignment(.center)
         .animate(.easeInOut(220.ms))

diff --git a/packages/mix_docs_preview/lib/overview/comparison/preview_0.dart b/packages/mix_docs_preview/lib/overview/comparison/preview_0.dart
@@ -31,7 +31,7 @@ class CustomMixWidget extends StatelessWidget {
 
   BoxStyler get customBoxStyle => BoxStyler()
       .padding(.symmetric(horizontal: 12, vertical: 8))
-      .borderRounded(10)
+      .borderRadius(.circular(10))
       .color(surfaceColor)
       .border(.all(.color(surfaceColor)))
       .animate(.easeInOut(100.ms))

diff --git a/packages/mix_docs_preview/lib/overview/getting_started/hello_mix.dart b/packages/mix_docs_preview/lib/overview/getting_started/hello_mix.dart
@@ -20,7 +20,7 @@ class Example extends StatelessWidget {
       .size(240, 100)
       .color(Colors.blue)
       .alignment(.center)
-      .borderRounded(12)
+      .borderRadius(.circular(12))
       .border(.all(.color(Colors.black).width(1).style(BorderStyle.solid)));
 
   TextStyler get _text => TextStyler().color(Colors.white).fontSize(18);

diff --git a/packages/mix_docs_preview/lib/overview/introduction/simple_red_box.dart b/packages/mix_docs_preview/lib/overview/introduction/simple_red_box.dart
@@ -20,7 +20,7 @@ class Example extends StatelessWidget {
     final boxStyle = BoxStyler()
         .color(Colors.red)
         .size(100, 100)
-        .borderRounded(10);
+        .borderRadius(.circular(10));
 
     return Box(style: boxStyle);
   }

diff --git a/packages/mix_docs_preview/lib/tutorials/creating_a_widget/design_system_button.dart b/packages/mix_docs_preview/lib/tutorials/creating_a_widget/design_system_button.dart
@@ -37,7 +37,7 @@ class Example extends StatelessWidget {
               .color(Colors.blueAccent)
               .paddingX(24)
               .paddingY(12)
-              .borderRounded(8),
+              .borderRadius(.circular(8)),
           TextStyler().color(Colors.white).fontSize(16).fontWeight(.w500),
         ),
         const SizedBox(height: 12),
@@ -48,7 +48,7 @@ class Example extends StatelessWidget {
               .border(.all(.color(Colors.blueAccent).width(1.5)))
               .paddingX(24)
               .paddingY(12)
-              .borderRounded(8),
+              .borderRadius(.circular(8)),
           TextStyler().color(Colors.blueAccent).fontSize(16).fontWeight(.w500),
         ),
         const SizedBox(height: 12),
@@ -58,7 +58,7 @@ class Example extends StatelessWidget {
               .color(Colors.blueAccent)
               .paddingX(24)
               .paddingY(12)
-              .borderRounded(8)
+              .borderRadius(.circular(8))
               .shadow(
                 .color(
                   Colors.blueAccent.shade700.withValues(alpha: 0.5),
@@ -73,7 +73,7 @@ class Example extends StatelessWidget {
               .color(Colors.transparent)
               .paddingX(24)
               .paddingY(12)
-              .borderRounded(8),
+              .borderRadius(.circular(8)),
           TextStyler()
               .color(Colors.blueAccent)
               .fontSize(16)
@@ -88,7 +88,7 @@ class Example extends StatelessWidget {
                 .color(Colors.blueGrey.shade100)
                 .paddingX(24)
                 .paddingY(12)
-                .borderRounded(8),
+                .borderRadius(.circular(8)),
             child: StyledText(
               'Disabled',
               style: TextStyler()

diff --git a/packages/mix_docs_preview/lib/widgets/box/gradient_box.dart b/packages/mix_docs_preview/lib/widgets/box/gradient_box.dart
@@ -14,7 +14,7 @@ class Example extends StatelessWidget {
   Widget build(BuildContext context) {
     final style = BoxStyler.height(50)
         .width(100)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .linearGradient(
           colors: [Colors.deepPurple.shade700, Colors.deepPurple.shade200],
           begin: .topLeft,

diff --git a/packages/mix_docs_preview/lib/widgets/vbox/card_layout.dart b/packages/mix_docs_preview/lib/widgets/vbox/card_layout.dart
@@ -19,7 +19,7 @@ class Example extends StatelessWidget {
         .color(Colors.grey.shade50)
         .paddingX(12)
         .paddingY(10)
-        .borderRounded(10)
+        .borderRadius(.circular(10))
         .border(.all(.color(Colors.blueGrey.shade400).width(1)))
         .height(150)
         .width(120)