AtomSurface

import SwiftUI
import EandTokens

// Shared surface atom: radius 20, clipped. surfaceColor: default (white), subtle, sunken,
// midnight-base, midnight-raised, glass-midnight, glass-white (+ frost) or brand.
struct AtomSurface<Content: View>: View {
  var fill: Color = EandColor.surfaceBaseInverse    // e.g. EandColor.surfaceRaisedMidnight
  @ViewBuilder var content: Content
  var body: some View {
    content
      .background(fill)
      .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius7))
  }
}

When to use

• Use as the background of a custom block that must sit on the system's surfaces, when no higher-level component fits.
• Don't use where a component already owns its surface: Card, Section, ListRow and the other cards bring their own.

Choosing a surface

The values are Figma's variant labels, which do not match its own token names: default binds surface/base/inverse. level is the deprecated V1.0 axis; use surfaceColor.

Props

Design

Figma source: .default-surface — etisalat Consumer App DSL V1.2 · .inverse-surface

• Radius border-radius/7 (20); content is clipped.
• glass-white carries a backdrop blur from effects/glass/lg/frost, the glass effect bound in Figma.
• brand comes from the Plans page copy of the atom; the shared atom has no brand value.
• The page-local copies of this atom disagree with the shared one; the code follows the shared atom.