fix: theme improvments by @stasiukanya

squashed commit of the following:

commit 6b07dc7
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,22 +16,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(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;
  font-weight: bold;
 
  &.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) {