From 623632a4fe1f577a80c33ca7fd9df9f80e97ff58 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Thu, 28 Nov 2024 17:20:47 +0100
Subject: [PATCH] fix(styles): Fix disabled colours

---
 apps/frontend/src/styles/themes.scss              | 14 +++++++-------
 apps/frontend/src/ui/components/base/Checkbox.tsx |  2 +-
 apps/frontend/uno.config.ts                       | 14 +++++++-------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/styles/themes.scss b/apps/frontend/src/styles/themes.scss
index d19cacd8..bc83c016 100644
--- a/apps/frontend/src/styles/themes.scss
+++ b/apps/frontend/src/styles/themes.scss
@@ -15,37 +15,37 @@
 	--clr-fg-primary: 213, 219, 255;
 	--clr-fg-primary-hover: 218, 224, 255;
 	--clr-fg-primary-pressed: 225, 229, 255;
-	--clr-fg-primary-disabled: 225, 229, 255, 0.5;
+	--clr-fg-primary-disabled: 205, 209, 235;
 
 	--clr-fg-secondary: 120, 129, 141;
 	--clr-fg-secondary-hover: 95, 104, 116;
 	--clr-fg-secondary-pressed: 130, 141, 155;
-	--clr-fg-secondary-disabled: 120, 129, 141, 0.5;
+	--clr-fg-secondary-disabled: 100, 109, 121;
 
 	--clr-brand: 43, 75, 255;
 	--clr-brand-hover: 40, 67, 221;
 	--clr-brand-pressed: 57, 87, 255;
-	--clr-brand-disabled: 57, 87, 255, 0.5;
+	--clr-brand-disabled: 37, 67, 235;
 
 	--clr-onbrand: 213, 219, 255;
 	--clr-onbrand-hover: 218, 224, 255;
 	--clr-onbrand-pressed: 225, 229, 255;
-	--clr-onbrand-disabled: 225, 229, 255, 0.5;
+	--clr-onbrand-disabled: 205, 209, 235;
 
 	--clr-danger: 255, 68, 68;
 	--clr-danger-hover: 214, 52, 52;
 	--clr-danger-pressed: 255, 86, 86;
-	--clr-danger-disabled: 255, 68, 68, 0.5;
+	--clr-danger-disabled: 235, 48, 48;
 
 	--clr-success: 35, 154, 96;
 	--clr-success-hover: 26, 135, 82;
 	--clr-success-pressed: 44, 172, 110;
-	--clr-success-disabled: 35, 154, 96, 0.5;
+	--clr-success-disabled: 15, 134, 76;
 
 	--clr-component-bg: 26, 34, 41;
 	--clr-component-bg-hover: 23, 31, 37;
 	--clr-component-bg-pressed: 34, 44, 53;
-	--clr-component-bg-disabled: 26, 34, 41, 0.5;
+	--clr-component-bg-disabled: 16, 24, 31;
 
 	--clr-code-info: 97, 175, 239;
 	--clr-code-warn: 229, 192, 123;
diff --git a/apps/frontend/src/ui/components/base/Checkbox.tsx b/apps/frontend/src/ui/components/base/Checkbox.tsx
index 8af16d20..c7de3585 100644
--- a/apps/frontend/src/ui/components/base/Checkbox.tsx
+++ b/apps/frontend/src/ui/components/base/Checkbox.tsx
@@ -19,7 +19,7 @@ function Checkbox(props: CheckboxProps) {
 
 	return (
 		<div
-			class={`${styles.checkbox} ${` ${split.class}` ?? ''}`}
+			class={`${styles.checkbox} ${split.class ?? ''}`}
 			onClick={() => toggle()}
 			{...rest}
 		>
diff --git a/apps/frontend/uno.config.ts b/apps/frontend/uno.config.ts
index fd7a9442..caf13e59 100644
--- a/apps/frontend/uno.config.ts
+++ b/apps/frontend/uno.config.ts
@@ -52,13 +52,13 @@ export default defineConfig({
 					DEFAULT: 'rgba(var(--clr-fg-primary), <alpha-value>)',
 					hover: 'rgba(var(--clr-fg-primary-hover), <alpha-value>)',
 					pressed: 'rgba(var(--clr-fg-primary-pressed), <alpha-value>)',
-					disabled: 'rgba(var(--clr-fg-primary-disabled))',
+					disabled: 'rgba(var(--clr-fg-primary-disabled), <alpha-value>)',
 				},
 				secondary: {
 					DEFAULT: 'rgba(var(--clr-fg-secondary), <alpha-value>)',
 					hover: 'rgba(var(--clr-fg-secondary-hover), <alpha-value>)',
 					pressed: 'rgba(var(--clr-fg-secondary-pressed), <alpha-value>)',
-					disabled: 'rgba(var(--clr-fg-secondary-disabled))',
+					disabled: 'rgba(var(--clr-fg-secondary-disabled), <alpha-value>)',
 				},
 			},
 
@@ -66,28 +66,28 @@ export default defineConfig({
 				DEFAULT: 'rgba(var(--clr-brand), <alpha-value>)',
 				hover: 'rgba(var(--clr-brand-hover), <alpha-value>)',
 				pressed: 'rgba(var(--clr-brand-pressed), <alpha-value>)',
-				disabled: 'rgba(var(--clr-brand-disabled))',
+				disabled: 'rgba(var(--clr-brand-disabled), <alpha-value>)',
 			},
 
 			onbrand: {
 				DEFAULT: 'rgba(var(--clr-onbrand), <alpha-value>)',
 				hover: 'rgba(var(--clr-onbrand-hover), <alpha-value>)',
 				pressed: 'rgba(var(--clr-onbrand-pressed), <alpha-value>)',
-				disabled: 'rgba(var(--clr-onbrand-disabled))',
+				disabled: 'rgba(var(--clr-onbrand-disabled), <alpha-value>)',
 			},
 
 			danger: {
 				DEFAULT: 'rgba(var(--clr-danger), <alpha-value>)',
 				hover: 'rgba(var(--clr-danger-hover), <alpha-value>)',
 				pressed: 'rgba(var(--clr-danger-pressed), <alpha-value>)',
-				disabled: 'rgba(var(--clr-danger-disabled))',
+				disabled: 'rgba(var(--clr-danger-disabled), <alpha-value>)',
 			},
 
 			success: {
 				DEFAULT: 'rgba(var(--clr-success), <alpha-value>)',
 				hover: 'rgba(var(--clr-success-hover), <alpha-value>)',
 				pressed: 'rgba(var(--clr-success-pressed), <alpha-value>)',
-				disabled: 'rgba(var(--clr-success-disabled))',
+				disabled: 'rgba(var(--clr-success-disabled), <alpha-value>)',
 			},
 
 			component: {
@@ -95,7 +95,7 @@ export default defineConfig({
 					DEFAULT: 'rgba(var(--clr-component-bg), <alpha-value>)',
 					hover: 'rgba(var(--clr-component-bg-hover), <alpha-value>)',
 					pressed: 'rgba(var(--clr-component-bg-pressed), <alpha-value>)',
-					disabled: 'rgba(var(--clr-component-bg-disabled))',
+					disabled: 'rgba(var(--clr-component-bg-disabled), <alpha-value>)',
 				},
 			},