[Beta] Change highlight styles (#4348)

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

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',

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}

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;
+}