From c1717bae89d86d9e58fd8730fdae454d516b7024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 31 Mar 2022 15:04:08 +0300
Subject: [PATCH] Update ColorsDemo.vue

---
 src/views/colors/ColorsDemo.vue | 54 +++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/src/views/colors/ColorsDemo.vue b/src/views/colors/ColorsDemo.vue
index c86f5335f..32e749b63 100644
--- a/src/views/colors/ColorsDemo.vue
+++ b/src/views/colors/ColorsDemo.vue
@@ -44,6 +44,22 @@
                             <td><i>--font-family</i></td>
                             <td>Font family of the theme.</td>
                         </tr>
+                        <tr>
+                            <td><i>--inline-spacing</i></td>
+                            <td>Spacing between to adjacent items.</td>
+                        </tr>
+                        <tr>
+                            <td><i>--border-radius</i></td>
+                            <td>Common border radius of elements.</td>
+                        </tr>
+                        <tr>
+                            <td><i>--focus-ring</i></td>
+                            <td>Box shadow of a focused element.</td>
+                        </tr>
+                        <tr>
+                            <td><i>--mask-bg</i></td>
+                            <td>Background of an overlay mask.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -79,6 +95,44 @@
                     </div>
                 </div>
             </div>
+
+            <p>A theme also exports named surfaces for common use cases.</p>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Variable</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><i>--surface-ground</i></td>
+                            <td>Base ground color.</td>
+                        </tr>
+                        <tr>
+                            <td><i>--surface-section</i></td>
+                            <td>Color of a section on a ground surface.</td>
+                        </tr>
+                        <tr>
+                            <td><i>--surface-card</i></td>
+                            <td>Color of a surface used as a card.</td>
+                        </tr>
+                        <tr>
+                            <td><i>--surface-overlay</i></td>
+                            <td>Color of overlay surfaces.</td>
+                        </tr>
+                        <tr>
+                            <td><i>--surface-border</i></td>
+                            <td>Color of a divider.</td>
+                        </tr>
+                        <tr>
+                            <td><i>--surface-hover</i></td>
+                            <td>Color of an element in hover state.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 </template>