Spike: styling update for design system 2.0 - Callout

[twjeffery]

Summary

Video of changes

Component 2.0 Update Process Template

This PR serves as a proof of concept and template for the broader Component 2.0 initiative. The systematic approach demonstrated here can be applied to enhance all components in the design system.

• Video overview of playground file with changes

• Related issue: Callout 2.0 update #2915

• Updated design in Figma

  New Features

  • High emphasis: Dark statusbar with light text for critical messages
  • Medium emphasis: Light statusbar, maintains existing default behavior (backward compatible)
  • Low emphasis: Minimal styling with smart layout adaptation
  • Smart layout: Low emphasis automatically switches between vertical (with heading) and horizontal (without heading) layouts
  • Responsive design: Optimized padding and spacing for mobile vs desktop viewports
  • Comprehensive design tokens: Semantic token system for all emphasis-related styling

  Visual Examples

  High Emphasis

  For critical alerts and emergency notifications:

  <GoaCallout type="emergency" emphasis="high" heading="System Outage">
    Critical system maintenance in progress. All services temporarily
  unavailable.
  </GoaCallout>

Medium Emphasis (default)

Standard callouts, maintains existing behavior:

<GoaCallout type="important" emphasis="medium" heading="Important Update">
    New features available in your dashboard.
  </GoaCallout>

Low Emphasis

Subtle notifications with smart layout:

// With heading - vertical layout
  <GoaCallout type="information" emphasis="low" heading="Tip">
    You can save time by using keyboard shortcuts.
  </GoaCallout>

// Without heading - horizontal layout
  <GoaCallout type="information" emphasis="low">
    Auto-save enabled for this form.
  </GoaCallout>

Testing

Since playground files are local-only, here's the complete test code you can use to verify all functionality:

 <GoaBlock direction="column" gap="l">
            <GoaText tag="h1" size="heading-l">
              Callout Emphasis Levels - Testing All Variants
            </GoaText>

            {/* High Emphasis Tests */}
            <GoaText tag="h2" size="heading-m" mt="xl" mb="m">
              High Emphasis (Critical Attention)
            </GoaText>

            <GoaCallout type="emergency" emphasis="high" heading="System 
  Emergency">
              Critical system failure detected. Immediate action required.
            </GoaCallout>

            <GoaCallout type="important" emphasis="high" heading="Urgent 
  Action Required">
              Your account requires immediate verification to prevent
  suspension.
            </GoaCallout>

            <GoaCallout type="success" emphasis="high" heading="Mission 
  Critical Success">
              Deployment completed successfully across all production
  environments.
            </GoaCallout>

            <GoaCallout type="information" emphasis="high" heading="Breaking 
  News">
              Major platform update deployed with new security features.
            </GoaCallout>

            {/* Medium Emphasis Tests */}
            <GoaText tag="h2" size="heading-m" mt="xl" mb="m">
              Medium Emphasis (Default Behavior)
            </GoaText>

            <GoaCallout type="emergency" emphasis="medium" heading="Standard 
  Alert">
              System maintenance scheduled for tonight at 11 PM.
            </GoaCallout>

            <GoaCallout type="important" emphasis="medium" heading="Important
   Notice">
              New features available in your dashboard.
            </GoaCallout>

            <GoaCallout type="success" emphasis="medium" heading="Task 
  Completed">
              Your document has been successfully uploaded.
            </GoaCallout>

            <GoaCallout type="information" emphasis="medium" 
  heading="Information">
              Click here to learn more about our new privacy policy.
            </GoaCallout>

            {/* Low Emphasis Tests */}
            <GoaText tag="h2" size="heading-m" mt="xl" mb="m">
              Low Emphasis (Subtle Notifications)
            </GoaText>

            <GoaCallout type="information" emphasis="low" heading="Pro Tip">
              You can use keyboard shortcuts to navigate faster.
            </GoaCallout>

            <GoaCallout type="success" emphasis="low" heading="Saved">
              Your changes have been automatically saved.
            </GoaCallout>

            {/* Low Emphasis Without Heading (Smart Layout) */}
            <GoaText tag="h3" size="heading-s" mt="l" mb="s">
              Low Emphasis - Smart Layout (No Heading = Horizontal)
            </GoaText>

            <GoaCallout type="information" emphasis="low">
              Auto-save is enabled for this form.
            </GoaCallout>

            <GoaCallout type="success" emphasis="low">
              Form validation passed.
            </GoaCallout>

            {/* Backward Compatibility Tests */}
            <GoaText tag="h2" size="heading-m" mt="xl" mb="m">
              Backward Compatibility (Existing Behavior Preserved)
            </GoaText>

            <GoaCallout type="important" heading="Default Behavior">
              This uses default emphasis (medium) - existing code unchanged.
            </GoaCallout>

            <GoaCallout type="information">
              This also defaults to medium emphasis - no breaking changes.
            </GoaCallout>

            {/* Deprecated Event Type */}
            <GoaText tag="h3" size="heading-s" mt="l" mb="s">
              Deprecated Type Support
            </GoaText>

            <GoaCallout type="event" emphasis="medium" heading="Event 
  Notice">
              Event type still works (deprecated but functional).
            </GoaCallout>

            {/* Edge Cases */}
            <GoaText tag="h2" size="heading-m" mt="xl" mb="m">
              Edge Cases & Responsive Testing
            </GoaText>

            <GoaText size="body-s" mb="m">
              Resize your viewport to test responsive behavior:
            </GoaText>

            <GoaCallout type="important" emphasis="high" heading="Very Long 
  Heading That Should Wrap Properly on Small Screens">
              This callout tests how the component handles long headings and
  content across different viewport sizes. The padding and layout should
  adjust appropriately.
            </GoaCallout>

            <GoaCallout type="information" emphasis="low">
              This low emphasis callout without a heading should switch to
  horizontal layout on all screen sizes, with the icon positioned to the left
   of the content.
            </GoaCallout>
          </GoaBlock>

Key Visual Differences to Verify

• High emphasis: Dark backgrounds on statusbar, white text on headings
• Medium emphasis: Light backgrounds, standard text colors
• Low emphasis: Very light backgrounds, reduced top padding (4px vs 16px)
• Smart layout: Low emphasis without heading displays horizontally
• Mobile responsive: Reduced padding and smaller icons on narrow screens

Responsive Behavior

• Mobile (≤623px): Compact padding, adjusted icon sizes
• Desktop (≥624px): Full padding, optimized spacing
• Smart layout: Low emphasis adapts layout based on heading presence

Backward Compatibility

• emphasis="medium" is the default, preserving existing behavior
• All existing props and styling remain unchanged
• Deprecated size="medium" continues to work with compatibility tokens

Process with Ai

Phase 1-2: Discovery & Requirements

• Analyze GitHub issues and component enhancement requests
• Review existing component architecture and identify improvement opportunities
• Conduct structured requirements gathering (can be systematized with
  templates)
• Define enhancement patterns that align with design system principles

Phase 3: Rapid Prototyping

• Use local design tokens for fast iteration
• Implement core functionality with placeholder styling
• Build responsive behavior from the ground up

Phase 4: Iterative Refinement

• Create comprehensive test routes for stakeholder review
• Multiple refinement cycles based on visual and functional testing
• Resolve technical challenges (CSS specificity, responsive behavior, etc.)

Phase 5: Design Token Integration

• Move from prototype tokens to production-ready semantic tokens
• Handle integration challenges and conflicts
• Prepare for proper design token release workflow

Next Steps (if we want to continue this approach)

1. Design token release: Move temporary tokens to proper design token system
2. Documentation: Add emphasis level guidelines to design system docs
3. Cross-component consistency: Apply similar emphasis patterns to other
   components
4. Accessibility audit: Ensure emphasis levels meet accessibility
   guidelines