diff --git a/src/components/callout/styles.scss b/src/components/callout/styles.scss index d1ff6e4ced986..20493ddadb01b 100644 --- a/src/components/callout/styles.scss +++ b/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); } diff --git a/src/components/codeBlock/code-blocks.module.scss b/src/components/codeBlock/code-blocks.module.scss index 384df49dcf9d4..9c2cde692b027 100644 --- a/src/components/codeBlock/code-blocks.module.scss +++ b/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; } diff --git a/src/components/codeHighlights/codeHighlights.tsx b/src/components/codeHighlights/codeHighlights.tsx index 52303c46bb184..ca015825853b5 100644 --- a/src/components/codeHighlights/codeHighlights.tsx +++ b/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; diff --git a/src/components/codeTabs.tsx b/src/components/codeTabs.tsx index 4cb2005b54286..64a19962bb535 100644 --- a/src/components/codeTabs.tsx +++ b/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')`