Feat/button variant

src/lib/components/Button.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { buttonVariants, type ButtonProps } from '../../styles/tailwind/button';
+
+	export let variant: ButtonProps['variant'] = 'default';
+	export let size: ButtonProps['size'] = 'default';
+	export let color: ButtonProps['color'] = undefined;
+	export let className: string = '';
+	export { className as class };
+
+	$: classes = buttonVariants({ variant, size, className, color });
+</script>
+
+<button class={classes} on:click on:keydown {...$$restProps}>
+	<slot />
+</button>

src/lib/components/Playground.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { typography } from '../../styles/tailwind/typography';
+	import Button from './Button.svelte';
 
 	const typographyVariants: Array<
 		| 'heading1'
@@ -30,7 +31,9 @@
 		'bg-sucu-pink-02',
 		'bg-sucu-pink-03',
 		'bg-sucu-pink-04',
-		'bg-sucu-pink-05'
+		'bg-sucu-pink-05',
+		'bg-sucu-pink-hover',
+		'bg-sucu-pink-focus'
 	];
 </script>
 
@@ -83,6 +86,34 @@
 			Card with hover shadow
 		</div>
 	</section>
+
+	<!-- Button Test -->
+	<section class="section w-fit">
+		<h2 class="font-bold text-2xl mb-4">Button Variants</h2>
+		<div class="grid grid-cols-3 gap-2">
+			<div class="flex flex-col items-center gap-2">
+				<h4>Small</h4>
+				<Button variant="default" size="sm">Small</Button>
+				<Button color="black" size="sm">Small Black</Button>
+				<Button color="white" size="sm">Small White</Button>
+				<Button variant="outline" size="sm">Small Outline</Button>
+			</div>
+			<div class="flex flex-col items-center gap-2">
+				<h4>Default</h4>
+				<Button variant="default" size="default">Default</Button>
+				<Button color="black">Default Black</Button>
+				<Button color="white">Default White</Button>
+				<Button variant="outline">Default Outline</Button>
+			</div>
+			<div class="flex flex-col items-center gap-2">
+				<h4>Large</h4>
+				<Button variant="default" size="lg">Large</Button>
+				<Button size="lg" color="black">Large Black</Button>
+				<Button variant="default" size="lg" color="white">Large White</Button>
+				<Button variant="outline" size="lg">Large Outline</Button>
+			</div>
+		</div>
+	</section>
 </div>
 
 <style>

src/styles/tailwind/borderRadius.ts

@@ -0,0 +1,9 @@
+export const borderRadius = {
+	none: '0',
+	xs: '4px',
+	sm: '8px',
+	md: '12px',
+	lg: '16px',
+	xl: '28px',
+	full: '1000px'
+};

src/styles/tailwind/button.ts

@@ -0,0 +1,35 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export const buttonVariants = tv({
+	base: 'inline-flex items-center justify-center whitespace-nowrap rounded-xs text-sm font-semibold shadow-button-shadow text-white transition-colors duration-200 focus:outline-none focus:ring-[3px] focus:ring-sucu-pink-focus focus:border-transparent ring-offset-0',
+	variants: {
+		variant: {
+			default: 'bg-sucu-pink-02 hover:bg-sucu-pink-hover',
+			outline:
+				'border border-sucu-pink-04 bg-white text-black shadow-none hover:bg-sucu-pink-hover hover:text-white hover:border-sucu-pink-hover'
+		},
+		size: {
+			default: 'h-10 px-4 py-2',
+			sm: 'py-1.5 px-3 text-xs focus:ring-2',
+			lg: 'py-2 px-[18px] text-lg'
+		},
+		color: {
+			white: 'bg-white text-black hover:text-white',
+			black: 'bg-sucu-gray-dark text-white'
+		}
+	},
+	defaultVariants: {
+		variant: 'default',
+		size: 'default'
+	}
+});
+
+export type Variant = VariantProps<typeof buttonVariants>['variant'];
+export type Size = VariantProps<typeof buttonVariants>['size'];
+export type Color = VariantProps<typeof buttonVariants>['color'];
+
+export type ButtonProps = {
+	variant?: Variant;
+	size?: Size;
+	color?: Color;
+} & Partial<HTMLButtonElement>;

src/styles/tailwind/color.ts

@@ -10,7 +10,9 @@ export const colorScheme = {
 			'02': '#FFA1B3',
 			'03': '#FFC0BE',
 			'04': '#FFD5D3',
-			'05': '#FFEBE7'
+			'05': '#FFEBE7',
+			hover: '#FF5489',
+			focus: '#FFDBE6'
 		}
 	}
 };

tailwind.config.js

@@ -1,12 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 import { colorScheme } from './src/styles/tailwind/color';
 import { boxShadow } from './src/styles/tailwind/shadow';
+import { borderRadius } from './src/styles/tailwind/borderRadius';
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
 		extend: {
 			colors: colorScheme,
-			boxShadow: boxShadow
+			boxShadow: boxShadow,
+			borderRadius: borderRadius
 		}
 	},
 	plugins: []