Rename editing2/ and theme2/ to editing/ and theme/.

Flesh out a README.md file for the SDK. Make the stocks app test wait for the app to be mounted, to catch some more errors, like typos in the mount callback. R=abarth@chromium.org Review URL: https://codereview.chromium.org/1182053012.
2026-02-20 02:29:02 +08:00 · 2015-06-18 12:44:10 -07:00 · 2015-06-18 12:44:10 -07:00 · ee4a7bc925
commit ee4a7bc925
parent fd4527dd4a
36 changed files with 179 additions and 834 deletions
--- a/examples/rendering/shadowed_box.dart
+++ b/examples/rendering/shadowed_box.dart
@ -7,8 +7,8 @@ import 'dart:sky';
 import 'package:sky/rendering/box.dart';
 import 'package:sky/rendering/flex.dart';
 import 'package:sky/rendering/sky_binding.dart';
-import 'package:sky/theme2/colors.dart';
-import 'package:sky/theme2/shadows.dart';
+import 'package:sky/theme/colors.dart';
+import 'package:sky/theme/shadows.dart';

 void main() {
  var coloredBox = new RenderDecoratedBox(
--- a/examples/rendering/touch_demo.dart
+++ b/examples/rendering/touch_demo.dart
@ -10,7 +10,7 @@ import 'package:sky/rendering/object.dart';
 import 'package:sky/rendering/paragraph.dart';
 import 'package:sky/rendering/sky_binding.dart';
 import 'package:sky/rendering/stack.dart';
-import 'package:sky/theme2/colors.dart';
+import 'package:sky/theme/colors.dart';

 // Material design colors. :p
 List<Color> colors = [
--- a/examples/stocks2/lib/stock_arrow.dart
+++ b/examples/stocks2/lib/stock_arrow.dart
@ -7,7 +7,7 @@ import 'dart:sky' as sky;

 import 'package:sky/rendering/box.dart';
 import 'package:sky/rendering/object.dart';
-import 'package:sky/theme2/colors.dart' as colors;
+import 'package:sky/theme/colors.dart' as colors;
 import 'package:sky/widgets/basic.dart';

 class StockArrow extends Component {
--- a/examples/stocks2/lib/stock_home.dart
+++ b/examples/stocks2/lib/stock_home.dart
@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

-import 'package:sky/editing2/input.dart';
-import 'package:sky/theme2/colors.dart' as colors;
-import 'package:sky/theme2/typography.dart' as typography;
+import 'package:sky/editing/input.dart';
+import 'package:sky/theme/colors.dart' as colors;
+import 'package:sky/theme/typography.dart' as typography;
 import 'package:sky/widgets/basic.dart';
 import 'package:sky/widgets/drawer.dart';
 import 'package:sky/widgets/drawer_header.dart';
--- a/examples/stocks2/lib/stock_row.dart
+++ b/examples/stocks2/lib/stock_row.dart
@ -4,7 +4,7 @@

 import 'package:sky/painting/text_style.dart';
 import 'package:sky/rendering/box.dart';
-import 'package:sky/theme2/typography.dart' as typography;
+import 'package:sky/theme/typography.dart' as typography;
 import 'package:sky/widgets/ink_well.dart';
 import 'package:sky/widgets/basic.dart';

--- a/examples/stocks2/lib/stock_settings.dart
+++ b/examples/stocks2/lib/stock_settings.dart
@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

-import 'package:sky/theme2/colors.dart' as colors;
-import 'package:sky/theme2/typography.dart' as typography;
+import 'package:sky/theme/colors.dart' as colors;
+import 'package:sky/theme/typography.dart' as typography;
 import 'package:sky/widgets/basic.dart';
 import 'package:sky/widgets/checkbox.dart';
 import 'package:sky/widgets/icon_button.dart';
--- a/examples/widgets/sector.dart
+++ b/examples/widgets/sector.dart
@ -7,9 +7,9 @@ import 'dart:math' as math;
 import 'package:sky/rendering/box.dart';
 import 'package:sky/rendering/flex.dart';
 import 'package:sky/rendering/sky_binding.dart';
-import 'package:sky/theme2/colors.dart';
-import 'package:sky/theme2/edges.dart';
-import 'package:sky/theme2/typography.dart';
+import 'package:sky/theme/colors.dart';
+import 'package:sky/theme/edges.dart';
+import 'package:sky/theme/typography.dart';
 import 'package:sky/widgets/basic.dart';
 import 'package:sky/widgets/material.dart';
 import 'package:sky/widgets/raised_button.dart';
--- a/home.dart
+++ b/home.dart
@ -6,9 +6,9 @@ import 'dart:sky';

 import 'package:mojom/intents/intents.mojom.dart';
 import 'package:sky/framework/shell.dart' as shell;
-import 'package:sky/theme2/colors.dart' as colors;
-import 'package:sky/theme2/edges.dart';
-import 'package:sky/theme2/typography.dart' as typography;
+import 'package:sky/theme/colors.dart' as colors;
+import 'package:sky/theme/edges.dart';
+import 'package:sky/theme/typography.dart' as typography;
 import 'package:sky/widgets/material.dart';
 import 'package:sky/widgets/raised_button.dart';
 import 'package:sky/widgets/scaffold.dart';
--- a/sdk/BUILD.gn
+++ b/sdk/BUILD.gn
@ -7,7 +7,6 @@ import("//mojo/public/dart/rules.gni")
 dart_pkg("sdk") {
  sources = [
    "CHANGELOG.md",
-    "README.md",
    "bin/init.dart",
    "lib/animation/animated_value.dart",
    "lib/animation/curves.dart",
@ -22,11 +21,10 @@ dart_pkg("sdk") {
    "lib/base/node.dart",
    "lib/base/scheduler.dart",
    "lib/download_material_design_icons",
-    "lib/editing2/editable_string.dart",
-    "lib/editing2/editable_text.dart",
-    "lib/editing2/input.dart",
-    "lib/editing2/keyboard.dart",
-    "lib/framework/README.md",
+    "lib/editing/editable_string.dart",
+    "lib/editing/editable_text.dart",
+    "lib/editing/input.dart",
+    "lib/editing/keyboard.dart",
    "lib/framework/animation/animated_value.dart",
    "lib/framework/animation/curves.dart",
    "lib/framework/animation/fling_curve.dart",
@ -88,11 +86,11 @@ dart_pkg("sdk") {
    "lib/rendering/sky_binding.dart",
    "lib/rendering/stack.dart",
    "lib/sky_tool",
-    "lib/theme2/colors.dart",
-    "lib/theme2/edges.dart",
-    "lib/theme2/shadows.dart",
-    "lib/theme2/typography.dart",
-    "lib/theme2/view_configuration.dart",
+    "lib/theme/colors.dart",
+    "lib/theme/edges.dart",
+    "lib/theme/shadows.dart",
+    "lib/theme/typography.dart",
+    "lib/theme/view_configuration.dart",
    "lib/widgets/animated_component.dart",
    "lib/widgets/basic.dart",
    "lib/widgets/button_base.dart",
--- a/sdk/lib/README.md
+++ b/sdk/lib/README.md
@ -0,0 +1,66 @@
+SKY SDK
+========
+
+Sky and Sky's SDK are designed as layered frameworks, where each layer
+depends on the ones below it but could be replaced wholesale.
+
+The bottom-most layer is the Sky Platform, which is exposed to Dart
+code as various ```dart:``` packages, including ```dart:sky```.
+
+The [base/](base/) directory contains libraries that extend these core
+APIs to provide base classes for tree structures
+([base/node.dart](base/node.dart)), hit testing
+([base/hit_test.dart](base/hit_test.dart)), debugging
+([base/debug.dart](base/debug.dart)), and task scheduling
+([base/scheduler.dart](base/scheduler.dart)).
+
+Above this are the files in the [painting/](painting/) directory,
+which provide APIs related to drawing graphics, and in the
+[animation/](animation/) directory, which provide core primitives for
+animating values.
+
+Layout primitives are provided in the next layer, found in the
+[rendering/](rendering/) directory. They use ```dart:sky``` and the
+APIs exposed in painting/ to provide a retained-mode layout and
+rendering model for applications or documents.
+
+Widgets are provided by the files in the [widgets/](widgets/)
+directory, using a reactive framework. They use data given in the
+[theme/](theme/) directory to select styles consistent with Material
+Design.
+
+Text input widgets are layered on this mechanism and can be found in
+the [editing/](editing/) directory.
+
+Alongside the above is the [mojo/](mojo/) directory, which contains
+anything that uses the Mojo IPC mechanism, typically as part of
+wrapping host operating system features. Some of those Host APIs are
+implemented in the host system's preferred language.
+
+Here is a diagram summarising all this:
+
+```
+  +-----------------------------+ ------
+  |           YOUR APP          |
+  |     +--------------------+--+ 
+  |     |      [editing/](editing/)      |  |
+  |  +--+-------------------++  |
+  |  |  [widgets/](widgets/)  ([theme/](theme/))  |   |
+  | ++---------------------++   |  Dart
+  | |      [rendering/](rendering/)      |    |
+  +-+---------+------------+    |
+  | [painting/](painting/) | [animation/](animation/) |    |
+  +---------------+--------+    |
+  |    [base/](base/)      |  [mojo/](mojo/)      |
+  +------------+--+-+----+------+ -------
+  |  dart:sky  |    |    | Host |
+  +--------+---+    |    | APIs |  C++
+  |  Skia  |  [Dart](https://api.dartlang.org/)  |    +------+  ObjC
+  +--------+--------+           |  Java
+  |            Mojo             |
+  +-----------------------------+ -------
+  |    Host Operating System    |  C/C++
+  +-----------------------------+ -------
+```
+
+TODO(ianh): document dart:sky and the Host APIs somewhere
--- a/sdk/lib/editing2/editable_string.dart
+++ b/sdk/lib/editing2/editable_string.dart
@ -1,122 +0,0 @@
-// 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 'package:mojom/keyboard/keyboard.mojom.dart';
-
-typedef void StringUpdated();
-
-class TextRange {
-  final int start;
-  final int end;
-
-  TextRange({this.start, this.end});
-  TextRange.collapsed(int position)
-      : start = position,
-        end = position;
-  const TextRange.empty()
-      : start = -1,
-        end = -1;
-
-  bool get isValid => start >= 0 && end >= 0;
-  bool get isCollapsed => start == end;
-}
-
-class EditableString implements KeyboardClient {
-  String text;
-  TextRange composing = const TextRange.empty();
-  TextRange selection = const TextRange.empty();
-
-  final StringUpdated onUpdated;
-
-  KeyboardClientStub stub;
-
-  EditableString({this.text: '', this.onUpdated}) {
-    stub = new KeyboardClientStub.unbound()..impl = this;
-  }
-
-  String textBefore(TextRange range) {
-    return text.substring(0, range.start);
-  }
-
-  String textAfter(TextRange range) {
-    return text.substring(range.end);
-  }
-
-  String textInside(TextRange range) {
-    return text.substring(range.start, range.end);
-  }
-
-  void _delete(TextRange range) {
-    if (range.isCollapsed || !range.isValid) return;
-    text = textBefore(range) + textAfter(range);
-  }
-
-  TextRange _append(String newText) {
-    int start = text.length;
-    text += newText;
-    return new TextRange(start: start, end: start + newText.length);
-  }
-
-  TextRange _replace(TextRange range, String newText) {
-    assert(range.isValid);
-
-    String before = textBefore(range);
-    String after = textAfter(range);
-
-    text = before + newText + after;
-    return new TextRange(
-        start: before.length, end: before.length + newText.length);
-  }
-
-  TextRange _replaceOrAppend(TextRange range, String newText) {
-    if (!range.isValid) return _append(newText);
-    return _replace(range, newText);
-  }
-
-  void commitCompletion(CompletionData completion) {
-    // TODO(abarth): Not implemented.
-  }
-
-  void commitCorrection(CorrectionData correction) {
-    // TODO(abarth): Not implemented.
-  }
-
-  void commitText(String text, int newCursorPosition) {
-    // TODO(abarth): Why is |newCursorPosition| always 1?
-    TextRange committedRange = _replaceOrAppend(composing, text);
-    selection = new TextRange.collapsed(committedRange.end);
-    composing = const TextRange.empty();
-    onUpdated();
-  }
-
-  void deleteSurroundingText(int beforeLength, int afterLength) {
-    TextRange beforeRange = new TextRange(
-        start: selection.start - beforeLength, end: selection.start);
-    TextRange afterRange =
-        new TextRange(start: selection.end, end: selection.end + afterLength);
-    _delete(afterRange);
-    _delete(beforeRange);
-    selection = new TextRange(
-        start: selection.start - beforeLength,
-        end: selection.end - beforeLength);
-    onUpdated();
-  }
-
-  void setComposingRegion(int start, int end) {
-    composing = new TextRange(start: start, end: end);
-    onUpdated();
-  }
-
-  void setComposingText(String text, int newCursorPosition) {
-    // TODO(abarth): Why is |newCursorPosition| always 1?
-    composing = _replaceOrAppend(composing, text);
-    selection = new TextRange.collapsed(composing.end);
-    onUpdated();
-  }
-
-  void setSelection(int start, int end) {
-    selection = new TextRange(start: start, end: end);
-    onUpdated();
-  }
-}
--- a/sdk/lib/editing2/editable_text.dart
+++ b/sdk/lib/editing2/editable_text.dart
@ -1,98 +0,0 @@
-// 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 'dart:async';
-
-import '../widgets/basic.dart';
-import 'editable_string.dart';
-
-class EditableText extends Component {
-
-  EditableText({String key, this.value, this.focused})
-      : super(key: key, stateful: true);
-
-  // static final Style _cursorStyle = new Style('''
-  //   width: 2px;
-  //   height: 1.2em;
-  //   vertical-align: top;
-  //   background-color: ${Blue[500]};'''
-  // );
-
-  // static final Style _composingStyle = new Style('''
-  //   text-decoration: underline;'''
-  // );
-
-  EditableString value;
-  bool focused;
-
-  void syncFields(EditableText source) {
-    value = source.value;
-    focused = source.focused;
-  }
-
-  Timer _cursorTimer;
-  bool _showCursor = false;
-
-  void _cursorTick(Timer timer) {
-    setState(() {
-      _showCursor = !_showCursor;
-    });
-  }
-
-  void _startCursorTimer() {
-    _showCursor = true;
-    _cursorTimer = new Timer.periodic(
-        new Duration(milliseconds: 500), _cursorTick);
-  }
-
-  void didUnmount() {
-    if (_cursorTimer != null)
-      _stopCursorTimer();
-    super.didUnmount();
-  }
-
-  void _stopCursorTimer() {
-    _cursorTimer.cancel();
-    _cursorTimer = null;
-    _showCursor = false;
-  }
-
-  Widget build() {
-    if (focused && _cursorTimer == null)
-      _startCursorTimer();
-    else if (!focused && _cursorTimer != null)
-      _stopCursorTimer();
-
-    //List<Widget> children = new List<Widget>();
-    String hack = "";
-
-    if (!value.composing.isValid) {
-      // children.add(new TextFragment(value.text));
-      hack += value.text;
-    } else {
-      hack += value.textBefore(value.composing);
-      hack += value.textInside(value.composing);
-      hack += value.textAfter(value.composing);
-      // if (!composing.isEmpty) {
-      //   children.add(new TextFragment(
-      //     composing,
-      //     key: 'composing',
-      //     style: _composingStyle
-      //   ));
-      // }
-
-      // String afterComposing = value.textAfter(value.composing);
-      // if (!afterComposing.isEmpty)
-      //   children.add(new TextFragment(afterComposing));
-    }
-
-    // if (_showCursor)
-    //   children.add(new Container(
-    //     key: 'cursor',
-    //     // style: _cursorStyle
-    //     ));
-
-    return new Text(hack);
-  }
-}
--- a/sdk/lib/editing2/input.dart
+++ b/sdk/lib/editing2/input.dart
@ -1,101 +0,0 @@
-// 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 '../widgets/basic.dart';
-import 'editable_string.dart';
-import 'editable_text.dart';
-import 'keyboard.dart';
-
-typedef void ValueChanged(value);
-
-class Input extends Component {
-
-  Input({String key,
-         this.placeholder,
-         this.onChanged,
-         this.focused})
-      : super(key: key, stateful: true) {
-    _editableValue = new EditableString(
-      text: _value,
-      onUpdated: _handleTextUpdated
-    );
-  }
-
-  // static final Style _style = new Style('''
-  //   transform: translateX(0);
-  //   margin: 8px;
-  //   padding: 8px;
-  //   border-bottom: 1px solid ${Grey[200]};
-  //   align-self: center;
-  //   height: 1.2em;
-  //   white-space: pre;
-  //   overflow: hidden;'''
-  // );
-
-  // static final Style _placeholderStyle = new Style('''
-  //   top: 8px;
-  //   left: 8px;
-  //   position: absolute;
-  //   ${typography.black.caption};'''
-  // );
-
-  // static final String _focusedInlineStyle = '''
-  //   padding: 7px;
-  //   border-bottom: 2px solid ${Blue[500]};''';
-
-  String placeholder;
-  ValueChanged onChanged;
-  bool focused = false;
-
-  void syncFields(Input source) {
-    placeholder = source.placeholder;
-    onChanged = source.onChanged;
-    focused = source.focused;
-  }
-
-  String _value = '';
-  bool _isAttachedToKeyboard = false;
-  EditableString _editableValue;
-
-  void _handleTextUpdated() {
-    scheduleBuild();
-    if (_value != _editableValue.text) {
-      _value = _editableValue.text;
-      if (onChanged != null)
-        onChanged(_value);
-    }
-  }
-
-  Widget build() {
-    if (focused && !_isAttachedToKeyboard) {
-      keyboard.show(_editableValue.stub);
-      _isAttachedToKeyboard = true;
-    }
-
-    List<Widget> children = [];
-
-    if (placeholder != null && _value.isEmpty) {
-      children.add(new Container(
-          // style: _placeholderStyle,
-          child: new Text(placeholder)
-      ));
-    }
-
-    children.add(new EditableText(value: _editableValue, focused: focused));
-
-    return new Listener(
-      // style: _style,
-      // inlineStyle: focused ? _focusedInlineStyle : null,
-      child: new Stack(children),
-      onPointerDown: (_) => keyboard.showByRequest()
-    );
-  }
-
-  void didUnmount() {
-    if (_isAttachedToKeyboard)
-      keyboard.hide();
-    super.didUnmount();
-  }
-
-}
--- a/sdk/lib/editing2/keyboard.dart
+++ b/sdk/lib/editing2/keyboard.dart
@ -1,21 +0,0 @@
-// 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 'package:mojom/keyboard/keyboard.mojom.dart';
-
-import '../framework/shell.dart' as shell;
-
-class _KeyboardConnection {
-  KeyboardServiceProxy proxy;
-
-  _KeyboardConnection() {
-    proxy = new KeyboardServiceProxy.unbound();
-    shell.requestService("mojo:keyboard", proxy);
-  }
-
-  KeyboardService get keyboard => proxy.ptr;
-}
-
-final _KeyboardConnection _connection = new _KeyboardConnection();
-final KeyboardService keyboard = _connection.keyboard;
--- a/sdk/lib/framework/README.md
+++ b/sdk/lib/framework/README.md
@ -1,22 +0,0 @@
-SKY SDK
-========
-
-Sky and Sky's SDK are designed as layered frameworks, where each layer
-depends on the ones below it but could be replaced wholesale.
-
-The bottom-most layer is the Sky Platform, which is exposed to Dart
-code as the ```dart:sky``` package.
-
-Above this are the files in the [painting/](painting/) directory,
-which provide APIs related to drawing graphics.
-
-Layout primitives are provided in the next layer, found in the
-[rendering/](rendering/) directory. They use ```dart:sky``` and the
-APIs exposed in painting/ to provide a retained-mode layout and
-rendering model for applications or documents.
-
-Widgets are provided by the files in the [widgets/](widgets/)
-directory, using a reactive framework.
-
-Text input widgets are layered on this mechanism and can be found in
-the [editing2/](editing2/) directory.
--- a/sdk/lib/theme2/colors.dart
+++ b/sdk/lib/theme2/colors.dart
@ -1,253 +0,0 @@
-// 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 'dart:sky' show Color;
-
-const Map<int, Color> Red = const {
-   50: const Color(0xFFFFEBEE),
-  100: const Color(0xFFFFCDD2),
-  200: const Color(0xFFEF9A9A),
-  300: const Color(0xFFE57373),
-  400: const Color(0xFFEF5350),
-  500: const Color(0xFFF44336),
-  600: const Color(0xFFE53935),
-  700: const Color(0xFFD32F2F),
-  800: const Color(0xFFC62828),
-  900: const Color(0xFFB71C1C),
-};
-
-const Map<int, Color> Pink = const {
-   50: const Color(0xFFFCE4EC),
-  100: const Color(0xFFF8BBD0),
-  200: const Color(0xFFF48FB1),
-  300: const Color(0xFFF06292),
-  400: const Color(0xFFEC407A),
-  500: const Color(0xFFE91E63),
-  600: const Color(0xFFD81B60),
-  700: const Color(0xFFC2185B),
-  800: const Color(0xFFAD1457),
-  900: const Color(0xFF880E4F),
-};
-
-const Map<int, Color> Purple = const {
-   50: const Color(0xFFF3E5F5),
-  100: const Color(0xFFE1BEE7),
-  200: const Color(0xFFCE93D8),
-  300: const Color(0xFFBA68C8),
-  400: const Color(0xFFAB47BC),
-  500: const Color(0xFF9C27B0),
-  600: const Color(0xFF8E24AA),
-  700: const Color(0xFF7B1FA2),
-  800: const Color(0xFF6A1B9A),
-  900: const Color(0xFF4A148C),
-};
-
-const Map<int, Color> DeepPurple = const {
-   50: const Color(0xFFEDE7F6),
-  100: const Color(0xFFD1C4E9),
-  200: const Color(0xFFB39DDB),
-  300: const Color(0xFF9575CD),
-  400: const Color(0xFF7E57C2),
-  500: const Color(0xFF673AB7),
-  600: const Color(0xFF5E35B1),
-  700: const Color(0xFF512DA8),
-  800: const Color(0xFF4527A0),
-  900: const Color(0xFF311B92),
-};
-
-const Map<int, Color> Indigo = const {
-   50: const Color(0xFFE8EAF6),
-  100: const Color(0xFFC5CAE9),
-  200: const Color(0xFF9FA8DA),
-  300: const Color(0xFF7986CB),
-  400: const Color(0xFF5C6BC0),
-  500: const Color(0xFF3F51B5),
-  600: const Color(0xFF3949AB),
-  700: const Color(0xFF303F9F),
-  800: const Color(0xFF283593),
-  900: const Color(0xFF1A237E),
-};
-
-const Map<int, Color> Blue = const {
-   50: const Color(0xFFE3F2FD),
-  100: const Color(0xFFBBDEFB),
-  200: const Color(0xFF90CAF9),
-  300: const Color(0xFF64B5F6),
-  400: const Color(0xFF42A5F5),
-  500: const Color(0xFF2196F3),
-  600: const Color(0xFF1E88E5),
-  700: const Color(0xFF1976D2),
-  800: const Color(0xFF1565C0),
-  900: const Color(0xFF0D47A1),
-};
-
-const Map<int, Color> LightBlue = const {
-   50: const Color(0xFFE1F5FE),
-  100: const Color(0xFFB3E5FC),
-  200: const Color(0xFF81D4FA),
-  300: const Color(0xFF4FC3F7),
-  400: const Color(0xFF29B6F6),
-  500: const Color(0xFF03A9F4),
-  600: const Color(0xFF039BE5),
-  700: const Color(0xFF0288D1),
-  800: const Color(0xFF0277BD),
-  900: const Color(0xFF01579B),
-};
-
-const Map<int, Color> Cyan = const {
-   50: const Color(0xFFE0F7FA),
-  100: const Color(0xFFB2EBF2),
-  200: const Color(0xFF80DEEA),
-  300: const Color(0xFF4DD0E1),
-  400: const Color(0xFF26C6DA),
-  500: const Color(0xFF00BCD4),
-  600: const Color(0xFF00ACC1),
-  700: const Color(0xFF0097A7),
-  800: const Color(0xFF00838F),
-  900: const Color(0xFF006064),
-};
-
-const Map<int, Color> Teal = const {
-   50: const Color(0xFFE0F2F1),
-  100: const Color(0xFFB2DFDB),
-  200: const Color(0xFF80CBC4),
-  300: const Color(0xFF4DB6AC),
-  400: const Color(0xFF26A69A),
-  500: const Color(0xFF009688),
-  600: const Color(0xFF00897B),
-  700: const Color(0xFF00796B),
-  800: const Color(0xFF00695C),
-  900: const Color(0xFF004D40),
-};
-
-const Map<int, Color> Green = const {
-   50: const Color(0xFFE8F5E9),
-  100: const Color(0xFFC8E6C9),
-  200: const Color(0xFFA5D6A7),
-  300: const Color(0xFF81C784),
-  400: const Color(0xFF66BB6A),
-  500: const Color(0xFF4CAF50),
-  600: const Color(0xFF43A047),
-  700: const Color(0xFF388E3C),
-  800: const Color(0xFF2E7D32),
-  900: const Color(0xFF1B5E20),
-};
-
-const Map<int, Color> LightGreen = const {
-   50: const Color(0xFFF1F8E9),
-  100: const Color(0xFFDCEDC8),
-  200: const Color(0xFFC5E1A5),
-  300: const Color(0xFFAED581),
-  400: const Color(0xFF9CCC65),
-  500: const Color(0xFF8BC34A),
-  600: const Color(0xFF7CB342),
-  700: const Color(0xFF689F38),
-  800: const Color(0xFF558B2F),
-  900: const Color(0xFF33691E),
-};
-
-const Map<int, Color> Lime = const {
-   50: const Color(0xFFF9FBE7),
-  100: const Color(0xFFF0F4C3),
-  200: const Color(0xFFE6EE9C),
-  300: const Color(0xFFDCE775),
-  400: const Color(0xFFD4E157),
-  500: const Color(0xFFCDDC39),
-  600: const Color(0xFFC0CA33),
-  700: const Color(0xFFAFB42B),
-  800: const Color(0xFF9E9D24),
-  900: const Color(0xFF827717),
-};
-
-const Map<int, Color> Yellow = const {
-   50: const Color(0xFFFFFDE7),
-  100: const Color(0xFFFFF9C4),
-  200: const Color(0xFFFFF59D),
-  300: const Color(0xFFFFF176),
-  400: const Color(0xFFFFEE58),
-  500: const Color(0xFFFFEB3B),
-  600: const Color(0xFFFDD835),
-  700: const Color(0xFFFBC02D),
-  800: const Color(0xFFF9A825),
-  900: const Color(0xFFF57F17),
-};
-
-const Map<int, Color> Amber = const {
-   50: const Color(0xFFFFF8E1),
-  100: const Color(0xFFFFECB3),
-  200: const Color(0xFFFFE082),
-  300: const Color(0xFFFFD54F),
-  400: const Color(0xFFFFCA28),
-  500: const Color(0xFFFFC107),
-  600: const Color(0xFFFFB300),
-  700: const Color(0xFFFFA000),
-  800: const Color(0xFFFF8F00),
-  900: const Color(0xFFFF6F00),
-};
-
-const Map<int, Color> Orange = const {
-   50: const Color(0xFFFFF3E0),
-  100: const Color(0xFFFFE0B2),
-  200: const Color(0xFFFFCC80),
-  300: const Color(0xFFFFB74D),
-  400: const Color(0xFFFFA726),
-  500: const Color(0xFFFF9800),
-  600: const Color(0xFFFB8C00),
-  700: const Color(0xFFF57C00),
-  800: const Color(0xFFEF6C00),
-  900: const Color(0xFFE65100),
-};
-
-const Map<int, Color> DeepOrange = const {
-   50: const Color(0xFFFBE9E7),
-  100: const Color(0xFFFFCCBC),
-  200: const Color(0xFFFFAB91),
-  300: const Color(0xFFFF8A65),
-  400: const Color(0xFFFF7043),
-  500: const Color(0xFFFF5722),
-  600: const Color(0xFFF4511E),
-  700: const Color(0xFFE64A19),
-  800: const Color(0xFFD84315),
-  900: const Color(0xFFBF360C),
-};
-
-const Map<int, Color> Brown = const {
-   50: const Color(0xFFEFEBE9),
-  100: const Color(0xFFD7CCC8),
-  200: const Color(0xFFBCAAA4),
-  300: const Color(0xFFA1887F),
-  400: const Color(0xFF8D6E63),
-  500: const Color(0xFF795548),
-  600: const Color(0xFF6D4C41),
-  700: const Color(0xFF5D4037),
-  800: const Color(0xFF4E342E),
-  900: const Color(0xFF3E2723),
-};
-
-const Map<int, Color> Grey = const {
-   50: const Color(0xFFFAFAFA),
-  100: const Color(0xFFF5F5F5),
-  200: const Color(0xFFEEEEEE),
-  300: const Color(0xFFE0E0E0),
-  350: const Color(0xFFD6D6D6), // only for raised button while pressed or disabled
-  400: const Color(0xFFBDBDBD),
-  500: const Color(0xFF9E9E9E),
-  600: const Color(0xFF757575),
-  700: const Color(0xFF616161),
-  800: const Color(0xFF424242),
-  900: const Color(0xFF212121),
-};
-
-const Map<int, Color> BlueGrey = const {
-   50: const Color(0xFFECEFF1),
-  100: const Color(0xFFCFD8DC),
-  200: const Color(0xFFB0BEC5),
-  300: const Color(0xFF90A4AE),
-  400: const Color(0xFF78909C),
-  500: const Color(0xFF607D8B),
-  600: const Color(0xFF546E7A),
-  700: const Color(0xFF455A64),
-  800: const Color(0xFF37474F),
-  900: const Color(0xFF263238),
-};
--- a/sdk/lib/theme2/edges.dart
+++ b/sdk/lib/theme2/edges.dart
@ -1,11 +0,0 @@
-// 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.
-
-enum MaterialEdge { canvas, card, circle }
-
-const Map<MaterialEdge, double> edges = const {
-  MaterialEdge.canvas: null,
-  MaterialEdge.card: 2.0,
-  MaterialEdge.circle: null,
-};
--- a/sdk/lib/theme2/shadows.dart
+++ b/sdk/lib/theme2/shadows.dart
@ -1,60 +0,0 @@
-// 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 'dart:sky' show Color, Size;
-
-import '../painting/box_painter.dart';
-
-const Map<int, List<BoxShadow>> shadows = const {
-  1: const [
-    const BoxShadow(
-      color: const Color(0x1F000000),
-      offset: const Size(0.0, 1.0),
-      blur: 3.0),
-    const BoxShadow(
-      color: const Color(0x3D000000),
-      offset: const Size(0.0, 1.0),
-      blur: 2.0),
-    ],
-  2: const [
-    const BoxShadow(
-      color: const Color(0x29000000),
-      offset: const Size(0.0, 3.0),
-      blur: 6.0),
-    const BoxShadow(
-      color: const Color(0x3B000000),
-      offset: const Size(0.0, 3.0),
-      blur: 6.0),
-  ],
-  3: const [
-    const BoxShadow(
-      color: const Color(0x30000000),
-      offset: const Size(0.0, 10.0),
-      blur: 20.0),
-    const BoxShadow(
-      color: const Color(0x3B000000),
-      offset: const Size(0.0, 6.0),
-      blur: 6.0),
-  ],
-  4: const [
-    const BoxShadow(
-      color: const Color(0x40000000),
-      offset: const Size(0.0, 14.0),
-      blur: 28.0),
-    const BoxShadow(
-      color: const Color(0x38000000),
-      offset: const Size(0.0, 10.0),
-      blur: 10.0),
-  ],
-  5: const [
-    const BoxShadow(
-      color: const Color(0x4E000000),
-      offset: const Size(0.0, 19.0),
-      blur: 28.0),
-    const BoxShadow(
-      color: const Color(0x38000000),
-      offset: const Size(0.0, 15.0),
-      blur: 12.0),
-  ],
-};
--- a/sdk/lib/theme2/typography.dart
+++ b/sdk/lib/theme2/typography.dart
@ -1,53 +0,0 @@
-// 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.
-
-// See http://www.google.com/design/spec/style/typography.html
-
-import 'dart:sky';
-
-import '../painting/text_style.dart';
-
-// TODO(eseidel): Font weights are supposed to be language relative!
-// These values are for English-like text.
-class _TextTheme {
-  _TextTheme(Color color54, Color color87)
-    : display4 = new TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: color54),
-      display3 = new TextStyle(fontSize:  56.0, fontWeight: FontWeight.w400, color: color54),
-      display2 = new TextStyle(fontSize:  45.0, fontWeight: FontWeight.w400, color: color54),
-      display1 = new TextStyle(fontSize:  34.0, fontWeight: FontWeight.w400, color: color54),
-      headline = new TextStyle(fontSize:  24.0, fontWeight: FontWeight.w400, color: color87),
-      title    = new TextStyle(fontSize:  20.0, fontWeight: FontWeight.w500, color: color87),
-      subhead  = new TextStyle(fontSize:  16.0, fontWeight: FontWeight.w400, color: color87),
-      body2    = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.w500, color: color87),
-      body1    = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.w400, color: color87),
-      caption  = new TextStyle(fontSize:  12.0, fontWeight: FontWeight.w400, color: color54),
-      button   = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.w500, color: color87);
-
-  final TextStyle display4;
-  final TextStyle display3;
-  final TextStyle display2;
-  final TextStyle display1;
-  final TextStyle headline;
-  final TextStyle title;
-  final TextStyle subhead;
-  final TextStyle body2;
-  final TextStyle body1;
-  final TextStyle caption;
-  final TextStyle button;
-}
-
-
-final _TextTheme black = new _TextTheme(
-  const Color(0xFF757575),
-  const Color(0xFF212121)
-);
-
-
-final _TextTheme white = new _TextTheme(
-  const Color(0xFF8A8A8A),
-  const Color(0xFFDEDEDE)
-);
-
-// TODO(abarth): Maybe this should be hard-coded in Scaffold?
-const String typeface = 'font-family: sans-serif';
--- a/sdk/lib/theme2/view_configuration.dart
+++ b/sdk/lib/theme2/view_configuration.dart
@ -1,40 +0,0 @@
-// 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.
-
-// Modeled after Android's ViewConfiguration:
-// https://github.com/android/platform_frameworks_base/blob/master/core/java/android/view/ViewConfiguration.java
-
-const double kNotificationAreaHeight = 25.0;
-// TODO(ianh): Figure out actual specced height for status bar
-const double kStatusBarHeight = 50.0;
-
-// TODO(eseidel) Toolbar needs to change size based on orientation:
-// http://www.google.com/design/spec/layout/structure.html#structure-app-bar
-// Mobile Landscape: 48dp
-// Mobile Portrait: 56dp
-// Tablet/Desktop: 64dp
-const double kToolBarHeight = 56.0;
-
-const double kMaterialDrawerHeight = 140.0;
-const double kScrollbarSize = 10.0;
-const double kScrollbarFadeDuration = 250.0;
-const double kScrollbarFadeDelay = 300.0;
-const double kFadingEdgeLength = 12.0;
-const double kPressedStateDuration = 64.0;
-const double kDefaultLongPressTimeout = 500.0;
-const double kTapTimeout = 100.0;
-const double kJumpTapTimeout = 500.0;
-const double kDoubleTapTimeout = 300.0;
-const double kDoubleTapMinTime = 40.0;
-const double kHoverTapTimeout = 150.0;
-const double kHoverTapSlop = 20.0;
-const double kZoomControlsTimeout = 3000.0;
-const double kEdgeSlop = 12.0;
-const double kTouchSlop = 8.0;
-const double kDoubleTapTouchSlop = kTouchSlop;
-const double kPagingTouchSlop = kTouchSlop * 2.0;
-const double kDoubleTapSlop = 100.0;
-const double kWindowTouchSlop = 16.0;
-const double kMinFlingVelocity = 50.0;
-const double kMaxFlingVelocity = 8000.0;
--- a/sdk/lib/widgets/checkbox.dart
+++ b/sdk/lib/widgets/checkbox.dart
@ -4,7 +4,7 @@

 import 'dart:sky' as sky;

-import 'package:sky/theme2/colors.dart' as colors;
+import 'package:sky/theme/colors.dart' as colors;

 import 'basic.dart';
 import 'toggleable.dart';
--- a/sdk/lib/widgets/drawer.dart
+++ b/sdk/lib/widgets/drawer.dart
@ -9,8 +9,8 @@ import 'package:vector_math/vector_math.dart';

 import '../animation/animated_value.dart';
 import '../animation/curves.dart';
-import '../theme2/colors.dart';
-import '../theme2/shadows.dart';
+import '../theme/colors.dart';
+import '../theme/shadows.dart';
 import 'animated_component.dart';
 import 'basic.dart';

--- a/sdk/lib/widgets/drawer_header.dart
+++ b/sdk/lib/widgets/drawer_header.dart
@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

-import '../theme2/colors.dart';
-import '../theme2/view_configuration.dart';
+import '../theme/colors.dart';
+import '../theme/view_configuration.dart';
 import 'basic.dart';

 class DrawerHeader extends Component {
--- a/sdk/lib/widgets/flat_button.dart
+++ b/sdk/lib/widgets/flat_button.dart
@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

-import '../theme2/colors.dart';
+import '../theme/colors.dart';
 import 'basic.dart';
 import 'material_button.dart';

--- a/sdk/lib/widgets/floating_action_button.dart
+++ b/sdk/lib/widgets/floating_action_button.dart
@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

-import '../theme2/colors.dart';
-import '../theme2/edges.dart';
+import '../theme/colors.dart';
+import '../theme/edges.dart';
 import 'basic.dart';
 import 'button_base.dart';
 import 'ink_well.dart';
--- a/sdk/lib/widgets/material.dart
+++ b/sdk/lib/widgets/material.dart
@ -3,9 +3,9 @@
 // found in the LICENSE file.

 import '../painting/box_painter.dart';
-import '../theme2/colors.dart';
-import '../theme2/edges.dart';
-import '../theme2/shadows.dart';
+import '../theme/colors.dart';
+import '../theme/edges.dart';
+import '../theme/shadows.dart';
 import 'basic.dart';

 class Material extends Component {
--- a/sdk/lib/widgets/popup_menu.dart
+++ b/sdk/lib/widgets/popup_menu.dart
@ -8,8 +8,8 @@ import 'dart:sky' as sky;

 import '../animation/animated_value.dart';
 import '../painting/box_painter.dart';
-import '../theme2/colors.dart';
-import '../theme2/shadows.dart';
+import '../theme/colors.dart';
+import '../theme/shadows.dart';
 import 'animated_component.dart';
 import 'basic.dart';
 import 'popup_menu_item.dart';
--- a/sdk/lib/widgets/radio.dart
+++ b/sdk/lib/widgets/radio.dart
@ -5,7 +5,7 @@
 import 'dart:sky' as sky;

 import '../rendering/object.dart';
-import '../theme2/colors.dart' as colors;
+import '../theme/colors.dart' as colors;
 import 'basic.dart';
 import 'button_base.dart';

--- a/sdk/lib/widgets/raised_button.dart
+++ b/sdk/lib/widgets/raised_button.dart
@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

-import '../theme2/colors.dart';
+import '../theme/colors.dart';
 import 'basic.dart';
 import 'material_button.dart';

--- a/sdk/lib/widgets/scaffold.dart
+++ b/sdk/lib/widgets/scaffold.dart
@ -4,7 +4,7 @@

 import '../rendering/box.dart';
 import '../rendering/object.dart';
-import '../theme2/view_configuration.dart';
+import '../theme/view_configuration.dart';
 import 'widget.dart';

 enum ScaffoldSlots {
--- a/sdk/lib/widgets/scrollable.dart
+++ b/sdk/lib/widgets/scrollable.dart
@ -8,8 +8,8 @@ import 'dart:sky' as sky;
 import '../animation/generators.dart';
 import '../animation/mechanics.dart';
 import '../animation/scroll_behavior.dart';
-import '../theme2/edges.dart';
-import '../theme2/view_configuration.dart' as config;
+import '../theme/edges.dart';
+import '../theme/view_configuration.dart' as config;
 import 'basic.dart';
 import 'material.dart';

--- a/sdk/lib/widgets/switch.dart
+++ b/sdk/lib/widgets/switch.dart
@ -4,8 +4,8 @@

 import 'dart:sky' as sky;

-import 'package:sky/theme2/colors.dart' as colors;
-import 'package:sky/theme2/shadows.dart';
+import 'package:sky/theme/colors.dart' as colors;
+import 'package:sky/theme/shadows.dart';

 import '../painting/shadows.dart';
 import '../rendering/box.dart';
--- a/sdk/lib/widgets/tool_bar.dart
+++ b/sdk/lib/widgets/tool_bar.dart
@ -3,8 +3,8 @@
 // found in the LICENSE file.

 import '../rendering/flex.dart';
-import '../theme2/shadows.dart';
-import '../theme2/view_configuration.dart';
+import '../theme/shadows.dart';
+import '../theme/view_configuration.dart';
 import 'basic.dart';

 class ToolBar extends Component {
--- a/tests/examples/stocks-expected.txt
+++ b/tests/examples/stocks-expected.txt
@ -51,4 +51,52 @@ PAINT FOR FRAME #2 ----------------------------------------------
 2 |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
 2 |  |  |  | restore
 ------------------------------------------------------------------------
-PAINTED 2 FRAMES
+CONSOLE: 
+PAINT FOR FRAME #3 ----------------------------------------------
+3 | TestDisplayList() constructor: 800.0 x 600.0
+3 | paintChild RenderStack at Point(0.0, 0.0)
+3 |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  | paintChild RenderScaffold at Point(0.0, 0.0)
+3 |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  | paintChild RenderDecoratedBox at Point(0.0, 81.0)
+3 |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 519.0), Paint(color:Color(0xfffafafa)))
+3 |  |  |  | save
+3 |  |  |  | clipRect(Rect.fromLTRB(0.0, 0.0, 800.0, 519.0))
+3 |  |  |  | save
+3 |  |  |  | concat([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0])
+3 |  |  |  | restore
+3 |  |  |  | restore
+3 |  |  | paintChild RenderDecoratedBox at Point(0.0, 0.0)
+3 |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 81.0), Paint(color:Color(0xff9c27b0), drawLooper:true))
+3 |  |  |  | paintChild RenderFlex at Point(8.0, 0.0)
+3 |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  |  | paintChild RenderConstrainedBox at Point(0.0, 25.0)
+3 |  |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  |  |  | paintChild RenderPadding at Point(0.0, 8.0)
+3 |  |  |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  |  |  |  | paintChild RenderImage at Point(8.0, 8.0)
+3 |  |  |  |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  |  |  | paintChild RenderPadding at Point(40.0, 16.0)
+3 |  |  |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  |  |  |  | paintChild RenderParagraph at Point(24.0, 0.0)
+3 |  |  |  |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  |  |  | paintChild RenderPadding at Point(704.0, 8.0)
+3 |  |  |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  |  |  |  | paintChild RenderImage at Point(8.0, 8.0)
+3 |  |  |  |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  |  |  | paintChild RenderPadding at Point(744.0, 8.0)
+3 |  |  |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  |  |  |  | paintChild RenderImage at Point(8.0, 8.0)
+3 |  |  |  |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  | paintChild RenderDecoratedBox at Point(728.0, 528.0)
+3 |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  | drawCircle(28.0, 28.0, 28.0, Paint(color:Color(0xfff44336), drawLooper:true))
+3 |  |  |  | saveLayer(Rect.fromLTRB(0.0, 0.0, 56.0, 56.0), Paint(color:Color(0xff000000)))
+3 |  |  |  | clipPath(Instance of 'Path')
+3 |  |  |  | paintChild RenderImage at Point(16.0, 16.0)
+3 |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
+3 |  |  |  | restore
+------------------------------------------------------------------------
+PAINTED 3 FRAMES
--- a/tests/examples/stocks.dart
+++ b/tests/examples/stocks.dart
@ -9,9 +9,23 @@ import 'package:sky/widgets/widget.dart';
 import '../../examples/stocks2/lib/stock_app.dart';
 import '../resources/display_list.dart';

+class TestStocksApp extends StocksApp {
+
+  Completer _completer = new Completer();
+  Future get isMounted => _completer.future;
+
+  void didMount() {
+    super.didMount();
+    _completer.complete();
+  }
+}
+
 main() async {
  TestRenderView testRenderView = new TestRenderView();
-  runApp(new StocksApp(), renderViewOverride: testRenderView);
+  TestStocksApp app = new TestStocksApp();
+  runApp(app, renderViewOverride: testRenderView);
+  await testRenderView.checkFrame();
+  await app.isMounted;
  await testRenderView.checkFrame();
  testRenderView.endTest();
 }
--- a/tests/raw/render_box.dart
+++ b/tests/raw/render_box.dart
@ -10,8 +10,8 @@ import 'package:sky/rendering/object.dart';
 import '../resources/display_list.dart';
 import '../resources/third_party/unittest/unittest.dart';
 import '../resources/unit.dart';
-import 'package:sky/theme2/colors.dart';
-import 'package:sky/theme2/shadows.dart';
+import 'package:sky/theme/colors.dart';
+import 'package:sky/theme/shadows.dart';

 void main() {
  initUnit();