first theme changes

src/common-elements/PrismDiv.tsx

@@ -73,8 +73,9 @@ export const PrismDiv = styled.div`
   .token.string,
   .token.char,
   .token.builtin,
+  .token.punctuation,
   .token.inserted {
-    color: #a0fbaa;
+    color: #333333;
     & + a,
     & + a:visited {
       color: #4ed2ba;

src/common-elements/fields.ts

@@ -36,8 +36,8 @@ export const TypeTitle = styled(FieldLabel)`
 
 export const TypeFormat = TypeName;
 
-export const RequiredLabel = styled(FieldLabel.withComponent('div'))`
-  color: ${props => props.theme.schema.requireLabelColor};
+export const OptionalLabel = styled(FieldLabel.withComponent('div'))`
+  color: ${props => props.theme.schema.optionalLabelColor};
   font-size: ${props => props.theme.schema.labelsTextSize};
   font-weight: normal;
   margin-left: 20px;

src/common-elements/panels.ts

@@ -2,14 +2,9 @@ import { SECTION_ATTR } from '../services/MenuStore';
 import styled, { media } from '../styled-components';
 
 export const MiddlePanel = styled.div`
-  width: calc(100% - ${props => props.theme.rightPanel.width});
-  padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
-
-  ${media.lessThan('medium', true)`
-    width: 100%;
-    padding: ${props =>
-      `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
-  `};
+  width: 100%;
+  padding: ${props =>
+    `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
 `;
 
 export const Section = styled.div.attrs(props => ({
@@ -38,16 +33,11 @@ export const Section = styled.div.attrs(props => ({
 `;
 
 export const RightPanel = styled.div`
-  width: ${props => props.theme.rightPanel.width};
   color: ${({ theme }) => theme.rightPanel.textColor};
   background-color: ${props => props.theme.rightPanel.backgroundColor};
-  padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
-
-  ${media.lessThan('medium', true)`
-    width: 100%;
-    padding: ${props =>
-      `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
-  `};
+  width: 100%;
+  padding: ${props =>
+    `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
 `;
 
 export const DarkRightPanel = styled(RightPanel)`
@@ -58,8 +48,5 @@ export const Row = styled.div`
   display: flex;
   width: 100%;
   padding: 0;
-
-  ${media.lessThan('medium', true)`
-    flex-direction: column;
-  `};
+  flex-direction: column;
 `;

src/common-elements/tabs.ts

@@ -16,12 +16,12 @@ export const Tabs = styled(ReactTabs)`
       padding: 5px 10px;
       display: inline-block;
 
-      background-color: ${({ theme }) => darken(0.05, theme.rightPanel.backgroundColor)};
+      background-color: #ffffff;
       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)};
+      color: #333333;
       margin: 5px;
       border: 1px solid ${({ theme }) => darken(0.1, theme.rightPanel.backgroundColor)};
       border-radius: 5px;
@@ -31,7 +31,7 @@ export const Tabs = styled(ReactTabs)`
 
       &.react-tabs__tab--selected {
         color: ${props => props.theme.colors.text.primary};
-        background: ${({ theme }) => theme.rightPanel.textColor};
+        border: 1px solid ${({ theme }) => theme.rightPanel.textColor};
       }
 
       &:only-child {

src/components/Fields/Field.tsx

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
 
-import { ClickablePropertyNameCell, RequiredLabel } from '../../common-elements/fields';
+import { ClickablePropertyNameCell, OptionalLabel } from '../../common-elements/fields';
 import { FieldDetails } from './FieldDetails';
 
 import {
@@ -47,13 +47,13 @@ export class Field extends React.Component<FieldProps> {
         <PropertyBullet />
         {name}
         <ShelfIcon direction={expanded ? 'down' : 'right'} />
-        {required && <RequiredLabel> required </RequiredLabel>}
+        {!required && <OptionalLabel> optional </OptionalLabel>}
       </ClickablePropertyNameCell>
     ) : (
       <PropertyNameCell className={deprecated ? 'deprecated' : undefined} kind={kind} title={name}>
         <PropertyBullet />
         {name}
-        {required && <RequiredLabel> required </RequiredLabel>}
+        {!required && <OptionalLabel> optional </OptionalLabel>}
       </PropertyNameCell>
     );
 
@@ -65,21 +65,20 @@ export class Field extends React.Component<FieldProps> {
             <FieldDetails {...this.props} />
           </PropertyDetailsCell>
         </tr>
-        {field.expanded &&
-          withSubSchema && (
-            <tr key={field.name + 'inner'}>
-              <PropertyCellWithInner colSpan={2}>
-                <InnerPropertiesWrap>
-                  <Schema
-                    schema={field.schema}
-                    skipReadOnly={this.props.skipReadOnly}
-                    skipWriteOnly={this.props.skipWriteOnly}
-                    showTitle={this.props.showTitle}
-                  />
-                </InnerPropertiesWrap>
-              </PropertyCellWithInner>
-            </tr>
-          )}
+        {field.expanded && withSubSchema && (
+          <tr key={field.name + 'inner'}>
+            <PropertyCellWithInner colSpan={2}>
+              <InnerPropertiesWrap>
+                <Schema
+                  schema={field.schema}
+                  skipReadOnly={this.props.skipReadOnly}
+                  skipWriteOnly={this.props.skipWriteOnly}
+                  showTitle={this.props.showTitle}
+                />
+              </InnerPropertiesWrap>
+            </PropertyCellWithInner>
+          </tr>
+        )}
       </>
     );
   }

src/components/JsonViewer/style.ts

@@ -5,6 +5,10 @@ export const jsonStyles = css`
     display: none;
   }
 
+  .redoc-json {
+    color: #c2c2c2;
+  }
+
   font-family: ${props => props.theme.typography.code.fontFamily};
   font-size: ${props => props.theme.typography.code.fontSize};
 

src/components/Operation/Operation.tsx

@@ -22,9 +22,6 @@ import { Extensions } from '../Fields/Extensions';
 
 const OperationRow = styled(Row)`
   backface-visibility: hidden;
-  contain: content;
-
-  overflow: hidden;
 `;
 
 const Description = styled.div`

src/services/RedocNormalizedOptions.ts

@@ -141,7 +141,7 @@ export class RedocNormalizedOptions {
     this.sortPropsAlphabetically = argValueToBoolean(raw.sortPropsAlphabetically);
     this.noAutoAuth = argValueToBoolean(raw.noAutoAuth);
     this.nativeScrollbars = argValueToBoolean(raw.nativeScrollbars);
-    this.pathInMiddlePanel = argValueToBoolean(raw.pathInMiddlePanel);
+    this.pathInMiddlePanel = true;
     this.untrustedSpec = argValueToBoolean(raw.untrustedSpec);
     this.hideDownloadButton = argValueToBoolean(raw.hideDownloadButton);
     this.disableSearch = argValueToBoolean(raw.disableSearch);

src/theme.ts

@@ -84,7 +84,7 @@ const defaultTheme: ThemeInterface = {
     defaultDetailsWidth: '75%',
     typeNameColor: theme => theme.colors.text.secondary,
     typeTitleColor: theme => theme.schema.typeNameColor,
-    requireLabelColor: theme => theme.colors.error.main,
+    optionalLabelColor: theme => theme.colors.success.main,
     labelsTextSize: '0.9em',
     nestingSpacing: '1em',
     nestedBackground: '#fafafa',
@@ -141,12 +141,12 @@ const defaultTheme: ThemeInterface = {
     maxWidth: ({ menu }) => menu.width,
   },
   rightPanel: {
-    backgroundColor: '#263238',
+    backgroundColor: '#ffffff',
     width: '40%',
-    textColor: '#ffffff',
+    textColor: '#333333',
   },
   codeSample: {
-    backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
+    backgroundColor: '#ffffff',
   },
 };
 
@@ -254,7 +254,7 @@ export interface ResolvedThemeInterface {
     defaultDetailsWidth: string;
     typeNameColor: string;
     typeTitleColor: string;
-    requireLabelColor: string;
+    optionalLabelColor: string;
     labelsTextSize: string;
     nestingSpacing: string;
     nestedBackground: string;

yarn.lock

@@ -6257,9 +6257,10 @@ mark.js@^8.11.1:
   resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
   integrity sha1-GA8fnr74sOY45BZq1S24eb6y/8U=
 
-"marked@https://github.com/markedjs/marked#fb48827":
-  version "0.5.1"
-  resolved "https://github.com/markedjs/marked#fb48827236ed3a43e611d2adb3c070ca3f55ed8e"
+marked@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.5.2.tgz#3efdb27b1fd0ecec4f5aba362bddcd18120e5ba9"
+  integrity sha512-fdZvBa7/vSQIZCi4uuwo2N3q+7jJURpMVCcbaX0S1Mg65WZ5ilXvC67MviJAsdjqqgD+CEq4RKo5AYGgINkVAA==
 
 math-random@^1.0.1:
   version "1.0.1"