[AMB-182] refactor: remove old primary color

src/app/globals.css

@@ -18,9 +18,8 @@
     --card-foreground: 224 71.4% 4.1%;
     --popover: 0 0% 100%;
     --popover-foreground: 224 71.4% 4.1%;
-    --primary-v2: 225 89% 79%;
-    --primary-v2-hover: 224 100% 89%;
-    --primary: 262.1 83.3% 57.8%;
+    --primary: 225 89% 79%;
+    --primary-hover: 224 100% 89%;
     --primary-foreground: 210 20% 98%;
     --secondary: 220 14.3% 95.9%;
     --secondary-foreground: 220.9 39.3% 11%;
@@ -46,7 +45,6 @@
     --card-foreground: 210 20% 98%;
     --popover: 224 71.4% 4.1%;
     --popover-foreground: 210 20% 98%;
-    --primary: 263.4 70% 50.4%;
     --primary-foreground: 210 20% 98%;
     --secondary: 215 27.9% 16.9%;
     --secondary-foreground: 210 20% 98%;

src/app/page.tsx

@@ -112,7 +112,7 @@ export default function Page() {
 
             <div className="mb-6 grid gap-6 xl:grid-cols-2">
               <CardSection
-                bg="bg-primary-v2"
+                bg="bg-primary"
                 accent="bg-white"
                 icon="1"
                 title={p('signup')}
@@ -195,7 +195,7 @@ export default function Page() {
 
             <div className="space-y-6">
               <CardSection
-                bg="bg-primary-v2"
+                bg="bg-primary"
                 accent="bg-white"
                 icon={
                   <ShieldCheck className="h-[28px] w-[28px] lg:h-[32px] lg:w-[32px]" />
@@ -215,7 +215,7 @@ export default function Page() {
 
               <CardSection
                 bg="bg-white"
-                accent="bg-primary-v2"
+                accent="bg-primary"
                 icon={
                   <KeyRound className="h-[28px] w-[28px] lg:h-[32px] lg:w-[32px]" />
                 }
@@ -254,7 +254,7 @@ export default function Page() {
 
               <CardSection
                 bg="bg-accent-black"
-                accent="bg-primary-v2"
+                accent="bg-primary"
                 icon={
                   <LockKeyhole className="h-[28px] w-[28px] lg:h-[32px] lg:w-[32px]" />
                 }

src/components/form/LoginForm.tsx

@@ -258,7 +258,7 @@ export const LoginForm = () => {
             {l('no-account')}{' '}
             <Link
               href={ROUTES.signup}
-              className="text-primary-v2 transition-colors hover:text-primary-v2-hover"
+              className="text-primary transition-colors hover:text-primary-hover"
             >
               {p('signup')}
             </Link>

src/components/form/SignUpForm.tsx

@@ -186,7 +186,7 @@ export function SignUpForm() {
             {s('already')}{' '}
             <Link
               href={ROUTES.login.home}
-              className="text-primary-v2 transition-colors hover:text-primary-v2-hover"
+              className="text-primary transition-colors hover:text-primary-hover"
             >
               {p('login')}
             </Link>
@@ -374,7 +374,7 @@ export function SignUpForm() {
                     <Link
                       href={ROUTES.docs.termsOfService}
                       target="_blank"
-                      className="text-primary-v2 transition-colors hover:text-primary-v2-hover"
+                      className="text-primary transition-colors hover:text-primary-hover"
                     >
                       {chunks}
                     </Link>
@@ -383,7 +383,7 @@ export function SignUpForm() {
                     <Link
                       href={ROUTES.docs.privacyPolicy}
                       target="_blank"
-                      className="text-primary-v2 transition-colors hover:text-primary-v2-hover"
+                      className="text-primary transition-colors hover:text-primary-hover"
                     >
                       {chunks}
                     </Link>

src/components/form/WaitlistForm.tsx

@@ -144,7 +144,7 @@ export const WaitlistForm: FC<{
         type="button"
         onClick={() => setView('sign-up')}
         disabled={loading}
-        className="my-4 w-full text-center font-medium text-primary-v2 transition-colors hover:text-primary-v2-hover"
+        className="my-4 w-full text-center font-medium text-primary transition-colors hover:text-primary-hover"
       >
         {w('referral')}
       </button>
@@ -156,7 +156,7 @@ export const WaitlistForm: FC<{
           setView('sign-up');
         }}
         disabled={loading}
-        className="w-full text-center font-medium text-primary-v2 transition-colors hover:text-primary-v2-hover"
+        className="w-full text-center font-medium text-primary transition-colors hover:text-primary-hover"
       >
         {w('subscriber')}
       </button>

src/components/ui/badge.tsx

@@ -9,7 +9,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+          'border-transparent bg-primary text-black shadow hover:bg-primary-hover',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:

src/components/ui/button-v2.tsx

@@ -9,7 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        primary: 'text-black bg-primary-v2 hover:bg-primary-v2-hover',
+        primary: 'text-black bg-primary hover:bg-primary-hover',
         secondary: 'text-black dark:bg-white bg-slate-300',
       },
       size: {

src/components/ui/button.tsx

@@ -9,8 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        default: 'bg-primary text-black shadow hover:bg-primary-hover',
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:

src/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-6 w-6 shrink-0 rounded-lg border border-primary-v2 shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-v2',
+      'peer h-6 w-6 shrink-0 rounded-lg border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary',
       className
     )}
     {...props}

src/components/ui/progress.tsx

@@ -12,13 +12,13 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      'relative h-2 w-full overflow-hidden rounded-full bg-primary-v2/20',
+      'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
       className
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary-v2 transition-all"
+      className="h-full w-full flex-1 bg-primary transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

src/components/ui/tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-black animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}

tailwind.config.ts

@@ -24,12 +24,9 @@ const config = {
         ring: 'hsl(var(--ring))',
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
-        ['primary-v2']: {
-          DEFAULT: 'hsl(var(--primary-v2))',
-          hover: 'hsl(var(--primary-v2-hover))',
-        },
         primary: {
           DEFAULT: 'hsl(var(--primary))',
+          hover: 'hsl(var(--primary-hover))',
           foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {