Consolidate all custom colors and material-ui colors into a colors module

6 files changed, 19 insertions, 21 deletions

diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 687ba0fcc..768c6710f 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -1,7 +1,7 @@
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import {
@@ -34,19 +34,17 @@ import {
     TypeDefinitionByName,
     TypescriptMethod,
 } from 'ts/types';
+import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {docUtils} from 'ts/utils/doc_utils';
 import {utils} from 'ts/utils/utils';
 
 const SCROLL_TOP_ID = 'docsScrollTop';
-const CUSTOM_PURPLE = '#690596';
-const CUSTOM_RED = '#e91751';
-const CUSTOM_TURQUOIS = '#058789';
 
 const networkNameToColor: {[network: string]: string} = {
-    [Networks.kovan]: CUSTOM_PURPLE,
-    [Networks.ropsten]: CUSTOM_RED,
-    [Networks.mainnet]: CUSTOM_TURQUOIS,
+    [Networks.kovan]: colors.purple,
+    [Networks.ropsten]: colors.red,
+    [Networks.mainnet]: colors.turquois,
 };
 
 export interface DocumentationAllProps {
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index 3c57666e7..695debf5b 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -4,8 +4,7 @@ import {DocsInfo} from 'ts/pages/documentation/docs_info';
 import {Type} from 'ts/pages/documentation/type';
 import {AnchorTitle} from 'ts/pages/shared/anchor_title';
 import {Event, EventArg, HeaderSizes} from 'ts/types';
-
-const CUSTOM_GREEN = 'rgb(77, 162, 75)';
+import {colors} from 'ts/utils/colors';
 
 interface EventDefinitionProps {
     event: Event;
@@ -50,7 +49,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
         );
     }
     private renderEventCode() {
-        const indexed = <span style={{color: CUSTOM_GREEN}}> indexed</span>;
+        const indexed = <span style={{color: colors.green}}> indexed</span>;
         const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => {
             const type = (
                 <Type
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
index 9505f2aa4..df580fcd0 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+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';
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
index 9abf01706..9fe919c4e 100644
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ b/packages/website/ts/pages/documentation/source_link.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Source} from 'ts/types';
 
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index 74b146d91..393ee3a51 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -1,17 +1,15 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+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 {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';
 
-const BUILT_IN_TYPE_COLOR = '#e69d00';
-const STRING_LITERAL_COLOR = '#4da24b';
-
 // Some types reference other libraries. For these types, we want to link the user to the relevant documentation.
 const typeToUrl: {[typeName: string]: string} = {
     Web3: constants.WEB3_DOCS_URL,
@@ -56,7 +54,7 @@ export function Type(props: TypeProps): any {
         case TypeDocTypes.Intrinsic:
         case TypeDocTypes.Unknown:
             typeName = type.name;
-            typeNameColor = BUILT_IN_TYPE_COLOR;
+            typeNameColor = colors.orange;
             break;
 
         case TypeDocTypes.Reference:
@@ -90,7 +88,7 @@ export function Type(props: TypeProps): any {
 
         case TypeDocTypes.StringLiteral:
             typeName = `'${type.value}'`;
-            typeNameColor = STRING_LITERAL_COLOR;
+            typeNameColor = colors.green;
             break;
 
         case TypeDocTypes.Array:
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index 4ad959631..09413faaf 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -9,10 +9,9 @@ import {MethodSignature} from 'ts/pages/documentation/method_signature';
 import {Type} from 'ts/pages/documentation/type';
 import {AnchorTitle} from 'ts/pages/shared/anchor_title';
 import {CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';
 
-const KEYWORD_COLOR = '#a81ca6';
-
 interface TypeDefinitionProps {
     customType: CustomType;
     shouldAddId?: boolean;
@@ -80,7 +79,11 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                 typePrefix = 'Type Alias';
                 codeSnippet = (
                     <span>
-                        <span style={{color: KEYWORD_COLOR}}>type</span> {customType.name} ={' '}
+                        <span
+                            style={{color: colors.lightPurple}}
+                        >
+                            type
+                        </span> {customType.name} ={' '}
                         {customType.type.typeDocType !== TypeDocTypes.Reflection ?
                             <Type type={customType.type} docsInfo={this.props.docsInfo} /> :
                             <MethodSignature