feat: Change visual emphasis of code snippets and info callout #14065
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
codyde
changed the title
Bundle ReportChanges will increase total bundle size by 328 bytes (0.0%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: sentry-docs-server-cjsAssets Changed:
Files in
App Routes Affected:
view changes for bundle: sentry-docs-client-array-pushAssets Changed:
Files in
|
rahulchhabria
approved these changes
Jun 18, 2025
antonpirker
pushed a commit
that referenced
this pull request
Jun 24, 2025
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 <[email protected]>
bitsandfoxes
pushed a commit
that referenced
this pull request
Jul 3, 2025
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 <[email protected]>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Code snippets across the documentation application now feature a consistent border style, aligning with the
Expandablecomponent'scalloutstyling for visual cohesion.This involved updating borders to
1px solid var(--accent-11)andborder-radiusto6pxacross 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:
src/components/codeBlock/code-blocks.module.scss:pre[class*='language-']now hasborder: 1px solid var(--accent-11)andborder-radius: 6px.preelement'sborder-radiuswas also updated to6pxfor consistency.src/components/codeTabs.tsx:TabBarand the codeContainernow use1px solid var(--accent-11)borders.TabBarborder-radiuswas set to6px 6px 0 0, andContainerborder-radiusto0 0 6px 6pxto maintain rounded corners.src/components/codeHighlights/codeHighlights.tsx:HighlightBlockContainerreceivedborder: 1px solid var(--accent-11)andborder-radius: 6px.