[beta] Update CodeStep colors (#5089)

* [beta] Update CodeStep colors

* Add back green

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,
           }
         ),
       })

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}

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 {