From 9740ba4743b48ea643cecf26f6807bd6e31f713d Mon Sep 17 00:00:00 2001
From: paring <me@paring.moe>
Date: Sat, 4 Jan 2025 13:45:32 +0900
Subject: [PATCH] feat: button outlined danger variant

---
 src/lib/stylesheets/components/_button.scss | 29 +++++++++++++++++++++
 src/lib/types.ts                            |  1 +
 src/stories/Button.stories.svelte           |  2 ++
 3 files changed, 32 insertions(+)

diff --git a/src/lib/stylesheets/components/_button.scss b/src/lib/stylesheets/components/_button.scss
index 934f53f..04d5690 100644
--- a/src/lib/stylesheets/components/_button.scss
+++ b/src/lib/stylesheets/components/_button.scss
@@ -127,6 +127,35 @@
 	}
 }
 
+.button-style-outlined-danger {
+	transition:
+		border ease 0.2s,
+		background-color ease 0.2s,
+		color ease 0.2s;
+
+	&:disabled {
+		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
+		background-color: rgba(255, 255, 255, 0);
+		color: rgba(255, 255, 255, 0.4);
+	}
+
+	&:not(:disabled) {
+		box-shadow: 0 0 0 1px rgba($red, 0.2) inset;
+
+		color: $red;
+
+		&:hover,
+		&:focus {
+			background-color: rgba($red, 0.1);
+		}
+
+		&:active {
+			background-color: $red;
+			color: black;
+		}
+	}
+}
+
 /* Sizes */
 
 .button-size-lg {
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 04c4c0b..a2c2d3a 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -27,6 +27,7 @@ export type ButtonStyle =
 	| 'ghost-dark'
 	| 'ghost-danger'
 	| 'outlined'
+	| 'outlined-danger'
 export type ButtonSize = 'lg' | 'md' | 'sm'
 
 export type CheckboxSize = 'lg' | 'md' | 'sm'
diff --git a/src/stories/Button.stories.svelte b/src/stories/Button.stories.svelte
index 9514e17..40b69fc 100644
--- a/src/stories/Button.stories.svelte
+++ b/src/stories/Button.stories.svelte
@@ -74,6 +74,8 @@
 
 <Story name="Outlined" args={{ variant: 'outlined' }} children={template} />
 
+<Story name="Outlined Danger" args={{ variant: 'outlined-danger' }} children={template} />
+
 <style lang="scss">
 	.style-name {
 		margin-bottom: 8px;