feat: Create a dedicated hackertab theme colors.

Author: zouhir96

src/assets/index.css

@@ -25,37 +25,15 @@ code {
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --color-primary: oklch(0.53 0.1896 257.41);
-  --color-secondary: oklch(0.9 0.0221 250.23);
-  --color-secondary-hover: oklch(0.83 0.0314 249.73);
-  --color-danger: oklch(0.67 0.2143 24.47);
-  --color-success: oklch(0.73 0.2182 138.49);
-  --color-warning: oklch(0.85 0.1452 85.83);
-
-  --color-on-primary: oklch(1 0 0);
-  --color-on-secondary: oklch(0.42 0.0431 250.1);
-  --color-on-secondary-hover: oklch(0.42 0.0431 250.1);
-  --color-on-danger: oklch(1 0 0);
-  --color-on-success: oklch(1 0 0);
-  --color-on-warning: oklch(1 0 0);
-  --color-on-background: oklch(0.42 0.0431 250.1);
+  --color-ht-100: oklch(0.9 0.0221 250.23);
+  --color-ht-200: oklch(0.83 0.0314 249.73);
+  --color-ht-300: oklch(0.453 0.0179 251.34);
 }
 
 @layer base {
   @variant dark {
-    --color-primary: oklch(0.53 0.1896 257.41);
-    --color-secondary: oklch(0.24 0.0129 258.37);
-    --color-secondary-hover: oklch(0.22 0.0115 254.07);
-    --color-danger: oklch(0.67 0.2143 24.47);
-    --color-success: oklch(0.73 0.2182 138.49);
-    --color-warning: oklch(0.85 0.1452 85.83);
-
-    --color-on-primary: oklch(1 0 0);
-    --color-on-secondary: oklch(1 0 0);
-    --color-on-secondary-hover: oklch(0.42 0.0431 250.1);
-    --color-on-danger: oklch(1 0 0);
-    --color-on-success: oklch(1 0 0);
-    --color-on-warning: oklch(1 0 0);
-    --color-on-background: oklch(1 0 0);
+    --color-ht-100: oklch(0.2421 0.0129 258.37);
+    --color-ht-200: oklch(0.2245 0.0115 254.07);
+    --color-ht-300: oklch(1 0 0);
   }
 }

src/components/Elements/Button/Button.tsx

@@ -9,13 +9,12 @@ const sizes = {
 }
 
 const types = {
-  primary: 'bg-primary text-on-primary ',
-  secondary:
-    'bg-secondary text-on-secondary hover:bg-secondary-hover hover:text-on-secondary-hover',
+  primary: 'bg-blue-500 text-white hover:bg-blue-600',
+  secondary: 'bg-ht-100 text-ht-300 hover:bg-ht-200',
   danger: 'bg-danger text-on-danger ',
-  success: 'bg-success text-on-success ',
-  warning: 'bg-warning text-on-warning ',
-  text: 'bg-transparent text-on-background',
+  success: 'bg-green-500 text-white hover:bg-green-600',
+  warning: 'bg-yellow-400 text-white hover:bg-yellow-500',
+  text: 'bg-transparent text-ht-300',
 }
 
 interface ButtonProps {

src/components/Elements/Button/CircleButton.tsx

@@ -8,12 +8,10 @@ const sizes = {
 }
 
 const variants = {
-  primary: 'bg-primary text-on-primary hover:bg-primary-hover hover:text-on-primary-hover',
-  secondary:
-    'bg-secondary text-on-secondary hover:bg-secondary-hover hover:text-on-secondary-hover',
-  outlined:
-    'bg-transparent text-on-secondary border-1 dark:border-2 border-secondary hover:bg-secondary-hover hover:text-on-secondary-hover',
-  text: 'bg-transparent text-on-secondary',
+  primary: 'bg-blue-500 text-white hover:bg-blue-600',
+  secondary: 'bg-ht-100 text-ht-300 hover:bg-ht-200',
+  outlined: 'bg-ht-100 text-ht-300 hover:bg-ht-100',
+  text: 'bg-transparent ttext-ht-300',
   darkfocus: 'bg-blue-900 text-yellow-400 hover:opacity-80',
 }