feat: Change visual emphasis of code snippets and info callout (#14065)

Code snippets across the documentation application now feature a
consistent border style, aligning with the `Expandable` component's
`callout` styling for visual cohesion.

This involved updating borders to `1px solid var(--accent-11)` and
`border-radius` to `6px` across various code-related components.

Also updated callout-info boxes to an accent of 6 instead to reduce
visual of the container itself. Text styling is unchanged to still pull
in on text as needed, Creates a better contast.

Specific changes were applied to:
* Main code blocks in
`src/components/codeBlock/code-blocks.module.scss`:
* `pre[class*='language-']` now has `border: 1px solid var(--accent-11)`
and `border-radius: 6px`.
* The `pre` element's `border-radius` was also updated to `6px` for
consistency.
*   Code tabs in `src/components/codeTabs.tsx`:
* The `TabBar` and the code `Container` now use `1px solid
var(--accent-11)` borders.
* `TabBar` `border-radius` was set to `6px 6px 0 0`, and `Container`
`border-radius` to `0 0 6px 6px` to maintain rounded corners.
* Code highlights in `src/components/codeHighlights/codeHighlights.tsx`:
* The `HighlightBlockContainer` received `border: 1px solid
var(--accent-11)` and `border-radius: 6px`.
* Updated callout styles.scss to reduce the intensity of highlight color

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: 2 people

src/components/callout/styles.scss

@@ -59,7 +59,7 @@
 }
 
 .callout-info {
-  --callout-highlight-color: var(--accent-11);
+  --callout-highlight-color: var(--accent-6);
   background: var(--accent-2);
 }
 

src/components/codeBlock/code-blocks.module.scss

@@ -5,7 +5,7 @@
 
   pre {
     background-color: var(--code-background);
-    border-radius: 0 0 0.25rem 0.25rem;
+    border-radius: 0 0 6px 6px;
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -17,8 +17,8 @@
 
   pre[class*='language-'] {
     font-size: 0.85rem;
-    border: 0;
-    border-radius: 4px;
+    border: 1px solid var(--accent-11);
+    border-radius: 6px;
     margin: 0;
   }
 

src/components/codeHighlights/codeHighlights.tsx

@@ -132,7 +132,9 @@ const HighlightBlockContainer = styled('div')`
   background-color: rgba(239, 239, 239, 0.06);
   position: relative;
 
+  border: 1px solid var(--accent-11);
   border-left: 4px solid var(--accent-purple);
+  border-radius: 6px;
 
   .highlight-line {
     padding-left: 8px !important;

src/components/codeTabs.tsx

@@ -136,18 +136,21 @@ export function CodeTabs({children}: CodeTabProps) {
 const Container = styled('div')`
   pre[class*='language-'] {
     padding: 10px 12px;
-    border-radius: 0 0 3px 3px;
+    border-radius: 0 0 6px 6px;
+    border: 1px solid var(--accent-11);
+    border-top: none;
   }
 `;
 
 const TabBar = styled('div')`
   background: var(--code-background);
+  border: 1px solid var(--accent-11);
   border-bottom: 1px solid #40364a;
   height: 36px;
   display: flex;
   align-items: center;
   padding: 0 0.5rem;
-  border-radius: 3px 3px 0 0;
+  border-radius: 6px 6px 0 0;
 `;
 
 const TabButton = styled('button')`