UnverisalPanel colors in each theme

Author: mydearxym

containers/UniversePanel/index.js

@@ -36,10 +36,6 @@ import {
 
 const debug = makeDebugger('C:UniversePanel')
 
-// R.isEmpty(repos.toJSON()) && !isSearching && !R.isEmpty(inputValue)
-
-// const repoNotFound = R.and()
-
 const SearchEditor = ({ value, searching }) => (
   <EditorBar>
     <AddOn>{searching ? <LoadingIcon /> : <SearchIcon />}</AddOn>
@@ -79,7 +75,6 @@ class UniversePanelContainer extends React.Component {
         <SearchEditor value={inputValue} searching={searching} />
 
         {logic.repoNotFound(store) && <AlertBar>Repo not found</AlertBar>}
-
         <Wraper>
           {reposData.map(repo => (
             <InfoBar key={repo.id}>

containers/UniversePanel/styles/index.js

@@ -16,14 +16,14 @@ const rotate360 = keyframes`
 `
 
 export const SearchIcon = styled(searchIcon)`
-  fill: #014354;
+  fill: ${props => props.theme.u_panel.search_icon};
   width: 30px;
   height: 30px;
   margin-top: 20px;
 `
 
 export const LoadingIcon = styled(loadingIcon)`
-  fill: #014354;
+  fill: ${props => props.theme.u_panel.search_icon};
   width: 30px;
   height: 30px;
   margin-top: 20px;
@@ -32,7 +32,6 @@ export const LoadingIcon = styled(loadingIcon)`
 
 export const AddOn = styled.div`
   margin-left: 15px;
-  color: white;
   width: 25px;
 `
 
@@ -53,14 +52,14 @@ export const Wraper = styled.div`
   overflow: scroll;
 `
 
+// #001b21;
 export const BaseBar = styled.div`
-  border: 1px solid white;
   box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.4);
-  border: 1px solid #014354;
+  border: 1px solid ${props => props.theme.u_panel.border};
   width: 50vw;
   max-width: 600px;
   height: 70px;
-  background: #001b21;
+  background: ${props => props.theme.u_panel.bar_bg};
   color: white;
   display: flex;
   flex-direction: row;
@@ -86,15 +85,15 @@ export const InfoBar = styled(BaseBar)`
   min-height: 100px;
 `
 export const InputBar = styled.input`
-  caret-color: #365760; /*cursor color*/
+  caret-color: ${props => props.theme.u_panel.search_input};
   flex-grow: 1;
   font-family: '.SFNSText-Light', 'SF UI Text', 'Helvetica Neue', 'Arial',
     'Lucida Grande', 'Segoe UI', Noto Sans, sans-serif;
   height: 100%;
   width: auto;
   outline: none;
   font-weight: 200;
-  color: #365760;
+  color: ${props => props.theme.u_panel.search_input};
   font-size: 24px;
   line-height: 70px;
   max-height: none;
@@ -119,9 +118,14 @@ export const ContentWraper = styled.div`
   text-align: left;
   flex-grow: 1;
 `
-export const Title = styled.div`color: white;`
+export const Title = styled.div`
+  display: block;
+  > a {
+    color: ${props => props.theme.u_panel.link};
+  }
+`
 export const Desc = styled.div`
-  color: #4c7c8a;
+  color: ${props => props.theme.u_panel.text};
   text-overflow: ellipsis;
   width: 400px;
   white-space: nowrap;
@@ -135,19 +139,12 @@ export const SubInfoWraper = styled.div`
 `
 
 export const RepoLang = styled.div`
-  color: #4c7c8a;
+  color: ${props => props.theme.u_panel.text};
   font-style: italic;
 `
 
 export const RepoStar = styled.div`
-  color: #4c7c8a;
+  color: ${props => props.theme.u_panel.text};
   font-style: italic;
   margin-right: 10px;
 `
-
-/*
-   text-overflow: ellipsis;
-   width: 400px;
-   white-space: nowrap;
-   overflow: hidden;
- */

utils/themes/Brown.js

@@ -2,15 +2,16 @@
  * a theme inspired by stackedit: https://stackedit.io/editor
 */
 
-import { darken } from 'polished'
+import { lighten, darken } from 'polished'
 
-const fronColor = '#787561'
+const fontColor = '#787561'
 const sidebarBg = '#272422'
+const mainBg = '#7DC0C5'
 
 const Slack = {
-  font: fronColor,
+  font: fontColor,
   link: '#D57041',
-  main: '#7DC0C5',
+  main: mainBg,
   body_bg: '#322D28',
   selection_bg: '#463f37', // not working
   sidebar: {
@@ -19,6 +20,14 @@ const Slack = {
     menu_link: '#B1A89D',
     border_color: darken(0.1, sidebarBg),
   },
+  u_panel: {
+    link: lighten(0.2, fontColor),
+    search_input: lighten(0.1, fontColor),
+    search_icon: lighten(0.1, fontColor),
+    bar_bg: darken(0.03, sidebarBg),
+    border: lighten(0.08, sidebarBg),
+    text: darken(0.1, fontColor),
+  },
 }
 
 export default Slack

utils/themes/Cyan.js

@@ -2,20 +2,31 @@
  * a theme inspired by rethinkdb: https://rethinkdb.com/
 */
 
-const fronColor = '#69a7ad'
+import { lighten, darken } from 'polished'
+
+const fontColor = '#69a7ad'
+const mainBg = '#E4EEED'
 
 const Cyan = {
-  font: fronColor,
+  font: fontColor,
   link: 'orange',
   main: '#7DC0C5',
-  body_bg: '#E4EEED',
+  body_bg: mainBg,
   selection_bg: 'tomato',
   sidebar: {
     bg: '#1C4752',
-    pin_active: fronColor,
+    pin_active: fontColor,
     menu_link: '#D9E6E5',
     border_color: '#14363E',
   },
+  u_panel: {
+    link: lighten(0.3, fontColor),
+    search_input: lighten(0.3, fontColor),
+    search_icon: lighten(0.3, fontColor),
+    bar_bg: darken(0.03, fontColor),
+    border: darken(0.05, fontColor),
+    text: lighten(0.2, fontColor),
+  },
 }
 
 export default Cyan

utils/themes/CyanGreen.js

@@ -4,21 +4,30 @@
 
 import { darken } from 'polished'
 
-const fronColor = '#FBF9FC'
+const fontColor = '#dcd9cf'
 const sidebarBg = '#53B5B0'
+const mainBg = '#60848B'
 
 const CyanGreen = {
-  font: fronColor,
+  font: fontColor,
   link: '#99CFAF',
   main: '#7DC0C5',
-  body_bg: '#60848B',
+  body_bg: mainBg,
   selection_bg: '#FDDBA8',
   sidebar: {
     bg: sidebarBg,
     pin_active: '#B1EFBD',
     menu_link: '#CAE5E5',
     border_color: darken(0.1, sidebarBg),
   },
+  u_panel: {
+    link: darken(0.25, sidebarBg),
+    search_input: darken(0.2, sidebarBg),
+    search_icon: darken(0.2, sidebarBg),
+    bar_bg: darken(0.01, sidebarBg),
+    border: darken(0.1, sidebarBg),
+    text: darken(0.15, sidebarBg),
+  },
 }
 
 export default CyanGreen

utils/themes/Muzli.js

@@ -1,19 +1,31 @@
 /*
  * a theme inspired by Muzli && unbuntu
  */
+import { lighten, darken } from 'polished'
+
+const fontColor = '#BDBDBF'
+const mainBg = '#222029'
 
 const Muzli = {
-  font: '#BDBDBF',
+  font: fontColor,
   link: '#B762B7',
   main: '#B0AEB3',
-  body_bg: '#222029',
+  body_bg: mainBg,
   selection_bg: 'tomato',
   sidebar: {
     bg: '#222029',
     pin_active: 'tomato',
     menu_link: 'lightgrey',
     border_color: '#100F13',
   },
+  u_panel: {
+    link: lighten(0.25, mainBg),
+    search_input: lighten(0.1, mainBg),
+    search_icon: lighten(0.1, mainBg),
+    bar_bg: darken(0.03, mainBg),
+    border: lighten(0.05, mainBg),
+    text: lighten(0.1, mainBg),
+  },
 }
 
 export default Muzli

utils/themes/Slack.js

@@ -2,23 +2,32 @@
  * a theme inspired by stackedit: https://stackedit.io/editor
 */
 
-import { darken } from 'polished'
+import { lighten, darken } from 'polished'
 
-const fronColor = '#657b83'
+const fontColor = '#657b83'
 const sidebarBg = '#4B3A4C'
+const mainBg = '#F9F9F9'
 
 const Slack = {
-  font: fronColor,
+  font: fontColor,
   link: '#36AEE5',
   main: '#7DC0C5',
-  body_bg: '#F9F9F9',
+  body_bg: mainBg,
   selection_bg: '#FDDBA8',
   sidebar: {
     bg: sidebarBg,
     pin_active: '#4B968C',
     menu_link: '#A99BA9',
     border_color: darken(0.1, sidebarBg),
   },
+  u_panel: {
+    link: lighten(0.3, sidebarBg),
+    search_input: lighten(0.3, fontColor),
+    search_icon: lighten(0.3, fontColor),
+    bar_bg: lighten(0.03, sidebarBg),
+    border: darken(0.05, fontColor),
+    text: lighten(0.15, sidebarBg),
+  },
 }
 
 export default Slack

utils/themes/SolarizedDark.js

@@ -3,19 +3,31 @@
 */
 
 // some selection color not supported
+import { lighten, darken } from 'polished'
+
+const fontColor = '#839491'
+const mainBg = '#002A35'
 
 const SolarizedDark = {
-  font: '#839491',
+  font: fontColor,
   link: '#269A95',
   main: '#7DC0C5',
-  body_bg: '#002A35',
+  body_bg: mainBg,
   selection_bg: '#839496', // '#657b83',
   sidebar: {
     bg: '#053542',
     pin_active: '#849804',
     menu_link: '#93A1A1',
     border_color: '#14363E',
   },
+  u_panel: {
+    link: lighten(0.2, mainBg),
+    search_input: lighten(0.1, mainBg),
+    search_icon: lighten(0.1, mainBg),
+    bar_bg: darken(0.03, mainBg),
+    border: lighten(0.05, mainBg),
+    text: lighten(0.1, mainBg),
+  },
 }
 
 export default SolarizedDark

utils/themes/Yellow.js

@@ -4,21 +4,30 @@
 
 import { darken } from 'polished'
 
-const fronColor = '#657b83'
+const fontColor = '#657b83'
 const sidebarBg = '#EEE8D5'
+const mainBg = '#FDF6E3'
 
 const Yellow = {
-  font: fronColor,
+  font: fontColor,
   link: '#4E9ED3',
   main: '#7DC0C5',
-  body_bg: '#FDF6E3',
+  body_bg: mainBg,
   selection_bg: '#FDDBA8',
   sidebar: {
     bg: sidebarBg,
     pin_active: '#2AA198',
     menu_link: '#000',
     border_color: darken(0.1, sidebarBg),
   },
+  u_panel: {
+    link: darken(0.45, sidebarBg),
+    search_input: darken(0.5, sidebarBg),
+    search_icon: darken(0.4, sidebarBg),
+    bar_bg: darken(0.15, sidebarBg),
+    border: darken(0.3, sidebarBg),
+    text: darken(0.35, sidebarBg),
+  },
 }
 
 export default Yellow

utils/themes/index.js

@@ -28,9 +28,6 @@ export const globalThemes = {
   // solarizedDark: { ...SolarizedDark },
   muzli: { ...Muzli },
   yellow: { ...Yellow },
-  // purpleDark: {...PurpleDark},
-  // solarizedDark: {...SolarizedDark},
-  // solarizedLight: {...SolarizedLight},
   slack: { ...Slack },
   brown: { ...Brown },
   cyanGreen: { ...CyanGreen },