Rename tone to color

website/src/ui/BoundInput.js

@@ -50,7 +50,7 @@ export default class BoundInput extends React.Component {
           onChange={this.handleChange}
           placeholder={placeholder} />
         <br />
-        <Text size='small' tone='alert'>{valid ? ' ' : message}</Text>
+        <Text size='small' color='alert'>{valid ? ' ' : message}</Text>
       </div>
     )
   }

website/src/ui/Text.js

@@ -8,14 +8,14 @@ class Text extends Component {
     size: PropTypes.string,
     margin: PropTypes.number,
     children: PropTypes.node,
-    tone: PropTypes.string,
+    color: PropTypes.oneOf(['normal', 'alert', 'dimmed']),
     width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
     align: PropTypes.string,
   }
 
   static defaultProps = {
     size: 'medium',
-    tone: 'normal',
+    color: 'normal',
     margin: 0,
     align: 'left',
   }
@@ -28,7 +28,7 @@ class Text extends Component {
         display: 'inline-block',
         fontSize: fontInfo.size[this.props.size],
         fontFamily: fontInfo.family,
-        color: fontInfo.color[this.props.tone],
+        color: fontInfo.color[this.props.color],
         textAlign: align,
         margin,
         width,