From 02964918b686ba6e41b5d4ad1d8aac056859923d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 11 Mar 2025 14:33:07 +0300
Subject: [PATCH] Add video, removed confusing doc

---
 .../doc/designer/createtheme/FigmaDoc.vue     |  5 +++
 .../doc/theming/styled/CaseStyleDoc.vue       | 39 -------------------
 apps/showcase/pages/theming/styled/index.vue  |  6 ---
 3 files changed, 5 insertions(+), 45 deletions(-)
 delete mode 100644 apps/showcase/doc/theming/styled/CaseStyleDoc.vue

diff --git a/apps/showcase/doc/designer/createtheme/FigmaDoc.vue b/apps/showcase/doc/designer/createtheme/FigmaDoc.vue
index b5de31a4e..7a3de3a6a 100644
--- a/apps/showcase/doc/designer/createtheme/FigmaDoc.vue
+++ b/apps/showcase/doc/designer/createtheme/FigmaDoc.vue
@@ -19,5 +19,10 @@
         <div class="pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface mb-4" style="max-width: 48rem">
             <img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-create.png" class="w-full" />
         </div>
+        <b class="mb-4 block">Video Tutorial</b>
+        <p>A tutorial is available demonstrating how the handoff process can be automated between the design team and the development team.</p>
+        <div class="video-container">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/Ktocmi2dLLM?si=lG7JwkUfLTQFlfeX" frameborder="0" allowfullscreen></iframe>
+        </div>
     </DocSectionText>
 </template>
diff --git a/apps/showcase/doc/theming/styled/CaseStyleDoc.vue b/apps/showcase/doc/theming/styled/CaseStyleDoc.vue
deleted file mode 100644
index 900ed1aa3..000000000
--- a/apps/showcase/doc/theming/styled/CaseStyleDoc.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<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/apps/showcase/pages/theming/styled/index.vue b/apps/showcase/pages/theming/styled/index.vue
index eb4d33b2f..4fed737bb 100755
--- a/apps/showcase/pages/theming/styled/index.vue
+++ b/apps/showcase/pages/theming/styled/index.vue
@@ -21,7 +21,6 @@
 <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 DarkModeDoc from '@/doc/theming/styled/DarkModeDoc.vue';
 import PresetsDoc from '@/doc/theming/styled/PresetsDoc.vue';
@@ -78,11 +77,6 @@ export default {
                     label: 'Presets',
                     component: PresetsDoc
                 },
-                {
-                    id: 'casestyle',
-                    label: 'Case Style',
-                    component: CaseStyleDoc
-                },
                 {
                     id: 'reserved',
                     label: 'Reserved Keys',