Rename style vars and simplify showcase examples

Rename style variables for consistency and simplify the example widgets in the homepage showcases. In directives_showcase.dart, titleStyle was renamed to title and the example now returns title('hello world') (removed the subtitle and surrounding Column). In styling_showcase.dart and variants_showcase.dart, boxStyle/cardStyle were renamed to box and examples now directly return box() or box(child: ...) for a simpler, more consistent demo API.

Author: tilucasoli

packages/mix_docs_preview/lib/homepage/directives_showcase.dart

@@ -15,26 +15,13 @@ class Example extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // #docregion showcase
-    final titleStyle = TextStyler()
+    final title = TextStyler()
         .fontSize(20)
         .fontWeight(.w700)
         .color(Colors.white)
         .uppercase();
 
-    final subtitleStyle = TextStyler()
-        .fontSize(14)
-        .color(Colors.white70)
-        .capitalize();
-
-    return Column(
-      mainAxisSize: MainAxisSize.min,
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        titleStyle('hello world'),
-        const SizedBox(height: 4),
-        subtitleStyle('style transforms built in'),
-      ],
-    );
+    return title('hello world');
     // #enddocregion showcase
   }
 }

packages/mix_docs_preview/lib/homepage/styling_showcase.dart

@@ -15,12 +15,12 @@ class Example extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // #docregion showcase
-    final boxStyle = BoxStyler()
+    final box = BoxStyler()
         .size(120, 120)
         .borderRadius(.circular(16))
         .color(Colors.deepPurple);
 
-    return boxStyle();
+    return box();
     // #enddocregion showcase
   }
 }

packages/mix_docs_preview/lib/homepage/variants_showcase.dart

@@ -14,7 +14,7 @@ class Example extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // #docregion showcase
-    final cardStyle = BoxStyler()
+    final box = BoxStyler()
         .size(120, 120)
         .borderRadius(.circular(16))
         .color(Colors.cyan)
@@ -23,7 +23,7 @@ class Example extends StatelessWidget {
         .scale(1)
         .onHovered(.color(Colors.cyanAccent).scale(1.2));
 
-    return cardStyle(
+    return box(
       child: const Text(
         'Hover',
         style: TextStyle(color: Colors.white, fontSize: 16),