Run colopocalypse after merging with master

frontend/src/metabase/components/BrowserCrumbs.jsx

@@ -3,12 +3,14 @@ import { Flex } from "grid-styled";
 import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
 
+import colors from "metabase/lib/colors";
+
 // TODO: merge with Breadcrumbs
 
 const Crumb = ({ children }) => (
   <h5
     className="text-uppercase text-brand-hover"
-    style={{ color: "#93A1AB", fontWeight: 900 }}
+    style={{ color: colors["text-medium"], fontWeight: 900 }}
   >
     {children}
   </h5>
@@ -26,7 +28,7 @@ const BrowserCrumbs = ({ crumbs }) => (
             <Icon
               key={"divider" + index}
               name="chevronright"
-              color="#DCE1E4"
+              color={colors["text-light"]}
               mx={1}
             />
           ) : null}

frontend/src/metabase/components/CollectionLanding.jsx

@@ -453,7 +453,7 @@ class CollectionLanding extends React.Component {
 }
 
 const CollectionSectionHeading = ({ children }) => (
-  <h5 className="text-uppercase" style={{ color: "#93A1AB", fontWeight: 900 }}>
+  <h5 className="text-uppercase" style={{ color: colors["text-medium"], fontWeight: 900 }}>
     {children}
   </h5>
 );

frontend/src/metabase/components/CollectionList.jsx

@@ -3,7 +3,7 @@ import { t } from "c-3po";
 import { Box, Flex } from "grid-styled";
 import { connect } from "react-redux";
 
-import { normal } from "metabase/lib/colors";
+import colors, { normal } from "metabase/lib/colors";
 import * as Urls from "metabase/lib/urls";
 
 import Ellipsified from "metabase/components/Ellipsified";
@@ -20,9 +20,9 @@ const CollectionItem = ({ collection, color, iconName = "all" }) => (
     hover={{ color: normal.blue }}
     color={color || normal.grey2}
   >
-    <Box bg="#F4F6F8" p={2} mb={1}>
+    <Box bg={colors["bg-light"]} p={2} mb={1}>
       <Flex align="center" py={1} key={`collection-${collection.id}`}>
-        <Icon name={iconName} mx={1} color="#93B3C9" />
+        <Icon name={iconName} mx={1} color={colors["text-medium"]} />
         <h4 className="overflow-hidden">
           <Ellipsified>{collection.name}</Ellipsified>
         </h4>

frontend/src/metabase/nav/containers/Navbar.jsx

@@ -52,8 +52,8 @@ const AdminNavItem = ({ name, path, currentPath }) => (
   </li>
 );
 
-const DefaultSearchColor = "#60A6E4";
-const ActiveSearchColor = "#7bb7ec";
+const DefaultSearchColor = colors.brand;
+const ActiveSearchColor = colors.brand;
 
 const SearchWrapper = Flex.extend`
   ${width} background-color: ${props =>
@@ -61,7 +61,7 @@ const SearchWrapper = Flex.extend`
   border-radius: 6px;
   align-items: center;
   color: white;
-  border: 1px solid ${props => (props.active ? "#4894d8" : "transparent")};
+  border: 1px solid ${props => (props.active ? colors.brand : "transparent")};
   transition: background 300ms ease-in;
   &:hover {
     background-color: ${ActiveSearchColor};