btwld · leoafarias · Jul 17, 2026 · Jul 16, 2026 · Jul 17, 2026 · Jul 17, 2026
diff --git a/components/HomeContent.tsx b/components/HomeContent.tsx
@@ -148,11 +148,10 @@ export const HomeContent = () => {
                   Without Mix
                 </span>
                 <HighlightedCode code={`Container(
-  padding: EdgeInsets.all(16),
+  padding: .all(16),
   decoration: BoxDecoration(
     color: Colors.blue,
-    borderRadius:
-      BorderRadius.circular(8),
+    borderRadius: .circular(8),
   ),
   child: ...
 )`} />

diff --git a/components/RemixHome.tsx b/components/RemixHome.tsx
@@ -65,43 +65,50 @@ const THEMES = [
     key: "default",
     name: "Classic",
     previewId: "homepage/hero-classic",
-    code: `final style = RemixButtonStyler()
-    .color(const Color(0xFF00EB03))
-    .labelColor(const Color(0xFF05040A))
+    code: `final style = ButtonStyler()
+    .color(Colors.greenAccent.shade400)
+    .labelColor(Colors.black)
     .paddingX(22)
     .paddingY(11)
-    .borderRadiusAll(const Radius.circular(10))
-    .onHovered(.color(const Color(0xFF33FF36)));`,
+    .borderRadius(.circular(10))
+    .onHovered(.color(Colors.lightGreenAccent.shade400));`,
   },
   {
     key: "gradient",
     name: "Gradient",
     previewId: "homepage/hero-gradient",
-    code: `final style = RemixButtonStyler()
-    .gradient(
-      LinearGradientMix(
-        begin: .topLeft,
-        end: .bottomRight,
-        colors: const [Color(0xFF00EB03), Color(0xFF8B5CF6)],
-      ),
+    code: `final style = ButtonStyler()
+    .linearGradient(
+      begin: .topLeft,
+      end: .bottomRight,
+      colors: [
+        Colors.greenAccent.shade400,
+        Colors.deepPurpleAccent.shade200,
+      ],
     )
-    .labelColor(const Color(0xFF05040A))
+    .labelColor(Colors.black)
     .paddingX(22)
     .paddingY(11)
-    .borderRadiusAll(const Radius.circular(12));`,
+    .borderRadius(.circular(12));`,
   },
   {
     key: "neon",
     name: "Neon",
     previewId: "homepage/hero-neon",
-    code: `final style = RemixButtonStyler()
-    .color(const Color(0xFF0A0014))
-    .labelColor(const Color(0xFF00F0FF))
+    code: `final style = ButtonStyler()
+    .color(Colors.black)
+    .labelColor(Colors.cyanAccent.shade400)
     .paddingX(24)
     .paddingY(11)
-    .borderRadiusAll(const Radius.circular(2))
-    .borderAll(color: const Color(0xFF00F0FF), width: 1)
-    .shadowOnly(color: const Color(0xFFFF00E5), blurRadius: 22);`,
+    .borderRadius(.circular(2))
+    .border(
+      .color(Colors.cyanAccent.shade400)
+      .width(1),
+    )
+    .shadow(
+      .color(Colors.purpleAccent.shade400)
+      .blurRadius(22),
+    );`,
   },
 ];
 

diff --git a/docs/remix-landing-page-copy.md b/docs/remix-landing-page-copy.md
@@ -58,13 +58,13 @@ Accessible, themeable Flutter components with hover, focus, press, keyboard navi
 Make it yours without starting from scratch. Define a look once with Mix's fluent API, then reuse and adapt it across your whole app — no deep widget trees, no copy-pasted variants that drift out of sync.
 
 ```dart
-final button = RemixButtonStyler()
-  .paddingX(16)
-  .paddingY(10)
-  .color(Colors.blue)
-  .borderRadiusAll(const Radius.circular(8))
-  .onHovered(.color(Colors.blue.shade700))
-  .animate(AnimationConfig.spring(300.ms));
+final button = ButtonStyler()
+    .paddingX(16)
+    .paddingY(10)
+    .color(Colors.blue)
+    .borderRadius(.circular(8))
+    .onHovered(.color(Colors.blue.shade700))
+    .animate(.spring(300.ms));
 ```
 
 `Explore styling →`

diff --git a/packages/mix_docs_preview/lib/components/chip_button.dart b/packages/mix_docs_preview/lib/components/chip_button.dart
@@ -4,7 +4,7 @@ import 'package:mix/mix.dart';
 
 final chipButtonLabel = TextStyler(
   textAlign: .center,
-  style: TextStyleMix(color: Colors.white, fontSize: 12, fontWeight: .w500),
+  style: .color(Colors.white).fontSize(12).fontWeight(.w500),
 );
 
 final chipButtonContainer = BoxStyler()

diff --git a/packages/mix_docs_preview/lib/components/custom_scaffold.dart b/packages/mix_docs_preview/lib/components/custom_scaffold.dart
@@ -11,11 +11,7 @@ final appHeaderContainer = BoxStyler.height(80)
     .color(Colors.black)
     .padding(.all(16))
     .alignment(.center)
-    .wrap(
-      .new().defaultText(
-        TextStyler.fontSize(20).fontWeight(.bold).color(Colors.white),
-      ),
-    );
+    .wrap(.defaultText(.fontSize(20).fontWeight(.bold).color(Colors.white)));
 
 final scaffoldBodyContainer = BoxStyler.color(
   Colors.grey.shade50,

diff --git a/packages/mix_docs_preview/lib/guides/animations/keyframe_loop.dart b/packages/mix_docs_preview/lib/guides/animations/keyframe_loop.dart
@@ -44,7 +44,7 @@ class KeyframeLoopExample extends StatelessWidget {
             return style
                 .transform(Matrix4.diagonal3Values(scale, scale, 1.0))
                 .color(values.get('color'))
-                .wrap(WidgetModifierConfig.opacity(opacity));
+                .wrap(.opacity(opacity));
           },
         );
 

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
@@ -48,7 +48,10 @@ class _PhaseTapCompressExampleState extends State<PhaseTapCompressExample> {
             .initial => style.scale(1),
             .compress => style.scale(0.75).color(Colors.red.shade800),
             .expanded =>
-              style.scale(1.25).borderRadius(.circular(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/design_token/theme_switch.dart b/packages/mix_docs_preview/lib/guides/design_token/theme_switch.dart
@@ -54,7 +54,7 @@ class _ExampleState extends State<Example> {
     return MixScope(
       colors: _isDark ? _darkColors : _lightColors,
       child: Column(
-        mainAxisSize: MainAxisSize.min,
+        mainAxisSize: .min,
         spacing: 16,
         children: [
           Box(
@@ -67,14 +67,14 @@ class _ExampleState extends State<Example> {
           GestureDetector(
             onTap: () => setState(() => _isDark = !_isDark),
             child: Container(
-              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+              padding: .symmetric(horizontal: 16, vertical: 8),
               decoration: BoxDecoration(
                 color: Colors.grey.shade200,
-                borderRadius: BorderRadius.circular(8),
+                borderRadius: .circular(8),
               ),
               child: Text(
                 'Toggle Theme',
-                style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+                style: TextStyle(fontSize: 14, fontWeight: .w500),
               ),
             ),
           ),

diff --git a/packages/mix_docs_preview/lib/guides/design_token/theme_tokens.dart b/packages/mix_docs_preview/lib/guides/design_token/theme_tokens.dart
@@ -33,7 +33,7 @@ class Example extends StatelessWidget {
     return MixScope(
       colors: {$primaryColor: Colors.blue},
       spaces: {$spacing: 16.0},
-      radii: {$pill: Radius.circular(20)},
+      radii: {$pill: .circular(20)},
       child: _Example(),
     );
   }
@@ -59,7 +59,7 @@ class _Example extends StatelessWidget {
           'Hello, World!',
           style: TextStyler.color(
             $primaryColor(),
-          ).wrap(.new().padding(.all($spacing()))),
+          ).wrap(.padding(.all($spacing()))),
         ),
       ),
     );

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/composing.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/composing.dart
@@ -22,10 +22,10 @@ class Example extends StatelessWidget {
     final styleB = styleA.onHovered(.color(Colors.green));
 
     return Row(
-      mainAxisAlignment: MainAxisAlignment.center,
+      mainAxisAlignment: .center,
       children: [
         Column(
-          mainAxisSize: MainAxisSize.min,
+          mainAxisSize: .min,
           children: [
             Box(style: styleA),
             SizedBox(height: 8),
@@ -34,7 +34,7 @@ class Example extends StatelessWidget {
         ),
         SizedBox(width: 16),
         Column(
-          mainAxisSize: MainAxisSize.min,
+          mainAxisSize: .min,
           children: [
             Box(style: styleB),
             SizedBox(height: 8),

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
@@ -57,7 +57,7 @@ class _ExampleState extends State<Example> {
                 ContextVariant('custom_flag', (context) {
                   return CustomInheritedWidget.of(context)?.flag ?? false;
                 }),
-                BoxStyler().color(Colors.blue),
+                .color(Colors.blue),
               ),
         ),
       ),

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

diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/nesting.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/nesting.dart
@@ -35,17 +35,17 @@ class _ExampleState extends State<Example> {
         context,
       ).copyWith(platformBrightness: isDark ? .dark : .light),
       child: Column(
-        mainAxisSize: MainAxisSize.min,
+        mainAxisSize: .min,
         children: [
           Box(style: style),
           SizedBox(height: 12),
           GestureDetector(
             onTap: () => setState(() => isDark = !isDark),
             child: Container(
-              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+              padding: .symmetric(horizontal: 16, vertical: 8),
               decoration: BoxDecoration(
                 color: isDark ? Colors.grey.shade700 : Colors.grey.shade300,
-                borderRadius: BorderRadius.circular(8),
+                borderRadius: .circular(8),
               ),
               child: Text(
                 isDark ? 'Dark mode' : 'Light mode',

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
@@ -16,12 +16,12 @@ class Example extends StatelessWidget {
         .width(100)
         .height(100)
         .color(Colors.blue.shade400)
-        .onBreakpoint(Breakpoint.maxWidth(575), .color(Colors.green))
+        .onBreakpoint(.maxWidth(575), .color(Colors.green))
         .borderRadius(.circular(16))
         .shadow(.color(Colors.black.withValues(alpha: 0.2)).blurRadius(20))
         .wrap(
-          WidgetModifierConfig.defaultText(
-            TextStyler.fontSize(16).fontWeight(.bold).color(Colors.white),
+          .defaultText(
+            .fontSize(16).fontWeight(.bold).color(Colors.white),
           ).align(alignment: .center),
         )
         .animate(.spring(300.ms));

diff --git a/packages/mix_docs_preview/lib/guides/styling/preview_1.dart b/packages/mix_docs_preview/lib/guides/styling/preview_1.dart
@@ -30,7 +30,7 @@ class Example extends StatelessWidget {
     final labelStyle = TextStyler().color(Colors.white).fontSize(14);
 
     return Row(
-      mainAxisAlignment: MainAxisAlignment.center,
+      mainAxisAlignment: .center,
       spacing: 16,
       children: [
         Box(

diff --git a/packages/mix_docs_preview/lib/homepage/buttons_showcase.dart b/packages/mix_docs_preview/lib/homepage/buttons_showcase.dart
@@ -36,7 +36,7 @@ class Example extends StatelessWidget {
 
     return Center(
       child: Row(
-        mainAxisSize: MainAxisSize.min,
+        mainAxisSize: .min,
         children: [
           Pressable(
             onPress: () {},

diff --git a/packages/mix_docs_preview/lib/homepage/hero_classic.dart b/packages/mix_docs_preview/lib/homepage/hero_classic.dart
@@ -24,13 +24,13 @@ class _HeroButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // #docregion style
-    final style = RemixButtonStyler()
-        .color(const Color(0xFF00EB03))
-        .labelColor(const Color(0xFF05040A))
+    final style = ButtonStyler()
+        .color(Colors.greenAccent.shade400)
+        .labelColor(Colors.black)
         .paddingX(22)
         .paddingY(11)
-        .borderRadiusAll(const Radius.circular(10))
-        .onHovered(.color(const Color(0xFF33FF36)));
+        .borderRadius(.circular(10))
+        .onHovered(.color(Colors.lightGreenAccent.shade400));
     // #enddocregion style
 
     return RemixButton(label: 'Get started', onPressed: () {}, style: style);

diff --git a/packages/mix_docs_preview/lib/homepage/hero_gradient.dart b/packages/mix_docs_preview/lib/homepage/hero_gradient.dart
@@ -24,18 +24,19 @@ class _HeroButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // #docregion style
-    final style = RemixButtonStyler()
-        .gradient(
-          LinearGradientMix(
-            begin: .topLeft,
-            end: .bottomRight,
-            colors: const [Color(0xFF00EB03), Color(0xFF8B5CF6)],
-          ),
+    final style = ButtonStyler()
+        .linearGradient(
+          begin: .topLeft,
+          end: .bottomRight,
+          colors: [
+            Colors.greenAccent.shade400,
+            Colors.deepPurpleAccent.shade200,
+          ],
         )
-        .labelColor(const Color(0xFF05040A))
+        .labelColor(Colors.black)
         .paddingX(22)
         .paddingY(11)
-        .borderRadiusAll(const Radius.circular(12));
+        .borderRadius(.circular(12));
     // #enddocregion style
 
     return RemixButton(label: 'Get started', onPressed: () {}, style: style);

diff --git a/packages/mix_docs_preview/lib/homepage/hero_neon.dart b/packages/mix_docs_preview/lib/homepage/hero_neon.dart
@@ -24,14 +24,14 @@ class _HeroButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // #docregion style
-    final style = RemixButtonStyler()
-        .color(const Color(0xFF0A0014))
-        .labelColor(const Color(0xFF00F0FF))
+    final style = ButtonStyler()
+        .color(Colors.black)
+        .labelColor(Colors.cyanAccent.shade400)
         .paddingX(24)
         .paddingY(11)
-        .borderRadiusAll(const Radius.circular(2))
-        .borderAll(color: const Color(0xFF00F0FF), width: 1)
-        .shadowOnly(color: const Color(0xFFFF00E5), blurRadius: 22);
+        .borderRadius(.circular(2))
+        .border(.color(Colors.cyanAccent.shade400).width(1))
+        .shadow(.color(Colors.purpleAccent.shade400).blurRadius(22));
     // #enddocregion style
 
     return RemixButton(label: 'GET STARTED', onPressed: () {}, style: style);

diff --git a/packages/mix_docs_preview/lib/multi_view_app.dart b/packages/mix_docs_preview/lib/multi_view_app.dart
@@ -1,5 +1,3 @@
-import 'dart:ui' as ui;
-
 import 'package:flutter/widgets.dart';
 
 import 'multi_view_stub.dart'
@@ -83,7 +81,7 @@ class _PreviewView extends StatelessWidget {
     return ColoredBox(
       color: const Color(0x00000000),
       child: Directionality(
-        textDirection: ui.TextDirection.ltr,
+        textDirection: .ltr,
         child: MediaQuery.fromView(
           view: view,
           // Provide WidgetsLocalizations (required by framework widgets such