Add Clock and ClockHours to TimePicker migration

components/time_picker/Clock.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import CssTransitionGroup from 'react-addons-css-transition-group';
 import { ZoomIn, ZoomOut } from '../animations';
-import style from './style.clock';
 import time from '../utils/time';
 import Hours from './ClockHours';
 import Minutes from './ClockMinutes';
@@ -13,6 +12,11 @@ class Clock extends React.Component {
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     onChange: React.PropTypes.func,
     onHandMoved: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      clock: React.PropTypes.string.isRequired,
+      clockWrapper: React.PropTypes.string.isRequired,
+      placeholder: React.PropTypes.string.isRequired
+    }),
     time: React.PropTypes.object
   };
 
@@ -81,6 +85,7 @@ class Clock extends React.Component {
         selected={this.props.time.getHours()}
         spacing={this.state.radius * 0.18}
         onHandMoved={this.props.onHandMoved}
+        theme={this.props.theme}
       />
     );
   }
@@ -94,17 +99,19 @@ class Clock extends React.Component {
         selected={this.props.time.getMinutes()}
         spacing={this.state.radius * 0.18}
         onHandMoved={this.props.onHandMoved}
+        theme={this.props.theme}
       />
     );
   }
 
   render () {
+    const { theme } = this.props;
     const animation = this.props.display === 'hours' ? ZoomOut : ZoomIn;
     return (
-      <div data-react-toolbox='clock' className={style.root}>
+      <div data-react-toolbox='clock' className={theme.clock}>
-        <div ref='placeholder' className={style.placeholder} style={{height: this.state.radius * 2}}>
+        <div ref='placeholder' className={theme.placeholder} style={{height: this.state.radius * 2}}>
           <CssTransitionGroup transitionName={animation} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
-            <div key={this.props.display} className={style.wrapper} style={{height: this.state.radius * 2}}>
+            <div key={this.props.display} className={theme.clockWrapper} style={{height: this.state.radius * 2}}>
               {this.props.display === 'hours' ? this.renderHours() : null}
               {this.props.display === 'minutes' ? this.renderMinutes() : null}
             </div>

components/time_picker/ClockHours.js

@@ -16,7 +16,8 @@ class Hours extends React.Component {
     onHandMoved: React.PropTypes.func,
     radius: React.PropTypes.number,
     selected: React.PropTypes.number,
-    spacing: React.PropTypes.number
+    spacing: React.PropTypes.number,
+    theme: React.PropTypes.object
   };
 
   state = {
@@ -59,6 +60,7 @@ class Hours extends React.Component {
           numbers={innerNumbers}
           spacing={this.props.spacing}
           radius={innerRadius}
+          theme={this.props.theme}
           active={this.props.selected}
         />
       );
@@ -79,12 +81,14 @@ class Hours extends React.Component {
             radius={radius}
             twoDigits={is24hr}
             active={is24hr ? selected : (selected % 12 || 12)}
+            theme={this.props.theme}
           />
           {this.renderInnerFace(radius - spacing * innerSpacing)}
           <Hand ref='hand'
             angle={selected * step}
             length={(this.state.inner ? radius - spacing * innerSpacing : radius) - spacing}
             onMove={this.handleHandMove}
+            theme={this.props.theme}
             onMoved={onHandMoved}
             origin={center}
             step={step}