Skip to content
CodeAtlas UI

Foundation

Materials

Liquid Glass material tiers from ultra-thin translucency to opaque chrome, plus tint, glow and button variants.

Materials are CSS classes (glass-ultra-thin, glass-thin, glass-regular, glass-thick, glass-chrome) backed by backdrop-filter. Surface applies a material for you from its material and elevation props, and adds the refraction layer for material="liquid".

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

<Surface material="glass" elevation={4} tone="brand">Content</Surface>

The surface style on <html data-style> changes every material at once: solid (default: no blur, no glow, hairline edges), flat (no blur, no shadows), frosted (less blur) and glass (the opt-in liquid look: blur, mesh, glow). Switch it with colorScheme.setStyle(), see Theming. Browsers with prefers-reduced-transparency: reduce automatically get opaque surfaces.

Glass tiers

All five thickness levels on a gradient backdrop.

Ultra thin

Subtle background hint

Thin

Light translucency

Regular

Standard glass surface

Thick

Strong frosted effect

Chrome

Opaque chrome bar

Code
svelte 
<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: "Standard glass surface" },
		{ elevation: 4, label: "Thick", desc: "Strong frosted effect" },
		{ elevation: 5, label: "Chrome", desc: "Opaque chrome bar" },
	];
</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>

Button glass variants

glass-btn, glass-btn-prominent and glass-btn-clear for custom controls.

Code
svelte 
<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>

Tinted and glowing

`tone="brand"` tints the fill, `glow` adds a backlit halo.

Tinted

Glowing

Tinted + glowing

Code
svelte 
<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>