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

@@ -39,6 +39,8 @@ export const StyledDropdown = withProps<DropdownProps>(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,6 @@
 import { SECTION_ATTR } from '../services/MenuStore';
 import styled, { media, withProps } from '../styled-components';
+import { darken } from 'polished';
 
 export const MiddlePanel = styled.div`
  width: calc(100% - ${props => props.theme.rightPanel.width});
@@ -41,7 +42,7 @@ export const Section = withProps<{ underlined?: boolean }>(
 
 export const RightPanel = styled.div`
  width: ${props => props.theme.rightPanel.width};
- color: #fafbfc;
+ color: ${({ theme }) => darken(0.01, theme.rightPanel.textColor)};
  background-color: ${props => props.theme.rightPanel.backgroundColor};
  padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
 

src/common-elements/tabs.ts

@@ -1,5 +1,6 @@
 import { Tabs as ReactTabs } from 'react-tabs';
 import styled from '../styled-components';
+import { darken, lighten } from 'polished';
 
 export { Tab, TabList, TabPanel } from 'react-tabs';
 
@@ -14,22 +15,22 @@ 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(0.2, 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;
  font-weight: bold;
 
  &.react-tabs__tab--selected {
  color: ${props => props.theme.colors.text.primary};
- background: #e2e2e2;
+ background: ${({ theme }) => lighten(0.8, theme.rightPanel.backgroundColor)};
  }
 
  &:only-child {
@@ -55,7 +56,7 @@ export const Tabs = styled(ReactTabs)`
  }
  }
  > .react-tabs__tab-panel {
- background: #171e21;
+ background: ${({ theme }) => theme.codeSample.backgroundColor};
  & > div,
  & > pre {
  padding: 20px;
@@ -74,7 +75,7 @@ export const SmallTabs = styled(Tabs)`
  font-size: 13px;
  font-weight: normal;
  border-bottom: 1px dashed;
- color: #787b7d;
+ color: ${({ theme }) => darken(0.55, theme.rightPanel.textColor)};
  border-radius: 0;
  background: none;
 
@@ -83,7 +84,7 @@ export const SmallTabs = styled(Tabs)`
  }
 
  &.react-tabs__tab--selected {
- color: #babcbf;
+ color: ${({ theme }) => darken(0.25, theme.rightPanel.textColor)};
  background: none;
  }
  }

src/components/Endpoint/styled.elements.ts

@@ -17,7 +17,8 @@ export const ServerRelativeURL = styled.span`
 export const EndpointInfo = withProps<{ expanded?: boolean; inverted?: boolean }>(styled.div)`
  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

@@ -68,6 +68,7 @@ export const StyledMarkdownBlock = withProps<{ compact?: boolean; inline?: boole
  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;
  }
@@ -135,7 +136,7 @@ export const StyledMarkdownBlock = withProps<{ compact?: boolean; inline?: boole
  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

@@ -3,6 +3,8 @@ import * as classnames from 'classnames';
 import { deprecatedCss, ShelfIcon } from '../../common-elements';
 import styled, { css, withProps } from '../../styled-components';
 
+import { darken } from 'polished';
+
 export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
  className: props => `operation-type ${props.type}`,
 })`
@@ -61,11 +63,11 @@ export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
  }
 `;
 
-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.04, theme.menu.backgroundColor);
  } else {
  return '';
  }
@@ -97,7 +99,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;
@@ -107,7 +109,7 @@ export const menuItemDepth = {
  }
  `,
  2: css`
- color: ${props => props.theme.colors.text.primary};
+ color: ${props => props.theme.menu.textColor};
  `,
 };
 
@@ -124,8 +126,7 @@ export const MenuItemLabel = withProps<{
  }),
 })`
  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 }) =>
@@ -134,12 +135,12 @@ export const MenuItemLabel = withProps<{
  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} {
@@ -171,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/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',
@@ -116,13 +117,14 @@ const defaultTheme: ThemeInterface = {
  },
  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;
 }