From 098bf75bd30e43bdc96a7a5e541c966a5b2b0e16 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Mon, 15 Dec 2025 15:23:24 -0800
Subject: [PATCH] frameless button, link: add inverted colour state

---
 src/lib/FramelessButton.svelte | 7 ++++++-
 src/lib/Link.svelte            | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/lib/FramelessButton.svelte b/src/lib/FramelessButton.svelte
index 34b98aa..d5fafef 100644
--- a/src/lib/FramelessButton.svelte
+++ b/src/lib/FramelessButton.svelte
@@ -7,6 +7,7 @@
 		icon?: IconDef;
 		iconPosition?: 'left' | 'right';
 		disabled?: boolean;
+		inverted?: boolean;
 		class?: ClassValue | null | undefined;
 		children: Snippet;
 		onclick?: MouseEventHandler<HTMLButtonElement>;
@@ -16,6 +17,7 @@
 		icon,
 		iconPosition = 'right',
 		disabled = false,
+		inverted = false,
 		class: classValue,
 		children,
 		onclick
@@ -31,8 +33,11 @@
 <button
 	type="button"
 	class={[
-		'text-sui-accent hover:text-sui-primary inline-flex cursor-pointer items-center gap-1.5 transition-colors',
+		'inline-flex cursor-pointer items-center gap-1.5 transition-colors',
 		disabled && 'pointer-events-none cursor-not-allowed opacity-50',
+		inverted
+			? 'text-sui-background hover:text-sui-background/80 font-medium'
+			: 'text-sui-accent hover:text-sui-primary',
 		classValue
 	]}
 	{onclick}
diff --git a/src/lib/Link.svelte b/src/lib/Link.svelte
index c35a3cf..9ab2c74 100644
--- a/src/lib/Link.svelte
+++ b/src/lib/Link.svelte
@@ -40,6 +40,7 @@
 		basepath?: string | null;
 		disabled?: boolean;
 		tab?: 'current' | 'new';
+		inverted?: boolean;
 		class?: ClassValue | null | undefined;
 		children: Snippet;
 		onclick?: MouseEventHandler<HTMLAnchorElement>;
@@ -50,6 +51,7 @@
 		basepath,
 		disabled = false,
 		tab = 'current',
+		inverted = false,
 		class: classValue,
 		children,
 		onclick
@@ -60,8 +62,11 @@
 
 <a
 	class={[
-		'text-sui-accent hover:text-sui-primary inline-flex items-center gap-1.5 transition-colors',
+		'inline-flex items-center gap-1.5 transition-colors',
 		disabled && 'pointer-events-none cursor-not-allowed opacity-50',
+		inverted
+			? 'text-sui-background hover:text-sui-background/80 font-medium'
+			: 'text-sui-accent hover:text-sui-primary',
 		classValue
 	]}
 	href={computedHref}