From 40287a15708f680efca402812da047b7daeaa072 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 8 Jan 2026 12:52:36 +0100
Subject: [PATCH] refactor: move bulma button styles to button component

---
 frontend/src/components/input/Button.vue | 102 +++++++++++++++++++++--
 frontend/src/styles/global.scss          |   2 +-
 2 files changed, 95 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/input/Button.vue b/frontend/src/components/input/Button.vue
index 91f08fb41..c406a3616 100644
--- a/frontend/src/components/input/Button.vue
+++ b/frontend/src/components/input/Button.vue
@@ -71,6 +71,16 @@ const variantClass = computed<string>(() => VARIANT_CLASS_MAP[variant.value])
 
 <style lang="scss" scoped>
 .button {
+	// Base structure (replaces Bulma's .button)
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	vertical-align: top;
+	cursor: pointer;
+	text-align: center;
+	white-space: var(--button-white-space);
+
+	// Custom styles
 	transition: all $transition;
 	border: 0;
 	text-transform: uppercase;
@@ -79,24 +89,28 @@ const variantClass = computed<string>(() => VARIANT_CLASS_MAP[variant.value])
 	block-size: auto;
 	min-block-size: $button-height;
 	box-shadow: var(--shadow-sm);
-	white-space: var(--button-white-space);
 	line-height: 1;
-	display: inline-flex;
-	padding-inline: 0; // override bulma style // override bulma style
 	padding-inline: .5rem;
 	gap: .25rem;
 
+	// Default/Primary variant colors
+	background-color: var(--primary);
+	color: var(--white);
+	border-radius: $radius;
+
 	[dir="rtl"] & {
 		flex-direction: row-reverse;
 	}
 
 	&:hover {
 		box-shadow: var(--shadow-md);
+		background-color: var(--primary-dark, color-mix(in srgb, var(--primary) 85%, black));
 	}
 
-	&.fullheight {
-		padding-inline-end: 7px;
-		block-size: 100%;
+	&:focus,
+	&:focus-visible {
+		outline: 2px solid var(--primary);
+		outline-offset: 2px;
 	}
 
 	&.is-active,
@@ -107,13 +121,85 @@ const variantClass = computed<string>(() => VARIANT_CLASS_MAP[variant.value])
 		box-shadow: var(--shadow-xs) !important;
 	}
 
-	&.is-primary.is-outlined:hover {
-		color: var(--white);
+	&[disabled] {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
 	}
 
 	.icon {
 		margin: 0 !important;
 	}
+
+	// Primary variant (default, explicit)
+	&.is-primary {
+		background-color: var(--primary);
+		color: var(--white);
+
+		&:hover {
+			background-color: var(--primary-dark, color-mix(in srgb, var(--primary) 85%, black));
+		}
+	}
+
+	// Secondary/Outlined variant
+	&.is-outlined {
+		background-color: var(--scheme-main);
+		color: var(--grey-900);
+
+		&:hover {
+			color: var(--grey-600);
+		}
+	}
+
+	// Tertiary/Text variant
+	&.is-text {
+		background-color: transparent;
+		color: var(--text);
+		box-shadow: none;
+
+		&:hover {
+			background-color: var(--grey-100);
+			box-shadow: none;
+		}
+	}
+
+	&.is-inverted {
+		// Used with is-text for tertiary buttons
+		color: inherit;
+	}
+
+	// Loading state
+	&.is-loading {
+		color: transparent !important;
+		pointer-events: none;
+		position: relative;
+
+		&::after {
+			content: "";
+			position: absolute;
+			display: block;
+			block-size: 1em;
+			inline-size: 1em;
+			border: 2px solid currentColor;
+			border-radius: 50%;
+			border-inline-end-color: transparent;
+			border-block-start-color: transparent;
+			animation: spin-around 500ms infinite linear;
+
+			// Center the spinner
+			inset-inline-start: calc(50% - 0.5em);
+			inset-block-start: calc(50% - 0.5em);
+		}
+	}
+}
+
+@keyframes spin-around {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }
 
 .is-small {
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index 51b36af7c..b35796690 100644
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -22,7 +22,7 @@
 
 // imports from "bulma-css-variables/sass/elements/_all";
 @import "bulma-css-variables/sass/elements/box";
-@import "bulma-css-variables/sass/elements/button";
+// @import "bulma-css-variables/sass/elements/button"; // Moved to Button.vue component
 @import "bulma-css-variables/sass/elements/container";
 @import "bulma-css-variables/sass/elements/content";
 @import "bulma-css-variables/sass/elements/icon";