Created App Surfaces for Theming

lib/theme/app_surfaces.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+
+@immutable
+class AppSurfaces extends ThemeExtension<AppSurfaces> {
+  const AppSurfaces({
+    required this.cardRadius,
+    required this.compactCardRadius,
+    required this.dialogRadius,
+    required this.cardElevation,
+    required this.cardShadowColor,
+    required this.compactShadowColor,
+  });
+
+  final double cardRadius;
+  final double compactCardRadius;
+  final double dialogRadius;
+  final double cardElevation;
+  final Color cardShadowColor;
+  final Color compactShadowColor;
+
+  // convenience shapes
+  RoundedRectangleBorder get standardShape =>
+      RoundedRectangleBorder(borderRadius: BorderRadius.circular(cardRadius));
+  RoundedRectangleBorder get compactShape => RoundedRectangleBorder(
+    borderRadius: BorderRadius.circular(compactCardRadius),
+  );
+  RoundedRectangleBorder get dialogShape =>
+      RoundedRectangleBorder(borderRadius: BorderRadius.circular(dialogRadius));
+
+  static AppSurfaces of(BuildContext context) {
+    final ext = Theme.of(context).extension<AppSurfaces>();
+    return ext ??
+        const AppSurfaces(
+          cardRadius: 16,
+          compactCardRadius: 12,
+          dialogRadius: 20,
+          cardElevation: 3,
+          cardShadowColor: Color.fromRGBO(0, 0, 0, 0.12),
+          compactShadowColor: Color.fromRGBO(0, 0, 0, 0.08),
+        );
+  }
+
+  @override
+  AppSurfaces copyWith({
+    double? cardRadius,
+    double? compactCardRadius,
+    double? dialogRadius,
+    double? cardElevation,
+    Color? cardShadowColor,
+    Color? compactShadowColor,
+  }) {
+    return AppSurfaces(
+      cardRadius: cardRadius ?? this.cardRadius,
+      compactCardRadius: compactCardRadius ?? this.compactCardRadius,
+      dialogRadius: dialogRadius ?? this.dialogRadius,
+      cardElevation: cardElevation ?? this.cardElevation,
+      cardShadowColor: cardShadowColor ?? this.cardShadowColor,
+      compactShadowColor: compactShadowColor ?? this.compactShadowColor,
+    );
+  }
+
+  @override
+  AppSurfaces lerp(ThemeExtension<AppSurfaces>? other, double t) {
+    if (other is! AppSurfaces) return this;
+    return AppSurfaces(
+      cardRadius: lerpDouble(cardRadius, other.cardRadius, t) ?? cardRadius,
+      compactCardRadius:
+          lerpDouble(compactCardRadius, other.compactCardRadius, t) ??
+          compactCardRadius,
+      dialogRadius:
+          lerpDouble(dialogRadius, other.dialogRadius, t) ?? dialogRadius,
+      cardElevation:
+          lerpDouble(cardElevation, other.cardElevation, t) ?? cardElevation,
+      cardShadowColor:
+          Color.lerp(cardShadowColor, other.cardShadowColor, t) ??
+          cardShadowColor,
+      compactShadowColor:
+          Color.lerp(compactShadowColor, other.compactShadowColor, t) ??
+          compactShadowColor,
+    );
+  }
+}
+
+// Helper because dart:ui lerpDouble isn't exported here
+double? lerpDouble(num? a, num? b, double t) {
+  if (a == null && b == null) return null;
+  a = a ?? 0;
+  b = b ?? 0;
+  return a + (b - a) * t;
+}

lib/theme/app_theme.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 
 import 'app_typography.dart';
+import 'app_surfaces.dart';
 
 class AppTheme {
   static ThemeData light() {
@@ -24,10 +25,19 @@ class AppTheme {
           const TextStyle(letterSpacing: 0.2),
     );
 
+    final surfaces = AppSurfaces(
+      cardRadius: 16,
+      compactCardRadius: 12,
+      dialogRadius: 20,
+      cardElevation: 3,
+      cardShadowColor: const Color.fromRGBO(0, 0, 0, 0.12),
+      compactShadowColor: const Color.fromRGBO(0, 0, 0, 0.08),
+    );
+
     return base.copyWith(
       textTheme: textTheme,
       scaffoldBackgroundColor: base.colorScheme.surfaceContainerLowest,
-      extensions: [mono],
+      extensions: [mono, surfaces],
       appBarTheme: AppBarTheme(
         backgroundColor: base.colorScheme.surface,
         foregroundColor: base.colorScheme.onSurface,
@@ -142,10 +152,19 @@ class AppTheme {
           const TextStyle(letterSpacing: 0.2),
     );
 
+    final surfaces = AppSurfaces(
+      cardRadius: 16,
+      compactCardRadius: 12,
+      dialogRadius: 20,
+      cardElevation: 3,
+      cardShadowColor: const Color.fromRGBO(0, 0, 0, 0.24),
+      compactShadowColor: const Color.fromRGBO(0, 0, 0, 0.12),
+    );
+
     return base.copyWith(
       textTheme: textTheme,
       scaffoldBackgroundColor: base.colorScheme.surface,
-      extensions: [mono],
+      extensions: [mono, surfaces],
       appBarTheme: AppBarTheme(
         backgroundColor: base.colorScheme.surface,
         foregroundColor: base.colorScheme.onSurface,