From 012c1c4a7d996a22b0c142d6b38a677934711fa4 Mon Sep 17 00:00:00 2001
From: Mattias Granlund <mtsgrd@gmail.com>
Date: Wed, 3 Jan 2024 14:33:04 +0100
Subject: [PATCH] feat: add support for 'warn' color option in button component

---
 gitbutler-ui/src/lib/components/Button.svelte | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/gitbutler-ui/src/lib/components/Button.svelte b/gitbutler-ui/src/lib/components/Button.svelte
index 0c230ce3b..60c152053 100644
--- a/gitbutler-ui/src/lib/components/Button.svelte
+++ b/gitbutler-ui/src/lib/components/Button.svelte
@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+	export type ButtonColor = 'primary' | 'neutral' | 'error' | 'warn';
+</script>
+
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import type iconsJson from '$lib/icons/icons.json';
@@ -5,7 +9,7 @@
 
 	export let icon: keyof typeof iconsJson | undefined = undefined;
 	export let iconAlign: 'left' | 'right' = 'right';
-	export let color: 'primary' | 'neutral' | 'error' = 'primary';
+	export let color: ButtonColor = 'primary';
 	export let kind: 'filled' | 'outlined' = 'filled';
 	export let disabled = false;
 	export let id: string | undefined = undefined;
@@ -31,8 +35,10 @@
 	class={`btn ${className}`}
 	class:error-outline={color == 'error' && kind == 'outlined'}
 	class:primary-outline={color == 'primary' && kind == 'outlined'}
+	class:warn-outline={color == 'warn' && kind == 'outlined'}
 	class:error-filled={color == 'error' && kind == 'filled'}
 	class:primary-filled={color == 'primary' && kind == 'filled'}
+	class:warn-filled={color == 'warn' && kind == 'filled'}
 	class:neutral-outline={color == 'neutral' && kind == 'outlined'}
 	class:pointer-events-none={loading}
 	class:icon-left={iconAlign == 'left'}
@@ -125,6 +131,29 @@
 			background: var(--clr-theme-container-pale);
 		}
 	}
+	.warn-filled {
+		color: var(--clr-theme-warn-on-element);
+		background: var(--clr-theme-warn-element);
+		&:hover {
+			background: var(--clr-theme-warn-element-dim);
+		}
+		&:active {
+			background: var(--clr-theme-warn-element-dark);
+		}
+	}
+	.warn-outline {
+		color: var(--clr-theme-warn-outline);
+		border: 1px solid var(--clr-theme-warn-outline);
+		&:hover {
+			color: var(--clr-theme-warn-outline-dim);
+			border: 1px solid var(--clr-theme-warn-outline-dim);
+		}
+		&:active {
+			color: var(--clr-theme-warn-outline-dim);
+			border: 1px solid var(--clr-theme-warn-outline-dim);
+			background: var(--clr-theme-warn-container);
+		}
+	}
 	.error-filled {
 		color: var(--clr-theme-err-on-element);
 		background: var(--clr-theme-err-element);