Document CSS variables

webcomponent/README.md

@@ -35,12 +35,58 @@ The code below illustrates the usage of these attributes.
 </cdx-summary>
 ```
 
-Override the `--cdxsummary-thumb-scale` CSS variable to change the size of the thumbnail from the original `960x600` iframe dimension (default scale is set to `0.3`).
+Customize the style of various parts using any of the following CSS custom properties (variables).
+For example, override the `--cdxsummary-thumb-scale` CSS variable to change the size of the thumbnail from the original `960x600` iframe dimension (default scale is set to `0.3`).
 
 ```css
-:root {
-  --cdxsummary-thumb-scale: 0.25;
+cdx-summary {
+  --cdxsummary-main-txt-color: initial;
+  --cdxsummary-main-bg-color: initial;
+  --cdxsummary-main-font-family: sans-serif;
+  --cdxsummary-main-font-size: initial;
+  --cdxsummary-main-margin: 0;
+  --cdxsummary-main-padding: 5px;
+  --cdxsummary-mono-font-family: monospace;
+  --cdxsummary-link-txt-color: blue;
+  --cdxsummary-link-txt-decoration: underline;
+  --cdxsummary-link-bg-color: inherit;
+  --cdxsummary-info-txt-color: inherit;
+  --cdxsummary-info-bg-color: inherit;
+  --cdxsummary-info-font-family: inherit;
+  --cdxsummary-info-font-size: inherit;
+  --cdxsummary-info-font-style: italic;
+  --cdxsummary-info-border: initial;
+  --cdxsummary-info-border-radius: initial;
+  --cdxsummary-info-margin: 5px;
+  --cdxsummary-info-padding: 5px;
+  --cdxsummary-h2-txt-color: inherit;
+  --cdxsummary-h2-bg-color: inherit;
+  --cdxsummary-h2-font-family: inherit;
+  --cdxsummary-h2-font-size: 1.5em;
+  --cdxsummary-h2-margin: 1em 0 0.7em;
+  --cdxsummary-h2-padding: initial;
+  --cdxsummary-tbl-txt-color: inherit;
+  --cdxsummary-tbl-bg-color: inherit;
+  --cdxsummary-tbl-hdr-txt-color: white;
+  --cdxsummary-tbl-hdr-bg-color: gray;
+  --cdxsummary-tbl-alt-txt-color: inherit;
+  --cdxsummary-tbl-alt-bg-color: inherit;
+  --cdxsummary-tbl-border: 1px solid gray;
+  --cdxsummary-tbl-font-family: inherit;
+  --cdxsummary-tbl-font-size: inherit;
+  --cdxsummary-tbl-margin: initial;
+  --cdxsummary-btn-txt-color: white;
+  --cdxsummary-btn-bg-color: gray;
+  --cdxsummary-btn-font-family: inherit;
+  --cdxsummary-btn-font-size: inherit;
+  --cdxsummary-btn-border: tbl-border;
+  --cdxsummary-btn-border-radius: 5px;
+  --cdxsummary-btn-margin: 0 0 10px;
+  --cdxsummary-btn-padding: 5px 10px;
+  --cdxsummary-thumb-border: tbl-border;
+  --cdxsummary-thumb-border-radius: 5px;
+  --cdxsummary-thumb-scale: 0.3;
 }
 ```
 
-An [interactive test interface](https://internetarchive.github.io/cdx-summary/webcomponent/) is available for the Web Component that renders the JSON summary.
+Alternatively, use the [interactive tester interface](https://internetarchive.github.io/cdx-summary/webcomponent/) to customize the style and copy the generated code for integration.