Make Sky's drawer match Material Design spec

sky/framework/components/drawer.dart

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 import '../animation/animation.dart';
 import '../animation/curves.dart';
 import '../fn.dart';
 import '../theme/colors.dart';
 import '../theme/shadows.dart';
 import 'dart:async';
 import 'dart:math' as math;
 import 'dart:sky' as sky;
 import 'material.dart';
 
-const double _kWidth = 256.0;
+const double _kWidth = 304.0;
 const double _kMinFlingVelocity = 0.4;
 const double _kBaseSettleDurationMS = 246.0;
 const double _kMaxSettleDurationMS = 600.0;
-const Cubic _kAnimationCurve = easeOut;
+const Cubic _kAnimationCurve = parabolicRise;
 
 class DrawerAnimation extends Animation {
   Stream<double> get onPositionChanged => onValueChanged;
 
   bool get _isMostlyClosed => value <= -_kWidth / 2;
 
   DrawerAnimation() {
     value = -_kWidth;
   }
 
@@ skipping 43 matching lines @@
     double distance = (targetPosition - value).abs();
     double duration = distance / velocityX;
 
     animateTo(targetPosition, duration, curve: linear);
   }
 }
 
 class Drawer extends Component {
   static final Style _style = new Style('''
     position: absolute;
-    z-index: 2;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;'''
   );
 
   static final Style _maskStyle = new Style('''
     background-color: black;
     will-change: opacity;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;'''
   );
 
   static final Style _contentStyle = new Style('''
     background-color: ${Grey[50]};
     will-change: transform;
     position: absolute;
-    z-index: 3;
-    width: 256px;
+    width: 304px;
     top: 0;
     left: 0;
     bottom: 0;'''
   );
 
   DrawerAnimation animation;
   List<Node> children;
   int level;
 
   Drawer({
@@ skipping 22 matching lines @@
         _position = position;
       });
     });
   }
 
   Node build() {
     _ensureListening();
 
     bool isClosed = _position <= -_kWidth;
     String inlineStyle = 'display: ${isClosed ? 'none' : ''}';
-    String maskInlineStyle = 'opacity: ${(_position / _kWidth + 1) * 0.25}';
+    String maskInlineStyle = 'opacity: ${(_position / _kWidth + 1) * 0.5}';
     String contentInlineStyle = 'transform: translateX(${_position}px)';
 
     Container mask = new Container(
       key: 'Mask',
       style: _maskStyle,
       inlineStyle: maskInlineStyle
     )..events.listen('gesturetap', animation.handleMaskTap)
      ..events.listen('gestureflingstart', animation.handleFlingStart);
 
     Material content = new Material(
       key: 'Content',
       style: _contentStyle,
       inlineStyle: contentInlineStyle,
       children: children,
       level: level
     );
 
     return new Container(
       style: _style,
       inlineStyle: inlineStyle,
       children: [ mask, content ]
     );
   }
 }