CSS based colors for the nav (#7768)

* use css colors for the nav for now

* type color defs

* use brand for button

* use brand hover for see more items

frontend/src/metabase/containers/Overworld.jsx

@@ -67,7 +67,7 @@ class Overworld extends React.Component {
                   <Link
                     to="/collection/root"
                     color={normal.grey2}
-                    hover={{ color: normal.blue }}
+                    className="text-brand-hover"
                   >
                     <Flex p={4} align="center">
                       <h3>See more items</h3>

frontend/src/metabase/css/core/colors.css

@@ -30,6 +30,14 @@
   --slate-extra-light-color: #f9fbfc;
 
   --error-color: #e35050;
+
+  /* type colors */
+  --metric-color: #9cc177;
+  --segment-color: #7172ad;
+  --pulse-color: #f9d45c;
+  --dashboard-color: #509ee3;
+  --data-color: "#9cc177";
+  --question-color: #93b3c9;
 }
 
 .text-default,
@@ -276,3 +284,47 @@
 .bg-transparent {
   background-color: transparent;
 }
+
+/* entity colors */
+
+.bg-metric {
+  background-color: var(--metric-color);
+}
+.text-metric {
+  color: var(--metric-color);
+}
+
+.bg-data {
+  background-color: var(--data-color);
+}
+.text-data {
+  color: var(--data-color);
+}
+
+.bg-segment {
+  background-color: var(--segment-color);
+}
+.text-segment {
+  color: var(--segment-color);
+}
+
+.bg-dashboard {
+  background-color: var(--dashboard-color);
+}
+.text-dashboard {
+  color: var(--dashboard-color);
+}
+
+.bg-pulse {
+  background-color: var(--pulse-color);
+}
+.text-pulse {
+  color: var(--pulse-color);
+}
+
+.bg-question {
+  background-color: var(--question-color);
+}
+.text-question {
+  color: var(--question-color);
+}

frontend/src/metabase/css/home.css

+:root {
+  --search-bar-color: #60a6e4;
+  --search-bar-active-color: #7bb7ec;
+  --search-bar-active-border-color: #4894d8;
+}
+
 .Nav {
   z-index: 4;
 }
 
+/* temporary css for the navbar and search */
+.search-bar {
+  background-color: var(--search-bar-color);
+  border-color: transparent;
+  color: white;
+}
+
+.nav-light {
+  background-color: var(--search-bar-color);
+}
+
+.search-bar--active {
+  background-color: var(--search-bar-active-color);
+  border-color: var(--search-bar-active-border-color);
+}
+
 .NavItem.NavItem--selected {
   background-color: rgba(0, 0, 0, 0.2);
 }

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

@@ -55,20 +55,11 @@ const AdminNavItem = ({ name, path, currentPath }) => (
   </li>
 );
 
-const DefaultSearchColor = "#60A6E4";
-const ActiveSearchColor = "#7bb7ec";
-
 const SearchWrapper = Flex.extend`
-  ${width} background-color: ${props =>
-      props.active ? ActiveSearchColor : DefaultSearchColor};
-  border-radius: 6px;
+  ${width} border-radius: 6px;
   align-items: center;
-  color: white;
-  border: 1px solid ${props => (props.active ? "#4894d8" : "transparent")};
+  border: 1px solid transparent;
   transition: background 300ms ease-in;
-  &:hover {
-    background-color: ${ActiveSearchColor};
-  }
 `;
 
 const SearchInput = styled.input`
@@ -114,6 +105,9 @@ class SearchBar extends React.Component {
         handleDismissal={() => this.setState({ active: false })}
       >
         <SearchWrapper
+          className={cx("search-bar", {
+            "search-bar--active": this.state.active,
+          })}
           onClick={() => this.setState({ active: true })}
           active={this.state.active}
         >
@@ -266,7 +260,7 @@ export default class Navbar extends Component {
           <PopoverWithTrigger
             ref={e => (this._newPopover = e)}
             triggerElement={
-              <Button medium mr={3} color="#509ee3">
+              <Button medium mr={3} className="text-brand">
                 New
               </Button>
             }
@@ -314,7 +308,7 @@ export default class Navbar extends Component {
           </PopoverWithTrigger>
           <Box>
             <Link to="collection/root">
-              <Box p={1} bg="#69ABE6" className="text-bold rounded">
+              <Box p={1} className="nav-light text-bold rounded">
                 Saved items
               </Box>
             </Link>