fix: improve names for some theme settings

src/common-elements/tabs.ts

@@ -16,15 +16,15 @@ export const Tabs = styled(ReactTabs)`
       padding: 5px 10px;
       display: inline-block;
 
-      background-color: ${({ theme }) => theme.codeSample.backgroundColor};
+      background-color: ${({ theme }) => theme.codeBlock.backgroundColor};
       border-bottom: 1px solid rgba(0, 0, 0, 0.5);
       cursor: pointer;
       text-align: center;
       outline: none;
       color: ${({ theme }) => darken(theme.colors.tonalOffset, theme.rightPanel.textColor)};
       margin: 0
         ${({ theme }) => `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`};
-      border: 1px solid ${({ theme }) => darken(0.05, theme.codeSample.backgroundColor)};
+      border: 1px solid ${({ theme }) => darken(0.05, theme.codeBlock.backgroundColor)};
       border-radius: 5px;
       min-width: 60px;
       font-size: 0.9em;
@@ -58,7 +58,7 @@ export const Tabs = styled(ReactTabs)`
     }
   }
   > .react-tabs__tab-panel {
-    background: ${({ theme }) => theme.codeSample.backgroundColor};
+    background: ${({ theme }) => theme.codeBlock.backgroundColor};
     & > div,
     & > pre {
       padding: ${props => props.theme.spacing.unit * 4}px;

src/components/Endpoint/styled.elements.ts

@@ -18,7 +18,7 @@ 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' : props.theme.codeSample.backgroundColor};
+    props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
   display: flex;
   white-space: nowrap;
   align-items: center;

src/components/Markdown/styled.elements.tsx

@@ -82,7 +82,7 @@ export const StyledMarkdownBlock = styled(
   pre {
     font-family: ${props => props.theme.typography.code.fontFamily};
     white-space:${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
-    background-color: #263238;
+    background-color: ${({ theme }) => theme.codeBlock.backgroundColor};
     color: white;
     padding: ${props => props.theme.spacing.unit * 4}px;
     overflow-x: auto;

src/components/Redoc/styled.elements.tsx

@@ -29,7 +29,7 @@ export const ApiContentWrap = styled.div`
   z-index: 1;
   position: relative;
   overflow: hidden;
-  width: calc(100% - ${props => props.theme.menu.width});
+  width: calc(100% - ${props => props.theme.sidebar.width});
   ${media.lessThan('small', true)`
     width: 100%;
   `};
@@ -46,7 +46,7 @@ export const BackgroundStub = styled.div`
   width: ${({ theme }) => {
     if (theme.rightPanel.width.endsWith('%')) {
       const percents = parseInt(theme.rightPanel.width, 10);
-      return `calc((100% - ${theme.menu.width}) * ${percents / 100})`;
+      return `calc((100% - ${theme.sidebar.width}) * ${percents / 100})`;
     } else {
       return theme.rightPanel.width;
     }

src/components/SchemaDefinition/SchemaDefinition.tsx

@@ -80,7 +80,7 @@ export class SchemaDefinition extends React.PureComponent<ObjectDescriptionProps
 }
 
 const MediaSamplesWrap = styled.div`
-  background: ${({ theme }) => theme.codeSample.backgroundColor};
+  background: ${({ theme }) => theme.codeBlock.backgroundColor};
   & > div,
   & > pre {
     padding: ${props => props.theme.spacing.unit * 4}px;

src/components/SearchBox/styled.elements.tsx

@@ -19,14 +19,14 @@ export const SearchInput = styled.input.attrs(() => ({
   border: 0;
   border-bottom: 1px solid
     ${({ theme }) =>
-      (getLuminance(theme.menu.backgroundColor) > 0.5 ? darken : lighten)(
+      (getLuminance(theme.sidebar.backgroundColor) > 0.5 ? darken : lighten)(
         0.1,
-        theme.menu.backgroundColor,
+        theme.sidebar.backgroundColor,
       )};
   font-family: ${({ theme }) => theme.typography.fontFamily};
   font-weight: bold;
   font-size: 13px;
-  color: ${props => props.theme.menu.textColor};
+  color: ${props => props.theme.sidebar.textColor};
   background-color: transparent;
   outline: none;
 `;
@@ -51,18 +51,18 @@ export const SearchIcon = styled((props: { className?: string }) => (
   width: 0.9em;
 
   path {
-    fill: ${props => props.theme.menu.textColor};
+    fill: ${props => props.theme.sidebar.textColor};
   }
 `;
 
 export const SearchResultsBox = styled.div`
   padding: ${props => props.theme.spacing.unit}px 0;
-  background-color: ${({ theme }) => darken(0.05, theme.menu.backgroundColor)}};
-  color: ${props => props.theme.menu.textColor};
+  background-color: ${({ theme }) => darken(0.05, theme.sidebar.backgroundColor)}};
+  color: ${props => props.theme.sidebar.textColor};
   min-height: 150px;
   max-height: 250px;
-  border-top: ${({ theme }) => darken(0.1, theme.menu.backgroundColor)}};
-  border-bottom: ${({ theme }) => darken(0.1, theme.menu.backgroundColor)}};
+  border-top: ${({ theme }) => darken(0.1, theme.sidebar.backgroundColor)}};
+  border-bottom: ${({ theme }) => darken(0.1, theme.sidebar.backgroundColor)}};
   margin-top: 10px;
   line-height: 1.4;
   font-size: 0.9em;
@@ -73,7 +73,7 @@ export const SearchResultsBox = styled.div`
 
     &:hover,
     &.active {
-      background-color: ${({ theme }) => darken(0.1, theme.menu.backgroundColor)};
+      background-color: ${({ theme }) => darken(0.1, theme.sidebar.backgroundColor)};
     }
 
     > svg {

src/components/SideMenu/styled.elements.ts

@@ -2,7 +2,7 @@ import * as classnames from 'classnames';
 import { darken } from 'polished';
 
 import { deprecatedCss, ShelfIcon } from '../../common-elements';
-import styled, { css } from '../../styled-components';
+import styled, { css, ResolvedThemeInterface } from '../../styled-components';
 
 export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
   className: `operation-type ${props.type}`,
@@ -62,11 +62,11 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
   }
 `;
 
-function menuItemActiveBg(depth, { theme }): string {
+function menuItemActiveBg(depth, { theme }: { theme: ResolvedThemeInterface }): string {
   if (depth > 1) {
-    return darken(0.1, theme.menu.backgroundColor);
+    return darken(0.1, theme.sidebar.backgroundColor);
   } else if (depth === 1) {
-    return darken(0.05, theme.menu.backgroundColor);
+    return darken(0.05, theme.sidebar.backgroundColor);
   } else {
     return '';
   }
@@ -94,21 +94,21 @@ export const MenuItemLi = styled.li<{ depth: number }>`
 export const menuItemDepth = {
   0: css`
     opacity: 0.7;
-    text-transform: ${({ theme }) => theme.menu.groupItems.textTransform};
+    text-transform: ${({ theme }) => theme.sidebar.groupItems.textTransform};
     font-size: 0.8em;
     padding-bottom: 0;
     cursor: default;
-    color: ${props => props.theme.menu.textColor};
+    color: ${props => props.theme.sidebar.textColor};
   `,
   1: css`
     font-size: 0.929em;
-    text-transform: ${({ theme }) => theme.menu.level1Items.textTransform};
+    text-transform: ${({ theme }) => theme.sidebar.level1Items.textTransform};
     &:hover {
-      color: ${props => props.theme.menu.activeTextColor};
+      color: ${props => props.theme.sidebar.activeTextColor};
     }
   `,
   2: css`
-    color: ${props => props.theme.menu.textColor};
+    color: ${props => props.theme.sidebar.textColor};
   `,
 };
 
@@ -126,7 +126,8 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
   }),
 }))<MenuItemLabelType>`
   cursor: pointer;
-  color: ${props => (props.active ? props.theme.menu.activeTextColor : props.theme.menu.textColor)};
+  color: ${props =>
+    props.active ? props.theme.sidebar.activeTextColor : props.theme.sidebar.textColor};
   margin: 0;
   padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
   ${({ depth, type, theme }) =>
@@ -144,10 +145,10 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
   }
 
   ${ShelfIcon} {
-    height: ${({ theme }) => theme.menu.arrow.size};
-    width: ${({ theme }) => theme.menu.arrow.size};
+    height: ${({ theme }) => theme.sidebar.arrow.size};
+    width: ${({ theme }) => theme.sidebar.arrow.size};
     polygon {
-      fill: ${({ theme }) => theme.menu.arrow.color};
+      fill: ${({ theme }) => theme.sidebar.arrow.color};
     }
   }
 `;
@@ -172,8 +173,8 @@ export const RedocAttribution = styled.div`
   a,
   a:visited,
   a:hover {
-    color: ${theme.menu.textColor} !important;
-    border-top: 1px solid ${darken(0.1, theme.menu.backgroundColor)};
+    color: ${theme.sidebar.textColor} !important;
+    border-top: 1px solid ${darken(0.1, theme.sidebar.backgroundColor)};
     padding: ${theme.spacing.unit}px 0;
     display: block;
   }

src/components/StickySidebar/StickyResponsiveSidebar.tsx

@@ -26,8 +26,8 @@ export interface StickySidebarState {
 const stickyfill = Stickyfill && Stickyfill();
 
 const StyledStickySidebar = styled.div<{ open?: boolean }>`
-  width: ${props => props.theme.menu.width};
-  background-color: ${props => props.theme.menu.backgroundColor};
+  width: ${props => props.theme.sidebar.width};
+  background-color: ${props => props.theme.sidebar.backgroundColor};
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -44,7 +44,7 @@ const StyledStickySidebar = styled.div<{ open?: boolean }>`
     position: fixed;
     z-index: 20;
     width: 100%;
-    background: ${({ theme }) => theme.menu.backgroundColor};
+    background: ${({ theme }) => theme.sidebar.backgroundColor};
     display: ${props => (props.open ? 'flex' : 'none')};
   `};
 

src/services/RedocNormalizedOptions.ts

@@ -113,14 +113,14 @@ export class RedocNormalizedOptions {
     }
 
     if (typeof value !== 'string') {
-      return value
+      return value;
     }
 
     switch (value) {
       case 'true':
-        return true
+        return true;
       case 'false':
-        return false
+        return false;
       default:
         return value.split(',').map(ext => ext.trim());
     }
@@ -179,6 +179,18 @@ export class RedocNormalizedOptions {
   constructor(raw: RedocRawOptions, defaults: RedocRawOptions = {}) {
     raw = { ...defaults, ...raw };
     const hook = raw.theme && raw.theme.extensionsHook;
+
+    // migrate from old theme
+    if ((raw.theme as any)?.menu && !raw.theme?.sidebar) {
+      console.warn('Theme setting "menu" is deprecated. Rename to "sidebar"');
+      raw.theme!.sidebar = (raw.theme as any).menu;
+    }
+
+    if ((raw.theme as any)?.codeSample && !raw.theme?.codeBlock) {
+      console.warn('Theme setting "codeSample" is deprecated. Rename to "codeBlock"');
+      raw.theme!.codeBlock = (raw.theme as any).codeSample;
+    }
+
     this.theme = resolveTheme(
       mergeObjects({} as any, defaultTheme, { ...raw.theme, extensionsHook: undefined }),
     );

src/theme.ts

@@ -20,13 +20,13 @@ const defaultTheme: ThemeInterface = {
       contrastText: ({ colors }) => readableColor(colors.primary.main),
     },
     success: {
-      main: '#00aa13',
-      light: ({ colors }) => lighten(colors.tonalOffset, colors.success.main),
+      main: '#37d247',
+      light: ({ colors }) => lighten(colors.tonalOffset * 2, colors.success.main),
       dark: ({ colors }) => darken(colors.tonalOffset, colors.success.main),
       contrastText: ({ colors }) => readableColor(colors.success.main),
     },
     warning: {
-      main: '#d4ad03',
+      main: '#ffa500',
       light: ({ colors }) => lighten(colors.tonalOffset, colors.warning.main),
       dark: ({ colors }) => darken(colors.tonalOffset, colors.warning.main),
       contrastText: '#ffffff',
@@ -55,7 +55,7 @@ const defaultTheme: ThemeInterface = {
         backgroundColor: ({ colors }) => transparentize(0.9, colors.error.main),
       },
       redirect: {
-        color: '#ffa500',
+        color: ({ colors }) => colors.warning.main,
         backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.redirect.color),
       },
       info: {
@@ -122,13 +122,13 @@ const defaultTheme: ThemeInterface = {
       hover: ({ typography }) => lighten(0.2, typography.links.color),
     },
   },
-  menu: {
+  sidebar: {
     width: '260px',
     backgroundColor: '#fafafa',
     textColor: '#333333',
     activeTextColor: theme =>
-      theme.menu.textColor !== defaultTheme.menu!.textColor
-        ? theme.menu.textColor
+      theme.sidebar.textColor !== defaultTheme.sidebar!.textColor
+        ? theme.sidebar.textColor
         : theme.colors.primary.main,
     groupItems: {
       textTransform: 'uppercase',
@@ -138,20 +138,20 @@ const defaultTheme: ThemeInterface = {
     },
     arrow: {
       size: '1.5em',
-      color: theme => theme.menu.textColor,
+      color: theme => theme.sidebar.textColor,
     },
   },
   logo: {
-    maxHeight: ({ menu }) => menu.width,
-    maxWidth: ({ menu }) => menu.width,
+    maxHeight: ({ sidebar: menu }) => menu.width,
+    maxWidth: ({ sidebar: menu }) => menu.width,
     gutter: '2px',
   },
   rightPanel: {
     backgroundColor: '#263238',
     width: '40%',
     textColor: '#ffffff',
   },
-  codeSample: {
+  codeBlock: {
     backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
   },
 };
@@ -296,7 +296,7 @@ export interface ResolvedThemeInterface {
       hover: string;
     };
   };
-  menu: {
+  sidebar: {
     width: string;
     backgroundColor: string;
     textColor: string;
@@ -322,7 +322,7 @@ export interface ResolvedThemeInterface {
     textColor: string;
     width: string;
   };
-  codeSample: {
+  codeBlock: {
     backgroundColor: string;
   };