Foundation

Materials

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.

Components that blur but are not a Surface (the Tabs list, Chip, Toast, Rail, Panel, the DataTable menus) set data-ca-blur="<role>" on their element instead of declaring backdrop-filter, so <html data-style> drives them exactly like a material="auto" Surface. Roles are ultra-thin, thin, regular, thick, chrome, mat-thin, mat-regular, overlay, chrome-layer and tooltip; Use it the same way on your own elements, and never add will-change or isolation: isolate around them. list_surfaces in the MCP server lists the styles and which ones draw a blur.

The modal scrim (the ::backdrop of Dialog, AlertDialog, Sheet, Drawer, CommandPalette and DocsSearch) reads --ca-scrim-blur, which defaults to blur(4px) saturate(180%) under every style. Set --ca-scrim-blur: none on :root to drop the blur on all of them at once, for example in a WKWebView window that is transparent over a native view.

#226

Glass tiers

All five thickness levels on a gradient backdrop.

Ultra thin

Subtle background hint

Thin

Light translucency

Regular

Default blur

Thick

Strong blur

Chrome

Heaviest blur and fill

Reference #226 · Pick in the gallery

Code

<script lang="ts">
	import { Surface } from "@codeatlasdev/ui";

	const tiers: { elevation: 1 | 2 | 3 | 4 | 5; label: string; desc: string }[] = [
		{ elevation: 1, label: "Ultra thin", desc: "Subtle background hint" },
		{ elevation: 2, label: "Thin", desc: "Light translucency" },
		{ elevation: 3, label: "Regular", desc: "Default blur" },
		{ elevation: 4, label: "Thick", desc: "Strong blur" },
		{ elevation: 5, label: "Chrome", desc: "Heaviest blur and fill" },
	];
</script>

<div class="backdrop">
	{#each tiers as tier (tier.elevation)}
		<Surface material="glass" elevation={tier.elevation} class="tier">
			<p class="label">{tier.label}</p>
			<p class="desc">{tier.desc}</p>
		</Surface>
	{/each}
</div>

<style>
	.backdrop {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ca-space-3);
		width: 100%;
		padding: var(--ca-space-6);
		border-radius: var(--ca-radius-lg);
		background: linear-gradient(135deg, var(--ca-brand-main) 0%, var(--ca-semantic-info) 50%, var(--ca-semantic-success) 100%);
	}
	.backdrop :global(.tier) {
		flex: 1;
		min-width: 8.5rem;
		padding: var(--ca-space-5) var(--ca-space-6);
		border-radius: var(--ca-radius-md);
	}
	.label {
		margin: 0 0 var(--ca-space-1);
		font-weight: 600;
		color: var(--ca-text-primary);
	}
	.desc {
		margin: 0;
		font-size: var(--ca-font-size-caption);
		color: var(--ca-text-secondary);
	}
</style>

#225

Button glass variants

glass-btn, glass-btn-prominent and glass-btn-clear for custom controls. They follow `data-style`, so the halo and blur disappear under `solid`.

Reference #225 · Pick in the gallery

Code

<div class="backdrop">
	<button type="button" class="glass-btn">glass-btn</button>
	<button type="button" class="glass-btn-prominent">glass-btn-prominent</button>
	<button type="button" class="glass-btn-clear">glass-btn-clear</button>
</div>

<style>
	.backdrop {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ca-space-3);
		width: 100%;
		padding: var(--ca-space-8) var(--ca-space-6);
		border-radius: var(--ca-radius-lg);
		background: linear-gradient(135deg, var(--ca-brand-main), var(--ca-semantic-info));
	}
	.backdrop button {
		padding: 10px 22px;
		border: none;
		border-radius: var(--ca-radius-md);
		font: 500 var(--ca-font-size-button) var(--ca-font-sans);
		cursor: pointer;
	}
</style>

#227

Tinted and glowing

`tone="brand"` tints the fill, `glow` adds a halo that only shows under styles that keep one.

Tinted

Glowing

Tinted + glowing

Reference #227 · Pick in the gallery

Code

<script lang="ts">
	import { Surface } from "@codeatlasdev/ui";
</script>

<div class="backdrop">
	<Surface material="glass" tone="brand" class="chip">
		<p>Tinted</p>
	</Surface>
	<Surface material="glass" glow class="chip">
		<p>Glowing</p>
	</Surface>
	<Surface material="glass" tone="brand" glow class="chip">
		<p>Tinted + glowing</p>
	</Surface>
</div>

<style>
	.backdrop {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ca-space-3);
		width: 100%;
		padding: var(--ca-space-6);
		border-radius: var(--ca-radius-lg);
		background: linear-gradient(135deg, var(--ca-brand-main) 0%, var(--ca-semantic-info) 50%, var(--ca-semantic-success) 100%);
	}
	.backdrop :global(.chip) {
		flex: 1;
		min-width: 8.5rem;
		padding: var(--ca-space-5) var(--ca-space-6);
		border-radius: var(--ca-radius-md);
	}
	p {
		margin: 0;
		font-weight: 600;
		color: var(--ca-text-primary);
	}
</style>