fix(callout): match Figma styles for all variants

[Shreyag02]

Description

Aligns the Callout component with the design spec across all 24 type × outline × highContrast variants, and fixes several component-quality issues surfaced during the audit.

Both the design colours and the CSS design tokens were resolved to OKLCH for exact comparison (not eyeballed).

Styling fixes:

• attention + outline + highContrast border → border-attention-primary (the reported bug — was a grey base-tertiary clashing with the cream fill); success had the same bug → border-success-primary
• grey / normal (non-high-contrast): text/icon → foreground-base-secondary; outline border → border-base-tertiary
• Dismiss (close) icon → updated with IconButton
• Default width 318px → 400px; removed an inert gap on .callout-success
• Documented the intentional gradient + high-contrast / outline behaviour in CSS

Component-quality fixes (found during audit):

• width={0} is now applied (was dropped by a truthiness guard); style.width honoured asfallback
• dismissible without onDismiss now self-hides (uncontrolled fallback); stays controlled when onDismiss is provided
• max-width: 100% + overflow-wrap: break-word to prevent overflow / long-word breakout
• Simplified getRole and removed a duplicate type default

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactor (no functional changes, no bug fixes just code improvements)
• Chore (changes to the build process or auxiliary tools and libraries such as documentation generation)
• Style (changes that do not affect the meaning of the code (white-space, formatting, etc))
• Test (adding missing tests or correcting existing tests)
• Improvement (Improvements to existing code)
• Other (please specify)

Note: the default-width change (318px → 400px) and the uncontrolled-dismiss fallback are minor behaviour changes for consumers who relied on the old defaults — flagging for reviewer awareness.

How Has This Been Tested?

• Automated design audit — resolved all 24 variants' fills/borders/text and the CSS tokens to OKLCH; every measurable property (colours, border 0.5px, radius 4px, padding 8px, icon 16px, gaps 8px, typography) matches.
• Unit tests — added 4 (controlled vs uncontrolled dismiss, width={0}, style.width fallback). Callout: 29/29 passing; full raystack suite: 1875/1875 passing.
• tsc clean (no callout errors) and Biome clean on all changed files.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (.mdx files)
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works

Screenshots (if appropriate):

N/A

Related Issues

N/A

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Jun 8, 2026 8:07am

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR adds uncontrolled (self-hiding) dismissal to Callout while preserving numeric widths (including 0), simplifies role selection, and swaps the dismiss button to IconButton/Cross1Icon. callout.module.css updates base width to 400px, message wrapping, actions gap, gradient formatting, and several foreground/border token targets. Tests add controlled vs uncontrolled dismissal cases and width edge-case checks. Docs and props JSDoc clarify dismissal ownership and accessibility; the examples page gains a Callout showcase with a controlled dismissible example.

Suggested reviewers

• rsbh
• rohanchkrabrty
• paanSinghCoder

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main objective: aligning Callout component styling with Figma design across all variants.
Description check	✅ Passed	The description is comprehensive and directly related to the changeset, detailing styling fixes, component-quality improvements, testing, and behavior changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}