Rename tone to color

website/src/App.js

@@ -51,7 +51,7 @@ export class App extends React.Component {
         <Column.Item grow />
         <Column.Item>
           <Box color='#FAFAFA' borderTop={`${sizeInfo.headerBorderWidth}px solid #B2B2B2`}>
-            <Text tone='dimmed' margin={10}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
+            <Text color='dimmed' margin={10}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
           </Box>
         </Column.Item>
       </Column>

website/src/Modal/MessageModal.js

@@ -28,7 +28,7 @@ export class MessageModal extends React.Component {
                 <Text width='100%' align='center'>{message}</Text>
               </Column.Item>
               <Column.Item>
-                <Text width='100%' align='center' tone='dimmed' size='small'>{detail}</Text>
+                <Text width='100%' align='center' color='dimmed' size='small'>{detail}</Text>
               </Column.Item>
               <Column.Item height={15} />
               <Column.Item height={sizeInfo.buttonHeight}>

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,