From 64cd649cc9fa62b65cbe4efa4deffb5ebfdfb351 Mon Sep 17 00:00:00 2001
From: Sirawit Chanaburanasak <ext.sirawit@skooldio.com>
Date: Sat, 7 Sep 2024 22:37:24 +0700
Subject: [PATCH 1/2] feat: shadow

---
 src/lib/components/Playground.svelte | 15 +++++++++++++++
 src/styles/tailwind/shadow.ts        |  6 ++++++
 tailwind.config.js                   |  5 +++--
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/tailwind/shadow.ts

diff --git a/src/lib/components/Playground.svelte b/src/lib/components/Playground.svelte
index 93bd9b8..7d87850 100644
--- a/src/lib/components/Playground.svelte
+++ b/src/lib/components/Playground.svelte
@@ -66,6 +66,21 @@
 			</div>
 		{/each}
 	</section>
+
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Button Shadow</h2>
+		<button class="shadow-button-shadow p-4 bg-white text-black rounded">
+			Button with Shadow
+		</button>
+	</section>
+
+	<!-- Card Shadow Test -->
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Card Shadow (Hover)</h2>
+		<div class="p-6 bg-white text-black rounded shadow-card-shadow hover:shadow-card-shadow-hover transition-shadow">
+			Card with hover shadow
+		</div>
+	</section>
 </div>
 
 <style>
diff --git a/src/styles/tailwind/shadow.ts b/src/styles/tailwind/shadow.ts
new file mode 100644
index 0000000..2244aab
--- /dev/null
+++ b/src/styles/tailwind/shadow.ts
@@ -0,0 +1,6 @@
+export const boxShadow = {
+    'button-shadow': '0px 4px 12px 0px rgba(0, 0, 0, 0.15)',
+    'card-shadow': '0px 8px 24px 0px rgba(0, 0, 0, 0.15) ',  
+    // we cannot specify the hover: state directly on box shadow
+    'card-shadow-hover': '0px 8px 24px 0px rgba(0, 0, 0, 0.25)',
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index d1d9a7c..0bb08a6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 import { colorScheme } from './src/styles/tailwind/color';
-
+import { boxShadow } from './src/styles/tailwind/shadow';
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
 		extend: {
-			colors: colorScheme
+			colors: colorScheme,
+			boxShadow: boxShadow
 		}
 	},
 	plugins: []

From 379ce037a357b8c541d6536f34433628a20899a0 Mon Sep 17 00:00:00 2001
From: Sirawit Chanaburanasak <ext.sirawit@skooldio.com>
Date: Sat, 7 Sep 2024 22:39:41 +0700
Subject: [PATCH 2/2] chore: lint

---
 src/lib/components/Playground.svelte |  4 +++-
 src/styles/tailwind/shadow.ts        | 10 +++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Playground.svelte b/src/lib/components/Playground.svelte
index 7d87850..90ffe0b 100644
--- a/src/lib/components/Playground.svelte
+++ b/src/lib/components/Playground.svelte
@@ -77,7 +77,9 @@
 	<!-- Card Shadow Test -->
 	<section class="section">
 		<h2 class="font-bold text-2xl mb-4">Card Shadow (Hover)</h2>
-		<div class="p-6 bg-white text-black rounded shadow-card-shadow hover:shadow-card-shadow-hover transition-shadow">
+		<div
+			class="p-6 bg-white text-black rounded shadow-card-shadow hover:shadow-card-shadow-hover transition-shadow"
+		>
 			Card with hover shadow
 		</div>
 	</section>
diff --git a/src/styles/tailwind/shadow.ts b/src/styles/tailwind/shadow.ts
index 2244aab..eb82c0a 100644
--- a/src/styles/tailwind/shadow.ts
+++ b/src/styles/tailwind/shadow.ts
@@ -1,6 +1,6 @@
 export const boxShadow = {
-    'button-shadow': '0px 4px 12px 0px rgba(0, 0, 0, 0.15)',
-    'card-shadow': '0px 8px 24px 0px rgba(0, 0, 0, 0.15) ',  
-    // we cannot specify the hover: state directly on box shadow
-    'card-shadow-hover': '0px 8px 24px 0px rgba(0, 0, 0, 0.25)',
-}
\ No newline at end of file
+	'button-shadow': '0px 4px 12px 0px rgba(0, 0, 0, 0.15)',
+	'card-shadow': '0px 8px 24px 0px rgba(0, 0, 0, 0.15) ',
+	// we cannot specify the hover: state directly on box shadow
+	'card-shadow-hover': '0px 8px 24px 0px rgba(0, 0, 0, 0.25)'
+};