Feat/api improvement docs (#145)

* Improvements

* Formatting

demo/lib/app_shell.dart

@@ -29,7 +29,7 @@ class AppShell extends HookConsumerWidget {
     final darkMode = ref.watch(darkModeProvider);
 
     return MixTheme(
-      data: MixThemeData(),
+      data: MixThemeData.withMaterialTokens(),
       child: AdaptiveNavigationScaffold(
         appBar: AppBar(
           title: const Text('Mix Gallery'),

demo/lib/components/box.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:mix/mix.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+@widgetbook.UseCase(
+  name: 'Box with BoxDecoration',
+  type: Box,
+)
+Widget boxDecorationContainer(BuildContext context) {
+  final boxStyle = StyleMix(
+    box.color.red(),
+    onPress(
+      box.color.blue(),
+    ),
+    opacity(0.5),
+    (onHover & onDark)(
+      box.color.orange(),
+    ),
+    onHover(
+      box.color.grey(),
+    ),
+    box.padding.horizontal(15.0),
+    box.padding.vertical(8.0),
+    box.borderRadius(5),
+    box.width(100),
+    box.height(100),
+    onDark(
+      box.color.purple(),
+    ),
+    box.alignment.center(),
+    text.style.bold(),
+  );
+
+  return Center(
+    child: Column(
+      children: [
+        GestureBox(
+          style: boxStyle,
+          onPressed: () {},
+          child: const StyledText('Press me'),
+        ),
+        Pressable(
+          child: AnimatedBox(
+            style: boxStyle,
+            child: const StyledText('Press me Animated'),
+          ),
+        )
+      ],
+    ),
+  );
+}

demo/lib/docs/variants/and_operator.dart

@@ -7,12 +7,12 @@ class VariantsAndOperator extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final mix = StyleMix(
-      padding(20.0),
-      textStyle(color: Colors.white),
+      box.padding(20.0),
+      text.style(color: Colors.white),
       (onHover & onEnabled)(
         // When it's hovering AND pressing
-        textStyle(color: Colors.black),
-        bold(),
+        text.style(color: Colors.black),
+        text.style.bold(),
       ),
     );
 

demo/lib/docs/variants/catalog/pressable.dart

@@ -9,31 +9,35 @@ class VariantsCatalogPressable extends StatelessWidget {
     return Row(children: [
       buildBlock(
         'Hover',
-        StyleMix(onHover(
-          border(color: $colors.primary, width: 2),
-          padding(4.0),
-        )),
+        StyleMix(
+          onHover(
+            box.border(color: $colors.primary(), width: 2),
+            box.padding(4.0),
+          ),
+        ),
         const Text('Hover this to show the highlight'),
       ),
       const VerticalDivider(),
       buildBlock(
         'Focus',
-        StyleMix(onFocus(
-          border(color: $colors.primary, width: 2),
-          padding(4.0),
-        )),
+        StyleMix(
+          onFocus(
+            box.border(color: $colors.primary(), width: 2),
+            box.padding(4.0),
+          ),
+        ),
         const Text('Focus this to show the highlight'),
       ),
       const VerticalDivider(),
       buildBlock(
         'Press',
         StyleMix(
           onPress(
-            border(
-              color: $colors.primary,
+            box.border(
+              color: $colors.primary(),
               width: 2,
             ),
-            padding(4.0),
+            box.padding(4.0),
           ),
         ),
         const Text('Press this to show the highlight'),

demo/lib/docs/variants/default.dart

@@ -7,11 +7,11 @@ class VariantsDefaultExample extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final style = StyleMix(
-      backgroundColor($colors.secondary),
-      textStyle(color: $colors.onSecondary),
+      box.color($colors.secondary()),
+      text.style.color.of($colors.onSecondary),
       onHover(
-        backgroundColor($colors.primary),
-        textStyle(color: $colors.onPrimary),
+        box.color.of($colors.primary),
+        text.style(color: $colors.onPrimary()),
       ),
     );
 

demo/lib/docs/variants/or_operator.dart

@@ -7,12 +7,12 @@ class VariantsOrOperator extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final mix = StyleMix(
-      padding(20.0),
+      box.padding(20.0),
+      // Whether it's small OR medium
       (onSmall | onMedium)(
-        // Whether it's small OR medium
-        width(300),
-        height(400),
-        backgroundColor(Colors.white),
+        box.width(300),
+        box.height(400),
+        box.color.white(),
       ),
     );
 

demo/lib/main.dart

@@ -2,7 +2,6 @@ import 'package:desktop_window/desktop_window.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:mix/mix.dart';
 
 import 'app_shell.dart';
 import 'docs/docs.dart';
@@ -66,11 +65,8 @@ class MyApp extends StatelessWidget {
             });
           },
           builder: (context, child) {
-            return MixTheme(
-              data: MixThemeData(),
-              child: Material(
-                child: child ?? const SizedBox.shrink(),
-              ),
+            return Material(
+              child: child ?? const SizedBox.shrink(),
             );
           },
         );

demo/lib/styles.dart

@@ -19,5 +19,5 @@ StyleMix get flexAlign => StyleMix(
       flex.mainAxisAlignment.start(),
       flex.crossAxisAlignment.start(),
       flex.mainAxisSize.max(),
-      width(double.infinity),
+      box.width(double.infinity),
     );

demo/lib/views/basic_example.dart

@@ -10,22 +10,22 @@ class BasicExample extends HookWidget {
   @override
   Widget build(BuildContext context) {
     final mix = StyleMix.create([
-      height(300),
-      width(300),
-      borderRadius(10),
-      elevation(2),
-      margin(10),
-      alignment.center(),
-      backgroundColor(Colors.purple),
+      box.height(300),
+      box.width(300),
+      box.borderRadius(10),
+      box.elevation(2),
+      box.margin(10),
+      box.alignment.center(),
+      box.color(Colors.purple),
       text.style(color: Colors.white),
       onPress(
-        backgroundColor(Colors.black),
+        box.color(Colors.black),
       ),
       onHover(
         opacity(0.5),
       ),
       onLongPress(
-        backgroundColor(Colors.green),
+        box.color(Colors.green),
       ),
     ]);
 
@@ -73,10 +73,10 @@ class BasicExample extends HookWidget {
             style: onSurfaceMix.merge(
               StyleMix(
                 onLight(
-                  text.style(color: $colors.error),
+                  text.style.color.of($colors.error),
                 ),
                 onDark(
-                  text.style(color: $colors.primary),
+                  text.style.color.of($colors.primary),
                 ),
               ),
             ),
@@ -111,7 +111,7 @@ class BasicExample extends HookWidget {
                 style: onSurfaceMix.merge(
                   StyleMix(
                     icon(size: 70),
-                    icon(color: $colors.secondary),
+                    icon.color.of($colors.secondary),
                   ),
                 ),
               ),

demo/lib/views/button_example.dart

@@ -22,7 +22,7 @@ class ButtonSizeVariants {
 }
 
 StyleMix get _baseStyle => StyleMix(
-      borderRadius(4),
+      box.borderRadius(4),
       onPress(
         scale(0.95),
       ),
@@ -31,28 +31,28 @@ StyleMix get _baseStyle => StyleMix(
         // added because of lack of style parameters (yellow lines)
         decoration: TextDecoration.none,
         fontWeight: FontWeight.w600,
-        fontFamily: $textStyles.bodySmall.fontFamily,
       ),
+      text.style.of($textStyles.bodySmall),
       flex.mainAxisSize.min(),
       ButtonSizeVariants.small(
-        padding.horizontal(10),
-        padding.vertical(10),
+        box.padding.horizontal(10),
+        box.padding.vertical(10),
         text.style(
           fontSize: 16,
         ),
         icon(size: 24),
       ),
       ButtonSizeVariants.medium(
-        padding.horizontal(4),
-        padding.vertical(16),
+        box.padding.horizontal(4),
+        box.padding.vertical(16),
         text.style(
           fontSize: 16,
         ),
         icon(size: 24),
       ),
       ButtonSizeVariants.large(
-        padding.horizontal(4),
-        padding.vertical(2),
+        box.padding.horizontal(4),
+        box.padding.vertical(2),
         text.style(
           fontSize: 16,
         ),
@@ -143,12 +143,12 @@ StyleMix get _style => StyleMix(
       text.style(
         color: const Color(0xFFFF004C),
       ),
-      backgroundColor(const Color(0x0F07E2FF)),
-      icon(color: $colors.onBackground),
+      box.color(const Color(0x0F07E2FF)),
+      icon.color.of($colors.onBackground),
       onDisabled(
-        backgroundColor($colors.background.withOpacity(0.3)),
-        text.style(color: $colors.onBackground.withOpacity(0.3)),
-        icon(color: $colors.onBackground.withOpacity(0.3)),
+        box.color.of($colors.background),
+        text.style.color.of($colors.onBackground),
+        icon.color.of($colors.onBackground),
       ),
     );
 

demo/lib/views/example.dart

@@ -61,18 +61,18 @@ class CustomMixWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final style = StyleMix(
-      height(100),
-      margin.vertical(10),
-      elevation(10),
-      borderRadius(10),
-      backgroundColor($colors.primary),
-      text.style.as($textStyles.bodyMedium),
-      text.style(color: $colors.onPrimary),
+      box.height(100),
+      box.margin.vertical(10),
+      box.elevation(10),
+      box.borderRadius(10),
+      box.color($colors.primary()),
+      text.style.of($textStyles.bodyMedium),
+      text.style(color: $colors.onPrimary()),
       onHover(
-        elevation(2),
-        padding(20),
-        backgroundColor($colors.secondary),
-        text.style(color: $colors.onSecondary),
+        box.elevation(2),
+        box.padding(20),
+        box.color.of($colors.secondary),
+        text.style.color.of($colors.onSecondary),
       ),
     );