Component: Callout styles - #3357
Merged
Merged
Conversation
Callouts were a tinted panel with a 3px rule down the left edge and a
square-ish 8px radius. The Figma callout drops the rule, uses a 6px
radius, and leads with a 24px status icon in the panel's own color.
The panel is now a two-column grid: the icon sits in column one as a
::before mask, everything the markdown emits goes in column two. That
keeps `:::div{.hint}` working untouched across all 1409 callouts in the
docs, so no markup or authoring change is needed.
Body text drops to 14px/20px on colorCalloutTextBody, blocks inside a
callout sit 12px apart, and links take text primary with an underline,
all per the design. Bold text takes the per-state title color: markdown
gives us no title element, and roughly a fifth of callouts open with a
bold lead-in that plays that part.
The four icons come from @octopusdeploy/design-system-icons, the same
source as the existing check/copy/chevron assets, so the glyphs match
what Figma composed the component from. The border-color-* callout
variables go with the rule that used them.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
Pull request environment is available at https://stoctodocspr3357.z22.web.core.windows.net. You can view the ephemeral environment status in Octopus Deploy. This environment will be automatically deprovisioned when the pull request is closed, or after 7 days of inactivity. |
enf0rc3
changed the title
enf0rc3
marked this pull request as ready for review
August 13, 2026 22:01
ellen-octopus
approved these changes
Aug 13, 2026
ellen-octopus
left a comment
ellen-octopus
left a comment
Contributor
There was a problem hiding this comment.
Looks good to me, thank you @enf0rc3 🤩
borland
approved these changes
Aug 13, 2026
borland
left a comment
borland
left a comment
Contributor
There was a problem hiding this comment.
LGTM, I like the new style
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
Implements the callout from the Figma design.
One thing worth checking against your expectation: the design has no blue line down the left edge. That rule is what the callouts have today; Figma replaces it with a 24px status icon in the panel's own color, a 6px radius, and no border. That is what this PR builds.
What changed
colorCalloutIcon*colorCalloutTextBodyocto-blueHow
The panel is a two-column grid. The icon is a
::beforemask in column one, everything markdown emits goes in column two.:::div{.hint}and friends are untouched, so all 1409 callouts in the docs pick this up with no authoring change.Markdown gives us no title element, so bold text inside a callout takes the per-state title color — about a fifth of callouts open with a bold lead-in that plays that part.
Four icons added under
src/assets/icons/, traced from@octopusdeploy/design-system-icons(the same source as the existing check/copy/chevron assets):info-circle,check-circle,exclamation-triangle,exclamation-circle..questionis left alone — it is the FAQ block, not a callout.Verified with
astro build(2674 pages, clean) and by reading the compiled CSS. No live check, per your CSS preference — the preview is the place to eyeball it.Results
Lightmode
Before:
Light Mode:
Dark Mode:
Before:
After:
🤖 Generated with Claude Code