feat: new theme option: nestingSpacing

Author: RomanHotsiy

src/common-elements/fields-layout.ts

@@ -114,12 +114,13 @@ export const PropertyBullet = styled.span`
 `;
 
 export const InnerPropertiesWrap = styled.div`
-  padding: 1em;
+  padding: ${({ theme }) => theme.schemaView.nestingSpacing};
 `;
 
 export const PropertiesTable = styled.table`
   border-collapse: collapse;
   border-radius: 3px;
+  font-size: ${props => props.theme.baseFont.size};
 
   border-spacing: 0;
   width: 100%;
@@ -140,7 +141,8 @@ export const PropertiesTable = styled.table`
     ${InnerPropertiesWrap}
     ${InnerPropertiesWrap}
     ${InnerPropertiesWrap} {
-    margin: 1em 0 1em 1em;
+    margin: ${({ theme }) => theme.schemaView.nestingSpacing};
+    margin-right: 0;
     background: #f0f0f0;
   }
 

src/theme.ts

@@ -32,6 +32,7 @@ const defaultTheme: ThemeInterface = {
     typeNameColor: theme => transparentize(0.2, theme.colors.text),
     typeTitleColor: theme => theme.schemaView.typeNameColor,
     requireLabelColor: theme => theme.colors.error,
+    nestingSpacing: '1em',
   },
   baseFont: {
     size: '14px',
@@ -135,6 +136,7 @@ export interface ResolvedThemeInterface {
     typeNameColor: string;
     typeTitleColor: string;
     requireLabelColor: string;
+    nestingSpacing: string;
   };
   baseFont: {
     size: string;
@@ -174,5 +176,5 @@ export type primitive = string | number | boolean | undefined | null;
 export type AdvancedThemeDeep<T> = T extends primitive
   ? T | ((theme: ResolvedThemeInterface) => T)
   : AdvancedThemeObject<T>;
-export type AdvancedThemeObject<T> = { [P in keyof T]: AdvancedThemeDeep<T[P]> };
+export type AdvancedThemeObject<T> = { [P in keyof T]?: AdvancedThemeDeep<T[P]> };
 export type ThemeInterface = AdvancedThemeObject<ResolvedThemeInterface>;