Prevent designer components to be changed

apps/showcase/assets/styles/layout/_designer.scss

@@ -12,7 +12,7 @@
         border: none;
         cursor: pointer;
     }
-    
+
     [type='color']::-webkit-color-swatch {
         border-radius: 4px;
         width: 24px;
@@ -20,8 +20,166 @@
         border: 0 none;
     }
 
-    .p-fieldset-toggleable > .p-fieldset-legend:hover {
+    .p-fieldset-toggleable>.p-fieldset-legend:hover {
         background: transparent;
     }
 
+    &.p-drawer {
+        background: light-dark(var(--p-surface-0), var(--p-surface-900));
+        border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+        color: light-dark(#09090b, #ffffff);
+        box-shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)';
+    }
+
+    .p-fieldset {
+        background: transparent;
+        border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+        border-radius: 4px;
+        color: inherit;
+        padding: 0 1.125rem 1.125rem 1.125rem;
+
+        .p-fieldset-legend {
+            background: transparent;
+            border-radius: 4px;
+            border-width: 0;
+            padding: 0;
+            transition: none;
+        }
+
+        .p-fieldset-legend-label {
+            font-weight: 600;
+        }
+
+        .p-fieldset-toggle-button {
+            gap: 0.5rem;
+            padding: 0.5rem 0.75rem;
+            background: transparent;
+            border: 0 none;
+            border-radius: 4px;
+            outline-color: transparent;
+        }
+
+        .p-fieldset-toggle-icon {
+            color: inherit;
+            transition: none;
+        }
+
+        &.p-fieldset-toggleable {
+            >.p-fieldset-legend:hover {
+                color: inherit;
+                background: transparent;
+
+                .p-fieldset-toggle-icon {
+                    color: inherit;
+                }
+            }
+        }
+
+        .p-fieldset-content {
+            padding: 0;
+        }
+    }
+
+    .p-tabs {
+        .p-tablist-tab-list {
+            background: transparent;
+            border-style: solid;
+            border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+            border-width: 0 0 1px 0;
+        }
+
+        .p-tab {
+            background: transparent;
+            border-width: 0 0 1px 0;
+            border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+            color: light-dark(var(--p-surface-500), var(--p-surface-400));
+            padding: 1rem 1.125rem;
+            font-weight: 600;
+            transition: none;
+            margin: 0 0 -1px 0;
+        }
+
+        .p-tab:not(.p-tab-active):not(.p-disabled):hover {
+            background: transparent;
+            border-color: transparent;
+            color: light-dark(var(--p-surface-700), var(--p-surface-0));
+        }
+
+        .p-tab-active {
+            background: transparent;
+            border-color: transparent;
+            color: light-dark(#09090b, #ffffff);
+        }
+
+        .p-tablist-active-bar {
+            inset-block-end: -1px;
+            height: 1px;
+            background: light-dark(#09090b, #ffffff);
+            transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
+        }
+
+        .p-tabpanels {
+            background: transparent;
+            color: inherit;
+            padding: 0.875rem 0 1.125rem 0;
+        }
+    }
+
+    .p-accordion {
+        .p-accordionpanel {
+            border-width: 0 0 1px 0;
+            border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+        }
+
+        .p-accordionheader {
+            padding: 1.125rem;
+            color: light-dark(var(--p-surface-500), var(--p-surface-400));
+            background: transparent;
+            border-width: 0;
+            border-color: unset;
+            font-weight: 600;
+            border-radius: 4px;
+            transition: none;
+        }
+
+        .p-accordionpanel:first-child>.p-accordionheader {
+            border-width: 0;
+            border-start-start-radius: 4px;
+            border-start-end-radius: 4px;
+        }
+
+        .p-accordionpanel:last-child>.p-accordionheader {
+            border-end-start-radius: 4px;
+            border-end-end-radius: 4px;
+        }
+
+        .p-accordionpanel:last-child.p-accordionpanel-active>.p-accordionheader {
+            border-end-start-radius: 4px;
+            border-end-end-radius: 4px;
+        }
+
+        .p-accordionheader-toggle-icon {
+            color: light-dark(var(--p-surface-500), var(--p-surface-400));
+        }
+
+        .p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled)>.p-accordionheader:hover,
+        .p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader {
+            background: transparent;
+            color: light-dark(var(--p-surface-700), var(--p-surface-0));
+        }
+
+        .p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon,
+        .p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader:hover .p-accordionheader-toggle-icon {
+            color: inherit;
+        }
+
+        .p-accordioncontent-content {
+            border-width: 0;
+            border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+            background-color: transparent;
+            color: inherit;
+            padding: 0 1.125rem 1.125rem 1.125rem;
+        }
+
+    }
 }

apps/showcase/components/layout/AppDesigner.vue

@@ -1,5 +1,5 @@
 <template>
-    <Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide" :dt="drawerTokens">
+    <Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide">
         <template #container="{ closeCallback }">
             <div class="flex items-center justify-between p-5">
                 <div class="flex items-center gap-2">
@@ -209,38 +209,6 @@ export default {
             }
 
             return null;
-        },
-        drawerTokens() {
-            return {
-                root: {
-                    shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
-                },
-                header: {
-                    padding: '1.25rem'
-                },
-                title: {
-                    fontSize: '1.5rem',
-                    fontWeight: '600'
-                },
-                content: {
-                    padding: '0 1.25rem 1.25rem 1.25rem'
-                },
-                footer: {
-                    padding: '1.25rem'
-                },
-                colorScheme: {
-                    light: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '#09090b'
-                    },
-                    dark: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '#ffffff'
-                    }
-                }
-            };
         }
     }
 };

apps/showcase/components/layout/designer/editor/DesignEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <Tabs v-model:value="$appState.designer.activeTab" :lazy="deferred" :dt="tabsTokens">
+    <Tabs v-model:value="$appState.designer.activeTab" :lazy="deferred">
         <TabList>
             <Tab value="0">Primitive</Tab>
             <Tab value="1">Semantic</Tab>
@@ -7,7 +7,7 @@
             <Tab value="3">Custom</Tab>
             <Tab value="4" class="ml-auto">Settings</Tab>
         </TabList>
-        <TabPanels class="!px-0">
+        <TabPanels>
             <TabPanel value="0">
                 <div>
                     <form @keydown="onKeyDown" class="flex flex-col gap-3">
@@ -105,98 +105,6 @@ export default {
             const directives = this.$appState.designer.theme.preset.directives;
 
             return components[this.$route.name] != null || directives[this.$route.name];
-        },
-        tabsTokens() {
-            return {
-                root: {
-                    transitionDuration: '0.2s'
-                },
-                tablist: {
-                    borderWidth: '0 0 1px 0',
-                    background: '{content.background}',
-                    borderColor: '{content.border.color}'
-                },
-                tab: {
-                    background: 'transparent',
-                    hoverBackground: 'transparent',
-                    activeBackground: 'transparent',
-                    borderWidth: '0 0 1px 0',
-                    padding: '1rem 1.125rem',
-                    fontWeight: '600',
-                    margin: '0 0 -1px 0',
-                    gap: '0.5rem',
-                    focusRing: {
-                        width: '{focus.ring.width}',
-                        style: '{focus.ring.style}',
-                        color: '{focus.ring.color}',
-                        offset: '-1px',
-                        shadow: '{focus.ring.shadow}'
-                    }
-                },
-                tabpanel: {
-                    background: 'transparent',
-                    color: 'inherit',
-                    padding: '0.875rem 1.125rem 1.125rem 1.125rem',
-                    focusRing: {
-                        width: '{focus.ring.width}',
-                        style: '{focus.ring.style}',
-                        color: '{focus.ring.color}',
-                        offset: '{focus.ring.offset}',
-                        shadow: 'inset {focus.ring.shadow}'
-                    }
-                },
-                navButton: {
-                    background: '{content.background}',
-                    color: '{text.muted.color}',
-                    hoverColor: '{text.color}',
-                    width: '2.5rem',
-                    focusRing: {
-                        width: '{focus.ring.width}',
-                        style: '{focus.ring.style}',
-                        color: '{focus.ring.color}',
-                        offset: '-1px',
-                        shadow: '{focus.ring.shadow}'
-                    }
-                },
-                activeBar: {
-                    height: '1px',
-                    bottom: '-1px'
-                },
-                colorScheme: {
-                    light: {
-                        tablist: {
-                            borderColor: '{surface.200}'
-                        },
-                        tab: {
-                            borderColor: '{surface.200}',
-                            hoverBorderColor: '{surface.200}',
-                            activeBorderColor: '#09090b',
-                            color: '#71717a',
-                            hoverColor: '#09090b',
-                            activeColor: '#09090b'
-                        },
-                        activeBar: {
-                            background: '#09090b'
-                        }
-                    },
-                    dark: {
-                        tablist: {
-                            borderColor: '{surface.700}'
-                        },
-                        tab: {
-                            borderColor: '{surface.700}',
-                            hoverBorderColor: '{surface.700}',
-                            activeBorderColor: '#ffffff',
-                            color: '#a1a1aa',
-                            hoverColor: '#ffffff',
-                            activeColor: '#ffffff'
-                        },
-                        activeBar: {
-                            background: '#ffffff'
-                        }
-                    }
-                }
-            };
         }
     }
 };