From 7dec5ec2316022354783a3ac3ed0df8d17fc4322 Mon Sep 17 00:00:00 2001
From: Maicol Battistini <maicolbattistini@live.it>
Date: Sun, 12 May 2024 12:11:08 +0000
Subject: [PATCH 1/8] refactor: Allow other formats for CSS variables

---
 src/theme/_vars.scss                 |  4 ++--
 src/theme/app/_tabbar.scss           |  2 +-
 src/theme/app/_toolbar.scss          |  2 +-
 src/theme/betterdiscord/_input.scss  |  4 ++--
 src/theme/chat/_forum.scss           |  2 +-
 src/theme/chat/_message.scss         | 17 ++++++++++-------
 src/theme/chat/_textbox.scss         |  2 +-
 src/theme/guilds/_server.scss        |  2 +-
 src/theme/inputs/_button.scss        |  6 +++---
 src/theme/inputs/_checkboxes.scss    |  4 ++--
 src/theme/inputs/_radio.scss         |  4 ++--
 src/theme/inputs/_select.scss        |  2 +-
 src/theme/inputs/_slider.scss        |  4 ++--
 src/theme/inputs/_steps.scss         |  4 ++--
 src/theme/inputs/_switch.scss        |  4 ++--
 src/theme/inputs/_textbox.scss       |  4 ++--
 src/theme/members/_member.scss       |  2 +-
 src/theme/mixins/_btn.scss           |  6 +++---
 src/theme/modals/_quickswitcher.scss |  6 +++---
 src/theme/pages/_friends.scss        |  4 ++--
 src/theme/popouts/_autocomplete.scss |  2 +-
 src/theme/popouts/_emojipicker.scss  |  6 +++---
 src/theme/popouts/_menu.scss         |  2 +-
 src/theme/settings/_container.scss   |  4 ++--
 src/theme/settings/guild/_roles.scss |  2 +-
 src/theme/sidebar/_channel.scss      |  2 +-
 src/theme/sidebar/_dms.scss          |  2 +-
 src/theme/sidebar/_nitrogoal.scss    |  2 +-
 src/theme/sidebar/_voiceuser.scss    |  4 ++--
 29 files changed, 57 insertions(+), 54 deletions(-)

diff --git a/src/theme/_vars.scss b/src/theme/_vars.scss
index daca09f..d7830fb 100644
--- a/src/theme/_vars.scss
+++ b/src/theme/_vars.scss
@@ -4,7 +4,7 @@
 	--transition: cubic-bezier(0, 0, 0, 1);
 
 	--accent-text: #000;
-	--accent-solid: rgb(var(--accent));
+	--accent-solid: var(--accent);
 
 	--pill-width: 4px;
 	--pill-height: 16px;
@@ -78,5 +78,5 @@
 	--text-normal: var(--text-primary);
 	--text-muted: var(--text-tertiary);
 	--interactive-muted: var(--text-quaternary);
-	--text-link: rgb(var(--accent));
+	--text-link: var(--accent);
 }
diff --git a/src/theme/app/_tabbar.scss b/src/theme/app/_tabbar.scss
index a204180..d04e884 100644
--- a/src/theme/app/_tabbar.scss
+++ b/src/theme/app/_tabbar.scss
@@ -21,7 +21,7 @@
 			display: block;
 			opacity: 0;
 			border-radius: 30px;
-			background: rgb(var(--accent));
+			background: var(--accent);
 			position: absolute;
 			bottom: 0;
 			left: 50%;
diff --git a/src/theme/app/_toolbar.scss b/src/theme/app/_toolbar.scss
index 39ad58f..e64b993 100644
--- a/src/theme/app/_toolbar.scss
+++ b/src/theme/app/_toolbar.scss
@@ -80,7 +80,7 @@
 			background: var(--bg-alt);
 			&::before {
 				height: 2px;
-				background: rgb(var(--accent));
+				background: var(--accent);
 			}
 		}
 	}
diff --git a/src/theme/betterdiscord/_input.scss b/src/theme/betterdiscord/_input.scss
index e9d69f1..79c385d 100644
--- a/src/theme/betterdiscord/_input.scss
+++ b/src/theme/betterdiscord/_input.scss
@@ -42,8 +42,8 @@
 				width: 18px;
 			}
 			&:checked {
-				background: rgb(var(--accent));
-				border-color: rgb(var(--accent));
+				background: var(--accent);
+				border-color: var(--accent);
 				&::before {
 					background: var(--accent-text);
 					transform: translateX(18px);
diff --git a/src/theme/chat/_forum.scss b/src/theme/chat/_forum.scss
index 1a0c8bd..884a9a5 100644
--- a/src/theme/chat/_forum.scss
+++ b/src/theme/chat/_forum.scss
@@ -48,7 +48,7 @@
 			background: var(--bg-interactive-high);
 		}
 		&#{cls('forum.card.selected')} {
-			border-color: rgb(var(--accent));
+			border-color: var(--accent);
 		}
 	}
 
diff --git a/src/theme/chat/_message.scss b/src/theme/chat/_message.scss
index a7039f2..adcd1b8 100644
--- a/src/theme/chat/_message.scss
+++ b/src/theme/chat/_message.scss
@@ -27,9 +27,10 @@
 		padding: 8px 16px 16px 16px;
 	}
 	.mentioned_fa6fd2 {
-		background: rgb(var(--chat-mention-colour), 0.05);
+		background: var(--chat-mention-colour);
+		opacity: 0.05;
 		&::before {
-			background: rgb(var(--chat-mention-colour));
+			background: var(--chat-mention-colour);
 		}
 
 		&.groupStart__7b93c .contents_d3ae0d {
@@ -125,8 +126,9 @@
 
 	// @Mention/Link Channel
 	.wrapper_f5f4c9 {
-		background: rgb(var(--accent), 0.1);
-		color: rgb(var(--accent));
+		background: var(--accent);
+		opacity: 0.1;
+		color: var(--accent);
 		font-weight: var(--font-weight-semibold);
 		cursor: default;
 		&:hover {
@@ -145,9 +147,9 @@
 			background: var(--bg-interactive-high);
 		}
 		&.reactionMe__0fffc {
-			border-color: rgb(var(--accent));
+			border-color: var(--accent);
 			.reactionCount__2c34d {
-				color: rgb(var(--accent));
+				color: var(--accent);
 			}
 		}
 	}
@@ -196,5 +198,6 @@
 
 // Light theme
 .theme-light #app-mount .mentioned_fa6fd2 {
-	background: rgb(var(--accent), 0.15);
+	background: var(--accent);
+	opacity: 0.15;
 }
diff --git a/src/theme/chat/_textbox.scss b/src/theme/chat/_textbox.scss
index 2039576..154c55d 100644
--- a/src/theme/chat/_textbox.scss
+++ b/src/theme/chat/_textbox.scss
@@ -25,7 +25,7 @@
 			background: var(--bg-content-alt);
 			.inner__9fd0b::before {
 				height: 2px;
-				background: rgb(var(--accent));
+				background: var(--accent);
 			}
 		}
 	}
diff --git a/src/theme/guilds/_server.scss b/src/theme/guilds/_server.scss
index a13f3da..8bfb693 100644
--- a/src/theme/guilds/_server.scss
+++ b/src/theme/guilds/_server.scss
@@ -34,7 +34,7 @@
 			@for $i from 21 through 40 {
 				span[style*='height: #{$i}'] {
 					transform: scale(1, 1) !important;
-					background: rgb(var(--accent));
+					background: var(--accent);
 				}
 			}
 		}
diff --git a/src/theme/inputs/_button.scss b/src/theme/inputs/_button.scss
index 4687619..354fb41 100644
--- a/src/theme/inputs/_button.scss
+++ b/src/theme/inputs/_button.scss
@@ -23,7 +23,7 @@
 		}
 
 		&.buttonColor__7bad9 {
-			background: rgb(var(--accent));
+			background: var(--accent);
 			color: var(--accent-text);
 		}
 		&.lookFilled__950dd {
@@ -34,7 +34,7 @@
 			transition: box-shadow 0.15s var(--transition);
 			&.colorBrand__27d57,
 			&.colorGreen-3y-Z79 {
-				background: rgb(var(--accent));
+				background: var(--accent);
 				color: var(--accent-text);
 			}
 			&.colorRed__5a617 {
@@ -104,7 +104,7 @@
 		}
 		&.lookLink_a2da25 {
 			cursor: pointer;
-			color: rgb(var(--accent));
+			color: var(--accent);
 			.contents__322f4 {
 				background: none;
 			}
diff --git a/src/theme/inputs/_checkboxes.scss b/src/theme/inputs/_checkboxes.scss
index d76bbdd..9c558b0 100644
--- a/src/theme/inputs/_checkboxes.scss
+++ b/src/theme/inputs/_checkboxes.scss
@@ -24,8 +24,8 @@
 		display: none;
 	}
 	&[aria-checked='true'] .iconContainer__5d61c {
-		border-color: rgb(var(--accent));
-		background: rgb(var(--accent));
+		border-color: var(--accent);
+		background: var(--accent);
 		&::before {
 			opacity: 1;
 		}
diff --git a/src/theme/inputs/_radio.scss b/src/theme/inputs/_radio.scss
index a5d413d..c6ea050 100644
--- a/src/theme/inputs/_radio.scss
+++ b/src/theme/inputs/_radio.scss
@@ -19,8 +19,8 @@
 		display: none;
 	}
 	&[aria-checked='true'] .iconContainer__5d61c {
-		border-color: rgb(var(--accent));
-		background: rgb(var(--accent));
+		border-color: var(--accent);
+		background: var(--accent);
 		&::before {
 			opacity: 1;
 		}
diff --git a/src/theme/inputs/_select.scss b/src/theme/inputs/_select.scss
index 8b1c45a..012388d 100644
--- a/src/theme/inputs/_select.scss
+++ b/src/theme/inputs/_select.scss
@@ -63,7 +63,7 @@
 				transform: translateY(-50%);
 				width: 3px;
 				height: var(--pill-height);
-				background: rgb(var(--accent));
+				background: var(--accent);
 				border-radius: 30%;
 			}
 		}
diff --git a/src/theme/inputs/_slider.scss b/src/theme/inputs/_slider.scss
index 494a6cb..a045f4c 100644
--- a/src/theme/inputs/_slider.scss
+++ b/src/theme/inputs/_slider.scss
@@ -3,7 +3,7 @@
 		height: 4px;
 	}
 	.barFill__1f56b {
-		background: rgb(var(--accent));
+		background: var(--accent);
 	}
 	.track_b31f5a {
 		left: 10px;
@@ -11,7 +11,7 @@
 	.grabber_e3daf3 {
 		border: 4px solid var(--bg-highest);
 		margin-top: 0;
-		background: rgb(var(--accent));
+		background: var(--accent);
 		box-shadow: var(--shadow-flyout);
 		width: 20px;
 		height: 20px;
diff --git a/src/theme/inputs/_steps.scss b/src/theme/inputs/_steps.scss
index ee1e1fe..7e44f7e 100644
--- a/src/theme/inputs/_steps.scss
+++ b/src/theme/inputs/_steps.scss
@@ -1,8 +1,8 @@
 #app-mount .container-2uPlB3 {
 	.selectedProgressBar-11z5d9 {
-		background: rgb(var(--accent));
+		background: var(--accent);
 	}
 	.colorBrand-21Le_q {
-		color: rgb(var(--accent));
+		color: var(--accent);
 	}
 }
diff --git a/src/theme/inputs/_switch.scss b/src/theme/inputs/_switch.scss
index d1c661c..371d4cc 100644
--- a/src/theme/inputs/_switch.scss
+++ b/src/theme/inputs/_switch.scss
@@ -46,8 +46,8 @@
 			width: 18px;
 		}
 		&:checked {
-			background: rgb(var(--accent));
-			border-color: rgb(var(--accent));
+			background: var(--accent);
+			border-color: var(--accent);
 			&::before {
 				background: var(--accent-text);
 				transform: translateX(18px);
diff --git a/src/theme/inputs/_textbox.scss b/src/theme/inputs/_textbox.scss
index ddd6fb8..adb815f 100644
--- a/src/theme/inputs/_textbox.scss
+++ b/src/theme/inputs/_textbox.scss
@@ -25,8 +25,8 @@
 		&:focus,
 		&:focus-within {
 			background: var(--textbox-bg-active) !important;
-			box-shadow: inset 0 -1px 0 rgb(var(--accent));
-			border-bottom-color: rgb(var(--accent));
+			box-shadow: inset 0 -1px 0 var(--accent);
+			border-bottom-color: var(--accent);
 		}
 	}
 	.input-2g-os5.textArea-3WXAeD {
diff --git a/src/theme/members/_member.scss b/src/theme/members/_member.scss
index e802671..80643be 100644
--- a/src/theme/members/_member.scss
+++ b/src/theme/members/_member.scss
@@ -19,7 +19,7 @@
 			height: 0;
 			left: 0;
 			opacity: 0;
-			background: rgb(var(--accent));
+			background: var(--accent);
 			transition: var(--pill-transition);
 		}
 	}
diff --git a/src/theme/mixins/_btn.scss b/src/theme/mixins/_btn.scss
index 9e2c4e0..07cc403 100644
--- a/src/theme/mixins/_btn.scss
+++ b/src/theme/mixins/_btn.scss
@@ -29,7 +29,7 @@
 }
 
 @mixin btnPrimary {
-	background: rgb(var(--accent));
+	background: var(--accent);
 	color: var(--accent-text);
 	transition: box-shadow 0.15s var(--transition);
 	font-weight: var(--font-weight-semibold);
@@ -37,12 +37,12 @@
 	border-top-color: var(--btn-border-t);
 	border-bottom-color: var(--btn-border-b);
 	&:hover {
-		background: rgb(var(--accent));
+		background: var(--accent);
 		box-shadow: inset 0 0 0 100vmax hsl(0 0% 0% / 0.1) !important;
 		border-color: hsl(0 0% 0% / 0.1);
 	}
 	&:active {
-		background: rgb(var(--accent));
+		background: var(--accent);
 		box-shadow: inset 0 0 0 100vmax hsl(0 0% 0% / 0.2) !important;
 		border-color: hsl(0 0% 0% / 0.2);
 	}
diff --git a/src/theme/modals/_quickswitcher.scss b/src/theme/modals/_quickswitcher.scss
index 003a69c..6259af5 100644
--- a/src/theme/modals/_quickswitcher.scss
+++ b/src/theme/modals/_quickswitcher.scss
@@ -45,8 +45,8 @@
 		&:focus,
 		&:focus-within {
 			background: var(--textbox-bg-active) !important;
-			box-shadow: inset 0 -1px 0 rgb(var(--accent));
-			border-bottom-color: rgb(var(--accent));
+			box-shadow: inset 0 -1px 0 var(--accent);
+			border-bottom-color: var(--accent);
 		}
 	}
 
@@ -75,7 +75,7 @@
 				transform: translateY(-50%);
 				width: var(--pill-width);
 				height: 0;
-				background: rgb(var(--accent));
+				background: var(--accent);
 				border-radius: 30px;
 				opacity: 0;
 				transition: var(--pill-transition);
diff --git a/src/theme/pages/_friends.scss b/src/theme/pages/_friends.scss
index ea248b2..2e168cd 100644
--- a/src/theme/pages/_friends.scss
+++ b/src/theme/pages/_friends.scss
@@ -47,7 +47,7 @@
 				background: var(--bg-content-alt);
 				&::before {
 					height: 2px;
-					background: rgb(var(--accent));
+					background: var(--accent);
 				}
 			}
 		}
@@ -74,7 +74,7 @@
 			display: block;
 			height: 0;
 			width: var(--pill-width);
-			background: rgb(var(--accent));
+			background: var(--accent);
 			border-radius: 50px;
 			transition: var(--pill-transition);
 			opacity: 0;
diff --git a/src/theme/popouts/_autocomplete.scss b/src/theme/popouts/_autocomplete.scss
index b6c8726..c4575c4 100644
--- a/src/theme/popouts/_autocomplete.scss
+++ b/src/theme/popouts/_autocomplete.scss
@@ -33,7 +33,7 @@
 				width: var(--pill-width);
 				height: 0;
 				border-radius: 30px;
-				background: rgb(var(--accent));
+				background: var(--accent);
 				opacity: 0;
 				transition: var(--pill-transition);
 			}
diff --git a/src/theme/popouts/_emojipicker.scss b/src/theme/popouts/_emojipicker.scss
index 2f22448..f1a581e 100644
--- a/src/theme/popouts/_emojipicker.scss
+++ b/src/theme/popouts/_emojipicker.scss
@@ -38,7 +38,7 @@
 				display: block;
 				opacity: 0;
 				border-radius: 30px;
-				background: rgb(var(--accent));
+				background: var(--accent);
 				position: absolute;
 				bottom: 0;
 				left: 50%;
@@ -92,8 +92,8 @@
 		}
 		&:focus-within {
 			background: var(--textbox-bg-high-active) !important;
-			box-shadow: inset 0 -1px 0 rgb(var(--accent));
-			border-bottom-color: rgb(var(--accent));
+			box-shadow: inset 0 -1px 0 var(--accent);
+			border-bottom-color: var(--accent);
 		}
 	}
 
diff --git a/src/theme/popouts/_menu.scss b/src/theme/popouts/_menu.scss
index 6f1754a..1b4a428 100644
--- a/src/theme/popouts/_menu.scss
+++ b/src/theme/popouts/_menu.scss
@@ -110,7 +110,7 @@
 			color: hsl(var(--discord-pink));
 		}
 		&.colorBrand-3cPPsm {
-			color: rgb(var(--accent));
+			color: var(--accent);
 		}
 	}
 	// Reset
diff --git a/src/theme/settings/_container.scss b/src/theme/settings/_container.scss
index b59d08e..6216e13 100644
--- a/src/theme/settings/_container.scss
+++ b/src/theme/settings/_container.scss
@@ -93,7 +93,7 @@
 				}
 
 				.selectedBackground-1qyzak {
-					background: rgb(var(--accent));
+					background: var(--accent);
 				}
 
 				// ~~Disabled icons (for now hopefully)
@@ -112,7 +112,7 @@
 					height: 0;
 					width: 4px;
 					border-radius: 4px;
-					background: rgb(var(--accent));
+					background: var(--accent);
 					opacity: 0;
 					transition: 0.15s var(--transition);
 				}
diff --git a/src/theme/settings/guild/_roles.scss b/src/theme/settings/guild/_roles.scss
index f2a1bdb..845d2a2 100644
--- a/src/theme/settings/guild/_roles.scss
+++ b/src/theme/settings/guild/_roles.scss
@@ -124,7 +124,7 @@
 				left: 0;
 				top: 50%;
 				transform: translateY(-50%);
-				background: rgb(var(--accent));
+				background: var(--accent);
 				width: var(--pill-width);
 				height: 0;
 				opacity: 0;
diff --git a/src/theme/sidebar/_channel.scss b/src/theme/sidebar/_channel.scss
index cba3504..4383c97 100644
--- a/src/theme/sidebar/_channel.scss
+++ b/src/theme/sidebar/_channel.scss
@@ -31,7 +31,7 @@
 		}
 		&.modeSelected__473f1 {
 			&::before {
-				background: rgb(var(--accent));
+				background: var(--accent);
 				scale: 1;
 			}
 			.link_ddbb36 {
diff --git a/src/theme/sidebar/_dms.scss b/src/theme/sidebar/_dms.scss
index e78eaa0..6912f68 100644
--- a/src/theme/sidebar/_dms.scss
+++ b/src/theme/sidebar/_dms.scss
@@ -74,7 +74,7 @@
 			&::before {
 				scale: 1;
 				opacity: 1;
-				background: rgb(var(--accent));
+				background: var(--accent);
 			}
 			&:hover {
 				background: var(--bg-interactive-high-hover);
diff --git a/src/theme/sidebar/_nitrogoal.scss b/src/theme/sidebar/_nitrogoal.scss
index e13f56d..bbd61a1 100644
--- a/src/theme/sidebar/_nitrogoal.scss
+++ b/src/theme/sidebar/_nitrogoal.scss
@@ -3,6 +3,6 @@
 		margin: -8px 0 0 0;
 	}
 	.progressBar_db0972 {
-		background: linear-gradient(90deg, rgb(var(--accent), 0.5), rgb(var(--accent)));
+		background: linear-gradient(90deg, var(--accent), var(--accent));
 	}
 }
diff --git a/src/theme/sidebar/_voiceuser.scss b/src/theme/sidebar/_voiceuser.scss
index 43edf0d..e1738e3 100644
--- a/src/theme/sidebar/_voiceuser.scss
+++ b/src/theme/sidebar/_voiceuser.scss
@@ -15,7 +15,7 @@
 			display: block;
 			height: 0;
 			width: var(--pill-width);
-			background: rgb(var(--accent));
+			background: var(--accent);
 			border-radius: 50px;
 			transition: var(--pill-transition);
 			opacity: 0;
@@ -44,7 +44,7 @@
 	}
 	.avatarSpeaking_f239de {
 		box-shadow:
-			inset 0 0 0 2px rgb(var(--accent)),
+			inset 0 0 0 2px var(--accent),
 			inset 0 0 0 4px var(--bg-alt);
 	}
 	.content__3b07e {

From faf9f4d6c6ffc711068fa734ce929401d7d98799 Mon Sep 17 00:00:00 2001
From: Maicol Battistini <maicolbattistini@live.it>
Date: Sun, 12 May 2024 12:13:01 +0000
Subject: [PATCH 2/8] build: Trigger GH action

---
 src/core/_root.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/_root.scss b/src/core/_root.scss
index bd657d9..41df3a2 100644
--- a/src/core/_root.scss
+++ b/src/core/_root.scss
@@ -7,4 +7,4 @@
 
 	--dark-background-hue: 0; /* The hue of the background colour. | Options: 0 to 360 | Default: 0 */
 	--dark-background-saturation: 0%; /* How much of the colour should be visible. | Must end in a % | Default: 0% */
-}
+}
\ No newline at end of file

From 4356b66393e358e668d1ef1dd2c8c5a2d4bf23bc Mon Sep 17 00:00:00 2001
From: Maicol Battistini <maicolbattistini@live.it>
Date: Mon, 13 May 2024 07:55:50 +0000
Subject: [PATCH 3/8] fix: Apply transparency only on background via CSS
 relative colors

https://caniuse.com/css-relative-colors
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors
---
 src/theme/chat/_message.scss      | 9 +++------
 src/theme/sidebar/_nitrogoal.scss | 2 +-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/theme/chat/_message.scss b/src/theme/chat/_message.scss
index adcd1b8..2a40ff0 100644
--- a/src/theme/chat/_message.scss
+++ b/src/theme/chat/_message.scss
@@ -27,8 +27,7 @@
 		padding: 8px 16px 16px 16px;
 	}
 	.mentioned_fa6fd2 {
-		background: var(--chat-mention-colour);
-		opacity: 0.05;
+		background: rgb(from var(--chat-mention-colour) r g b, 0.05);
 		&::before {
 			background: var(--chat-mention-colour);
 		}
@@ -126,8 +125,7 @@
 
 	// @Mention/Link Channel
 	.wrapper_f5f4c9 {
-		background: var(--accent);
-		opacity: 0.1;
+		background: rgb(from var(--accent) r g b, 0.1);
 		color: var(--accent);
 		font-weight: var(--font-weight-semibold);
 		cursor: default;
@@ -198,6 +196,5 @@
 
 // Light theme
 .theme-light #app-mount .mentioned_fa6fd2 {
-	background: var(--accent);
-	opacity: 0.15;
+	background: rgb(from var(--accent) r g b, 0.15);
 }
diff --git a/src/theme/sidebar/_nitrogoal.scss b/src/theme/sidebar/_nitrogoal.scss
index bbd61a1..e5b9a02 100644
--- a/src/theme/sidebar/_nitrogoal.scss
+++ b/src/theme/sidebar/_nitrogoal.scss
@@ -3,6 +3,6 @@
 		margin: -8px 0 0 0;
 	}
 	.progressBar_db0972 {
-		background: linear-gradient(90deg, var(--accent), var(--accent));
+		background: linear-gradient(90deg, rgb(from var(--accent) r g b, 0.5), var(--accent));
 	}
 }

From 135067974c180929da7fb8e329dca31c3fb64906 Mon Sep 17 00:00:00 2001
From: Maicol Battistini <maicolbattistini@live.it>
Date: Mon, 13 May 2024 08:19:20 +0000
Subject: [PATCH 4/8] build: Fix Sass relative colors errors during builds

---
 src/theme/chat/_message.scss      | 9 ++++++---
 src/theme/sidebar/_nitrogoal.scss | 3 ++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/theme/chat/_message.scss b/src/theme/chat/_message.scss
index 2a40ff0..991b5cf 100644
--- a/src/theme/chat/_message.scss
+++ b/src/theme/chat/_message.scss
@@ -27,7 +27,8 @@
 		padding: 8px 16px 16px 16px;
 	}
 	.mentioned_fa6fd2 {
-		background: rgb(from var(--chat-mention-colour) r g b, 0.05);
+		$color: 'rgb(from var(--chat-mention-colour) r g b, 0.05)';
+		background: unquote($color);
 		&::before {
 			background: var(--chat-mention-colour);
 		}
@@ -125,7 +126,8 @@
 
 	// @Mention/Link Channel
 	.wrapper_f5f4c9 {
-		background: rgb(from var(--accent) r g b, 0.1);
+		$color: 'rgb(from var(--accent) r g b, 0.1)';
+		background: unquote($color);
 		color: var(--accent);
 		font-weight: var(--font-weight-semibold);
 		cursor: default;
@@ -196,5 +198,6 @@
 
 // Light theme
 .theme-light #app-mount .mentioned_fa6fd2 {
-	background: rgb(from var(--accent) r g b, 0.15);
+	$color: 'rgb(from var(--accent) r g b, 0.15)';
+	background: unquote($color);
 }
diff --git a/src/theme/sidebar/_nitrogoal.scss b/src/theme/sidebar/_nitrogoal.scss
index e5b9a02..11fe359 100644
--- a/src/theme/sidebar/_nitrogoal.scss
+++ b/src/theme/sidebar/_nitrogoal.scss
@@ -3,6 +3,7 @@
 		margin: -8px 0 0 0;
 	}
 	.progressBar_db0972 {
-		background: linear-gradient(90deg, rgb(from var(--accent) r g b, 0.5), var(--accent));
+		$color: 'rgb(from var(--accent) r g b / .5)';
+		background: linear-gradient(90deg, unquote($color), var(--accent));
 	}
 }

From 8b5e1b57fc340d0b39d9008eea9fa3997e2e398b Mon Sep 17 00:00:00 2001
From: Maicol Battistini <maicolbattistini@live.it>
Date: Tue, 18 Jun 2024 08:02:06 +0000
Subject: [PATCH 5/8] fix: Quoted default RGB value

---
 src/core/_root.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/_root.scss b/src/core/_root.scss
index c0ea136..8707048 100644
--- a/src/core/_root.scss
+++ b/src/core/_root.scss
@@ -1,5 +1,5 @@
 :root {
-	--accent: 98, 205, 254; /* The colour used throughout the app | R,G,B format | Default: 98, 205, 254 */
+	--accent: '98, 205, 254'; /* The colour used throughout the app | Default: 98, 205, 254 */
 
 	--channels-width: 300px; /* Size of the server channel/dms list | Default: 300px */
 	--members-width: 280px; /* Size of the members list | Default: 280px */

From 74c541cda14a0e091d7ef4e21c92fd4ee4c85108 Mon Sep 17 00:00:00 2001
From: Maicol Battistini <maicolbattistini@live.it>
Date: Tue, 18 Jun 2024 08:02:25 +0000
Subject: [PATCH 6/8] chore(deps): Upgraded dependencies

---
 package.json   |  2 +-
 pnpm-lock.yaml | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index c6acb31..08f14a5 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
 	},
 	"dependencies": {
 		"@discordstyles/classes": "^0.0.16",
-		"bd-scss": "2.0.14"
+		"bd-scss": "2.0.15"
 	},
 	"devDependencies": {
 		"prettier": "^3.2.5"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1fab917..4593212 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^0.0.16
     version: 0.0.16
   bd-scss:
-    specifier: 2.0.14
-    version: 2.0.14
+    specifier: 2.0.15
+    version: 2.0.15
 
 devDependencies:
   prettier:
@@ -47,8 +47,8 @@ packages:
       postcss-value-parser: 4.2.0
     dev: false
 
-  /bd-scss@2.0.14:
-    resolution: {integrity: sha512-0bFjZ/WQD3ekR0aLhTb8hR+0KFMGMf8H1MBKMw06DGon4j7PkRvvrHHfpvDLH+klWYE82my3WQKWt3LMqtDd/Q==}
+  /bd-scss@2.0.15:
+    resolution: {integrity: sha512-llM79zc7cIvfMQ6C28drRe5jQvFfv6n6aG/55Lih7rVlood9+JZMrTD/nmRh2Uufo41do1DKfjbE5mSrgWc7/g==}
     hasBin: true
     dependencies:
       autoprefixer: 10.4.19(postcss@8.4.38)
@@ -56,7 +56,7 @@ packages:
       chokidar: 3.6.0
       postcss: 8.4.38
       sade: 1.8.1
-      sass: 1.72.0
+      sass: 1.77.6
     dev: false
 
   /binary-extensions@2.3.0:
@@ -236,8 +236,8 @@ packages:
       mri: 1.2.0
     dev: false
 
-  /sass@1.72.0:
-    resolution: {integrity: sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==}
+  /sass@1.77.6:
+    resolution: {integrity: sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:

From 1f8fc1d5e5b32386de3e3e005313fac590c018d8 Mon Sep 17 00:00:00 2001
From: Maicol Battistini <maicolbattistini@live.it>
Date: Tue, 18 Jun 2024 08:04:53 +0000
Subject: [PATCH 7/8] refactor: Removed useless variables

---
 src/theme/chat/_message.scss      | 9 +++------
 src/theme/sidebar/_nitrogoal.scss | 3 +--
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/theme/chat/_message.scss b/src/theme/chat/_message.scss
index 991b5cf..3b1a6e3 100644
--- a/src/theme/chat/_message.scss
+++ b/src/theme/chat/_message.scss
@@ -27,8 +27,7 @@
 		padding: 8px 16px 16px 16px;
 	}
 	.mentioned_fa6fd2 {
-		$color: 'rgb(from var(--chat-mention-colour) r g b, 0.05)';
-		background: unquote($color);
+		background: rgb(from var(--chat-mention-colour) r g b / 5%);
 		&::before {
 			background: var(--chat-mention-colour);
 		}
@@ -126,8 +125,7 @@
 
 	// @Mention/Link Channel
 	.wrapper_f5f4c9 {
-		$color: 'rgb(from var(--accent) r g b, 0.1)';
-		background: unquote($color);
+		background: rgb(from var(--accent) r g b / 10%);
 		color: var(--accent);
 		font-weight: var(--font-weight-semibold);
 		cursor: default;
@@ -198,6 +196,5 @@
 
 // Light theme
 .theme-light #app-mount .mentioned_fa6fd2 {
-	$color: 'rgb(from var(--accent) r g b, 0.15)';
-	background: unquote($color);
+	background: rgb(from var(--accent) r g b / 15%);
 }
diff --git a/src/theme/sidebar/_nitrogoal.scss b/src/theme/sidebar/_nitrogoal.scss
index 11fe359..d2024b4 100644
--- a/src/theme/sidebar/_nitrogoal.scss
+++ b/src/theme/sidebar/_nitrogoal.scss
@@ -3,7 +3,6 @@
 		margin: -8px 0 0 0;
 	}
 	.progressBar_db0972 {
-		$color: 'rgb(from var(--accent) r g b / .5)';
-		background: linear-gradient(90deg, unquote($color), var(--accent));
+		background: linear-gradient(90deg, rgb(from var(--accent) r g b / 5%), var(--accent));
 	}
 }

From ac5eb94de1db5351165c950763372cf9be29307e Mon Sep 17 00:00:00 2001
From: Maicol Battistini <maicolbattistini@live.it>
Date: Tue, 18 Jun 2024 13:48:04 +0000
Subject: [PATCH 8/8] fix: Fix accent color notation

---
 src/core/_root.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/_root.scss b/src/core/_root.scss
index 8707048..bd186c1 100644
--- a/src/core/_root.scss
+++ b/src/core/_root.scss
@@ -1,5 +1,5 @@
 :root {
-	--accent: '98, 205, 254'; /* The colour used throughout the app | Default: 98, 205, 254 */
+	--accent: rgb(98, 205, 254); /* The colour used throughout the app | Default: 98, 205, 254 */
 
 	--channels-width: 300px; /* Size of the server channel/dms list | Default: 300px */
 	--members-width: 280px; /* Size of the members list | Default: 280px */