Scrim

import SwiftUI
import EandTokens

// Scrim: surface/overlay/scrim (midnight 50%) under a 20pt glass blur, full-bleed, behind
// every bottom sheet and modal. Tapping it dismisses the overlay on top.
struct PlanScreen: View {
  @State private var showSheet = true
  var body: some View {
    ZStack(alignment: .bottom) {
      HomeScreen()
      if showSheet {
        EandColor.surfaceOverlayScrim
          .background(.ultraThinMaterial)             // ≈ glass-md, blur 20
          .ignoresSafeArea()
          .onTapGesture { showSheet = false }
          .transition(.opacity)
        BottomSheet(title: "Choose a plan") { PlanPicker() }
          .transition(.move(edge: .bottom))
      }
    }
    .animation(.easeOut(duration: 0.25), value: showSheet)
  }
}

When to use

• Use behind a surface that blocks the rest of the screen until it is dismissed. BottomSheet and the bottom-sheet integration of AlertModal already render one, so reach for Scrim only when you build your own overlay.
• Don't use as a tint over imagery or inside a card. It always covers the whole viewport.

Behaviour

Scrim is a fixed layer over the viewport (inset: 0, z-index: 1000) that renders its children. It carries no dialog semantics and no dismiss logic of its own:

• Put role="dialog" and aria-modal="true" on the surface you place inside it.
• To close on an outside tap, handle onClick on the scrim and stop propagation on the surface, as BottomSheet does.
• Position the surface with style, which merges over the defaults.

import type { ReactNode } from 'react';
import { Scrim } from '@eand/react-design-system';

function Sheet({ onClose, children }: { onClose: () => void; children: ReactNode }) {
  return (
    <Scrim onClick={onClose} style={{ display: 'flex', alignItems: 'flex-end' }}>
      <div role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </Scrim>
  );
}

Props

Scrim has no props of its own. It accepts every div attribute (HTMLAttributes<HTMLDivElement>), including children, style and onClick.

Design

Figma source: scrim — etisalat Consumer App DSL V1.2

• Fill surface/overlay/scrim: midnight at 50%.
• A GLASS effect of radius 20 (effect style surface/glass/glass-md), rendered as a 20px backdrop blur, as the library's other glass surfaces are.
• Figma draws it at 375 × 812, the device frame; in code it fills the viewport.