fix: the rainbow

[adaam2]

Fix Rainbow Button Z-Index Issues in Stacking Contexts

Problem

The rainbow/brand variant of the Button component was experiencing z-index issues in certain stacking contexts, causing the gradient background to appear behind other elements or not display correctly. This was due to the use of CSS pseudo-elements (::before and ::after) for the gradient background, which created stacking context problems.

Root Cause

The original implementation used CSS pseudo-elements for the brand variant's gradient background:

/* Original approach - problematic */
.brand-button::before {
  /* gradient background */
}
.brand-button::after {
  /* gradient blur effect */
}

Pseudo-elements create their own stacking contexts and can be affected by the parent element's z-index, transform, opacity, and other CSS properties that create new stacking contexts. This caused the gradient to appear behind other elements in complex layouts.

Solution

Replaced the pseudo-element approach with actual child elements to avoid stacking context issues:

// New approach - using child elements
{isBrandVariant && (
  <span className="bg-btn-brand hover:bg-btn-brand-hover disabled:bg-btn-brand-disabled pointer-events-none absolute inset-0 z-10 rounded-[inherit]" />
)}
<span className="relative z-20 flex items-center justify-center gap-2">
  {processedChildren}
</span>

Key Changes

1. Replaced pseudo-elements with child elements: The gradient background is now rendered as a <span> element instead of ::before pseudo-element
2. Proper z-index layering: Background span has z-10, content span has z-20
3. Maintained flexbox layout: Added flex items-center justify-center to the content span to preserve icon alignment
4. Preserved gap spacing: Added gap classes to the content span to maintain proper spacing between icons and text
5. Fixed asChild functionality: Ensured the Slot component receives a single child when asChild is true

Why This Works

• Child elements don't create stacking context issues: Unlike pseudo-elements, child elements are part of the normal document flow and don't create new stacking contexts
• Explicit z-index control: We can explicitly control the z-index of each layer without interference from parent stacking contexts
• Maintains all functionality: Icon alignment, gap spacing, and asChild functionality all work correctly