+
+{#snippet themeInfo()}
+ {#if version == 'minimalistic'}
+
+
Minimalistic
+
+
+ Colors:
+ Nord palette, subtle backgrounds
+
+
+ Typography:
+ Clean, readable hierarchy
+
+
+ Spacing:
+ Generous padding, breathing room
+
+
+ Features:
+ Enhanced toggle, connect emphasis
+
+
+
+ {:else if version == 'minimalistic_border'}
+
+
Minimalistic Border
+
+
+ Approach:
+ Shapes are slightly rounded, Groups are formed by padding and background color, borders
+ can be added to mark contrast. Prefer thin borders to shadows. Text have 3 colors:
+ primary, secondary, tertiary. Primary is reserved for headers/labels. Buttons have 2
+ main styles: border, no background for secondary action, full accent for primary action
+
+
+ Colors:
+ Nord palette, subtle backgrounds, no shadows
+
+
+ Typography:
+ Clean, readable hierarchy
+
+
+ Spacing:
+ Generous padding, breathing room
+
+
+ Shapes:
+ Slightly Rounded corners
+
+
+
+ {:else if version == 'sharp_minimal'}
+
+
Sharp Minimal
+
+
+ Design:
+ Crisp edges, high contrast
+
+
+ Interaction:
+ Bold connect button, clear states
+
+ {#each Object.entries(schema.properties) as [key, value]}
+ {@render input({ key, value })}
+ {/each}
+
+
+ {#snippet input({ key, value })}
+
+
+
+
+
+
+
{value.type}
+
+
+ {@render actions?.()}
+
+
+
+
+
{value.description}
+
+ {/snippet}
+
+ {#snippet actions()}
+
+
+ {@render toggleButton?.()}
+
+ {#snippet toggleButton()}
+
+
+
+
+ {/snippet}
+ {/snippet}
+ {:else if version == 'minimalistic_border'}
+
+
+
+ {#each Object.entries(schema.properties) as [key, value]}
+ {@render input({ key, value })}
+ {/each}
+
+
+
toggle:{@render toggleButton?.(true)}
+
buttons light most of the buttons:
+
+
+
buttons full accent for the main call to action only:
+
+
+
+
+ rounded toggle:
+
+
+
+ text primary : nord-0 for headers/labels
+
+ text secondary : nord-300 for most of the text and input values
+
+
+ text tertiary : gray-400 for placeholders/descriptions
+
+