Improve drawer menu items

- Use a separate selected and highlight color (now part of ThemeData)
 - Colorize the icon of the selected menu item

R=ianh@google.com

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

sdk/example/demo_launcher/lib/main.dart

@@ -105,7 +105,7 @@ List<SkyDemo> demos = [
     description: 'Demo of alternative layouts',
     textTheme: typography.black,
     decoration: new BoxDecoration(
-      backgroundColor: colors.Black,
+      backgroundColor: colors.black,
       backgroundImage: new BackgroundImage(
         image: _bundle.loadImage('assets/sector_thumbnail.png'),
         fit: BackgroundFit.cover

sdk/example/widgets/card_collection.dart

@@ -18,7 +18,7 @@ import 'package:sky/widgets/widget.dart';
 class CardCollectionApp extends App {
 
   final TextStyle cardLabelStyle =
-    new TextStyle(color: White, fontSize: 18.0, fontWeight: bold);
+    new TextStyle(color: white, fontSize: 18.0, fontWeight: bold);
 
   final List<double> cardHeights = [
     48.0, 64.0, 82.0, 46.0, 60.0, 55.0, 84.0, 96.0, 50.0,
@@ -43,7 +43,7 @@ class CardCollectionApp extends App {
   Widget _builder(int index) {
     if (index >= visibleCardIndices.length)
       return null;
-    
+
     int cardIndex = visibleCardIndices[index];
     Color color = lerpColor(Red[500], Blue[500], cardIndex / cardHeights.length);
     Widget label = new Text("Item ${cardIndex}", style: cardLabelStyle);

sdk/lib/theme/colors.dart

@@ -7,8 +7,9 @@ import 'dart:sky' show Color;
 /// [Color] constants which represent Material design's
 /// [color palette](http://www.google.com/design/spec/style/color.html).
 
-const White = const Color(0xFFFFFFFF);
-const Black = const Color(0x00000000);
+const white = const Color(0xFFFFFFFF);
+const black = const Color(0xFF000000);
+const transparent = const Color(0x00000000);
 
 const Map<int, Color> Red = const {
    50: const Color(0xFFFFEBEE),

sdk/lib/theme/theme_data.dart

@@ -21,11 +21,13 @@ class ThemeData {
       this.primarySwatch = primarySwatch,
       primaryColorBrightness = primarySwatch == null ? brightness : ThemeBrightness.dark,
       canvasColor = brightness == ThemeBrightness.dark ? colors.Grey[850] : colors.Grey[50],
-      cardColor = brightness == ThemeBrightness.dark ? colors.Grey[800] : colors.White,
+      cardColor = brightness == ThemeBrightness.dark ? colors.Grey[800] : colors.white,
       dividerColor = brightness == ThemeBrightness.dark ? const Color(0x1FFFFFFF) : const Color(0x1F000000),
       // Some users want the pre-multiplied color, others just want the opacity.
       hintColor = brightness == ThemeBrightness.dark ? const Color(0x42FFFFFF) : const Color(0x4C000000),
       hintOpacity = brightness == ThemeBrightness.dark ? 0.26 : 0.30,
+      highlightColor = const Color(0x66999999),
+      selectedColor = const Color(0x33999999),
       text = brightness == ThemeBrightness.dark ? typography.white : typography.black {
     assert(brightness != null);
 
@@ -56,6 +58,8 @@ class ThemeData {
   final Color cardColor;
   final Color dividerColor;
   final Color hintColor;
+  final Color highlightColor;
+  final Color selectedColor;
   final double hintOpacity;
   final typography.TextTheme text;
 

sdk/lib/widgets/dialog.dart

@@ -39,7 +39,7 @@ class Dialog extends Component {
   Color get _color {
     switch (Theme.of(this).brightness) {
       case ThemeBrightness.light:
-        return colors.White;
+        return colors.white;
       case ThemeBrightness.dark:
         return colors.Grey[800];
     }

sdk/lib/widgets/menu_item.dart

@@ -2,7 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:sky' as sky;
+
 import 'package:sky/painting/text_style.dart';
+import 'package:sky/theme/colors.dart' as colors;
 import 'package:sky/widgets/basic.dart';
 import 'package:sky/widgets/button_base.dart';
 import 'package:sky/widgets/default_text_style.dart';
@@ -11,20 +14,6 @@ import 'package:sky/widgets/ink_well.dart';
 import 'package:sky/widgets/theme.dart';
 import 'package:sky/widgets/widget.dart';
 
-const BoxDecoration _kHighlightDecoration = const BoxDecoration(
-  backgroundColor: const Color.fromARGB(102, 153, 153, 153)
-);
-
-// TODO(abarth): We shouldn't need _kHighlightBoring, but currently Container
-//               isn't smart enough to retain the components it builds when we
-//               add or remove a |decoration|. For now, we use a transparent
-//               decoration to avoid changing the structure of the tree. The
-//               right fix, however, is to make Container smarter about how it
-//               syncs its subcomponents.
-const BoxDecoration _kHighlightBoring = const BoxDecoration(
-  backgroundColor: const Color.fromARGB(0, 0, 0, 0)
-);
-
 class MenuItem extends ButtonBase {
   MenuItem({ String key, this.icon, this.children, this.onPressed, this.selected: false })
     : super(key: key);
@@ -42,22 +31,40 @@ class MenuItem extends ButtonBase {
     super.syncFields(source);
   }
 
-  TextStyle get textStyle {
-    TextStyle result = Theme.of(this).text.body2;
-    if (highlight)
-      result = result.copyWith(color: Theme.of(this).primaryColor);
+  TextStyle _getTextStyle(ThemeData themeData) {
+    TextStyle result = themeData.text.body2;
+    if (selected)
+      result = result.copyWith(color: themeData.primaryColor);
     return result;
   }
 
+  Color _getBackgroundColor(ThemeData themeData) {
+    if (highlight)
+      return themeData.highlightColor;
+    if (selected)
+      return themeData.selectedColor;
+    return colors.transparent;
+  }
+
   Widget buildContent() {
+    ThemeData themeData = Theme.of(this);
+
     List<Widget> flexChildren = new List<Widget>();
     if (icon != null) {
+      Widget child = new Icon(type: icon, size: 24);
+      if (selected) {
+        child = new ColorFilter(
+          color: themeData.primaryColor,
+          transferMode: sky.TransferMode.srcATop,
+          child: child
+        );
+      }
       flexChildren.add(
         new Opacity(
           opacity: selected ? 1.0 : 0.45,
           child: new Padding(
             padding: const EdgeDims.symmetric(horizontal: 16.0),
-            child: new Icon(type: icon, size: 24)
+            child: child
           )
         )
       );
@@ -67,12 +74,13 @@ class MenuItem extends ButtonBase {
         child: new Padding(
           padding: const EdgeDims.symmetric(horizontal: 16.0),
           child: new DefaultTextStyle(
-            style: textStyle,
+            style: _getTextStyle(themeData),
             child: new Flex(children, direction: FlexDirection.horizontal)
           )
         )
       )
     );
+
     return new Listener(
       onGestureTap: (_) {
         if (onPressed != null)
@@ -80,12 +88,9 @@ class MenuItem extends ButtonBase {
       },
       child: new Container(
         height: 48.0,
-        decoration: selected ? _kHighlightDecoration : _kHighlightBoring,
-        child: new Container(
-          decoration: highlight ? _kHighlightDecoration : _kHighlightBoring,
-          child: new InkWell(
-            child: new Flex(flexChildren)
-          )
+        decoration: new BoxDecoration(backgroundColor: _getBackgroundColor(themeData)),
+        child: new InkWell(
+          child: new Flex(flexChildren)
         )
       )
     );

sdk/lib/widgets/tabs.dart

@@ -416,7 +416,7 @@ class TabBar extends Scrollable {
     Color backgroundColor = themeData.primaryColor;
     Color indicatorColor = themeData.accentColor;
     if (indicatorColor == backgroundColor) {
-      indicatorColor = colors.White;
+      indicatorColor = colors.white;
     }
 
     TextStyle textStyle;