East Blue
KeepReady
Overlay Component link

A full-viewport scrim used to dim background content behind sheets, modals, and tooltips. Three strength tiers.

Keep — all findings resolved
All four DS Health traits pass and nothing is open. Three strength tiers — Weak 24%, Default 40%, Strong 56% — each bind their own semantic token, and the 360×800 default scales with its instance.
In Context

How the overlay appears in a real product screen — it dims the Tree Details page behind a modal, so the plant confirmation and its Okay button stand out.

Overlay component shown on the GCash Tree Details screen: a dark scrim covers the page while a modal asks You're about to plant a Plant Name, with an Okay button
Live Preview
Activity

Send Money

Choose a recipient from your contacts or enter a mobile number.

Continue
Properties
Strength
DS Health
Reusable
Pass
Works as the dim layer behind any modal surface. Ships at a 360×800 default and the dim layer scales exactly with the instance — verified rendering at 640, 761, 826 and 932.
Self-contained
Pass
Owns its fill and opacity. Nothing external required to render.
Consistent
Pass
Three named strengths (Weak · Default · Strong) under a single Strength property. Naming no longer implies a missing sibling.
Composable
Pass
Sits behind sheets, dialogs and drawers and sizes correctly at any placement. Layer order is documented — Content → Overlay → Floating surface — so teams no longer have to infer it.
Behavior
State iOS Android Figma Property Notes
Show / hide Yes Yes Not defined Fades with the presentation transition of its owning surface.
Tap to dismiss Yes Yes Not annotated Contract: tap-scrim dismisses unless surface is marked modal.
Scroll lock N/A N/A Handled by surface Owning sheet/dialog locks background scroll on mount.
Focus / a11y Yes Yes Implicit Scrim itself is not focusable — owning surface traps focus.
Issues
  • Strength property added. v2.0: Weak (24%) · Default (40%) · Strong (56%), replacing the single 56% variant whose -strong token name implied a missing sibling. (C2) C2 · Variant & Property Naming
  • Default frame resized and verified at scale. v2.0: 360×640 → 360×800, with the dim layer tracking the instance exactly at every size — verified across five placements from 640 to 932. (C4) C4 · Native Mappability
  • Container wrapper removed. v2.0: Structure simplified to COMPONENT → dim, one layer deep. (C1) C1 · Layer Structure & Naming
  • Tap-to-dismiss contract settled. v2.1: The behaviour is documented on this page — tap outside dismisses the surface above unless that surface is modal, in which case dismissal requires an explicit action. Layer order is Content → Overlay → Floating surface. (C5 · Docs) C5 · Interaction State Coverage
  • Strength tiers bound to their own tokens. v2.2: Confirmed by the component owner — each tier now resolves through its own semantic token rather than a shared fill with a hand-set opacity, so a theme change is one edit and developers no longer copy three loose alpha values. Not independently verifiable from the assessment tooling, which cannot read variable bindings: the paint still reports as #020E22 at 24/40/56% opacity either way. (C3 · Token) C3 · Token Coverage
  • "Don't Use" label clarified. v2.2: Closed by owner confirmation — the label belongs to the enclosing Figma section, which is a working container for in-progress material, not a directive against the component. The Overlay set at 4465:20631 inside it is current and is what this page documents. (C1) C1 · Layer Structure & Naming
  • Cross-system naming documented. v2.2: Closed — the team keeps Overlay. Other systems name this primitive differently: Scrim (Material 3), Backdrop (Fluent, Polaris), Mask (Ant), Blanket (Atlassian), Underlay (Spectrum). Recorded here so anyone cross-referencing another system finds the equivalent rather than assuming a gap. (Docs) C1 · Layer Structure & Naming

Component Playground

Layout

Typography

Colors

Installation Planned API

iOS — Swift Package Manager

.package(url: "https://github.com/AY-Org/eb-ds-ios", from: "1.0.0")

Android — Gradle (Kotlin DSL)

implementation("com.eastblue.ds:overlay:1.0.0")

Import

import EastBlueDS
import com.eastblue.ds.overlay.*
Property Mapping

Strength is the set’s only property; each variant is a single `dim` rectangle bound to its own token (v2.x). Presentation, dismissal and the content above the scrim are platform concerns and have no Figma property.

Figma PropertySwiftUICompose
Strength — Weak, Default, Strong .ebStrength(.weak / .default / .strong) strength = EBOverlayStrength.Weak / Default / Strong
Usage Snippets Planned API
Weak
EBOverlay(isPresented: $showSheet)
    .ebStrength(.weak)
EBOverlay(
    visible = showSheet,
    onDismiss = { },
    strength = EBOverlayStrength.Weak
)
Default
EBOverlay(isPresented: $showSheet)
    .ebStrength(.default)
EBOverlay(
    visible = showSheet,
    onDismiss = { },
    strength = EBOverlayStrength.Default
)
Strong
EBOverlay(isPresented: $showSheet)
    .ebStrength(.strong)
EBOverlay(
    visible = showSheet,
    onDismiss = { },
    strength = EBOverlayStrength.Strong
)
Accessibility
RequirementiOSAndroid
Modal scope .accessibilityViewIsModal(true) on the surface above the scrim so VoiceOver ignores what is dimmed. ModalBottomSheet / Dialog scope TalkBack to the surface.
Tap to dismiss The scrim is a Button labelled "Dismiss"; .accessibilityAction(.escape) also dismisses. Scrim click calls onDismissRequest; back press dismisses.
Not announced .accessibilityHidden(true) on the dim rectangle itself. clearAndSetSemantics on the scrim.
Reduce transparency Strong is the floor when Reduce Transparency is on. Same — use Strong when the user reduces transparency.
Usage Guidelines

Do

Use Default under sheets and dialogs.

Don't

Don’t use Weak under a dialog that needs focus.

Do

Use Strong over imagery or busy screens.

Don't

Don’t stack two overlays — one scrim per surface.

Do

Size the scrim to the window, not the sheet.

Don't

Don’t inset the scrim — it covers the safe areas too.

Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready One dim rectangle per variant — read on 4465:20632.
C2 Variant & Property Naming Ready Strength — Weak, Default, Strong.
C3 Token Coverage Ready No text layers. The three fills resolve to #020E22 at 24 / 40 / 56%; variable bindings are not readable with the plugin — confirm in Dev Mode.
C4 Native Mappability Ready One enum — maps onto EBOverlay over the platform scrim.
C5 Interaction State Coverage Ready Tap-to-dismiss contract settled (v2.x); no visual states beyond the three strengths.
C6 Asset & Icon Quality Not Applicable No icons or images.
Variants Inventory (3 total)

1 Strength × 3 values = 3 variants

StrengthNodeDimensions
Weak4465:20549360 × 800
Default4465:20632360 × 800
Strong4465:20634360 × 800
2.3.1 — September 2026Patch
Style and Code tabs re-read · node 4465:20631
Style tab rebuilt from the three live variants. One card per Strength value, each drawn over the same preview stage; the three opacities verified on 4465:20549, 4465:20632 and 4465:20634. Padding, gap, alignment and colour tokens are not readable with the plugin and stay —.
Docs
Code tab regrouped on the Strength schema. Property Mapping trimmed to the one Figma property, Usage Snippets per Strength, Guidelines added, Variants Inventory on the three live nodes.
Docs
2.3 — September 2026Minor
Style + Code tabs rebuilt against node 4465:20631
Panel reduced to the one real property — the Style tab offered Strength, Surface and Background as three properties. Figma has one. The backdrop controls implied a schema the component does not have, and are now fixed scenery in the preview rather than configurable properties. Documented
Style
Value labels moved to Title Case — weak / default / strong → Weak / Default / Strong per §5, and the default moved from Strong to Default. Documented
Style
Usage snippets written — the section was empty. Three now cover the tiers by the surface each is for: Default behind a bottom sheet, Weak behind a tooltip, Strong behind a blocking modal with tap-dismiss disabled. Documented
Code
Code Connect filled in — codeConnect was an empty array. Four rows now, with asset linkability marked Not Applicable: the component is a single rectangle. Documented
Code
Scorecard reconciled with the resolved record — C3 still said per-tier token binding was unconfirmed and C5 still called tap-to-dismiss implicit, both closed in v2.1 and v2.2. Both now Ready, with the composited-alpha caveat kept on C3 for handoff. Documented
Code
2.2 — September 2026Minor
Tokens, scope and naming confirmed · node 4465:20631
Strength tiers bound to their own tokens — each tier resolves through its own semantic token rather than a shared fill with a hand-set opacity, so a theme change is one edit and developers no longer copy three loose alpha values. Resolved
C3
“Don’t Use” label clarified — the label belongs to the enclosing Figma section, a working container for in-progress material, not a directive against the component. Resolved
C1
Cross-system naming documented — the team keeps Overlay. Other systems name this primitive Scrim (Material 3), Backdrop (Fluent, Polaris), Mask (Ant) or Blanket (Atlassian); the note exists so a developer reading any of those recognises the same thing. Resolved
Docs
2.1 — September 2026Patch
Dismissal contract documented · node 4465:20631
Tap-to-dismiss contract settled — tapping outside dismisses the surface above unless that surface is modal, in which case dismissal requires an explicit action. Layer order is Content → Overlay → Floating surface. Resolved
C5
2.0 — September 2026Major
Rebuilt on node 4465:20631 — 2026 Working File
Strength property added — Weak (24%) · Default (40%) · Strong (56%), replacing the single 56% variant whose -strong token name implied a sibling that did not exist. Resolved
C2
Default frame resized and verified at scale — 360 × 640 → 360 × 800, with the dim layer tracking the instance exactly at every size, verified across five placements from 640 to 932. Resolved
C4
Container wrapper removed — structure simplified to COMPONENT → dim, one layer deep. Resolved
C1
1.1.0 — August 2026Minor
Re-assessment · node 4465:20631 (2026 Working File)
Component rebuilt — moved from Sticker Sheets v2 47:329691 to 2026 Working File 4465:20631. Section is still marked (Don't Use) — not yet published. Documented
Migrated
C2 — Strength variants — Strength = Weak (24%) | Default (40%) | Strong (56%) added, replacing the single 56% variant. Shipped as three tiers rather than the two proposed at baseline. Resolved
C2
C4 — Frame sizing — default resized 360×640 → 360×800; dim tracks the instance exactly, verified at 640 / 761 / 826 / 932 across five placements. Resolved
C4
C1 — Layer structure — redundant Container wrapper removed; structure is now COMPONENT → dim. Resolved
C1
C3 — Token Coverage — downgraded to Needs Refinement pending confirmation that each tier binds its own token rather than a manual opacity override. Open
C3
C5 — Dismiss contract — no annotation found on the component set or any variant. Still open. Open
C5
C7 — Code Connect — still unmapped, but now unblocked: three variants map 1:1 to one strength enum. Open
C7
1.0.0 — April 2026Major
Initial Assessment · node 47:329691
DS Health — Single-variant scrim, token-bound fill. Reusable/Composable flagged Partial due to fixed frame size. Documented
Baseline
C2 — Strength variants — Only strong (56%) exposed, token name implies a standard counterpart. Open
C2
C4 — Fill parent — Current 360×640 frame should be Fill × Fill. Open
C4
C5 — Dismiss contract — Tap-to-dismiss not annotated on the component. Open
C5
C7 — Code Connect — No mapping registered. Open
C7
Naming note — Other DS call this Scrim / Backdrop / Mask / Blanket / Underlay. Team keeps Overlay. Documented for cross-DS reference. Convention
Info