Commit 65592c41 authored by Adam Barth's avatar Adam Barth

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
parent 1c73dfb9
...@@ -103,7 +103,7 @@ class Drawer extends Component { ...@@ -103,7 +103,7 @@ class Drawer extends Component {
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 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(''' static Style _maskStyle = new Style('''
...@@ -117,7 +117,7 @@ class Drawer extends Component { ...@@ -117,7 +117,7 @@ class Drawer extends Component {
); );
static Style _contentStyle = new Style(''' static Style _contentStyle = new Style('''
background-color: #FAFAFA; background-color: ${Grey[50]};
will-change: transform; will-change: transform;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
......
...@@ -7,7 +7,7 @@ class DrawerHeader extends Component { ...@@ -7,7 +7,7 @@ class DrawerHeader extends Component {
flex-direction: column; flex-direction: column;
height: 140px; height: 140px;
-webkit-user-select: none; -webkit-user-select: none;
background-color: #E3ECF5; background-color: ${BlueGrey[50]};
border-bottom: 1px solid #D1D9E1; border-bottom: 1px solid #D1D9E1;
padding-bottom: 7px; padding-bottom: 7px;
margin-bottom: 8px;''' margin-bottom: 8px;'''
......
...@@ -12,7 +12,7 @@ class FloatingActionButton extends MaterialComponent { ...@@ -12,7 +12,7 @@ class FloatingActionButton extends MaterialComponent {
transform: translateX(0); transform: translateX(0);
width: 56px; width: 56px;
height: 56px; height: 56px;
background-color: #F44336; background-color: ${Red[500]};
color: white; color: white;
border-radius: 28px;''' border-radius: 28px;'''
); );
......
...@@ -9,9 +9,9 @@ class Toolbar extends Component { ...@@ -9,9 +9,9 @@ class Toolbar extends Component {
align-items: center; align-items: center;
height: 84px; height: 84px;
z-index: 1; z-index: 1;
background-color: #9C27B0; // Purple 500 background-color: ${Purple[500]};
color: white; 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); Toolbar({String key, this.children}) : super(key: key);
......
...@@ -2,6 +2,8 @@ library widgets; ...@@ -2,6 +2,8 @@ library widgets;
import '../lib/fn.dart'; import '../lib/fn.dart';
import '../../../framework/fling-curve.dart'; import '../../../framework/fling-curve.dart';
import '../../../framework/theme/colors.dart';
import '../../../framework/theme/shadows.dart';
import 'dart:collection'; import 'dart:collection';
import 'dart:async'; import 'dart:async';
import 'dart:math' as math; import 'dart:math' as math;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment