From 4a5059bdae57c1b0dc77336307c4282c7f0bcc56 Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Fri, 25 Nov 2022 15:59:33 -0500
Subject: [PATCH] docs(nxdev): change -gray- usage for -slate- (#13420)

---
 nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx   |  4 ++--
 nx-dev/ui-commands/src/lib/inline-command.tsx      |  9 ++++++---
 nx-dev/ui-common/src/lib/nx-users-showcase.tsx     |  4 ++--
 nx-dev/ui-common/src/lib/selector.tsx              |  8 ++++----
 nx-dev/ui-community/src/lib/connect-with-us.tsx    |  6 +++---
 nx-dev/ui-community/src/lib/plugin-directory.tsx   |  2 +-
 nx-dev/ui-conference/src/lib/conf-sponsors.tsx     |  8 ++++----
 .../ui-home/src/lib/extensible-and-integrated.tsx  |  2 +-
 .../lib/extensible-and-integrated/graph-tab.tsx    |  4 ++--
 .../lib/extensible-and-integrated/plugins-tab.tsx  |  2 +-
 .../vscode-integration-tab.tsx                     |  6 +++---
 .../src/lib/migrations-and-code-generation.tsx     |  2 +-
 nx-dev/ui-home/src/lib/monorepo-styles.tsx         |  2 +-
 nx-dev/ui-home/src/lib/newsletter.tsx              |  2 +-
 nx-dev/ui-home/src/lib/nx-is-fast.tsx              | 14 +++++++-------
 nx-dev/ui-home/src/lib/nx-statistics.tsx           |  2 +-
 nx-dev/ui-home/src/lib/testimonials.tsx            |  2 +-
 nx-dev/ui-home/src/lib/why-is-nx-fast.tsx          |  2 +-
 nx-dev/ui-sponsor-card/src/lib/sponsor-card.tsx    |  2 +-
 .../ui-theme/src/lib/theme-switcher.component.tsx  |  4 ++--
 20 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx b/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
index 9e827b3579..d2ab2d4f04 100644
--- a/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
@@ -59,7 +59,7 @@ export function DocViewer({
                 target="_blank"
                 rel="noreferrer"
                 title="Report an issue on Github"
-                className="relative inline-flex items-center rounded-l-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-gray-600 focus-within:ring-blue-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
+                className="relative inline-flex items-center rounded-l-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
               >
                 Report an issue
               </a>
@@ -75,7 +75,7 @@ export function DocViewer({
                 target="_blank"
                 rel="noreferrer"
                 title="Edit this page on Github"
-                className="relative -ml-px inline-flex items-center rounded-r-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
+                className="relative -ml-px inline-flex items-center rounded-r-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
               >
                 Edit this page
               </a>
diff --git a/nx-dev/ui-commands/src/lib/inline-command.tsx b/nx-dev/ui-commands/src/lib/inline-command.tsx
index ac1afb5cbd..41e8a2e7cb 100644
--- a/nx-dev/ui-commands/src/lib/inline-command.tsx
+++ b/nx-dev/ui-commands/src/lib/inline-command.tsx
@@ -38,10 +38,13 @@ export function InlineCommand({
       >
         <button
           type="button"
-          className="font-input-mono duration-180 flex w-full flex-none items-center justify-center space-x-2 rounded-md border border-gray-300 bg-white py-1 text-sm leading-6 text-gray-400 transition-colors hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-white sm:max-w-full sm:space-x-4 sm:px-3"
+          className="font-input-mono duration-180 flex w-full flex-none items-center justify-center space-x-2 rounded-md border border-slate-300 bg-white py-1 text-sm leading-6 text-slate-400 transition-colors hover:text-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-300 focus:ring-offset-2 focus:ring-offset-white sm:max-w-full sm:space-x-4 sm:px-3"
         >
-          <span className="flex items-center overflow-auto text-gray-800">
-            <span className="hidden text-gray-500 sm:inline" aria-hidden="true">
+          <span className="flex items-center overflow-auto text-slate-800">
+            <span
+              className="hidden text-slate-500 sm:inline"
+              aria-hidden="true"
+            >
               $
             </span>
             <SyntaxHighlighter
diff --git a/nx-dev/ui-common/src/lib/nx-users-showcase.tsx b/nx-dev/ui-common/src/lib/nx-users-showcase.tsx
index 166f3909e1..1c4d86ddea 100644
--- a/nx-dev/ui-common/src/lib/nx-users-showcase.tsx
+++ b/nx-dev/ui-common/src/lib/nx-users-showcase.tsx
@@ -1,10 +1,10 @@
 export function NxUsersShowcase(): JSX.Element {
   return (
     <div className="overflow-hidden py-4 px-4">
-      <div className="top-1 bottom-3 mx-auto w-60 text-center text-xs text-gray-400">
+      <div className="top-1 bottom-3 mx-auto w-60 text-center text-xs text-slate-400">
         Powering leading companies like
       </div>
-      <div id="sponsors-carousel" className="column flex w-full text-gray-400">
+      <div id="sponsors-carousel" className="column flex w-full text-slate-400">
         <div className="flex justify-center">
           <svg className="w-full" viewBox="0 0 160 88" fill="currentColor">
             <path d="M90.9947 24.3067L98.6787 27.3333L90.9947 30.1947V34.2827L104.155 28.9693V25.7L90.9947 20.3867V24.3067Z" />
diff --git a/nx-dev/ui-common/src/lib/selector.tsx b/nx-dev/ui-common/src/lib/selector.tsx
index 65d0d01825..2868d98bf9 100644
--- a/nx-dev/ui-common/src/lib/selector.tsx
+++ b/nx-dev/ui-common/src/lib/selector.tsx
@@ -18,11 +18,11 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
         {({ open }) => (
           <>
             <div className="relative mt-1">
-              <Listbox.Button className="relative w-full cursor-pointer rounded border border-gray-200 bg-white py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm">
+              <Listbox.Button className="relative w-full cursor-pointer rounded border border-slate-200 bg-white py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm">
                 <span className="block truncate">{props.selected.label}</span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                   <ChevronUpDownIcon
-                    className="h-5 w-5 text-gray-500"
+                    className="h-5 w-5 text-slate-500"
                     aria-hidden="true"
                   />
                 </span>
@@ -48,7 +48,7 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
                         `${
                           active
                             ? 'bg-blue-nx-base text-white'
-                            : 'text-gray-500'
+                            : 'text-slate-500'
                         }
                           relative cursor-pointer select-none py-2 pl-10 pr-4`
                       }
@@ -62,7 +62,7 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
                           {selected || item.value === props.selected.value ? (
                             <span
                               className={`${
-                                active ? 'text-white' : 'text-gray-500'
+                                active ? 'text-white' : 'text-slate-500'
                               }
                                 absolute inset-y-0 left-0 flex items-center pl-3`}
                             >
diff --git a/nx-dev/ui-community/src/lib/connect-with-us.tsx b/nx-dev/ui-community/src/lib/connect-with-us.tsx
index 67b675566e..a7d3b02bc9 100644
--- a/nx-dev/ui-community/src/lib/connect-with-us.tsx
+++ b/nx-dev/ui-community/src/lib/connect-with-us.tsx
@@ -53,7 +53,7 @@ export function ConnectWithUs(): JSX.Element {
                 </p>
               </a>
             </div>
-            <div className="group relative rounded-lg border border-gray-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-red-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-red-900 dark:hover:bg-slate-800">
+            <div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-red-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-red-900 dark:hover:bg-slate-800">
               <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
                 <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-red-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-red-900" />
                 <div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#FF0000] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
@@ -86,7 +86,7 @@ export function ConnectWithUs(): JSX.Element {
             </div>
           </div>
           <div className="space-y-6 md:w-1/2">
-            <div className="group relative rounded-lg border border-gray-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-blue-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-blue-900 dark:hover:bg-slate-800">
+            <div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-blue-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-blue-900 dark:hover:bg-slate-800">
               <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
                 <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-blue-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-blue-800" />
                 <div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#1DA1F2] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
@@ -116,7 +116,7 @@ export function ConnectWithUs(): JSX.Element {
                 </p>
               </a>
             </div>
-            <div className="group relative rounded-lg border border-gray-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-green-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-green-900 dark:hover:bg-slate-800">
+            <div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-green-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-green-900 dark:hover:bg-slate-800">
               <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
                 <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-green-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-green-800" />
                 <div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-green-500 bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
diff --git a/nx-dev/ui-community/src/lib/plugin-directory.tsx b/nx-dev/ui-community/src/lib/plugin-directory.tsx
index 90934b4b0c..0e095f4f01 100644
--- a/nx-dev/ui-community/src/lib/plugin-directory.tsx
+++ b/nx-dev/ui-community/src/lib/plugin-directory.tsx
@@ -21,7 +21,7 @@ export function PluginDirectory({
       className="max-w-screen mx-auto p-4 lg:max-w-7xl lg:px-8"
     >
       <div className="flex w-full flex-col justify-between gap-8 md:flex-row ">
-        <h2 className="text-3xl font-extrabold tracking-tight text-gray-900">
+        <h2 className="text-3xl font-extrabold tracking-tight text-slate-900">
           Nx Plugin Directory
         </h2>
         <div>
diff --git a/nx-dev/ui-conference/src/lib/conf-sponsors.tsx b/nx-dev/ui-conference/src/lib/conf-sponsors.tsx
index f18013a371..6755927c16 100644
--- a/nx-dev/ui-conference/src/lib/conf-sponsors.tsx
+++ b/nx-dev/ui-conference/src/lib/conf-sponsors.tsx
@@ -86,10 +86,10 @@ export function ConfSponsors(): JSX.Element {
     return result;
   }
   return (
-    <div className="border-t border-gray-600">
+    <div className="border-t border-slate-600">
       {sponsorLevelList.map((key, levelIndex) => (
         <div key={'sponsor-level--' + key}>
-          {/*<div className="border-b border-gray-600">*/}
+          {/*<div className="border-b border-slate-600">*/}
           {/*  <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">*/}
           {/*    <h4 className="my-8 px-5 text-lg font-input-mono">{key}</h4>*/}
           {/*  </div>*/}
@@ -98,7 +98,7 @@ export function ConfSponsors(): JSX.Element {
             <div
               key={'speaker-row--' + rowIndex}
               className={cx(
-                'border-b border-gray-600',
+                'border-b border-slate-600',
                 sponsorLevelList.length === levelIndex + 1 && 'border-b'
               )}
             >
@@ -107,7 +107,7 @@ export function ConfSponsors(): JSX.Element {
                   {row.map((speaker) => (
                     <div
                       key={speaker.name}
-                      className="border-gray-600 py-8 odd:border-b md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
+                      className="border-slate-600 py-8 odd:border-b md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
                     >
                       <div className="h-full px-5">
                         <SponsorCard
diff --git a/nx-dev/ui-home/src/lib/extensible-and-integrated.tsx b/nx-dev/ui-home/src/lib/extensible-and-integrated.tsx
index 865faa540e..c491bdb90e 100644
--- a/nx-dev/ui-home/src/lib/extensible-and-integrated.tsx
+++ b/nx-dev/ui-home/src/lib/extensible-and-integrated.tsx
@@ -9,7 +9,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
   return (
     <article
       id="extensible-and-integrated"
-      className="overflow-hidden bg-gray-50 pt-28 dark:bg-slate-800/40"
+      className="overflow-hidden bg-slate-50 pt-28 dark:bg-slate-800/40"
     >
       <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
         <header className="max-w-2xl">
diff --git a/nx-dev/ui-home/src/lib/extensible-and-integrated/graph-tab.tsx b/nx-dev/ui-home/src/lib/extensible-and-integrated/graph-tab.tsx
index 79a21f4bbf..643fea2714 100644
--- a/nx-dev/ui-home/src/lib/extensible-and-integrated/graph-tab.tsx
+++ b/nx-dev/ui-home/src/lib/extensible-and-integrated/graph-tab.tsx
@@ -49,8 +49,8 @@ export function GraphTab(): JSX.Element {
         </span>
         <div className="-m-0.5 h-0.5 w-full bg-slate-200 dark:bg-slate-700" />
       </div>
-      <div className="z-10 h-auto overflow-hidden rounded-lg border border-gray-200 shadow dark:border-slate-700 lg:min-h-[485px] lg:w-[690px]">
-        <div className="flex h-7 w-full items-center justify-start space-x-1.5 bg-gray-200 px-3 dark:bg-slate-700">
+      <div className="z-10 h-auto overflow-hidden rounded-lg border border-slate-200 shadow dark:border-slate-700 lg:min-h-[485px] lg:w-[690px]">
+        <div className="flex h-7 w-full items-center justify-start space-x-1.5 bg-slate-200 px-3 dark:bg-slate-700">
           <span className="h-2 w-2 rounded-full bg-red-400"></span>
           <span className="h-2 w-2 rounded-full bg-yellow-400"></span>
           <span className="h-2 w-2 rounded-full bg-green-400"></span>
diff --git a/nx-dev/ui-home/src/lib/extensible-and-integrated/plugins-tab.tsx b/nx-dev/ui-home/src/lib/extensible-and-integrated/plugins-tab.tsx
index e73057f735..7cdb8d176a 100644
--- a/nx-dev/ui-home/src/lib/extensible-and-integrated/plugins-tab.tsx
+++ b/nx-dev/ui-home/src/lib/extensible-and-integrated/plugins-tab.tsx
@@ -195,7 +195,7 @@ export function PluginsTab(): JSX.Element {
           <h3 className="text-xl font-medium leading-6 text-blue-500 dark:text-sky-500">
             Plugins available for all stacks
           </h3>
-          <p className="mt-4 text-gray-900 dark:text-slate-400">
+          <p className="mt-4 text-slate-900 dark:text-slate-400">
             Official Nx plugins are created and maintained by the Nx team at
             Nrwl. You can see all the available plugins when you run the{' '}
             <code className="break-normal rounded-md border border-slate-200 bg-slate-50 px-2 py-1 font-mono text-xs text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
diff --git a/nx-dev/ui-home/src/lib/extensible-and-integrated/vscode-integration-tab.tsx b/nx-dev/ui-home/src/lib/extensible-and-integrated/vscode-integration-tab.tsx
index af21bbaac7..6e070528f6 100644
--- a/nx-dev/ui-home/src/lib/extensible-and-integrated/vscode-integration-tab.tsx
+++ b/nx-dev/ui-home/src/lib/extensible-and-integrated/vscode-integration-tab.tsx
@@ -46,7 +46,7 @@ export function VscodeIntegrationTab(): JSX.Element {
       className="wrapper my-8 grid h-full items-center gap-16 md:grid-cols-2 lg:grid-cols-3"
     >
       <div className="lg:col-span-2">
-        <div className="w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-gray-200 shadow-lg shadow dark:hidden dark:border-slate-700">
+        <div className="w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow-lg shadow dark:hidden dark:border-slate-700">
           <Image
             src="/images/nx-console/vscode-light.webp"
             alt="Nx Console app screenshot"
@@ -56,7 +56,7 @@ export function VscodeIntegrationTab(): JSX.Element {
             height={800}
           />
         </div>
-        <div className="hidden w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-gray-200 shadow-lg shadow dark:block dark:border-slate-700">
+        <div className="hidden w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow-lg shadow dark:block dark:border-slate-700">
           <Image
             src="/images/nx-console/vscode-dark.webp"
             alt="Nx Console app screenshot"
@@ -96,7 +96,7 @@ export function VscodeIntegrationTab(): JSX.Element {
               <h3 className="text-sm font-medium">{feature.name}</h3>
               <Link href={feature.link}>
                 <span className="absolute inset-0" aria-hidden="true" />
-                <p className="mt-2 text-sm text-gray-500">
+                <p className="mt-2 text-sm text-slate-500">
                   {feature.description}
                 </p>
               </Link>
diff --git a/nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx b/nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx
index 8b2483ce34..5a7eaab17d 100644
--- a/nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx
+++ b/nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx
@@ -4,7 +4,7 @@ export function MigrationsAndCodeGeneration(): JSX.Element {
   return (
     <article
       id="affected-and-code-generation"
-      className="relative overflow-hidden bg-gray-50 py-28 dark:bg-slate-800/40"
+      className="relative overflow-hidden bg-slate-50 py-28 dark:bg-slate-800/40"
     >
       <div className="mx-auto max-w-7xl py-12 px-4 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:py-16 lg:px-8">
         <div>
diff --git a/nx-dev/ui-home/src/lib/monorepo-styles.tsx b/nx-dev/ui-home/src/lib/monorepo-styles.tsx
index 790ee7fa9c..6bd77a6ef5 100644
--- a/nx-dev/ui-home/src/lib/monorepo-styles.tsx
+++ b/nx-dev/ui-home/src/lib/monorepo-styles.tsx
@@ -4,7 +4,7 @@ export function MonorepoStyles(): JSX.Element {
   return (
     <article
       id="monorepo-styles"
-      className="relative overflow-hidden bg-gray-50 pt-28 dark:bg-slate-800/40"
+      className="relative overflow-hidden bg-slate-50 pt-28 dark:bg-slate-800/40"
     >
       <div className="mx-auto max-w-7xl py-12 px-4 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:py-16 lg:px-8">
         <div>
diff --git a/nx-dev/ui-home/src/lib/newsletter.tsx b/nx-dev/ui-home/src/lib/newsletter.tsx
index 1311280dfe..854b42c249 100644
--- a/nx-dev/ui-home/src/lib/newsletter.tsx
+++ b/nx-dev/ui-home/src/lib/newsletter.tsx
@@ -69,7 +69,7 @@ export function Newsletter(): JSX.Element {
   ];
 
   return (
-    <div className="bg-gray-50 pt-28 dark:bg-slate-800/40">
+    <div className="bg-slate-50 pt-28 dark:bg-slate-800/40">
       <div className="mx-auto max-w-7xl py-16 px-4 sm:px-6 lg:flex lg:items-center lg:py-24 lg:px-8">
         <div className="lg:w-0 lg:flex-1">
           <h1 className="text-lg font-semibold tracking-tight text-blue-500 dark:text-sky-500">
diff --git a/nx-dev/ui-home/src/lib/nx-is-fast.tsx b/nx-dev/ui-home/src/lib/nx-is-fast.tsx
index 53d77186ba..199ca2dcb4 100644
--- a/nx-dev/ui-home/src/lib/nx-is-fast.tsx
+++ b/nx-dev/ui-home/src/lib/nx-is-fast.tsx
@@ -68,7 +68,7 @@ export function NxIsFast(): JSX.Element {
   return (
     <article
       id="nx-is-fast"
-      className="relative bg-gray-50 py-28 dark:bg-slate-800/40"
+      className="relative bg-slate-50 py-28 dark:bg-slate-800/40"
     >
       <motion.div
         ref={ref}
@@ -145,7 +145,7 @@ export function NxIsFast(): JSX.Element {
                   aria-hidden="true"
                 />
               </div>
-              <p className="relative mt-4 text-base font-medium leading-6 text-gray-900 dark:text-slate-100">
+              <p className="relative mt-4 text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
                 <span className="absolute -left-4 h-full w-0.5 bg-blue-500 dark:bg-sky-500"></span>
                 Never rebuild the same code twice
               </p>
@@ -171,7 +171,7 @@ export function NxIsFast(): JSX.Element {
                   aria-hidden="true"
                 />
               </div>
-              <p className="relative mt-4 text-base font-medium leading-6 text-gray-900 dark:text-slate-100">
+              <p className="relative mt-4 text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
                 <span className="absolute -left-4 h-full w-0.5 bg-blue-500 dark:bg-sky-500"></span>
                 Distributed task execution (DTE)
               </p>
@@ -201,12 +201,12 @@ export function NxIsFast(): JSX.Element {
                   aria-hidden="true"
                 />
               </div>
-              <p className="relative mt-4 text-base font-medium leading-6 text-gray-900 dark:text-slate-100">
+              <p className="relative mt-4 text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
                 <span className="absolute -left-4 h-full w-0.5 bg-blue-500 dark:bg-sky-500"></span>
                 Remote caching
               </p>
             </dt>
-            <dd className="mt-2 text-base text-gray-500 dark:text-slate-400">
+            <dd className="mt-2 text-base text-slate-500 dark:text-slate-400">
               <span className="font-medium">
                 Share your local computation cache
               </span>{' '}
@@ -229,12 +229,12 @@ export function NxIsFast(): JSX.Element {
                   aria-hidden="true"
                 />
               </div>
-              <p className="relative mt-4 text-base font-medium leading-6 text-gray-900 dark:text-slate-100">
+              <p className="relative mt-4 text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
                 <span className="absolute -left-4 h-full w-0.5 bg-blue-500 dark:bg-sky-500"></span>
                 Only run what changed
               </p>
             </dt>
-            <dd className="mt-2 text-base text-gray-500 dark:text-slate-400">
+            <dd className="mt-2 text-base text-slate-500 dark:text-slate-400">
               Nothing is faster than not running a task. Nx analyzes your
               project graph and can{' '}
               <span className="font-medium">
diff --git a/nx-dev/ui-home/src/lib/nx-statistics.tsx b/nx-dev/ui-home/src/lib/nx-statistics.tsx
index c27ad13be5..4acb478456 100644
--- a/nx-dev/ui-home/src/lib/nx-statistics.tsx
+++ b/nx-dev/ui-home/src/lib/nx-statistics.tsx
@@ -15,7 +15,7 @@ export function NxStatistics(): JSX.Element {
           </p>
         </div>
       </div>
-      <div className="mt-10 bg-gray-50 pb-12 dark:bg-slate-800/40 sm:pb-16">
+      <div className="mt-10 bg-slate-50 pb-12 dark:bg-slate-800/40 sm:pb-16">
         <div className="relative">
           <div className="absolute inset-0 h-1/2 border-b border-slate-100 bg-white dark:border-black dark:bg-slate-900"></div>
           <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
diff --git a/nx-dev/ui-home/src/lib/testimonials.tsx b/nx-dev/ui-home/src/lib/testimonials.tsx
index 58f7d8f865..dd63c166b2 100644
--- a/nx-dev/ui-home/src/lib/testimonials.tsx
+++ b/nx-dev/ui-home/src/lib/testimonials.tsx
@@ -76,7 +76,7 @@ export function Testimonials(): JSX.Element {
   return (
     <article
       id="next-generation"
-      className="relative bg-gray-50 pt-28 dark:bg-slate-800/40"
+      className="relative bg-slate-50 pt-28 dark:bg-slate-800/40"
     >
       <div className="mx-auto max-w-7xl items-stretch py-12 px-4 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:py-16 lg:px-8">
         <div className="md:col-span-2">
diff --git a/nx-dev/ui-home/src/lib/why-is-nx-fast.tsx b/nx-dev/ui-home/src/lib/why-is-nx-fast.tsx
index 56b3e9e3bc..fe0b5cb66c 100644
--- a/nx-dev/ui-home/src/lib/why-is-nx-fast.tsx
+++ b/nx-dev/ui-home/src/lib/why-is-nx-fast.tsx
@@ -2,7 +2,7 @@ export function WhyIsNxFast(): JSX.Element {
   return (
     <article
       id="why-is-nx-fast"
-      className="relative bg-gray-50 pt-28 dark:bg-slate-800/40"
+      className="relative bg-slate-50 pt-28 dark:bg-slate-800/40"
     >
       <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
         <header className="max-w-prose">
diff --git a/nx-dev/ui-sponsor-card/src/lib/sponsor-card.tsx b/nx-dev/ui-sponsor-card/src/lib/sponsor-card.tsx
index b3c7decf56..f71237b481 100644
--- a/nx-dev/ui-sponsor-card/src/lib/sponsor-card.tsx
+++ b/nx-dev/ui-sponsor-card/src/lib/sponsor-card.tsx
@@ -21,7 +21,7 @@ export function SponsorCard(data: Sponsor): JSX.Element {
       </div>
       <div className="md:col-span-2">
         <h5 className="font-input-mono mb-3">{data.name}</h5>
-        <p className="text-gray-400">{data.description}</p>
+        <p className="text-slate-400">{data.description}</p>
       </div>
     </figure>
   );
diff --git a/nx-dev/ui-theme/src/lib/theme-switcher.component.tsx b/nx-dev/ui-theme/src/lib/theme-switcher.component.tsx
index 93a63a1ae7..4768e5278b 100644
--- a/nx-dev/ui-theme/src/lib/theme-switcher.component.tsx
+++ b/nx-dev/ui-theme/src/lib/theme-switcher.component.tsx
@@ -74,9 +74,9 @@ export function ThemeSwitcher() {
                       className={cx(
                         'flex cursor-pointer items-center px-4 py-2 text-sm',
                         {
-                          'bg-gray-100 dark:bg-slate-800/60': active,
+                          'bg-slate-100 dark:bg-slate-800/60': active,
                           'text-blue-500 dark:text-sky-500': active || selected,
-                          'text-gray-700 dark:text-slate-400': !active,
+                          'text-slate-700 dark:text-slate-400': !active,
                         }
                       )}
                     >