Foundation

Shadows

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

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

Light mode uses soft warm shadows, dark mode uses deeper black ones, so one token works in both. Glass surfaces rely on inset highlights and borders instead of drop shadows, 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>