From 65592c41cd18f468b82f97b46c83d3cdf2465411 Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Thu, 5 Mar 2015 09:58:23 -0800
Subject: [PATCH] Add constants for material colors and shadows

This CL removes the hard-coded colors and shadows from the fn widgets and
replaces them with compile-time constants. The color values are from the
material spec:

http://www.google.com/design/spec/style/color.html#color-color-palette

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/983733003
---
 examples/fn/widgets/drawer.dart                 | 4 ++--
 examples/fn/widgets/drawerheader.dart           | 2 +-
 examples/fn/widgets/floating_action_button.dart | 2 +-
 examples/fn/widgets/toolbar.dart                | 4 ++--
 examples/fn/widgets/widgets.dart                | 2 ++
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/examples/fn/widgets/drawer.dart b/examples/fn/widgets/drawer.dart
index 26edbb2f07d..ab7277d64e0 100644
--- a/examples/fn/widgets/drawer.dart
+++ b/examples/fn/widgets/drawer.dart
@@ -103,7 +103,7 @@ class Drawer extends Component {
     left: 0;
     bottom: 0;
     right: 0;
-    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);'''
+    box-shadpw: ${Shadow[3]};'''
   );
 
   static Style _maskStyle = new Style('''
@@ -117,7 +117,7 @@ class Drawer extends Component {
   );
 
   static Style _contentStyle = new Style('''
-    background-color: #FAFAFA;
+    background-color: ${Grey[50]};
     will-change: transform;
     position: absolute;
     z-index: 3;
diff --git a/examples/fn/widgets/drawerheader.dart b/examples/fn/widgets/drawerheader.dart
index 69810a43a9e..b72e302d223 100644
--- a/examples/fn/widgets/drawerheader.dart
+++ b/examples/fn/widgets/drawerheader.dart
@@ -7,7 +7,7 @@ class DrawerHeader extends Component {
     flex-direction: column;
     height: 140px;
     -webkit-user-select: none;
-    background-color: #E3ECF5;
+    background-color: ${BlueGrey[50]};
     border-bottom: 1px solid #D1D9E1;
     padding-bottom: 7px;
     margin-bottom: 8px;'''
diff --git a/examples/fn/widgets/floating_action_button.dart b/examples/fn/widgets/floating_action_button.dart
index a9a957b7a0f..e0853aab029 100644
--- a/examples/fn/widgets/floating_action_button.dart
+++ b/examples/fn/widgets/floating_action_button.dart
@@ -12,7 +12,7 @@ class FloatingActionButton extends MaterialComponent {
     transform: translateX(0);
     width: 56px;
     height: 56px;
-    background-color: #F44336;
+    background-color: ${Red[500]};
     color: white;
     border-radius: 28px;'''
   );
diff --git a/examples/fn/widgets/toolbar.dart b/examples/fn/widgets/toolbar.dart
index cc73040151d..a4afc5c1b6e 100644
--- a/examples/fn/widgets/toolbar.dart
+++ b/examples/fn/widgets/toolbar.dart
@@ -9,9 +9,9 @@ class Toolbar extends Component {
     align-items: center;
     height: 84px;
     z-index: 1;
-    background-color: #9C27B0; // Purple 500
+    background-color: ${Purple[500]};
     color: white;
-    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);'''
+    box-shadow: ${Shadow[2]};'''
   );
 
   Toolbar({String key, this.children}) : super(key: key);
diff --git a/examples/fn/widgets/widgets.dart b/examples/fn/widgets/widgets.dart
index a8a8b0a72f7..23ad0b91233 100644
--- a/examples/fn/widgets/widgets.dart
+++ b/examples/fn/widgets/widgets.dart
@@ -2,6 +2,8 @@ library widgets;
 
 import '../lib/fn.dart';
 import '../../../framework/fling-curve.dart';
+import '../../../framework/theme/colors.dart';
+import '../../../framework/theme/shadows.dart';
 import 'dart:collection';
 import 'dart:async';
 import 'dart:math' as math;