From 4ed4fb7415dd761f4e8a8db523196a243ca3c52b Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Thu, 17 Feb 2022 03:13:51 +0000
Subject: [PATCH] [Beta] Change highlight styles (#4348)

---
 beta/src/components/MDX/CodeBlock/CodeBlock.tsx | 17 +++++++++--------
 beta/src/components/MDX/ConsoleBlock.tsx        |  2 +-
 beta/src/components/MDX/MDXComponents.tsx       | 10 +++++-----
 beta/src/styles/index.css                       | 11 +++++++++++
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
index 0ec6197a..d5efefd8 100644
--- a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -49,14 +49,15 @@ const CodeBlock = function CodeBlock({
       (line: InlineHiglight) => ({
         ...line,
         elementAttributes: {'data-step': `${line.step}`},
-        className: cn('code-step bg-opacity-10 relative rounded-md p-1 ml-2', {
-          'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4':
-            !noMarkers,
-          'bg-blue-40 before:bg-blue-40': line.step === 1,
-          'bg-yellow-40 before:bg-yellow-40': line.step === 2,
-          'bg-green-40 before:bg-green-40': line.step === 3,
-          'bg-purple-40 before:bg-purple-40': line.step === 4,
-        }),
+        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,
+          }
+        ),
       })
     );
 
diff --git a/beta/src/components/MDX/ConsoleBlock.tsx b/beta/src/components/MDX/ConsoleBlock.tsx
index 9195cdac..187931a5 100644
--- a/beta/src/components/MDX/ConsoleBlock.tsx
+++ b/beta/src/components/MDX/ConsoleBlock.tsx
@@ -61,7 +61,7 @@ function ConsoleBlock({level = 'info', children}: ConsoleBlockProps) {
         className={cn(
           'flex px-4 pt-4 pb-6 items-center content-center font-mono text-code rounded-b-md',
           {
-            'bg-red-30 text-red-40 bg-opacity-25': level === 'error',
+            'bg-red-30 text-red-40 bg-opacity-10': level === 'error',
             'bg-yellow-5 text-yellow-50': level === 'warning',
             'bg-gray-5 text-secondary dark:text-secondary-dark':
               level === 'info',
diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx
index 74c3403a..7bfdcf64 100644
--- a/beta/src/components/MDX/MDXComponents.tsx
+++ b/beta/src/components/MDX/MDXComponents.tsx
@@ -32,12 +32,12 @@ function CodeStep({children, step}: {children: any; step: number}) {
     <span
       data-step={step}
       className={cn(
-        'code-step bg-opacity-10 relative rounded-md p-1 ml-2 pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4',
+        '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 before:bg-blue-40': step === 1,
-          'bg-yellow-40 before:bg-yellow-40': step === 2,
-          'bg-green-40 before:bg-green-40': step === 3,
-          'bg-purple-40 before:bg-purple-40': step === 4,
+          '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,
         }
       )}>
       {children}
diff --git a/beta/src/styles/index.css b/beta/src/styles/index.css
index 59b925e8..13b6743e 100644
--- a/beta/src/styles/index.css
+++ b/beta/src/styles/index.css
@@ -174,3 +174,14 @@
   --hjFeedbackAccentColor: rgb(230, 247, 255) !important;
   --hjFeedbackAccentTextColor: rgb(73, 119, 171) !important;
 }
+
+.code-step * {
+  color: black !important;
+}
+.code-step code {
+  background: none !important;
+  padding: 2px !important;
+}
+html.dark .code-step * {
+  color: white !important;
+}