fix(docz-theme-default): resolve emotion theming conflict

doczjs · Aug 1, 2018 · 659cd79 · 659cd79
1 parent c57579f
commit 659cd79
Show file tree

Hide file tree

Showing 25 changed files with 96 additions and 94 deletions.
diff --git a/packages/docz-theme-default/src/components/shared/Logo/index.tsx b/packages/docz-theme-default/src/components/shared/Logo/index.tsx
@@ -22,9 +22,9 @@ const LogoText = styled('h1')`
   font-size: 24px;
   font-weight: 600;
   letter-spacing: -0.015em;
-  color: ${p => p.theme.colors.text};
+  color: ${p => p.theme.docz.colors.text};
   background: ${(p: LogoTextProps) =>
-    p.showBg ? darken(0.02, p.theme.colors.sidebarBg) : 'transparent'};
+    p.showBg ? darken(0.02, p.theme.docz.colors.sidebarBg) : 'transparent'};
 `
 
 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
@@ -12,13 +12,13 @@ const Wrapper = styled('div')`
   align-items: center;
   padding: 5px 24px;
   margin-bottom: 20px;
-  border-top: 1px solid ${p => p.theme.colors.border};
-  border-bottom: 1px solid ${p => p.theme.colors.border};
+  border-top: 1px solid ${p => p.theme.docz.colors.border};
+  border-bottom: 1px solid ${p => p.theme.docz.colors.border};
   opacity: ${(p: WrapperProps) => (p.showing ? 1 : 0)};
 `
 
 const Icon = styled(SearchIcon)`
-  stroke: ${p => p.theme.colors.sidebarText};
+  stroke: ${p => p.theme.docz.colors.sidebarText};
   width: 20px;
   opacity: 0.5;
 `
@@ -30,7 +30,7 @@ const Input = styled('input')`
   background: transparent;
   border: none;
   font-size: 16px;
-  color: ${p => p.theme.colors.sidebarText};
+  color: ${p => p.theme.docz.colors.sidebarText};
 `
 
 interface SearchProps {

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx
@@ -26,7 +26,7 @@ const IconLine = styled('span')`
   height: 2px;
   left: 0;
   right: 0;
-  background: ${p => p.theme.colors.text};
+  background: ${p => p.theme.docz.colors.text};
   transition: transform 0.3s, opacity 0.3s;
 
   &:nth-child(1) {
@@ -50,6 +50,7 @@ const translateY = (p: OpenProps) => (p.opened ? '4px' : '0px')
 
 const ToggleButton = styled('button')`
   cursor: pointer;
+  z-index: 99;
   position: absolute;
   display: flex;
   align-items: center;
@@ -63,11 +64,12 @@ const ToggleButton = styled('button')`
   transition: transform 0.3s;
   outline: none;
   border: none;
-  background: ${p => (!p.opened ? 'transparent' : p.theme.colors.background)};
+  background: ${p =>
+    !p.opened ? 'transparent' : p.theme.docz.colors.background};
   border-radius: 3px;
 
   ${p =>
-    p.theme.mq({
+    p.theme.docz.mq({
       display: ['block', 'block', 'block', 'none'],
     })};
 `

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Link.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Link.tsx
@@ -34,30 +34,30 @@ const Wrapper = styled('div')`
     left: 24px;
     width: 0;
     height: calc(100% - 36px);
-    background: ${p => p.theme.colors.border};
+    background: ${p => p.theme.docz.colors.border};
     transition: width 0.2s;
   }
 
   ${(p: WrapperProps) => p.active && activeWrapper(p)};
 `
 
-export const linkStyle = (p: any) => css`
+export const linkStyle = (colors: any) => css`
   position: relative;
   display: block;
   margin: 6px 24px;
   font-weight: 600;
-  color: ${p.theme.colors.sidebarText};
+  color: ${colors.sidebarText};
   text-decoration: none;
   transition: color 0.2s;
 
   &:hover,
   &:visited {
-    color: ${p.theme.colors.sidebarText};
+    color: ${colors.sidebarText};
   }
 
   &:hover,
   &.active {
-    color: ${p.theme.colors.primary};
+    color: ${colors.primary};
     font-weight: 600;
   }
 `
@@ -79,7 +79,7 @@ const SmallLink = styled(BaseLink)`
   &,
   &:visited,
   &.active {
-    color: ${p => p.theme.colors.sidebarText};
+    color: ${p => p.theme.docz.colors.sidebarText};
   }
 
   &.active {
@@ -95,7 +95,7 @@ const SmallLink = styled(BaseLink)`
     left: 0;
     width: 0;
     height: 20px;
-    background: ${p => p.theme.colors.primary};
+    background: ${p => p.theme.docz.colors.primary};
     transition: width 0.2s;
   }
 
@@ -159,7 +159,7 @@ export class Link extends Component<LinkProps, LinkState> {
           {theme => (
             <BaseLink
               {...props}
-              className={linkStyle({ theme })}
+              className={linkStyle(theme.colors)}
               onClick={onClick}
               innerRef={(node: any) => {
                 this.$el = node

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx
@@ -40,7 +40,7 @@ const Icon = styled('div')`
   transition: transform 0.3s;
 
   & svg {
-    stroke: ${p => p.theme.colors.text};
+    stroke: ${p => p.theme.docz.colors.text};
   }
 `
 

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
@@ -23,13 +23,13 @@ interface WrapperProps {
 const toggle = (p: WrapperProps) => (p.opened && !p.desktop ? '-90%' : '0')
 
 const background = (p: WrapperProps) =>
-  toggle(p) !== '0' ? 'transparent' : p.theme.colors.sidebarBg
+  toggle(p) !== '0' ? 'transparent' : p.theme.docz.colors.sidebarBg
 
 const border = (p: WrapperProps) =>
-  p.desktop ? `1px solid ${p.theme.colors.border}` : 'none'
+  p.desktop ? `1px solid ${p.theme.docz.colors.border}` : 'none'
 
 const position = (p: WrapperProps) =>
-  p.theme.mq({
+  p.theme.docz.mq({
     position: ['absolute', 'absolute', 'absolute', 'relative'],
   })
 
@@ -47,7 +47,7 @@ const Wrapper = styled('div')`
 
   ${position};
 
-  ${p => p.theme.styles.sidebar};
+  ${p => p.theme.docz.styles.sidebar};
 
   dl {
     padding: 0;
@@ -70,7 +70,7 @@ const Empty = styled('div')`
   opacity: 0.6;
 
   ${p =>
-    p.theme.mq({
+    p.theme.docz.mq({
       padding: ['0 20px', '0 30px'],
     })};
 `
@@ -81,8 +81,8 @@ const Footer = styled('div')`
   align-items: center;
   justify-content: center;
   font-size: 14px;
-  color: ${p => p.theme.colors.footerText};
-  border-top: 1px dashed ${p => p.theme.colors.border};
+  color: ${p => p.theme.docz.colors.footerText};
+  border-top: 1px dashed ${p => p.theme.docz.colors.border};
 `
 
 const FooterLink = styled('a')`
@@ -111,7 +111,7 @@ const ToggleBackground = styled('div')`
 `
 
 const FooterLogo = styled(Docz)`
-  fill: ${p => p.theme.colors.footerText};
+  fill: ${p => p.theme.docz.colors.footerText};
 `
 
 interface Media {

diff --git a/packages/docz-theme-default/src/components/ui/H1.tsx b/packages/docz-theme-default/src/components/ui/H1.tsx
@@ -4,7 +4,7 @@ export const H1 = styled('h1')`
   position: relative;
   display: table;
   margin: 30px 0;
-  ${p => p.theme.mq(p.theme.styles.h1)};
+  ${p => p.theme.docz.mq(p.theme.docz.styles.h1)};
 
   &:before {
     position: absolute;
@@ -13,6 +13,6 @@ export const H1 = styled('h1')`
     left: 0;
     width: 35%;
     height: 2px;
-    background: ${p => p.theme.colors.primary};
+    background: ${p => p.theme.docz.colors.primary};
   }
 `
diff --git a/packages/docz-theme-default/src/components/ui/H2.tsx b/packages/docz-theme-default/src/components/ui/H2.tsx
@@ -3,7 +3,7 @@ import styled from 'react-emotion'
 export const H2 = styled('h2')`
   position: relative;
   margin: 50px 0 20px;
-  ${p => p.theme.mq(p.theme.styles.h2)};
+  ${p => p.theme.docz.mq(p.theme.docz.styles.h2)};
 
   .icon-link {
     position: absolute;

diff --git a/packages/docz-theme-default/src/components/ui/H3.tsx b/packages/docz-theme-default/src/components/ui/H3.tsx
@@ -1,5 +1,5 @@
 import styled from 'react-emotion'
 
 export const H3 = styled('h3')`
-  ${p => p.theme.mq(p.theme.styles.h3)};
+  ${p => p.theme.docz.mq(p.theme.docz.styles.h3)};
 `
diff --git a/packages/docz-theme-default/src/components/ui/H4.tsx b/packages/docz-theme-default/src/components/ui/H4.tsx
@@ -1,5 +1,5 @@
 import styled from 'react-emotion'
 
 export const H4 = styled('h4')`
-  ${p => p.theme.mq(p.theme.styles.h4)};
+  ${p => p.theme.docz.mq(p.theme.docz.styles.h4)};
 `
diff --git a/packages/docz-theme-default/src/components/ui/H5.tsx b/packages/docz-theme-default/src/components/ui/H5.tsx
@@ -1,5 +1,5 @@
 import styled from 'react-emotion'
 
 export const H5 = styled('h5')`
-  ${p => p.theme.mq(p.theme.styles.h5)};
+  ${p => p.theme.docz.mq(p.theme.docz.styles.h5)};
 `
diff --git a/packages/docz-theme-default/src/components/ui/H6.tsx b/packages/docz-theme-default/src/components/ui/H6.tsx
@@ -1,5 +1,5 @@
 import styled from 'react-emotion'
 
 export const H6 = styled('h6')`
-  ${p => p.theme.mq(p.theme.styles.h6)};
+  ${p => p.theme.docz.mq(p.theme.docz.styles.h6)};
 `
diff --git a/packages/docz-theme-default/src/components/ui/InlineCode.tsx b/packages/docz-theme-default/src/components/ui/InlineCode.tsx
@@ -1,7 +1,7 @@
 import styled from 'react-emotion'
 
 export const InlineCode = styled('code')`
-  background: ${p => p.theme.colors.codeBg};
-  color: ${p => p.theme.colors.codeColor};
-  ${p => p.theme.mq(p.theme.styles.code)};
+  background: ${p => p.theme.docz.colors.codeBg};
+  color: ${p => p.theme.docz.colors.codeColor};
+  ${p => p.theme.docz.mq(p.theme.docz.styles.code)};
 `
diff --git a/packages/docz-theme-default/src/components/ui/Link.tsx b/packages/docz-theme-default/src/components/ui/Link.tsx
@@ -5,10 +5,10 @@ export const Link = styled('a')`
   &:visited,
   &:active {
     text-decoration: none;
-    color: ${p => p.theme.colors.link};
+    color: ${p => p.theme.docz.colors.link};
   }
 
   &:hover {
-    color: ${p => p.theme.colors.link};
+    color: ${p => p.theme.docz.colors.link};
   }
 `
diff --git a/packages/docz-theme-default/src/components/ui/List.tsx b/packages/docz-theme-default/src/components/ui/List.tsx
@@ -1,5 +1,5 @@
 import styled from 'react-emotion'
 
 export const List = styled('ul')`
-  ${p => p.theme.mq(p.theme.styles.list)};
+  ${p => p.theme.docz.mq(p.theme.docz.styles.list)};
 `
diff --git a/packages/docz-theme-default/src/components/ui/Loading.tsx b/packages/docz-theme-default/src/components/ui/Loading.tsx
@@ -22,12 +22,12 @@ const spinnerClass = (delay: number = 0) => css`
 `
 
 const Lines = styled('path')`
-  stroke: ${p => p.theme.colors.primary};
+  stroke: ${p => p.theme.docz.colors.primary};
   stroke-width: 3px;
 `
 
 const Path = styled('path')`
-  fill: ${p => p.theme.colors.primary};
+  fill: ${p => p.theme.docz.colors.primary};
 `
 
 const Spinner = ({ size = 60 }) => (

diff --git a/packages/docz-theme-default/src/components/ui/NotFound.tsx b/packages/docz-theme-default/src/components/ui/NotFound.tsx
@@ -11,15 +11,15 @@ const Wrapper = styled('div')`
   flex-direction: column;
   width: 100%;
   height: 100%;
-  color: ${p => p.theme.colors.text};
-  background: ${p => p.theme.colors.background};
+  color: ${p => p.theme.docz.colors.text};
+  background: ${p => p.theme.docz.colors.background};
 `
 
 const Title = styled('h1')`
   margin: 0;
   font-size: 42px;
   font-weight: 400;
-  color: ${p => p.theme.colors.primary};
+  color: ${p => p.theme.docz.colors.primary};
 `
 
 const Subtitle = styled('p')`

diff --git a/packages/docz-theme-default/src/components/ui/Page.tsx b/packages/docz-theme-default/src/components/ui/Page.tsx
@@ -12,15 +12,15 @@ const Wrapper = styled('div')`
   flex: 1;
   height: 100%;
   overflow-y: auto;
-  color: ${p => p.theme.colors.text};
-  background: ${p => p.theme.colors.background};
+  color: ${p => p.theme.docz.colors.text};
+  background: ${p => p.theme.docz.colors.background};
 `
 
 export const Container = styled('div')`
   position: relative;
   margin: 0 auto;
   max-width: 100%;
-  ${p => p.theme.mq(p.theme.styles.container)};
+  ${p => p.theme.docz.mq(p.theme.docz.styles.container)};
 `
 
 const EditPage = styled(ButtonLink.withComponent('a'))`
@@ -31,21 +31,21 @@ const EditPage = styled(ButtonLink.withComponent('a'))`
   padding: 2px 8px;
   margin: 8px;
   border-radius: 3px;
-  border: 1px solid ${p => p.theme.colors.border};
+  border: 1px solid ${p => p.theme.docz.colors.border};
   opacity: 0.7;
   transition: opacity 0.4s;
   font-size: 14px;
-  color: ${p => p.theme.colors.text};
+  color: ${p => p.theme.docz.colors.text};
   text-decoration: none;
   text-transform: uppercase;
 
   &:hover {
     opacity: 1;
-    background: ${p => lighten(0.1, p.theme.colors.border)};
+    background: ${p => lighten(0.1, p.theme.docz.colors.border)};
   }
 
   ${p =>
-    p.theme.mq({
+    p.theme.docz.mq({
       top: [0, -60, 10],
       right: [0, 0, 32],
     })};

diff --git a/packages/docz-theme-default/src/components/ui/Paragraph.tsx b/packages/docz-theme-default/src/components/ui/Paragraph.tsx
@@ -1,5 +1,5 @@
 import styled from 'react-emotion'
 
 export const Paragraph = styled('p')`
-  color: ${p => p.theme.colors.text};
+  color: ${p => p.theme.docz.colors.text};
 `