chore(docz-theme-default): add a default radius

packages/docz-theme-default/README.md

@@ -79,6 +79,10 @@ const config = {
     src: null,
     width: null,
   },
+  /**
+   * Radius
+   */
+  radii: '4px',
   /**
    * Colors (depends on select mode)
    */

packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx

@@ -59,6 +59,8 @@ const IconLine = styled('span')`
 const translateX = (p: OpenProps) => (!p.opened ? '10px' : '-6px')
 const translateY = (p: OpenProps) => (!p.opened ? '4px' : '0px')
 
+const radii = get('radii')
+
 const ToggleButton = styled('button')`
   cursor: pointer;
   z-index: 99;
@@ -76,7 +78,7 @@ const ToggleButton = styled('button')`
   outline: none;
   border: none;
   background: ${p => (p.opened ? sidebarBg(p) : backgroundColor(p))};
-  border-radius: ${p => (p.opened ? '0 0 3px 0' : '3px')};
+  border-radius: ${p => (p.opened ? `0 0 ${radii(p)} 0` : `${radii(p)}`)};
 
   &:before {
     position: absolute;

packages/docz-theme-default/src/components/ui/Editor/index.tsx

@@ -48,13 +48,14 @@ const Wrapper = styled('div')`
   position: relative;
   width: 100%;
   border: 1px solid ${get('colors.border')};
-  border-radius: 3px;
+  border-radius: ${get('radii')};
 `
 
 const Scrollbar = styled(PerfectScrollbar)`
   overflow: auto;
   position: relative;
   max-height: 360px;
+  border-radius: ${get('radii')};
 
   .ps__rail-y {
     z-index: 9;
@@ -68,7 +69,7 @@ const EditorStyled = styled(CodeMirror)`
   ${themes.light()};
   ${p => p.theme.docz.mq(preStyles(p))};
   position: relative;
-  border-radius: 3px;
+  border-radius: ${get('radii')};
   flex: 1;
 
   .CodeMirror {

packages/docz-theme-default/src/components/ui/Editor/ps-scrollbar.ts

@@ -51,7 +51,7 @@ injectGlobal`
  */
 .ps__thumb-x {
   background-color: #aaa;
-  border-radius: 6px;
+  border-radius: 4px;
   transition: background-color .2s linear, height .2s ease-in-out;
   -webkit-transition: background-color .2s linear, height .2s ease-in-out;
   height: 6px;
@@ -63,7 +63,7 @@ injectGlobal`
 
 .ps__thumb-y {
   background-color: #aaa;
-  border-radius: 6px;
+  border-radius: 4px;
   transition: background-color .2s linear, width .2s ease-in-out;
   -webkit-transition: background-color .2s linear, width .2s ease-in-out;
   width: 6px;

packages/docz-theme-default/src/components/ui/Page.tsx

@@ -28,7 +28,7 @@ const EditPage = styled(ButtonLink.withComponent('a'))`
   position: absolute;
   padding: 2px 8px;
   margin: 8px;
-  border-radius: 3px;
+  border-radius: ${get('radii')};
   border: 1px solid ${get('colors.border')};
   opacity: 0.7;
   transition: opacity 0.4s;

packages/docz-theme-default/src/components/ui/Render/ResizeBar.tsx

@@ -20,7 +20,7 @@ const Buttons = styled('div')`
   display: flex;
   background: ${get('colors.background')};
   border: 1px solid ${get('colors.border')};
-  border-radius: 3px;
+  border-radius: ${get('radii')};
   padding: 3px 5px;
 `
 

packages/docz-theme-default/src/components/ui/Render/index.tsx

@@ -60,7 +60,7 @@ const PlaygroundWrapper = styled('div')`
   overflow-y: auto;
   position: relative;
   flex: 1;
-  border-radius: 4px 4px 0 0;
+  border-radius: ${themeGet('radii')} ${themeGet('radii')} 0 0;
   border: 1px solid ${borderColor};
   background: ${backgroundColor};
   min-height: ${whenFullscreen('198px', 'auto')};
@@ -94,7 +94,7 @@ const Pre = styled(PreBase)`
 
 const editorClassName = css`
   border-top: 0;
-  border-radius: 0 0 0 5px;
+  border-radius: 0 0 0 4px;
 `
 
 const Actions = styled('div')`

packages/docz-theme-default/src/components/ui/Table.tsx

@@ -22,7 +22,7 @@ const TableStyled = styled('table')`
   border-spacing: 0;
   border-collapse: collapse;
   border-style: hidden;
-  border-radius: 5px;
+  border-radius: ${get('radii')};
   font-size: 14px;
   color: ${get('colors.tableColor')};
   ${p => p.theme.docz.mq(p.theme.docz.styles.table)};

packages/docz-theme-default/src/config.ts

@@ -4,6 +4,7 @@ import * as colors from './styles/colors'
 export const config = {
   colors,
   styles,
+  radii: '4px',
   mode: 'light',
   showPlaygroundEditor: false,
 }

packages/docz-theme-default/src/styles/codemirror/dark.ts

@@ -4,7 +4,7 @@ export const theme = () => css`
   .CodeMirror.cm-s-docz-dark {
     color: #d8dee9;
     background-color: #2e3440;
-    border-radius: 3px;
+    border-radius: 4px;
   }
   .cm-s-docz-dark .CodeMirror-selected {
     background-color: rgba(67, 76, 94, 0.8);
@@ -13,7 +13,7 @@ export const theme = () => css`
   .cm-s-docz-dark .CodeMirror-gutters {
     border: none;
     background-color: #2e3440;
-    border-radius: 3px;
+    border-radius: 4px;
   }
   .cm-s-docz-dark .CodeMirror-linenumber,
   .cm-s-docz-dark .CodeMirror-linenumbers {

packages/docz-theme-default/src/styles/codemirror/light.ts

@@ -2,7 +2,7 @@ import { css } from 'react-emotion'
 
 export const theme = () => css`
   .cm-s-docz-light.CodeMirror {
-    border-radius: 3px;
+    border-radius: 4px;
     background: #fbfcfd;
     color: #24292e;
   }
@@ -10,7 +10,7 @@ export const theme = () => css`
   .cm-s-docz-light .CodeMirror-gutters {
     background: #fbfcfd;
     border-right-width: 0;
-    border-radius: 3px;
+    border-radius: 4px;
   }
 
   .cm-s-docz-light .CodeMirror-guttermarker {