Constants for theme colors and skins

src/components/ui/form/Button.jsx

@@ -3,6 +3,7 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
 import buttons from 'components/ui/buttons.scss';
+import { colors, COLOR_GREEN } from 'components/ui';
 
 import FormComponent from './FormComponent';
 
@@ -17,11 +18,15 @@ export default class Button extends FormComponent {
             PropTypes.string
         ]).isRequired,
         block: PropTypes.bool,
-        color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet', 'orange'])
+        color: PropTypes.oneOf(colors)
+    };
+
+    static defaultProps = {
+        color: COLOR_GREEN
     };
 
     render() {
-        const { color = 'green', block, small } = this.props;
+        const { color, block, small } = this.props;
 
         const props = {
             ...this.props

src/components/ui/form/Checkbox.jsx

@@ -2,6 +2,8 @@ import React, { PropTypes } from 'react';
 
 import classNames from 'classnames';
 
+import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui';
+
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
 
@@ -9,8 +11,8 @@ export default class Checkbox extends FormInputComponent {
     static displayName = 'Checkbox';
 
     static propTypes = {
-        color: PropTypes.oneOf(['green', 'blue', 'red']),
+        color: PropTypes.oneOf(colors),
-        skin: PropTypes.oneOf(['dark', 'light']),
+        skin: PropTypes.oneOf(skins),
         label: PropTypes.oneOfType([
             PropTypes.shape({
                 id: PropTypes.string
@@ -19,8 +21,14 @@ export default class Checkbox extends FormInputComponent {
         ]).isRequired
     };
 
+    static defaultProps = {
+        color: COLOR_GREEN,
+        skin: SKIN_DARK
+    };
+
     render() {
-        let { label, color = 'green', skin = 'dark' } = this.props;
+        const { color, skin } = this.props;
+        let { label } = this.props;
 
         label = this.formatMessage(label);
 

src/components/ui/form/Dropdown.jsx

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 
 import classNames from 'classnames';
 
+import { colors, COLOR_GREEN } from 'components/ui';
+
 import styles from './dropdown.scss';
 import FormComponent from './FormComponent';
 
@@ -18,7 +20,11 @@ export default class Dropdown extends FormComponent {
         ]).isRequired,
         items: PropTypes.arrayOf(PropTypes.string).isRequired,
         block: PropTypes.bool,
-        color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet', 'orange'])
+        color: PropTypes.oneOf(colors)
+    };
+
+    static defaultProps = {
+        color: COLOR_GREEN
     };
 
     state = {
@@ -35,7 +41,7 @@ export default class Dropdown extends FormComponent {
     }
 
     render() {
-        const { color = 'green', block, items } = this.props;
+        const { color, block, items } = this.props;
         const {isActive, activeItem} = this.state;
 
         const label = this.formatMessage(activeItem);

src/components/ui/form/Input.jsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import { uniqueId } from 'functions';
 import icons from 'components/ui/icons.scss';
+import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui';
 
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
@@ -26,12 +27,18 @@ export default class Input extends FormInputComponent {
         ]),
         error: PropTypes.string,
         icon: PropTypes.string,
-        skin: PropTypes.oneOf(['dark', 'light']),
+        skin: PropTypes.oneOf(skins),
-        color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet'])
+        color: PropTypes.oneOf(colors)
+    };
+
+    static defaultProps = {
+        color: COLOR_GREEN,
+        skin: SKIN_DARK
     };
 
     render() {
-        let { icon, color = 'green', skin = 'dark', label } = this.props;
+        const { color, skin } = this.props;
+        let { icon, label } = this.props;
 
         const props = {
             type: 'text',

src/components/ui/form/TextArea.jsx

@@ -3,6 +3,7 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
 import { uniqueId } from 'functions';
+import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui';
 
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
@@ -24,12 +25,18 @@ export default class TextArea extends FormInputComponent {
             PropTypes.string
         ]),
         error: PropTypes.string,
-        skin: PropTypes.oneOf(['dark', 'light']),
+        skin: PropTypes.oneOf(skins),
-        color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet'])
+        color: PropTypes.oneOf(colors)
+    };
+
+    static defaultProps = {
+        color: COLOR_GREEN,
+        skin: SKIN_DARK
     };
 
     render() {
-        let { color = 'green', skin = 'dark', label } = this.props;
+        const { color, skin } = this.props;
+        let { label } = this.props;
 
         const props = {
             type: 'text',

src/components/ui/index.js

@@ -0,0 +1,22 @@
+export const SKIN_DARK = 'dark';
+export const SKIN_LIGHT = 'light';
+
+export const COLOR_GREEN = 'green';
+export const COLOR_BLUE = 'blue';
+export const COLOR_DARK_BLUE = 'darkBlue';
+export const COLOR_VIOLET = 'violet';
+export const COLOR_LIGHT_VIOLET = 'lightViolet';
+export const COLOR_ORANGE = 'orange';
+export const COLOR_RED = 'red';
+
+export const colors = [
+    COLOR_GREEN,
+    COLOR_BLUE,
+    COLOR_DARK_BLUE,
+    COLOR_VIOLET,
+    COLOR_LIGHT_VIOLET,
+    COLOR_ORANGE,
+    COLOR_RED
+];
+
+export const skins = [SKIN_DARK, SKIN_LIGHT];