diff --git a/components/HomeContent.tsx b/components/HomeContent.tsx
index 56df0f02..1654c0d0 100644
--- a/components/HomeContent.tsx
+++ b/components/HomeContent.tsx
@@ -148,11 +148,10 @@ export const HomeContent = () => {
Without Mix
diff --git a/components/RemixHome.tsx b/components/RemixHome.tsx
index 64bb617b..bf18d366 100644
--- 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
index ace8a73a..706b94cf 100644
--- 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
index a66b8b8f..aeb94f92 100644
--- 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
index 957db2d5..e619ac40 100644
--- 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
index fe7ccf8a..420e84f0 100644
--- 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
index 1a911ac6..1ed3975a 100644
--- 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 {
.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
index 50a37054..4e914621 100644
--- 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 {
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 {
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
index 9fb94c56..766c10a9 100644
--- 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
index e3adfd6c..89fdfd69 100644
--- 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
index e848788c..75c59f81 100644
--- 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 {
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
index 57642bc9..1ad2ad1d 100644
--- 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 {
.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
index 3a5c2736..dbb37dc2 100644
--- 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 {
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
index 9032aa2a..6d8a500e 100644
--- 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
index 2e9a9028..f3f9920f 100644
--- 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
index 6b7821af..73898729 100644
--- 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
index 156289d8..8f4befba 100644
--- 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
index 90ce9878..cfc6a134 100644
--- 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
index 8130455a..1e2b285a 100644
--- 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
index 6dcb23ff..bd0677a5 100644
--- 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
diff --git a/packages/mix_docs_preview/lib/overview/comparison/preview_0.dart b/packages/mix_docs_preview/lib/overview/comparison/preview_0.dart
index 5eb06232..ead8fcf2 100644
--- a/packages/mix_docs_preview/lib/overview/comparison/preview_0.dart
+++ b/packages/mix_docs_preview/lib/overview/comparison/preview_0.dart
@@ -13,10 +13,7 @@ class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
- child: Row(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [CustomMixWidget()],
- ),
+ child: Row(mainAxisAlignment: .center, children: [CustomMixWidget()]),
);
}
}
@@ -93,17 +90,17 @@ class _CustomFlutterWidgetState extends State {
child: AnimatedContainer(
duration: _duration,
curve: _curve,
- padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+ padding: .symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: bgColor,
- borderRadius: BorderRadius.circular(10),
+ borderRadius: .circular(10),
border: Border.all(color: borderColor),
),
child: Text(
'Click me',
style: TextStyle(
fontSize: 16,
- fontWeight: FontWeight.w500,
+ fontWeight: .w500,
color: accentColor,
),
),
diff --git a/packages/mix_docs_preview/lib/preview_registry.dart b/packages/mix_docs_preview/lib/preview_registry.dart
index 89af4da6..9ab470c3 100644
--- a/packages/mix_docs_preview/lib/preview_registry.dart
+++ b/packages/mix_docs_preview/lib/preview_registry.dart
@@ -742,13 +742,13 @@ class _UnknownPreview extends StatelessWidget {
return Center(
child: Padding(
- padding: const EdgeInsets.all(16),
+ padding: const .all(16),
child: Text(
'Unknown previewId: $sanitizedId\n\n'
'Available previewIds:\n'
'${PreviewRegistry.availablePreviewIds.join('\n')}',
style: const TextStyle(color: Color(0xFFEF4444), fontSize: 14),
- textAlign: TextAlign.center,
+ textAlign: .center,
),
),
);
@@ -771,9 +771,9 @@ class _ErrorPreview extends StatelessWidget {
Widget build(BuildContext context) {
return Center(
child: Padding(
- padding: const EdgeInsets.all(16),
+ padding: const .all(16),
child: Column(
- mainAxisSize: MainAxisSize.min,
+ mainAxisSize: .min,
spacing: 8,
children: [
const Text(
@@ -781,7 +781,7 @@ class _ErrorPreview extends StatelessWidget {
style: TextStyle(
color: Color(0xFFEF4444),
fontSize: 16,
- fontWeight: FontWeight.bold,
+ fontWeight: .bold,
),
),
Text(
@@ -791,8 +791,8 @@ class _ErrorPreview extends StatelessWidget {
Text(
error.toString(),
style: const TextStyle(color: Color(0xFFEF4444), fontSize: 12),
- textAlign: TextAlign.center,
- overflow: TextOverflow.ellipsis,
+ textAlign: .center,
+ overflow: .ellipsis,
maxLines: 5,
),
],
diff --git a/packages/mix_docs_preview/lib/remix/components/accordion.dart b/packages/mix_docs_preview/lib/remix/components/accordion.dart
index 1e9ad972..a447237e 100644
--- a/packages/mix_docs_preview/lib/remix/components/accordion.dart
+++ b/packages/mix_docs_preview/lib/remix/components/accordion.dart
@@ -55,7 +55,7 @@ class _AccordionPreviewState extends State {
RemixAccordionGroup(
controller: controller,
child: ColumnBox(
- style: FlexBoxStyler().spacing(16),
+ style: FlexBoxStyler.spacing(16),
children: [
FortalAccordion.surface(
value: 'accordion1',
diff --git a/packages/mix_docs_preview/lib/remix/components/popover.dart b/packages/mix_docs_preview/lib/remix/components/popover.dart
index 6154e99e..3019274d 100644
--- a/packages/mix_docs_preview/lib/remix/components/popover.dart
+++ b/packages/mix_docs_preview/lib/remix/components/popover.dart
@@ -35,7 +35,7 @@ class PopoverPreview extends StatelessWidget {
positioning: const OverlayPositionConfig(
targetAnchor: .bottomCenter,
followerAnchor: .topCenter,
- offset: Offset(0, 8),
+ offset: .new(0, 8),
),
popoverChild: const SizedBox(
width: 220,
@@ -50,7 +50,7 @@ class PopoverPreview extends StatelessWidget {
),
),
child: const Padding(
- padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+ padding: .symmetric(horizontal: 16, vertical: 10),
child: Text('Account'),
),
);
diff --git a/packages/mix_docs_preview/lib/remix/components/tabs.dart b/packages/mix_docs_preview/lib/remix/components/tabs.dart
index 4d313e57..f3f6b727 100644
--- a/packages/mix_docs_preview/lib/remix/components/tabs.dart
+++ b/packages/mix_docs_preview/lib/remix/components/tabs.dart
@@ -60,7 +60,7 @@ class _TabsPreviewState extends State {
child: FortalTabView(
tabId: 'tab1',
child: Padding(
- padding: EdgeInsets.all(16),
+ padding: .all(16),
child: Align(
alignment: .topLeft,
child: Text('Content for Tab 1'),
@@ -72,7 +72,7 @@ class _TabsPreviewState extends State {
child: FortalTabView(
tabId: 'tab2',
child: Padding(
- padding: EdgeInsets.all(16),
+ padding: .all(16),
child: Align(
alignment: .topLeft,
child: Text('Content for Tab 2'),
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
index f1d37dc0..6e993fe2 100644
--- 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
@@ -16,7 +16,11 @@ void main() {
class Example extends StatelessWidget {
const Example({super.key});
- Widget _buildButton(String label, BoxStyler boxStyle, TextStyler textStyle) {
+ Widget _buildButton({
+ required String label,
+ required BoxStyler boxStyle,
+ required TextStyler textStyle,
+ }) {
return Pressable(
onPress: () {},
child: Box(
@@ -32,28 +36,25 @@ class Example extends StatelessWidget {
mainAxisSize: .min,
children: [
_buildButton(
- 'Filled',
- BoxStyler()
- .color(Colors.blueAccent)
- .padding(.horizontal(24).vertical(12))
- .borderRadius(.circular(8)),
- TextStyler().color(Colors.white).fontSize(16).fontWeight(.w500),
+ label: 'Filled',
+ boxStyle: .color(
+ Colors.blueAccent,
+ ).padding(.horizontal(24).vertical(12)).borderRadius(.circular(8)),
+ textStyle: .color(Colors.white).fontSize(16).fontWeight(.w500),
),
const SizedBox(height: 12),
_buildButton(
- 'Outlined',
- BoxStyler()
- .color(Colors.transparent)
+ label: 'Outlined',
+ boxStyle: .color(Colors.transparent)
.border(.color(Colors.blueAccent).width(1.5))
.padding(.horizontal(24).vertical(12))
.borderRadius(.circular(8)),
- TextStyler().color(Colors.blueAccent).fontSize(16).fontWeight(.w500),
+ textStyle: .color(Colors.blueAccent).fontSize(16).fontWeight(.w500),
),
const SizedBox(height: 12),
_buildButton(
- 'Elevated',
- BoxStyler()
- .color(Colors.blueAccent)
+ label: 'Elevated',
+ boxStyle: .color(Colors.blueAccent)
.padding(.horizontal(24).vertical(12))
.borderRadius(.circular(8))
.shadow(
@@ -61,20 +62,17 @@ class Example extends StatelessWidget {
Colors.blueAccent.shade700.withValues(alpha: 0.5),
).offset(x: 0, y: 4).blurRadius(8),
),
- TextStyler().color(Colors.white).fontSize(16).fontWeight(.w500),
+ textStyle: .color(Colors.white).fontSize(16).fontWeight(.w500),
),
const SizedBox(height: 12),
_buildButton(
- 'Link',
- BoxStyler()
- .color(Colors.transparent)
- .padding(.horizontal(24).vertical(12))
- .borderRadius(.circular(8)),
- TextStyler()
- .color(Colors.blueAccent)
- .fontSize(16)
- .fontWeight(.w500)
- .decoration(.underline),
+ label: 'Link',
+ boxStyle: .color(
+ Colors.transparent,
+ ).padding(.horizontal(24).vertical(12)).borderRadius(.circular(8)),
+ textStyle: .color(
+ Colors.blueAccent,
+ ).fontSize(16).fontWeight(.w500).decoration(.underline),
),
const SizedBox(height: 12),
Pressable(
diff --git a/packages/mix_docs_preview/lib/widgets/stack/layered_boxes.dart b/packages/mix_docs_preview/lib/widgets/stack/layered_boxes.dart
index 1ab6ed2d..eaf5d984 100644
--- a/packages/mix_docs_preview/lib/widgets/stack/layered_boxes.dart
+++ b/packages/mix_docs_preview/lib/widgets/stack/layered_boxes.dart
@@ -15,7 +15,7 @@ class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
final flexStyle = StackBoxStyler(
- constraints: .new().height(100).width(100),
+ constraints: .square(100),
stackAlignment: .bottomCenter,
);
@@ -29,14 +29,14 @@ class Example extends StatelessWidget {
Box(
style: BoxStyler.color(
Colors.black,
- ).height(15).width(100).wrap(.new().align(alignment: .center)),
+ ).height(15).width(100).wrap(.align(alignment: .center)),
),
Box(
style: BoxStyler.color(Colors.grey.shade100)
.height(100)
.width(100)
.border(.color(Colors.black).width(20))
- .wrap(.new().scale(0.50, 0.50)),
+ .wrap(.scale(x: 0.50, y: 0.50)),
),
],
);
diff --git a/packages/mix_docs_preview/pubspec.lock b/packages/mix_docs_preview/pubspec.lock
index fc6078fc..3f3e4b38 100644
--- a/packages/mix_docs_preview/pubspec.lock
+++ b/packages/mix_docs_preview/pubspec.lock
@@ -183,8 +183,8 @@ packages:
dependency: "direct main"
description:
path: "packages/remix"
- ref: fbfc069509ca955a459fcdc6b7de083201cbf2ca
- resolved-ref: fbfc069509ca955a459fcdc6b7de083201cbf2ca
+ ref: bc95c45d5e5ddd269c83c3ede2c30a900882bf0e
+ resolved-ref: bc95c45d5e5ddd269c83c3ede2c30a900882bf0e
url: "https://github.com/btwld/remix.git"
source: git
version: "1.0.0-beta.1"
diff --git a/packages/mix_docs_preview/pubspec.yaml b/packages/mix_docs_preview/pubspec.yaml
index a2fee3b1..71a04bfd 100644
--- a/packages/mix_docs_preview/pubspec.yaml
+++ b/packages/mix_docs_preview/pubspec.yaml
@@ -17,7 +17,7 @@ dependencies:
git:
url: https://github.com/btwld/remix.git
path: packages/remix
- ref: fbfc069509ca955a459fcdc6b7de083201cbf2ca
+ ref: bc95c45d5e5ddd269c83c3ede2c30a900882bf0e
dev_dependencies:
flutter_test:
diff --git a/src/content/documentation/mix/ecosystem/mix-tailwinds.mdx b/src/content/documentation/mix/ecosystem/mix-tailwinds.mdx
index ebba1813..00265cce 100644
--- a/src/content/documentation/mix/ecosystem/mix-tailwinds.mdx
+++ b/src/content/documentation/mix/ecosystem/mix-tailwinds.mdx
@@ -310,7 +310,8 @@ Div(classNames: 'flex flex-col md:flex-row gap-4', children: [...])
```dart
Div(
- classNames: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white px-4 py-2 rounded-lg',
+ classNames:
+ 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white px-4 py-2 rounded-lg',
child: Span(text: 'Click me'),
)
```
@@ -381,7 +382,7 @@ TwScope(
fontSize: 16,
lineHeight: 1.5,
letterSpacing: 0,
- fontWeight: FontWeight.w400,
+ fontWeight: .w400,
),
),
child: MyApp(),
diff --git a/src/content/documentation/mix/guides/animations.mdx b/src/content/documentation/mix/guides/animations.mdx
index 9c37c26d..9dc4a157 100644
--- a/src/content/documentation/mix/guides/animations.mdx
+++ b/src/content/documentation/mix/guides/animations.mdx
@@ -39,16 +39,16 @@ All curve configs take a `duration` and an optional `delay`:
```dart
// Standard easing — good default for most transitions
-.ease(300.ms)
+final AnimationConfig ease = .ease(300.ms);
// Starts fast, decelerates to a stop — natural for elements settling into place
-.decelerate(200.ms)
+final AnimationConfig decelerate = .decelerate(200.ms);
// Smooth sinusoidal ease-out
-.easeOutSine(400.ms)
+final AnimationConfig easeOutSine = .easeOutSine(400.ms);
// With a delay before starting
-.easeInOut(500.ms, delay: 200.ms)
+final AnimationConfig easeInOut = .easeInOut(500.ms, delay: 200.ms);
```
Available curves include: `linear`, `ease`, `easeIn`, `easeOut`, `easeInOut`, `decelerate`, `bounceIn`, `bounceOut`, `elasticOut`, and many more — each matching a Flutter `Curves` constant.
@@ -59,14 +59,20 @@ Springs produce natural, physics-driven motion. Mix offers three ways to configu
```dart
// Duration-based spring — set duration and bounciness (0 = no bounce, 1 = very bouncy)
-.spring(800.ms, bounce: 0.6)
+final AnimationConfig durationSpring = .spring(800.ms, bounce: 0.6);
// Damping-ratio spring — ratio of 1.0 is critically damped (no overshoot),
// below 1.0 oscillates, above 1.0 is overdamped
-.springWithDampingRatio(800.ms, ratio: 0.3)
+final AnimationConfig dampingRatioSpring = .springWithDampingRatio(
+ dampingRatio: 0.3,
+);
// Raw physics spring — direct control over mass, stiffness, and damping force
-.springDescription(mass: 1.0, stiffness: 180.0, damping: 12.0)
+final AnimationConfig physicsSpring = .springDescription(
+ mass: 1.0,
+ stiffness: 180.0,
+ damping: 12.0,
+);
```
---
@@ -144,7 +150,10 @@ final box = BoxStyler()
.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),
@@ -219,7 +228,7 @@ Several tracks run in parallel to create one looping animation. Since no `trigge
This example shows two advanced patterns:
- **Custom tweens:** The color track passes `tweenBuilder: ColorTween.new` so Mix can interpolate between `Color` values correctly. You can use any `Tween` subclass this way.
-- **`.wrap()` for widget-level effects:** Opacity cannot be interpolated as a style property, so `.wrap(WidgetModifierConfig.opacity(...))` wraps the widget in Flutter's `Opacity` widget. The `.transform()` call similarly applies a `Matrix4` scale — useful when you need to animate a raw transform matrix rather than using the `.scale()` shorthand.
+- **`.wrap()` for widget-level effects:** Opacity cannot be interpolated as a style property, so `.wrap(.opacity(...))` wraps the widget in Flutter's `Opacity` widget. The `.transform()` call similarly applies a `Matrix4` scale — useful when you need to animate a raw transform matrix rather than using the `.scale()` shorthand.
```dart
final box = BoxStyler()
diff --git a/src/content/documentation/mix/guides/common-patterns.mdx b/src/content/documentation/mix/guides/common-patterns.mdx
index b2b1439a..d190b298 100644
--- a/src/content/documentation/mix/guides/common-patterns.mdx
+++ b/src/content/documentation/mix/guides/common-patterns.mdx
@@ -18,14 +18,13 @@ Making a styled container respond to taps, hovers, and focus in plain Flutter me
```dart
PressableBox(
onPress: () => print('tapped'),
- style: BoxStyler()
- .padding(.horizontal(24).vertical(12))
- .borderRadius(.circular(8))
- .color(Colors.blue)
- .onHovered(.color(Colors.blue.shade700))
- .onPressed(.color(Colors.blue.shade900).scale(0.97))
- .onDisabled(.color(Colors.grey.shade300))
- .animate(.ease(150.ms)),
+ style: .padding(.horizontal(24).vertical(12))
+ .borderRadius(.circular(8))
+ .color(Colors.blue)
+ .onHovered(.color(Colors.blue.shade700))
+ .onPressed(.color(Colors.blue.shade900).scale(0.97))
+ .onDisabled(.color(Colors.grey.shade300))
+ .animate(.ease(150.ms)),
child: StyledText(
'Submit',
style: TextStyler()
@@ -132,7 +131,7 @@ MixScope(
$spacingMd: 16.0,
},
radii: {
- $radiusMd: Radius.circular(8),
+ $radiusMd: .circular(8),
},
child: MyApp(),
)
diff --git a/src/content/documentation/mix/guides/design-token.mdx b/src/content/documentation/mix/guides/design-token.mdx
index 0edab785..a60f2b01 100644
--- a/src/content/documentation/mix/guides/design-token.mdx
+++ b/src/content/documentation/mix/guides/design-token.mdx
@@ -52,7 +52,7 @@ MixScope(
$spacingMd: 16.0,
},
radii: {
- $radiusMd: Radius.circular(8),
+ $radiusMd: .circular(8),
},
child: MaterialApp(home: MyHomePage()),
);
@@ -171,9 +171,15 @@ The most common reason to reach for a context token is **bridging Material's the
```dart
// Map Material's ColorScheme into Mix tokens — declared once, app-wide.
-final $primary = ContextToken((context) => Theme.of(context).colorScheme.primary);
-final $surface = ContextToken((context) => Theme.of(context).colorScheme.surface);
-final $onSurface = ContextToken((context) => Theme.of(context).colorScheme.onSurface);
+final $primary = ContextToken(
+ (context) => Theme.of(context).colorScheme.primary,
+);
+final $surface = ContextToken(
+ (context) => Theme.of(context).colorScheme.surface,
+);
+final $onSurface = ContextToken(
+ (context) => Theme.of(context).colorScheme.onSurface,
+);
// Use them like any other token — they track the active ThemeData automatically.
final cardStyle = BoxStyler()
@@ -197,8 +203,12 @@ A matching entry in `MixScope` still wins, so the resolver acts as a context-der
```dart
MixScope(
- tokens: {$primary: Colors.green}, // overrides the resolver for this subtree
- child: Box(style: BoxStyler().color($primary())),
+ tokens: {
+ $primary: Colors.green,
+ }, // overrides the resolver for this subtree
+ child: Box(
+ style: BoxStyler().color($primary()),
+ ),
);
```
diff --git a/src/content/documentation/mix/guides/directives.mdx b/src/content/documentation/mix/guides/directives.mdx
index 0badc019..b2fdbeee 100644
--- a/src/content/documentation/mix/guides/directives.mdx
+++ b/src/content/documentation/mix/guides/directives.mdx
@@ -189,7 +189,7 @@ final class ReverseStringDirective extends Directive {
extension ReverseTextDirective on TextStyler {
TextStyler reverse() {
return merge(
- TextStyler(textDirectives: [const ReverseStringDirective()]),
+ .textDirective(const ReverseStringDirective()),
);
}
}
diff --git a/src/content/documentation/mix/guides/dynamic-styling.mdx b/src/content/documentation/mix/guides/dynamic-styling.mdx
index da41e99a..a2ae442c 100644
--- a/src/content/documentation/mix/guides/dynamic-styling.mdx
+++ b/src/content/documentation/mix/guides/dynamic-styling.mdx
@@ -35,14 +35,14 @@ Styles are meant to be reused. When you add a variant to an existing style, it m
```dart
final styleA = BoxStyler()
- .color(Colors.red)
- .height(100)
- .width(100)
- .borderRadius(.circular(10))
- .onHovered(
- .color(Colors.blue)
- .width(200)
- );
+ .color(Colors.red)
+ .height(100)
+ .width(100)
+ .borderRadius(.circular(10))
+ .onHovered(
+ .color(Colors.blue)
+ .width(200),
+ );
final styleB = styleA.onHovered(.color(Colors.green));
```
@@ -51,10 +51,10 @@ final styleB = styleA.onHovered(.color(Colors.green));
```dart
BoxStyler()
- .color(Colors.green)
- .height(100)
- .width(200)
- .borderRadius(.circular(10));
+ .color(Colors.green)
+ .height(100)
+ .width(200)
+ .borderRadius(.circular(10));
```
Hover over each box below to see the difference — `styleA` turns blue while `styleB` turns green, but both expand to 200 width:
@@ -70,15 +70,15 @@ You can combine multiple conditions by nesting variants. For example, different
```dart
final hoverStyle = BoxStyler()
- .onDark(.color(Colors.blue))
- .onLight(.color(Colors.green));
+ .onDark(.color(Colors.blue))
+ .onLight(.color(Colors.green));
final style = BoxStyler()
- .color(Colors.red)
- .height(100)
- .width(100)
- .borderRadius(.circular(10))
- .onHovered(hoverStyle);
+ .color(Colors.red)
+ .height(100)
+ .width(100)
+ .borderRadius(.circular(10))
+ .onHovered(hoverStyle);
```
When hovered in dark mode, the color is blue. When hovered in light mode, the color is green. The base color (red) applies when not hovered. Toggle the mode and hover to see the difference:
@@ -99,7 +99,7 @@ Context variants are applied **after** all regular style properties. This means
final style = BoxStyler()
.color(Colors.red)
.onHovered(.color(Colors.blue))
- .color(Colors.green); // This overrides the base color, but NOT the hover color
+ .color(Colors.green);
```
To override a property set by a variant, you need another variant:
@@ -143,9 +143,8 @@ Pressable(
// Or use PressableBox for convenience
PressableBox(
onPress: () {},
- style: BoxStyler()
- .color(Colors.grey)
- .onFocused(.color(Colors.blue)),
+ style: .color(Colors.grey)
+ .onFocused(.color(Colors.blue)),
child: Text('Focus me'),
)
```
@@ -207,18 +206,20 @@ PressableBox(
final style = BoxStyler()
.color(Colors.blue)
// Use white color when NOT in dark mode
- .onNot(ContextVariant.brightness(.dark), .color(Colors.white));
+ .onNot(.brightness(.dark), .color(Colors.white));
```
You can negate any variant — widget states, breakpoints, platforms, and more:
```dart
// Only apply a shadow when NOT on mobile
-final style = BoxStyler()
- .onNot(ContextVariant.mobile(), .shadow(
- color: Colors.black26,
- blurRadius: 10,
- ));
+final style = BoxStyler().onNot(
+ .mobile(),
+ .shadow(
+ color: Colors.black26,
+ blurRadius: 10,
+ ),
+);
```
#### `onBuilder` — fully dynamic variants
diff --git a/src/content/documentation/mix/guides/styling.mdx b/src/content/documentation/mix/guides/styling.mdx
index 8b38d53d..da947fbf 100644
--- a/src/content/documentation/mix/guides/styling.mdx
+++ b/src/content/documentation/mix/guides/styling.mdx
@@ -50,7 +50,7 @@ final rowStyle = FlexBoxStyler()
.spacing(12)
.padding(.all(16))
.color(Colors.grey.shade100);
-
+
FlexBox(style: rowStyle, children: [...]);
```
@@ -110,9 +110,9 @@ Styles can adapt to user interactions and context using **variants**. Instead of
```dart
final button = BoxStyler()
- .color(Colors.blue)
- .onHovered(.color(Colors.blue.shade700))
- .onDark(.color(Colors.blue.shade200));
+ .color(Colors.blue)
+ .onHovered(.color(Colors.blue.shade700))
+ .onDark(.color(Colors.blue.shade200));
```
Variants are covered in depth in the [Dynamic Styling](/documentation/mix/guides/dynamic-styling) guide.
diff --git a/src/content/documentation/mix/guides/widget-modifiers.mdx b/src/content/documentation/mix/guides/widget-modifiers.mdx
index f036cd3e..329e7c1c 100644
--- a/src/content/documentation/mix/guides/widget-modifiers.mdx
+++ b/src/content/documentation/mix/guides/widget-modifiers.mdx
@@ -104,10 +104,12 @@ If the default pipeline doesn't fit your use case, you can override it with `.wr
final style = BoxStyler()
.wrap(.opacity(0.5))
.wrap(.padding(.all(8)))
- .wrap(.orderOfModifiers([
- OpacityModifier, // Apply opacity first (innermost)
- PaddingModifier, // Then padding (outermost)
- ]));
+ .wrap(
+ .orderOfModifiers([
+ OpacityModifier, // Apply opacity first (innermost)
+ PaddingModifier, // Then padding (outermost)
+ ]),
+ );
```
Your custom order takes priority. Any modifiers not listed in your custom order fall back to their default position.
@@ -126,7 +128,9 @@ MixScope(
ClipRRectModifier,
OpacityModifier,
],
- colors: { /* ... */ },
+ colors: {
+ // ...
+ },
child: MyApp(),
);
```
@@ -196,7 +200,7 @@ class OpacityModifierMix extends ModifierMix {
const OpacityModifierMix.create({this.opacity});
OpacityModifierMix({double? opacity})
- : this.create(opacity: Prop.maybe(opacity));
+ : this.create(opacity: Prop.maybe(opacity));
@override
OpacityModifier resolve(BuildContext context) {
diff --git a/src/content/documentation/mix/overview/comparison.mdx b/src/content/documentation/mix/overview/comparison.mdx
index e7c4a2f0..20f504b5 100644
--- a/src/content/documentation/mix/overview/comparison.mdx
+++ b/src/content/documentation/mix/overview/comparison.mdx
@@ -36,7 +36,8 @@ class CustomMixWidget extends StatelessWidget {
.animate(.easeInOut(100.ms))
.scale(1)
.onHovered(
- .color(accentColor.withValues(alpha: 0.0)).border(.color(accentColor)),
+ .color(accentColor.withValues(alpha: 0.0))
+ .border(.color(accentColor)),
)
.onPressed(.scale(0.96));
@@ -98,17 +99,17 @@ class _CustomFlutterWidgetState extends State {
child: AnimatedContainer(
duration: _duration,
curve: _curve,
- padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+ padding: .symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: bgColor,
- borderRadius: BorderRadius.circular(10),
+ borderRadius: .circular(10),
border: Border.all(color: borderColor),
),
child: Text(
'Click me',
style: TextStyle(
fontSize: 16,
- fontWeight: FontWeight.w500,
+ fontWeight: .w500,
color: accentColor,
),
),
diff --git a/src/content/documentation/mix/overview/getting-started.mdx b/src/content/documentation/mix/overview/getting-started.mdx
index 143622d4..2b611cb5 100644
--- a/src/content/documentation/mix/overview/getting-started.mdx
+++ b/src/content/documentation/mix/overview/getting-started.mdx
@@ -56,7 +56,11 @@ class Example extends StatelessWidget {
.color(Colors.blue)
.alignment(.center)
.borderRadius(.circular(12))
- .border(.color(Colors.black).width(1).style(.solid));
+ .border(
+ .color(Colors.black)
+ .width(1)
+ .style(.solid),
+ );
TextStyler get _text => TextStyler().color(Colors.white).fontSize(18);
@@ -75,8 +79,8 @@ Extract styles into top-level variables and reuse them across widgets. You can a
```dart
final primaryCard = BoxStyler()
- .color(Colors.blue)
- .borderRadius(.circular(12));
+ .color(Colors.blue)
+ .borderRadius(.circular(12));
final box = Box(style: primaryCard, child: StyledText('Primary'));
diff --git a/src/content/documentation/mix/overview/introduction.mdx b/src/content/documentation/mix/overview/introduction.mdx
index ef888ec3..4a5a7604 100644
--- a/src/content/documentation/mix/overview/introduction.mdx
+++ b/src/content/documentation/mix/overview/introduction.mdx
@@ -89,7 +89,7 @@ MixScope(
$primaryColor: Colors.blue,
},
radii: {
- $borderRadius: Radius.circular(8),
+ $borderRadius: .circular(8),
},
child: MyApp(),
);
diff --git a/src/content/documentation/mix/overview/migration.mdx b/src/content/documentation/mix/overview/migration.mdx
index 089a4a88..20c2f14c 100644
--- a/src/content/documentation/mix/overview/migration.mdx
+++ b/src/content/documentation/mix/overview/migration.mdx
@@ -96,14 +96,18 @@ The `$with` namespace is replaced with the `.wrap()` method or shorthand modifie
// v1.x
MixTheme(
data: MixThemeData(
- colors: {primaryColor: Colors.blue},
+ colors: {
+ primaryColor: Colors.blue,
+ },
),
child: MyApp(),
);
// v2.0
MixScope(
- colors: {primaryColor: Colors.blue},
+ colors: {
+ primaryColor: Colors.blue,
+ },
child: MyApp(),
);
```
diff --git a/src/content/documentation/mix/overview/utility-first.mdx b/src/content/documentation/mix/overview/utility-first.mdx
index 6457d771..4e80f604 100644
--- a/src/content/documentation/mix/overview/utility-first.mdx
+++ b/src/content/documentation/mix/overview/utility-first.mdx
@@ -62,7 +62,8 @@ You can create your own shorthand by defining helper functions or extending `Box
```dart
// Custom helper function
-BoxStyler accentBorder(Color color) => BoxStyler().border(.top(color: color, width: 2));
+BoxStyler accentBorder(Color color) =>
+ BoxStyler().border(.top(color: color, width: 2));
// Use the helper
accentBorder(Colors.red);
diff --git a/src/content/documentation/mix/tutorials/controlling-widget-state.mdx b/src/content/documentation/mix/tutorials/controlling-widget-state.mdx
index 7c558388..d0294ef4 100644
--- a/src/content/documentation/mix/tutorials/controlling-widget-state.mdx
+++ b/src/content/documentation/mix/tutorials/controlling-widget-state.mdx
@@ -150,12 +150,12 @@ class _ToggleButtonState extends State {
.variant(
ContextVariant.widgetState(.selected),
.color(Colors.blue.shade500)
- .border(.color(Colors.blue.shade600).width(2))
- .shadow(
- .color(Colors.blue.shade200)
- .blurRadius(10)
- .spreadRadius(2),
- ),
+ .border(.color(Colors.blue.shade600).width(2))
+ .shadow(
+ .color(Colors.blue.shade200)
+ .blurRadius(10)
+ .spreadRadius(2),
+ ),
);
final textStyle = TextStyler()
diff --git a/src/content/documentation/mix/tutorials/creating-a-widget.mdx b/src/content/documentation/mix/tutorials/creating-a-widget.mdx
index 619c32d4..e79aae1d 100644
--- a/src/content/documentation/mix/tutorials/creating-a-widget.mdx
+++ b/src/content/documentation/mix/tutorials/creating-a-widget.mdx
@@ -175,35 +175,51 @@ Beyond the generated `container()`, `icon()`, and `label()` setters, you can add
```dart
ButtonStyler backgroundColor(Color value) {
- return merge(ButtonStyler(container: FlexBoxStyler.color(value)));
+ return merge(
+ .container(
+ .color(value),
+ ),
+ );
}
ButtonStyler textColor(Color value) {
- return merge(ButtonStyler(label: TextStyler.color(value)));
+ return merge(
+ .label(
+ .color(value),
+ ),
+ );
}
ButtonStyler iconColor(Color value) {
- return merge(ButtonStyler(icon: IconStyler.color(value)));
+ return merge(
+ .icon(
+ .color(value),
+ ),
+ );
}
ButtonStyler borderRadius(double value) {
return merge(
- ButtonStyler(
- container: FlexBoxStyler().borderRadius(.circular(value)),
+ .container(
+ .borderRadius(.circular(value)),
),
);
}
ButtonStyler padding({required double x, required double y}) {
return merge(
- ButtonStyler(
- container: FlexBoxStyler().padding(.horizontal(x).vertical(y)),
+ .container(
+ .padding(.horizontal(x).vertical(y)),
),
);
}
ButtonStyler scale(double value) {
- return merge(ButtonStyler(container: FlexBoxStyler().scale(value)));
+ return merge(
+ .container(
+ .scale(value),
+ ),
+ );
}
}
```
@@ -266,36 +282,33 @@ enum ButtonVariant {
.backgroundColor(Colors.blueAccent)
.textColor(Colors.white)
.iconColor(Colors.white);
-
+
case ButtonVariant.outlined:
return ButtonStyler()
.container(
- FlexBoxStyler()
- .color(Colors.transparent)
- .border(.color(Colors.blueAccent).width(1.5)),
+ .color(Colors.transparent)
+ .border(.color(Colors.blueAccent).width(1.5)),
)
.textColor(Colors.blueAccent)
.iconColor(Colors.blueAccent);
-
+
case ButtonVariant.elevated:
return ButtonStyler()
.backgroundColor(Colors.blueAccent)
.textColor(Colors.white)
.iconColor(Colors.white)
.container(
- FlexBoxStyler().shadow(
- BoxShadowMix()
- .color(Colors.blueAccent.shade700)
- .offset(x: 0, y: 5),
+ .shadow(
+ .color(Colors.blueAccent.shade700)
+ .offset(x: 0, y: 5),
),
);
-
+
case ButtonVariant.link:
return ButtonStyler()
.container(
- FlexBoxStyler()
- .border(.style(.none))
- .color(Colors.transparent),
+ .border(.style(.none))
+ .color(Colors.transparent),
)
.textColor(Colors.blueAccent)
.iconColor(Colors.blueAccent);
@@ -319,7 +332,8 @@ ButtonStyler buttonStyle(ButtonStyler? style, ButtonVariant? variant) {
.mainAxisSize(.min);
final label = TextStyler().style(
- TextStyleMix().fontSize(16).fontWeight(.w500),
+ .fontSize(16)
+ .fontWeight(.w500),
);
final icon = IconStyler().size(18);
@@ -330,18 +344,18 @@ ButtonStyler buttonStyle(ButtonStyler? style, ButtonVariant? variant) {
.icon(icon)
.merge(variant?.style)
.onPressed(
- ButtonStyler()
- .container(FlexBoxStyler().scale(0.9)),
+ .container(
+ .scale(0.9),
+ ),
)
.onDisabled(
- ButtonStyler()
- .container(FlexBoxStyler().color(Colors.blueGrey.shade100))
- .label(
- TextStyler().style(
- TextStyleMix().color(Colors.blueGrey.shade700),
- ),
- )
- .icon(IconStyler().color(Colors.blueGrey.shade700)),
+ .container(.color(Colors.blueGrey.shade100))
+ .label(
+ .style(
+ .color(Colors.blueGrey.shade700),
+ ),
+ )
+ .icon(.color(Colors.blueGrey.shade700)),
)
.merge(style);
}
@@ -481,10 +495,10 @@ class ButtonExampleScreen extends StatelessWidget {
title: const Text('Button Examples'),
),
body: Padding(
- padding: const EdgeInsets.all(16.0),
+ padding: const .all(16),
child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- crossAxisAlignment: CrossAxisAlignment.stretch,
+ mainAxisAlignment: .center,
+ crossAxisAlignment: .stretch,
children: [
FilledButton(
label: 'Filled Button',
@@ -512,7 +526,7 @@ class ButtonExampleScreen extends StatelessWidget {
const SizedBox(height: 20),
const Text(
'Disabled State:',
- style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+ style: TextStyle(fontSize: 18, fontWeight: .bold),
),
const SizedBox(height: 10),
FilledButton(
diff --git a/src/content/documentation/mix/tutorials/creating-context-variants.mdx b/src/content/documentation/mix/tutorials/creating-context-variants.mdx
index b7ab0b97..485815be 100644
--- a/src/content/documentation/mix/tutorials/creating-context-variants.mdx
+++ b/src/content/documentation/mix/tutorials/creating-context-variants.mdx
@@ -50,8 +50,9 @@ BoxStyler()
.color(Colors.red)
.size(100, 100)
.variant(
- ContextVariant('custom_flag', (context) =>
- CustomInheritedWidget.of(context)?.flag ?? false,
+ ContextVariant(
+ 'custom_flag',
+ (context) => CustomInheritedWidget.of(context)?.flag ?? false,
),
.color(Colors.blue),
);
@@ -76,8 +77,9 @@ extension WidgetStateVariantMixinX, S extends Spec>
on WidgetStateVariantMixin {
T onCustomFlag(T style) {
return variant(
- ContextVariant('custom_flag', (context) =>
- CustomInheritedWidget.of(context)?.flag ?? false,
+ ContextVariant(
+ 'custom_flag',
+ (context) => CustomInheritedWidget.of(context)?.flag ?? false,
),
style,
);
@@ -141,7 +143,7 @@ class _ExampleState extends State {
ContextVariant('custom_flag', (context) {
return CustomInheritedWidget.of(context)?.flag ?? false;
}),
- BoxStyler().color(Colors.blue),
+ .color(Colors.blue),
);
return CustomInheritedWidget(
diff --git a/src/content/documentation/mix/tutorials/theming.mdx b/src/content/documentation/mix/tutorials/theming.mdx
index c468bd2d..130cf552 100644
--- a/src/content/documentation/mix/tutorials/theming.mdx
+++ b/src/content/documentation/mix/tutorials/theming.mdx
@@ -127,44 +127,44 @@ Here's the `LightBlueTheme`:
```dart
class LightBlueTheme {
static Map get colors => {
- CustomColorTokens.primary.token: const Color(0xFF0093B9),
- CustomColorTokens.onPrimary.token: const Color(0xFFFAFAFA),
- CustomColorTokens.surface.token: const Color(0xFFFAFAFA),
- CustomColorTokens.onSurface.token: const Color(0xFF141C24),
- CustomColorTokens.onSurfaceVariant.token: const Color(0xFF405473),
+ CustomColorTokens.primary.token: Colors.cyan.shade700,
+ CustomColorTokens.onPrimary.token: Colors.grey.shade50,
+ CustomColorTokens.surface.token: Colors.grey.shade50,
+ CustomColorTokens.onSurface.token: Colors.blueGrey.shade900,
+ CustomColorTokens.onSurfaceVariant.token: Colors.blueGrey.shade700,
};
static Map get textStyles => {
- CustomTextStyleTokens.headline1.token: const TextStyle(
+ CustomTextStyleTokens.headline1.token: const .new(
fontSize: 22,
- fontWeight: FontWeight.bold,
+ fontWeight: .bold,
fontFamily: 'Roboto',
),
- CustomTextStyleTokens.headline2.token: const TextStyle(
+ CustomTextStyleTokens.headline2.token: const .new(
fontSize: 18,
- fontWeight: FontWeight.bold,
+ fontWeight: .bold,
fontFamily: 'Roboto',
),
- CustomTextStyleTokens.button.token: const TextStyle(
+ CustomTextStyleTokens.button.token: const .new(
fontSize: 14,
- fontWeight: FontWeight.bold,
+ fontWeight: .bold,
fontFamily: 'Roboto',
),
- CustomTextStyleTokens.body.token: const TextStyle(
+ CustomTextStyleTokens.body.token: const .new(
fontSize: 16,
- fontWeight: FontWeight.normal,
+ fontWeight: .normal,
fontFamily: 'Roboto',
),
- CustomTextStyleTokens.callout.token: const TextStyle(
+ CustomTextStyleTokens.callout.token: const .new(
fontSize: 14,
- fontWeight: FontWeight.normal,
+ fontWeight: .normal,
fontFamily: 'Roboto',
),
};
static Map get radii => {
- MyThemeRadiusToken.large.token: const Radius.circular(100),
- MyThemeRadiusToken.medium.token: const Radius.circular(12),
+ MyThemeRadiusToken.large.token: const .circular(100),
+ MyThemeRadiusToken.medium.token: const .circular(12),
};
static Map get spaces => {
@@ -179,44 +179,44 @@ And the `DarkPurpleTheme`:
```dart
class DarkPurpleTheme {
static Map get colors => {
- CustomColorTokens.primary.token: const Color(0xFF617AFA),
- CustomColorTokens.onPrimary.token: const Color(0xFFFAFAFA),
- CustomColorTokens.surface.token: const Color(0xFF1C1C21),
- CustomColorTokens.onSurface.token: const Color(0xFFFAFAFA),
- CustomColorTokens.onSurfaceVariant.token: const Color(0xFFD6D6DE),
+ CustomColorTokens.primary.token: Colors.indigoAccent.shade200,
+ CustomColorTokens.onPrimary.token: Colors.grey.shade50,
+ CustomColorTokens.surface.token: Colors.grey.shade900,
+ CustomColorTokens.onSurface.token: Colors.grey.shade50,
+ CustomColorTokens.onSurfaceVariant.token: Colors.grey.shade300,
};
static Map get textStyles => {
- CustomTextStyleTokens.headline1.token: const TextStyle(
+ CustomTextStyleTokens.headline1.token: const .new(
fontSize: 22,
- fontWeight: FontWeight.bold,
+ fontWeight: .bold,
fontFamily: 'Courier',
),
- CustomTextStyleTokens.headline2.token: const TextStyle(
+ CustomTextStyleTokens.headline2.token: const .new(
fontSize: 18,
- fontWeight: FontWeight.bold,
+ fontWeight: .bold,
fontFamily: 'Courier',
),
- CustomTextStyleTokens.button.token: const TextStyle(
+ CustomTextStyleTokens.button.token: const .new(
fontSize: 14,
- fontWeight: FontWeight.bold,
+ fontWeight: .bold,
fontFamily: 'Courier',
),
- CustomTextStyleTokens.body.token: const TextStyle(
+ CustomTextStyleTokens.body.token: const .new(
fontSize: 16,
- fontWeight: FontWeight.normal,
+ fontWeight: .normal,
fontFamily: 'Courier',
),
- CustomTextStyleTokens.callout.token: const TextStyle(
+ CustomTextStyleTokens.callout.token: const .new(
fontSize: 14,
- fontWeight: FontWeight.normal,
+ fontWeight: .normal,
fontFamily: 'Courier',
),
};
static Map get radii => {
- MyThemeRadiusToken.large.token: const Radius.circular(12),
- MyThemeRadiusToken.medium.token: const Radius.circular(8),
+ MyThemeRadiusToken.large.token: const .circular(12),
+ MyThemeRadiusToken.medium.token: const .circular(8),
};
static Map get spaces => {
@@ -402,17 +402,17 @@ class _ThemingTutorialAppState extends State {
@override
Widget build(BuildContext context) {
// Select theme based on state
- final colors = _isDarkPurpleTheme
- ? DarkPurpleTheme.colors
+ final colors = _isDarkPurpleTheme
+ ? DarkPurpleTheme.colors
: LightBlueTheme.colors;
final textStyles = _isDarkPurpleTheme
? DarkPurpleTheme.textStyles
: LightBlueTheme.textStyles;
- final radii = _isDarkPurpleTheme
- ? DarkPurpleTheme.radii
+ final radii = _isDarkPurpleTheme
+ ? DarkPurpleTheme.radii
: LightBlueTheme.radii;
- final spaces = _isDarkPurpleTheme
- ? DarkPurpleTheme.spaces
+ final spaces = _isDarkPurpleTheme
+ ? DarkPurpleTheme.spaces
: LightBlueTheme.spaces;
return MixScope(
diff --git a/src/content/documentation/mix/widgets/box.mdx b/src/content/documentation/mix/widgets/box.mdx
index ebeebd28..85fefbf3 100644
--- a/src/content/documentation/mix/widgets/box.mdx
+++ b/src/content/documentation/mix/widgets/box.mdx
@@ -19,7 +19,9 @@ final style = BoxStyler()
.borderRadius(.circular(12))
.padding(.all(16))
.shadow(
- .color(Colors.blue.shade200).blurRadius(12).offset(x: 0, y: 4),
+ .color(Colors.blue.shade200)
+ .blurRadius(12)
+ .offset(x: 0, y: 4),
);
final label = TextStyler()
@@ -27,7 +29,10 @@ final label = TextStyler()
.fontSize(18)
.fontWeight(.w600);
-Box(style: style, child: StyledText('Hello Mix', style: label))
+Box(
+ style: style,
+ child: StyledText('Hello Mix', style: label),
+)
```
The preview below shows this style applied.
diff --git a/src/content/documentation/mix/widgets/flexbox.mdx b/src/content/documentation/mix/widgets/flexbox.mdx
index b114a369..3ba61e98 100644
--- a/src/content/documentation/mix/widgets/flexbox.mdx
+++ b/src/content/documentation/mix/widgets/flexbox.mdx
@@ -29,7 +29,8 @@ final iconStyle = IconStyler()
.color(Colors.cyan.shade600)
.size(18);
-final textStyle = TextStyler().fontSize(16)
+final textStyle = TextStyler()
+ .fontSize(16)
.fontWeight(.w500)
.color(Colors.cyan.shade700);
diff --git a/src/content/documentation/mix/widgets/pressable.mdx b/src/content/documentation/mix/widgets/pressable.mdx
index cf24796e..9c421c58 100644
--- a/src/content/documentation/mix/widgets/pressable.mdx
+++ b/src/content/documentation/mix/widgets/pressable.mdx
@@ -17,12 +17,17 @@ final buttonStyle = BoxStyler()
.padding(.symmetric(horizontal: 24, vertical: 12))
.borderRadius(.circular(10))
.shadow(
- .color(Colors.blue.shade200).blurRadius(8).offset(x: 0, y: 2),
+ .color(Colors.blue.shade200)
+ .blurRadius(8)
+ .offset(x: 0, y: 2),
)
.onHovered(
- .color(Colors.blue.shade700).shadow(
- .color(Colors.blue.shade300).blurRadius(12).offset(x: 0, y: 4),
- ),
+ .color(Colors.blue.shade700)
+ .shadow(
+ .color(Colors.blue.shade300)
+ .blurRadius(12)
+ .offset(x: 0, y: 4),
+ ),
)
.onPressed(.color(Colors.blue.shade900).scale(0.97))
.animate(.ease(150.ms));
@@ -102,14 +107,13 @@ When `mouseCursor` is null, `Pressable` chooses `SystemMouseCursors.click` when
`PressableBox` combines the functionality of `Pressable` with `Box` styling capabilities, providing a pressable area with customizable visual styling.
```dart
- PressableBox(
- style: BoxStyler()
- .color(Colors.blue)
- .padding(.all(16))
- .borderRadius(.circular(8)),
- onPress: () => print('PressableBox pressed'),
- child: StyledText('Styled Button'),
- );
+PressableBox(
+ style: .color(Colors.blue)
+ .padding(.all(16))
+ .borderRadius(.circular(8)),
+ onPress: () => print('PressableBox pressed'),
+ child: StyledText('Styled Button'),
+);
```
### PressableBox Constructor
@@ -134,14 +138,13 @@ When `mouseCursor` is null, `Pressable` chooses `SystemMouseCursors.click` when
```dart
PressableBox(
- style: BoxStyler()
- .color(Colors.blue)
- .padding(.all(16))
- .borderRadius(.circular(8))
- .onPressed(.color(Colors.red))
- .onHovered(.color(Colors.green))
- .onFocused(.border(.color(Colors.white).width(2)))
- .onDisabled(.color(Colors.grey)),
+ style: .color(Colors.blue)
+ .padding(.all(16))
+ .borderRadius(.circular(8))
+ .onPressed(.color(Colors.red))
+ .onHovered(.color(Colors.green))
+ .onFocused(.border(.color(Colors.white).width(2)))
+ .onDisabled(.color(Colors.grey)),
onPress: () => print('Interactive button pressed'),
child: StyledText('Interactive Button'),
);
diff --git a/src/content/documentation/mix/widgets/stack.mdx b/src/content/documentation/mix/widgets/stack.mdx
index e68e1003..9da35a68 100644
--- a/src/content/documentation/mix/widgets/stack.mdx
+++ b/src/content/documentation/mix/widgets/stack.mdx
@@ -13,29 +13,39 @@ You can use the `StackBoxStyler` API to fluently compose your layout and decorat
```dart
final flexStyle = StackBoxStyler(
- constraints: .new().height(100).width(100),
+ constraints: .square(100),
stackAlignment: .bottomCenter,
);
-final boxStyle = BoxStyler().color(Colors.deepOrange).height(100).width(100);
+final boxStyle = BoxStyler()
+ .color(Colors.deepOrange)
+ .height(100)
+ .width(100);
StackBox(
style: flexStyle,
children: [
Box(style: boxStyle),
- Box(style: BoxStyler().color(Colors.grey.shade300).height(50).width(100)),
Box(
- style: BoxStyler().color(Colors.black)
+ style: BoxStyler()
+ .color(Colors.grey.shade300)
+ .height(50)
+ .width(100),
+ ),
+ Box(
+ style: BoxStyler()
+ .color(Colors.black)
.height(15)
.width(100)
- .wrap(.new().align(alignment: .center)),
+ .wrap(.align(alignment: .center)),
),
Box(
- style: BoxStyler().color(Colors.grey.shade100)
+ style: BoxStyler()
+ .color(Colors.grey.shade100)
.height(100)
.width(100)
.border(.color(Colors.black).width(20))
- .wrap(.new().scale(0.50, 0.50)),
+ .wrap(.scale(x: 0.50, y: 0.50)),
),
],
)
diff --git a/src/content/documentation/mix/widgets/stylewidgets.mdx b/src/content/documentation/mix/widgets/stylewidgets.mdx
index d9e68900..430d768d 100644
--- a/src/content/documentation/mix/widgets/stylewidgets.mdx
+++ b/src/content/documentation/mix/widgets/stylewidgets.mdx
@@ -18,8 +18,8 @@ As already mentioned, the `Box` widget is like Flutter's `Container`, it can be
```dart
final style = BoxStyler()
- .size(100, 100)
- .color(Colors.blue);
+ .size(100, 100)
+ .color(Colors.blue);
Box(
style: style,
@@ -46,8 +46,8 @@ FlexBox(
```dart
final style = TextStyler()
- .color(Colors.blue)
- .fontSize(20);
+ .color(Colors.blue)
+ .fontSize(20);
StyledText(
'Hello, World!',
@@ -60,8 +60,8 @@ StyledText(
```dart
final iconStyle = IconStyler()
- .color(Colors.blue)
- .size(30);
+ .color(Colors.blue)
+ .size(30);
StyledIcon(icon: Icons.ac_unit, style: iconStyle);
```
@@ -71,8 +71,8 @@ StyledIcon(icon: Icons.ac_unit, style: iconStyle);
```dart
final imageStyle = ImageStyler()
- .width(200)
- .height(150);
+ .width(200)
+ .height(150);
StyledImage(
image: NetworkImage('https://example.com/image.png'),
@@ -87,7 +87,9 @@ All Styler classes support a **callable pattern** — you can call a styler inst
```dart
// BoxStyler creates a Box when called
final box = BoxStyler().color(Colors.blue).paddingAll(16);
-box(child: Text('Hello')); // Equivalent to Box(style: box, child: Text('Hello'))
+box(
+ child: Text('Hello'),
+); // Equivalent to Box(style: box, child: Text('Hello'))
// TextStyler creates a StyledText when called
final text = TextStyler().fontSize(18).color(Colors.white);
@@ -95,7 +97,9 @@ text('Hello'); // Equivalent to StyledText('Hello', style: text)
// IconStyler creates a StyledIcon when called
final icon = IconStyler().size(24).color(Colors.red);
-icon(icon: Icons.star); // Equivalent to StyledIcon(icon: Icons.star, style: icon)
+icon(
+ icon: Icons.star,
+); // Equivalent to StyledIcon(icon: Icons.star, style: icon)
```
This is useful for concise widget composition, especially when building reusable components.
@@ -114,12 +118,11 @@ Pressable(
```
```dart
- PressableBox(
- style: BoxStyler()
- .color(Colors.blue)
- .padding(.all(16))
- .borderRadius(.circular(8)),
- onPress: () => print('PressableBox pressed'),
- child: StyledText('Styled Button'),
- );
+PressableBox(
+ style: .color(Colors.blue)
+ .padding(.all(16))
+ .borderRadius(.circular(8)),
+ onPress: () => print('PressableBox pressed'),
+ child: StyledText('Styled Button'),
+);
```
diff --git a/src/content/documentation/remix/components/accordion.mdx b/src/content/documentation/remix/components/accordion.mdx
index 6294cdbe..f0a09588 100644
--- a/src/content/documentation/remix/components/accordion.mdx
+++ b/src/content/documentation/remix/components/accordion.mdx
@@ -66,7 +66,8 @@ class _AccordionExampleState extends State {
leadingIcon: Icons.help_outline,
style: itemStyle,
child: const Text(
- 'Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.'),
+ 'Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.',
+ ),
),
RemixAccordion(
value: 'accordion3',
@@ -74,7 +75,8 @@ class _AccordionExampleState extends State {
leadingIcon: Icons.help_outline,
style: itemStyle,
child: const Text(
- 'You can track your order status in the "My Orders" section of your account.'),
+ 'You can track your order status in the "My Orders" section of your account.',
+ ),
),
],
),
@@ -83,35 +85,32 @@ class _AccordionExampleState extends State {
RemixAccordionStyler get itemStyle {
return RemixAccordionStyler()
- .content(BoxStyler().paddingX(16).paddingTop(8))
- .wrap(.clipRRect(borderRadius: BorderRadiusGeometryMix.circular(8)))
+ .content(.padding(.horizontal(16).top(8)))
+ .wrap(.clipRRect(borderRadius: .circular(8)))
.paddingX(16)
.paddingY(14)
.borderRounded(8)
.onHovered(.color(Colors.grey.shade100))
.decoration(
- BoxDecorationMix(
- color: Colors.white,
- border: BoxBorderMix.all(
- BorderSideMix().color(Colors.grey.shade300).width(1),
- ),
- borderRadius: BorderRadiusMix.circular(8),
- ),
+ BoxDecorationMix.color(Colors.white)
+ .border(
+ .color(Colors.grey.shade300)
+ .width(1),
+ )
+ .borderRadius(.circular(8)),
)
.trigger(
- FlexBoxStyler()
- .direction(Axis.horizontal)
- .mainAxisAlignment(MainAxisAlignment.spaceBetween)
- .spacing(12),
+ .direction(.horizontal)
+ .mainAxisAlignment(.spaceBetween)
+ .spacing(12),
)
- .leadingIcon(IconStyler().color(Colors.grey.shade700).size(20))
+ .leadingIcon(.color(Colors.grey.shade700).size(20))
.title(
- TextStyler()
- .color(Colors.grey.shade900)
- .fontWeight(FontWeight.w500)
- .fontSize(14),
+ .color(Colors.grey.shade900)
+ .fontWeight(.w500)
+ .fontSize(14),
)
- .trailingIcon(IconStyler().color(Colors.grey.shade700).size(20));
+ .trailingIcon(.color(Colors.grey.shade700).size(20));
}
}
```
@@ -349,7 +348,7 @@ Sets trigger border radius.
Sets trigger foreground decoration.
-#### `transform(Matrix4 value, {AlignmentGeometry alignment = Alignment.center})`
+#### `transform(Matrix4 value, {AlignmentGeometry alignment = .center})`
Applies a matrix transform to the trigger.
diff --git a/src/content/documentation/remix/components/avatar.mdx b/src/content/documentation/remix/components/avatar.mdx
index bddfeaa1..47b9f2ac 100644
--- a/src/content/documentation/remix/components/avatar.mdx
+++ b/src/content/documentation/remix/components/avatar.mdx
@@ -34,7 +34,7 @@ class AvatarExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
- mainAxisAlignment: MainAxisAlignment.center,
+ mainAxisAlignment: .center,
spacing: 16,
children: [
RemixAvatar(
@@ -59,7 +59,7 @@ class AvatarExample extends StatelessWidget {
.shapeCircle()
.wrap(.clipOval())
.foregroundColor(Colors.white)
- .labelFontWeight(FontWeight.bold)
+ .labelFontWeight(.bold)
.labelFontSize(15);
}
@@ -361,4 +361,3 @@ Sets icon shadows
#### `iconShadow(ShadowMix value)`
Sets single icon shadow
-
diff --git a/src/content/documentation/remix/components/badge.mdx b/src/content/documentation/remix/components/badge.mdx
index 78caead0..9c55a95e 100644
--- a/src/content/documentation/remix/components/badge.mdx
+++ b/src/content/documentation/remix/components/badge.mdx
@@ -34,7 +34,7 @@ class BadgeExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
- mainAxisAlignment: MainAxisAlignment.center,
+ mainAxisAlignment: .center,
spacing: 16,
children: [
RemixBadge(
@@ -54,14 +54,13 @@ class BadgeExample extends StatelessWidget {
.size(24, 24)
.wrap(.clipOval())
.label(
- TextStyler()
- .fontSize(15)
- .textAlign(TextAlign.center)
- .fontFeatures([const FontFeature.tabularFigures()]),
+ .fontSize(15)
+ .textAlign(.center)
+ .fontFeatures([const .tabularFigures()]),
)
.foregroundColor(Colors.greenAccent.shade700)
.labelColor(Colors.white)
- .labelFontWeight(FontWeight.bold)
+ .labelFontWeight(.bold)
.labelFontSize(15);
}
@@ -70,10 +69,9 @@ class BadgeExample extends StatelessWidget {
.size(24, 24)
.wrap(.clipOval())
.label(
- TextStyler()
- .fontSize(15)
- .textAlign(TextAlign.center)
- .fontFeatures([const FontFeature.tabularFigures()]),
+ .fontSize(15)
+ .textAlign(.center)
+ .fontFeatures([const .tabularFigures()]),
)
.foregroundColor(Colors.redAccent)
.wrap(.iconTheme(color: Colors.white, size: 15));
@@ -266,4 +264,3 @@ Sets label/text decoration color
#### `call({Key? key, String? label, Widget? child, RemixBadgeLabelBuilder? labelBuilder})`
Creates a `RemixBadge` widget with this style applied.
-
diff --git a/src/content/documentation/remix/components/button.mdx b/src/content/documentation/remix/components/button.mdx
index 678de9ba..b78b8f76 100644
--- a/src/content/documentation/remix/components/button.mdx
+++ b/src/content/documentation/remix/components/button.mdx
@@ -35,7 +35,7 @@ class ButtonExample extends StatelessWidget {
Widget build(BuildContext context) {
return Center(
child: Row(
- mainAxisAlignment: MainAxisAlignment.center,
+ mainAxisAlignment: .center,
spacing: 16,
children: [
RemixButton(
@@ -53,55 +53,51 @@ class ButtonExample extends StatelessWidget {
);
}
- RemixButtonStyler get destructiveStyle {
- return RemixButtonStyler()
+ ButtonStyler get destructiveStyle {
+ return ButtonStyler()
.paddingX(16)
.paddingY(10)
- .backgroundColor(const Color(0xFF4D1919))
+ .backgroundColor(Colors.red.shade900)
.shadow(
- BoxShadowMix().color(Colors.redAccent).blurRadius(10).spreadRadius(0),
+ .color(Colors.redAccent)
+ .blurRadius(10)
+ .spreadRadius(0),
)
.label(
- TextStyler().uppercase().color(Colors.redAccent),
+ .uppercase()
+ .color(Colors.redAccent),
)
.shapeBeveledRectangle(
- borderRadius: BorderRadiusMix()
- .bottomLeft(const Radius.circular(12))
- .topRight(const Radius.circular(12)),
- side: BorderSideMix.width(1).color(Colors.redAccent),
+ borderRadius: .bottomLeft(.circular(12))
+ .topRight(.circular(12)),
+ side: .width(1).color(Colors.redAccent),
)
.wrap(.scale(x: 1, y: 1))
- .onPressed(
- .scale(0.90),
- )
+ .onPressed(.scale(0.90))
.onHovered(
- .color(const Color(0xFF732D2D))
- .animate(AnimationConfig.spring(300.ms)),
+ .color(Colors.red.shade800)
+ .animate(.spring(300.ms)),
)
- .onFocused(
- .color(const Color(0xFF732D2D)),
- );
+ .onFocused(.color(Colors.red.shade800));
}
- RemixButtonStyler get successStyle {
+ ButtonStyler get successStyle {
return destructiveStyle
- .backgroundColor(const Color.fromARGB(255, 15, 61, 15))
- .label(TextStyler().uppercase().color(Colors.greenAccent))
+ .backgroundColor(Colors.green.shade900)
+ .label(
+ .uppercase()
+ .color(Colors.greenAccent),
+ )
.shapeBeveledRectangle(
- side: BorderSideMix().color(Colors.greenAccent),
+ side: .color(Colors.greenAccent),
)
.shadow(
- BoxShadowMix()
- .color(Colors.greenAccent)
- .blurRadius(10)
- .spreadRadius(0),
+ .color(Colors.greenAccent)
+ .blurRadius(10)
+ .spreadRadius(0),
)
- .onHovered(
- .color(const Color(0xFF357857)),
- )
- .onFocused(
- .color(const Color(0xFF357857)),
- );
+ .onHovered(.color(Colors.green.shade700))
+ .onFocused(.color(Colors.green.shade700));
}
}
```
@@ -183,7 +179,7 @@ const RemixButton({
String? semanticHint,
bool excludeSemantics = false,
MouseCursor mouseCursor = SystemMouseCursors.click,
- RemixButtonStyler style = const RemixButtonStyler.create(),
+ ButtonStyler style = const ButtonStyler.create(),
RemixButtonSpec? styleSpec,
})
```
@@ -193,7 +189,7 @@ const RemixButton({
## Properties
### Widget Properties
-#### `style` → `RemixButtonStyler`
+#### `style` → `ButtonStyler`
Optional. The style configuration for the button. Customize colors, sizing, spacing, and state-based styling.
@@ -492,4 +488,3 @@ Sets spinner animation to normal (1000ms)
#### `spinnerSlow()`
Sets spinner animation to slow (1500ms)
-
diff --git a/src/content/documentation/remix/components/callout.mdx b/src/content/documentation/remix/components/callout.mdx
index 86b1b09a..f69cbe6a 100644
--- a/src/content/documentation/remix/components/callout.mdx
+++ b/src/content/documentation/remix/components/callout.mdx
@@ -47,19 +47,17 @@ class CalloutExample extends StatelessWidget {
.height(60)
.paddingRight(12)
.icon(
- IconStyler()
- .size(24)
- .color(Colors.white)
- .wrap(
- .box(
- BoxStyler()
- .color(Colors.blue.shade900)
- .paddingX(12)
- .height(double.infinity),
- ),
- ),
+ .size(24)
+ .color(Colors.white)
+ .wrap(
+ .box(
+ .color(Colors.blue.shade900)
+ .paddingX(12)
+ .height(double.infinity),
+ ),
+ ),
)
- .mainAxisSize(MainAxisSize.min);
+ .mainAxisSize(.min);
}
}
```
@@ -268,4 +266,3 @@ Sets single icon shadow
#### `call({Key? key, String? text, IconData? icon, Widget? child})`
Creates a `RemixCallout` widget with this style applied.
-
diff --git a/src/content/documentation/remix/components/card.mdx b/src/content/documentation/remix/components/card.mdx
index 750a0a6d..542f3269 100644
--- a/src/content/documentation/remix/components/card.mdx
+++ b/src/content/documentation/remix/components/card.mdx
@@ -45,10 +45,10 @@ class CardExample extends StatelessWidget {
RemixCardStyler get style {
return RemixCardStyler()
.size(300, 200)
- .backgroundColor(const Color(0xFF111827))
- .padding(EdgeInsetsGeometryMix.all(24))
- .borderRadiusAll(const Radius.circular(4))
- .borderAll(color: Colors.grey.shade300);
+ .backgroundColor(Colors.blueGrey.shade900)
+ .padding(.all(24))
+ .borderRadius(.circular(4))
+ .border(.color(Colors.grey.shade300));
}
}
```
@@ -167,4 +167,3 @@ Applies a matrix transformation to the component.
#### `call({Key? key, Widget? child})`
Creates a `RemixCard` widget with this style applied.
-
diff --git a/src/content/documentation/remix/components/checkbox.mdx b/src/content/documentation/remix/components/checkbox.mdx
index 5cc96089..eb95f169 100644
--- a/src/content/documentation/remix/components/checkbox.mdx
+++ b/src/content/documentation/remix/components/checkbox.mdx
@@ -54,13 +54,12 @@ class _CheckboxExampleState extends State {
RemixCheckboxStyler get style {
return RemixCheckboxStyler()
.size(24, 24)
- .icon(IconStyler().size(20).color(Colors.white))
+ .icon(.size(20).color(Colors.white))
.onSelected(.color(Colors.grey.shade900))
- .borderRadiusAll(const Radius.circular(3))
+ .borderRadius(.circular(3))
.border(
- BoxBorderMix.all(
- BorderSideMix().color(Colors.black87).width(2),
- ),
+ .color(Colors.black87)
+ .width(2),
);
}
}
@@ -335,4 +334,3 @@ Sets icon shadows
#### `iconShadow(ShadowMix value)`
Sets single icon shadow
-
diff --git a/src/content/documentation/remix/components/dialog.mdx b/src/content/documentation/remix/components/dialog.mdx
index db709fc2..a20cab31 100644
--- a/src/content/documentation/remix/components/dialog.mdx
+++ b/src/content/documentation/remix/components/dialog.mdx
@@ -78,7 +78,8 @@ showRemixAlertDialog(
builder: (context) => Center(
child: FortalDialog(
title: 'Delete project?',
- description: 'This permanently deletes the project and all of its data.',
+ description:
+ 'This permanently deletes the project and all of its data.',
actions: [
FortalButton.ghost(
label: 'Cancel',
@@ -144,7 +145,7 @@ Future showRemixDialog({
bool useRootNavigator = true,
RouteSettings? routeSettings,
Offset? anchorPoint,
- Duration transitionDuration = const Duration(milliseconds: 400),
+ Duration transitionDuration = const .new(milliseconds: 400),
RouteTransitionsBuilder? transitionBuilder,
bool requestFocus = true,
TraversalEdgeBehavior? traversalEdgeBehavior,
@@ -164,7 +165,7 @@ Future showRemixAlertDialog({
bool useRootNavigator = true,
RouteSettings? routeSettings,
Offset? anchorPoint,
- Duration transitionDuration = const Duration(milliseconds: 400),
+ Duration transitionDuration = const .new(milliseconds: 400),
RouteTransitionsBuilder? transitionBuilder,
FocusNode? initialFocusNode,
})
diff --git a/src/content/documentation/remix/components/icon_button.mdx b/src/content/documentation/remix/components/icon_button.mdx
index 663fc097..dc63790f 100644
--- a/src/content/documentation/remix/components/icon_button.mdx
+++ b/src/content/documentation/remix/components/icon_button.mdx
@@ -35,7 +35,7 @@ class IconButtonExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
- mainAxisAlignment: MainAxisAlignment.center,
+ mainAxisAlignment: .center,
spacing: 16,
children: [
RemixIconButton(
@@ -59,13 +59,12 @@ class IconButtonExample extends StatelessWidget {
.iconSize(22)
.size(40, 40)
.backgroundColor(Colors.blueGrey.shade50.withValues(alpha: 0.6))
- .borderAll(color: Colors.blueGrey.shade100, width: 1.5)
- .borderRadiusAll(const Radius.circular(8))
+ .border(.color(Colors.blueGrey.shade100).width(1.5))
+ .borderRadius(.circular(8))
.spinner(
- RemixSpinnerStyler()
- .size(22)
- .strokeWidth(1.3)
- .indicatorColor(Colors.blueGrey.shade600),
+ .size(22)
+ .strokeWidth(1.3)
+ .indicatorColor(Colors.blueGrey.shade600),
)
.onHovered(.color(Colors.blueGrey.shade100.withValues(alpha: 0.4)))
.onPressed(.color(Colors.blueGrey.shade100.withValues(alpha: 0.8)));
@@ -358,4 +357,3 @@ Sets icon shadows
#### `iconShadow(ShadowMix value)`
Sets single icon shadow
-
diff --git a/src/content/documentation/remix/components/menu.mdx b/src/content/documentation/remix/components/menu.mdx
index 09060ee4..2a2a4728 100644
--- a/src/content/documentation/remix/components/menu.mdx
+++ b/src/content/documentation/remix/components/menu.mdx
@@ -62,15 +62,15 @@ class _MenuExampleState extends State {
label: 'Logout',
style: menuItemStyle.onHovered(
.color(Colors.redAccent.withValues(alpha: 0.05))
- .label(TextStyler().color(Colors.redAccent))
- .leadingIcon(IconStyler().color(Colors.redAccent)),
+ .label(.color(Colors.redAccent))
+ .leadingIcon(.color(Colors.redAccent)),
),
),
],
positioning: const OverlayPositionConfig(
- offset: Offset(0, 8),
- followerAnchor: Alignment.topCenter,
- targetAnchor: Alignment.bottomCenter,
+ offset: .new(0, 8),
+ followerAnchor: .topCenter,
+ targetAnchor: .bottomCenter,
),
style: menuStyle,
onSelected: (value) {
@@ -83,43 +83,34 @@ class _MenuExampleState extends State {
RemixMenuStyler get menuStyle {
return RemixMenuStyler()
.trigger(
- RemixMenuTriggerStyler()
- .padding(EdgeInsetsMix.symmetric(horizontal: 14))
- .decoration(
- BoxDecorationMix()
- .color(Colors.white)
- .borderRadius(BorderRadiusMix.all(const Radius.circular(12)))
- .border(BorderMix.all(BorderSideMix(color: Colors.blueGrey.shade100)))
- .boxShadow([
- BoxShadowMix(
- color: Colors.blueGrey.withValues(alpha: 0.1),
- blurRadius: 3,
- offset: const Offset(0, 3),
- ),
+ .padding(.symmetric(horizontal: 14))
+ .decoration(
+ BoxDecorationMix.color(Colors.white)
+ .borderRadius(.circular(12))
+ .border(.color(Colors.blueGrey.shade100))
+ .boxShadow([
+ .color(Colors.blueGrey.withValues(alpha: 0.1))
+ .blurRadius(3)
+ .offset(x: 0, y: 3),
]),
- )
- .constraints(BoxConstraintsMix(minHeight: 40))
- .label(
- TextStyler()
- .color(Colors.blueGrey.shade700)
- .fontWeight(FontWeight.w400),
- ),
+ )
+ .constraints(.minHeight(40))
+ .label(
+ .color(Colors.blueGrey.shade700)
+ .fontWeight(.w400),
+ ),
)
.overlay(
- FlexBoxStyler(
- padding: EdgeInsetsMix.all(12),
- decoration: BoxDecorationMix(
- color: Colors.white,
- borderRadius: BorderRadiusMix.all(const Radius.circular(12)),
- border: BorderMix.all(BorderSideMix(color: Colors.blueGrey.shade100)),
- boxShadow: [
- BoxShadowMix(
- color: Colors.blueGrey.withValues(alpha: 0.1),
- blurRadius: 3,
- offset: const Offset(0, 3),
- ),
- ],
- ),
+ .padding(.all(12))
+ .decoration(
+ BoxDecorationMix.color(Colors.white)
+ .borderRadius(.circular(12))
+ .border(.color(Colors.blueGrey.shade100))
+ .boxShadow([
+ .color(Colors.blueGrey.withValues(alpha: 0.1))
+ .blurRadius(3)
+ .offset(x: 0, y: 3),
+ ]),
),
);
}
@@ -127,10 +118,10 @@ class _MenuExampleState extends State {
RemixMenuItemStyler get menuItemStyle {
return RemixMenuItemStyler()
.paddingAll(6)
- .leadingIcon(IconStyler().size(20).color(Colors.blueGrey.shade800))
+ .leadingIcon(.size(20).color(Colors.blueGrey.shade800))
.spacing(8)
- .borderRadiusAll(const Radius.circular(8))
- .label(TextStyler().color(Colors.blueGrey.shade800))
+ .borderRadius(.circular(8))
+ .label(.color(Colors.blueGrey.shade800))
.onHovered(.color(Colors.blueGrey.shade50));
}
}
diff --git a/src/content/documentation/remix/components/popover.mdx b/src/content/documentation/remix/components/popover.mdx
index f4ee6aa1..6535fac4 100644
--- a/src/content/documentation/remix/components/popover.mdx
+++ b/src/content/documentation/remix/components/popover.mdx
@@ -32,14 +32,14 @@ class AccountPopover extends StatelessWidget {
return FortalPopover(
semanticLabel: 'Show account details',
positioning: const OverlayPositionConfig(
- targetAnchor: Alignment.bottomCenter,
- followerAnchor: Alignment.topCenter,
+ targetAnchor: .bottomCenter,
+ followerAnchor: .topCenter,
),
popoverChild: const SizedBox(
width: 240,
child: Column(
- mainAxisSize: MainAxisSize.min,
- crossAxisAlignment: CrossAxisAlignment.start,
+ mainAxisSize: .min,
+ crossAxisAlignment: .start,
children: [
Text('Signed in as'),
SizedBox(height: 8),
@@ -48,7 +48,7 @@ class AccountPopover extends StatelessWidget {
),
),
child: const Padding(
- padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+ padding: .symmetric(horizontal: 16, vertical: 10),
child: Text('Account'),
),
);
@@ -97,9 +97,9 @@ overlay and can apply an additional offset.
```dart
const OverlayPositionConfig(
- targetAnchor: Alignment.topRight,
- followerAnchor: Alignment.bottomRight,
- offset: Offset(0, -8),
+ targetAnchor: .topRight,
+ followerAnchor: .bottomRight,
+ offset: .new(0, -8),
)
```
@@ -112,11 +112,10 @@ visual styling.
```dart
RemixPopover(
- style: RemixPopoverStyler()
- .paddingAll(16)
- .constraints(BoxConstraintsMix(maxWidth: 320))
- .backgroundColor(Colors.white)
- .borderRadiusAll(12),
+ style: .padding(.all(16))
+ .constraints(.maxWidth(320))
+ .backgroundColor(Colors.white)
+ .borderRadius(.circular(12)),
popoverChild: const Text('Custom popover'),
child: const Text('Open'),
)
diff --git a/src/content/documentation/remix/components/progress.mdx b/src/content/documentation/remix/components/progress.mdx
index 10d6381e..bb403972 100644
--- a/src/content/documentation/remix/components/progress.mdx
+++ b/src/content/documentation/remix/components/progress.mdx
@@ -41,7 +41,7 @@ class ProgressExample extends StatelessWidget {
RemixProgressStyler get style {
return RemixProgressStyler()
- .wrap(.clipRRect(borderRadius: BorderRadiusGeometryMix.circular(10)))
+ .wrap(.clipRRect(borderRadius: .circular(10)))
.trackColor(Colors.grey.shade300)
.indicatorColor(Colors.grey.shade900)
.width(300)
@@ -187,4 +187,3 @@ Applies a matrix transformation to the component.
#### `call({Key? key, required double value})`
Creates a `RemixProgress` widget with this style applied.
-
diff --git a/src/content/documentation/remix/components/radio.mdx b/src/content/documentation/remix/components/radio.mdx
index 53f44628..b3fb89cd 100644
--- a/src/content/documentation/remix/components/radio.mdx
+++ b/src/content/documentation/remix/components/radio.mdx
@@ -48,13 +48,13 @@ class _RadioExampleState extends State {
});
},
child: Column(
- crossAxisAlignment: CrossAxisAlignment.center,
+ crossAxisAlignment: .center,
spacing: 16,
- mainAxisSize: MainAxisSize.min,
+ mainAxisSize: .min,
children: [
Row(
spacing: 8,
- mainAxisSize: MainAxisSize.min,
+ mainAxisSize: .min,
children: [
RemixRadio(value: 'option1', style: style),
const Text('Option 1'),
@@ -62,7 +62,7 @@ class _RadioExampleState extends State {
),
Row(
spacing: 8,
- mainAxisSize: MainAxisSize.min,
+ mainAxisSize: .min,
children: [
RemixRadio(value: 'option2', style: style),
const Text('Option 2'),
@@ -75,42 +75,32 @@ class _RadioExampleState extends State {
RemixRadioStyler get style {
return RemixRadioStyler()
- .borderRadiusAll(const Radius.circular(30))
+ .borderRadius(.circular(30))
.size(22, 22)
.border(
- BoxBorderMix.all(
- BorderSideMix()
- .color(Colors.blueGrey.shade100)
- .width(2.4)
- .strokeAlign(BorderSide.strokeAlignInside),
- ),
+ .color(Colors.blueGrey.shade100)
+ .width(2.4)
+ .strokeAlign(BorderSide.strokeAlignInside),
)
.onHovered(
.shadow(
- BoxShadowMix()
- .color(Colors.blueGrey.shade50.withValues(alpha: 0.7))
- .blurRadius(0)
- .spreadRadius(9),
+ .color(Colors.blueGrey.shade50.withValues(alpha: 0.7))
+ .blurRadius(0)
+ .spreadRadius(9),
),
)
.onPressed(
.border(
- BoxBorderMix.all(
- BorderSideMix()
- .color(Colors.blueGrey.shade100)
- .width(6)
- .strokeAlign(BorderSide.strokeAlignInside),
- ),
+ .color(Colors.blueGrey.shade100)
+ .width(6)
+ .strokeAlign(BorderSide.strokeAlignInside),
),
)
.onSelected(
.border(
- BoxBorderMix.all(
- BorderSideMix()
- .color(Colors.blueAccent.shade700)
- .width(6)
- .strokeAlign(BorderSide.strokeAlignInside),
- ),
+ .color(Colors.blueAccent.shade700)
+ .width(6)
+ .strokeAlign(BorderSide.strokeAlignInside),
),
);
}
@@ -304,4 +294,3 @@ Applies a matrix transformation to the component.
#### `call({required T value, bool enabled = true, bool autofocus = false, bool toggleable = false, FocusNode? focusNode, MouseCursor? mouseCursor})`
Creates a `RemixRadio` widget with this style applied.
-
diff --git a/src/content/documentation/remix/components/select.mdx b/src/content/documentation/remix/components/select.mdx
index 5ac965dd..a81a5861 100644
--- a/src/content/documentation/remix/components/select.mdx
+++ b/src/content/documentation/remix/components/select.mdx
@@ -73,7 +73,7 @@ class _SelectExampleState extends State {
return RemixSelectMenuItemStyler()
.iconSize(16)
.paddingAll(8)
- .borderRadiusAll(const Radius.circular(8))
+ .borderRadius(.circular(8))
.onHovered(.color(Colors.blueGrey.shade50))
.onDisabled(.text(.color(Colors.grey.shade300)));
}
@@ -81,20 +81,18 @@ class _SelectExampleState extends State {
RemixSelectStyler get style {
return RemixSelectStyler()
.trigger(
- RemixSelectTriggerStyler()
- .color(Colors.transparent)
- .borderAll(color: const Color(0xFF898988))
- .paddingY(10)
- .paddingX(12)
- .borderRadiusAll(const Radius.circular(12)),
+ .color(Colors.transparent)
+ .border(.color(Colors.grey.shade600))
+ .paddingY(10)
+ .paddingX(12)
+ .borderRadius(.circular(12)),
)
.menuContainer(
- FlexBoxStyler()
- .width(200)
- .marginY(5)
- .paddingAll(6)
- .color(Colors.white)
- .borderRadiusAll(const Radius.circular(12)),
+ .width(200)
+ .marginY(5)
+ .paddingAll(6)
+ .color(Colors.white)
+ .borderRadius(.circular(12)),
);
}
}
@@ -171,8 +169,8 @@ const RemixSelect({
required List> items,
T? selectedValue,
OverlayPositionConfig positioning = const OverlayPositionConfig(
- targetAnchor: Alignment.bottomCenter,
- followerAnchor: Alignment.topCenter,
+ targetAnchor: .bottomCenter,
+ followerAnchor: .topCenter,
),
ValueChanged? onChanged,
VoidCallback? onOpen,
@@ -590,4 +588,3 @@ Sets item icon shadows.
#### `iconShadow(ShadowMix value)`
Sets single item icon shadow.
-
diff --git a/src/content/documentation/remix/components/slider.mdx b/src/content/documentation/remix/components/slider.mdx
index e2428ccb..88eeac5b 100644
--- a/src/content/documentation/remix/components/slider.mdx
+++ b/src/content/documentation/remix/components/slider.mdx
@@ -56,14 +56,14 @@ class _SliderExampleState extends State {
RemixSliderStyler get style {
return RemixSliderStyler()
- .thumbSize(const Size(24, 24))
+ .thumbSize(const .square(24))
.thumb(
- BoxStyler().shapeCircle().shadow(
- BoxShadowMix()
- .color(Colors.black45)
- .blurRadius(4)
- .offset(const Offset(0, 2)),
- ),
+ .shape(.circle())
+ .shadow(
+ .color(Colors.black45)
+ .blurRadius(4)
+ .offset(x: 0, y: 2),
+ ),
)
.thumbColor(Colors.black)
.thickness(2)
@@ -71,8 +71,8 @@ class _SliderExampleState extends State {
.rangeColor(Colors.black)
.onDisabled(
.trackColor(Colors.grey.shade300)
- .rangeColor(Colors.blueGrey)
- .thumb(.color(Colors.white.withValues(alpha: 0.6))),
+ .rangeColor(Colors.blueGrey)
+ .thumb(.color(Colors.white.withValues(alpha: 0.6))),
);
}
}
@@ -306,4 +306,3 @@ Sets the widget modifier.
#### `call({ ... })`
Creates a RemixSlider widget with this style applied.
-
diff --git a/src/content/documentation/remix/components/spinner.mdx b/src/content/documentation/remix/components/spinner.mdx
index 3b376c88..5a1bf92b 100644
--- a/src/content/documentation/remix/components/spinner.mdx
+++ b/src/content/documentation/remix/components/spinner.mdx
@@ -34,7 +34,7 @@ class SpinnerExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
- mainAxisAlignment: MainAxisAlignment.center,
+ mainAxisAlignment: .center,
spacing: 16,
children: [
RemixSpinner(style: styleDefault),
@@ -159,4 +159,3 @@ Applies widget modifiers such as clipping, opacity, or scaling.
#### `call()`
Creates a `RemixSpinner` widget with this style applied.
-
diff --git a/src/content/documentation/remix/components/switch.mdx b/src/content/documentation/remix/components/switch.mdx
index d99c264c..33c79318 100644
--- a/src/content/documentation/remix/components/switch.mdx
+++ b/src/content/documentation/remix/components/switch.mdx
@@ -62,23 +62,22 @@ class _SwitchExampleState extends State {
.thumbColor(Colors.grey.shade600)
.trackColor(Colors.deepPurpleAccent.shade200)
.size(65, 30)
- .borderRadiusAll(const Radius.circular(40))
+ .borderRadius(.circular(40))
.alignment(
- _selected.value ? Alignment.centerRight : Alignment.centerLeft,
+ _selected.value ? .centerRight : .centerLeft,
)
- .animate(AnimationConfig.easeOut(300.ms))
+ .animate(.easeOut(300.ms))
.thumb(
- BoxStyler()
- .color(Colors.white)
- .size(40, 30)
- .borderRounded(40)
- .scale(0.85)
- .shadowOnly(
- color: Colors.black.withValues(alpha: 0.1),
- offset: const Offset(2, 4),
- blurRadius: 4,
- spreadRadius: 3,
- ),
+ .color(Colors.white)
+ .size(40, 30)
+ .borderRounded(40)
+ .scale(0.85)
+ .shadow(
+ .color(Colors.black.withValues(alpha: 0.1))
+ .offset(x: 2, y: 4)
+ .blurRadius(4)
+ .spreadRadius(3),
+ ),
);
}
}
@@ -265,4 +264,3 @@ Applies a matrix transformation to the component.
#### `call({ ... })`
Creates a `RemixSwitch` widget with this style applied.
-
diff --git a/src/content/documentation/remix/components/tabs.mdx b/src/content/documentation/remix/components/tabs.mdx
index 6e1b359e..d31b6570 100644
--- a/src/content/documentation/remix/components/tabs.mdx
+++ b/src/content/documentation/remix/components/tabs.mdx
@@ -47,13 +47,13 @@ class _TabsExampleState extends State {
selectedTabId: _tab,
onChanged: (id) => setState(() => _tab = id),
child: Column(
- mainAxisSize: MainAxisSize.max,
- crossAxisAlignment: CrossAxisAlignment.stretch,
+ mainAxisSize: .max,
+ crossAxisAlignment: .stretch,
children: [
RemixTabBar(
style: tabBarStyle,
child: Row(
- mainAxisSize: MainAxisSize.max,
+ mainAxisSize: .max,
children: [
RemixTab(tabId: 'tab1', style: tabStyle, label: 'Tab 1'),
const SizedBox(width: 8),
@@ -86,8 +86,8 @@ class _TabsExampleState extends State {
return RemixTabBarStyler()
.paddingAll(4)
.borderRounded(12)
- .color(const Color(0xFFF4F6FF))
- .borderAll(color: Colors.indigo.shade100);
+ .color(Colors.indigo.shade50)
+ .border(.color(Colors.indigo.shade100));
}
RemixTabStyler get tabStyle {
@@ -97,18 +97,18 @@ class _TabsExampleState extends State {
.borderRounded(10)
.color(Colors.transparent)
.labelFontSize(14)
- .labelFontWeight(FontWeight.w600)
+ .labelFontWeight(.w600)
.labelColor(Colors.indigo.shade600)
.iconColor(Colors.indigo.shade500)
.onHovered(
.color(Colors.indigo.shade50)
- .label(.color(Colors.indigo.shade700)),
+ .label(.color(Colors.indigo.shade700)),
)
.onSelected(
.color(Colors.white)
- .borderAll(color: Colors.indigo.shade400, width: 2)
- .label(.color(Colors.indigo.shade700))
- .iconColor(Colors.indigo.shade600),
+ .border(.color(Colors.indigo.shade400).width(2))
+ .label(.color(Colors.indigo.shade700))
+ .iconColor(Colors.indigo.shade600),
);
}
@@ -117,7 +117,7 @@ class _TabsExampleState extends State {
.paddingAll(20)
.borderRounded(14)
.color(Colors.white)
- .borderAll(color: Colors.indigo.shade100);
+ .border(.color(Colors.indigo.shade100));
}
}
```
@@ -187,7 +187,7 @@ const RemixTabs({
NakedTabController? controller,
String? selectedTabId,
ValueChanged? onChanged,
- Axis orientation = Axis.horizontal,
+ Axis orientation = .horizontal,
bool enabled = true,
VoidCallback? onEscapePressed,
})
@@ -319,7 +319,7 @@ Sets tab bar border radius.
Sets a foreground decoration on the tab bar.
-#### `transform(Matrix4 value, {AlignmentGeometry alignment = Alignment.center})`
+#### `transform(Matrix4 value, {AlignmentGeometry alignment = .center})`
Applies a matrix transform to the tab bar.
@@ -387,7 +387,7 @@ Sets tab item decoration.
Sets a foreground decoration on the tab item.
-#### `transform(Matrix4 value, {AlignmentGeometry alignment = Alignment.center})`
+#### `transform(Matrix4 value, {AlignmentGeometry alignment = .center})`
Applies a matrix transform to the tab item.
@@ -543,7 +543,7 @@ Sets tab view border radius.
Sets a foreground decoration on the tab view.
-#### `transform(Matrix4 value, {AlignmentGeometry alignment = Alignment.center})`
+#### `transform(Matrix4 value, {AlignmentGeometry alignment = .center})`
Applies a matrix transform to the tab view.
diff --git a/src/content/documentation/remix/components/textfield.mdx b/src/content/documentation/remix/components/textfield.mdx
index 75673f80..d245b9d9 100644
--- a/src/content/documentation/remix/components/textfield.mdx
+++ b/src/content/documentation/remix/components/textfield.mdx
@@ -56,38 +56,30 @@ class _TextfieldExampleState extends State {
return RemixTextFieldStyler()
.color(Colors.grey.shade800)
.backgroundColor(Colors.white)
- .borderRadiusAll(const Radius.circular(8.0))
+ .borderRadius(.circular(8))
.height(44)
.paddingX(12)
.spacing(8)
.label(
- TextStyler()
- .color(Colors.blueGrey.shade900)
- .fontWeight(FontWeight.w500),
+ .color(Colors.blueGrey.shade900)
+ .fontWeight(.w500),
)
.helperText(
- TextStyler()
- .fontWeight(FontWeight.w300)
- .color(Colors.blueGrey.shade600),
+ .fontWeight(.w300)
+ .color(Colors.blueGrey.shade600),
)
.hintColor(Colors.blueGrey.shade500)
.shadow(
- BoxShadowMix()
- .blurRadius(1)
- .color(Colors.black12)
- .offset(const Offset(0, 1)),
- )
- .border(
- BoxBorderMix.all(BorderSideMix(color: Colors.grey.shade300)),
+ .blurRadius(1)
+ .color(Colors.black12)
+ .offset(x: 0, y: 1),
)
+ .border(.color(Colors.grey.shade300))
.onFocused(
.border(
- BoxBorderMix.all(
- BorderSideMix()
- .color(Colors.deepPurpleAccent)
- .width(3)
- .strokeAlign(BorderSide.strokeAlignCenter),
- ),
+ .color(Colors.deepPurpleAccent)
+ .width(3)
+ .strokeAlign(BorderSide.strokeAlignCenter),
),
);
}
@@ -642,4 +634,3 @@ Sets label/text word spacing
#### `labelDecorationColor(Color value)`
Sets label/text decoration color
-
diff --git a/src/content/documentation/remix/components/toggle.mdx b/src/content/documentation/remix/components/toggle.mdx
index 49efd276..697085a9 100644
--- a/src/content/documentation/remix/components/toggle.mdx
+++ b/src/content/documentation/remix/components/toggle.mdx
@@ -55,15 +55,15 @@ class _ToggleExampleState extends State {
.spacing(6)
.backgroundColor(Colors.grey.shade100)
.foregroundColor(Colors.grey.shade700)
- .borderRadiusAll(const Radius.circular(8))
+ .borderRadius(.circular(8))
.onHovered(.color(Colors.grey.shade200))
.onPressed(.scale(0.93))
.onSelected(
.color(Colors.deepPurple.shade50)
- .label(.color(Colors.deepPurple))
- .iconColor(Colors.deepPurple),
+ .label(.color(Colors.deepPurple))
+ .iconColor(Colors.deepPurple),
)
- .animate(AnimationConfig.easeOut(200.ms));
+ .animate(.easeOut(200.ms));
}
}
```
diff --git a/src/content/documentation/remix/components/toggle_group.mdx b/src/content/documentation/remix/components/toggle_group.mdx
index ff43c28d..44b35e7f 100644
--- a/src/content/documentation/remix/components/toggle_group.mdx
+++ b/src/content/documentation/remix/components/toggle_group.mdx
@@ -115,16 +115,15 @@ RemixToggleGroup(
RemixToggleGroupItem(
value: 'published',
label: 'Published',
- style: RemixToggleGroupItemStyler().foregroundColor(Colors.green),
+ style: .label(.color(Colors.green))
+ .icon(.color(Colors.green)),
),
],
selectedValue: value,
onChanged: onChanged,
- style: RemixToggleGroupStyler().item(
- RemixToggleGroupItemStyler()
- .paddingX(12)
- .paddingY(8)
- .onSelected(.color(Colors.green.shade50)),
+ style: .item(
+ .padding(.horizontal(12).vertical(8))
+ .onSelected(.color(Colors.green.shade50)),
),
)
```
@@ -140,7 +139,7 @@ const RemixToggleGroup({
required T? selectedValue,
ValueChanged? onChanged,
bool enabled = true,
- Axis orientation = Axis.horizontal,
+ Axis orientation = .horizontal,
bool loop = true,
String? semanticLabel,
bool excludeSemantics = false,
diff --git a/src/content/documentation/remix/components/tooltip.mdx b/src/content/documentation/remix/components/tooltip.mdx
index c98c8473..60e4f009 100644
--- a/src/content/documentation/remix/components/tooltip.mdx
+++ b/src/content/documentation/remix/components/tooltip.mdx
@@ -34,7 +34,7 @@ class TooltipExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
- mainAxisAlignment: MainAxisAlignment.center,
+ mainAxisAlignment: .center,
spacing: 24,
children: [
RemixTooltip(
@@ -58,23 +58,27 @@ class TooltipExample extends StatelessWidget {
RemixTooltipStyler get styleDefault {
return RemixTooltipStyler()
- .padding(EdgeInsetsGeometryMix.symmetric(horizontal: 12, vertical: 8))
+ .padding(.symmetric(horizontal: 12, vertical: 8))
.backgroundColor(Colors.black87)
- .borderRadius(BorderRadiusGeometryMix.all(const Radius.circular(6)))
- .wrap(.defaultTextStyle(style: TextStyleMix().color(Colors.white).fontSize(14)));
+ .borderRadius(.circular(6))
+ .wrap(
+ .defaultTextStyle(
+ style: .color(Colors.white).fontSize(14),
+ ),
+ );
}
RemixTooltipStyler get styleFast {
return styleDefault
- .waitDuration(const Duration(milliseconds: 100))
- .showDuration(const Duration(milliseconds: 800)) // touch wait
- .dismissDuration(const Duration(milliseconds: 100)); // hover exit
+ .waitDuration(100.ms)
+ .showDuration(800.ms) // touch wait
+ .dismissDuration(100.ms); // hover exit
}
RemixTooltipStyler get styleSlow {
return styleDefault
- .waitDuration(const Duration(seconds: 1))
- .showDuration(const Duration(seconds: 3));
+ .waitDuration(1.s)
+ .showDuration(3.s);
}
}
@@ -86,12 +90,12 @@ class _TriggerButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
- padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+ padding: const .symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.blue,
- borderRadius: BorderRadius.circular(8),
+ borderRadius: .circular(8),
),
- child: Text(label, style: const TextStyle(color: Colors.white)),
+ child: Text(label, style: const .new(color: Colors.white)),
);
}
}
@@ -263,4 +267,3 @@ Sets the widget modifier.
#### `call({Key? key, required Widget tooltipChild, required Widget child, String? tooltipSemantics, OverlayPositionConfig positioning = const OverlayPositionConfig()})`
Creates a `RemixTooltip` widget with this style applied.
-
diff --git a/src/content/documentation/remix/fortal.mdx b/src/content/documentation/remix/fortal.mdx
index 19e4d265..f80206d8 100644
--- a/src/content/documentation/remix/fortal.mdx
+++ b/src/content/documentation/remix/fortal.mdx
@@ -97,11 +97,11 @@ Fortal is built on a scale-based token system that mirrors Radix's conventions:
Each token is a function on the `FortalTokens` class. Call it from any style:
```dart
-final style = RemixButtonStyler()
- .color(FortalTokens.accent9())
- .paddingAll(FortalTokens.space4())
- .borderRadiusAll(FortalTokens.radius3())
- .label(TextStyler().color(FortalTokens.accentContrast()));
+final style = ButtonStyler()
+ .color(FortalTokens.accent9())
+ .paddingAll(FortalTokens.space4())
+ .borderRadius(.all(FortalTokens.radius3()))
+ .label(.color(FortalTokens.accentContrast()));
```
The `accent9` step is the "solid" color — the strongest fill suitable for primary actions. The 12-step scale maps numbered steps to specific uses:
@@ -126,9 +126,9 @@ Because every `fortal*Styler` returns a regular Remix style, you can chain addit
```dart
final style = fortalButtonStyler(variant: .solid)
- .borderRadiusAll(const Radius.circular(8))
- .paddingX(32)
- .onHovered(.scale(1.05));
+ .borderRadius(.circular(8))
+ .paddingX(32)
+ .onHovered(.scale(1.05));
```
The chain above starts from Fortal's `solid` button, overrides the border radius and horizontal padding, and adds a scale-on-hover modifier. Every other Fortal property — colors, state styling, typography — passes through untouched.
@@ -136,11 +136,11 @@ The chain above starts from Fortal's `solid` button, overrides the border radius
You can also mix Fortal tokens into a completely custom style:
```dart
-final style = RemixButtonStyler()
- .color(FortalTokens.accent9())
- .paddingAll(FortalTokens.space4())
- .borderRadiusAll(FortalTokens.radius3())
- .onHovered(.color(FortalTokens.accent10()));
+final style = ButtonStyler()
+ .color(FortalTokens.accent9())
+ .paddingAll(FortalTokens.space4())
+ .borderRadius(.all(FortalTokens.radius3()))
+ .onHovered(.color(FortalTokens.accent10()));
```
This gives you Fortal's token consistency without starting from its component styles.
diff --git a/src/content/documentation/remix/index.mdx b/src/content/documentation/remix/index.mdx
index ec1b01dc..761a0c5c 100644
--- a/src/content/documentation/remix/index.mdx
+++ b/src/content/documentation/remix/index.mdx
@@ -29,13 +29,13 @@ Remix pairs headless components (inspired by Naked UI) with Mix's styling system
Define a style with a fluent chain, then call it or pass it to a component:
```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));
button(label: 'Click me', onPressed: () {});
```
@@ -81,7 +81,7 @@ import 'package:remix/remix.dart';
### Your first Remix component
-Build a blue button labeled "Click Me". The `RemixButtonStyler` class defines styles with a fluent API, and calling it directly produces the widget:
+Build a blue button labeled "Click Me". The `ButtonStyler` class defines styles with a fluent API, and calling it directly produces the widget:
```dart
import 'package:flutter/material.dart';
@@ -90,12 +90,12 @@ import 'package:remix/remix.dart';
class Example extends StatelessWidget {
const Example({super.key});
- RemixButtonStyler get _button => RemixButtonStyler()
+ ButtonStyler get _button => ButtonStyler()
.paddingX(16)
.paddingY(10)
.color(Colors.blue)
- .borderRadiusAll(const Radius.circular(8))
- .label(TextStyler().color(Colors.white));
+ .borderRadius(.circular(8))
+ .label(.color(Colors.white));
@override
Widget build(BuildContext context) {
@@ -111,20 +111,20 @@ class Example extends StatelessWidget {
## Styling Components
-Remix components are styled through the same fluent, composable API you use everywhere else in Mix. A *component styler* — such as `RemixButtonStyler` — provides small, chainable utilities that combine into the style you need, and respond to interaction state without extra wiring.
+Remix components are styled through the same fluent, composable API you use everywhere else in Mix. A *component styler* — such as `ButtonStyler` — provides small, chainable utilities that combine into the style you need, and respond to interaction state without extra wiring.
### Adding Interaction States
Define how a component should look in hover, pressed, focused, and other states by chaining state-specific styles onto the base:
```dart
-final style = RemixButtonStyler()
- .paddingX(16)
- .paddingY(10)
- .color(Colors.blue)
- .borderRadiusAll(const Radius.circular(8))
- .onHovered(.color(Colors.blue.shade700))
- .onPressed(.scale(0.95));
+final style = ButtonStyler()
+ .paddingX(16)
+ .paddingY(10)
+ .color(Colors.blue)
+ .borderRadius(.circular(8))
+ .onHovered(.color(Colors.blue.shade700))
+ .onPressed(.scale(0.95));
```
Remix tracks the interaction internally, so you don't wire up hover detectors, focus nodes, or gesture recognizers yourself.
@@ -134,14 +134,14 @@ Remix tracks the interaction internally, so you don't wire up hover detectors, f
Attach animation directly to a style with `.animate()`. State-specific styles interpolate smoothly — no controllers, no tweens:
```dart
-final style = RemixButtonStyler()
- .paddingX(16)
- .paddingY(10)
- .color(Colors.blue)
- .borderRadiusAll(const Radius.circular(8))
- .animate(AnimationConfig.spring(300.ms))
- .onHovered(.color(Colors.blue.shade700))
- .onPressed(.scale(0.95));
+final style = ButtonStyler()
+ .paddingX(16)
+ .paddingY(10)
+ .color(Colors.blue)
+ .borderRadius(.circular(8))
+ .animate(.spring(300.ms))
+ .onHovered(.color(Colors.blue.shade700))
+ .onPressed(.scale(0.95));
```
Both the color on hover and the scale on press animate through a single spring curve.
@@ -155,18 +155,18 @@ Both the color on hover and the scale on press animate through a single spring c
Build a base style once, then extend it for variants:
```dart
-final baseButton = RemixButtonStyler()
+final baseButton = ButtonStyler()
.paddingX(16)
.paddingY(10)
- .borderRadiusAll(const Radius.circular(8));
+ .borderRadius(.circular(8));
final primaryButton = baseButton
.color(Colors.blue)
- .label(TextStyler().color(Colors.white));
+ .label(.color(Colors.white));
final destructiveButton = baseButton
.color(Colors.red)
- .label(TextStyler().color(Colors.white));
+ .label(.color(Colors.white));
```
Each chain call returns a new style, so `baseButton` stays unchanged and every variant is independently mergeable.
diff --git a/src/content/documentation/remix/styler-api.mdx b/src/content/documentation/remix/styler-api.mdx
index 3e8ec3b5..bac23a7a 100644
--- a/src/content/documentation/remix/styler-api.mdx
+++ b/src/content/documentation/remix/styler-api.mdx
@@ -7,8 +7,11 @@ Remix stylers expose matching named factories and fluent methods for canonical
style operations. This symmetry lets a state variant use Dart's contextual dot
shorthand without constructing another styler explicitly:
+For buttons, use `ButtonStyler`. `RemixButtonStyler` remains available as a
+deprecated compatibility alias during the beta releases.
+
```dart
-final style = RemixButtonStyler()
+final style = ButtonStyler()
.color(Colors.blue)
.onHovered(.color(Colors.indigo))
.onPressed(.scale(0.97));
@@ -47,7 +50,7 @@ variant:
final style = RemixCardStyler()
.paddingAll(12)
.backgroundColor(Colors.white)
- .onHovered(.padding(EdgeInsetsGeometryMix.all(16)))
+ .onHovered(.padding(.all(16)))
.onPressed(.color(Colors.grey.shade100));
```
@@ -80,9 +83,7 @@ or `FlexBox` container. A composite root without one clear visual surface, such
as `RemixMenuStyler`, exposes factories for its child fields instead:
```dart
-final style = RemixMenuStyler.trigger(
- RemixMenuTriggerStyler.color(Colors.black),
-);
+final style = RemixMenuStyler.trigger(.color(Colors.black));
```
`RemixSelectStyler` stores its popup container as a `FlexBox`, but intentionally
@@ -93,8 +94,13 @@ the root select styler.
The upstream forwarded `transform` factory currently accepts `Alignment`
rather than the wider `AlignmentGeometry` accepted by the former handwritten
helpers. Use a direct child styler when a directional alignment is required,
-for example `RemixCardStyler.container(BoxStyler(transform: matrix,
-transformAlignment: AlignmentDirectional.centerStart))`.
+for example:
+
+```dart
+final style = RemixCardStyler.container(
+ .new(transform: matrix, transformAlignment: .centerStart),
+);
+```
### Variants and selected state
@@ -116,7 +122,7 @@ names:
| Styler | Canonical generated API | Component-specific helper |
| --- | --- | --- |
| `RemixTextFieldStyler` | `color` styles the container | `textColor` styles editable text |
-| `RemixButtonStyler` | `rotate` transforms the container | `modifierRotate` rotates the complete widget with a modifier |
+| `ButtonStyler` | `rotate` transforms the container | `modifierRotate` rotates the complete widget with a modifier |
| `RemixCalloutStyler` | `textStyle(TextStyler)` applies the container text style | `contentTextStyle(TextStyleMix)` styles callout content |
This keeps contextual shorthand predictable while preserving each specialized
@@ -124,7 +130,7 @@ operation without ambiguous overloads.
## Generated and hand-authored code
-`Remix*Styler` classes are generated from `@MixableSpec`. Fortal widget wrapper
+Component stylers are generated from `@MixableSpec`. Fortal widget wrapper
classes are hand-authored source. Either way the public API is identical — the
`fortal*Styler` recipes, constructors, fields, and widget behavior are the same
whether a class is generated or written by hand, so nothing changes for code