From 16b84cbe7f3e04bf38ea69fc43660092fb942817 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 29 Oct 2024 12:24:51 +0300
Subject: [PATCH] Added new docs

---
 .../doc/theming/styled/PresetsDoc.vue         | 1597 +----------------
 .../doc/theming/unstyled/ArchitectureDoc.vue  |   35 +-
 .../doc/theming/unstyled/ComparisonDoc.vue    |   13 +
 .../unstyled/hybrid/HybridExampleDoc.vue      |   61 +
 .../unstyled/hybrid/HybridSetupDoc.vue        |   24 +
 .../unstyled/hybrid/HybridTailwindDoc.vue     |    8 +
 .../unstyled/libraries/TailwindDoc.vue        |    7 -
 .../theming/unstyled/libraries/UnoCSSDoc.vue  |   11 -
 .../PureExampleDoc.vue}                       |    7 +-
 .../{ThemeDoc.vue => pure/PureGlobalDoc.vue}  |   11 +-
 .../{SetupDoc.vue => pure/PureSetupDoc.vue}   |    2 +-
 .../theming/unstyled/pure/PureTailwindDoc.vue |    9 +
 apps/showcase/doc/vite/VerifyDoc.vue          |    2 +-
 apps/showcase/pages/support/index.vue         |    6 +-
 .../showcase/pages/theming/unstyled/index.vue |   80 +-
 15 files changed, 218 insertions(+), 1655 deletions(-)
 create mode 100644 apps/showcase/doc/theming/unstyled/ComparisonDoc.vue
 create mode 100644 apps/showcase/doc/theming/unstyled/hybrid/HybridExampleDoc.vue
 create mode 100644 apps/showcase/doc/theming/unstyled/hybrid/HybridSetupDoc.vue
 create mode 100644 apps/showcase/doc/theming/unstyled/hybrid/HybridTailwindDoc.vue
 delete mode 100644 apps/showcase/doc/theming/unstyled/libraries/TailwindDoc.vue
 delete mode 100644 apps/showcase/doc/theming/unstyled/libraries/UnoCSSDoc.vue
 rename apps/showcase/doc/theming/unstyled/{ExampleDoc.vue => pure/PureExampleDoc.vue} (70%)
 rename apps/showcase/doc/theming/unstyled/{ThemeDoc.vue => pure/PureGlobalDoc.vue} (58%)
 rename apps/showcase/doc/theming/unstyled/{SetupDoc.vue => pure/PureSetupDoc.vue} (88%)
 create mode 100644 apps/showcase/doc/theming/unstyled/pure/PureTailwindDoc.vue

diff --git a/apps/showcase/doc/theming/styled/PresetsDoc.vue b/apps/showcase/doc/theming/styled/PresetsDoc.vue
index bbd43a73a..e8752a2ea 100644
--- a/apps/showcase/doc/theming/styled/PresetsDoc.vue
+++ b/apps/showcase/doc/theming/styled/PresetsDoc.vue
@@ -1,1595 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>currently Aura, Material, Lara and Nora are the available built-in options.</p>
+        <p>
+            Aura, Material, Lara and Nora are the available built-in options, created to demonstrate the power of the design-agnostic theming. Aura is PrimeTek's own vision, Material follows Google Material Design v2, Lara is based on Bootstrap and
+            Nora is inspired by enterprise applications. Visit the
+            <a href="https://github.com/primefaces/primevue/tree/master/packages/themes/src/presets" target="_blank" rel="noopener noreferrer">source code</a> to learn more about the structure of presets. You may use them out of the box with
+            modifications or utilize them as reference in case you need to build your own presets from scratch.
+        </p>
     </DocSectionText>
-    <div class="card">
-        <Tabs value="aura">
-            <TabList>
-                <Tab value="aura">Aura</Tab>
-                <Tab value="material">Material</Tab>
-                <Tab value="lara">Lara</Tab>
-                <Tab value="nora">Nora</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="aura"><DocSectionCode :code="aura" hideToggleCode importCode hideStackBlitz /></TabPanel>
-                <TabPanel value="material"><DocSectionCode :code="material" hideToggleCode importCode hideStackBlitz /></TabPanel>
-                <TabPanel value="lara"><DocSectionCode :code="lara" hideToggleCode importCode hideStackBlitz /></TabPanel>
-                <TabPanel value="nora"><DocSectionCode :code="nora" hideToggleCode importCode hideStackBlitz /></TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
 </template>
-
-<script>
-export default {
-    data() {
-        return {
-            aura: {
-                basic: `
-import accordion from '@primevue/themes/aura/accordion';
-// ... imports of other component tokens
-
-export default {
-    primitive: {
-        borderRadius: {
-            none: '0',
-            xs: '2px',
-            sm: '4px',
-            md: '6px',
-            lg: '8px',
-            xl: '12px'
-        },
-        emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
-        green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
-        lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' },
-        red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' },
-        orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' },
-        amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' },
-        yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' },
-        teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' },
-        cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' },
-        sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' },
-        blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' },
-        indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' },
-        violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' },
-        purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' },
-        fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' },
-        pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' },
-        rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' },
-        slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' },
-        gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
-        zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
-        neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
-        stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
-    },
-    semantic: {
-        transitionDuration: '0.2s',
-        focusRing: {
-            width: '1px',
-            style: 'solid',
-            color: '{primary.color}',
-            offset: '2px',
-            shadow: 'none'
-        },
-        disabledOpacity: '0.6',
-        iconSize: '1rem',
-        anchorGutter: '2px',
-        primary: {
-            50: '{emerald.50}',
-            100: '{emerald.100}',
-            200: '{emerald.200}',
-            300: '{emerald.300}',
-            400: '{emerald.400}',
-            500: '{emerald.500}',
-            600: '{emerald.600}',
-            700: '{emerald.700}',
-            800: '{emerald.800}',
-            900: '{emerald.900}',
-            950: '{emerald.950}'
-        },
-        formField: {
-            paddingX: '0.75rem',
-            paddingY: '0.5rem',
-            borderRadius: '{border.radius.md}',
-            focusRing: {
-                width: '0',
-                style: 'none',
-                color: 'transparent',
-                offset: '0',
-                shadow: 'none'
-            },
-            transitionDuration: '{transition.duration}'
-        },
-        list: {
-            padding: '0.25rem 0.25rem',
-            gap: '2px',
-            header: {
-                padding: '0.5rem 0.75rem 0.25rem 0.75rem'
-            },
-            option: {
-                padding: '0.5rem 0.75rem',
-                borderRadius: '{border.radius.sm}'
-            },
-            optionGroup: {
-                padding: '0.5rem 0.75rem',
-                fontWeight: '600'
-            }
-        },
-        content: {
-            borderRadius: '{border.radius.md}'
-        },
-        mask: {
-            transitionDuration: '0.15s'
-        },
-        navigation: {
-            list: {
-                padding: '0.25rem 0.25rem',
-                gap: '2px'
-            },
-            item: {
-                padding: '0.5rem 0.75rem',
-                borderRadius: '{border.radius.sm}',
-                gap: '0.5rem'
-            },
-            submenuLabel: {
-                padding: '0.5rem 0.75rem',
-                fontWeight: '600'
-            },
-            submenuIcon: {
-                size: '0.875rem'
-            }
-        },
-        overlay: {
-            select: {
-                borderRadius: '{border.radius.md}',
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-            },
-            popover: {
-                borderRadius: '{border.radius.md}',
-                padding: '0.75rem',
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-            },
-            modal: {
-                borderRadius: '{border.radius.xl}',
-                padding: '1.25rem',
-                shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
-            },
-            navigation: {
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-            }
-        },
-        colorScheme: {
-            light: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{slate.50}',
-                    100: '{slate.100}',
-                    200: '{slate.200}',
-                    300: '{slate.300}',
-                    400: '{slate.400}',
-                    500: '{slate.500}',
-                    600: '{slate.600}',
-                    700: '{slate.700}',
-                    800: '{slate.800}',
-                    900: '{slate.900}',
-                    950: '{slate.950}'
-                },
-                primary: {
-                    color: '{primary.500}',
-                    contrastColor: '#ffffff',
-                    hoverColor: '{primary.600}',
-                    activeColor: '{primary.700}'
-                },
-                highlight: {
-                    background: '{primary.50}',
-                    focusBackground: '{primary.100}',
-                    color: '{primary.700}',
-                    focusColor: '{primary.800}'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.4)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.0}',
-                    disabledBackground: '{surface.200}',
-                    filledBackground: '{surface.50}',
-                    filledFocusBackground: '{surface.50}',
-                    borderColor: '{surface.300}',
-                    hoverBorderColor: '{surface.400}',
-                    focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.400}',
-                    color: '{surface.700}',
-                    disabledColor: '{surface.500}',
-                    placeholderColor: '{surface.500}',
-                    floatLabelColor: '{surface.500}',
-                    floatLabelFocusColor: '{surface.500}',
-                    floatLabelInvalidColor: '{red.400}',
-                    iconColor: '{surface.400}',
-                    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
-                },
-                text: {
-                    color: '{surface.700}',
-                    hoverColor: '{surface.800}',
-                    mutedColor: '{surface.500}',
-                    hoverMutedColor: '{surface.600}'
-                },
-                content: {
-                    background: '{surface.0}',
-                    hoverBackground: '{surface.100}',
-                    borderColor: '{surface.200}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.100}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.500}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.muted.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{surface.100}',
-                        activeBackground: '{surface.100}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.500}',
-                            activeColor: '{surface.500}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.muted.color}'
-                    },
-                    submenuIcon: {
-                        color: '{surface.400}',
-                        focusColor: '{surface.500}',
-                        activeColor: '{surface.500}'
-                    }
-                }
-            },
-            dark: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{zinc.50}',
-                    100: '{zinc.100}',
-                    200: '{zinc.200}',
-                    300: '{zinc.300}',
-                    400: '{zinc.400}',
-                    500: '{zinc.500}',
-                    600: '{zinc.600}',
-                    700: '{zinc.700}',
-                    800: '{zinc.800}',
-                    900: '{zinc.900}',
-                    950: '{zinc.950}'
-                },
-                primary: {
-                    color: '{primary.400}',
-                    contrastColor: '{surface.900}',
-                    hoverColor: '{primary.300}',
-                    activeColor: '{primary.200}'
-                },
-                highlight: {
-                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-                    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-                    color: 'rgba(255,255,255,.87)',
-                    focusColor: 'rgba(255,255,255,.87)'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.6)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.950}',
-                    disabledBackground: '{surface.700}',
-                    filledBackground: '{surface.800}',
-                    filledFocusBackground: '{surface.800}',
-                    borderColor: '{surface.700}',
-                    hoverBorderColor: '{surface.600}',
-                    focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.300}',
-                    color: '{surface.0}',
-                    disabledColor: '{surface.400}',
-                    placeholderColor: '{surface.400}',
-                    floatLabelColor: '{surface.400}',
-                    floatLabelFocusColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
-                    iconColor: '{surface.400}',
-                    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
-                },
-                text: {
-                    color: '{surface.0}',
-                    hoverColor: '{surface.0}',
-                    mutedColor: '{surface.400}',
-                    hoverMutedColor: '{surface.300}'
-                },
-                content: {
-                    background: '{surface.900}',
-                    hoverBackground: '{surface.800}',
-                    borderColor: '{surface.700}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.800}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{surface.500}',
-                            focusColor: '{surface.400}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.muted.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{surface.800}',
-                        activeBackground: '{surface.800}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{surface.500}',
-                            focusColor: '{surface.400}',
-                            activeColor: '{surface.400}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.muted.color}'
-                    },
-                    submenuIcon: {
-                        color: '{surface.500}',
-                        focusColor: '{surface.400}',
-                        activeColor: '{surface.400}'
-                    }
-                }
-            }
-        }
-    },
-    components: {
-        accordion,
-        // ... other components
-    }
-};
-`
-            },
-            material: {
-                basic: `
-import accordion from '@primevue/themes/aura/accordion';
-// ... imports of other component tokens
-
-export default {
-    primitive: {
-        borderRadius: {
-            none: '0',
-            xs: '2px',
-            sm: '4px',
-            md: '6px',
-            lg: '8px',
-            xl: '12px'
-        },
-        emerald: { 50: '#E8F6F1', 100: '#C5EBE1', 200: '#9EDFCF', 300: '#76D3BD', 400: '#58C9AF', 500: '#3BBFA1', 600: '#35AF94', 700: '#2D9B83', 800: '#268873', 900: '#1A6657', 950: '#0d3329' },
-        green: { 50: '#E8F5E9', 100: '#C8E6C9', 200: '#A5D6A7', 300: '#81C784', 400: '#66BB6A', 500: '#4CAF50', 600: '#43A047', 700: '#388E3C', 800: '#2E7D32', 900: '#1B5E20', 950: '#0e2f10' },
-        lime: { 50: '#F9FBE7', 100: '#F0F4C3', 200: '#E6EE9C', 300: '#DCE775', 400: '#D4E157', 500: '#CDDC39', 600: '#C0CA33', 700: '#AFB42B', 800: '#9E9D24', 900: '#827717', 950: '#413c0c' },
-        red: { 50: '#FFEBEE', 100: '#FFCDD2', 200: '#EF9A9A', 300: '#E57373', 400: '#EF5350', 500: '#F44336', 600: '#E53935', 700: '#D32F2F', 800: '#C62828', 900: '#B71C1C', 950: '#5c0e0e' },
-        orange: { 50: '#FFF3E0', 100: '#FFE0B2', 200: '#FFCC80', 300: '#FFB74D', 400: '#FFA726', 500: '#FF9800', 600: '#FB8C00', 700: '#F57C00', 800: '#EF6C00', 900: '#E65100', 950: '#732900' },
-        amber: { 50: '#FFF8E1', 100: '#FFECB3', 200: '#FFE082', 300: '#FFD54F', 400: '#FFCA28', 500: '#FFC107', 600: '#FFB300', 700: '#FFA000', 800: '#FF8F00', 900: '#FF6F00', 950: '#803800' },
-        yellow: { 50: '#FFFDE7', 100: '#FFF9C4', 200: '#FFF59D', 300: '#FFF176', 400: '#FFEE58', 500: '#FFEB3B', 600: '#FDD835', 700: '#FBC02D', 800: '#F9A825', 900: '#F57F17', 950: '#7b400c' },
-        teal: { 50: '#E0F2F1', 100: '#B2DFDB', 200: '#80CBC4', 300: '#4DB6AC', 400: '#26A69A', 500: '#009688', 600: '#00897B', 700: '#00796B', 800: '#00695C', 900: '#004D40', 950: '#002720' },
-        cyan: { 50: '#E0F7FA', 100: '#B2EBF2', 200: '#80DEEA', 300: '#4DD0E1', 400: '#26C6DA', 500: '#00BCD4', 600: '#00ACC1', 700: '#0097A7', 800: '#00838F', 900: '#006064', 950: '#003032' },
-        sky: { 50: '#E1F5FE', 100: '#B3E5FC', 200: '#81D4FA', 300: '#4FC3F7', 400: '#29B6F6', 500: '#03A9F4', 600: '#039BE5', 700: '#0288D1', 800: '#0277BD', 900: '#01579B', 950: '#012c4e' },
-        blue: { 50: '#E3F2FD', 100: '#BBDEFB', 200: '#90CAF9', 300: '#64B5F6', 400: '#42A5F5', 500: '#2196F3', 600: '#1E88E5', 700: '#1976D2', 800: '#1565C0', 900: '#0D47A1', 950: '#072451' },
-        indigo: { 50: '#E8EAF6', 100: '#C5CAE9', 200: '#9FA8DA', 300: '#7986CB', 400: '#5C6BC0', 500: '#3F51B5', 600: '#3949AB', 700: '#303F9F', 800: '#283593', 900: '#1A237E', 950: '#0d123f' },
-        violet: { 50: '#EDE7F6', 100: '#D1C4E9', 200: '#B39DDB', 300: '#9575CD', 400: '#7E57C2', 500: '#673AB7', 600: '#5E35B1', 700: '#512DA8', 800: '#4527A0', 900: '#311B92', 950: '#190e49' },
-        purple: { 50: '#F3E5F5', 100: '#E1BEE7', 200: '#CE93D8', 300: '#BA68C8', 400: '#AB47BC', 500: '#9C27B0', 600: '#8E24AA', 700: '#7B1FA2', 800: '#6A1B9A', 900: '#4A148C', 950: '#250a46' },
-        fuchsia: { 50: '#FDE6F3', 100: '#FBC1E3', 200: '#F897D1', 300: '#F56DBF', 400: '#F34DB2', 500: '#F12DA5', 600: '#E0289D', 700: '#CC2392', 800: '#B81E88', 900: '#951777', 950: '#4b0c3c' },
-        pink: { 50: '#FCE4EC', 100: '#F8BBD0', 200: '#F48FB1', 300: '#F06292', 400: '#EC407A', 500: '#E91E63', 600: '#D81B60', 700: '#C2185B', 800: '#AD1457', 900: '#880E4F', 950: '#440728' },
-        rose: { 50: '#FFF0F0', 100: '#FFD9D9', 200: '#FFC0C0', 300: '#FFA7A7', 400: '#FF8E8E', 500: '#FF7575', 600: '#FF5252', 700: '#FF3838', 800: '#F71C1C', 900: '#D50000', 950: '#3E0000' },
-        slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' },
-        gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
-        zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
-        neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
-        stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
-    },
-    semantic: {
-        transitionDuration: '0.2s',
-        focusRing: {
-            width: '0',
-            style: 'none',
-            color: 'unset',
-            offset: '0'
-        },
-        disabledOpacity: '0.38',
-        iconSize: '1rem',
-        anchorGutter: '0',
-        primary: {
-            50: '{emerald.50}',
-            100: '{emerald.100}',
-            200: '{emerald.200}',
-            300: '{emerald.300}',
-            400: '{emerald.400}',
-            500: '{emerald.500}',
-            600: '{emerald.600}',
-            700: '{emerald.700}',
-            800: '{emerald.800}',
-            900: '{emerald.900}',
-            950: '{emerald.950}'
-        },
-        formField: {
-            paddingX: '0.75rem',
-            paddingY: '0.75rem',
-            borderRadius: '{border.radius.sm}',
-            focusRing: {
-                width: '2px',
-                style: 'solid',
-                color: '{primary.color}',
-                offset: '-2px',
-                shadow: 'none'
-            },
-            transitionDuration: '{transition.duration}'
-        },
-        list: {
-            padding: '0.5rem 0',
-            gap: '0',
-            header: {
-                padding: '0.75rem 1rem'
-            },
-            option: {
-                padding: '0.75rem 1rem',
-                borderRadius: '{border.radius.none}'
-            },
-            optionGroup: {
-                padding: '0.75rem 1rem',
-                fontWeight: '700'
-            }
-        },
-        content: {
-            borderRadius: '{border.radius.sm}'
-        },
-        mask: {
-            transitionDuration: '0.15s'
-        },
-        navigation: {
-            list: {
-                padding: '0.5rem 0',
-                gap: '0'
-            },
-            item: {
-                padding: '0.75rem 1rem',
-                borderRadius: '{border.radius.none}',
-                gap: '0.5rem'
-            },
-            submenuLabel: {
-                padding: '0.75rem 1rem',
-                fontWeight: '700'
-            },
-            submenuIcon: {
-                size: '0.875rem'
-            }
-        },
-        overlay: {
-            select: {
-                borderRadius: '{border.radius.sm}',
-                shadow: '0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)'
-            },
-            popover: {
-                borderRadius: '{border.radius.sm}',
-                padding: '1rem',
-                shadow: '0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)'
-            },
-            modal: {
-                borderRadius: '{border.radius.sm}',
-                padding: '1.5rem',
-                shadow: '0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)'
-            },
-            navigation: {
-                shadow: '0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12)'
-            }
-        },
-        colorScheme: {
-            light: {
-                focusRing: {
-                    shadow: '0 0 1px 4px {surface.200}'
-                },
-                surface: {
-                    0: '#ffffff',
-                    50: '{slate.50}',
-                    100: '{slate.100}',
-                    200: '{slate.200}',
-                    300: '{slate.300}',
-                    400: '{slate.400}',
-                    500: '{slate.500}',
-                    600: '{slate.600}',
-                    700: '{slate.700}',
-                    800: '{slate.800}',
-                    900: '{slate.900}',
-                    950: '{slate.950}'
-                },
-                primary: {
-                    color: '{primary.500}',
-                    contrastColor: '#ffffff',
-                    hoverColor: '{primary.400}',
-                    activeColor: '{primary.300}'
-                },
-                highlight: {
-                    background: 'color-mix(in srgb, {primary.color}, transparent 88%)',
-                    focusBackground: 'color-mix(in srgb, {primary.color}, transparent 76%)',
-                    color: '{primary.700}',
-                    focusColor: '{primary.800}'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.32)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.0}',
-                    disabledBackground: '{surface.300}',
-                    filledBackground: '{surface.100}',
-                    filledHoverBackground: '{surface.200}',
-                    filledFocusBackground: '{surface.100}',
-                    borderColor: '{surface.400}',
-                    hoverBorderColor: '{surface.900}',
-                    focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.800}',
-                    color: '{surface.900}',
-                    disabledColor: '{surface.600}',
-                    placeholderColor: '{surface.600}',
-                    floatLabelColor: '{surface.600}',
-                    floatLabelFocusColor: '{primary.600}',
-                    floatLabelActiveColor: '{surface.600}',
-                    floatLabelInvalidColor: '{red.800}',
-                    iconColor: '{surface.600}',
-                    shadow: 'none'
-                },
-                text: {
-                    color: '{surface.900}',
-                    hoverColor: '{surface.900}',
-                    mutedColor: '{surface.600}',
-                    hoverMutedColor: '{surface.600}'
-                },
-                content: {
-                    background: '{surface.0}',
-                    hoverBackground: '{surface.100}',
-                    borderColor: '{surface.300}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.0}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.0}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.0}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.100}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{surface.600}',
-                            focusColor: '{surface.600}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{surface.100}',
-                        activeBackground: '{surface.200}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{surface.600}',
-                            focusColor: '{surface.600}',
-                            activeColor: '{surface.600}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    },
-                    submenuIcon: {
-                        color: '{surface.600}',
-                        focusColor: '{surface.600}',
-                        activeColor: '{surface.600}'
-                    }
-                }
-            },
-            dark: {
-                focusRing: {
-                    shadow: '0 0 1px 4px {surface.700}'
-                },
-                surface: {
-                    0: '#ffffff',
-                    50: '{zinc.50}',
-                    100: '{zinc.100}',
-                    200: '{zinc.200}',
-                    300: '{zinc.300}',
-                    400: '{zinc.400}',
-                    500: '{zinc.500}',
-                    600: '{zinc.600}',
-                    700: '{zinc.700}',
-                    800: '{zinc.800}',
-                    900: '{zinc.900}',
-                    950: '{zinc.950}'
-                },
-                primary: {
-                    color: '{primary.400}',
-                    contrastColor: '{surface.900}',
-                    hoverColor: '{primary.300}',
-                    activeColor: '{primary.200}'
-                },
-                highlight: {
-                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-                    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-                    color: 'rgba(255,255,255,.87)',
-                    focusColor: 'rgba(255,255,255,.87)'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.6)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.950}',
-                    disabledBackground: '{surface.700}',
-                    filledBackground: '{surface.800}',
-                    filledHoverBackground: '{surface.700}',
-                    filledFocusBackground: '{surface.800}',
-                    borderColor: '{surface.600}',
-                    hoverBorderColor: '{surface.400}',
-                    focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.300}',
-                    color: '{surface.0}',
-                    disabledColor: '{surface.400}',
-                    placeholderColor: '{surface.400}',
-                    floatLabelColor: '{surface.400}',
-                    floatLabelFocusColor: '{primary.color}',
-                    floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
-                    iconColor: '{surface.400}',
-                    shadow: 'none'
-                },
-                text: {
-                    color: '{surface.0}',
-                    hoverColor: '{surface.0}',
-                    mutedColor: '{surface.400}',
-                    hoverMutedColor: '{surface.400}'
-                },
-                content: {
-                    background: '{surface.900}',
-                    hoverBackground: '{surface.800}',
-                    borderColor: '{surface.700}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.900}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.900}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.900}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.800}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.400}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.muted.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{surface.800}',
-                        activeBackground: '{surface.700}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.400}',
-                            activeColor: '{surface.400}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.muted.color}'
-                    },
-                    submenuIcon: {
-                        color: '{surface.400}',
-                        focusColor: '{surface.400}',
-                        activeColor: '{surface.400}'
-                    }
-                }
-            }
-        }
-    },
-    components: {
-        accordion,
-        // ... other components
-    }
-};
-`
-            },
-            lara: {
-                basic: `
-import accordion from '@primevue/themes/lara/accordion';
-// ... imports of other component tokens
-
-export default {
-    primitive: {
-        borderRadius: {
-            none: '0',
-            xs: '2px',
-            sm: '4px',
-            md: '6px',
-            lg: '8px',
-            xl: '12px'
-        },
-        emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
-        green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
-        lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' },
-        red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' },
-        orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' },
-        amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' },
-        yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' },
-        teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' },
-        cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' },
-        sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' },
-        blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' },
-        indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' },
-        violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' },
-        purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' },
-        fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' },
-        pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' },
-        rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' },
-        slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' },
-        gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
-        zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
-        neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
-        stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
-    },
-    semantic: {
-        transitionDuration: '0.2s',
-        focusRing: {
-            width: '0',
-            style: 'none',
-            color: 'transparent',
-            offset: '0'
-        },
-        disabledOpacity: '0.6',
-        iconSize: '1rem',
-        anchorGutter: '2px',
-        primary: {
-            50: '{emerald.50}',
-            100: '{emerald.100}',
-            200: '{emerald.200}',
-            300: '{emerald.300}',
-            400: '{emerald.400}',
-            500: '{emerald.500}',
-            600: '{emerald.600}',
-            700: '{emerald.700}',
-            800: '{emerald.800}',
-            900: '{emerald.900}',
-            950: '{emerald.950}'
-        },
-        formField: {
-            paddingX: '0.75rem',
-            paddingY: '0.625rem',
-            borderRadius: '{border.radius.md}',
-            focusRing: {
-                width: '{focus.ring.width}',
-                style: '{focus.ring.style}',
-                color: '{focus.ring.color}',
-                offset: '{focus.ring.offset}',
-                shadow: '{focus.ring.shadow}'
-            },
-            transitionDuration: '{transition.duration}'
-        },
-        list: {
-            padding: '0.5rem 0',
-            gap: '0',
-            header: {
-                padding: '0.625rem 1rem 0 1rem'
-            },
-            option: {
-                padding: '0.625rem 1rem',
-                borderRadius: '0'
-            },
-            optionGroup: {
-                padding: '0.625rem 1rem',
-                fontWeight: '600'
-            }
-        },
-        content: {
-            borderRadius: '{border.radius.md}'
-        },
-        mask: {
-            transitionDuration: '0.15s'
-        },
-        navigation: {
-            list: {
-                padding: '0.5rem 0',
-                gap: '0'
-            },
-            item: {
-                padding: '0.625rem 1rem',
-                borderRadius: '0',
-                gap: '0.5rem'
-            },
-            submenuLabel: {
-                padding: '0.625rem 1rem',
-                fontWeight: '600'
-            },
-            submenuIcon: {
-                size: '0.875rem'
-            }
-        },
-        overlay: {
-            select: {
-                borderRadius: '{border.radius.md}',
-                shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
-            },
-            popover: {
-                borderRadius: '{border.radius.md}',
-                padding: '1rem',
-                shadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
-            },
-            modal: {
-                borderRadius: '{border.radius.xl}',
-                padding: '1.5rem',
-                shadow: '0 1px 3px rgba(0, 0, 0, 0.3)'
-            },
-            navigation: {
-                shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
-            }
-        },
-        colorScheme: {
-            light: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{slate.50}',
-                    100: '{slate.100}',
-                    200: '{slate.200}',
-                    300: '{slate.300}',
-                    400: '{slate.400}',
-                    500: '{slate.500}',
-                    600: '{slate.600}',
-                    700: '{slate.700}',
-                    800: '{slate.800}',
-                    900: '{slate.900}',
-                    950: '{slate.950}'
-                },
-                primary: {
-                    color: '{primary.500}',
-                    contrastColor: '#ffffff',
-                    hoverColor: '{primary.600}',
-                    activeColor: '{primary.700}'
-                },
-                highlight: {
-                    background: '{primary.50}',
-                    focusBackground: '{primary.100}',
-                    color: '{primary.700}',
-                    focusColor: '{primary.800}'
-                },
-                focusRing: {
-                    shadow: '0 0 0 0.2rem {primary.200}'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.4)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.0}',
-                    disabledBackground: '{surface.200}',
-                    filledBackground: '{surface.50}',
-                    filledFocusBackground: '{surface.0}',
-                    borderColor: '{surface.300}',
-                    hoverBorderColor: '{primary.color}',
-                    focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.400}',
-                    color: '{surface.700}',
-                    disabledColor: '{surface.500}',
-                    placeholderColor: '{surface.500}',
-                    floatLabelColor: '{surface.500}',
-                    floatLabelFocusColor: '{surface.500}',
-                    floatLabelInvalidColor: '{red.400}',
-                    iconColor: '{surface.500}',
-                    shadow: 'none'
-                },
-                text: {
-                    color: '{surface.700}',
-                    hoverColor: '{surface.800}',
-                    mutedColor: '{surface.500}',
-                    hoverMutedColor: '{surface.600}'
-                },
-                content: {
-                    background: '{surface.0}',
-                    hoverBackground: '{surface.100}',
-                    borderColor: '{surface.200}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.100}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.500}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{surface.100}',
-                        activeBackground: '{surface.100}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.500}',
-                            activeColor: '{surface.500}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    },
-                    submenuIcon: {
-                        color: '{surface.400}',
-                        focusColor: '{surface.500}',
-                        activeColor: '{surface.500}'
-                    }
-                }
-            },
-            dark: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{zinc.50}',
-                    100: '{zinc.100}',
-                    200: '{zinc.200}',
-                    300: '{zinc.300}',
-                    400: '{zinc.400}',
-                    500: '{zinc.500}',
-                    600: '{zinc.600}',
-                    700: '{zinc.700}',
-                    800: '{zinc.800}',
-                    900: '{zinc.900}',
-                    950: '{zinc.950}'
-                },
-                primary: {
-                    color: '{primary.400}',
-                    contrastColor: '{surface.900}',
-                    hoverColor: '{primary.300}',
-                    activeColor: '{primary.200}'
-                },
-                highlight: {
-                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-                    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-                    color: 'rgba(255,255,255,.87)',
-                    focusColor: 'rgba(255,255,255,.87)'
-                },
-                focusRing: {
-                    shadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.6)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.950}',
-                    disabledBackground: '{surface.700}',
-                    filledBackground: '{surface.800}',
-                    filledFocusBackground: '{surface.950}',
-                    borderColor: '{surface.700}',
-                    hoverBorderColor: '{primary.color}',
-                    focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.300}',
-                    color: '{surface.0}',
-                    disabledColor: '{surface.400}',
-                    placeholderColor: '{surface.400}',
-                    floatLabelColor: '{surface.400}',
-                    floatLabelFocusColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
-                    iconColor: '{surface.400}',
-                    shadow: 'none'
-                },
-                text: {
-                    color: '{surface.0}',
-                    hoverColor: '{surface.0}',
-                    mutedColor: '{surface.400}',
-                    hoverMutedColor: '{surface.300}'
-                },
-                content: {
-                    background: '{surface.900}',
-                    hoverBackground: '{surface.800}',
-                    borderColor: '{surface.700}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.800}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{surface.500}',
-                            focusColor: '{surface.400}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{surface.800}',
-                        activeBackground: '{surface.800}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{surface.500}',
-                            focusColor: '{surface.400}',
-                            activeColor: '{surface.400}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    },
-                    submenuIcon: {
-                        color: '{surface.500}',
-                        focusColor: '{surface.400}',
-                        activeColor: '{surface.400}'
-                    }
-                }
-            }
-        }
-    },
-    components: {
-        accordion,
-        // ... other components
-    }
-};
-`
-            },
-            nora: {
-                basic: `
-import accordion from '@primevue/themes/nora/accordion';
-// ... imports of other component tokens
-
-export default {
-    primitive: {
-        borderRadius: {
-            none: '0',
-            xs: '2px',
-            sm: '4px',
-            md: '6px',
-            lg: '8px',
-            xl: '12px'
-        },
-        emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
-        green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
-        lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' },
-        red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' },
-        orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' },
-        amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' },
-        yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' },
-        teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' },
-        cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' },
-        sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' },
-        blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' },
-        indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' },
-        violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' },
-        purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' },
-        fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' },
-        pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' },
-        rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' },
-        slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' },
-        gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
-        zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
-        neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
-        stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
-    },
-    semantic: {
-        transitionDuration: '0s',
-        focusRing: {
-            width: '2px',
-            style: 'solid',
-            color: '{primary.color}',
-            offset: '2px',
-            shadow: 'none'
-        },
-        iconSize: '1rem',
-        anchorGutter: '0',
-        primary: {
-            50: '{emerald.50}',
-            100: '{emerald.100}',
-            200: '{emerald.200}',
-            300: '{emerald.300}',
-            400: '{emerald.400}',
-            500: '{emerald.500}',
-            600: '{emerald.600}',
-            700: '{emerald.700}',
-            800: '{emerald.800}',
-            900: '{emerald.900}',
-            950: '{emerald.950}'
-        },
-        formField: {
-            paddingX: '0.75rem',
-            paddingY: '0.5rem',
-            borderRadius: '{border.radius.xs}',
-            focusRing: {
-                width: '2px',
-                style: 'solid',
-                color: '{primary.color}',
-                offset: '-1px',
-                shadow: 'none'
-            },
-            transitionDuration: '{transition.duration}'
-        },
-        list: {
-            padding: '0.125rem 0',
-            gap: '0',
-            header: {
-                padding: '0.5rem 0.75rem 0.375rem 0.75rem'
-            },
-            option: {
-                padding: '0.5rem 0.75rem',
-                borderRadius: '0'
-            },
-            optionGroup: {
-                padding: '0.5rem 0.75rem',
-                fontWeight: '700'
-            }
-        },
-        content: {
-            borderRadius: '{border.radius.xs}'
-        },
-        mask: {
-            transitionDuration: '0.15s'
-        },
-        navigation: {
-            list: {
-                padding: '0.125rem 0',
-                gap: '0'
-            },
-            item: {
-                padding: '0.5rem 0.75rem',
-                borderRadius: '0',
-                gap: '0.5rem'
-            },
-            submenuLabel: {
-                padding: '0.5rem 0.75rem',
-                fontWeight: '700'
-            },
-            submenuIcon: {
-                size: '0.875rem'
-            }
-        },
-        overlay: {
-            select: {
-                borderRadius: '{border.radius.xs}',
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-            },
-            popover: {
-                borderRadius: '{border.radius.xs}',
-                padding: '0.75rem',
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-            },
-            modal: {
-                borderRadius: '{border.radius.xs}',
-                padding: '1.25rem',
-                shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
-            },
-            navigation: {
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-            }
-        },
-        colorScheme: {
-            light: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{slate.50}',
-                    100: '{slate.100}',
-                    200: '{slate.200}',
-                    300: '{slate.300}',
-                    400: '{slate.400}',
-                    500: '{slate.500}',
-                    600: '{slate.600}',
-                    700: '{slate.700}',
-                    800: '{slate.800}',
-                    900: '{slate.900}',
-                    950: '{slate.950}'
-                },
-                primary: {
-                    color: '{primary.600}',
-                    contrastColor: '#ffffff',
-                    hoverColor: '{primary.700}',
-                    activeColor: '{primary.800}'
-                },
-                highlight: {
-                    background: '{primary.600}',
-                    focusBackground: '{primary.700}',
-                    color: '#ffffff',
-                    focusColor: '#ffffff'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.4)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.0}',
-                    disabledBackground: '{surface.300}',
-                    filledBackground: '{surface.100}',
-                    filledFocusBackground: '{surface.100}',
-                    borderColor: '{surface.500}',
-                    hoverBorderColor: '{surface.500}',
-                    focusBorderColor: '{surface.500}',
-                    invalidBorderColor: '{red.500}',
-                    color: '{surface.900}',
-                    disabledColor: '{surface.600}',
-                    placeholderColor: '{surface.600}',
-                    floatLabelColor: '{surface.600}',
-                    floatLabelFocusColor: '{surface.600}',
-                    floatLabelInvalidColor: '{red.500}',
-                    iconColor: '{surface.900}',
-                    shadow: 'none'
-                },
-                text: {
-                    color: '{surface.900}',
-                    hoverColor: '{surface.950}',
-                    mutedColor: '{surface.600}',
-                    hoverMutedColor: '{surface.700}'
-                },
-                content: {
-                    background: '{surface.0}',
-                    hoverBackground: '{surface.200}',
-                    borderColor: '{surface.400}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.0}',
-                        borderColor: 'transparent',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.0}',
-                        borderColor: 'transparent',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.0}',
-                        borderColor: 'transparent',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.200}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{text.muted.color}',
-                            focusColor: '{text.hover.muted.color}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{primary.color}',
-                        activeBackground: '{surface.200}',
-                        color: '{text.color}',
-                        focusColor: '{primary.contrast.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{text.muted.color}',
-                            focusColor: '{primary.contrast.color}',
-                            activeColor: '{text.hover.muted.color}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    },
-                    submenuIcon: {
-                        color: '{text.muted.color}',
-                        focusColor: '{primary.contrast.color}',
-                        activeColor: '{text.hover.muted.color}'
-                    }
-                }
-            },
-            dark: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{zinc.50}',
-                    100: '{zinc.100}',
-                    200: '{zinc.200}',
-                    300: '{zinc.300}',
-                    400: '{zinc.400}',
-                    500: '{zinc.500}',
-                    600: '{zinc.600}',
-                    700: '{zinc.700}',
-                    800: '{zinc.800}',
-                    900: '{zinc.900}',
-                    950: '{zinc.950}'
-                },
-                primary: {
-                    color: '{primary.500}',
-                    contrastColor: '{surface.950}',
-                    hoverColor: '{primary.400}',
-                    activeColor: '{primary.300}'
-                },
-                highlight: {
-                    background: '{primary.500}',
-                    focusBackground: '{primary.400}',
-                    color: '{surface.950}',
-                    focusColor: '{surface.950}'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.6)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.950}',
-                    disabledBackground: '{surface.700}',
-                    filledBackground: '{surface.800}',
-                    filledFocusBackground: '{surface.800}',
-                    borderColor: '{surface.500}',
-                    hoverBorderColor: '{surface.500}',
-                    focusBorderColor: '{surface.500}',
-                    invalidBorderColor: '{red.400}',
-                    color: '{surface.0}',
-                    disabledColor: '{surface.400}',
-                    placeholderColor: '{surface.400}',
-                    floatLabelColor: '{surface.400}',
-                    floatLabelFocusColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.400}',
-                    iconColor: '{surface.0}',
-                    shadow: 'none'
-                },
-                text: {
-                    color: '{surface.0}',
-                    hoverColor: '{surface.0}',
-                    mutedColor: '{surface.400}',
-                    hoverMutedColor: '{surface.300}'
-                },
-                content: {
-                    background: '{surface.900}',
-                    hoverBackground: '{surface.700}',
-                    borderColor: '{surface.500}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.700}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{text.muted.color}',
-                            focusColor: '{text.hover.muted.color}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{primary.color}',
-                        activeBackground: '{surface.700}',
-                        color: '{text.color}',
-                        focusColor: '{primary.contrast.color}',
-                        activeColor: '{text.color}',
-                        icon: {
-                            color: '{text.muted.color}',
-                            focusColor: '{primary.contrast.color}',
-                            activeColor: '{text.hover.muted.color}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    },
-                    submenuIcon: {
-                        color: '{text.muted.color}',
-                        focusColor: '{primary.contrast.color}',
-                        activeColor: '{text.hover.muted.color}'
-                    }
-                }
-            }
-        }
-    },
-    components: {
-        accordion,
-        // ... other components
-    }
-};
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue b/apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue
index ee12475aa..95194df75 100644
--- a/apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue
@@ -1,13 +1,38 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Unstyled mode consists of two solutions. First part is removal of the component specific style classes from the DOM, when <i>unstyled</i> setting is enabled components do not include any CSS selectors while core functionality is still
-            available. For example, in the default styled mode, the select component adds <i>.p-select</i> style class to the root element and includes CSS to corresponding style. In unstyled setting, this style class is not added to the root element
-            and the CSS is not included in the page.
+            The term <i>unstyled</i> is used to define an alternative styling approach instead of the default theming with design tokens. PrimeVue offers two options for styling the components with your own css; the <i>hybrid</i> mode and the
+            <i>pure</i> mode.
         </p>
         <p>
-            The second part is custom styling as components are displayed as transparent without their styles. <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> feature is the key of since it also supports a global configuration to create
-            themes in unstyled mode. In fact, the upcoming Tailwind theme is basically a custom <i>pt</i> configuration.
+            In both options, the css variables of the design tokens and the css rule sets that utilize them are not included. The main difference is, the <i>hybrid</i> mode keeps the selectors in the DOM such as <i>p-select</i> whereas the
+            <i>pure</i> mode do not include them. Unstyled components still need to be styled on your end, in the next sections, we'll cover the styling solutions for both modes.
         </p>
     </DocSectionText>
+    <table class="doc-table table-fixed">
+        <thead>
+            <tr>
+                <th></th>
+                <th>Hybrid</th>
+                <th>Pure</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>p-* selectors in DOM</td>
+                <td><i class="pi pi-check ms-4" /></td>
+                <td><i class="pi pi-times ms-4" /></td>
+            </tr>
+            <tr>
+                <td>CSS rule sets</td>
+                <td><i class="pi pi-times ms-4" /></td>
+                <td><i class="pi pi-times ms-4" /></td>
+            </tr>
+            <tr>
+                <td>CSS variables</td>
+                <td><i class="pi pi-times ms-4" /></td>
+                <td><i class="pi pi-times ms-4" /></td>
+            </tr>
+        </tbody>
+    </table>
 </template>
diff --git a/apps/showcase/doc/theming/unstyled/ComparisonDoc.vue b/apps/showcase/doc/theming/unstyled/ComparisonDoc.vue
new file mode 100644
index 000000000..52e49fe48
--- /dev/null
+++ b/apps/showcase/doc/theming/unstyled/ComparisonDoc.vue
@@ -0,0 +1,13 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>It may be confusing which styling approach to choose from due to the amount of options such as Styled, Pure and Hybrid. We've created a short video that discusses the pros and cons of each approach.</p>
+        <p>
+            In summary, the styled mode is a powerful API to learn with first class support for Figma, as a result when working with a UI Designer that utilizes the PrimeVue Figma UI Kit, the development flow would be productive. The unstyled mode is
+            beneficial when you do not prefer to learn the default theming API, want full control over the styles or require Tailwind CSS as the only library for styling in your application. The downside of unstyled mode is that it requires the
+            styles need to be maintained in the application.
+        </p>
+    </DocSectionText>
+    <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/5M6xM4tTMQU?si=FzeuOeJOaGBoM-yK" frameborder="0" allowfullscreen></iframe>
+    </div>
+</template>
diff --git a/apps/showcase/doc/theming/unstyled/hybrid/HybridExampleDoc.vue b/apps/showcase/doc/theming/unstyled/hybrid/HybridExampleDoc.vue
new file mode 100644
index 000000000..c3923fa32
--- /dev/null
+++ b/apps/showcase/doc/theming/unstyled/hybrid/HybridExampleDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>In hybrid mode, the default css rules and variables are not included however the css selectors reside in the DOM so that you may use them to build your own rules.</p>
+        <div class="card flex justify-center">
+            <Button label="Search" icon="pi pi-search" />
+        </div>
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+.p-button {
+    background: #a855f7;
+    border: 0 none !important;
+    color: white;
+    padding: 0.5rem 0.75rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 24px;
+}
+
+.p-button:enabled:hover {
+    background: #a855f7;
+}
+
+.p-button:enabled:active {
+    background: #9333ea;
+}
+`
+            }
+        };
+    }
+};
+</script>
+
+<style lang="css" scoped>
+.p-button {
+    background: #a855f7;
+    border: 0 none !important;
+    color: white;
+    padding: 0.5rem 0.75rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 24px;
+}
+
+.p-button:enabled:hover {
+    background: #a855f7;
+}
+
+.p-button:enabled:active {
+    background: #9333ea;
+}
+</style>
diff --git a/apps/showcase/doc/theming/unstyled/hybrid/HybridSetupDoc.vue b/apps/showcase/doc/theming/unstyled/hybrid/HybridSetupDoc.vue
new file mode 100644
index 000000000..0c5f7293c
--- /dev/null
+++ b/apps/showcase/doc/theming/unstyled/hybrid/HybridSetupDoc.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Hybrid mode is enabled for the whole suite by setting the <i>theme</i> option as <i>none</i>.</p>
+        <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { theme: 'none' });
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/theming/unstyled/hybrid/HybridTailwindDoc.vue b/apps/showcase/doc/theming/unstyled/hybrid/HybridTailwindDoc.vue
new file mode 100644
index 000000000..4875332af
--- /dev/null
+++ b/apps/showcase/doc/theming/unstyled/hybrid/HybridTailwindDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeTek offers the Tailwind CSS version of the entire PrimeVue UI suite based on the <i>@apply</i> directive with IntelliSense support. Visit the
+            <a href="https://github.com/cagataycivici/primevue-tailwindcss-presets" target="_blank" rel="noopener noreferrer">Tailwind version of PrimeVue</a> for the documentation, demos and additional resources.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/theming/unstyled/libraries/TailwindDoc.vue b/apps/showcase/doc/theming/unstyled/libraries/TailwindDoc.vue
deleted file mode 100644
index 54a893831..000000000
--- a/apps/showcase/doc/theming/unstyled/libraries/TailwindDoc.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Tailwind CSS is perfect fit for the unstyled mode, visit the dedicated <NuxtLink to="/tailwind">Tailwind CSS</NuxtLink> documentation for the first-class integration.</p>
-    </DocSectionText>
-</template>
-
-<script></script>
diff --git a/apps/showcase/doc/theming/unstyled/libraries/UnoCSSDoc.vue b/apps/showcase/doc/theming/unstyled/libraries/UnoCSSDoc.vue
deleted file mode 100644
index 9e1e7d0c7..000000000
--- a/apps/showcase/doc/theming/unstyled/libraries/UnoCSSDoc.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            To get started, UnoCSS should already be available in your application, if not visit the UnoCSS <a href="https://unocss.dev/integrations/">documentation</a> for the installation in various environments. Theming of PrimeVue components with
-            UnoCSS is mainly achieved with unstyled mode either using global setting or for a particular component only.
-        </p>
-        <p>For a sample, visit the <a href="https://github.com/primefaces/primevue-examples/tree/main/unstyled-unocss" target="_blank" rel="noopener noreferrer">example repository</a>.</p>
-    </DocSectionText>
-</template>
-
-<script></script>
diff --git a/apps/showcase/doc/theming/unstyled/ExampleDoc.vue b/apps/showcase/doc/theming/unstyled/pure/PureExampleDoc.vue
similarity index 70%
rename from apps/showcase/doc/theming/unstyled/ExampleDoc.vue
rename to apps/showcase/doc/theming/unstyled/pure/PureExampleDoc.vue
index 68adfdde6..348b42061 100644
--- a/apps/showcase/doc/theming/unstyled/ExampleDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/pure/PureExampleDoc.vue
@@ -1,8 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Here is a sample that provides a style using Tailwind CSS. Before beginning, head over to the pass through section <NuxtLink to="/button">button</NuxtLink> documentation to learn more about the components internals. We'll be using the
-            <i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
+            Here is a sample that styles a button component with Tailwind CSS using <NuxtLink to="/passthrough">pass through</NuxtLink> attributes. Before beginning, head over to the the pass through section at
+            <NuxtLink to="/button">button</NuxtLink> documentation to learn more about the components internals section. We'll be using the <i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
         </p>
         <div class="card flex justify-center">
             <Button
@@ -30,7 +30,8 @@ export default {
     unstyled
     pt:root="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2"
     pt:label="text-white font-bold text-lg"
-    pt:icon="text-white text-xl"
+    pt:icon="
+    "
 />
 `
             }
diff --git a/apps/showcase/doc/theming/unstyled/ThemeDoc.vue b/apps/showcase/doc/theming/unstyled/pure/PureGlobalDoc.vue
similarity index 58%
rename from apps/showcase/doc/theming/unstyled/ThemeDoc.vue
rename to apps/showcase/doc/theming/unstyled/pure/PureGlobalDoc.vue
index be09ecf6a..af80c2e86 100644
--- a/apps/showcase/doc/theming/unstyled/ThemeDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/pure/PureGlobalDoc.vue
@@ -1,8 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            An unstyled theme is basically a global <i>pt</i> configuration so that it can be defined only once from a single location, still a particular component can override a global configuration since the <i>pt</i> props of a component and the
-            global setting is merged with component having higher precedencee.
+            A global configuration can be created at application level to avoid repetition via the global <i>pt</i> option so that the styles can be shared from a single location. A particular component can still override a global configuration with
+            its own <i>pt</i> property.
         </p>
     </DocSectionText>
 
@@ -20,11 +20,12 @@ import PrimeVue from "primevue/config";
 const app = createApp(App);
 
 app.use(PrimeVue, {
+    unstyled: true,
     pt: {
         button: {
-            root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
-            label: 'text-white font-bold text-xl', // OR { class: 'text-white font-bold text-xl' }
-            icon: 'text-white text-2xl'
+            root: 'bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2',
+            label: 'text-white font-bold text-lg',
+            icon: 'text-white text-xl'
         },
         panel: {
             header: 'bg-primary text-primary-contrast border-primary',
diff --git a/apps/showcase/doc/theming/unstyled/SetupDoc.vue b/apps/showcase/doc/theming/unstyled/pure/PureSetupDoc.vue
similarity index 88%
rename from apps/showcase/doc/theming/unstyled/SetupDoc.vue
rename to apps/showcase/doc/theming/unstyled/pure/PureSetupDoc.vue
index 404ac41f4..f02ff3eff 100644
--- a/apps/showcase/doc/theming/unstyled/SetupDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/pure/PureSetupDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Unstyled mode is enabled for the whole suite by setting <i>unstyled</i> as true during PrimeVue installation.</p>
+        <p>Pure mode is enabled for the whole suite by enabling <i>unstyled</i> option during PrimeVue installation.</p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the <i>unstyled</i> prop of the component.</p>
         <div class="card flex justify-center">
diff --git a/apps/showcase/doc/theming/unstyled/pure/PureTailwindDoc.vue b/apps/showcase/doc/theming/unstyled/pure/PureTailwindDoc.vue
new file mode 100644
index 000000000..fddfd54ec
--- /dev/null
+++ b/apps/showcase/doc/theming/unstyled/pure/PureTailwindDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Tailwind CSS is perfect fit for the pure mode, our team has initiated the reference implementation of the global <i>pt</i> configuration to style the entire UI suite called the
+            <a href="https://github.com/cagataycivici/primevue-tailwindcss-presets" target="_blank" rel="noopener noreferrer">Tailwind CSS presets</a>. This add-on project is currently looking for community contributors to take over the ownership as
+            it requires significant bandwidth for PrimeTek to maintain both the styled mode and the unstyled mode presets via pass-through.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/vite/VerifyDoc.vue b/apps/showcase/doc/vite/VerifyDoc.vue
index c22c0405e..9867169da 100644
--- a/apps/showcase/doc/vite/VerifyDoc.vue
+++ b/apps/showcase/doc/vite/VerifyDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Verify your setup by adding a component such as <NuxtLink to="/button">Button</NuxtLink>. Each component can be imported and registered individually so that you only include what you use for bundle optimizization. Import path is available
+            Verify your setup by adding a component such as <NuxtLink to="/button">Button</NuxtLink>. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available
             in the documentation of the corresponding component.
         </p>
     </DocSectionText>
diff --git a/apps/showcase/pages/support/index.vue b/apps/showcase/pages/support/index.vue
index d188ecced..25e1aa369 100755
--- a/apps/showcase/pages/support/index.vue
+++ b/apps/showcase/pages/support/index.vue
@@ -53,7 +53,7 @@
                         </li>
                         <li class="flex items-center mb-4">
                             <i class="pi pi-check-circle mr-4 text-green-500"></i>
-                            <span class="leading-normal">Up to 5 accounts</span>
+                            <span class="leading-normal">Shared account per organization</span>
                         </li>
                         <li class="flex items-center mb-4">
                             <i class="pi pi-check-circle mr-4 text-green-500"></i>
@@ -85,7 +85,7 @@
                     </li>
                     <li>
                         <div class="font-semibold mb-1">2. Setup</div>
-                        <span class="leading-normal">A private repository with an exclusive issue tracker is created for you at GitHub.</span>
+                        <span class="leading-normal">An account is created for you in our exclusive JIRA issue tracker.</span>
                     </li>
                     <li>
                         <div class="font-semibold mb-1">3. Request Support</div>
@@ -200,7 +200,7 @@
                 <div class="flex-1 flex flex-col gap-8">
                     <div>
                         <div class="leading-normal mb-2 font-semibold">How many issue tracker accounts do we get?</div>
-                        <p class="!m-0 leading-normal">We provide at most 5 accounts per organization.</p>
+                        <p class="!m-0 leading-normal">We provide 1 shared account per organization.</p>
                     </div>
                     <div>
                         <div class="leading-normal mb-2 font-semibold">What is the duration of the service?</div>
diff --git a/apps/showcase/pages/theming/unstyled/index.vue b/apps/showcase/pages/theming/unstyled/index.vue
index dac09bbc6..c188b81e1 100644
--- a/apps/showcase/pages/theming/unstyled/index.vue
+++ b/apps/showcase/pages/theming/unstyled/index.vue
@@ -2,14 +2,14 @@
     <div>
         <Head>
             <Title>Unstyled - PrimeVue</Title>
-            <Meta name="description" content="Styling PrimeVue with your favorite CSS library." />
+            <Meta name="description" content="Theming PrimeVue with your own styles." />
         </Head>
 
         <div class="doc">
             <div class="doc-main">
                 <div class="doc-intro">
                     <h1>Unstyled Mode</h1>
-                    <p>Styling PrimeVue with your favorite CSS library.</p>
+                    <p>Theming PrimeVue with your own styles.</p>
                 </div>
                 <DocSections :docs="docs" />
             </div>
@@ -20,11 +20,14 @@
 
 <script>
 import ArchitectureDoc from '@/doc/theming/unstyled/ArchitectureDoc.vue';
-import ExampleDoc from '@/doc/theming/unstyled/ExampleDoc.vue';
-import SetupDoc from '@/doc/theming/unstyled/SetupDoc.vue';
-import ThemeDoc from '@/doc/theming/unstyled/ThemeDoc.vue';
-import TailwindDoc from '@/doc/theming/unstyled/libraries/TailwindDoc.vue';
-import UnoCSSDoc from '@/doc/theming/unstyled/libraries/UnoCSSDoc.vue';
+import ComparisonDoc from '@/doc/theming/unstyled/ComparisonDoc.vue';
+import HybridExampleDoc from '@/doc/theming/unstyled/hybrid/HybridExampleDoc.vue';
+import HybridSetupDoc from '@/doc/theming/unstyled/hybrid/HybridSetupDoc.vue';
+import HybridTailwindDoc from '@/doc/theming/unstyled/hybrid/HybridTailwindDoc.vue';
+import PureExampleDoc from '@/doc/theming/unstyled/pure/PureExampleDoc.vue';
+import PureGlobalDoc from '@/doc/theming/unstyled/pure/PureGlobalDoc.vue';
+import PureSetupDoc from '@/doc/theming/unstyled/pure/PureSetupDoc.vue';
+import PureTailwindDoc from '@/doc/theming/unstyled/pure/PureTailwindDoc.vue';
 
 export default {
     data() {
@@ -36,33 +39,54 @@ export default {
                     component: ArchitectureDoc
                 },
                 {
-                    id: 'setup',
-                    label: 'Setup',
-                    component: SetupDoc
+                    id: 'comparison',
+                    label: 'Comparison',
+                    component: ComparisonDoc
                 },
                 {
-                    id: 'example',
-                    label: 'Example',
-                    component: ExampleDoc
-                },
-                {
-                    id: 'theme',
-                    label: 'Theme',
-                    component: ThemeDoc
-                },
-                {
-                    id: 'libraries',
-                    label: 'Libraries',
+                    id: 'pure',
+                    label: 'Pure',
                     children: [
                         {
-                            id: 'tailwind',
-                            label: 'Tailwind',
-                            component: TailwindDoc
+                            id: 'pure-setup',
+                            label: 'Setup',
+                            component: PureSetupDoc
                         },
                         {
-                            id: 'unocss',
-                            label: 'UnoCSS',
-                            component: UnoCSSDoc
+                            id: 'pure-example',
+                            label: 'Example',
+                            component: PureExampleDoc
+                        },
+                        {
+                            id: 'pure-global',
+                            label: 'Global',
+                            component: PureGlobalDoc
+                        },
+                        {
+                            id: 'pure-tailwind',
+                            label: 'Tailwind Presets',
+                            component: PureTailwindDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'hybrid',
+                    label: 'Hybrid',
+                    children: [
+                        {
+                            id: 'hybrid-setup',
+                            label: 'Setup',
+                            component: HybridSetupDoc
+                        },
+                        {
+                            id: 'hybrid-example',
+                            label: 'Example',
+                            component: HybridExampleDoc
+                        },
+                        {
+                            id: 'hybrid-tailwind',
+                            label: 'Tailwind Version',
+                            component: HybridTailwindDoc
                         }
                     ]
                 }