From b5a76759788e62419c8c01de1577fd112ee0459f Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 1 Apr 2024 10:55:51 +0300
Subject: [PATCH] Add case doc

---
 doc/theming/styled/CaseStyleDoc.vue | 39 +++++++++++++++++++++++++++++
 doc/theming/styled/PresetsDoc.vue   | 14 ++++++-----
 pages/theming/styled/index.vue      |  6 +++++
 3 files changed, 53 insertions(+), 6 deletions(-)
 create mode 100644 doc/theming/styled/CaseStyleDoc.vue

diff --git a/doc/theming/styled/CaseStyleDoc.vue b/doc/theming/styled/CaseStyleDoc.vue
new file mode 100644
index 000000000..900ed1aa3
--- /dev/null
+++ b/doc/theming/styled/CaseStyleDoc.vue
@@ -0,0 +1,39 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Tokens are described with the dot separator e.g. <i>primary.color</i>, <i>form.field.background</i> or <i>checkbox.icon.checked.color</i>. At preset configuration, camel case and object property are used when mapping the dot separator.
+            The following is an example from the checkbox component tokens to represent the <i>checkbox.icon.checked.color</i>, all alternatives have the same result.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+export default {
+    iconCheckedColor: //...,
+}
+
+export default {
+    icon: {
+        checkedColor: //...
+    }
+}
+
+export default {
+    icon: {
+        checked: {
+            color: //...
+        }
+    }
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/theming/styled/PresetsDoc.vue b/doc/theming/styled/PresetsDoc.vue
index d94203558..935e5c482 100644
--- a/doc/theming/styled/PresetsDoc.vue
+++ b/doc/theming/styled/PresetsDoc.vue
@@ -2,12 +2,14 @@
     <DocSectionText v-bind="$attrs">
         <p>Currently Aura is the only available preset and more will follow in the upcoming updates.</p>
     </DocSectionText>
-    <TabView>
-        <TabPanel header="Aura"><DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz /></TabPanel>
-        <TabPanel header="Lara">Under development.</TabPanel>
-        <TabPanel header="Nora">Under development.</TabPanel>
-        <TabPanel header="Material">Under development.</TabPanel>
-    </TabView>
+    <div class="card">
+        <TabView>
+            <TabPanel header="Aura"><DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz /></TabPanel>
+            <TabPanel header="Lara">Under development.</TabPanel>
+            <TabPanel header="Nora">Under development.</TabPanel>
+            <TabPanel header="Material">Under development.</TabPanel>
+        </TabView>
+    </div>
 </template>
 
 <script>
diff --git a/pages/theming/styled/index.vue b/pages/theming/styled/index.vue
index 077cc4937..20620f829 100755
--- a/pages/theming/styled/index.vue
+++ b/pages/theming/styled/index.vue
@@ -21,6 +21,7 @@
 <script>
 import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
 import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
+import CaseStyleDoc from '@/doc/theming/styled/CaseStyleDoc.vue';
 import ColorsDoc from '@/doc/theming/styled/ColorsDoc.vue';
 import DarkModeToggleDoc from '@/doc/theming/styled/DarkModeToggleDoc.vue';
 import PresetsDoc from '@/doc/theming/styled/PresetsDoc.vue';
@@ -75,6 +76,11 @@ export default {
                     label: 'Presets',
                     component: PresetsDoc
                 },
+                {
+                    id: 'casestyle',
+                    label: 'Case Style',
+                    component: CaseStyleDoc
+                },
                 {
                     id: 'customization',
                     label: 'Customization',