Creating a New Preset

KatluxToolkit's templating system allows you to create completely different visual styles for your components while maintaining the same logic.

1. Create Your Preset Directory

To create a new preset (e.g., `modern`), create a subfolder in the root `presets/` directory of your project:

/ (root)
└── presets/
    └── modern/

2. Preset Folder Structure

A KatluxToolkit preset must follow a specific subfolder structure to be correctly recognized by the system and to maintain modularity:

presets/modern/
├── assets/             # Global preset styles and themes
│   └── scss/
│       ├── css-variables.scss  # Your design tokens (colors, gaps, etc)
│       ├── index.scss          # Main entry point (includes all assets)
│       └── ...
└── components/         # Custom component implementations
    ├── KButton/
    │   └── KButton.vue
    ├── KTextbox/
    │   └── KTextbox.vue
    └── ...

3. Register Your Preset

To make your preset selectable in the application, register it in your `app.config.ts`.

export default defineAppConfig({
  katluxToolkit: {
    presetList: [
      { name: 'Default', value: 'default' },
      { name: 'Modern Style', value: 'modern' }
    ],
    activePreset: 'default',
  },
})

4. Component Structure

Each component in your custom preset must be placed inside the `components/` subfolder:

presets/modern/components/
└── KButton/
    └── KButton.vue

5. Example Implementation

Here is a simplified example of what a custom component (`KButton.vue`) looks like. It receives pre-calculated logic from the global component.

<preset lang="pug">
button.KButton.modern-button(
  @click="onClick" 
  :class="buttonClasses" 
  :disabled="isDisabled"
)
  slot
</preset>

<script lang="ts" setup>
defineProps<{
  isDisabled: boolean
  buttonClasses: any
  onClick: () => void
}>()
</script>

<style scoped>
.modern-button {
  border-radius: var(--border-radius-md);
  padding: 12px 24px;
  background: var(--button-gradient-primary);
  color: var(--font-color-light);
  border: none;
}
</style>