feat: big theme update

demo/openapi.yaml

@@ -5,7 +5,7 @@ servers:
   - url: //petstore.swagger.io/sandbox
     description: Sandbox server
 info:
-  description: >
+  description: |
     This is a sample server Petstore server.
 
     You can find out more about Swagger at
@@ -58,6 +58,14 @@ info:
     All responses have a wildcard same-origin which makes them completely public
     and accessible to everyone, including any code on any site.
 
+
+    ```json
+    {
+      "test": "value",
+      "test2": "value2"
+    }
+    ```
+
     # Authentication
 
     Petstore offers two forms of authentication:

src/common-elements/dropdown.ts

@@ -19,10 +19,10 @@ export const StyledDropdown = withProps<DropdownProps>(styled(Dropdown))`
   display: inline-block;
   position: relative;
   width: auto;
-  font-family: ${props => props.theme.headingsFont.family};
+  font-family: ${props => props.theme.typography.headings.fontFamily};
 
   .Dropdown-control  {
-    font-family: ${props => props.theme.headingsFont.family};
+    font-family: ${props => props.theme.typography.headings.fontFamily};
     position: relative;
     font-size: .929em;
     width: 100%;
@@ -40,14 +40,14 @@ export const StyledDropdown = withProps<DropdownProps>(styled(Dropdown))`
     background: white;
 
     &:hover {
-      border-color: ${props => props.theme.colors.main};
-      color: ${props => props.theme.colors.main};
+      border-color: ${props => props.theme.colors.primary.main};
+      color: ${props => props.theme.colors.primary.main};
       box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12);
     }
   }
 
   .Dropdown-arrow {
-    border-color: ${props => props.theme.colors.main} transparent transparent;
+    border-color: ${props => props.theme.colors.primary.main} transparent transparent;
     border-style: solid;
     border-width: 0.35em 0.35em 0;
     content: ' ';

src/common-elements/fields-layout.ts

@@ -1,4 +1,4 @@
-import { transparentize } from 'polished';
+// import { transparentize } from 'polished';
 
 import styled, { extensionsHook, withProps } from '../styled-components';
 import { deprecatedCss } from './mixins';
@@ -7,11 +7,11 @@ export const PropertiesTableCaption = styled.caption`
   text-align: right;
   font-size: 0.9em;
   font-weight: normal;
-  color: ${props => transparentize(0.6, props.theme.colors.text)};
+  color: ${props => props.theme.colors.text.secondary};
 `;
 
 export const PropertyCell = styled.td`
-  border-left: 1px solid ${props => props.theme.schemaView.linesColor};
+  border-left: 1px solid ${props => props.theme.schema.linesColor};
   box-sizing: border-box;
   position: relative;
   padding: 10px 10px 10px 0;
@@ -29,16 +29,16 @@ export const PropertyCell = styled.td`
       to bottom,
       transparent 0%,
       transparent 22px,
-      ${props => props.theme.schemaView.linesColor} 22px,
-      ${props => props.theme.schemaView.linesColor} 100%
+      ${props => props.theme.schema.linesColor} 22px,
+      ${props => props.theme.schema.linesColor} 100%
     );
   }
 
   tr.last > & {
     background-image: linear-gradient(
       to bottom,
-      ${props => props.theme.schemaView.linesColor} 0%,
-      ${props => props.theme.schemaView.linesColor} 22px,
+      ${props => props.theme.schema.linesColor} 0%,
+      ${props => props.theme.schema.linesColor} 22px,
       transparent 22px,
       transparent 100%
     );
@@ -63,7 +63,7 @@ export const PropertyNameCell = withProps<{ kind?: string }>(PropertyCell.extend
   line-height: 20px;
   white-space: nowrap;
   font-size: 0.929em;
-  font-family: ${props => props.theme.headingsFont.family};
+  font-family: ${props => props.theme.typography.headings.fontFamily};
 
   &.deprecated {
     ${deprecatedCss};
@@ -77,7 +77,7 @@ export const PropertyNameCell = withProps<{ kind?: string }>(PropertyCell.extend
 export const PropertyDetailsCell = styled.td`
   border-bottom: 1px solid #9fb4be;
   padding: 10px 0;
-  width: ${props => props.theme.schemaView.defaultDetailsWidth};
+  width: ${props => props.theme.schema.defaultDetailsWidth};
   box-sizing: border-box;
 
   tr.expanded & {
@@ -86,8 +86,8 @@ export const PropertyDetailsCell = styled.td`
 `;
 
 export const PropertyBullet = styled.span`
-  color: ${props => props.theme.schemaView.linesColor};
-  font-family: ${props => props.theme.code.fontFamily};
+  color: ${props => props.theme.schema.linesColor};
+  font-family: ${props => props.theme.typography.code.fontFamily};
   margin-right: 10px;
 
   &::before {
@@ -96,7 +96,7 @@ export const PropertyBullet = styled.span`
     vertical-align: middle;
     width: 10px;
     height: 1px;
-    background: ${props => props.theme.schemaView.linesColor};
+    background: ${props => props.theme.schema.linesColor};
   }
 
   &::after {
@@ -104,19 +104,19 @@ export const PropertyBullet = styled.span`
     display: inline-block;
     vertical-align: middle;
     width: 1px;
-    background: ${props => props.theme.schemaView.linesColor};
+    background: ${props => props.theme.schema.linesColor};
     height: 7px;
   }
 `;
 
 export const InnerPropertiesWrap = styled.div`
-  padding: ${({ theme }) => theme.schemaView.nestingSpacing};
+  padding: ${({ theme }) => theme.schema.nestingSpacing};
 `;
 
 export const PropertiesTable = styled.table`
   border-collapse: separate;
   border-radius: 3px;
-  font-size: ${props => props.theme.baseFont.size};
+  font-size: ${props => props.theme.typography.fontSize};
 
   border-spacing: 0;
   width: 100%;
@@ -137,9 +137,9 @@ export const PropertiesTable = styled.table`
     ${InnerPropertiesWrap}
     ${InnerPropertiesWrap}
     ${InnerPropertiesWrap} {
-    margin: ${({ theme }) => theme.schemaView.nestingSpacing};
+    margin: ${({ theme }) => theme.schema.nestingSpacing};
     margin-right: 0;
-    background: #f0f0f0;
+    background: ${({ theme }) => theme.schema.nestedBackground};
   }
 
   &

src/common-elements/fields.ts

@@ -1,10 +1,19 @@
 import { transparentize } from 'polished';
 
-import styled from '../styled-components';
+import styled, { extensionsHook } from '../styled-components';
 import { PropertyNameCell } from './fields-layout';
+import { ShelfIcon } from './shelfs';
 
 export const ClickablePropertyNameCell = PropertyNameCell.extend`
   cursor: pointer;
+
+  ${ShelfIcon} {
+    height: ${({ theme }) => theme.schema.arrow.size};
+    width: ${({ theme }) => theme.schema.arrow.size};
+    polygon {
+      fill: ${({ theme }) => theme.schema.arrow.color};
+    }
+  }
 `;
 
 export const FieldLabel = styled.span`
@@ -14,30 +23,29 @@ export const FieldLabel = styled.span`
 `;
 
 export const TypePrefix = FieldLabel.extend`
-  color: ${props => transparentize(0.2, props.theme.schemaView.typeNameColor)};
+  color: ${props => transparentize(0.2, props.theme.schema.typeNameColor)};
 `;
 
 export const TypeName = FieldLabel.extend`
-  color: ${props => props.theme.schemaView.typeNameColor};
+  color: ${props => props.theme.schema.typeNameColor};
 `;
 
 export const TypeTitle = FieldLabel.extend`
-  color: ${props => props.theme.schemaView.typeTitleColor};
+  color: ${props => props.theme.schema.typeTitleColor};
 `;
 
 export const TypeFormat = TypeName;
 
 export const RequiredLabel = FieldLabel.withComponent('div').extend`
-  color: ${props => props.theme.schemaView.requireLabelColor};
-  font-size: 11px;
+  color: ${props => props.theme.schema.requireLabelColor};
+  font-size: ${props => props.theme.schema.labelsTextSize};
   font-weight: normal;
   margin-left: 20px;
   line-height: 1;
-  font-weight: normal;
 `;
 
 export const RecursiveLabel = FieldLabel.extend`
-  color: #dd9900;
+  color: ${({ theme }) => theme.colors.warning.main};
   font-size: 13px;
 `;
 
@@ -55,27 +63,28 @@ export const PatternLabel = FieldLabel.extend`
   }
 `;
 
-export const ExampleValue = styled.span`
-  font-family: ${props => props.theme.code.fontFamily};
-  background-color: ${props => transparentize(0.98, props.theme.colors.text)};
-  border: 1px solid ${props => transparentize(0.85, props.theme.colors.text)};
-  margin: 0 3px;
-  padding: 0.4em 0.2em 0.2em;
-  font-size: 0.8em;
+export const ExampleValue = FieldLabel.extend`
   border-radius: 2px;
-  color: ${props => transparentize(0.1, props.theme.colors.text)};
-  display: inline-block;
-  min-width: 20px;
-  text-align: center;
-  line-height: 1;
-  vertical-align: middle;
+  ${({ theme }) => `
+    background-color: ${transparentize(0.85, theme.colors.text.primary)};
+    color: ${transparentize(0.1, theme.colors.text.primary)};
+
+    margin-left: ${theme.spacing.unit}px;
+    padding: 0 ${theme.spacing.unit}px;
+    border: 1px solid ${transparentize(0.9, theme.colors.text.primary)};
+}`};
+  ${extensionsHook('ExampleValue')};
 `;
 
 export const ConstraintItem = FieldLabel.extend`
-  background-color: ${props => transparentize(0.85, props.theme.colors.main)};
-  color: ${props => transparentize(0.4, props.theme.colors.main)};
-  margin-right: 6px;
-  margin-left: 6px;
   border-radius: 2px;
-  padding: 0 4px;
+  ${({ theme }) => `
+    background-color: ${transparentize(0.85, theme.colors.primary.light)};
+    color: ${transparentize(0.1, theme.colors.primary.light)};
+
+    margin-left: 0 ${theme.spacing.unit}px;
+    padding: 0 ${theme.spacing.unit}px;
+    border: 1px solid ${transparentize(0.9, theme.colors.primary.light)};
+}`};
+  ${extensionsHook('ConstraintItem')};
 `;

src/common-elements/headers.ts

@@ -7,14 +7,14 @@ const headerFontSize = {
 };
 
 export const headerCommonMixin = level => css`
-  font-family: ${props => props.theme.headingsFont.family};
+  font-family: ${props => props.theme.typography.headings.fontFamily};
   font-weight: 400;
   font-size: ${headerFontSize[level]};
 `;
 
 export const H1 = styled.h1`
   ${headerCommonMixin(1)};
-  color: ${props => props.theme.colors.main};
+  color: ${props => props.theme.colors.primary.main};
 
   ${extensionsHook('H1')};
 `;

src/common-elements/panels.ts

@@ -2,7 +2,7 @@ import styled, { media } from '../styled-components';
 
 export const MiddlePanel = styled.div`
   width: calc(100% - ${props => props.theme.rightPanel.width});
-  padding: ${props => props.theme.spacingUnit * 2}px;
+  padding: ${props => props.theme.spacing.unit * 8}px;
 
   ${media.lessThan('medium')`
     width: 100%;
@@ -13,7 +13,7 @@ export const RightPanel = styled.div`
   width: ${props => props.theme.rightPanel.width};
   color: #fafbfc;
   background-color: ${props => props.theme.rightPanel.backgroundColor};
-  padding: ${props => props.theme.spacingUnit * 2}px;
+  padding: ${props => props.theme.spacing.unit * 8}px;
 
   ${media.lessThan('medium')`
     width: 100%;

src/common-elements/schema.ts

@@ -10,7 +10,7 @@ export const OneOfList = styled.ul`
 export const OneOfLabel = styled.span`
   font-size: 0.9em;
   margin-right: 10px;
-  color: ${props => props.theme.colors.main};
+  color: ${props => props.theme.colors.primary.main};
   font-family: Montserrat;
 }
 `;
@@ -20,18 +20,18 @@ export const OneOfButton = withProps<{ active: boolean }>(styled.li)`
   margin-right: 10px;
   font-size: 0.8em;
   cursor: pointer;
-  border: 1px solid ${props => props.theme.colors.main};
+  border: 1px solid ${props => props.theme.colors.primary.main};
   padding: 2px 10px;
 
   ${props => {
     if (props.active) {
       return `
       color: white;
-      background-color: ${props.theme.colors.main};
+      background-color: ${props.theme.colors.primary.main};
       `;
     } else {
       return `
-        color: ${props.theme.colors.main};
+        color: ${props.theme.colors.primary.main};
         background-color: white;
       `;
     }
@@ -40,7 +40,7 @@ export const OneOfButton = withProps<{ active: boolean }>(styled.li)`
 
 export const ArrayOpenningLabel = styled.div`
   font-size: 0.9em;
-  font-family: ${props => props.theme.code.fontFamily};
+  font-family: ${props => props.theme.typography.code.fontFamily};
   &::after {
     content: ' [';
   }
@@ -48,7 +48,7 @@ export const ArrayOpenningLabel = styled.div`
 
 export const ArrayClosingLabel = styled.div`
   font-size: 0.9em;
-  font-family: ${props => props.theme.code.fontFamily};
+  font-family: ${props => props.theme.typography.code.fontFamily};
   &::after {
     content: ']';
   }

src/common-elements/shelfs.tsx

@@ -42,7 +42,9 @@ export const ShelfIcon = styled(IntShelfIcon)`
   transform: rotateZ(${props => directionMap[props.direction || 'down']});
 
   polygon {
-    fill: ${props => (props.color && props.theme.colors[props.color]) || props.color};
+    fill: ${props =>
+      (props.color && props.theme.colors[props.color] && props.theme.colors[props.color].main) ||
+      props.color};
   }
 `;
 
@@ -50,8 +52,8 @@ export const Badge = withProps<{ type: string }>(styled.span)`
   display: inline-block;
   padding: 0 5px;
   margin: 0;
-  background-color: ${props => props.theme.colors[props.type]};
-  color: white;
-  font-size: ${props => props.theme.code.fontSize};;
+  background-color: ${props => props.theme.colors[props.type].main};
+  color: ${props => props.theme.colors[props.type].dark};
+  font-size: ${props => props.theme.typography.code.fontSize};
   vertical-align: text-top;
 `;

src/common-elements/tabs.ts

@@ -28,7 +28,7 @@ export const Tabs = styled(ReactTabs)`
       font-weight: bold;
 
       &.react-tabs__tab--selected {
-        color: ${props => props.theme.colors.text};
+        color: ${props => props.theme.colors.text.primary};
         background: #e2e2e2;
       }
 
@@ -38,19 +38,19 @@ export const Tabs = styled(ReactTabs)`
       }
 
       &.tab-success {
-        color: ${props => props.theme.colors.success};
+        color: ${props => props.theme.colors.responses.success.color};
       }
 
       &.tab-redirect {
-        color: ${props => props.theme.colors.redirect};
+        color: ${props => props.theme.colors.responses.redirect.color};
       }
 
       &.tab-info {
-        color: ${props => props.theme.colors.info};
+        color: ${props => props.theme.colors.responses.info.color};
       }
 
       &.tab-error {
-        color: ${props => props.theme.colors.error};
+        color: ${props => props.theme.colors.responses.error.color};
       }
     }
   }

src/components/ApiInfo/styled.elements.ts

@@ -13,8 +13,8 @@ export const ApiHeader = H1.extend`
 `;
 
 export const DownloadButton = styled.a`
-  border: 1px solid ${props => props.theme.colors.main};
-  color: ${props => props.theme.colors.main};
+  border: 1px solid ${props => props.theme.colors.primary.main};
+  color: ${props => props.theme.colors.primary.main};
   font-weight: normal;
   margin-left: 0.5em;
   padding: 4px 8px 4px;

src/components/Endpoint/styled.elements.ts

@@ -7,7 +7,7 @@ export const OperationEndpointWrap = styled.div`
 `;
 
 export const ServerRelativeURL = styled.span`
-  font-family: ${props => props.theme.headingsFont.family};
+  font-family: ${props => props.theme.typography.headings.fontFamily};
   margin-left: 10px;
 `;
 
@@ -23,10 +23,11 @@ export const EndpointInfo = withProps<{ expanded?: boolean; inverted?: boolean }
   border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
   transition: border-color 0.25s ease;
 
-  ${props => (props.expanded && !props.inverted && 'border-color: #3c4448;') || ''}
+  ${props =>
+    (props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''}
 
   .${ServerRelativeURL} {
-    color: ${props => (props.inverted ? props.theme.colors.text : '#ffffff')}
+    color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')}
   }
 `;
 
@@ -39,7 +40,7 @@ export const HttpVerb = withProps<{ type: string }>(styled.span).attrs({
   color: #ffffff;
   padding: 3px 10px;
   text-transform: uppercase;
-  font-family: ${props => props.theme.headingsFont.family};
+  font-family: ${props => props.theme.typography.headings.fontFamily};
   margin: 0;
 `;
 
@@ -68,8 +69,8 @@ export const ServerUrl = styled.div`
   border: 1px solid #ccc;
   background: #fff;
   word-break: break-all;
-  color: ${props => props.theme.colors.main};
+  color: ${props => props.theme.colors.primary.main};
   > span {
-    color: ${props => props.theme.colors.text};
+    color: ${props => props.theme.colors.text.primary};
   }
 `;

src/components/Fields/Field.tsx

@@ -46,7 +46,7 @@ export class Field extends React.Component<FieldProps> {
       >
         <PropertyBullet />
         {name}
-        <ShelfIcon size={'1.2em'} direction={expanded ? 'down' : 'right'} />
+        <ShelfIcon direction={expanded ? 'down' : 'right'} />
         {required && <RequiredLabel> required </RequiredLabel>}
       </ClickablePropertyNameCell>
     ) : (

src/components/JsonViewer/style.ts

@@ -5,8 +5,8 @@ export const jsonStyles = css`
     display: none;
   }
 
-  font-family: ${props => props.theme.code.fontFamily};
-  font-size: ${props => props.theme.code.fontSize};
+  font-family: ${props => props.theme.typography.code.fontFamily};
+  font-size: ${props => props.theme.typography.code.fontSize};
 
   word-break: break-all;
   word-wrap: break-word;

src/components/Markdown/styled.elements.ts

@@ -4,23 +4,23 @@ import styled, { css, extensionsHook, withProps } from '../../styled-components'
 export const linksCss = css`
   a {
     text-decoration: none;
-    color: ${props => props.theme.links.color};
+    color: ${props => props.theme.typography.links.color};
 
     &:visited {
-      color: ${props => props.theme.links.visited};
+      color: ${props => props.theme.typography.links.visited};
     }
 
     &:hover {
-      color: ${props => props.theme.links.hover};
+      color: ${props => props.theme.typography.links.hover};
     }
   }
 `;
 
 export const StyledMarkdownBlock = withProps<{ dense?: boolean; inline?: boolean }>(styled.div)`
 
-  font-family: ${props => props.theme.baseFont.family};
-  font-weight: ${props => props.theme.baseFont.weight};
-  line-height: ${props => props.theme.baseFont.lineHeight};
+  font-family: ${props => props.theme.typography.fontFamily};
+  font-weight: ${props => props.theme.typography.fontWeightRegular};
+  line-height: ${props => props.theme.typography.lineHeight};
 
   p {
     &:last-of-type {
@@ -42,27 +42,28 @@ export const StyledMarkdownBlock = withProps<{ dense?: boolean; inline?: boolean
 
   h1 {
     ${headerCommonMixin(1)};
-    color: ${props => props.theme.colors.main};
+    color: ${props => props.theme.colors.primary.main};
     margin-top: 0;
   }
 
   h2 {
     ${headerCommonMixin(2)};
-    color: ${props => props.theme.colors.text};
+    color: ${props => props.theme.colors.text.primary};
   }
 
   code {
-    color: ${({ theme }) => theme.colors.code};
-    background-color: ${({ theme }) => theme.colors.codeBg};
-    font-family: ${props => props.theme.code.fontFamily};
+    color: ${({ theme }) => theme.typography.code.color};
+    background-color: ${({ theme }) => theme.typography.code.backgroundColor};
+
+    font-family: ${props => props.theme.typography.code.fontFamily};
     border-radius: 2px;
     border: 1px solid rgba(38, 50, 56, 0.1);
     padding: 0.1em 0.25em 0.2em;
-    font-size: ${props => props.theme.code.fontSize};
+    font-size: ${props => props.theme.typography.code.fontSize};
   }
 
   pre {
-    font-family: ${props => props.theme.code.fontFamily};
+    font-family: ${props => props.theme.typography.code.fontFamily};
     white-space: pre-wrap;
     background-color: #263238;
     color: white;
@@ -75,6 +76,7 @@ export const StyledMarkdownBlock = withProps<{ dense?: boolean; inline?: boolean
     code {
       background-color: transparent;
       color: white;
+      padding: 0;
 
       &:before,
       &:after {
@@ -140,7 +142,7 @@ export const StyledMarkdownBlock = withProps<{ dense?: boolean; inline?: boolean
 
   ${linkifyMixin('.share-link')};
 
-  ${extensionsHook('Markdown')};
-
   ${linksCss}
+
+  ${extensionsHook('Markdown')};
 `;

src/components/PayloadSamples/styled.elements.ts

@@ -36,7 +36,7 @@ export const InvertedSimpleDropdown = StyledDropdown.extend`
 `;
 
 export const NoSampleLabel = styled.div`
-  font-family: ${props => props.theme.code.fontFamily};
+  font-family: ${props => props.theme.typography.code.fontFamily};
   font-size: 12px;
   color: #ee807f;
 `;

src/components/Redoc/styled.elements.tsx

@@ -1,19 +1,19 @@
 import styled, { media } from '../../styled-components';
 
 export const RedocWrap = styled.div`
-  font-family: ${props => props.theme.baseFont.family};
-  font-size: ${props => props.theme.baseFont.size};
-  font-weight: ${props => props.theme.baseFont.weight};
-  line-height: ${props => props.theme.baseFont.lineHeight};
-  color: ${props => props.theme.colors.text};
+  ${({ theme }) => `
+  font-family: ${theme.typography.fontFamily};
+  font-size: ${theme.typography.fontSize};
+  font-weight: ${theme.typography.fontWeightRegular};
+  line-height: ${theme.typography.lineHeight};
+  color: ${theme.colors.text.primary};
   display: flex;
   position: relative;
   text-align: left;
 
-  -webkit-font-smoothing: ${props => props.theme.baseFont.smoothing};
-  font-smoothing: ${props => props.theme.baseFont.smoothing};
-  ${props =>
-    (props.theme.baseFont.optimizeSpeed && 'text-rendering: optimizeSpeed !important') || ''};
+  -webkit-font-smoothing: ${theme.typography.smoothing};
+  font-smoothing: ${theme.typography.smoothing};
+  ${(theme.typography.optimizeSpeed && 'text-rendering: optimizeSpeed !important') || ''};
 
   tap-highlight-color: rgba(0, 0, 0, 0);
   text-size-adjust: 100%;
@@ -24,8 +24,9 @@ export const RedocWrap = styled.div`
   }
 
   .redoc-markdown h1 {
-    padding-top: ${props => props.theme.spacingUnit * 4}px;
+    padding-top: ${theme.spacing.unit * 16}px;
   }
+`};
 `;
 
 export const ApiContentWrap = styled.div`
@@ -40,12 +41,12 @@ export const ApiContentWrap = styled.div`
 `;
 
 export const BackgroundStub = styled.div`
-  background: ${props => props.theme.rightPanel.backgroundColor};
+  background: ${({ theme }) => theme.rightPanel.backgroundColor};
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
-  width: calc((100% - ${props => props.theme.menu.width}) * 0.4);
+  width: calc((100% - ${({ theme }) => theme.menu.width}) * 0.4);
   ${media.lessThan('medium')`
     display: none;
   `};

src/components/RedocStandalone.tsx

@@ -49,7 +49,7 @@ export class RedocStandalone extends React.PureComponent<RedocStandaloneProps> {
             !loading ? (
               <Redoc store={store!} />
             ) : hideLoading ? null : (
-              <Loading color={normalizedOpts.theme.colors.main} />
+              <Loading color={normalizedOpts.theme.colors.primary.main} />
             )
           }
         </StoreProvider>

src/components/Responses/styled.elements.ts

@@ -1,4 +1,4 @@
-import { transparentize } from 'polished';
+// import { transparentize } from 'polished';
 
 import { UnderlinedHeader } from '../../common-elements';
 import styled from '../../styled-components';
@@ -12,8 +12,8 @@ export const StyledResponseTitle = styled(ResponseTitle)`
   background-color: #f2f2f2;
   cursor: pointer;
 
-  color: ${props => props.theme.colors[props.type]};
-  background-color: ${props => transparentize(0.92, props.theme.colors[props.type])};
+  color: ${props => props.theme.colors.responses[props.type].color};
+  background-color: ${props => props.theme.colors.responses[props.type].backgroundColor};
 
   ${props =>
     (props.empty &&

src/components/SearchBox/styled.elements.tsx

@@ -10,10 +10,11 @@ export const SearchWrap = styled.div`
 export const SearchInput = styled.input.attrs({
   className: 'search-input',
 })`
-  width: calc(100% - ${props => props.theme.spacingUnit * 2}px);
+  width: calc(100% - ${props => props.theme.spacing.unit * 8}px);
   box-sizing: border-box;
-  margin: 0 ${props => props.theme.spacingUnit}px;
-  padding: 5px ${props => props.theme.spacingUnit / 2}px 5px ${props => props.theme.spacingUnit}px;
+  margin: 0 ${props => props.theme.spacing.unit * 4}px;
+  padding: 5px ${props => props.theme.spacing.unit * 2}px 5px
+    ${props => props.theme.spacing.unit * 4}px;
   border: 0;
   border-bottom: 1px solid #e1e1e1;
   font-weight: bold;
@@ -38,7 +39,7 @@ export const SearchIcon = styled((props: any) => (
   className: 'search-icon',
 })`
   position: absolute;
-  left: ${props => props.theme.spacingUnit}px;
+  left: ${props => props.theme.spacing.unit * 4}px;
   height: 1.8em;
   width: 0.9em;
 
@@ -48,7 +49,7 @@ export const SearchIcon = styled((props: any) => (
 `;
 
 export const SearchResultsBox = styled.div`
-  padding: ${props => props.theme.spacingUnit / 4}px 0;
+  padding: ${props => props.theme.spacing.unit}px 0;
   background-color: #ededed;
   min-height: 150px;
   max-height: 250px;
@@ -80,9 +81,9 @@ export const SearchResultsBox = styled.div`
 export const ClearIcon = styled.i`
   position: absolute;
   display: inline-block;
-  width: ${props => props.theme.spacingUnit / 2}px;
+  width: ${props => props.theme.spacing.unit * 2}px;
   text-align: center;
-  right: ${props => props.theme.spacingUnit}px;
+  right: ${props => props.theme.spacing.unit * 4}px;
   line-height: 2em;
   vertical-align: middle;
   margin-right: 2px;

src/components/SecurityRequirement/SecuirityRequirement.tsx

@@ -1,4 +1,4 @@
-import { transparentize } from 'polished';
+// import { transparentize } from 'polished';
 import * as React from 'react';
 
 import styled from '../../styled-components';
@@ -8,9 +8,9 @@ import { SecurityRequirementModel } from '../../services/models/SecurityRequirem
 import { linksCss } from '../Markdown/styled.elements';
 
 const ScopeName = styled.code`
-  font-size: ${props => props.theme.code.fontSize};
-  font-family: ${props => props.theme.code.fontFamily};
-  border: 1px solid ${props => transparentize(0.85, props.theme.colors.text)};
+  font-size: ${props => props.theme.typography.code.fontSize};
+  font-family: ${props => props.theme.typography.code.fontFamily};
+  border: 1px solid ${({ theme }) => theme.colors.border.dark};
   margin: 0 3px;
   padding: 0.2em;
   display: inline-block;
@@ -60,7 +60,7 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
 const AuthHeaderColumn = styled.td``;
 
 const SecuritiesColumn = styled.td`
-  width: ${props => props.theme.schemaView.defaultDetailsWidth};
+  width: ${props => props.theme.schema.defaultDetailsWidth};
 `;
 
 const AuthHeader = UnderlinedHeader.extend`

src/components/SideMenu/styled.elements.ts

@@ -1,6 +1,6 @@
 import * as classnames from 'classnames';
 
-import { deprecatedCss } from '../../common-elements';
+import { deprecatedCss, ShelfIcon } from '../../common-elements';
 import styled, { css, withProps } from '../../styled-components';
 
 export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
@@ -8,7 +8,7 @@ export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
 })`
   width: 26px;
   display: inline-block;
-  height: ${props => props.theme.code.fontSize};;
+  height: ${props => props.theme.typography.code.fontSize};;
   background-color: #333;
   border-radius: 3px;
   vertical-align: top;
@@ -101,17 +101,17 @@ export const menuItemDepth = {
     font-size: 0.8em;
     padding-bottom: 0;
     cursor: default;
-    color: ${props => props.theme.colors.text};
+    color: ${props => props.theme.colors.text.primary};
   `,
   1: css`
     font-size: 0.929em;
     text-transform: ${({ theme }) => theme.menu.level1Items.textTransform};
     &:hover {
-      color: ${props => props.theme.colors.main};
+      color: ${props => props.theme.colors.primary.main};
     }
   `,
   2: css`
-    color: ${props => props.theme.colors.text};
+    color: ${props => props.theme.colors.text.primary};
   `,
 };
 
@@ -128,14 +128,15 @@ export const MenuItemLabel = withProps<{
     }),
 })`
   cursor: pointer;
-  color: ${props => (props.active ? props.theme.colors.main : props.theme.colors.text)};
+  color: ${props =>
+    props.active ? props.theme.colors.primary.main : props.theme.colors.text.primary};
   margin: 0;
-  padding: 12.5px ${props => props.theme.spacingUnit}px;
+  padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
   ${({ depth, type, theme }) =>
-    (type === 'section' && depth > 1 && 'padding-left: ' + theme.spacingUnit * 2 + 'px;') || ''}
+    (type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
   display: flex;
   justify-content: space-between;
-  font-family: ${props => props.theme.headingsFont.family};
+  font-family: ${props => props.theme.typography.headings.fontFamily};
   ${props => menuItemDepth[props.depth]};
   background-color: ${props => (props.active ? menuItemActiveBg(props.depth) : '')};
 
@@ -144,6 +145,14 @@ export const MenuItemLabel = withProps<{
   &:hover {
     background-color: ${props => menuItemActiveBg(props.depth)};
   }
+
+  ${ShelfIcon} {
+    height: ${({ theme }) => theme.menu.arrow.size};
+    width: ${({ theme }) => theme.menu.arrow.size};
+    polygon {
+      fill: ${({ theme }) => theme.menu.arrow.color};
+    }
+  }
 `;
 
 export const MenuItemTitle = withProps<{ width?: string }>(styled.span)`
@@ -156,8 +165,8 @@ export const MenuItemTitle = withProps<{ width?: string }>(styled.span)`
 
 export const RedocAttribution = styled.div`
   font-size: 0.8em;
-  margin-top: ${({ theme }) => `${theme.spacingUnit / 2}px`};
-  padding: ${({ theme }) => `0 ${theme.spacingUnit}px`};
+  margin-top: ${({ theme }) => `${theme.spacing.unit * 2}px`};
+  padding: ${({ theme }) => `0 ${theme.spacing.unit * 4}px`};
   text-align: left;
 
   opacity: 0.7;
@@ -165,7 +174,7 @@ export const RedocAttribution = styled.div`
   a,
   a:visited,
   a:hover {
-    color: ${({ theme }) => theme.colors.text} !important;
+    color: ${({ theme }) => theme.colors.text.primary} !important;
     border-top: 1px solid #e1e1e1;
     padding-top: 10px;
     display: block;

src/components/SourceCode/SourceCode.tsx

@@ -6,8 +6,8 @@ import { SampleControls, SampleControlsWrap } from '../../common-elements';
 import { CopyButtonWrapper } from '../../common-elements/CopyButtonWrapper';
 
 const StyledPre = styled.pre`
-  font-family: ${props => props.theme.code.fontFamily};
-  font-size: ${props => props.theme.code.fontSize};
+  font-family: ${props => props.theme.typography.code.fontFamily};
+  font-size: ${props => props.theme.typography.code.fontSize};
   overflow-x: auto;
   margin: 0;
 

src/components/StickySidebar/ChevronSvg.tsx

@@ -62,5 +62,5 @@ const ChevronContainer = styled.div`
   align-self: center;
   display: flex;
   flex-direction: column;
-  color: ${props => props.theme.colors.main};
+  color: ${props => props.theme.colors.primary.main};
 `;

src/components/StickySidebar/StickyResponsiveSidebar.tsx

@@ -49,7 +49,7 @@ const FloatingButton = styled.div`
   outline: none;
   user-select: none;
   background-color: #f2f2f2;
-  color: ${props => props.theme.colors.main};
+  color: ${props => props.theme.colors.primary.main};
   display: none;
   cursor: pointer;
   position: fixed;

src/theme.ts

@@ -1,23 +1,66 @@
-import { desaturate, lighten, transparentize } from 'polished';
+import { darken, desaturate, lighten, readableColor, transparentize } from 'polished';
 
 const defaultTheme: ThemeInterface = {
-  spacingUnit: 20,
-
+  spacing: {
+    unit: 5,
+  },
   breakpoints: {
     small: '50rem',
     medium: '85rem',
     large: '105rem',
   },
   colors: {
-    main: '#32329f',
-    success: '#00aa13',
-    redirect: '#ffa500',
-    error: '#e53935',
-    info: '#87ceeb',
-    text: '#263238',
-    code: '#e53935',
-    codeBg: 'rgba(38, 50, 56, 0.04)',
-    warning: '#f1c400',
+    tonalOffset: 0.3,
+    primary: {
+      main: '#32329f',
+      light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),
+      dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),
+      contrastText: ({ colors }) => readableColor(colors.primary.main),
+    },
+    success: {
+      main: '#00aa13',
+      light: ({ colors }) => lighten(colors.tonalOffset, colors.success.main),
+      dark: ({ colors }) => darken(colors.tonalOffset, colors.success.main),
+      contrastText: ({ colors }) => readableColor(colors.success.main),
+    },
+    warning: {
+      main: '#d4ad03',
+      light: ({ colors }) => lighten(colors.tonalOffset, colors.warning.main),
+      dark: ({ colors }) => darken(colors.tonalOffset, colors.warning.main),
+      contrastText: ({ colors }) => readableColor(colors.warning.main),
+    },
+    error: {
+      main: '#e53935',
+      light: ({ colors }) => lighten(colors.tonalOffset, colors.error.main),
+      dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main),
+      contrastText: ({ colors }) => readableColor(colors.error.main),
+    },
+    text: {
+      primary: '#333333',
+      secondary: ({ colors }) => lighten(colors.tonalOffset, colors.text.primary),
+    },
+    border: {
+      dark: 'rgba(0,0,0, 0.1)',
+      light: '#ffffff',
+    },
+    responses: {
+      success: {
+        color: ({ colors }) => colors.success.main,
+        backgroundColor: ({ colors }) => transparentize(0.9, colors.success.main),
+      },
+      error: {
+        color: ({ colors }) => colors.error.main,
+        backgroundColor: ({ colors }) => transparentize(0.9, colors.error.main),
+      },
+      redirect: {
+        color: '#ffa500',
+        backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.redirect.color),
+      },
+      info: {
+        color: '#87ceeb',
+        backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.info.color),
+      },
+    },
     http: {
       get: '#6bbd5b',
       post: '#248fb2',
@@ -30,33 +73,50 @@ const defaultTheme: ThemeInterface = {
       head: '#c167e4',
     },
   },
-  schemaView: {
-    linesColor: theme => lighten(0.25, desaturate(0.35, theme.colors.main)),
+  schema: {
+    linesColor: theme =>
+      lighten(
+        theme.colors.tonalOffset,
+        desaturate(theme.colors.tonalOffset, theme.colors.primary.main),
+      ),
     defaultDetailsWidth: '75%',
-    typeNameColor: theme => transparentize(0.2, theme.colors.text),
-    typeTitleColor: theme => theme.schemaView.typeNameColor,
-    requireLabelColor: theme => theme.colors.error,
+    typeNameColor: theme => theme.colors.text.secondary,
+    typeTitleColor: theme => theme.schema.typeNameColor,
+    requireLabelColor: theme => theme.colors.error.main,
+    labelsTextSize: '0.9em',
     nestingSpacing: '1em',
+    nestedBackground: '#fafafa',
+    arrow: {
+      size: '1.1em',
+      color: theme => theme.colors.text.secondary,
+    },
   },
-  baseFont: {
-    size: '14px',
+  typography: {
+    fontSize: '14px',
     lineHeight: '1.5',
-    weight: '400',
-    family: 'Roboto, sans-serif',
+    fontWeightRegular: '400',
+    fontWeightBold: '600',
+    fontWeightLight: '300',
+    fontFamily: 'Roboto, sans-serif',
     smoothing: 'antialiased',
     optimizeSpeed: true,
-  },
-  headingsFont: {
-    family: 'Montserrat, sans-serif',
-  },
-  code: {
-    fontSize: '13px',
-    fontFamily: 'Courier, monospace',
-  },
-  links: {
-    color: ({ colors }) => colors.main,
-    visited: ({ colors }) => colors.main,
-    hover: ({ colors }) => lighten(0.2, colors.main),
+
+    headings: {
+      fontFamily: 'Montserrat, sans-serif',
+    },
+    code: {
+      fontSize: '13px',
+      fontFamily: 'Courier, monospace',
+      lineHeight: ({ typography }) => typography.lineHeight,
+      fontWeight: ({ typography }) => typography.fontWeightRegular,
+      color: '#e53935',
+      backgroundColor: 'rgba(38, 50, 56, 0.04)',
+    },
+    links: {
+      color: ({ colors }) => colors.primary.main,
+      visited: ({ colors }) => colors.primary.main,
+      hover: ({ colors }) => lighten(0.2, colors.primary.main),
+    },
   },
   menu: {
     width: '260px',
@@ -67,6 +127,10 @@ const defaultTheme: ThemeInterface = {
     level1Items: {
       textTransform: 'none',
     },
+    arrow: {
+      size: '1.5em',
+      color: theme => theme.colors.text.primary,
+    },
   },
   logo: {
     maxHeight: ({ menu }) => menu.width,
@@ -115,23 +179,55 @@ export function resolveTheme(theme: ThemeInterface): ResolvedThemeInterface {
   return JSON.parse(JSON.stringify(theme));
 }
 
+export interface ColorSetting {
+  main: string;
+  light: string;
+  dark: string;
+  contrastText: string;
+}
+
+export interface HTTPResponseColos {
+  color: string;
+  backgroundColor: string;
+}
+
+export interface FontSettings {
+  fontSize: string;
+  fontWeight: string;
+  fontFamily: string;
+  lineHeight: string;
+  color: string;
+}
+
 export interface ResolvedThemeInterface {
-  spacingUnit: number;
+  spacing: {
+    unit: number;
+  };
   breakpoints: {
     small: string;
     medium: string;
     large: string;
   };
   colors: {
-    main: string;
-    success: string;
-    redirect: string;
-    error: string;
-    info: string;
-    text: string;
-    code: string;
-    codeBg: string;
-    warning: string;
+    tonalOffset: number;
+    primary: ColorSetting;
+    success: ColorSetting;
+    warning: ColorSetting;
+    error: ColorSetting;
+    border: {
+      light: string;
+      dark: string;
+    };
+    text: {
+      primary: string;
+      secondary: string;
+    };
+    responses: {
+      success: HTTPResponseColos;
+      error: HTTPResponseColos;
+      redirect: HTTPResponseColos;
+      info: HTTPResponseColos;
+    };
     http: {
       get: string;
       post: string;
@@ -144,33 +240,43 @@ export interface ResolvedThemeInterface {
       head: string;
     };
   };
-  schemaView: {
+  schema: {
     linesColor: string;
     defaultDetailsWidth: string;
     typeNameColor: string;
     typeTitleColor: string;
     requireLabelColor: string;
+    labelsTextSize: string;
     nestingSpacing: string;
+    nestedBackground: string;
+    arrow: {
+      size: string;
+      color: string;
+    };
   };
-  baseFont: {
-    size: string;
+  typography: {
+    fontSize: string;
     lineHeight: string;
-    weight: string;
-    family: string;
+    fontWeightLight: string;
+    fontWeightRegular: string;
+    fontWeightBold: string;
+    fontFamily: string;
+
     smoothing: string;
     optimizeSpeed: boolean;
-  };
-  headingsFont: {
-    family: string;
-  };
-  code: {
-    fontSize: string;
-    fontFamily: string;
-  };
-  links: {
-    color: string;
-    visited: string;
-    hover: string;
+
+    code: FontSettings & {
+      backgroundColor: string;
+    };
+    headings: {
+      fontFamily: string;
+    };
+
+    links: {
+      color: string;
+      visited: string;
+      hover: string;
+    };
   };
   menu: {
     width: string;
@@ -181,6 +287,10 @@ export interface ResolvedThemeInterface {
     level1Items: {
       textTransform: string;
     };
+    arrow: {
+      size: string;
+      color: string;
+    };
   };
   logo: {
     maxHeight: string;
@@ -188,8 +298,8 @@ export interface ResolvedThemeInterface {
   };
   rightPanel: {
     backgroundColor: string;
-    width: string;
     textColor: string;
+    width: string;
   };
 
   extensionsHook?: (name: string, props: any) => string;