standarize on grey over gray spelling and other color related fixes

2017-12-18 10:28:34 +01:00
parent 445ff1e28e
commit 1aed970ce3
40 changed files with 91 additions and 92 deletions
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -6,7 +6,6 @@ import {EthAmountInput} from 'ts/components/inputs/eth_amount_input';
 import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
 import {Side, Token, TokenState} from 'ts/types';
 import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';

 interface EthWethConversionDialogProps {
    direction: Side;
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -1,7 +1,7 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';

 interface U2fNotSupportedDialogProps {
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -7,7 +7,6 @@ import {Blockchain} from 'ts/blockchain';
 import {EthWethConversionDialog} from 'ts/components/dialogs/eth_weth_conversion_dialog';
 import {Dispatcher} from 'ts/redux/dispatcher';
 import {BlockchainCallErrs, Side, Token, TokenState} from 'ts/types';
-import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {errorReporter} from 'ts/utils/error_reporter';
 import {utils} from 'ts/utils/utils';
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -2,7 +2,6 @@ import {ZeroEx} from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Divider from 'material-ui/Divider';
-import {colors} from 'ts/utils/colors';
 import {
    Table,
    TableBody,
@@ -24,6 +23,7 @@ import {
    TokenState,
    TokenStateByAddress,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';

--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -323,7 +323,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                Order successfully filled. See the trade details in your{' '}
                <Link
                    to={`${WebsitePaths.Portal}/trades`}
-                    style={{color: 'white'}}
+                    style={{color: colors.white}}
                >
                    trade history
                </Link>
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -1,7 +1,7 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';

 interface FillWarningDialogProps {
    isOpen: boolean;
--- a/packages/website/ts/components/flash_messages/token_send_completed.tsx
+++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx
@@ -3,6 +3,7 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import * as React from 'react';
 import {Token} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';

 interface TokenSendCompletedProps {
@@ -19,7 +20,7 @@ export class TokenSendCompleted extends React.Component<TokenSendCompletedProps,
        const etherScanLink = !_.isUndefined(this.props.etherScanLinkIfExists) &&
                            (
                                <a
-                                    style={{color: 'white'}}
+                                    style={{color: colors.white}}
                                    href={`${this.props.etherScanLinkIfExists}`}
                                    target="_blank"
                                >
--- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx
+++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';

 interface TransactionSubmittedProps {
    etherScanLinkIfExists?: string;
@@ -16,7 +17,7 @@ export class TransactionSubmitted extends React.Component<TransactionSubmittedPr
                <div>
                    Transaction submitted to the network:{' '}
                    <a
-                        style={{color: 'white'}}
+                        style={{color: colors.white}}
                        href={`${this.props.etherScanLinkIfExists}`}
                        target="_blank"
                    >
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -98,7 +98,7 @@ const menuItemsBySection: MenuItemsBySection = {
    ],
 };
 const linkStyle = {
-    color: 'white',
+    color: colors.white,
    cursor: 'pointer',
 };

@@ -116,8 +116,8 @@ interface FooterState {}
 export class Footer extends React.Component<FooterProps, FooterState> {
    public render() {
        return (
-            <div className="relative pb4 pt2" style={{backgroundColor: colors.darkerGray}}>
-                <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: 'white'}}>
+            <div className="relative pb4 pt2" style={{backgroundColor: colors.darkerGrey}}>
+                <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: colors.white}}>
                    <div className="col lg-col-4 md-col-4 col-12 left">
                        <div className="sm-mx-auto" style={{width: 148}}>
                            <div>
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -3,7 +3,6 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import Divider from 'material-ui/Divider';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
 import {ExpirationInput} from 'ts/components/inputs/expiration_input';
@@ -30,6 +29,7 @@ import {
    TokenByAddress,
    TokenStateByAddress,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {errorReporter} from 'ts/utils/error_reporter';
 import {utils} from 'ts/utils/utils';

--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -1,6 +1,5 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
@@ -9,6 +8,7 @@ import {Alert} from 'ts/components/ui/alert';
 import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
 import {RequiredLabel} from 'ts/components/ui/required_label';
 import {AlertTypes, Token, TokenByAddress, TokenState} from 'ts/types';
+import {colors} from 'ts/utils/colors';

 interface NewTokenFormProps {
    blockchain: Blockchain;
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -1,9 +1,9 @@
 import {addressUtils} from '@0xproject/utils';
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {RequiredLabel} from 'ts/components/ui/required_label';
+import {colors} from 'ts/utils/colors';

 interface AddressInputProps {
    disabled?: boolean;
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -1,11 +1,11 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import {RequiredLabel} from 'ts/components/ui/required_label';
 import {InputErrMsg, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';

 interface BalanceBoundedInputProps {
@@ -133,7 +133,7 @@ export class BalanceBoundedInput extends
        const increaseBalanceText = 'Increase balance';
        const linkStyle = {
            cursor: 'pointer',
-            color: colors.darkestGray,
+            color: colors.darkestGrey,
            textDecoration: 'underline',
            display: 'inline',
        };
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,11 +1,11 @@
 import {ZeroEx} from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input';
 import {InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';

 interface TokenAmountInputProps {
    token: Token;
@@ -59,7 +59,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                    Insufficient allowance.{' '}
                    <Link
                        to={`${WebsitePaths.Portal}/balances`}
-                        style={{cursor: 'pointer', color: colors.darkestGray}}
+                        style={{cursor: 'pointer', color: colors.darkestGrey}}
                    >
                            Set allowance
                    </Link>
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -1,6 +1,5 @@
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
 import {AssetPicker} from 'ts/components/generate_order/asset_picker';
@@ -8,6 +7,7 @@ import {InputLabel} from 'ts/components/ui/input_label';
 import {TokenIcon} from 'ts/components/ui/token_icon';
 import {Dispatcher} from 'ts/redux/dispatcher';
 import {AssetToken, BlockchainErrs, Side, Token, TokenByAddress} from 'ts/types';
+import {colors} from 'ts/utils/colors';

 const TOKEN_ICON_DIMENSION = 80;

--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -1,7 +1,6 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import {Route, Switch} from 'react-router-dom';
@@ -32,6 +31,7 @@ import {
    TokenStateByAddress,
    WebsitePaths,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';
@@ -138,6 +138,11 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
            flexDirection: 'column',
            justifyContent: 'space-between',
        };
+        const portalMenuContainerStyle: React.CSSProperties = {
+            overflow: 'hidden',
+            backgroundColor: colors.darkestGrey,
+            color: colors.white,
+        };
        return (
            <div style={portalStyle}>
                <DocumentTitle title="0x Portal DApp"/>
@@ -171,9 +176,9 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                            <div className="mx-auto flex">
                                <div
                                    className="col col-2 pr2 pt1 sm-hide xs-hide"
-                                    style={{overflow: 'hidden', backgroundColor: colors.darkestGray, color: 'white'}}
+                                    style={portalMenuContainerStyle}
                                >
-                                    <PortalMenu menuItemStyle={{color: 'white'}} />
+                                    <PortalMenu menuItemStyle={{color: colors.white}} />
                                </div>
                                <div className="col col-12 lg-col-10 md-col-10 sm-col sm-col-12">
                                    <div className="py2" style={{backgroundColor: colors.grey50}}>
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -7,7 +7,6 @@ import Divider from 'material-ui/Divider';
 import FlatButton from 'material-ui/FlatButton';
 import FloatingActionButton from 'material-ui/FloatingActionButton';
 import RaisedButton from 'material-ui/RaisedButton';
-import {colors} from 'ts/utils/colors';
 import ContentAdd from 'material-ui/svg-icons/content/add';
 import ContentRemove from 'material-ui/svg-icons/content/remove';
 import {
@@ -42,6 +41,7 @@ import {
    TokenStateByAddress,
    TokenVisibility,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {errorReporter} from 'ts/utils/error_reporter';
@@ -334,7 +334,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                <Dialog
                    title="Request Dharma Loan"
                    titleStyle={{fontWeight: 100, backgroundColor: colors.white}}
-                    bodyStyle={{backgroundColor: colors.dharmaDarkGray}}
+                    bodyStyle={{backgroundColor: colors.dharmaDarkGrey}}
                    actionsContainerStyle={{backgroundColor: colors.white}}
                    autoScrollBodyContent={true}
                    actions={dharmaDialogActions}
--- a/packages/website/ts/components/top_bar.tsx
+++ b/packages/website/ts/components/top_bar.tsx
@@ -12,7 +12,6 @@ import {DocsInfo} from 'ts/pages/documentation/docs_info';
 import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
 import {DocsMenu, MenuSubsectionsBySection, Styles, WebsitePaths} from 'ts/types';
 import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';

 interface TopBarProps {
@@ -44,11 +43,11 @@ const styles: Styles = {
    },
    addressPopover: {
        backgroundColor: colors.blueGrey500,
-        color: 'white',
+        color: colors.white,
        padding: 3,
    },
    topBar: {
-        backgroundColor: 'white',
+        backgroundcolor: colors.white,
        height: 59,
        width: '100%',
        position: 'fixed',
@@ -61,7 +60,7 @@ const styles: Styles = {
    },
    menuItem: {
        fontSize: 14,
-        color: colors.darkestGray,
+        color: colors.darkestGrey,
        paddingTop: 6,
        paddingBottom: 6,
        marginTop: 17,
--- a/packages/website/ts/components/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar_menu_item.tsx
@@ -4,7 +4,7 @@ import {Link} from 'react-router-dom';
 import {colors} from 'ts/utils/colors';

 const DEFAULT_STYLE = {
-    color: colors.darkestGray,
+    color: colors.darkestGrey,
 };

 interface TopBarMenuItemProps {
@@ -36,7 +36,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
        } : {};
        const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;
        const linkColor = _.isUndefined(menuItemColor) ?
-            colors.darkestGray :
+            colors.darkestGrey :
            menuItemColor;
        return (
            <div
--- a/packages/website/ts/components/track_token_confirmation.tsx
+++ b/packages/website/ts/components/track_token_confirmation.tsx
@@ -1,8 +1,8 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Party} from 'ts/components/ui/party';
 import {Token, TokenByAddress} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';

 interface TrackTokenConfirmationProps {
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/packages/website/ts/components/trade_history/trade_history_item.tsx
@@ -2,13 +2,13 @@ import {ZeroEx} from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'ts/utils/colors';
 import * as moment from 'moment';
 import * as React from 'react';
 import * as ReactTooltip from 'react-tooltip';
 import {EtherScanIcon} from 'ts/components/ui/etherscan_icon';
 import {Party} from 'ts/components/ui/party';
 import {EtherscanLinkSuffixes, Fill, Token, TokenByAddress} from 'ts/types';
+import {colors} from 'ts/utils/colors';

 const PRECISION = 5;
 const IDENTICON_DIAMETER = 40;
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -1,9 +1,9 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import * as ReactDOM from 'react-dom';
 import ReactTooltip = require('react-tooltip');
+import {colors} from 'ts/utils/colors';

 interface CopyIconProps {
    data: string;
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -1,8 +1,8 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 import {EtherscanLinkSuffixes} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';

 interface EtherScanIconProps {
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -1,5 +1,5 @@
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';

 export interface InputLabelProps {
    text: string | Element | React.ReactNode;
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -32,8 +32,8 @@ export class LifeCycleRaisedButton extends
    React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> {
    public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
        isDisabled: false,
-        backgroundColor: 'white',
-        labelColor: colors.darkGray,
+        backgroundColor: colors.white,
+        labelColor: colors.darkGrey,
    };
    private buttonTimeoutId: number;
    private didUnmount: boolean;
--- a/packages/website/ts/components/ui/required_label.tsx
+++ b/packages/website/ts/components/ui/required_label.tsx
@@ -1,5 +1,5 @@
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';

 export interface RequiredLabelProps {
    label: string|React.ReactNode;
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';

 interface SwapIconProps {
    swapTokensFn: () => void;
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -2,7 +2,6 @@
 import 'whatwg-fetch';

 import {bigNumberConfigs} from '@0xproject/utils';
-import BigNumber from 'bignumber.js';
 import {getMuiTheme, MuiThemeProvider} from 'material-ui/styles';
 import * as React from 'react';
 import {render} from 'react-dom';
@@ -21,7 +20,6 @@ import {Wiki} from 'ts/pages/wiki/wiki';
 import {reducer, State} from 'ts/redux/reducer';
 import {WebsitePaths} from 'ts/types';
 import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
 injectTapEventPlugin();

 bigNumberConfigs.configure();
@@ -49,16 +47,16 @@ const muiTheme = getMuiTheme({
        color: colors.grey700,
        textColor: colors.white,
        calendarTextColor: colors.white,
-        selectColor: colors.darkestGray,
+        selectColor: colors.darkestGrey,
        selectTextColor: colors.white,
    },
    timePicker: {
        color: colors.grey700,
        textColor: colors.white,
        accentColor: colors.white,
-        headerColor: colors.darkestGray,
-        selectColor: colors.darkestGray,
-        selectTextColor: colors.darkestGray,
+        headerColor: colors.darkestGrey,
+        selectColor: colors.darkestGrey,
+        selectTextColor: colors.darkestGrey,
    },
    toggle: {
        thumbOnColor: colors.limeGreen,
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,16 +1,15 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import {Footer} from 'ts/components/footer';
 import {TopBar} from 'ts/components/top_bar';
 import {Profile} from 'ts/pages/about/profile';
 import {ProfileInfo, Styles} from 'ts/types';
-import {configs} from 'ts/utils/configs';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';

-const DARKEST_GRAY = colors.darkestGray;
+const DARKEST_GRAY = colors.darkestGrey;

 const teamRow1: ProfileInfo[] = [
    {
@@ -152,12 +151,12 @@ export class About extends React.Component<AboutProps, AboutState> {
    }
    public render() {
        return (
-            <div style={{backgroundColor: colors.lightGrey}}>
+            <div style={{backgroundColor: colors.lightestGrey}}>
                <DocumentTitle title="0x About Us"/>
                <TopBar
                    blockchainIsLoaded={false}
                    location={this.props.location}
-                    style={{backgroundColor: colors.lightGrey}}
+                    style={{backgroundColor: colors.lightestGrey}}
                />
                <div
                    id="about"
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -49,7 +49,7 @@ export function Profile(props: ProfileProps) {
                {!_.isUndefined(props.profileInfo.title) &&
                    <div
                        className="pt1 center"
-                        style={{fontSize: 14, fontFamily: 'Roboto Mono', color: colors.darkGray}}
+                        style={{fontSize: 14, fontFamily: 'Roboto Mono', color: colors.darkGrey}}
                    >
                        {props.profileInfo.title.toUpperCase()}
                    </div>
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -1,7 +1,6 @@
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import {
@@ -34,7 +33,7 @@ import {
    TypeDefinitionByName,
    TypescriptMethod,
 } from 'ts/types';
-import {configs} from 'ts/utils/configs';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {docUtils} from 'ts/utils/doc_utils';
 import {utils} from 'ts/utils/utils';
@@ -286,7 +285,7 @@ export class Documentation extends
                        key={`badge-${networkName}-${sectionName}`}
                        href={linkIfExists}
                        target="_blank"
-                        style={{color: 'white', textDecoration: 'none'}}
+                        style={{color: colors.white, textDecoration: 'none'}}
                    >
                        <Badge
                            title={networkName}
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -1,5 +1,4 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Comment} from 'ts/pages/documentation/comment';
 import {DocsInfo} from 'ts/pages/documentation/docs_info';
@@ -14,6 +13,7 @@ import {
    TypeDefinitionByName,
    TypescriptMethod,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {typeDocUtils} from 'ts/utils/typedoc_utils';

 interface MethodBlockProps {
@@ -31,7 +31,7 @@ const styles: Styles = {
    chip: {
        fontSize: 13,
        backgroundColor: colors.lightBlueA700,
-        color: 'white',
+        color: colors.white,
        height: 11,
        borderRadius: 14,
        marginTop: 19,
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ b/packages/website/ts/pages/documentation/source_link.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Source} from 'ts/types';
+import {colors} from 'ts/utils/colors';

 interface SourceLinkProps {
    source: Source;
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -1,12 +1,11 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Link as ScrollLink} from 'react-scroll';
 import * as ReactTooltip from 'react-tooltip';
 import {DocsInfo} from 'ts/pages/documentation/docs_info';
 import {TypeDefinition} from 'ts/pages/documentation/type_definition';
 import {Type as TypeDef, TypeDefinitionByName, TypeDocTypes} from 'ts/types';
-import {configs} from 'ts/utils/configs';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';

--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -1,11 +1,11 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import {Footer} from 'ts/components/footer';
 import {TopBar} from 'ts/components/top_bar';
 import {Question} from 'ts/pages/faq/question';
 import {FAQQuestion, FAQSection, Styles, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';

--- a/packages/website/ts/pages/faq/question.tsx
+++ b/packages/website/ts/pages/faq/question.tsx
@@ -32,7 +32,7 @@ export class Question extends React.Component<QuestionProps, QuestionState> {
                    <CardHeader
                        title={this.props.prompt}
                        style={{borderBottom: this.state.isExpanded ? '1px solid rgba(0, 0, 0, 0.19)' : 'none'}}
-                        titleStyle={{color: colors.darkerGray}}
+                        titleStyle={{color: colors.darkerGrey}}
                        actAsExpander={true}
                        showExpandableButton={true}
                    />
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -1,13 +1,12 @@
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import {Link} from 'react-router-dom';
 import {Footer} from 'ts/components/footer';
 import {TopBar} from 'ts/components/top_bar';
 import {ScreenWidths, WebsitePaths} from 'ts/types';
-import {configs} from 'ts/utils/configs';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';

@@ -156,13 +155,13 @@ export class Landing extends React.Component<LandingProps, LandingState> {
    }
    public render() {
        return (
-            <div id="landing" className="clearfix" style={{color: colors.grey800}}>
+            <div id="landing" className="clearfix" style={{color: colors.grey500}}>
                <DocumentTitle title="0x Protocol"/>
                <TopBar
                    blockchainIsLoaded={false}
                    location={this.props.location}
                    isNightVersion={true}
-                    style={{backgroundColor: colors.heroGray, position: 'relative'}}
+                    style={{backgroundColor: colors.heroGrey, position: 'relative'}}
                />
                {this.renderHero()}
                {this.renderProjects()}
@@ -193,7 +192,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix py4"
-                style={{backgroundColor: colors.heroGray}}
+                style={{backgroundColor: colors.heroGrey}}
            >
                <div
                    className="mx-auto max-width-4 clearfix"
@@ -207,7 +206,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                        </div>
                        <div
                            className={left}
-                            style={{color: 'white'}}
+                            style={{color: colors.white}}
                        >
                            <div style={{paddingLeft: isSmallScreen ? 0 : 12}}>
                                <div
@@ -245,7 +244,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                                style={{borderRadius: 6, minWidth: 150}}
                                                buttonStyle={lightButtonStyle}
                                                labelColor="white"
-                                                backgroundColor={colors.heroGray}
+                                                backgroundColor={colors.heroGrey}
                                                labelStyle={buttonLabelStyle}
                                                label="Join the community"
                                                onClick={_.noop}
@@ -295,7 +294,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix py4"
-                style={{backgroundColor: colors.projectsGray}}
+                style={{backgroundColor: colors.projectsGrey}}
            >
                <div className="mx-auto max-width-4 clearfix sm-px3">
                    <div
@@ -309,13 +308,13 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                    </div>
                    <div
                        className="pt3 mx-auto center"
-                        style={{color: colors.landingLinkGray, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}}
+                        style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}}
                    >
                        view the{' '}
                        <Link
                            to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
                            className="text-decoration-none underline"
-                            style={{color: colors.landingLinkGray}}
+                            style={{color: colors.landingLinkGrey}}
                        >
                            full list
                        </Link>
@@ -382,7 +381,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix lg-py4 md-py4 sm-pt4"
-                style={{backgroundColor: colors.heroGray}}
+                style={{backgroundColor: colors.heroGrey}}
            >
                <div className="mx-auto max-width-4 lg-py4 md-py4 sm-pt4 clearfix">
                    <div className="col lg-col-6 md-col-6 col-12 sm-center">
@@ -416,7 +415,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                        </div>
                        <div
                            className="pt3 sm-mx-auto sm-px3"
-                            style={{color: colors.landingLinkGray, maxWidth: isSmallScreen ? 412 : 'none'}}
+                            style={{color: colors.landingLinkGrey, maxWidth: isSmallScreen ? 412 : 'none'}}
                        >
                            <div className="flex" style={{fontSize: 18}}>
                                <div
@@ -429,7 +428,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                    <Link
                                        to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
                                        className="text-decoration-none underline"
-                                        style={{color: colors.landingLinkGray, fontFamily: 'Roboto Mono'}}
+                                        style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono'}}
                                    >
                                        view all
                                    </Link>
@@ -481,7 +480,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix lg-pt4 md-pt4"
-                style={{backgroundColor: colors.heroGray}}
+                style={{backgroundColor: colors.heroGrey}}
            >
                <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix">
                    {isSmallScreen &&
@@ -601,7 +600,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        const boxStyle: React.CSSProperties = {
            maxWidth: 252,
            height: 386,
-            backgroundColor: colors.lightGrey,
+            backgroundColor: colors.grey50,
            borderRadius: 5,
            padding: '10px 24px 24px',
        };
@@ -638,7 +637,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix"
-                style={{backgroundColor: colors.heroGray}}
+                style={{backgroundColor: colors.heroGrey}}
            >
                <div
                    className="mx-auto py4 sm-mt2 clearfix"
@@ -749,7 +748,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix pb4 lg-pt2 md-pt2 sm-pt4"
-                style={{backgroundColor: colors.heroGray}}
+                style={{backgroundColor: colors.heroGrey}}
            >
                <div
                    className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix"
@@ -778,14 +777,14 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix pb4"
-                style={{backgroundColor: colors.heroGray}}
+                style={{backgroundColor: colors.heroGrey}}
            >
                <div
                    className="mx-auto max-width-4 pb4 mb3 clearfix"
                >
                    <div
                        className={callToActionClassNames}
-                        style={{fontFamily: 'Roboto Mono', color: 'white', lineHeight: isSmallScreen ? 1.7 : 3}}
+                        style={{fontFamily: 'Roboto Mono', color: colors.white, lineHeight: isSmallScreen ? 1.7 : 3}}
                    >
                        Get started on building the decentralized future
                    </div>
@@ -795,7 +794,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                style={{borderRadius: 6, minWidth: 150}}
                                buttonStyle={lightButtonStyle}
                                labelColor={colors.white}
-                                backgroundColor={colors.heroGray}
+                                backgroundColor={colors.heroGrey}
                                labelStyle={buttonLabelStyle}
                                label="Build on 0x"
                                onClick={_.noop}
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -1,10 +1,10 @@
 import * as _ from 'lodash';
 import MenuItem from 'material-ui/MenuItem';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Link as ScrollLink} from 'react-scroll';
 import {VersionDropDown} from 'ts/pages/shared/version_drop_down';
 import {MenuSubsectionsBySection, Styles} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';

--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -143,7 +143,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                        headerSize={HeaderSizes.H2}
                        githubLink={githubLink}
                    />
-                    <div className="mb4 mt3 p3 center" style={{backgroundColor: colors.lightGrey}}>
+                    <div className="mb4 mt3 p3 center" style={{backgroundColor: colors.lightestGrey}}>
                        See a way to make this article better?{' '}
                        <a
                            href={githubLink}
--- a/packages/website/ts/utils/colors.ts
+++ b/packages/website/ts/utils/colors.ts
@@ -3,16 +3,17 @@ import {colors as materialUiColors} from 'material-ui/styles';
 export const colors = {
    ...materialUiColors,
    beigeWhite: '#E4E4E4',
-    grayishPink: '#E6E5E5',
+    greyishPink: '#E6E5E5',
+    lightestGrey: '#F0F0F0',
    lightGrey: '#BBBBBB',
-    gray: '#A5A5A5',
-    darkGray: '#818181',
-    darkerGray: '#393939',
-    heroGray: '#404040',
-    projectsGray: '#343333',
-    landingLinkGray: '#919191',
-    darkestGray: '#272727',
-    dharmaDarkGray: '#252525',
+    grey: '#A5A5A5',
+    darkGrey: '#818181',
+    darkerGrey: '#393939',
+    heroGrey: '#404040',
+    projectsGrey: '#343333',
+    landingLinkGrey: '#919191',
+    darkestGrey: '#272727',
+    dharmaDarkGrey: '#252525',
    lightBlue: '#60A4F4',
    darkBlue: '#4D5481',
    lightPurple: '#A81CA6',