Merge pull request #1 from isd-sgcu/feat/design-system

[WIP] feat: design system

src/lib/components/Playground.svelte

@@ -1,3 +1,83 @@
-<section>
-	<h2>Playground</h2>
-</section>
+<script lang="ts">
+	import { typography } from '../../styles/tailwind/typography';
+
+	const typographyVariants: Array<
+		| 'heading1'
+		| 'heading2'
+		| 'heading3'
+		| 'heading4'
+		| 'body-large'
+		| 'body-medium'
+		| 'body-normal'
+		| 'body-small'
+		| 'body-very-small'
+	> = [
+		'heading1',
+		'heading2',
+		'heading3',
+		'heading4',
+		'body-large',
+		'body-medium',
+		'body-normal',
+		'body-small',
+		'body-very-small'
+	];
+
+	const grayClasses = ['bg-sucu-gray-dark', 'bg-sucu-gray', 'bg-sucu-gray-light'];
+
+	const pinkClasses = [
+		'bg-sucu-pink-01',
+		'bg-sucu-pink-02',
+		'bg-sucu-pink-03',
+		'bg-sucu-pink-04',
+		'bg-sucu-pink-05'
+	];
+</script>
+
+<div>
+	<!-- Typography Section -->
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Typography Variants</h2>
+		{#each typographyVariants as variant}
+			<div class={typography({ variant })}>
+				{variant}
+			</div>
+		{/each}
+	</section>
+
+	<!-- Color Scheme Section - Gray -->
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Gray Color Scheme</h2>
+		{#each grayClasses as grayClass}
+			<div class="flex items-center space-x-2">
+				<div class={`color-box ${grayClass}`}></div>
+				<span>{grayClass}</span>
+			</div>
+		{/each}
+	</section>
+
+	<!-- Color Scheme Section - Pink -->
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Pink Color Scheme</h2>
+		{#each pinkClasses as pinkClass}
+			<div class="flex items-center space-x-2">
+				<div class={`color-box ${pinkClass}`}></div>
+				<span>{pinkClass}</span>
+			</div>
+		{/each}
+	</section>
+</div>
+
+<style>
+	.section {
+		padding: 2rem;
+		border-bottom: 1px solid #ccc;
+	}
+	.color-box {
+		width: 100px;
+		height: 100px;
+		display: inline-block;
+		margin-right: 10px;
+		margin-bottom: 10px;
+	}
+</style>

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import '../app.css';
+	import '../styles/app.css';
 </script>
 
 <slot />

src/styles/tailwind/color.ts

@@ -0,0 +1,16 @@
+export const colorScheme = {
+	sucu: {
+		gray: {
+			dark: '#3F3A3A',
+			DEFAULT: '#9D9D9D',
+			light: '#D5D5D5'
+		},
+		pink: {
+			'01': '#FF82A9',
+			'02': '#FFA1B3',
+			'03': '#FFC0BE',
+			'04': '#FFD5D3',
+			'05': '#FFEBE7'
+		}
+	}
+};

src/styles/tailwind/typography.ts

@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants';
+
+export const typography = tv({
+	variants: {
+		variant: {
+			heading1: 'font-bold text-[64px]',
+			heading2: 'font-bold text-5xl',
+			heading3: 'font-bold text-3xl',
+			heading4: 'font-bold text-2xl',
+			'body-large': 'text-2xl',
+			'body-medium': 'text-xl',
+			'body-normal': 'text-base',
+			'body-small': 'text-xs',
+			'body-very-small': 'text-[8px]'
+		}
+	},
+	defaultVariants: {
+		variant: 'body-large'
+	}
+});

tailwind.config.js

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