Update the default outline color for OutlinedButton (flutter#138768)

Fix b/311343182

This is to update the default outline for `OutlinedButton`. When the button is focused, the outline color should be primary color.

Author: QuncCccccc

dev/tools/gen_defaults/generated/used_tokens.csv

@@ -1,4 +1,4 @@
-Versions used, v0_162, v0_158
+Versions used, v0_162, v0_202, v0_158
 md.comp.assist-chip.container.shape,
 md.comp.assist-chip.container.surface-tint-layer.color,
 md.comp.assist-chip.elevated.container.elevation,
@@ -453,6 +453,7 @@ md.comp.outlined-button.disabled.label-text.color,
 md.comp.outlined-button.disabled.label-text.opacity,
 md.comp.outlined-button.disabled.outline.color,
 md.comp.outlined-button.disabled.outline.opacity,
+md.comp.outlined-button.focus.outline.color,
 md.comp.outlined-button.focus.state-layer.color,
 md.comp.outlined-button.focus.state-layer.opacity,
 md.comp.outlined-button.hover.state-layer.color,

dev/tools/gen_defaults/lib/button_template.dart

@@ -136,6 +136,9 @@ ${tokenAvailable("$tokenGroup.outline.color") ? '''
     if (states.contains(MaterialState.disabled)) {
       return ${border("$tokenGroup.disabled.outline")};
     }
+    if (states.contains(MaterialState.focused)) {
+      return ${border('$tokenGroup.focus.outline')};
+    }
     return ${border("$tokenGroup.outline")};
   });''' : '''
   // No default side'''}

packages/flutter/lib/src/material/outlined_button.dart

@@ -545,6 +545,9 @@ class _OutlinedButtonDefaultsM3 extends ButtonStyle {
     if (states.contains(MaterialState.disabled)) {
       return BorderSide(color: _colors.onSurface.withOpacity(0.12));
     }
+    if (states.contains(MaterialState.focused)) {
+      return BorderSide(color: _colors.primary);
+    }
     return BorderSide(color: _colors.outline);
   });
 

packages/flutter/test/material/outlined_button_test.dart

@@ -259,6 +259,8 @@ void main() {
   });
 
   testWidgetsWithLeakTracking('Does OutlinedButton work with focus', (WidgetTester tester) async {
+    final ThemeData theme = ThemeData();
+    final ColorScheme colors = theme.colorScheme;
     const Color focusColor = Color(0xff001122);
 
     Color? getOverlayColor(Set<MaterialState> states) {
@@ -267,9 +269,9 @@ void main() {
 
     final FocusNode focusNode = FocusNode(debugLabel: 'OutlinedButton Node');
     await tester.pumpWidget(
-      Directionality(
-        textDirection: TextDirection.ltr,
-        child: OutlinedButton(
+      MaterialApp(
+        theme: theme,
+        home: OutlinedButton(
           style: ButtonStyle(
             overlayColor: MaterialStateProperty.resolveWith<Color?>(getOverlayColor),
           ),
@@ -287,10 +289,21 @@ void main() {
     final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
     expect(inkFeatures, paints..rect(color: focusColor));
 
+    final Finder buttonMaterial = find.descendant(
+      of: find.byType(OutlinedButton),
+      matching: find.byType(Material),
+    );
+
+    final Material material = tester.widget<Material>(buttonMaterial);
+
+    expect(material.shape, StadiumBorder(side: BorderSide(color: colors.primary)));
+
     focusNode.dispose();
   });
 
   testWidgetsWithLeakTracking('Does OutlinedButton work with autofocus', (WidgetTester tester) async {
+    final ThemeData theme = ThemeData();
+    final ColorScheme colors = theme.colorScheme;
     const Color focusColor = Color(0xff001122);
 
     Color? getOverlayColor(Set<MaterialState> states) {
@@ -299,9 +312,9 @@ void main() {
 
     final FocusNode focusNode = FocusNode(debugLabel: 'OutlinedButton Node');
     await tester.pumpWidget(
-      Directionality(
-        textDirection: TextDirection.ltr,
-        child: OutlinedButton(
+      MaterialApp(
+        theme: theme,
+        home: OutlinedButton(
           autofocus: true,
           style: ButtonStyle(
             overlayColor: MaterialStateProperty.resolveWith<Color?>(getOverlayColor),
@@ -319,6 +332,15 @@ void main() {
     final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
     expect(inkFeatures, paints..rect(color: focusColor));
 
+
+    final Finder buttonMaterial = find.descendant(
+      of: find.byType(OutlinedButton),
+      matching: find.byType(Material),
+    );
+
+    final Material material = tester.widget<Material>(buttonMaterial);
+
+    expect(material.shape, StadiumBorder(side: BorderSide(color: colors.primary)));
     focusNode.dispose();
   });