fix: theme improvments by @stasiukanya

squashed commit of the following:

commit 6b07dc7fa0
Author: Anya Stasiuk <stasiukanya@gmail.com>
Date:   Wed Nov 7 15:18:26 2018 +0200

    theme fixes

src/common-elements/Tooltip.tsx

@@ -19,6 +19,7 @@ const Tip = styled.div`
   border-radius: 4px;
   padding: 0.3em 0.6em;
   text-align: center;
+  box-shadow: 0px 0px 5px 0px rgba(204, 204, 204, 1);
 `;
 
 const Content = styled.div`

src/common-elements/dropdown.ts

@@ -38,6 +38,8 @@ export const StyledDropdown = styled(Dropdown)`
     margin-top: 5px;
     background: white;
 
+    box-sizing: border-box;
+
     &:hover {
       border-color: ${props => props.theme.colors.primary.main};
       color: ${props => props.theme.colors.primary.main};

src/common-elements/headers.ts

@@ -8,7 +8,7 @@ const headerFontSize = {
 
 export const headerCommonMixin = level => css`
   font-family: ${props => props.theme.typography.headings.fontFamily};
-  font-weight: 400;
+  font-weight: ${({ theme }) => theme.typography.headings.fontWeight};
   font-size: ${headerFontSize[level]};
 `;
 

src/common-elements/panels.ts

@@ -1,5 +1,5 @@
 import { SECTION_ATTR } from '../services/MenuStore';
-import styled, { media, WithProps } from '../styled-components';
+import styled, { media } from '../styled-components';
 
 export const MiddlePanel = styled.div`
   width: calc(100% - ${props => props.theme.rightPanel.width});
@@ -12,9 +12,9 @@ export const MiddlePanel = styled.div`
   `};
 `;
 
-export const Section = (styled.div as WithProps<'div', { underlined?: boolean }>).attrs(props => ({
+export const Section = styled.div.attrs(props => ({
   [SECTION_ATTR]: props.id,
-}))`
+}))<{ underlined?: boolean }>`
   padding: ${props => props.theme.spacing.sectionVertical}px 0;
 
   ${media.lessThan('medium', true)`
@@ -39,7 +39,7 @@ export const Section = (styled.div as WithProps<'div', { underlined?: boolean }>
 
 export const RightPanel = styled.div`
   width: ${props => props.theme.rightPanel.width};
-  color: #fafbfc;
+  color: ${({ theme }) => theme.rightPanel.textColor};
   background-color: ${props => props.theme.rightPanel.backgroundColor};
   padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
 

src/common-elements/tabs.ts

@@ -1,4 +1,6 @@
+import { darken } from 'polished';
 import { Tabs as ReactTabs } from 'react-tabs';
+
 import styled from '../styled-components';
 
 export { Tab, TabList, TabPanel } from 'react-tabs';
@@ -14,14 +16,14 @@ export const Tabs = styled(ReactTabs)`
       padding: 5px 10px;
       display: inline-block;
 
-      background-color: rgba(0, 0, 0, 0.2);
+      background-color: ${({ theme }) => darken(0.05, theme.rightPanel.backgroundColor)};
       border-bottom: 1px solid rgba(0, 0, 0, 0.5);
       cursor: pointer;
       text-align: center;
       outline: none;
-      color: #ccc;
+      color: ${({ theme }) => darken(theme.colors.tonalOffset, theme.rightPanel.textColor)};
       margin: 5px;
-      border: 1px solid #181f22;
+      border: 1px solid ${({ theme }) => darken(0.1, theme.rightPanel.backgroundColor)};
       border-radius: 5px;
       min-width: 60px;
       font-size: 0.9em;
@@ -29,7 +31,7 @@ export const Tabs = styled(ReactTabs)`
 
       &.react-tabs__tab--selected {
         color: ${props => props.theme.colors.text.primary};
-        background: #e2e2e2;
+        background: ${({ theme }) => theme.rightPanel.textColor};
       }
 
       &:only-child {
@@ -55,7 +57,7 @@ export const Tabs = styled(ReactTabs)`
     }
   }
   > .react-tabs__tab-panel {
-    background: #171e21;
+    background: ${({ theme }) => theme.codeSample.backgroundColor};
     & > div,
     & > pre {
       padding: 20px;
@@ -74,7 +76,7 @@ export const SmallTabs = styled(Tabs)`
       font-size: 13px;
       font-weight: normal;
       border-bottom: 1px dashed;
-      color: #787b7d;
+      color: ${({ theme }) => darken(theme.colors.tonalOffset, theme.rightPanel.textColor)};
       border-radius: 0;
       background: none;
 
@@ -83,7 +85,7 @@ export const SmallTabs = styled(Tabs)`
       }
 
       &.react-tabs__tab--selected {
-        color: #babcbf;
+        color: ${({ theme }) => theme.rightPanel.textColor};
         background: none;
       }
     }

src/components/Endpoint/styled.elements.ts

@@ -17,7 +17,8 @@ export const ServerRelativeURL = styled.span`
 export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean }>`
   padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
   border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
-  background-color: ${props => (props.inverted ? 'transparent' : '#222d32')};
+  background-color: ${props =>
+    props.inverted ? 'transparent' : props.theme.codeSample.backgroundColor};
   display: flex;
   white-space: nowrap;
   align-items: center;

src/components/Markdown/styled.elements.tsx

@@ -72,6 +72,7 @@ export const StyledMarkdownBlock = styled(PrismDiv as StyledComponent<
     border: 1px solid rgba(38, 50, 56, 0.1);
     padding: 0.1em 0.25em 0.2em;
     font-size: ${props => props.theme.typography.code.fontSize};
+    font-weight: ${({ theme }) => theme.typography.code.fontWeight};
 
     word-break: break-word;
   }
@@ -141,7 +142,7 @@ export const StyledMarkdownBlock = styled(PrismDiv as StyledComponent<
     border-top: 1px solid #ccc;
 
     &:nth-child(2n) {
-      background-color: #f8f8f8;
+      background-color: ${({ theme }) => theme.schema.nestedBackground};
     }
   }
 

src/components/PayloadSamples/styled.elements.ts

@@ -13,7 +13,7 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)`
   margin-left: 10px;
   text-transform: none;
   font-size: 0.929em;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid ${({ theme }) => theme.rightPanel.textColor};
   margin: 0 0 10px 0;
   display: block;
 
@@ -23,11 +23,11 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)`
     border: none;
     padding: 0 1.2em 0 0;
     background: transparent;
-    color: rgba(255, 255, 255, 0.9);
+    color: ${({ theme }) => theme.rightPanel.textColor};
     box-shadow: none;
 
     .Dropdown-arrow {
-      border-top-color: rgba(255, 255, 255, 0.9);
+      border-top-color: ${({ theme }) => theme.rightPanel.textColor};
     }
   }
   .Dropdown-menu {

src/components/Redoc/styled.elements.tsx

@@ -43,7 +43,14 @@ export const BackgroundStub = styled.div`
   top: 0;
   bottom: 0;
   right: 0;
-  width: calc((100% - ${({ theme }) => theme.menu.width}) * 0.4);
+  width: ${({ theme }) => {
+    if (theme.rightPanel.width.endsWith('%')) {
+      const percents = parseInt(theme.rightPanel.width, 10);
+      return `calc((100% - ${theme.menu.width}) * ${percents / 100})`;
+    } else {
+      return theme.rightPanel.width;
+    }
+  }};
   ${media.lessThan('medium', true)`
     display: none;
   `};

src/components/SearchBox/styled.elements.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { darken } from 'polished';
 import styled from '../../styled-components';
 import { MenuItemLabel } from '../SideMenu/styled.elements';
 
@@ -16,10 +17,11 @@ export const SearchInput = styled.input.attrs(() => ({
   padding: 5px ${props => props.theme.spacing.unit * 2}px 5px
     ${props => props.theme.spacing.unit * 4}px;
   border: 0;
-  border-bottom: 1px solid #e1e1e1;
+  border-bottom: 1px solid ${({ theme }) => darken(0.1, theme.menu.backgroundColor)};
+  font-family: ${({ theme }) => theme.typography.fontFamily};
   font-weight: bold;
   font-size: 13px;
-  color: ${props => props.theme.colors.text};
+  color: ${props => props.theme.menu.textColor};
   background-color: transparent;
   outline: none;
 `;
@@ -44,7 +46,7 @@ export const SearchIcon = styled((props: { className?: string }) => (
   width: 0.9em;
 
   path {
-    fill: ${props => props.theme.colors.text};
+    fill: ${props => props.theme.menu.textColor};
   }
 `;
 

src/components/SideMenu/styled.elements.ts

@@ -1,13 +1,12 @@
 import * as classnames from 'classnames';
+import { darken } from 'polished';
 
 import { deprecatedCss, ShelfIcon } from '../../common-elements';
-import styled, { css, WithProps } from '../../styled-components';
+import styled, { css } from '../../styled-components';
 
-export const OperationBadge = (styled.span as WithProps<'span', { type: string }>).attrs(
-  (props: any) => ({
-    className: `operation-type ${props.type}`,
-  }),
-)`
+export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
+  className: `operation-type ${props.type}`,
+}))<{ type: string }>`
   width: 32px;
   display: inline-block;
   height: ${props => props.theme.typography.code.fontSize};
@@ -63,11 +62,11 @@ export const OperationBadge = (styled.span as WithProps<'span', { type: string }
   }
 `;
 
-function menuItemActiveBg(depth): string {
+function menuItemActiveBg(depth, { theme }): string {
   if (depth > 1) {
-    return '#e1e1e1';
+    return darken(0.1, theme.menu.backgroundColor);
   } else if (depth === 1) {
-    return '#f0f0f0';
+    return darken(0.05, theme.menu.backgroundColor);
   } else {
     return '';
   }
@@ -99,7 +98,7 @@ export const menuItemDepth = {
     font-size: 0.8em;
     padding-bottom: 0;
     cursor: default;
-    color: ${props => props.theme.colors.text.primary};
+    color: ${props => props.theme.menu.textColor};
   `,
   1: css`
     font-size: 0.929em;
@@ -109,7 +108,7 @@ export const menuItemDepth = {
     }
   `,
   2: css`
-    color: ${props => props.theme.colors.text.primary};
+    color: ${props => props.theme.menu.textColor};
   `,
 };
 
@@ -127,8 +126,7 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
   }),
 }))<MenuItemLabelType>`
   cursor: pointer;
-  color: ${props =>
-    props.active ? props.theme.colors.primary.main : props.theme.colors.text.primary};
+  color: ${props => (props.active ? props.theme.colors.primary.main : props.theme.menu.textColor)};
   margin: 0;
   padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
   ${({ depth, type, theme }) =>
@@ -137,12 +135,12 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
   justify-content: space-between;
   font-family: ${props => props.theme.typography.headings.fontFamily};
   ${props => menuItemDepth[props.depth]};
-  background-color: ${props => (props.active ? menuItemActiveBg(props.depth) : '')};
+  background-color: ${props => (props.active ? menuItemActiveBg(props.depth, props) : '')};
 
   ${props => (props.deprecated && deprecatedCss) || ''};
 
   &:hover {
-    background-color: ${props => menuItemActiveBg(props.depth)};
+    background-color: ${props => menuItemActiveBg(props.depth, props)};
   }
 
   ${ShelfIcon} {
@@ -174,8 +172,8 @@ export const RedocAttribution = styled.div`
   a,
   a:visited,
   a:hover {
-    color: ${theme.colors.text.primary} !important;
-    border-top: 1px solid #e1e1e1;
+    color: ${theme.menu.textColor} !important;
+    border-top: 1px solid ${darken(0.1, theme.menu.backgroundColor)};
     padding: ${theme.spacing.unit}px 0;
     display: block;
   }

src/styled-components.ts

@@ -1,15 +1,9 @@
-import * as React from 'react';
 import * as styledComponents from 'styled-components';
 
 import { ResolvedThemeInterface } from './theme';
 
 export { ResolvedThemeInterface };
 
-type WithProps<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
-  T extends object
-> = styledComponents.ThemedStyledFunction<C, ResolvedThemeInterface, T>;
-
 const {
   default: styled,
   css,
@@ -49,7 +43,7 @@ export const media = {
   },
 };
 
-export { css, createGlobalStyle, keyframes, ThemeProvider, WithProps };
+export { css, createGlobalStyle, keyframes, ThemeProvider };
 export default styled;
 
 export function extensionsHook(styledName: string) {

src/theme.ts

@@ -95,7 +95,7 @@ const defaultTheme: ThemeInterface = {
   },
   typography: {
     fontSize: '14px',
-    lineHeight: '1.5',
+    lineHeight: '1.5em',
     fontWeightRegular: '400',
     fontWeightBold: '600',
     fontWeightLight: '300',
@@ -104,6 +104,7 @@ const defaultTheme: ThemeInterface = {
     optimizeSpeed: true,
     headings: {
       fontFamily: 'Montserrat, sans-serif',
+      fontWeight: '400',
     },
     code: {
       fontSize: '13px',
@@ -111,18 +112,19 @@ const defaultTheme: ThemeInterface = {
       lineHeight: ({ typography }) => typography.lineHeight,
       fontWeight: ({ typography }) => typography.fontWeightRegular,
       color: '#e53935',
-      backgroundColor: 'rgba(38, 50, 56, 0.04)',
+      backgroundColor: 'rgba(38, 50, 56, 0.05)',
       wrap: false,
     },
     links: {
       color: ({ colors }) => colors.primary.main,
-      visited: ({ colors }) => colors.primary.main,
-      hover: ({ colors }) => lighten(0.2, colors.primary.main),
+      visited: ({ typography }) => typography.links.color,
+      hover: ({ typography }) => lighten(0.2, typography.links.color),
     },
   },
   menu: {
     width: '260px',
     backgroundColor: '#fafafa',
+    textColor: '#333333',
     groupItems: {
       textTransform: 'uppercase',
     },
@@ -131,7 +133,7 @@ const defaultTheme: ThemeInterface = {
     },
     arrow: {
       size: '1.5em',
-      color: theme => theme.colors.text.primary,
+      color: theme => theme.menu.textColor,
     },
   },
   logo: {
@@ -143,6 +145,9 @@ const defaultTheme: ThemeInterface = {
     width: '40%',
     textColor: '#ffffff',
   },
+  codeSample: {
+    backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
+  },
 };
 
 export default defaultTheme;
@@ -275,6 +280,7 @@ export interface ResolvedThemeInterface {
     };
     headings: {
       fontFamily: string;
+      fontWeight: string;
     };
 
     links: {
@@ -286,6 +292,7 @@ export interface ResolvedThemeInterface {
   menu: {
     width: string;
     backgroundColor: string;
+    textColor: string;
     groupItems: {
       textTransform: string;
     };
@@ -306,6 +313,9 @@ export interface ResolvedThemeInterface {
     textColor: string;
     width: string;
   };
+  codeSample: {
+    backgroundColor: string;
+  };
 
   extensionsHook?: (name: string, props: any) => string;
 }