fix(styles): Fix disabled colours

Author: LynithDev

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;

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}
 		>

apps/frontend/uno.config.ts

@@ -52,50 +52,50 @@ 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>)',
 				},
 			},
 
 			brand: {
 				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: {
 				bg: {
 					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>)',
 				},
 			},