diff --git a/components/radio/Radio.js b/components/radio/Radio.js
index 872dc742..4dcdcde0 100644
--- a/components/radio/Radio.js
+++ b/components/radio/Radio.js
@@ -1,21 +1,30 @@
import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
import Ripple from '../ripple';
-import style from './style';
-const Radio = ({checked, children, onMouseDown}) => {
- const className = style[checked ? 'radio-checked' : 'radio'];
- return
{children}
;
-};
+const Radio = ({checked, onMouseDown, theme, ...other}) => (
+
+);
Radio.propTypes = {
checked: PropTypes.bool,
children: PropTypes.any,
- onMouseDown: PropTypes.func
+ onMouseDown: PropTypes.func,
+ theme: PropTypes.shape({
+ radio: PropTypes.string.isRequired,
+ radioChecked: PropTypes.string.isRequired,
+ ripple: PropTypes.string.isRequired
+ })
};
-export default Ripple({
- className: style.ripple,
+const RawRadio = themr('ToolboxRadio')(Radio);
+export default themr('ToolboxRadio')(Ripple({
spread: 2.6,
centered: true
-})(Radio);
-export {Radio as RawRadio};
+})(Radio));
+export {RawRadio as RawRadio};
diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
index ca7eefe5..09c1dfa5 100644
--- a/components/radio/RadioButton.js
+++ b/components/radio/RadioButton.js
@@ -1,7 +1,7 @@
import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
import Radio from './Radio';
-import style from './style';
class RadioButton extends React.Component {
static propTypes = {
@@ -13,6 +13,12 @@ class RadioButton extends React.Component {
onBlur: React.PropTypes.func,
onChange: React.PropTypes.func,
onFocus: React.PropTypes.func,
+ theme: React.PropTypes.shape({
+ disabled: React.PropTypes.string.isRequired,
+ field: React.PropTypes.string.isRequired,
+ input: React.PropTypes.string.isRequired,
+ text: React.PropTypes.string.isRequired
+ }),
value: React.PropTypes.any
};
@@ -37,24 +43,23 @@ class RadioButton extends React.Component {
}
render () {
- const className = ClassNames(style[this.props.disabled ? 'disabled' : 'field'], this.props.className);
- const { onChange, ...others } = this.props; //eslint-disable-line no-unused-vars
-
+ const { className, checked, disabled, label, theme, onChange, ...others } = this.props; // eslint-disable-line
+ const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
return (
-