The five material tiers behind every surface, from ultra-thin translucency to chrome, and how the surface style changes them.
Materials are CSS classes (glass-ultra-thin, glass-thin, glass-regular, glass-thick, glass-chrome) that read --ca-mat-<tier>-* tokens (blur, fill and shadow). Surface paints the same five tiers for you from its material and elevation props (elevation 1 to 5 maps to ultra-thin to chrome), and adds the refraction layer for material="liquid". Use the classes only for markup that is not a Surface.
<script> import { Surface } from "@codeatlasdev/ui";</script><Surface material="glass" elevation={4} tone="brand">Content</Surface>
The surface style on <html data-style> rewrites the --ca-mat-* tokens, so every material changes at once. solid is the default: no blur, opaque fills, no glow, hairline edges, so the tiers below differ only by fill and shadow. flat also drops the shadows, frosted keeps a lighter blur, and glass (the opt-in liquid look) has the full blur, mesh and glow. The demos on this page use material="glass", so they look the same under any style. Switch the style with colorScheme.setStyle(), see Theming. Browsers with prefers-reduced-transparency: reduce get opaque surfaces.