feat: Mangrove Drupal bridge and gap closer

[khawkins98]

This is a migration for consolidating utility styles between the Mangrove component library and the Drupal theme (undrr_common). It will both reduce entropy in Drupal and allow for more consistency between mangrove-Drupal and support other non-druapl sites in being more cohesive.

The problem

Currently, styling is split across two locations:

• Mangrove: Higher-order React components with strong design tokens but limited utility classes
• Drupal theme: ~1,175 lines of utility classes in variations.scss plus Bootstrap 3.3.7

This creates style drift, duplicate maintenance, and Bootstrap legacy debt.

The solution

A four-phase migration to establish Mangrove as the single source of truth:

1. Phase 1: Add comprehensive utility classes to Mangrove (spacing, display, flexbox, typography,
   borders, shadows, position, sizing)
2. Phase 2: Create backward-compatibility bridge layer for gradual migration
3. Phase 3: Migrate Drupal templates to use Mangrove classes
4. Phase 4: Remove Bootstrap 3.3.7 and legacy utilities

Key decisions

• Naming convention: Full property names for clarity (e.g., mg-u-margin-top-200 not
  mg-u-mt-200)
• Spacing mapping: Map legacy pixel values to closest Mangrove token (10px base makes most
  mappings exact)
• Responsive utilities: Support --sm, --md, --lg, --xl breakpoint suffixes
• Bootstrap removal: Complete removal as part of Phase 4

[github-actions]

🔍 Visual review for your branch is published 🔍

Here are the links to:

• the Visual Review Page

• the latest build on chromatic

• the full storybook

[svlcek-cge]

@khawkins98 I've reviewed the plan and wonder if effectively reinventing tailwind classes is really the way to go. It's ineffective both from the perspective of maintenance and LLM-aided generation

[svlcek-cge]

Just an FYI https://github.com/unisdr/undrr-mangrove/pull/678/changes to me it seems a lot cleaner, but haven't really tested anything @khawkins98

[svlcek-cge]

I've closed the #678 rough poc, it's still there for reference, when you decide what direction to move