✨ Rework buttons classes and variants

Add a conditional class and list props as BEM class modifiers

src/components/atoms/Button.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
     import SplitText from '$components/SplitText.svelte'
 
-    export let text: string
     export let tag: string = 'a'
-    export let effect: string = 'link-3d'
+    export let text: string
     export let url: string = undefined
+    export let color: string = undefined
+    export let size: string = undefined
+    export let effect: string = 'link-3d'
     export let disabled: boolean = undefined
 
+    const className = 'button'
     const classes = [
-        'button',
-        effect ?? null,
+        className,
+        effect ? effect : undefined,
+        ...[color, size].map(variant => variant && `${className}--${variant}`),
         $$props.class
     ].join(' ').trim()
 </script>

src/components/atoms/ButtonCircle.svelte

@@ -1,7 +1,26 @@
 <script lang="ts">
+    export let color: string = undefined
+    export let size: string = undefined
+    export let type: string = undefined
+    export let form: string = undefined
+    export let clone: boolean = false
 
+    const className = 'button-circle'
+    const classes = [
+        className,
+        ...[color, size].map(variant => variant && `${className}--${variant}`),
+        $$props.class
+    ].join(' ').trim()
 </script>
 
-<button class="button-circle" on:click>
-    <slot />
+<button {type} {form} class={classes} on:click>
+    {#if clone}
+        {#each Array(2) as _}
+            <span class="clone">
+                <slot />
+            </span>
+        {/each}
+    {:else}
+        <slot />
+    {/if}
 </button>