Button.svelte

<script lang="ts">
	import { getContext } from 'svelte';
	import type { ColorfulType, SizeType, RoundedType } from '$lib/constants.ts';

	export let type: 'primary' | 'secondary' | 'text' = 'primary';
	export let color: ColorfulType = getContext('color') as ColorfulType || 'blue';
	export let size: SizeType = 'md';
	export let href: string | undefined = undefined;
	export let rounded: RoundedType = 'base';
</script>

<svelte:element
	this={href ? 'a' : 'button'}
	{href}
	{...$$restProps}
	class="button type-{type} color-{color} size-{size} round-{rounded} {$$props.class}"
	role={href ? 'button' : undefined}
	on:click
	on:keypress
	on:keyup
	on:keydown
	on:mouseenter
	on:mouseleave
>
	<slot>Button</slot>
</svelte:element>

<style lang="sass">
	@import "src/constants.sass"

	.button 
		@apply outline-offset-2 outline-2
		@apply brightness-100 hover:brightness-105 active:brightness-95
		@apply transform scale-100 hover:scale-105 active:scale-95
		@apply transition duration-100 ease-in-out will-change-transform
		@apply shadow-sm
		@apply inline-flex items-center gap-x-1.5
	
	.button.type-primary
		@apply text-white

	.button.type-secondary 
		@apply bg-white ring-1 ring-inset ring-gray-300 text-black
	
	.button.type-text 
		@apply shadow-none
	
	@each $color in $colors
		.button.type-primary.color-#{$color}
			@apply bg-#{$color}-600 outline-#{$color}-600
			//@apply dark:bg-#{$color}-500 dark:outline-#{$color}-500
		.button.type-secondary.color-#{$color}
			@apply text-#{$color}-900
			//@apply dark:text-#{$color}-100 dark:bg-#{$color}-100/10
		.button.type-text.color-#{$color}
			@apply text-#{$color}-600 bg-#{$color}-100/0 hover:bg-#{$color}-100/20 active:bg-#{$color}-100/30
			@apply outline-#{$color}-600
	
	.button.size-xs
		@apply rounded px-2 py-1 text-xs
	.button.size-sm
		@apply rounded px-2 py-1 text-sm
	.button.size-md
		@apply rounded-md px-2.5 py-1.5 text-sm
	.button.size-lg
		@apply rounded-md px-3 py-2 text-sm
	.button.size-xl
		@apply rounded-md px-3.5 py-2.5 text-sm

	.button.round-full
		@apply rounded-full

	.button.round-none
		@apply rounded-none

</style>