feat(stories): change docs component styles

Author: raferdev

src/stories/components/Docs/Content/index.tsx

@@ -17,7 +17,7 @@ const Container = ({
   return (
     <Comp
       className={cn(
-        'custom-scroll box-border flex h-full w-full flex-col gap-8 overflow-y-scroll text-clip !text-base md:!text-lg',
+        'custom-scroll box-border flex h-full w-full flex-col gap-8 overflow-y-scroll text-clip !text-base !drop-shadow-md md:!text-lg',
         className
       )}
       {...props}

src/stories/components/Docs/Content/paragraph.tsx

@@ -12,7 +12,7 @@ const Paragraph = ({
   return (
     <Comp
       className={cn(
-        '!ml-2 !text-justify !font-sans !text-base !font-normal  !text-muted-foreground md:!text-lg',
+        '!ml-2 !text-justify !font-sans !text-base !font-thin  !text-neutral-800 md:!text-lg',
         className
       )}
       {...props}

src/stories/components/Docs/Content/span.tsx

@@ -12,7 +12,7 @@ const Span = ({
   return (
     <Comp
       className={cn(
-        '!font-sans !text-lg  !font-bold !text-stone-900',
+        '!font-sans !text-lg  !font-bold !text-neutral-800',
         className
       )}
       {...props}

src/stories/components/Docs/Content/subTopic.tsx

@@ -12,7 +12,7 @@ const SubTopic = ({
   return (
     <Comp
       className={cn(
-        '!m-0 !ml-2 !font-sans !text-lg !font-bold !text-secondary',
+        '!m-0 !ml-2 !font-sans !text-lg !font-normal !text-neutral-800',
         className
       )}
       {...props}

src/stories/components/Docs/Content/topic.tsx

@@ -12,7 +12,7 @@ const Topic = ({
   return (
     <Comp
       className={cn(
-        '!m-0 !font-sans !text-lg !font-bold !text-foreground md:!text-xl',
+        '!m-0 !font-sans !text-lg !font-normal !text-neutral-800 md:!text-xl',
         className
       )}
       {...props}

src/stories/components/Docs/Header/subtitle.tsx

@@ -12,7 +12,7 @@ const SubTitle = ({
   return (
     <Comp
       className={cn(
-        '!border-0 !font-sans !text-lg !font-bold !text-secondary md:!text-xl',
+        '!border-0 !font-sans !text-lg !font-normal !text-neutral-700 drop-shadow-lg md:!text-xl',
         className
       )}
       {...props}

src/stories/components/Docs/Header/title.tsx

@@ -12,7 +12,7 @@ const Title = ({
   return (
     <Comp
       className={cn(
-        '!font-sans !text-xl !font-bold !leading-tight !tracking-tighter !text-foreground md:!text-2xl md:!leading-[1.1]',
+        '!font-sans !text-xl  !font-thin !italic !leading-tight !tracking-tighter !text-neutral-800 md:!text-2xl md:!leading-[1.1]',
         className
       )}
       {...props}