Add CSS theming API demo

packages/common/vpu-common-demo.js

@@ -33,6 +33,8 @@ class VpuCommonDemo extends VPULitElement {
     static get styles() {
         // language=css
         return css`
+            ${ commonUtils.getThemeCSS() }
+
             h1.title {margin-bottom: 1em;}
             div.container {margin-bottom: 1.5em;}
 
@@ -40,6 +42,14 @@ class VpuCommonDemo extends VPULitElement {
                 color: #ffbb00 !important;
                 background-color: blue;
             }
+
+            .demoblock {
+                position: relative;
+                width: 1.1em;
+                height: 1.1em;
+                display: inline-block;
+                padding: 0px 0px 0px 3px;
+            }
         `;
     }
 
@@ -105,6 +115,44 @@ class VpuCommonDemo extends VPULitElement {
                         <vpu-button value="Load" @click="${this.buttonClickHandler}"></vpu-button>
                     </div>
                 </div>
+                <div class="container">
+                    <label class="label">Theming CSS API</label>
+                    <div class="control">
+                        <ul>
+                            <li><code>--vpu-primary-bg-color</code>: Primary background color <div class="demoblock" style="background-color: var(--vpu-primary-bg-color)"></div></li>
+                            <li><code>--vpu-primary-text-color</code>: Primary text color <div class="demoblock" style="background-color: var(--vpu-primary-bg-color); color: var(--vpu-primary-text-color)">X</div></li>
+                            <li><code>--vpu-secondary-bg-color</code>: Secondary background color <div class="demoblock" style="background-color: var(--vpu-secondary-bg-color)"></div></li>
+                            <li><code>--vpu-secondary-text-color</code>: Secondary text color <div class="demoblock" style="background-color: var(--vpu-secondary-bg-color); color: var(--vpu-secondary-text-color)">X</div></li>
+                            <li><code>--vpu-info-bg-color</code>: Info background color <div class="demoblock" style="background-color: var(--vpu-info-bg-color)"></div></li>
+                            <li><code>--vpu-info-text-color</code>: Info text color <div class="demoblock" style="background-color: var(--vpu-info-bg-color); color: var(--vpu-info-text-color)">X</div></li>
+                            <li><code>--vpu-success-bg-color</code>: Success background color <div class="demoblock" style="background-color: var(--vpu-success-bg-color)"></div></li>
+                            <li><code>--vpu-success-text-color</code>: Success text color <div class="demoblock" style="background-color: var(--vpu-success-bg-color); color: var(--vpu-success-text-color)">X</div></li>
+                            <li><code>--vpu-warning-bg-color</code>: Warning background color <div class="demoblock" style="background-color: var(--vpu-warning-bg-color)"></div></li>
+                            <li><code>--vpu-warning-text-color</code>: Warning text color <div class="demoblock" style="background-color: var(--vpu-warning-bg-color); color: var(--vpu-warning-text-color)">X</div></li>
+                            <li><code>--vpu-danger-bg-color</code>: Danger background color <div class="demoblock" style="background-color: var(--vpu-danger-bg-color)"></div></li>
+                            <li><code>--vpu-danger-text-color</code>: Danger text color <div class="demoblock" style="background-color: var(--vpu-danger-bg-color); color: var(--vpu-danger-text-color)">X</div></li>
+
+                            <li><code>--vpu-light</code>: Light color <div class="demoblock" style="background-color: var(--vpu-light)"></div></li>
+                            <li><code>--vpu-dark</code>: Dark color <div class="demoblock" style="background-color: var(--vpu-dark)"></div></li>
+                            <li><code>--vpu-muted-text</code>: Muted text color <div class="demoblock" style="color: var(--vpu-muted-text)">X</div></li>
+                            <li><code>--vpu-border-radius</code>: Border-radius <div class="demoblock" style="background-color: var(--vpu-light); border-color: var(--vpu-dark); border-style: solid; border-width: 1px; border-radius: var(--vpu-border-radius)"></div></li>
+                            <li><code>--vpu-border-width</code>: Border-width <div class="demoblock" style="background-color: var(--vpu-light); border-color: var(--vpu-dark); border-style: solid; border-width: var(--vpu-border-width); border-radius: 0px;"></div></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="container">
+                    <label class="label">Theming CSS Override API</label>
+                    <div class="control">
+                    </div>
+                    <pre>
+&lt;style&gt;
+html {
+    /* This will override --vpu-primary-bg-color */
+    --vpu-override-primary-bg-color: green;
+    /* Same for all other variables, prefix with "override" */
+}
+&lt;/style&gt;</pre>
+                </div>
             </section>
         `;
     }