From 99bb85ecf43d58fbd1063f356e628ccc5efe3b67 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 18 Sep 2025 08:06:26 +0530
Subject: [PATCH] fix code block header background

---
 src/app/styles/CustomHtml.css.ts | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/app/styles/CustomHtml.css.ts b/src/app/styles/CustomHtml.css.ts
index f717669c..ba7b9214 100644
--- a/src/app/styles/CustomHtml.css.ts
+++ b/src/app/styles/CustomHtml.css.ts
@@ -1,6 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 import { color, config, DefaultReset, toRem } from 'folds';
+import { ContainerColor } from './ContainerColor.css';
 
 export const MarginSpaced = style({
   marginBottom: config.space.S200,
@@ -92,11 +93,14 @@ export const CodeBlock = style([
     overflow: 'hidden',
   },
 ]);
-export const CodeBlockHeader = style({
-  padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
-  borderBottomWidth: config.borderWidth.B300,
-  gap: config.space.S200,
-});
+export const CodeBlockHeader = style([
+  ContainerColor({ variant: 'Surface' }),
+  {
+    padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
+    borderBottomWidth: config.borderWidth.B300,
+    gap: config.space.S200,
+  },
+]);
 export const CodeBlockInternal = style([
   CodeFont,
   {