docs: tweak styling

docs/pages/Getting Started.md

@@ -14,7 +14,7 @@ After installation, you'll need to link [react-native-vector-icons](https://gith
 
 ## Usage
 
-Wrap your root component in `Provider` from `react-native-paper`. It's a good idea to wrap the component which is passed to `AppRegsitry.registerComponent`.
+Wrap your root component in `Provider` from `react-native-paper`. It's a good idea to wrap the component which is passed to `AppRegistry.registerComponent`.
 
 Example:
 
@@ -29,7 +29,7 @@ function Main() {
     <PaperProvider>
       <App />
     </PaperProvider>
-  )
+  );
 }
 
 AppRegistry.registerComponent('main', () => Main);
@@ -66,6 +66,6 @@ function Main() {
     <PaperProvider theme={theme}>
       <App />
     </PaperProvider>
-  )
+  );
 }
 ```

docs/templates/App.js

@@ -19,7 +19,7 @@ insertGlobal(`
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     margin: 0;
     padding: 0;
-    color: #333;
+    color: #000;
     lineHeight: 1.5;
   }
   code {

docs/templates/ComponentDocs.js

@@ -36,7 +36,7 @@ const propRequired = style({
   left: -24,
   fontSize: '22px',
   lineHeight: 1.5,
-  color: '#aaa',
+  color: '#C1C2CA',
 
   '&:hover:after': {
     content: 'attr(data-hint)',
@@ -48,18 +48,19 @@ const propRequired = style({
     padding: '2px 8px',
     fontSize: '12px',
     color: '#fff',
-    background: '#333',
+    background: '#262939',
     zIndex: 10,
   },
 });
 
 const propLabel = style({
-  backgroundColor: '#f0f0f0',
+  backgroundColor: '#F3F3F7',
   borderRadius: '3px',
   padding: '4px 8px',
   margin: '4px 16px 4px 0',
   textDecoration: 'none',
   whiteSpace: 'nowrap',
+  border: '1px solid rgba(0, 0, 0, .04)',
 });
 
 const propDetails = style({

docs/templates/Home.js

@@ -7,7 +7,7 @@ const wrapper = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  height: '100vh',
+  height: '100%',
   padding: '24px 48px',
 });
 

docs/templates/Markdown.js

@@ -8,14 +8,25 @@ import { style } from 'glamor';
 const markdown = style({
   '& pre': {
     whitespace: 'nowrap',
-    backgroundColor: '#f0f0f0',
+    backgroundColor: '#F3F3F7',
     borderRadius: '3px',
-    padding: '8px 12px',
+    padding: '12px 16px',
     overflowX: 'auto',
+    border: '1px solid rgba(0, 0, 0, .04)',
   },
 
   '& code': {
+    fontWeight: 'bold',
     fontSize: '.9em',
+    backgroundColor: '#F3F3F7',
+    padding: '0 4px',
+    borderRadius: '3px',
+    border: '1px solid rgba(0, 0, 0, .04)',
+  },
+
+  '& pre code': {
+    fontWeight: 'normal',
+    border: 0,
   },
 
   '& .hljs-comment': {
@@ -23,23 +34,23 @@ const markdown = style({
   },
 
   '& .hljs-keyword': {
-    color: '#F26129',
+    color: '#E91E63',
   },
 
   '& .hljs-string, & .hljs-value, & .hljs-inheritance, & .hljs-header, & .hljs-class, & .hljs-attr': {
-    color: '#86B326',
+    color: '#4CAF50',
   },
 
   '& .hljs-function .hljs-title': {
-    color: '#F59D19',
+    color: '#FF5722',
   },
 
   '& .hljs-number, & .hljs-preprocessor, & .hljs-built_in, & .hljs-literal, & .hljs-params, & .hljs-constant': {
-    color: '#A37ACC',
+    color: '#9C27B0',
   },
 
   '& .hljs-variable, & .hljs-attr, & .hljs-tag, & .hljs-regexp, & .hljs-doctype, & .hljs-id, & .hljs-class, & .hljs-pseudo, & .hljs-tag .hljs-name, & .hljs-built_in': {
-    color: '#41A6D9',
+    color: '#3F51B5',
   },
 });
 

docs/templates/Page.js

@@ -6,7 +6,7 @@ import Link from './Link';
 
 const wrapper = style({
   display: 'flex',
-  height: '100vh',
+  height: '100%',
   flexDirection: 'column',
 
   '@media(min-width: 640px)': {
@@ -16,7 +16,7 @@ const wrapper = style({
 
 const sidebar = style({
   padding: '24px',
-  backgroundColor: '#f0f0f0',
+  backgroundColor: '#262939',
   display: 'none',
 
   '@media(min-width: 640px)': {
@@ -43,6 +43,11 @@ const menuButton = style({
   '&:checked ~ nav': {
     display: 'block',
   },
+
+  '&:checked ~ label': {
+    color: '#fff',
+    opacity: 0.64,
+  },
 });
 
 const menuIcon = style({
@@ -61,24 +66,29 @@ const menuIcon = style({
 
 const separator = style({
   border: 0,
-  backgroundColor: '#ddd',
+  backgroundColor: '#fff',
   height: '1px',
   margin: '8px 0',
+  opacity: 0.04,
 });
 
 const link = style({
   display: 'block',
   padding: '4px 0',
   textDecoration: 'none',
-  opacity: 0.32,
+  opacity: 0.16,
 
   ':hover': {
-    opacity: 1,
+    opacity: 0.64,
+  },
+
+  '& code': {
+    color: '#fff',
   },
 });
 
 const active = style({
-  opacity: 1,
+  opacity: 0.64,
 });
 
 export default function Page({ name, pages, components, children }: any) {