Changed the dark theme elevation overlay to use the colorScheme.onSurface (#41857)

The Material Dark Theme spec has been updated (or soon will be) to clarify that the elevation overlay that is applied to surface colors to indicate elevation should be based off of the colorScheme.onSurface color and not white. This commit implements this change.

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

@@ -7,7 +7,6 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 
-import 'colors.dart';
 import 'constants.dart';
 import 'theme.dart';
 
@@ -228,9 +227,9 @@ class Material extends StatefulWidget {
   /// [MaterialType.transparency].
   ///
   /// To support dark themes, if the surrounding
-  /// [ThemeData.applyElevationOverlayColor] is [true] and
-  /// this color is [ThemeData.colorScheme.surface] then a semi-transparent
-  /// white will be composited on top this color to indicate the elevation.
+  /// [ThemeData.applyElevationOverlayColor] is true then a semi-transparent
+  /// overlay color will be composited on top this color to indicate
+  /// the elevation.
   ///
   /// By default, the color is derived from the [type] of material.
   final Color color;
@@ -318,7 +317,7 @@ class Material extends StatefulWidget {
   static const double defaultSplashRadius = 35.0;
 }
 
-// Apply a semi-transparent white on surface colors to
+// Apply a semi-transparent colorScheme.onSurface to surface colors to
 // indicate the level of elevation.
 Color _elevationOverlayColor(BuildContext context, Color background, double elevation) {
   final ThemeData theme = Theme.of(context);
@@ -330,7 +329,7 @@ Color _elevationOverlayColor(BuildContext context, Color background, double elev
     // This formula matches the values in the spec:
     // https://material.io/design/color/dark-theme.html#properties
     final double opacity = (4.5 * math.log(elevation + 1) + 2) / 100.0;
-    final Color overlay = Colors.white.withOpacity(opacity);
+    final Color overlay = theme.colorScheme.onSurface.withOpacity(opacity);
     return Color.alphaBlend(overlay, background);
   }
   return background;

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

@@ -562,8 +562,8 @@ class ThemeData extends Diagnosticable {
   ///
   /// If [colorScheme.brightness] is [Brightness.dark] then
   /// [ThemeData.applyElevationOverlayColor] will be set to true to support
-  /// the Material dark theme method for indicating elevation by overlaying
-  /// a semi-transparent white color on top of the surface color.
+  /// the Material dark theme method for indicating elevation by applying
+  /// a semi-transparent onSurface color on top of the surface color.
   ///
   /// This is the recommended method to theme your application. As we move
   /// forward we will be converting all the widget implementations to only use
@@ -866,19 +866,19 @@ class ThemeData extends Diagnosticable {
   /// Configures the hit test size of certain Material widgets.
   final MaterialTapTargetSize materialTapTargetSize;
 
-  /// Apply a semi-transparent white overlay on Material surfaces to indicate
+  /// Apply a semi-transparent overlay color on Material surfaces to indicate
   /// elevation for dark themes.
   ///
   /// Material drop shadows can be difficult to see in a dark theme, so the
   /// elevation of a surface should be portrayed with an "overlay" in addition
-  /// to the shadow. As the elevation of the component increases, the white
+  /// to the shadow. As the elevation of the component increases, the
   /// overlay increases in opacity. [applyElevationOverlayColor] turns the
   /// application of this overlay on or off.
   ///
-  /// If [true] a semi-transparent white overlay will be applied to the color
-  /// of [Material] widgets when their [Material.color] is [colorScheme.surface].
-  /// The level of transparency is based on [Material.elevation] as per the
-  /// Material Dark theme specification.
+  /// If [true] a semi-transparent version of [colorScheme.onSurface] will be
+  /// applied on top of the color of [Material] widgets when their [Material.color]
+  /// is [colorScheme.surface]. The level of transparency is based on
+  /// [Material.elevation] as per the Material Dark theme specification.
   ///
   /// If [false] the surface color will be used unmodified.
   ///

packages/flutter/test/material/material_test.dart

@@ -231,29 +231,34 @@ void main() {
       expect(model.color, equals(surfaceColor));
     });
 
-    testWidgets('applyElevationOverlayColor set to true overlays a transparent white on surface color', (WidgetTester tester) async {
+    testWidgets('applyElevationOverlayColor set to true applies a semi-transparent onSurface color to the surface color', (WidgetTester tester) async {
+      const Color surfaceColor = Color(0xFF121212);
+      const Color onSurfaceColor = Colors.greenAccent;
+
       // The colors we should get with a base surface color of 0xFF121212 for
-      // a given elevation
+      // and a given elevation
       const List<ElevationColor> elevationColors = <ElevationColor>[
         ElevationColor(0.0, Color(0xFF121212)),
-        ElevationColor(1.0, Color(0xFF1E1E1E)),
-        ElevationColor(2.0, Color(0xFF222222)),
-        ElevationColor(3.0, Color(0xFF252525)),
-        ElevationColor(4.0, Color(0xFF282828)),
-        ElevationColor(6.0, Color(0xFF2B2B2B)),
-        ElevationColor(8.0, Color(0xFF2D2D2D)),
-        ElevationColor(12.0, Color(0xFF323232)),
-        ElevationColor(16.0, Color(0xFF353535)),
-        ElevationColor(24.0, Color(0xFF393939)),
+        ElevationColor(1.0, Color(0xFF161D19)),
+        ElevationColor(2.0, Color(0xFF18211D)),
+        ElevationColor(3.0, Color(0xFF19241E)),
+        ElevationColor(4.0, Color(0xFF1A2620)),
+        ElevationColor(6.0, Color(0xFF1B2922)),
+        ElevationColor(8.0, Color(0xFF1C2C24)),
+        ElevationColor(12.0, Color(0xFF1D3027)),
+        ElevationColor(16.0, Color(0xFF1E3329)),
+        ElevationColor(24.0, Color(0xFF20362B)),
       ];
-      const Color surfaceColor = Color(0xFF121212);
 
       for (ElevationColor test in elevationColors) {
         await tester.pumpWidget(
             Theme(
               data: ThemeData(
                 applyElevationOverlayColor: true,
-                colorScheme: const ColorScheme.dark().copyWith(surface: surfaceColor),
+                colorScheme: const ColorScheme.dark().copyWith(
+                  surface: surfaceColor,
+                  onSurface: onSurfaceColor,
+                ),
               ),
               child: buildMaterial(
                 color: surfaceColor,