Materials — translucent surface tokens

Translucent surface tokens for floating UI (acrylic) and window-chrome backgrounds (mica). Adds depth via backdrop-filter blur with a documented opaque fallback for browsers/compositors without the API. Material parity gap (Fluent 2 ships these; Material 3 uses opaque elevation tokens — Koder offers both vocabularies).

Spec — Themes: Materials

Facet *isual*do Koder Design. Material parity: https://learn.microsoft.com/windows/apps/design/style/acrylic + https://learn.microsoft.com/windows/apps/design/style/mica.

R1 — Material vocabulary

Koder ships * materials* both opt-in (default surfaces stay opaque per verge.kmd):

Material	Token	Use
ica	`--kds-material-mica-bg`	Window-chrome background — desktop apps, landing hero canvas
crylic	`--kds-material-acrylic-bg` + `--kds-material-acrylic-blur`	Floating surfaces — dialogs, flyouts, popovers, sidebars

Other materials (smoke, tinted glass, frosted) are *ot*in the canonical vocabulary. PR to add new ones requires Koder Brand approval + accessibility audit.

R2 — Opacity + blur defaults

Token	Dark theme	Light theme
`--kds-material-mica-bg`	`color-mix(in srgb, --kdr-surface 70%, --kdr-accent 6%)`	`color-mix(in srgb, --kdr-surface 80%, --kdr-accent 4%)`
`--kds-material-acrylic-bg`	`color-mix(in srgb, --kdr-surface 50%, transparent)`	`color-mix(in srgb, --kdr-surface 65%, transparent)`
`--kds-material-acrylic-blur`	`24px`	`24px`
`--kds-material-acrylic-saturation`	`1.4`	`1.4`

R3 — Fallback contract

Browsers/compositors without backdrop-filter:

.kds-material-acrylic {
  background: var(--kds-material-acrylic-bg);  
}
@supports (backdrop-filter: blur(1px)) {
  .kds-material-acrylic {
    backdrop-filter: blur(var(--kds-material-acrylic-blur))
                     saturate(var(--kds-material-acrylic-saturation));
  }
}

Result: every surface always paints; only the live blur is conditional.

R4 — Platform binding (koder_kit)

Flutter desktop variants of koder_kit expose:

KoderMicaWindow — root scaffold widget mapping to platform-native
window backdrop API (WinUI 3 SystemBackdrop.MICA on Windows; NSVisualEffectView via plugin on macOS; opaque tint on Linux until KWin/Mutter ships compositor blur reliably).
KoderAcrylicSurface — floating surface widget. Same fallback chain.

Web/Flutter Web uses the CSS path above directly.

R5 — When NOT to use

*pp body content*— use plain --kdr-surface. Acrylic on content
reduces contrast and breaks accessibility.
*obile*— Koder mobile apps use flat opaque surfaces per
koder-app/behaviors.kmd. Backdrop-blur is a battery hog on mid-range Android; the spec excludes it.
*Vs*— Tizen/WebOS rendering pipeline doesn't blur well; opaque
surfaces stay the default.

T1-T3 — Tests

T1 — Token presence: every theme produces --kds-material-mica-bg and --kds-material-acrylic-bg resolvable to a valid color value.

T2 — Fallback: with backdrop-filter disabled, .kds-material-acrylic still renders an opaque~~but~~tinted surface (no transparent gap).

T3 — Verge audit: koder-spec-audit verge --material confirms no canonical preset overrides the material tokens with a hard-coded color.