I fixed some issues with how we were setting up styles. should be consistent now

src/components/default/auth/buttons/client/index.tsx

@@ -1,3 +1,3 @@
-export { SignInWithApple } from './sign-in-with-apple';
-export { SignInWithMicrosoft } from './sign-in-with-microsoft';
+export { SignInWithApple, type SignInWithAppleProps } from './sign-in-with-apple';
+export { SignInWithMicrosoft, type SignInWithMicrosoftProps } from './sign-in-with-microsoft';
 export { SignInLinkButton } from './sign-in-link';

src/components/default/auth/buttons/client/sign-in-link.tsx

@@ -1,12 +1,11 @@
 'use client';
 import Link from 'next/link';
-import { Button, type buttonVariants } from '@/components/ui';
+import { Button } from '@/components/ui';
 import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
 
-type SignInProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants>;
+type SignInLinkButtonProps = Omit<ComponentProps<typeof Button>, 'asChild'>;
 
-export const SignInLinkButton = (props: SignInProps) => {
+export const SignInLinkButton = (props: SignInLinkButtonProps) => {
   return (
     <Button asChild {...props}>
       <Link href='/sign-in'>Sign In</Link>

src/components/default/auth/buttons/client/sign-in-with-apple.tsx

@@ -1,36 +1,36 @@
 'use client';
 import { signInWithApple } from '@/lib/queries';
-import { StatusMessage, SubmitButton } from '@/components/default/forms';
+import {
+  StatusMessage,
+  SubmitButton,
+  type SubmitButtonProps,
+} from '@/components/default/forms';
 import { useAuth } from '@/lib/hooks/context';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useSupabaseClient } from '@/utils/supabase';
 import { FaApple } from 'react-icons/fa';
-import { type buttonVariants } from '@/components/ui';
 import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
 
-type SignInWithAppleProps = {
-  buttonProps?: ComponentProps<'button'> & VariantProps<typeof buttonVariants>;
-  formProps?: ComponentProps<'form'>;
-  textProps?: ComponentProps<'p'>;
-  iconProps?: ComponentProps<'svg'>;
+export type SignInWithAppleProps = {
+  submitButtonProps?: SubmitButtonProps;
+  formClassName?: ComponentProps<'form'>['className'];
+  formProps?: Omit<ComponentProps<'form'>, 'className'>;
+  textClassName?: ComponentProps<'p'>['className'];
+  textProps?: Omit<ComponentProps<'p'>, 'className'>;
+  iconClassName?: ComponentProps<'svg'>['className'];
+  iconProps?: Omit<ComponentProps<'svg'>, 'className'>;
 };
 
 export const SignInWithApple = ({
-  buttonProps = {
-    className: 'w-full cursor-pointer',
-    type: 'submit',
-  },
-  formProps = {
-    className: 'my-4',
-  },
-  textProps = {
-    className: 'text-[1.0rem]',
-  },
-  iconProps = {
-    className: 'size-5',
-  }
+  submitButtonProps,
+  formClassName,
+  formProps,
+  textClassName,
+  textProps,
+  iconClassName,
+  iconProps,
 } : SignInWithAppleProps) => {
   const router = useRouter();
   const { loading, refreshUser } = useAuth();
@@ -57,17 +57,24 @@ export const SignInWithApple = ({
   };
 
   return (
-    <form onSubmit={handleSignInWithApple} {...formProps}>
+    <form
+      onSubmit={handleSignInWithApple}
+      className={cn('my-4', formClassName)}
+      {...formProps}
+    >
       <SubmitButton
         disabled={isLoading || loading}
         pendingText='Signing in...'
-        {...buttonProps}
+        className={cn('w-full', submitButtonProps?.className)}
+        {...submitButtonProps}
       >
         <div className='flex items-center gap-2'>
-          <FaApple {...iconProps} />
-          <p className={textProps.className} {...textProps}>Sign In with Apple</p>
+          <FaApple className={cn('size-5', iconClassName)} {...iconProps} />
+          <p className={cn('text-[1.0rem]', textClassName)} {...textProps}>
+            Sign In with Apple
+          </p>
         </div>
-      </SubmitButton>
+  </SubmitButton>
       {statusMessage && <StatusMessage message={{ error: statusMessage }} />}
     </form>
   );

src/components/default/auth/buttons/client/sign-in-with-microsoft.tsx

@@ -1,36 +1,36 @@
 'use client';
 import { signInWithMicrosoft } from '@/lib/queries';
-import { StatusMessage, SubmitButton } from '@/components/default/forms';
+import {
+  StatusMessage,
+  SubmitButton,
+  type SubmitButtonProps,
+} from '@/components/default/forms';
 import { useAuth } from '@/lib/hooks/context';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useSupabaseClient } from '@/utils/supabase';
 import { FaMicrosoft } from 'react-icons/fa';
-import { type buttonVariants } from '@/components/ui';
 import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
 
-type SignInWithMicrosoftProps = {
-  buttonProps?: ComponentProps<'button'> & VariantProps<typeof buttonVariants>;
-  formProps?: ComponentProps<'form'>;
-  textProps?: ComponentProps<'p'>;
-  iconProps?: ComponentProps<'svg'>;
+export type SignInWithMicrosoftProps = {
+  submitButtonProps?: SubmitButtonProps;
+  formClassName?: ComponentProps<'form'>['className'];
+  formProps?: Omit<ComponentProps<'form'>, 'className'>;
+  textClassName?: ComponentProps<'p'>['className'];
+  textProps?: Omit<ComponentProps<'p'>, 'className'>;
+  iconClassName?: ComponentProps<'svg'>['className'];
+  iconProps?: Omit<ComponentProps<'svg'>, 'className'>;
 };
 
 export const SignInWithMicrosoft = ({
-  buttonProps = {
-    className: 'w-full cursor-pointer',
-    type: 'submit',
-  },
-  formProps = {
-    className: 'my-4',
-  },
-  textProps = {
-    className: 'text-[1.0rem]',
-  },
-  iconProps = {
-    className: 'size-5',
-  }
+  submitButtonProps,
+  formClassName,
+  formProps,
+  textClassName,
+  textProps,
+  iconClassName,
+  iconProps,
 } : SignInWithMicrosoftProps) => {
   const router = useRouter();
   const { loading, refreshUser } = useAuth();
@@ -57,18 +57,24 @@ export const SignInWithMicrosoft = ({
   };
 
   return (
-    <form onSubmit={handleSignInWithMicrosoft} {...formProps}>
+    <form
+      onSubmit={handleSignInWithMicrosoft}
+      className={cn('my-4', formClassName)}
+      {...formProps}
+    >
       <SubmitButton
         disabled={isLoading || loading}
         pendingText='Signing in...'
-        pendingTextClassName={textProps.className}
-        {...buttonProps}
+        className={cn('w-full', submitButtonProps?.className)}
+        {...submitButtonProps}
       >
         <div className='flex items-center gap-2'>
-          <FaMicrosoft {...iconProps} />
-          <p className={textProps.className} {...textProps}>Sign In with Microsoft</p>
+          <FaMicrosoft className={cn('size-5', iconClassName)} {...iconProps} />
+          <p className={cn('text-[1.0rem]', textClassName)} {...textProps}>
+            Sign In with Microsoft
+          </p>
         </div>
-      </SubmitButton>
+  </SubmitButton>
       {statusMessage && <StatusMessage message={{ error: statusMessage }} />}
     </form>
   );

src/components/default/auth/buttons/server/sign-in-link.tsx

@@ -1,12 +1,11 @@
 'use server';
 import Link from 'next/link';
-import { Button, type buttonVariants } from '@/components/ui';
+import { Button } from '@/components/ui';
 import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
 
-type SignInProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants>;
+type SignInLinkButtonProps = Omit<ComponentProps<typeof Button>, 'asChild'>;
 
-export const SignInLinkButton = async (props: SignInProps) => {
+export const SignInLinkButton = async (props: SignInLinkButtonProps) => {
   return (
     <Button asChild {...props}>
       <Link href='/sign-in'>Sign In</Link>

src/components/default/auth/buttons/server/sign-in-with-apple.tsx

@@ -1,47 +1,32 @@
 'use server';
 import { signInWithApple } from '@/lib/queries';
-import { SubmitButton } from '@/components/default/forms';
-import Image from 'next/image';
-import { type buttonVariants } from '@/components/ui';
-import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import {
+  SubmitButton,
+  type SubmitButtonProps,
+} from '@/components/default/forms';
 import { SupabaseServer } from '@/utils/supabase';
+import { FaApple } from 'react-icons/fa';
+import { type ComponentProps } from 'react';
+import { cn } from '@/lib/utils';
 
-type ButtonProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants>;
-type ImageProps = {
-  src: string;
-  alt: string;
-  className?: string;
-  width?: number;
-  height?: number;
-}
-type FormProps = ComponentProps<'form'>;
-type TextProps = ComponentProps<'p'>;
-type SignInWithAppleProps = {
-  buttonProps?: ButtonProps;
-  imageProps?: ImageProps;
-  formProps?: FormProps;
-  textProps?: TextProps;
+export type SignInWithAppleProps = {
+  submitButtonProps?: SubmitButtonProps;
+  formClassName?: ComponentProps<'form'>['className'];
+  formProps?: Omit<ComponentProps<'form'>, 'className'>;
+  textClassName?: ComponentProps<'p'>['className'];
+  textProps?: Omit<ComponentProps<'p'>, 'className'>;
+  iconClassName?: ComponentProps<'svg'>['className'];
+  iconProps?: Omit<ComponentProps<'svg'>, 'className'>;
 };
 
 export const SignInWithApple = async ({
-  buttonProps = {
-    className: 'w-full cursor-pointer',
-    type: 'submit',
-  },
-  imageProps = {
-    src: '/icons/auth/apple.svg',
-    alt: 'Apple',
-    className: 'invert-75 dark:invert-25',
-    width: 24,
-    height: 24,
-  },
-  formProps = {
-    className: 'my-4',
-  },
-  textProps = {
-    className: 'text-[1.0rem]',
-  },
+  submitButtonProps,
+  formClassName,
+  formProps,
+  textClassName,
+  textProps,
+  iconClassName,
+  iconProps,
 } : SignInWithAppleProps) => {
   const supabase = await SupabaseServer();
 
@@ -49,28 +34,30 @@ export const SignInWithApple = async ({
     try {
       if (!supabase) throw new Error('Supabase client not found');
       const result = await signInWithApple(supabase);
-      if (result.error) throw new Error(`Error Signing in with Apple: ${result.error.message}`);
-      if (result.data.url) window.location.href = result.data.url;
+      if (result.error)
+        throw new Error(`Error signing in with Microsoft: ${result.error.message}`);
+      else if (result.data.url) window.location.href = result.data.url;
     } catch (error) {
       console.error(error);
     }
   };
 
   return (
-    <form action={handleSignInWithApple} {...formProps}>
+    <form
+      action={handleSignInWithApple}
+      className={cn('my-4', formClassName)}
+      {...formProps}
+    >
       <SubmitButton
         pendingText='Signing in...'
-        {...buttonProps}
+        className={cn('w-full', submitButtonProps?.className)}
+        {...submitButtonProps}
       >
         <div className='flex items-center gap-2'>
-          <Image
-            src={imageProps.src}
-            alt={imageProps.alt}
-            className={imageProps.className}
-            width={imageProps.width}
-            height={imageProps.height}
-          />
-          <p className={textProps.className} {...textProps}>Sign In with Apple</p>
+          <FaApple className={cn('size-5', iconClassName)} {...iconProps} />
+          <p className={cn('text-[1.0rem]', textClassName)} {...textProps}>
+            Sign In with Apple
+          </p>
         </div>
       </SubmitButton>
     </form>

src/components/default/auth/buttons/server/sign-in-with-microsoft.tsx

@@ -1,47 +1,32 @@
 'use server';
 import { signInWithMicrosoft } from '@/lib/queries';
-import { SubmitButton } from '@/components/default/forms';
-import Image from 'next/image';
-import { type buttonVariants } from '@/components/ui';
-import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import {
+  SubmitButton,
+  type SubmitButtonProps,
+} from '@/components/default/forms';
 import { SupabaseServer } from '@/utils/supabase';
+import { FaMicrosoft } from 'react-icons/fa';
+import { type ComponentProps } from 'react';
+import { cn } from '@/lib/utils';
 
-type ButtonProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants>;
-type ImageProps = {
-  src: string;
-  alt: string;
-  className?: string;
-  width?: number;
-  height?: number;
-}
-type FormProps = ComponentProps<'form'>;
-type TextProps = ComponentProps<'p'>;
-type SignInWithMicrosoftProps = {
-  buttonProps?: ButtonProps;
-  imageProps?: ImageProps;
-  formProps?: FormProps;
-  textProps?: TextProps;
+export type SignInWithMicrosoftProps = {
+  submitButtonProps?: SubmitButtonProps;
+  formClassName?: ComponentProps<'form'>['className'];
+  formProps?: Omit<ComponentProps<'form'>, 'className'>;
+  textClassName?: ComponentProps<'p'>['className'];
+  textProps?: Omit<ComponentProps<'p'>, 'className'>;
+  iconClassName?: ComponentProps<'svg'>['className'];
+  iconProps?: Omit<ComponentProps<'svg'>, 'className'>;
 };
 
 export const SignInWithMicrosoft = async ({
-  buttonProps = {
-    className: 'w-full cursor-pointer',
-    type: 'submit',
-  },
-  imageProps = {
-    src: '/icons/auth/microsoft.svg',
-    alt: 'Microsoft',
-    className: 'invert-75 dark:invert-25',
-    width: 24,
-    height: 24,
-  },
-  formProps = {
-    className: 'my-4',
-  },
-  textProps = {
-    className: 'text-[1.0rem]',
-  },
+  submitButtonProps,
+  formClassName,
+  formProps,
+  textClassName,
+  textProps,
+  iconClassName,
+  iconProps,
 } : SignInWithMicrosoftProps) => {
   const supabase = await SupabaseServer();
 
@@ -49,28 +34,30 @@ export const SignInWithMicrosoft = async ({
     try {
       if (!supabase) throw new Error('Supabase client not found');
       const result = await signInWithMicrosoft(supabase);
-      if (result.error) throw new Error(`Error Signing in with Microsoft: ${result.error.message}`);
-      if (result.data.url) window.location.href = result.data.url;
+      if (result.error)
+        throw new Error(`Error signing in with Microsoft: ${result.error.message}`);
+      else if (result.data.url) window.location.href = result.data.url;
     } catch (error) {
       console.error(error);
     }
   };
 
   return (
-    <form action={handleSignInWithMicrosoft} {...formProps}>
+    <form
+      action={handleSignInWithMicrosoft}
+      className={cn('my-4', formClassName)}
+      {...formProps}
+    >
       <SubmitButton
         pendingText='Signing in...'
-        {...buttonProps}
+        className={cn('w-full', submitButtonProps?.className)}
+        {...submitButtonProps}
       >
         <div className='flex items-center gap-2'>
-          <Image
-            src={imageProps.src}
-            alt={imageProps.alt}
-            className={imageProps.className}
-            width={imageProps.width}
-            height={imageProps.height}
-          />
-          <p className={textProps.className} {...textProps}>Sign In with Microsoft</p>
+          <FaMicrosoft className={cn('size-5', iconClassName)} {...iconProps} />
+          <p className={cn('text-[1.0rem]', textClassName)} {...textProps}>
+            Sign In with Microsoft
+          </p>
         </div>
       </SubmitButton>
     </form>

src/components/default/auth/cards/client/sign-in.tsx

@@ -13,9 +13,6 @@ import { StatusMessage, SubmitButton } from '@/components/default/forms';
 import {
   Card,
   CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
   Form,
   FormControl,
   FormField,
@@ -31,8 +28,12 @@ import {
 } from '@/components/ui';
 import {
   SignInWithApple,
-  SignInWithMicrosoft
+  type SignInWithAppleProps,
+  SignInWithMicrosoft,
+  type SignInWithMicrosoftProps,
 } from '@/components/default/auth/buttons/client';
+import { type ComponentProps } from 'react';
+import { cn } from '@/lib/utils';
 
 const signInFormSchema = z.object({
   email: z.string().email({
@@ -63,7 +64,47 @@ const signUpFormSchema = z
     path: ['confirmPassword'],
   });
 
-export const SignInCard = () => {
+type SignInCardProps = {
+  containerClassName?: ComponentProps<typeof Card>['className'];
+  containerProps?: Omit<ComponentProps<typeof Card>, 'className'>;
+  tabsClassName?: ComponentProps<typeof Tabs>['className'];
+  tabsProps?: Omit<ComponentProps<typeof Tabs>, 'className'>;
+  tabsListClassName?: ComponentProps<typeof TabsList>['className'];
+  tabsListProps?: Omit<ComponentProps<typeof TabsList>, 'className'>;
+  tabsTriggerClassName?: ComponentProps<typeof TabsTrigger>['className'];
+  tabsTriggerProps?: Omit<ComponentProps<typeof TabsTrigger>, 'className' | 'value'>;
+  cardClassName?: ComponentProps<typeof Card>['className'];
+  cardProps?: Omit<ComponentProps<typeof Card>, 'className'>;
+  formClassName?: ComponentProps<'form'>['className'];
+  formProps?: Omit<ComponentProps<'form'>, 'className' | 'onSubmit'>;
+  formLabelClassName?: ComponentProps<typeof FormLabel>['className'];
+  formLabelProps?: Omit<ComponentProps<typeof FormLabel>, 'className'>;
+  submitButtonProps?: Omit<ComponentProps<typeof SubmitButton>,
+    'pendingText' | 'disabled'>;
+  signInWithAppleProps?: SignInWithAppleProps;
+  signInWithMicrosoftProps?: SignInWithMicrosoftProps;
+};
+
+export const SignInCard = ({
+  containerClassName,
+  containerProps,
+  tabsClassName,
+  tabsProps = { defaultValue: 'sign-in' },
+  tabsListClassName,
+  tabsListProps,
+  tabsTriggerClassName,
+  tabsTriggerProps,
+  cardClassName,
+  cardProps,
+  formClassName,
+  formProps,
+  formLabelClassName,
+  formLabelProps,
+  submitButtonProps,
+  signInWithAppleProps,
+  signInWithMicrosoftProps,
+}: SignInCardProps) => {
+
   const router = useRouter();
   const { isAuthenticated, loading, refreshUser } = useAuth();
   const [statusMessage, setStatusMessage] = useState('');
@@ -71,10 +112,7 @@ export const SignInCard = () => {
 
   const signInForm = useForm<z.infer<typeof signInFormSchema>>({
     resolver: zodResolver(signInFormSchema),
-    defaultValues: {
-      email: '',
-      password: '',
-    },
+    defaultValues: { email: '', password: '' },
   });
 
   const signUpForm = useForm<z.infer<typeof signUpFormSchema>>({
@@ -127,198 +165,329 @@ export const SignInCard = () => {
   };
 
   return (
-    <Tabs defaultValue='sign-in'>
-      <TabsList>
-        <TabsTrigger value='sign-in'>Sign In</TabsTrigger>
-        <TabsTrigger value='sign-up'>Sign Up</TabsTrigger>
-      </TabsList>
-      <TabsContent value='sign-in'>
-        <Card className='min-w-xs md:min-w-sm max-w-lg'>
-          <CardHeader>
-            <CardTitle className=''>
-              Sign In
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Form {...signInForm}>
-              <form
-                onSubmit={signInForm.handleSubmit(handleSignIn)}
-                className=''
-              >
-                <FormField
-                  control={signInForm.control}
-                  name='email'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className=''>Email</FormLabel>
-                      <FormControl>
-                        <Input
-                          type='email'
-                          placeholder='you@example.com'
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={signInForm.control}
-                  name='password'
-                  render={({ field }) => (
-                    <FormItem>
-                      <div className='flex justify-between'>
-                        <FormLabel className=''>Password</FormLabel>
-                        <Link
-                          href='/forgot-password'
+    <Card
+      className={cn('p-4 bg-card/25 min-h-[720px]', containerClassName)}
+      {...containerProps}
+    >
+      <Tabs
+        className={cn('items-center', tabsClassName)}
+        {...tabsProps}
+      >
+        <TabsList
+          className={cn('py-6', tabsListClassName)}
+          {...tabsListProps}
+        >
+          <TabsTrigger
+            value='sign-in'
+            className={cn(
+              'p-6 text-2xl font-bold cursor-pointer',
+              tabsTriggerClassName
+            )}
+            {...tabsTriggerProps}
+          >
+            Sign In
+          </TabsTrigger>
+          <TabsTrigger
+            value='sign-up'
+            className={cn(
+              'p-6 text-2xl font-bold cursor-pointer',
+              tabsTriggerClassName,
+            )}
+            {...tabsTriggerProps}
+          >
+            Sign Up
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value='sign-in'>
+          <Card
+            className={cn(
+              'min-w-xs sm:min-w-sm bg-card/50',
+              cardClassName,
+            )}
+            {...cardProps}
+          >
+            <CardContent>
+              <Form {...signInForm}>
+                <form
+                  onSubmit={signInForm.handleSubmit(handleSignIn)}
+                  className={cn('flex flex-col space-y-6', formClassName)}
+                  {...formProps}
+                >
+                  <FormField
+                    control={signInForm.control}
+                    name='email'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel
+                          className={cn('text-xl', formLabelClassName)}
+                          {...formLabelProps}>
+                          Email
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            type='email'
+                            placeholder='you@example.com'
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={signInForm.control}
+                    name='password'
+                    render={({ field }) => (
+                      <FormItem>
+                        <div className='flex justify-between'>
+                          <FormLabel
+                            className={cn('text-xl', formLabelClassName)}
+                            {...formLabelProps}
+                          >
+                            Password
+                          </FormLabel>
+                          <Link
+                            href='/forgot-password'
+                          >
+                            Forgot Password?
+                          </Link>
+                        </div>
+                        <FormControl>
+                          <Input
+                            type='password'
+                            placeholder='Your password'
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  {statusMessage &&
+                    (statusMessage.includes('Error') ||
+                    statusMessage.includes('error') ||
+                    statusMessage.includes('failed') ||
+                    statusMessage.includes('invalid') ? (
+                      <StatusMessage message={{ error: statusMessage }} />
+                    ) : (
+                      <StatusMessage message={{ message: statusMessage }} />
+                  ))}
+                  <SubmitButton
+                    disabled={loading}
+                    pendingText='Signing In...'
+                    className={cn(
+                      'text-lg font-semibold w-2/3 mx-auto',
+                      submitButtonProps?.className
+                    )}
+                    {...submitButtonProps}
+                  >
+                    Sign In
+                  </SubmitButton>
+                </form>
+              </Form>
+              <div className='flex items-center w-full gap-4 mt-4'>
+                <Separator className='flex-1 bg-muted-foreground/50 py-0.5' />
+                <span className='text-muted-foreground'>or</span>
+                <Separator className='flex-1 bg-muted-foreground/50 py-0.5' />
+              </div>
+              <SignInWithMicrosoft
+                submitButtonProps = {{
+                  className: cn(
+                    'flex w-5/6 m-auto',
+                    signInWithMicrosoftProps?.submitButtonProps?.className),
+                }}
+                textClassName={cn(
+                  'text-lg',
+                  signInWithMicrosoftProps?.textClassName,
+                )}
+                iconClassName={cn(
+                  'size-6',
+                  signInWithMicrosoftProps?.iconClassName,
+                )}
+                {...signInWithMicrosoftProps}
+              />
+              <SignInWithApple
+                submitButtonProps = {{
+                  className: cn(
+                    'flex w-5/6 m-auto',
+                    signInWithAppleProps?.submitButtonProps?.className),
+                }}
+                textClassName={cn(
+                  'text-lg',
+                  signInWithAppleProps?.textClassName,
+                )}
+                iconClassName={cn(
+                  'size-6',
+                  signInWithAppleProps?.iconClassName,
+                )}
+                {...signInWithAppleProps}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value='sign-up'>
+          <Card
+            className={cn(
+              'min-w-xs sm:min-w-sm bg-card/50',
+              cardClassName,
+            )}
+            {...cardProps}
+          >
+            <CardContent>
+              <Form {...signUpForm}>
+                <form
+                  className={cn('flex flex-col space-y-6', formClassName)}
+                  onSubmit={signUpForm.handleSubmit(handleSignUp)}
+                  {...formProps}
+                >
+                  <FormField
+                    control={signUpForm.control}
+                    name='name'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel
+                          className={cn('text-xl', formLabelClassName)}
+                          {...formLabelProps}
                         >
-                          Forgot Password?
-                        </Link>
-                      </div>
-                      <FormControl>
-                        <Input
-                          type='password'
-                          placeholder='Your password'
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                {statusMessage &&
-                  (statusMessage.includes('Error') ||
-                  statusMessage.includes('error') ||
-                  statusMessage.includes('failed') ||
-                  statusMessage.includes('invalid') ? (
-                    <StatusMessage message={{ error: statusMessage }} />
-                  ) : (
-                    <StatusMessage message={{ message: statusMessage }} />
-                ))}
-                <SubmitButton
-                  disabled={loading}
-                  pendingText='Signing In...'
-                >
-                  Sign In
-                </SubmitButton>
-              </form>
-            </Form>
-            <div className='flex items-center w-full gap-4'>
-              <Separator className='flex-1 bg-accent py-0.5' />
-              <span className='text-sm text-muted-foreground'>or</span>
-              <Separator className='flex-1 bg-accent py-0.5' />
-            </div>
-            <SignInWithMicrosoft />
-            <SignInWithApple />
-          </CardContent>
-        </Card>
-      </TabsContent>
-      <TabsContent value='sign-up'>
-        <Card className='min-w-xs md:min-w-sm max-w-lg'>
-          <CardHeader>
-            <CardTitle className=''>
-              Sign Up
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Form {...signUpForm}>
-              <form
-                onSubmit={signUpForm.handleSubmit(handleSignUp)}
-                className=''
-              >
-                <FormField
-                  control={signUpForm.control}
-                  name='name'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className=''>Name</FormLabel>
-                      <FormControl>
-                        <Input
-                          type='text'
-                          placeholder='Full Name'
-                          {...field}
-                        />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={signUpForm.control}
-                  name='email'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className=''>Email</FormLabel>
-                      <FormControl>
-                        <Input
-                          type='email'
-                          placeholder='you@example.com'
-                          {...field}
-                        />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={signUpForm.control}
-                  name='password'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className=''>Password</FormLabel>
-                      <FormControl>
-                        <Input
-                          type='password'
-                          placeholder='Your password'
-                          {...field}
-                        />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={signUpForm.control}
-                  name='confirmPassword'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className=''>Confirm Passsword</FormLabel>
-                      <FormControl>
-                        <Input
-                          type='password'
-                          placeholder='Confirm your password'
-                          {...field}
-                        />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-                {statusMessage &&
-                  (statusMessage.includes('Error') ||
-                  statusMessage.includes('error') ||
-                  statusMessage.includes('failed') ||
-                  statusMessage.includes('invalid') ? (
-                    <StatusMessage message={{ error: statusMessage }} />
-                  ) : (
-                    <StatusMessage message={{ success: statusMessage }} />
-                ))}
-                <SubmitButton
-                  disabled={loading}
-                  pendingText='Signing Up...'
-                >
-                  Sign Up
-                </SubmitButton>
-              </form>
-            </Form>
-            <div className='flex items-center w-full gap-4'>
-              <Separator className='flex-1 bg-accent py-0.5' />
-              <span className='text-sm text-muted-foreground'>or</span>
-              <Separator className='flex-1 bg-accent py-0.5' />
-            </div>
-            <SignInWithMicrosoft />
-            <SignInWithApple />
-          </CardContent>
-        </Card>
-      </TabsContent>
-    </Tabs>
+                          Name
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            type='text'
+                            placeholder='Full Name'
+                            {...field}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={signUpForm.control}
+                    name='email'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel
+                          className={cn('text-xl', formLabelClassName)}
+                          {...formLabelProps}
+                        >
+                          Email
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            type='email'
+                            placeholder='you@example.com'
+                            {...field}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={signUpForm.control}
+                    name='password'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel
+                          className={cn('text-xl', formLabelClassName)}
+                          {...formLabelProps}
+                        >
+                          Password
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            type='password'
+                            placeholder='Your password'
+                            {...field}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={signUpForm.control}
+                    name='confirmPassword'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel
+                          className={cn('text-xl', formLabelClassName)}
+                          {...formLabelProps}
+                        >
+                          Confirm Passsword
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            type='password'
+                            placeholder='Confirm your password'
+                            {...field}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  {statusMessage &&
+                    (statusMessage.includes('Error') ||
+                    statusMessage.includes('error') ||
+                    statusMessage.includes('failed') ||
+                    statusMessage.includes('invalid') ? (
+                      <StatusMessage message={{ error: statusMessage }} />
+                    ) : (
+                      <StatusMessage message={{ success: statusMessage }} />
+                  ))}
+                  <SubmitButton
+                    disabled={loading}
+                    pendingText='Signing Up...'
+                    className={cn(
+                      'text-lg font-semibold w-2/3 mx-auto',
+                      submitButtonProps?.className
+                    )}
+                    {...submitButtonProps}
+                  >
+                    Sign Up
+                  </SubmitButton>
+                </form>
+              </Form>
+              <div className='flex items-center w-full gap-4 mt-4'>
+                <Separator className='flex-1 bg-accent py-0.5' />
+                <span className='text-sm text-muted-foreground'>or</span>
+                <Separator className='flex-1 bg-accent py-0.5' />
+              </div>
+              <SignInWithMicrosoft
+                submitButtonProps = {{
+                  className: cn(
+                    'flex w-5/6 m-auto',
+                    signInWithMicrosoftProps?.submitButtonProps?.className),
+                }}
+                textClassName={cn(
+                  'text-lg',
+                  signInWithMicrosoftProps?.textClassName,
+                )}
+                iconClassName={cn(
+                  'size-6',
+                  signInWithMicrosoftProps?.iconClassName,
+                )}
+                {...signInWithMicrosoftProps}
+              />
+              <SignInWithApple
+                submitButtonProps = {{
+                  className: cn(
+                    'flex w-5/6 m-auto',
+                    signInWithAppleProps?.submitButtonProps?.className),
+                }}
+                textClassName={cn(
+                  'text-lg',
+                  signInWithAppleProps?.textClassName,
+                )}
+                iconClassName={cn(
+                  'size-6',
+                  signInWithAppleProps?.iconClassName,
+                )}
+                {...signInWithAppleProps}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </Card>
   );
-
 };
 

src/components/default/forms/index.tsx

@@ -1,2 +1,2 @@
 export { StatusMessage } from './status-message';
-export { SubmitButton } from './submit-button';
+export { SubmitButton, type SubmitButtonProps } from './submit-button';

src/components/default/forms/status-message.tsx

@@ -1,25 +1,52 @@
+import { type ComponentProps } from 'react';
+import { cn } from '@/lib/utils';
+
 type Message =
 | { success: string}
 | { error: string}
 | { message: string}
 
-export const StatusMessage = ({message}: {message: Message}) => {
+type StatusMessageProps = {
+  message: Message;
+  containerClassName?: ComponentProps<'div'>['className'];
+  containerProps?: Omit<ComponentProps<'div'>, 'className'>;
+  textClassName?: ComponentProps<'div'>['className'];
+  textProps?: Omit<ComponentProps<'div'>, 'className'>;
+};
+
+export const StatusMessage = ({
+  message,
+  containerClassName,
+  containerProps,
+  textClassName,
+  textProps,
+}: StatusMessageProps) => {
   return (
-    <div className='flex flex-col gap-2 w-full
-        text-sm bg-accent rounded-md p-2 px-4'
+    <div
+      className={cn(
+        'flex flex-col gap-2 w-full\
+          text-sm bg-accent rounded-md p-2 px-4',
+        containerClassName,
+      )}
+      {...containerProps}
     >
       {'success' in message && (
-        <div className='dark:text-green-500 text-green-700'>
+        <div className={cn(
+          'dark:text-green-500 text-green-700',
+          textClassName
+        )}
+          {...textProps}
+        >
           {message.success}
         </div>
       )}
       {'error' in message && (
-        <div className='text-destructive'>
+        <div className={cn('text-destructive', textClassName)}>
           {message.error}
         </div>
       )}
       {'message' in message && (
-        <div>
+        <div className={textClassName}>
           {message.message}
         </div>
       )}

src/components/default/forms/submit-button.tsx

@@ -1,36 +1,52 @@
 'use client';
-import { Button, type buttonVariants } from '@/components/ui';
+import { Button } from '@/components/ui';
 import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
 import { useFormStatus } from 'react-dom';
 import { Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
-type SubmitButtonProps = ComponentProps<'button'> &
-VariantProps<typeof buttonVariants> & {
+export type SubmitButtonProps = Omit<
+  ComponentProps<typeof Button>,
+  'type' | 'aria-disabled' | 'className',
+> & {
+  className?: ComponentProps<typeof Button>['className'];
   pendingText?: string;
-  loaderClassName?: ComponentProps<'div'>['className'];
   pendingTextClassName?: ComponentProps<'p'>['className'];
+  pendingTextProps?: Omit<ComponentProps<'p'>, 'className'>;
+  loaderClassName?: ComponentProps<typeof Loader2>['className'];
+  loaderProps?: Omit<ComponentProps<typeof Loader2>, 'className'>;
 };
 
 export const SubmitButton = ({
   children,
+  className,
   pendingText = 'Submitting...',
-  loaderClassName = 'mr-2 h-4 w-4 animate-spin',
-  pendingTextClassName = 'text-sm font-medium',
+  pendingTextClassName,
+  pendingTextProps,
+  loaderClassName,
+  loaderProps,
   ...props
 }: SubmitButtonProps) => {
   const { pending } = useFormStatus();
   return (
     <Button
-      className='cursor-pointer'
+      className={cn('cursor-pointer', className)}
       type='submit'
       aria-disabled={pending}
       {...props}
     >
       {pending || props.disabled ? (
         <>
-          <Loader2 className={loaderClassName} />
-          <p className={pendingTextClassName}>{pendingText}</p>
+          <Loader2
+            className={cn('mr-2 h-4 w-4 animate-spin', loaderClassName)}
+            {...loaderProps}
+          />
+          <p
+            className={cn('text-sm font-medium', pendingTextClassName)}
+            {...pendingTextProps}
+          >
+            {pendingText}
+          </p>
         </>
       ) : (
           children

src/lib/hooks/context/use-theme.tsx

@@ -1,40 +1,51 @@
 'use client';
-import * as React from 'react';
+import {
+  useEffect,
+  useState,
+  type ComponentProps,
+} from 'react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import { Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { Button } from '@/components/ui';
+import { cn } from '@/lib/utils';
 
 const ThemeProvider = ({
   children,
   ...props
-}: React.ComponentProps<typeof NextThemesProvider>) => {
-  const [mounted, setMounted] = React.useState(false);
+}: ComponentProps<typeof NextThemesProvider>) => {
 
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true) }, []);
 
   if (!mounted) return null;
-
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 };
 
-type ThemeToggleProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+type ThemeToggleProps = {
   size?: number;
+  buttonClassName?: ComponentProps<typeof Button>['className'];
+  buttonProps?: Omit<ComponentProps<typeof Button>, 'className' | 'onClick'>;
 };
 
-const ThemeToggle = ({ size = 1, ...props }: ThemeToggleProps) => {
-  const { setTheme, resolvedTheme } = useTheme();
-  const [mounted, setMounted] = React.useState(false);
+const ThemeToggle = ({
+  size = 1,
+  buttonClassName,
+  buttonProps = {
+    variant: 'outline',
+    size: 'icon',
+  },
+}: ThemeToggleProps) => {
 
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true) }, []);
 
   if (!mounted) {
     return (
-      <Button variant='outline' size='icon' {...props}>
+      <Button className={buttonClassName} {...buttonProps}>
         <span style={{ height: `${size}rem`, width: `${size}rem` }} />
       </Button>
     );
@@ -47,11 +58,9 @@ const ThemeToggle = ({ size = 1, ...props }: ThemeToggleProps) => {
 
   return (
     <Button
-      variant='outline'
-      size='icon'
-      className='cursor-pointer'
+      className={cn('cursor-pointer', buttonClassName)}
       onClick={toggleTheme}
-      {...props}
+      {...buttonProps}
     >
       <Sun
         style={{ height: `${size}rem`, width: `${size}rem` }}
@@ -61,7 +70,6 @@ const ThemeToggle = ({ size = 1, ...props }: ThemeToggleProps) => {
         style={{ height: `${size}rem`, width: `${size}rem` }}
         className='absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100'
       />
-      <span className='sr-only'>Toggle theme</span>
     </Button>
   );
 };

src/lib/hooks/context/use-tv-mode.tsx

@@ -2,9 +2,9 @@
 import Image from 'next/image';
 import React, { createContext, useContext, useState } from 'react';
 import type { ReactNode } from 'react';
-import { Button, type buttonVariants } from '@/components/ui';
+import { Button } from '@/components/ui';
 import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
 
 type TVModeContextProps = {
   tvMode: boolean;
@@ -12,11 +12,9 @@ type TVModeContextProps = {
 };
 
 type TVToggleProps = {
-  className?: ComponentProps<'button'>['className'];
-  buttonSize?: VariantProps<typeof buttonVariants>['size'];
-  buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
-  imageWidth?: number;
-  imageHeight?: number;
+  buttonClassName?: ComponentProps<typeof Button>['className'];
+  buttonProps?: Omit<ComponentProps<typeof Button>, 'className'>;
+  size: number;
 };
 
 const TVModeContext = createContext<TVModeContextProps | undefined>(undefined);
@@ -42,33 +40,33 @@ const useTVMode = () => {
 };
 
 const TVToggle = ({
-  className = 'my-auto cursor-pointer',
-  buttonSize = 'default',
-  buttonVariant = 'link',
-  imageWidth = 25,
-  imageHeight = 25,
+  buttonClassName,
+  buttonProps = {
+    variant: 'outline',
+    size: 'default',
+  },
+  size = 25,
 }: TVToggleProps) => {
   const { tvMode, toggleTVMode } = useTVMode();
   return (
     <Button
       onClick={toggleTVMode}
-      className={className}
-      size={buttonSize}
-      variant={buttonVariant}
+      className={cn('my-auto cursor-pointer', buttonClassName)}
+      {...buttonProps}
     >
       {tvMode ? (
         <Image
           src='/icons/tv/exit.svg'
           alt='Exit TV Mode'
-          width={imageWidth}
-          height={imageHeight}
+          width={size}
+          height={size}
         />
       ) : (
         <Image
           src='/icons/tv/enter.svg'
-          alt='Exit TV Mode'
-          width={imageWidth}
-          height={imageHeight}
+          alt='Enter TV Mode'
+          width={size}
+          height={size}
         />
       )}
     </Button>

src/lib/utils.ts

@@ -16,5 +16,5 @@ export const ccn = ({
   on: string;
   off: string;
 }) => {
-  return className + ' ' + (context ? on : off);
+  return twMerge(className, context ? on : off);
 };

src/styles/globals.css

@@ -9,10 +9,6 @@
 }
 
 @theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -28,6 +24,7 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -44,102 +41,120 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
 }
 
 :root {
-  --background: oklch(0.9785 0.0045 314.8050);
-  --foreground: oklch(0.3710 0.0333 301.6287);
-  --card: oklch(0.9940 0 0);
-  --card-foreground: oklch(0.3710 0.0333 301.6287);
-  --popover: oklch(0.9940 0 0);
-  --popover-foreground: oklch(0.3710 0.0333 301.6287);
-  --primary: oklch(0.4868 0.1488 286.5771);
-  --primary-foreground: oklch(0.9785 0.0045 314.8050);
-  --secondary: oklch(0.9139 0.0448 291.0467);
-  --secondary-foreground: oklch(0.3008 0.0773 288.1551);
-  --muted: oklch(0.8930 0.0149 312.2335);
-  --muted-foreground: oklch(0.5361 0.0391 305.8579);
-  --accent: oklch(0.8514 0.0535 342.1042);
-  --accent-foreground: oklch(0.3328 0.0528 311.4628);
-  --destructive: oklch(0.6984 0.1170 47.0382);
-  --destructive-foreground: oklch(0.9785 0.0045 314.8050);
-  --border: oklch(0.8488 0.0244 313.1102);
-  --input: oklch(0.9352 0.0136 314.7562);
-  --ring: oklch(0.4868 0.1488 286.5771);
-  --chart-1: oklch(0.4868 0.1488 286.5771);
-  --chart-2: oklch(0.8514 0.0535 342.1042);
-  --chart-3: oklch(0.7388 0.0664 194.5709);
-  --chart-4: oklch(0.9197 0.1140 104.6226);
-  --chart-5: oklch(0.7409 0.0895 280.3986);
-  --sidebar: oklch(0.9569 0.0090 314.7812);
-  --sidebar-foreground: oklch(0.3710 0.0333 301.6287);
-  --sidebar-primary: oklch(0.4868 0.1488 286.5771);
-  --sidebar-primary-foreground: oklch(0.9785 0.0045 314.8050);
-  --sidebar-accent: oklch(0.8514 0.0535 342.1042);
-  --sidebar-accent-foreground: oklch(0.3328 0.0528 311.4628);
-  --sidebar-border: oklch(0.8759 0.0218 316.4501);
-  --sidebar-ring: oklch(0.4868 0.1488 286.5771);
+  --background: oklch(0.9227 0.0011 17.1793);
+  --foreground: oklch(0.2840 0.0220 262.4967);
+  --card: oklch(0.9699 0.0013 106.4238);
+  --card-foreground: oklch(0.2840 0.0220 262.4967);
+  --popover: oklch(0.9699 0.0013 106.4238);
+  --popover-foreground: oklch(0.2840 0.0220 262.4967);
+  --primary: oklch(0.6378 0.1247 281.2150);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.8682 0.0026 48.7143);
+  --secondary-foreground: oklch(0.4507 0.0152 255.5845);
+  --muted: oklch(0.9227 0.0011 17.1793);
+  --muted-foreground: oklch(0.5551 0.0147 266.6154);
+  --accent: oklch(0.9409 0.0164 322.6966);
+  --accent-foreground: oklch(0.3774 0.0189 260.6754);
+  --destructive: oklch(0.6322 0.1310 21.4751);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0.8682 0.0026 48.7143);
+  --input: oklch(0.8682 0.0026 48.7143);
+  --ring: oklch(0.6378 0.1247 281.2150);
+  --chart-1: oklch(0.6378 0.1247 281.2150);
+  --chart-2: oklch(0.5608 0.1433 283.1275);
+  --chart-3: oklch(0.5008 0.1358 283.9499);
+  --chart-4: oklch(0.4372 0.1108 283.4322);
+  --chart-5: oklch(0.3928 0.0817 282.8932);
+  --sidebar: oklch(0.8682 0.0026 48.7143);
+  --sidebar-foreground: oklch(0.2840 0.0220 262.4967);
+  --sidebar-primary: oklch(0.6378 0.1247 281.2150);
+  --sidebar-primary-foreground: oklch(1.0000 0 0);
+  --sidebar-accent: oklch(0.9409 0.0164 322.6966);
+  --sidebar-accent-foreground: oklch(0.3774 0.0189 260.6754);
+  --sidebar-border: oklch(0.8682 0.0026 48.7143);
+  --sidebar-ring: oklch(0.6378 0.1247 281.2150);
   --font-sans: Inter, sans-serif;
-  --font-serif: "Lora", Georgia, serif;
-  --font-mono: "Fira Code", "Courier New", monospace;
-  --radius: 0.5rem;
-  --shadow-2xs: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.03);
-  --shadow-xs: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.03);
-  --shadow-sm: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.06), 1px 1px 2px 0px hsl(0 0% 10.1961% / 0.06);
-  --shadow: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.06), 1px 1px 2px 0px hsl(0 0% 10.1961% / 0.06);
-  --shadow-md: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.06), 1px 2px 4px 0px hsl(0 0% 10.1961% / 0.06);
-  --shadow-lg: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.06), 1px 4px 6px 0px hsl(0 0% 10.1961% / 0.06);
-  --shadow-xl: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.06), 1px 8px 10px 0px hsl(0 0% 10.1961% / 0.06);
-  --shadow-2xl: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.15);
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 1.0rem;
+  --shadow-2xs: 2px 2px 10px 4px hsl(240 1.9608% 60% / 0.09);
+  --shadow-xs: 2px 2px 10px 4px hsl(240 1.9608% 60% / 0.09);
+  --shadow-sm: 2px 2px 10px 4px hsl(240 1.9608% 60% / 0.18), 2px 1px 2px 3px hsl(240 1.9608% 60% / 0.18);
+  --shadow: 2px 2px 10px 4px hsl(240 1.9608% 60% / 0.18), 2px 1px 2px 3px hsl(240 1.9608% 60% / 0.18);
+  --shadow-md: 2px 2px 10px 4px hsl(240 1.9608% 60% / 0.18), 2px 2px 4px 3px hsl(240 1.9608% 60% / 0.18);
+  --shadow-lg: 2px 2px 10px 4px hsl(240 1.9608% 60% / 0.18), 2px 4px 6px 3px hsl(240 1.9608% 60% / 0.18);
+  --shadow-xl: 2px 2px 10px 4px hsl(240 1.9608% 60% / 0.18), 2px 8px 10px 3px hsl(240 1.9608% 60% / 0.18);
+  --shadow-2xl: 2px 2px 10px 4px hsl(240 1.9608% 60% / 0.45);
   --tracking-normal: 0em;
   --spacing: 0.25rem;
 }
 
 .dark {
-  --background: oklch(0.2213 0.0228 309.2819);
-  --foreground: oklch(0.9100 0.0260 308.1435);
-  --card: oklch(0.2671 0.0372 295.2445);
-  --card-foreground: oklch(0.9100 0.0260 308.1435);
-  --popover: oklch(0.2671 0.0372 295.2445);
-  --popover-foreground: oklch(0.9100 0.0260 308.1435);
-  --primary: oklch(0.6405 0.1338 286.4998);
-  --primary-foreground: oklch(0.2213 0.0228 309.2819);
-  --secondary: oklch(0.4071 0.0776 288.3025);
-  --secondary-foreground: oklch(0.9100 0.0260 308.1435);
-  --muted: oklch(0.2630 0.0340 310.8818);
-  --muted-foreground: oklch(0.7026 0.0304 313.2720);
-  --accent: oklch(0.3328 0.0528 311.4628);
-  --accent-foreground: oklch(0.8076 0.0881 341.1289);
-  --destructive: oklch(0.7501 0.1053 47.2117);
-  --destructive-foreground: oklch(0.2213 0.0228 309.2819);
-  --border: oklch(0.3139 0.0379 309.3053);
-  --input: oklch(0.2913 0.0360 305.8978);
-  --ring: oklch(0.6405 0.1338 286.4998);
-  --chart-1: oklch(0.6405 0.1338 286.4998);
-  --chart-2: oklch(0.8076 0.0881 341.1289);
-  --chart-3: oklch(0.7388 0.0664 194.5709);
-  --chart-4: oklch(0.9197 0.1140 104.6226);
-  --chart-5: oklch(0.4868 0.1488 286.5771);
-  --sidebar: oklch(0.2039 0.0232 309.1750);
-  --sidebar-foreground: oklch(0.9100 0.0260 308.1435);
-  --sidebar-primary: oklch(0.6405 0.1338 286.4998);
-  --sidebar-primary-foreground: oklch(0.2213 0.0228 309.2819);
-  --sidebar-accent: oklch(0.3328 0.0528 311.4628);
-  --sidebar-accent-foreground: oklch(0.8076 0.0881 341.1289);
-  --sidebar-border: oklch(0.2913 0.0360 305.8978);
-  --sidebar-ring: oklch(0.6405 0.1338 286.4998);
+  --background: oklch(0.2236 0.0049 67.5717);
+  --foreground: oklch(0.9301 0.0075 260.7315);
+  --card: oklch(0.2793 0.0057 56.1503);
+  --card-foreground: oklch(0.9301 0.0075 260.7315);
+  --popover: oklch(0.2793 0.0057 56.1503);
+  --popover-foreground: oklch(0.9301 0.0075 260.7315);
+  --primary: oklch(0.7223 0.0946 279.6746);
+  --primary-foreground: oklch(0.2236 0.0049 67.5717);
+  --secondary: oklch(0.3352 0.0055 56.2080);
+  --secondary-foreground: oklch(0.8726 0.0059 264.5296);
+  --muted: oklch(0.2793 0.0057 56.1503);
+  --muted-foreground: oklch(0.7176 0.0111 261.7826);
+  --accent: oklch(0.3889 0.0053 56.2463);
+  --accent-foreground: oklch(0.8726 0.0059 264.5296);
+  --destructive: oklch(0.6322 0.1310 21.4751);
+  --destructive-foreground: oklch(0.2236 0.0049 67.5717);
+  --border: oklch(0.3352 0.0055 56.2080);
+  --input: oklch(0.3352 0.0055 56.2080);
+  --ring: oklch(0.7223 0.0946 279.6746);
+  --chart-1: oklch(0.7223 0.0946 279.6746);
+  --chart-2: oklch(0.6378 0.1247 281.2150);
+  --chart-3: oklch(0.5608 0.1433 283.1275);
+  --chart-4: oklch(0.5008 0.1358 283.9499);
+  --chart-5: oklch(0.4372 0.1108 283.4322);
+  --sidebar: oklch(0.3352 0.0055 56.2080);
+  --sidebar-foreground: oklch(0.9301 0.0075 260.7315);
+  --sidebar-primary: oklch(0.7223 0.0946 279.6746);
+  --sidebar-primary-foreground: oklch(0.2236 0.0049 67.5717);
+  --sidebar-accent: oklch(0.3889 0.0053 56.2463);
+  --sidebar-accent-foreground: oklch(0.8726 0.0059 264.5296);
+  --sidebar-border: oklch(0.3352 0.0055 56.2080);
+  --sidebar-ring: oklch(0.7223 0.0946 279.6746);
   --font-sans: Inter, sans-serif;
-  --font-serif: "Lora", Georgia, serif;
-  --font-mono: "Fira Code", "Courier New", monospace;
-  --radius: 0.5rem;
-  --shadow-2xs: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.03);
-  --shadow-xs: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.03);
-  --shadow-sm: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.06), 1px 1px 2px 0px hsl(0 0% 10.1961% / 0.06);
-  --shadow: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.06), 1px 1px 2px 0px hsl(0 0% 10.1961% / 0.06);
-  --shadow-md: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.06), 1px 2px 4px 0px hsl(0 0% 10.1961% / 0.06);
-  --shadow-lg: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.06), 1px 4px 6px 0px hsl(0 0% 10.1961% / 0.06);
-  --shadow-xl: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.06), 1px 8px 10px 0px hsl(0 0% 10.1961% / 0.06);
-  --shadow-2xl: 1px 2px 5px 1px hsl(0 0% 10.1961% / 0.15);
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 1.0rem;
+  --shadow-2xs: 2px 2px 10px 4px hsl(0 0% 10.1961% / 0.09);
+  --shadow-xs: 2px 2px 10px 4px hsl(0 0% 10.1961% / 0.09);
+  --shadow-sm: 2px 2px 10px 4px hsl(0 0% 10.1961% / 0.18), 2px 1px 2px 3px hsl(0 0% 10.1961% / 0.18);
+  --shadow: 2px 2px 10px 4px hsl(0 0% 10.1961% / 0.18), 2px 1px 2px 3px hsl(0 0% 10.1961% / 0.18);
+  --shadow-md: 2px 2px 10px 4px hsl(0 0% 10.1961% / 0.18), 2px 2px 4px 3px hsl(0 0% 10.1961% / 0.18);
+  --shadow-lg: 2px 2px 10px 4px hsl(0 0% 10.1961% / 0.18), 2px 4px 6px 3px hsl(0 0% 10.1961% / 0.18);
+  --shadow-xl: 2px 2px 10px 4px hsl(0 0% 10.1961% / 0.18), 2px 8px 10px 3px hsl(0 0% 10.1961% / 0.18);
+  --shadow-2xl: 2px 2px 10px 4px hsl(0 0% 10.1961% / 0.45);
 }
 
 @layer base {