Teach Sky buttons and dialogs how to use the new Theme system

R=eseidel@chromium.org, eseidel

Review URL: https://codereview.chromium.org/1192773004.

sdk/lib/theme/theme_data.dart

@@ -7,35 +7,33 @@ import 'dart:sky';
 import 'typography.dart' as typography;
 import 'colors.dart' as colors;
 
+enum ThemeBrightness { dark, light }
+
 class ThemeData {
 
   ThemeData.light({
     this.primary,
     this.accent,
     bool darkToolbar: false })
-    : toolbarText = darkToolbar ? typography.white : typography.black,
-      text = typography.black,
-      backgroundColor = colors.Grey[50],
-      dialogColor = colors.White;
+    : brightness = ThemeBrightness.light,
+      toolbarText = darkToolbar ? typography.white : typography.black,
+      text = typography.black;
 
   ThemeData.dark({ this.primary, this.accent })
-    : toolbarText = typography.white,
-      text = typography.white,
-      backgroundColor = colors.Grey[850],
-      dialogColor = colors.Grey[800];
+    : brightness = ThemeBrightness.dark,
+      toolbarText = typography.white,
+      text = typography.white;
 
   ThemeData.fallback()
-    : primary = colors.Indigo,
+    : brightness = ThemeBrightness.light,
+      primary = colors.Indigo,
       accent = colors.PinkAccent,
       toolbarText = typography.white,
-      text = typography.black,
-      backgroundColor = colors.Grey[50],
-      dialogColor = colors.White;
+      text = typography.black;
 
+  final ThemeBrightness brightness;
   final Map<int, Color> primary;
   final Map<int, Color> accent;
   final typography.TextTheme text;
   final typography.TextTheme toolbarText;
-  final Color backgroundColor;
-  final Color dialogColor;
 }

sdk/lib/widgets/dialog.dart

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../theme/colors.dart' as colors;
 import 'basic.dart';
 import 'material.dart';
+import "theme.dart";
 
 class Dialog extends Component {
   Dialog({
@@ -19,6 +21,15 @@ class Dialog extends Component {
   final Widget actions;
   final Function onDismiss;
 
+  Color get color {
+    switch (Theme.of(this).brightness) {
+      case ThemeBrightness.light:
+        return colors.White;
+      case ThemeBrightness.dark:
+        return colors.Grey[800];
+    }
+  }
+
   Widget build() {
     Container mask = new Container(
       decoration: const BoxDecoration(
@@ -45,6 +56,7 @@ class Dialog extends Component {
           constraints: new BoxConstraints(minWidth: 280.0),
           child: new Material(
             level: 4,
+            color: color,
             child: new ShrinkWrapWidth(
               child: new Block(children)
             )

sdk/lib/widgets/flat_button.dart

@@ -5,29 +5,26 @@
 import '../theme/colors.dart';
 import 'basic.dart';
 import 'material_button.dart';
-
-export 'material_button.dart' show MaterialButtonTheme;
+import 'theme.dart';
 
 class FlatButton extends MaterialButton {
   FlatButton({
     String key,
     Widget child,
     bool enabled: true,
-    Function onPressed,
-    MaterialButtonTheme theme: MaterialButtonTheme.light
+    Function onPressed
   }) : super(key: key,
              child: child,
              enabled: enabled,
-             onPressed: onPressed,
-             theme: theme);
+             onPressed: onPressed);
 
   Color get color {
     if (!enabled || !highlight)
       return null;
-    switch (theme) {
-      case MaterialButtonTheme.light:
+    switch (Theme.of(this).brightness) {
+      case ThemeBrightness.light:
         return Grey[400];
-      case MaterialButtonTheme.dark:
+      case ThemeBrightness.dark:
         return Grey[200];
     }
   }

sdk/lib/widgets/material.dart

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../painting/box_painter.dart';
+import '../theme/colors.dart' as colors;
 import '../theme/edges.dart';
 import '../theme/shadows.dart';
 import 'basic.dart';
@@ -24,6 +25,17 @@ class Material extends Component {
   final MaterialEdge edge;
   final Color color;
 
+  Color get backgroundColor {
+    if (color != null)
+      return color;
+    switch (Theme.of(this).brightness) {
+      case ThemeBrightness.light:
+        return colors.Grey[50];
+      case ThemeBrightness.dark:
+        return colors.Grey[850];
+    }
+  }
+
   // TODO(ianh): we should make this animate level changes and color changes
 
   Widget build() {
@@ -31,7 +43,7 @@ class Material extends Component {
       decoration: new BoxDecoration(
         boxShadow: shadows[level],
         borderRadius: edges[edge],
-        backgroundColor: color == null ? Theme.of(this).backgroundColor : color,
+        backgroundColor: backgroundColor,
         shape: edge == MaterialEdge.circle ? Shape.circle : Shape.rectangle
       ),
       child: new DefaultTextStyle(style: Theme.of(this).text.body1, child: child)

sdk/lib/widgets/material_button.dart

@@ -7,8 +7,6 @@ import 'button_base.dart';
 import 'ink_well.dart';
 import 'material.dart';
 
-enum MaterialButtonTheme { light, dark }
-
 // Rather than using this class directly, please use FlatButton or RaisedButton.
 abstract class MaterialButton extends ButtonBase {
 
@@ -16,20 +14,17 @@ abstract class MaterialButton extends ButtonBase {
     String key,
     this.child,
     this.enabled: true,
-    this.onPressed,
-    this.theme: MaterialButtonTheme.light
+    this.onPressed
   }) : super(key: key);
 
   Widget child;
   bool enabled;
   Function onPressed;
-  MaterialButtonTheme theme;
 
   void syncFields(MaterialButton source) {
     child = source.child;
     enabled = source.enabled;
     onPressed = source.onPressed;
-    theme = source.theme;
     super.syncFields(source);
   }
 

sdk/lib/widgets/raised_button.dart

@@ -2,11 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../theme/colors.dart';
+import '../theme/colors.dart' as colors;
 import 'basic.dart';
 import 'material_button.dart';
-
-export 'material_button.dart' show MaterialButtonTheme;
+import 'theme.dart';
 
 class RaisedButton extends MaterialButton {
 
@@ -14,32 +13,30 @@ class RaisedButton extends MaterialButton {
     String key,
     Widget child,
     bool enabled: true,
-    Function onPressed,
-    MaterialButtonTheme theme: MaterialButtonTheme.light
+    Function onPressed
   }) : super(key: key,
              child: child,
              enabled: enabled,
-             onPressed: onPressed,
-             theme: theme);
+             onPressed: onPressed);
 
   Color get color {
     if (enabled) {
-      switch (theme) {
-        case MaterialButtonTheme.light:
+      switch (Theme.of(this).brightness) {
+        case ThemeBrightness.light:
           if (highlight)
-            return Grey[350];
+            return colors.Grey[350];
           else
-            return Grey[300];
+            return colors.Grey[300];
           break;
-        case MaterialButtonTheme.dark:
+        case ThemeBrightness.dark:
           if (highlight)
-            return Blue[700];
+            return Theme.of(this).primary[700];
           else
-            return Blue[600];
+            return Theme.of(this).primary[600];
           break;
       }
     } else {
-      return Grey[350];
+      return colors.Grey[350];
     }
   }
 

sdk/lib/widgets/theme.dart

@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'package:sky/theme/theme_data.dart';
+import '../theme/theme_data.dart';
 import 'basic.dart';
 import 'widget.dart';
 
+export '../theme/theme_data.dart' show ThemeBrightness;
+
 class Theme extends Inherited {
 
   Theme({
@@ -19,7 +21,7 @@ class Theme extends Inherited {
 
   final ThemeData data;
 
-  static ThemeData _kFallbackTheme = new ThemeData.fallback();
+  static final ThemeData _kFallbackTheme = new ThemeData.fallback();
 
   static ThemeData of(Component component) {
     Theme theme = component.inheritedOfType(Theme);

tests/widgets/dialog-expected.txt

@@ -15,7 +15,7 @@ PAINT FOR FRAME #2 ----------------------------------------------
 2 |  |  | TestDisplayList() constructor: 800.0 x 600.0
 2 |  |  | paintChild RenderConstrainedBox at Point(260.0, 276.0)
 2 |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
-2 |  |  |  | drawRRect(Instance of 'RRect', Paint(color:Color(0xfffafafa), drawLooper:true))
+2 |  |  |  | drawRRect(Instance of 'RRect', Paint(color:Color(0xffffffff), drawLooper:true))
 2 |  |  |  | paintChild RenderParagraph at Point(0.0, 0.0)
 2 |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
 2 |  |  |  | paintChild RenderParagraph at Point(0.0, 16.0)