From a5e8e818c85db54f904f509b63e82fff01995fc9 Mon Sep 17 00:00:00 2001
From: Karl Scheirer <kscheirer@users.noreply.github.com>
Date: Fri, 8 Jan 2021 04:05:10 -0800
Subject: [PATCH] docs: document theme options (#1438)

---
 README.md | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 58 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 41e014d1..ca38a708 100644
--- a/README.md
+++ b/README.md
@@ -255,9 +255,66 @@ You can use all of the following options with standalone version on <redoc> tag
 * `sortPropsAlphabetically` - sort properties alphabetically.
 * `suppressWarnings` - if set, warnings are not rendered at the top of documentation (they still are logged to the console).
 * `payloadSampleIdx` - if set, payload sample will be inserted at this index or last. Indexes start from 0.
-* `theme` - ReDoc theme. Not documented yet. For details check source code: [theme.ts](https://github.com/Redocly/redoc/blob/master/src/theme.ts).
+* `theme` - ReDoc theme. For details check [theme docs](#redoc-theme-object).
 * `untrustedSpec` - if set, the spec is considered untrusted and all HTML/markdown is sanitized to prevent XSS. **Disabled by default** for performance reasons. **Enable this option if you work with untrusted user data!**
 
+### `<redoc>` theme object
+* `spacing`
+  * `unit`: 5 # main spacing unit used in autocomputed theme values later
+  * `sectionHorizontal`: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8
+  * `sectionVertical`: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8
+* `breakpoints` # breakpoints for switching three/two and mobile view layouts
+  * `small`: '50rem'
+  * `medium`: '85rem'
+  * `large`: '105rem'
+* `colors`
+  * `tonalOffset`: 0.3 # default tonal offset used in computations
+* `typography`
+  * `fontSize`: '14px'
+  * `lineHeight`: '1.5em'
+  * `fontWeightRegular`: '400'
+  * `fontWeightBold`: '600'
+  * `fontWeightLight`: '300'
+  * `fontFamily`: 'Roboto, sans-serif'
+  * `smoothing`: 'antialiased'
+  * `optimizeSpeed`: true
+  * `headings`
+    * `fontFamily`: 'Montserrat, sans-serif'
+    * `fontWeight`: '400'
+    * `lineHeight`: '1.6em'
+  * `code` # inline code styling
+    * `fontSize`: '13px'
+    * `fontFamily`: 'Courier, monospace'
+    * `lineHeight`: # COMPUTED: typography.lineHeight
+    * `fontWeight`: # COMPUTED: typography.fontWeightRegular
+    * `color`: '#e53935'
+    * `backgroundColor`: 'rgba(38, 50, 56, 0.05)'
+    * `wrap`: false # whether to break word for inline blocks (otherwise they can overflow)
+  * `links`
+    * `color`: # COMPUTED: colors.primary.main
+    * `visited`: # COMPUTED: typography.links.color
+    * `hover`: # COMPUTED: lighten(0.2 typography.links.color)
+* `menu`
+  * `width`: '260px'
+  * `backgroundColor`: '#fafafa'
+  * `textColor`: '#333333'
+  * `activeTextColor`: # COMPUTED: theme.menu.textColor (if set by user) or theme.colors.primary.main
+  * `groupItems` # Group headings
+    * `textTransform`: 'uppercase'
+  * `level1Items` # Level 1 items like tags or section 1st level items
+    * `textTransform`: 'none' 
+  * `arrow` # menu arrow
+    * `size`: '1.5em'
+    * `color`: # COMPUTED: theme.menu.textColor
+* `logo`
+  * `maxHeight`: # COMPUTED: menu.width
+  * `maxWidth`: # COMPUTED: menu.width
+  * `gutter`: '2px' # logo image padding
+* `rightPanel`
+  * `backgroundColor`: '#263238'
+  * `width`: '40%'
+  * `textColor`: '#ffffff'
+  
 ## Advanced usage of standalone version
 Instead of adding `spec-url` attribute to the `<redoc>` element you can initialize ReDoc via globally exposed `Redoc` object:
 ```js