Updated paragraph text colour (#1010)

<!-- Explain the changes introduced in your PR -->

## Pull Request approval

You will need to get your PR approved by at least one member of the
Sourcegraph team. For reviews of docs formatting, styles, and component
usage, please tag the docs team via the #docs Slack channel.

Author: zahidalidev

src/app/not-found.tsx

@@ -10,7 +10,7 @@ export default function NotFound() {
         <h1 className="mt-3 font-display text-3xl tracking-tight text-slate-900 dark:text-white">
           Page not found
         </h1>
-        <p className="mt-2 text-sm text-slate-500 dark:text-dark-text-secondary">
+        <p className="mt-2 text-sm text-slate-500 dark:text-dark-paragraph-text">
           Sorry, we couldn’t find the page you’re looking for.
         </p>
         <Link

src/components/Prose.tsx

@@ -13,13 +13,13 @@ export function Prose<T extends React.ElementType = 'div'>({
 		<Component
 			className={clsx(
 				className,
-				'prose prose-slate max-w-none dark:prose-invert dark:text-dark-text-secondary',
+				'prose prose-slate max-w-none dark:prose-invert dark:text-dark-paragraph-text',
 				// headings
 				'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]',
 				// For headings anchor
 				'prose-headings:relative prose-headings:flex prose-headings:items-center',
 				// lead
-				'prose-lead:text-slate-500 dark:prose-lead:text-dark-text-secondary',
+				'prose-lead:text-slate-500 dark:prose-lead:text-dark-paragraph-text',
 				// links
 				'prose-a:font-semibold prose-a:text-vermilion-00 hover:prose-a-text:[#606060] visited:text-[#4A4A4A] hover:visited:text-[#606060] dark:prose-a:vermilion-11 dark:hover:prose-a:dark-text-secondary dark:visited:text-[#606060] dark:hover:visited:text-[#A9A9A9]',
 				// link underline

src/components/ThemeSelector.tsx

@@ -73,7 +73,7 @@ export function ThemeSelector(
 									'text-link': selected,
 									'text-slate-700 dark:text-white':
 										active && !selected,
-									'text-slate-700 dark:text-dark-text-secondary':
+									'text-slate-700 dark:text-dark-paragraph-text':
 										!active && !selected,
 									'bg-vermilion-08 text-vermilion-11': active
 								},

src/components/VersionSelector.tsx

@@ -39,7 +39,7 @@ export default function VersionSelector() {
 			<div>
 				<Menu.Button
 					className="inline-flex w-full items-center justify-center gap-x-1.5
-				rounded-md px-2 py-2 text-xs font-medium text-slate-500 shadow-sm ring-1 ring-inset ring-light-border-2 hover:bg-vermilion-08 hover:text-vermilion-11 dark:bg-dark-bg-2 dark:text-dark-text-secondary dark:ring-inset dark:ring-dark-border"
+				rounded-md px-2 py-2 text-xs font-medium text-slate-500 shadow-sm ring-1 ring-inset ring-light-border-2 hover:bg-vermilion-08 hover:text-vermilion-11 dark:bg-dark-bg-2 dark:text-dark-paragraph-text dark:ring-inset dark:ring-dark-border"
 				>
 					{selectedVersion.name}
 					<ChevronDownIcon
@@ -58,7 +58,7 @@ export default function VersionSelector() {
 				leaveFrom="transform opacity-100 scale-100"
 				leaveTo="transform opacity-0 scale-95"
 			>
-				<Menu.Items className="divide- absolute right-0 z-10 mt-2 flex w-32 origin-top-right flex-col divide-light-border rounded-md bg-light-bg-1 text-xs text-slate-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:divide-dark-border dark:bg-dark-bg-2 dark:text-dark-text-secondary sm:w-48 sm:text-sm">
+				<Menu.Items className="divide- absolute right-0 z-10 mt-2 flex w-32 origin-top-right flex-col divide-light-border rounded-md bg-light-bg-1 text-xs text-slate-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:divide-dark-border dark:bg-dark-bg-2 dark:text-dark-paragraph-text sm:w-48 sm:text-sm">
 					{/* Versions */}
 					{versions.length > 0 &&
 						versions.map((version, count) => (

src/components/mdx/LinkCards.tsx

@@ -36,7 +36,7 @@ export function LinkCard({
 					<h3 className="slate-900 font-display text-xl dark:text-white">
 						{title}
 					</h3>
-					<p className="font-normal text-slate-700 dark:text-dark-text-secondary">
+					<p className="font-normal text-slate-700 dark:text-dark-paragraph-text">
 						{description}
 					</p>
 					<CustomLink version={version} href={href}>

src/components/mdx/ProductCards.tsx

@@ -37,7 +37,7 @@ export function ProductCard({
 						</CustomLink>
 					</h2>
 
-					<p className="mt-1 text-sm text-slate-700 dark:text-dark-text-secondary">
+					<p className="mt-1 text-sm text-slate-700 dark:text-dark-paragraph-text">
 						{description}
 					</p>
 				</div>

src/components/mdx/QuickLinks.tsx

@@ -35,7 +35,7 @@ export function QuickLink({
 						{title}
 					</CustomLink>
 				</h2>
-				<p className="mt-1 text-sm text-slate-700 dark:text-dark-text-secondary">
+				<p className="mt-1 text-sm text-slate-700 dark:text-dark-paragraph-text">
 					{description}
 				</p>
 			</div>

src/components/mdx/TierCallout.tsx

@@ -5,7 +5,7 @@ import { Users, Flag } from 'lucide-react';
 const styles = {
   container: 'border-slate-300 border-[#eaeaea] dark:border-[#333333]',
   icon: 'text-inherit',
-  body: 'text-[#334155] dark:text-dark-text-secondary'
+  body: 'text-[#334155] dark:text-dark-paragraph-text'
 };
 
 export function TierCallout({

tailwind.config.ts

@@ -84,6 +84,7 @@ export default {
       'light-text-muted': '#060000', // Vermilion-07
       'dark-text-primary': '#FFF3F0', // Vermilion-11
       'dark-text-secondary': '#A9A9A9',
+      'dark-paragraph-text': '#FFF3F0',
       'sggray': {
         100: '#F5F7FB',
         200: '#DBE2F0',