fix(docz-theme-default): adjust theme colors

doczjs · Sep 29, 2018 · eed7212 · eed7212
1 parent 0f6bd7b
commit eed7212
Show file tree

Hide file tree

Showing 33 changed files with 194 additions and 102 deletions.
diff --git a/packages/docz-theme-default/README.md b/packages/docz-theme-default/README.md
@@ -94,6 +94,7 @@ const config = {
     link: colors.blue,
     footerText: colors.grayDark,
     sidebarBg: colors.grayExtraLight,
+    sidebarPrimary: null,
     sidebarText: colors.dark,
     background: colors.white,
     border: colors.grayLight,

diff --git a/packages/docz-theme-default/src/components/shared/GithubLink/index.tsx b/packages/docz-theme-default/src/components/shared/GithubLink/index.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { SFC } from 'react'
 import styled, { keyframes } from 'react-emotion'
+import { get } from '@utils/theme'
 
 const octocatWave = keyframes`
   0%, 100% {
@@ -35,8 +36,8 @@ const Link = styled('a')`
 
 const Svg = styled('svg')`
   z-index: 99;
-  fill: ${p => p.theme.docz.colors.primary};
-  color: ${p => p.theme.docz.colors.background};
+  fill: ${get('colors.primary')};
+  color: ${get('colors.background')};
   position: absolute;
   top: 0;
   border: 0;

diff --git a/packages/docz-theme-default/src/components/shared/Logo/index.tsx b/packages/docz-theme-default/src/components/shared/Logo/index.tsx
@@ -3,13 +3,17 @@ import { SFC } from 'react'
 import { ThemeConfig, Link } from 'docz'
 import styled from 'react-emotion'
 
-import { breakpoints } from '../../../styles/responsive'
+import { breakpoints } from '@styles/responsive'
+import { get } from '@utils/theme'
 
 interface WrapperProps {
   showBg: boolean
   theme?: any
 }
 
+const sidebarPrimary = get('colors.sidebarPrimary')
+const primaryColor = get('colors.primary')
+
 const Wrapper = styled('div')`
   position: relative;
   display: flex;
@@ -31,7 +35,7 @@ const Wrapper = styled('div')`
     left: 0;
     width: 100%;
     height: 3px;
-    background: ${p => p.theme.docz.colors.primary};
+    background: ${p => sidebarPrimary(p) || primaryColor(p)};
   }
 
   @media screen and (max-width: ${breakpoints.desktop}px) {
@@ -51,7 +55,7 @@ const LogoText = styled('h1')`
   font-size: 24px;
   font-weight: 600;
   letter-spacing: -0.015em;
-  color: ${p => p.theme.docz.colors.text};
+  color: ${get('colors.sidebarText')};
 `
 
 interface LogoProps {

diff --git a/packages/docz-theme-default/src/components/shared/Search/index.tsx b/packages/docz-theme-default/src/components/shared/Search/index.tsx
@@ -2,19 +2,26 @@ import * as React from 'react'
 import { SFC } from 'react'
 import styled from 'react-emotion'
 import SearchIcon from 'react-feather/dist/icons/search'
+import placeholder from 'polished/lib/mixins/placeholder'
+import rgba from 'polished/lib/color/rgba'
+
+import { get } from '@utils/theme'
+
+const sidebarBorder = get('colors.sidebarBorder')
+const sidebarText = get('colors.sidebarText')
 
 const Wrapper = styled('div')`
   display: flex;
   align-items: center;
   padding: 5px 24px;
   margin-bottom: 20px;
-  border-top: 1px dotted ${p => p.theme.docz.colors.border};
-  border-bottom: 1px dotted ${p => p.theme.docz.colors.border};
+  border-top: 1px dotted ${sidebarBorder};
+  border-bottom: 1px dotted ${sidebarBorder};
   opacity: 1;
 `
 
 const Icon = styled(SearchIcon)`
-  stroke: ${p => p.theme.docz.colors.sidebarText};
+  stroke: ${sidebarText};
   width: 20px;
   opacity: 0.5;
 `
@@ -26,7 +33,12 @@ const Input = styled('input')`
   background: transparent;
   border: none;
   font-size: 16px;
-  color: ${p => p.theme.docz.colors.sidebarText};
+  color: ${sidebarText};
+
+  ${p =>
+    placeholder({
+      color: rgba(sidebarText(p), 0.5),
+    })};
 `
 
 interface SearchProps {
@@ -39,7 +51,7 @@ export const Search: SFC<SearchProps> = ({ onSearch }) => (
     <Input
       type="text"
       placeholder="Search here..."
-      onChange={ev => {
+      onChange={(ev: any) => {
         onSearch && onSearch(ev.target.value)
       }}
     />

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx
@@ -2,6 +2,8 @@ import * as React from 'react'
 import { SFC } from 'react'
 import styled from 'react-emotion'
 
+import { get } from '@utils/theme'
+
 interface OpenProps {
   opened: boolean
 }
@@ -20,6 +22,13 @@ const Icon = styled('div')`
     scale(${(p: OpenProps) => (p.opened ? 0.8 : 1)});
 `
 
+const sidebarBg = get('colors.sidebarBg')
+const sidebarPrimary = get('colors.sidebarPrimary')
+const sidebarText = get('colors.sidebarText')
+const primaryColor = get('colors.primary')
+const backgroundColor = get('colors.background')
+const textColor = get('colors.text')
+
 const IconLine = styled('span')`
   content: '';
   display: block;
@@ -28,7 +37,7 @@ const IconLine = styled('span')`
   height: 2px;
   left: 0;
   right: 0;
-  background: ${p => p.theme.docz.colors.text};
+  background: ${p => (p.opened ? sidebarText(p) : textColor(p))};
   transition: transform 0.3s, opacity 0.3s;
 
   &:nth-child(1) {
@@ -66,8 +75,7 @@ const ToggleButton = styled('button')`
   transition: transform 0.3s;
   outline: none;
   border: none;
-  background: ${p =>
-    p.opened ? p.theme.docz.colors.sidebarBg : p.theme.docz.colors.background};
+  background: ${p => (p.opened ? sidebarBg(p) : backgroundColor(p))};
   border-radius: ${p => (p.opened ? '0 0 3px 0' : '3px')};
 
   &:before {
@@ -77,7 +85,7 @@ const ToggleButton = styled('button')`
     left: 0;
     width: calc(100% + 1px);
     height: ${(p: OpenProps) => (p.opened ? '3px' : 0)};
-    background: ${p => p.theme.docz.colors.primary};
+    background: ${p => sidebarPrimary(p) || primaryColor(p)};
   }
 
   ${p =>

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx
@@ -5,6 +5,7 @@ import ChevronDown from 'react-feather/dist/icons/chevron-down'
 import styled from 'react-emotion'
 
 import { MenuLink, getActiveFromClass } from './MenuLink'
+import { get } from '@utils/theme'
 
 const Wrapper = styled('div')`
   display: flex;
@@ -33,7 +34,7 @@ const Icon = styled('div')`
   transition: transform 0.3s;
 
   & svg {
-    stroke: ${p => p.theme.docz.colors.text};
+    stroke: ${get('colors.sidebarText')};
   }
 `
 

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/MenuHeadings.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/MenuHeadings.tsx
@@ -4,6 +4,11 @@ import { Docs, Entry, Link } from 'docz'
 import styled from 'react-emotion'
 import get from 'lodash.get'
 
+import { get as themeGet } from '@utils/theme'
+
+const sidebarPrimary = themeGet('colors.sidebarPrimary')
+const primaryColor = themeGet('colors.primary')
+
 const Submenu = styled('div')`
   display: flex;
   flex-direction: column;
@@ -21,7 +26,7 @@ const SmallLink = styled(Link)`
   &,
   &:visited,
   &.active {
-    color: ${p => p.theme.docz.colors.sidebarText};
+    color: ${themeGet('colors.sidebarText')};
   }
 
   &.active {
@@ -33,11 +38,11 @@ const SmallLink = styled(Link)`
     position: absolute;
     display: block;
     content: '';
-    top: 0;
+    top: 1px;
     left: 0;
     width: 0;
     height: 20px;
-    background: ${p => p.theme.docz.colors.primary};
+    background: ${p => sidebarPrimary(p) || primaryColor(p)};
     transition: width 0.2s;
   }
 

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/MenuLink.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/MenuLink.tsx
@@ -4,6 +4,7 @@ import { Link, MenuItem, ThemeConfig } from 'docz'
 import styled, { css } from 'react-emotion'
 
 import { MenuHeadings } from './MenuHeadings'
+import { get } from '@utils/theme'
 
 interface WrapperProps {
   active: boolean
@@ -30,7 +31,7 @@ const Wrapper = styled('div')`
     left: 24px;
     width: 0;
     height: calc(100% - 36px);
-    border-left: 1px dashed ${p => p.theme.docz.colors.border};
+    border-left: 1px dashed ${get('colors.sidebarBorder')};
     transition: width 0.2s;
   }
 
@@ -53,7 +54,7 @@ export const linkStyle = ({ colors }: any) => css`
 
   &:hover,
   &.active {
-    color: ${colors.primary};
+    color: ${colors.sidebarPrimary || colors.primary};
     font-weight: 600;
   }
 `

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
@@ -8,17 +8,22 @@ import flattendepth from 'lodash.flattendepth'
 
 import { Logo } from '../Logo'
 import { Search } from '../Search'
-
 import { Menu } from './Menu'
 import { Docz } from './Docz'
 import { Hamburguer } from './Hamburguer'
-import { breakpoints } from '../../../styles/responsive'
+
+import { get } from '@utils/theme'
+import { breakpoints } from '@styles/responsive'
 
 interface WrapperProps {
   opened: boolean
   theme?: any
 }
 
+const sidebarBg = get('colors.sidebarBg')
+const sidebarText = get('colors.sidebarText')
+const sidebarBorder = get('colors.sidebarText')
+
 const position = (p: WrapperProps) =>
   p.theme.docz.mq({
     position: ['absolute', 'absolute', 'absolute', 'relative'],
@@ -29,12 +34,11 @@ const Wrapper = styled('div')`
   width: 280px;
   min-width: 280px;
   min-height: 100vh;
-  background: ${(p: WrapperProps) => p.theme.docz.colors.sidebarBg};
+  background: ${sidebarBg};
   transition: transform 0.2s, background 0.3s;
   z-index: 100;
   ${position};
-
-  ${p => p.theme.docz.styles.sidebar};
+  ${get('styles.sidebar')};
 
   dl {
     padding: 0;
@@ -70,8 +74,9 @@ const Menus = styled('nav')`
 
 const Empty = styled('div')`
   flex: 1;
-  opacity: 0.6;
+  opacity: 0.7;
   padding: 0 24px;
+  color: ${sidebarText};
 `
 
 const Footer = styled('div')`
@@ -80,8 +85,8 @@ const Footer = styled('div')`
   align-items: center;
   justify-content: center;
   font-size: 14px;
-  color: ${p => p.theme.docz.colors.footerText};
-  border-top: 1px dashed ${p => p.theme.docz.colors.border};
+  color: ${sidebarText};
+  border-top: 1px dashed ${sidebarBorder};
 `
 
 const FooterLink = styled('a')`
@@ -90,6 +95,10 @@ const FooterLink = styled('a')`
   margin-left: 5px;
 `
 
+const FooterLogo = styled(Docz)`
+  fill: ${sidebarText};
+`
+
 interface OpenProps {
   opened: boolean
 }
@@ -109,10 +118,6 @@ const ToggleBackground = styled('div')`
   z-index: 99;
 `
 
-const FooterLogo = styled(Docz)`
-  fill: ${p => p.theme.docz.colors.footerText};
-`
-
 interface SidebarState {
   menus: MenuItem[] | null
   searching: boolean
@@ -199,8 +204,8 @@ class SidebarBase extends Component<SidebarProps, SidebarState> {
     const { showing } = this.state
 
     if (window && typeof window !== 'undefined' && !isDesktop) {
-      !showing && document.documentElement.classList.add('with-overlay')
-      showing && document.documentElement.classList.remove('with-overlay')
+      !showing && document.documentElement!.classList.add('with-overlay')
+      showing && document.documentElement!.classList.remove('with-overlay')
     }
   }
 

diff --git a/packages/docz-theme-default/src/components/ui/Blockquote.tsx b/packages/docz-theme-default/src/components/ui/Blockquote.tsx
@@ -1,13 +1,14 @@
 import styled from 'react-emotion'
+import { get } from '@utils/theme'
 
 export const Blockquote = styled('blockquote')`
-  background: ${p => p.theme.docz.colors.blockquoteBg};
-  border-left: 5px solid ${p => p.theme.docz.colors.blockquoteBorder};
-  color: ${p => p.theme.docz.colors.blockquoteColor};
-  ${p => p.theme.docz.styles.blockquote};
+  background: ${get('colors.blockquoteBg')};
+  border-left: 5px solid ${get('colors.blockquoteBorder')};
+  color: ${get('colors.blockquoteColor')};
+  ${get('styles.blockquote')};
 
   & > p {
     margin: 0;
-    color: ${p => p.theme.docz.colors.blockquoteColor};
+    color: ${get('colors.blockquoteColor')};
   }
 `