feat: new theme options spacing-> sectionHorizontal and sectionVertical

src/common-elements/panels.ts

@@ -3,7 +3,7 @@ import styled, { media, withProps } from '../styled-components';
 
 export const MiddlePanel = styled.div`
   width: calc(100% - ${props => props.theme.rightPanel.width});
-  padding: 0 ${props => props.theme.spacing.unit * 8}px;
+  padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
 
   ${media.lessThan('medium')`
     width: 100%;
@@ -15,7 +15,7 @@ export const Section = withProps<{ underlined?: boolean }>(
     [SECTION_ATTR]: props => props.id,
   } as any),
 )`
-  padding: ${props => props.theme.spacing.unit * 8}px 0;
+  padding: ${props => props.theme.spacing.sectionVertical}px 0;
 
   ${props =>
     (props.underlined &&
@@ -38,7 +38,7 @@ export const RightPanel = styled.div`
   width: ${props => props.theme.rightPanel.width};
   color: #fafbfc;
   background-color: ${props => props.theme.rightPanel.backgroundColor};
-  padding: 0 ${props => props.theme.spacing.unit * 8}px;
+  padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
 
   ${media.lessThan('medium')`
     width: 100%;

src/components/Redoc/styled.elements.tsx

@@ -22,10 +22,6 @@ export const RedocWrap = styled.div`
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   }
-
-  .redoc-markdown h1 {
-    padding-top: ${theme.spacing.unit * 16}px;
-  }
 `};
 `;
 

src/theme.ts

@@ -3,6 +3,8 @@ import { darken, desaturate, lighten, readableColor, transparentize } from 'poli
 const defaultTheme: ThemeInterface = {
   spacing: {
     unit: 5,
+    sectionHorizontal: ({ spacing }) => spacing.unit * 8,
+    sectionVertical: ({ spacing }) => spacing.unit * 8,
   },
   breakpoints: {
     small: '50rem',
@@ -202,6 +204,8 @@ export interface FontSettings {
 export interface ResolvedThemeInterface {
   spacing: {
     unit: number;
+    sectionHorizontal: number;
+    sectionVertical: number;
   };
   breakpoints: {
     small: string;