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,27 +96,27 @@ 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 {
     content: '';
     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,15 +40,15 @@ 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: ' [';
   }
 `;
 
 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,16 +42,18 @@ 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};
   }
 `;
 
 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;
 `;