Foundation

Shadows

Elevation scale from xs to xl, tuned separately for light and dark schemes.

.popover {
  box-shadow: var(--ca-shadow-lg);
}

The default shadows are neutral black with no hue: soft in light mode, deeper in dark mode, so one token works in both. The flat, outlined and similar styles replace them with none or a hairline ring, and the liquid recipe uses hue-tinted ones. Surface takes its drop shadow from elevation (--ca-elevation-0 to --ca-elevation-5), not from these tokens, see Materials.

Shadow scale

xs for hairline lift up to xl for modal depth.

shadow-xs

--ca-shadow-xs

shadow-sm

--ca-shadow-sm

shadow-md

--ca-shadow-md

shadow-lg

--ca-shadow-lg

shadow-xl

--ca-shadow-xl

Code

<script lang="ts">
	const sizes = ["xs", "sm", "md", "lg", "xl"];
</script>

<div class="grid">
	{#each sizes as size (size)}
		<div class="card" style="--card-shadow: var(--ca-shadow-{size})">
			<p class="name">shadow-{size}</p>
			<p class="token">--ca-shadow-{size}</p>
		</div>
	{/each}
</div>

<style>
	.grid {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ca-space-6);
		padding: var(--ca-space-2);
		width: 100%;
	}
	.card {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: var(--ca-space-1);
		min-width: 8.5rem;
		padding: var(--ca-space-6);
		border-radius: var(--ca-radius-lg);
		background: var(--ca-surface-base);
		box-shadow: var(--card-shadow);
	}
	.name {
		margin: 0;
		font-weight: 600;
		color: var(--ca-text-primary);
	}
	.token {
		margin: 0;
		font-family: var(--ca-font-mono);
		font-size: var(--ca-font-size-caption);
		color: var(--ca-text-hint);
	}
</style>