feat: button outlined danger variant

ADOFAI-gg · Jan 4, 2025 · 9740ba4 · 9740ba4
1 parent 945df4a
commit 9740ba4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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;