From e0720af28618bc4cc568837146e51a3cddfcb479 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Fri, 23 Sep 2022 15:02:00 -0400
Subject: [PATCH] [beta] Update CodeStep colors (#5089)

* [beta] Update CodeStep colors

* Add back green
---
 beta/src/components/MDX/CodeBlock/CodeBlock.tsx | 12 ++++++++----
 beta/src/components/MDX/MDXComponents.tsx       | 12 ++++++++----
 beta/src/styles/index.css                       |  5 +++--
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
index 85ff20af..77ab1d4b 100644
--- a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -49,10 +49,14 @@ const CodeBlock = function CodeBlock({
         className: cn(
           'code-step bg-opacity-10 dark:bg-opacity-20 relative rounded px-1 py-[1.5px] border-b-[2px] border-opacity-60',
           {
-            'bg-blue-40 border-blue-40': line.step === 1,
-            'bg-yellow-40 border-yellow-40': line.step === 2,
-            'bg-green-40 border-green-40': line.step === 3,
-            'bg-purple-40 border-purple-40': line.step === 4,
+            'bg-blue-40 border-blue-40 text-blue-60 dark:text-blue-30 font-bold':
+              line.step === 1,
+            'bg-yellow-40 border-yellow-40 text-yellow-60 dark:text-yellow-30 font-bold':
+              line.step === 2,
+            'bg-green-40 border-green-40 text-green-60 dark:text-green-30 font-bold':
+              line.step === 3,
+            'bg-purple-40 border-purple-40 text-purple-60 dark:text-purple-30 font-bold':
+              line.step === 4,
           }
         ),
       })
diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx
index e6700f6c..b3e17a49 100644
--- a/beta/src/components/MDX/MDXComponents.tsx
+++ b/beta/src/components/MDX/MDXComponents.tsx
@@ -37,10 +37,14 @@ function CodeStep({children, step}: {children: any; step: number}) {
       className={cn(
         'code-step bg-opacity-10 dark:bg-opacity-20 relative rounded px-[6px] py-[1.5px] border-b-[2px] border-opacity-60',
         {
-          'bg-blue-40 border-blue-40': step === 1,
-          'bg-yellow-40 border-yellow-40': step === 2,
-          'bg-green-40 border-green-40': step === 3,
-          'bg-purple-40 border-purple-40': step === 4,
+          'bg-blue-40 border-blue-40 text-blue-60 dark:text-blue-30':
+            step === 1,
+          'bg-yellow-40 border-yellow-40 text-yellow-60 dark:text-yellow-30':
+            step === 2,
+          'bg-green-40 border-green-40 text-green-60 dark:text-green-30':
+            step === 3,
+          'bg-purple-40 border-purple-40 text-purple-60 dark:text-purple-30':
+            step === 4,
         }
       )}>
       {children}
diff --git a/beta/src/styles/index.css b/beta/src/styles/index.css
index 2d71ed71..a5c32b18 100644
--- a/beta/src/styles/index.css
+++ b/beta/src/styles/index.css
@@ -213,14 +213,15 @@
 }
 
 .code-step * {
-  color: black !important;
+  color: inherit !important;
 }
+
 .code-step code {
   background: none !important;
   padding: 2px !important;
 }
 html.dark .code-step * {
-  color: white !important;
+  color: inherit !important;
 }
 
 .mdx-heading {