feat(callouts): visual refresh of the Aside component#11481
Open
jd wants to merge 1 commit into
Open
Conversation
Align Aside with the post-Pass A design system:
- 4px → 3px left border, calmer accent
- 10% tint of transparent → 8% (light) / 12% (dark) tint of
the content surface — readable across modes, no muddiness
- 8px right border-radius for a finished card edge
- Sentence-case titles ("Note", "Tip", "Caution", "Danger")
instead of uppercase eyebrows, dropping the marketing-toned
defaults ("Did you know?", "Heads-up!")
- Title weight 700 → 600
- Inline Octicon SVGs → lucide icons via astro-icon
Directive syntax, types, and the {type,title} prop API are
unchanged. User-supplied title overrides continue to work.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Change-Id: I74cbfe5ee3722145d61b1b2c69841bab77d8be84
Contributor
Merge ProtectionsYour pull request matches the following merge protections and will not be merged until they are valid. 🔴 👀 Review RequirementsWaiting for
This rule is failing.
🔴 🔎 ReviewsWaiting for
This rule is failing.
🟢 🤖 Continuous IntegrationWonderful, this rule succeeded.
🟢 Enforce conventional commitWonderful, this rule succeeded.Make sure that we follow https://www.conventionalcommits.org/en/v1.0.0/
🟢 📕 PR descriptionWonderful, this rule succeeded.
|
There was a problem hiding this comment.
Pull request overview
This PR updates the Aside callout component to match the updated design system while keeping the existing { type, title } API and directive behavior intact.
Changes:
- Updates default callout titles to sentence case (“Note”, “Tip”, “Caution”, “Danger”).
- Replaces inline Octicon SVG paths with
astro-iconlucide icons. - Refreshes styling (3px accent border, content-surface tint with light/dark adjustments, right-side border radius, updated title typography/layout).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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.
Align Aside with the post-Pass A design system:
the content surface — readable across modes, no muddiness
instead of uppercase eyebrows, dropping the marketing-toned
defaults ("Did you know?", "Heads-up!")
Directive syntax, types, and the {type,title} prop API are
unchanged. User-supplied title overrides continue to work.
Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com