feat(label): add size prop to Label component for responsive text sizing

src/app/globals.css

@@ -29,7 +29,7 @@
 
   --background: var(--neutral-800);
   --background-reversed: var(--neutral-000);
-  --base: var(--neutral-800);
+  --basecl: var(--neutral-800);
   --text: var(--neutral-000);
   --text-alt: var(--neutral-900);
   --text-input: var(--text);
@@ -207,7 +207,7 @@ p {
 
   --color-background: var(--neutral-750);
   --color-background-reversed: var(--background-reversed);
-  --color-base: var(--neutral-800);
+  --color-basecl: var(--neutral-800);
   --color-text: var(--text);
   --color-text-alt: var(--text-alt);
   --color-text-input: var(--text-input);
@@ -330,7 +330,7 @@ p {
 
   --background: var(--neutral-750);
   --background-reversed: var(--neutral-000);
-  --base: var(--neutral-750);
+  --basecl: var(--neutral-750);
   --text: var(--neutral-000);
   --text-alt: var(--neutral-900);
   --text-input: var(--text);

src/components/ui/label.tsx

@@ -5,16 +5,21 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 
 import { cn } from '@/lib/utils';
 
-function Label({
+type LabelProps = React.ComponentProps<typeof LabelPrimitive.Root> & {
-  className,
+  size?: 'default' | 'small' | 'large';
-  ...props
+};
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+
+function Label({ className, size = 'default', ...props }: LabelProps) {
   return (
     <LabelPrimitive.Root
       data-slot='label'
       className={cn(
         /* Text */
-        'text-sm',
+        size === 'small'
+          ? 'text-sm'
+          : size === 'large'
+            ? 'text-lg'
+            : 'text-base',
         /* Background */
         '',
         /* Border */