feat(#3096): update Temporary Notification component for V2

[twjeffery]

Summary

Updates the Temporary Notification (Snackbar) component to use a
comprehensive token-driven architecture. This component previously had all
styling hardcoded - this PR converts all CSS properties to use design
tokens with proper fallback values for V1 compatibility.

Classification: Token-Only (no version prop needed)

Changes

Token Integration

Converted all hardcoded CSS values to use design tokens with fallback
pattern:

property: var(--goa-temporary-notification-[property], [v1-fallback]);

Example conversions:

• Border radius: var(--goa-border-radius-m) →
  var(--goa-temporary-notification-borderRadius, var(--goa-border-radius-m))
• Padding: var(--goa-space-m) var(--goa-space-l) →
  var(--goa-temporary-notification-padding, var(--goa-space-m)
  var(--goa-space-l))
• Colors: Direct global tokens → Component tokens with fallbacks

Spacing Improvements

Flexbox Gap Structure:

• Changed from single gap to row-gap and column-gap for better control
• Row gap: 12px (when elements wrap to new rows)
• Column gap: 16px (between elements on same row)

Icon Spacing:

• Implemented negative margin pattern for variable spacing
• Icon to message: 12px (via icon-margin)
• Message to action button: 16px (via column-gap)

No Version Prop Required

This component is Token-Only - no structural or behavioral changes between V1 and V2:

• Same DOM structure
• Same animation behavior
• Same notification types (basic, success, failure, indeterminate,
  progress)
• Visual differences handled entirely through design token values

Technical Implementation

All 22 tokens created with fallback pattern ensures:

• V1 environments: Use fallback values (preserves exact existing behavior)
• V2 environments: Use new token values (applies V2 styling)
• Same component code: Works in both without version prop

Related

• Parent issue: Design system 2.0 coded component update #2998
• Component issue: Temporary notification 2.0 Update #3096
• Design tokens PR for Temporary Notification
• Figma component

[bdfranck]

Looks good! There are a couple spots where we can keep those tokens.

[twjeffery]

@bdfranck I committed your suggested changes and squashed it back into one commit for us to merge

[bdfranck]

Looks good! I just have two more questions about the margins around the icon.

[twjeffery]

Looks good! I just have two more questions about the margins around the icon.

@bdfranck I appreciate the review, it should be fixed now, I've pushed updates to both this PR and the related design tokens PR GovAlta/design-tokens#98.

[bdfranck]

I looked at the latest changes and see that the icon is properly alined.

Looks good to me! 👍