Add Card.filled and Card.outlined factory methods (#136229)

Fixes #119401

This PR is to:
* add `Card.filled` and `Card.outlined` factory methods so that we can use tokens for these two types of cards to generate default theme instead of providing hard-corded values in example.
* update card.2.dart example.
* add test file for card.2.dart example.
* fix some mismatch caused by editing the auto-generated defaults by hand in navigation_bar.dart and navigation_drawer.dart.

dev/tools/gen_defaults/bin/gen_defaults.dart

@@ -112,7 +112,9 @@ Future<void> main(List<String> args) async {
   ButtonTemplate('md.comp.filled-tonal-button', 'FilledTonalButton', '$materialLib/filled_button.dart', tokens).updateFile();
   ButtonTemplate('md.comp.outlined-button', 'OutlinedButton', '$materialLib/outlined_button.dart', tokens).updateFile();
   ButtonTemplate('md.comp.text-button', 'TextButton', '$materialLib/text_button.dart', tokens).updateFile();
-  CardTemplate('Card', '$materialLib/card.dart', tokens).updateFile();
+  CardTemplate('md.comp.elevated-card', 'Card', '$materialLib/card.dart', tokens).updateFile();
+  CardTemplate('md.comp.filled-card', 'FilledCard', '$materialLib/card.dart', tokens).updateFile();
+  CardTemplate('md.comp.outlined-card', 'OutlinedCard', '$materialLib/card.dart', tokens).updateFile();
   CheckboxTemplate('Checkbox', '$materialLib/checkbox.dart', tokens).updateFile();
   ColorSchemeTemplate(colorLightTokens, colorDarkTokens, 'ColorScheme', '$materialLib/theme_data.dart', tokens).updateFile();
   DatePickerTemplate('DatePicker', '$materialLib/date_picker_theme.dart', tokens).updateFile();

dev/tools/gen_defaults/generated/used_tokens.csv

@@ -203,6 +203,10 @@ md.comp.filled-button.label-text.text-style,
 md.comp.filled-button.pressed.container.elevation,
 md.comp.filled-button.pressed.state-layer.color,
 md.comp.filled-button.pressed.state-layer.opacity,
+md.comp.filled-card.container.color,
+md.comp.filled-card.container.elevation,
+md.comp.filled-card.container.shadow-color,
+md.comp.filled-card.container.shape,
 md.comp.filled-icon-button.container.color,
 md.comp.filled-icon-button.container.shape,
 md.comp.filled-icon-button.container.size,
@@ -459,6 +463,13 @@ md.comp.outlined-button.outline.color,
 md.comp.outlined-button.outline.width,
 md.comp.outlined-button.pressed.state-layer.color,
 md.comp.outlined-button.pressed.state-layer.opacity,
+md.comp.outlined-card.container.color,
+md.comp.outlined-card.container.elevation,
+md.comp.outlined-card.container.shadow-color,
+md.comp.outlined-card.container.shape,
+md.comp.outlined-card.container.surface-tint-layer.color,
+md.comp.outlined-card.outline.color,
+md.comp.outlined-card.outline.width,
 md.comp.outlined-icon-button.container.shape,
 md.comp.outlined-icon-button.container.size,
 md.comp.outlined-icon-button.disabled.icon.color,

dev/tools/gen_defaults/lib/card_template.dart

@@ -5,32 +5,49 @@
 import 'template.dart';
 
 class CardTemplate extends TokenTemplate {
-  const CardTemplate(super.blockName, super.fileName, super.tokens, {
+  const CardTemplate(this.tokenGroup, super.blockName, super.fileName, super.tokens, {
     super.colorSchemePrefix = '_colors.',
   });
 
+  final String tokenGroup;
+
+  String _shape() {
+    final String cardShape = shape('$tokenGroup.container');
+    if (tokenAvailable('$tokenGroup.outline.color')) {
+      return '''
+
+    $cardShape.copyWith(
+      side: ${border('$tokenGroup.outline')}
+    )''';
+    } else {
+      return cardShape;
+    }
+  }
+
   @override
   String generate() => '''
 class _${blockName}DefaultsM3 extends CardTheme {
   _${blockName}DefaultsM3(this.context)
     : super(
         clipBehavior: Clip.none,
-        elevation: ${elevation("md.comp.elevated-card.container")},
+        elevation: ${elevation('$tokenGroup.container')},
         margin: const EdgeInsets.all(4.0),
-        shape: ${shape("md.comp.elevated-card.container")},
       );
 
   final BuildContext context;
   late final ColorScheme _colors = Theme.of(context).colorScheme;
 
   @override
-  Color? get color => ${componentColor("md.comp.elevated-card.container")};
+  Color? get color => ${componentColor('$tokenGroup.container')};
 
   @override
-  Color? get shadowColor => ${colorOrTransparent("md.comp.elevated-card.container.shadow-color")};
+  Color? get shadowColor => ${colorOrTransparent('$tokenGroup.container.shadow-color')};
 
   @override
-  Color? get surfaceTintColor => ${colorOrTransparent("md.comp.elevated-card.container.surface-tint-layer.color")};
+  Color? get surfaceTintColor => ${colorOrTransparent('$tokenGroup.container.surface-tint-layer.color')};
+
+  @override
+  ShapeBorder? get shape =>${_shape()};
 }
 ''';
 }

dev/tools/gen_defaults/lib/navigation_bar_template.dart

@@ -34,9 +34,11 @@ class _${blockName}DefaultsM3 extends NavigationBarThemeData {
     return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
       return IconThemeData(
         size: ${getToken("md.comp.navigation-bar.icon.size")},
-        color: states.contains(MaterialState.selected)
-          ? ${componentColor("md.comp.navigation-bar.active.icon")}
-          : ${componentColor("md.comp.navigation-bar.inactive.icon")},
+        color: states.contains(MaterialState.disabled)
+          ? _colors.onSurfaceVariant.withOpacity(0.38)
+          : states.contains(MaterialState.selected)
+            ? ${componentColor("md.comp.navigation-bar.active.icon")}
+            : ${componentColor("md.comp.navigation-bar.inactive.icon")},
       );
     });
   }
@@ -47,9 +49,12 @@ class _${blockName}DefaultsM3 extends NavigationBarThemeData {
   @override MaterialStateProperty<TextStyle?>? get labelTextStyle {
     return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
     final TextStyle style = ${textStyle("md.comp.navigation-bar.label-text")}!;
-      return style.apply(color: states.contains(MaterialState.selected)
-        ? ${componentColor("md.comp.navigation-bar.active.label-text")}
-        : ${componentColor("md.comp.navigation-bar.inactive.label-text")}
+      return style.apply(
+        color: states.contains(MaterialState.disabled)
+          ? _colors.onSurfaceVariant.withOpacity(0.38)
+          : states.contains(MaterialState.selected)
+            ? ${componentColor("md.comp.navigation-bar.active.label-text")}
+            : ${componentColor("md.comp.navigation-bar.inactive.label-text")}
       );
     });
   }

dev/tools/gen_defaults/lib/navigation_drawer_template.dart

@@ -42,7 +42,9 @@ class _${blockName}DefaultsM3 extends NavigationDrawerThemeData {
     return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
       return IconThemeData(
         size: ${getToken("md.comp.navigation-drawer.icon.size")},
-        color: states.contains(MaterialState.selected)
+        color: states.contains(MaterialState.disabled)
+          ? _colors.onSurfaceVariant.withOpacity(0.38)
+          : states.contains(MaterialState.selected)
             ? ${componentColor("md.comp.navigation-drawer.active.icon")}
             : ${componentColor("md.comp.navigation-drawer.inactive.icon")},
       );
@@ -54,7 +56,9 @@ class _${blockName}DefaultsM3 extends NavigationDrawerThemeData {
     return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
       final TextStyle style = ${textStyle("md.comp.navigation-drawer.label-text")}!;
       return style.apply(
-        color: states.contains(MaterialState.selected)
+        color: states.contains(MaterialState.disabled)
+          ? _colors.onSurfaceVariant.withOpacity(0.38)
+          : states.contains(MaterialState.selected)
             ? ${componentColor("md.comp.navigation-drawer.active.label-text")}
             : ${componentColor("md.comp.navigation-drawer.inactive.label-text")},
       );