@signal9/era-ui 10.1.0 → 12.0.0

package/dist/os/pane.svelte

@@ -82,7 +82,7 @@
 		// outline-(--color-7) rather than `outline-7`, which Tailwind reads as a 7px
 		// outline WIDTH — the numeric colour scale collides with the width scale on
 		// border-* and outline-*, so those two always take the paren-var form here.
-		focused ? 'outline -outline-offset-1 outline-(--color-7)' : 'opacity-95 shadow-(--era-shadow)',
+		focused ? 'outline -outline-offset-1 outline-(--color-7)' : 'opacity-95 shadow-sm',
 		pane.state === 'minimized' && 'hidden'
 	)}
 >
@@ -94,7 +94,7 @@
 	     from the edge against 5px above and below it — read as crowded because it
 	     was. --era-inset-control is (h-control − text)/2, so the label now starts the same
 	     distance in from the edge as it sits from the top. -->
-	<Pane.Handle class="gap-(--era-gap) pl-(--era-inset-control)" center={pane.center}>
+	<Pane.Handle class="gap-gutter pl-inset-control" center={pane.center}>
 		{#if pane.lead}
 			<!-- The app replaced the whole icon+title cluster. Its content lives in
 			     the drag zone like the default one; anything interactive in it
@@ -103,7 +103,7 @@
 		{:else}
 			{#if pane.icon}
 				{@const Icon = pane.icon}
-				<Icon class="size-(--era-h-icon) shrink-0 text-muted" />
+				<Icon class="size-icon shrink-0 text-muted" />
 			{/if}
 			<span class={cn('truncate text-body', focused ? 'text-bright' : 'text-muted')}
 				>{pane.title}</span
@@ -140,9 +140,7 @@
 				icon
 				size="pill"
 				tone={armed === 'minimize' ? 'warning' : armed === 'maximize' ? 'success' : 'destructive'}
-				class={armed === 'maximize'
-					? '[&_svg]:size-(--era-glyph-pill)'
-					: '[&_svg]:size-(--era-h-icon)'}
+				class={armed === 'maximize' ? '[&_svg]:size-glyph-pill' : '[&_svg]:size-icon'}
 				aria-label="Close (right-click minimizes, middle-click maximizes)"
 				onclick={() => pm.close(pane.id)}
 				oncontextmenu={(e: MouseEvent) => e.preventDefault()}

package/dist/os/taskbar.svelte

@@ -202,17 +202,12 @@
 	bind:this={ref}
 	bind:clientHeight={barHeight}
 	class={cn(
-		'absolute flex h-(--era-h-bar) items-center gap-(--era-gap) bg-(--era-surface-bg-elevated) px-(--era-inset-chip) shadow-(--era-shadow-lg) glass-blur',
+		'absolute flex h-bar items-center gap-gutter bg-elevated px-inset-chip shadow-lg glass-blur',
 		floating
-			? cn(
-					'inset-x-(--era-gap) rounded-(--era-rd-bar)',
-					position === 'top' ? 'top-(--era-gap)' : 'bottom-(--era-gap)'
-				)
+			? cn('inset-x-gutter rounded-bar', position === 'top' ? 'top-gutter' : 'bottom-gutter')
 			: cn(
 					'inset-x-0 border-divider-faded',
-					position === 'top'
-						? 'top-0 rounded-b-(--era-rd-bar) border-b'
-						: 'bottom-0 rounded-t-(--era-rd-bar) border-t'
+					position === 'top' ? 'top-0 rounded-b-bar border-b' : 'bottom-0 rounded-t-bar border-t'
 				),
 		LAYER.taskbar,
 		className
@@ -232,10 +227,10 @@
 	/>
 
 	{#if pinned.length}
-		<div class="flex shrink-0 items-center gap-(--era-gap)">
+		<div class="flex shrink-0 items-center gap-gutter">
 			{#each pinned as p (p.appId)}
 				<Button icon size="control" aria-label={p.title} onclick={() => pm.open(p.appId)}>
-					{#if p.icon}{@const Icon = p.icon}<Icon class="size-(--era-h-icon)" />{/if}
+					{#if p.icon}{@const Icon = p.icon}<Icon class="size-icon" />{/if}
 				</Button>
 			{/each}
 		</div>
@@ -250,7 +245,7 @@
 	     gap between the bar's other groups. -->
 	{#if tabPanes.length > 0}
 		<div
-			class="scrollbar-none flex max-w-[40%] min-w-0 shrink-0 items-center gap-(--era-gap) overflow-x-auto"
+			class="scrollbar-none flex max-w-[40%] min-w-0 shrink-0 items-center gap-gutter overflow-x-auto"
 		>
 			{#each tabPanes as win (win.id)}
 				<Button
@@ -273,7 +268,7 @@
 						win.state === 'minimized' && showWindows !== 'minimized' && 'opacity-60'
 					)}
 				>
-					{#if win.icon}{@const Icon = win.icon}<Icon class="size-(--era-h-icon) shrink-0" />{/if}
+					{#if win.icon}{@const Icon = win.icon}<Icon class="size-icon shrink-0" />{/if}
 					<span class="truncate">{win.title}</span>
 				</Button>
 			{/each}
@@ -284,7 +279,7 @@
 	     once there's something to switch between (and only when the bar exposes
 	     workspaces at all). -->
 	{#if showWorkspaces && pm.workspaces.length > 1}
-		<div class="flex shrink-0 items-center gap-(--era-gap)">
+		<div class="flex shrink-0 items-center gap-gutter">
 			{#each pm.workspaces as ws, i (ws.id)}
 				<Button
 					icon
@@ -301,7 +296,7 @@
 	{/if}
 
 	<!-- System tray -->
-	<div class="flex shrink-0 items-center gap-(--era-gap)">
+	<div class="flex shrink-0 items-center gap-gutter">
 		{@render end?.()}
 		<!-- The bell only exists while there's something unread — silent means
 		     no dead chrome (the center stays reachable via onNotifications
@@ -309,7 +304,7 @@
 		{#if notif.unread > 0}
 			<div class="relative">
 				<Button icon size="control" aria-label="Notifications" onclick={onNotifications}>
-					<Bell class="size-(--era-h-icon)" />
+					<Bell class="size-icon" />
 				</Button>
 				<span
 					class="absolute -top-0.5 -right-0.5 flex min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[0.65rem] leading-4 text-primary-fg"
@@ -336,7 +331,7 @@
 	<div
 		data-mode="touch"
 		class={cn(
-			'absolute right-(--era-gap) bottom-[max(var(--era-gap),env(safe-area-inset-bottom))] sm:hidden',
+			'absolute right-gutter bottom-[max(var(--era-gap),env(safe-area-inset-bottom))] sm:hidden',
 			LAYER.taskbar
 		)}
 	>
@@ -350,10 +345,10 @@
 			size="control"
 			tone="accent"
 			aria-label="Open command bar"
-			class="shadow-(--era-shadow-lg)"
+			class="shadow-lg"
 			onclick={() => commandBar?.focusInput()}
 		>
-			<Terminal class="size-(--era-h-icon)" />
+			<Terminal class="size-icon" />
 		</Button>
 	</div>
 {/if}

package/dist/os/toast.svelte

@@ -8,7 +8,7 @@
 	const notif = getNotifications();
 
 	const accent: Record<AppNotification['tone'], string> = {
-		default: 'bg-(--era-highlight)',
+		default: 'bg-highlight',
 		accent: 'bg-primary',
 		success: 'bg-success',
 		destructive: 'bg-destructive'
@@ -16,20 +16,15 @@
 </script>
 
 <div
-	class="pointer-events-auto relative flex w-80 gap-(--era-inset-chip) overflow-hidden rounded-(--era-rd-bar) bg-(--era-surface-bg-elevated) p-(--era-pad-card) shadow-(--era-shadow-lg) glass-blur"
+	class="pointer-events-auto relative flex w-80 gap-inset-chip overflow-hidden rounded-bar bg-elevated p-card shadow-lg glass-blur"
 >
-	<span
-		class={cn(
-			'absolute inset-y-(--era-panel-inset) left-(--era-panel-inset) w-1 rounded-full',
-			accent[n.tone]
-		)}
-	></span>
+	<span class={cn('absolute inset-y-menu left-menu w-1 rounded-full', accent[n.tone])}></span>
 	{#if n.icon}
 		{@const Icon = n.icon}
-		<Icon class="mt-0.5 size-(--era-h-chip) shrink-0 text-muted" />
+		<Icon class="mt-0.5 size-chip shrink-0 text-muted" />
 	{/if}
 	<div class="min-w-0 flex-1">
-		<div class="flex items-start gap-(--era-gap)">
+		<div class="flex items-start gap-gutter">
 			<p class="min-w-0 flex-1 truncate text-body text-bright">{n.title}</p>
 			<!-- The dismiss family's ×: xxs tier, whose default glyph is the 12px
 			     dismiss ink (the size class that sat on the <X> lost to the Button
@@ -46,7 +41,7 @@
 		</div>
 		{#if n.body}<p class="mt-0.5 text-body leading-body break-words text-muted">{n.body}</p>{/if}
 		{#if n.actions.length}
-			<div class="mt-(--era-inset-chip) flex flex-wrap gap-(--era-gap)">
+			<div class="mt-inset-chip flex flex-wrap gap-gutter">
 				{#each n.actions as action (action.label)}
 					<Button
 						size="icon"

package/dist/os/toaster.svelte

@@ -16,7 +16,7 @@
      desktop; each toast re-enables its own. -->
 <div
 	class={cn(
-		'pointer-events-none absolute right-(--era-pad-card) bottom-(--era-h-bar) flex flex-col-reverse gap-(--era-inset-chip)',
+		'pointer-events-none absolute right-card bottom-(--era-h-bar) flex flex-col-reverse gap-inset-chip',
 		LAYER.toast,
 		className
 	)}

package/dist/styles/density.css

@@ -74,7 +74,6 @@
  *   --era-pad-content   2·so    16 / 22.5 / 30 / 48  — full content panels (docs sections)
  *
  * Whitespace share rises with mode: pad-md / h-control = 0.33 dense → 0.50 touch.
- * --era-content-p is kept as an alias of --era-pad-content.
  *
  * IDENTITY USED AT NESTING SITES
  * ==============================
@@ -312,7 +311,6 @@
 	--era-pad-content: calc(var(--era-so) * 2); /* 16/22.5/30/48 */
 
 	/* Content padding — alias of pad-lg (formerly 4·sp − 16 ≈ the same curve) */
-	--era-content-p: var(--era-pad-content);
 }
 
 /* -------------------------------------------------- */

package/dist/styles/index.css

@@ -491,6 +491,56 @@
 	--color-elevated: var(--era-surface-bg-elevated);
 	--color-highlight: var(--era-highlight);
 	--color-overlay: var(--era-overlay-bg);
+	/* THE SPACING SCALE — one entry per token, from which Tailwind derives the
+	 * WHOLE directional family: p/px/py/pt/pr/pb/pl/ps/pe, every margin, gap and
+	 * gap-x/y, inset/top/right/bottom/left, translate, and the sizing prefixes.
+	 *
+	 * These were hand-written `@utility` blocks, which could only ever cover the
+	 * spellings someone remembered to write: `px-gutter` existed and `mt-gutter`
+	 * did not, `p-inset-control` existed and `pl-inset-control` did not, so the
+	 * library fell back to `mt-(--era-gap)` in exactly the places the named API
+	 * was supposed to cover. One line here replaces twenty blocks and leaves no
+	 * spelling missing.
+	 *
+	 * ONLY genuine spacing belongs here. The namespace is shared across
+	 * h/w/p/m/gap, so a name registered here means the same length in ALL of
+	 * them — true of a gap or an inset, false of a TIER HEIGHT. Tiers stay
+	 * hand-written per prefix below, and the two vocabularies deliberately share
+	 * no word: icon/pill/chip/control/bar are heights; gutter, card, panel,
+	 * content, menu, field and the inset-* names are spacing. Registering a tier
+	 * name here would silently make `px-control` mean 24px of side padding. */
+	--spacing-gutter: var(--era-gap);
+	--spacing-panel: var(--era-pad-panel);
+	--spacing-card: var(--era-pad-card);
+	--spacing-content: var(--era-pad-content);
+	--spacing-menu: var(--era-panel-inset);
+	--spacing-field: var(--era-field-px);
+	/* @use text-symmetric content padding — (tier − text)/2, the inset that
+	 * vertically centres body text in its tier; px-inset-control is a text
+	 * button's side padding, p-inset-control a code block's. */
+	--spacing-inset-pill: var(--era-inset-pill);
+	--spacing-inset-chip: var(--era-inset-chip);
+	--spacing-inset-control: var(--era-inset-control);
+	/* @use the concentric inset for a nested pair — (h-container − h-child)/2,
+	 * the gap that makes a child control sit evenly inside its container, and
+	 * the radius step that keeps their corners concentric. Named for the pair it
+	 * joins: gap-icon-inset-control seats an icon in a control. */
+	--spacing-icon-inset-pill: var(--era-icon-inset-pill);
+	--spacing-icon-inset-chip: var(--era-icon-inset-chip);
+	--spacing-icon-inset-control: var(--era-icon-inset-control);
+	--spacing-icon-inset-bar: var(--era-icon-inset-bar);
+	--spacing-pill-inset-chip: var(--era-pill-inset-chip);
+	--spacing-pill-inset-control: var(--era-pill-inset-control);
+	--spacing-chip-inset-control: var(--era-chip-inset-control);
+	--spacing-chip-inset-bar: var(--era-chip-inset-bar);
+	/* @use the glyph size for a tier — the INK inside the box, not the box
+	 * (size-glyph-pill is the dismiss × in a pill, size-pill is the pill). */
+	--spacing-glyph-icon: var(--era-glyph-icon);
+	--spacing-glyph-pill: var(--era-glyph-pill);
+	/* @use the recessed field fill — bg-field is a text input's resting well,
+	 * bg-field-highlight its focused/hovered face. */
+	--color-field: var(--era-field-bg);
+	--color-field-highlight: var(--era-field-highlight);
 	/* Motion — bare transition utilities default to the motion axis, so
 	 * `transition-colors` alone is on-design (0s at instant, longer at extra).
 	 * ease-base/duration-base name the axis explicitly for overrides. */
@@ -539,12 +589,13 @@
 /* ------------------------------------------------------------------ */
 /* Named tier + spacing utilities                                     */
 /*                                                                    */
-/* Static utilities (not @theme) because Tailwind's spacing namespace */
-/* is shared across h/w/p/m/gap — registering `md` there would give   */
-/* px-gutter and h-control the SAME value, and era's tiers and insets are      */
-/* different token families. Each name below maps to exactly one      */
-/* token. Kept terse; the ladder itself is documented in density.css  */
-/* and on the /spacing page.                                          */
+/* What is left here is what the SPACING SCALE above cannot express: */
+/* a tier is a HEIGHT, and the spacing namespace is shared across     */
+/* h/w/p/m/gap, so registering `control` there would silently make    */
+/* px-control mean 24px of side padding. Tier names therefore get one */
+/* hand-written block per prefix that needs them, and the two         */
+/* vocabularies share no word. Kept terse; the ladder itself is       */
+/* documented in density.css and on the /spacing page.                */
 /* ------------------------------------------------------------------ */
 
 /* @use the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip
@@ -584,6 +635,46 @@
 	min-height: var(--era-h-bar);
 }
 
+/* @use a tier-sized WIDTH — the horizontal twin of the h-* ladder, for a rail or
+ * a column measured in tiers rather than in content. */
+@utility w-icon {
+	width: var(--era-h-icon);
+}
+@utility w-pill {
+	width: var(--era-h-pill);
+}
+@utility w-chip {
+	width: var(--era-h-chip);
+}
+@utility w-control {
+	width: var(--era-h-control);
+}
+@utility w-bar {
+	width: var(--era-h-bar);
+}
+
+/* @use a minimum tier WIDTH — the floor that makes a single-glyph control render
+ * as a square rather than a skinny pill (min-w-control on an icon button,
+ * min-w-pill on a badge). These could not exist before the ladder was renamed:
+ * the old rungs were sm/md/lg, and Tailwind's container scale already owns
+ * min-w-md and min-w-lg, so the names collided and every call site had to write
+ * min-w-(--era-h-control) by hand. icon/pill/chip/control/bar collide with nothing. */
+@utility min-w-icon {
+	min-width: var(--era-h-icon);
+}
+@utility min-w-pill {
+	min-width: var(--era-h-pill);
+}
+@utility min-w-chip {
+	min-width: var(--era-h-chip);
+}
+@utility min-w-control {
+	min-width: var(--era-h-control);
+}
+@utility min-w-bar {
+	min-width: var(--era-h-bar);
+}
+
 /* @use a tier-sized square — size-icon is THE icon size (a Lucide glyph beside
  * body text), size-control a square control face. */
 @utility size-icon {
@@ -607,53 +698,6 @@
 	height: var(--era-h-bar);
 }
 
-/* @use the inter-element gap (sp/2) — flex/grid gap between sibling controls,
- * and the matching gutter padding a scrollable list or rail owes its rows on
- * all four sides (p-gutter on the rail = gap-gutter between its rows). */
-@utility gap-gutter {
-	gap: var(--era-gap);
-}
-@utility p-gutter {
-	padding: var(--era-gap);
-}
-@utility px-gutter {
-	padding-inline: var(--era-gap);
-}
-@utility py-gutter {
-	padding-block: var(--era-gap);
-}
-
-/* @use text-symmetric content padding — (tier − text)/2, the inset that
- * vertically centers body text in its tier; px-inset-control is a text button's
- * side padding, p-inset-control a code block's. */
-@utility p-inset-pill {
-	padding: var(--era-inset-pill);
-}
-@utility p-inset-chip {
-	padding: var(--era-inset-chip);
-}
-@utility p-inset-control {
-	padding: var(--era-inset-control);
-}
-@utility px-inset-pill {
-	padding-inline: var(--era-inset-pill);
-}
-@utility px-inset-chip {
-	padding-inline: var(--era-inset-chip);
-}
-@utility px-inset-control {
-	padding-inline: var(--era-inset-control);
-}
-@utility py-inset-pill {
-	padding-block: var(--era-inset-pill);
-}
-@utility py-inset-chip {
-	padding-block: var(--era-inset-chip);
-}
-@utility py-inset-control {
-	padding-block: var(--era-inset-control);
-}
-
 /* @use pill side padding — the wider-than-vertical horizontal breathing room
  * badge/chip text wants (glyph-advance derived, ~2× the vertical inset). */
 @utility px-pill {
@@ -662,24 +706,25 @@
 @utility px-chip {
 	padding-inline: var(--era-chip-px);
 }
-
-/* @use text-field side padding — where typed text starts in a control-tier input;
- * the named form of px-(--era-field-px). */
-@utility px-field {
-	padding-inline: var(--era-field-px);
+@utility pl-pill {
+	padding-left: var(--era-pill-px);
 }
-
-/* @use optical padding for unbounded containers — p-panel for compact shells
- * and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for
- * full content panels. Grows super-linearly with density so whitespace holds
- * its perceived share as controls loosen. */
-@utility p-panel {
-	padding: var(--era-pad-panel);
+@utility pr-pill {
+	padding-right: var(--era-pill-px);
 }
-@utility p-card {
-	padding: var(--era-pad-card);
+@utility pl-chip {
+	padding-left: var(--era-chip-px);
 }
-/* A content panel always follows a section header ROW, and that row already
+@utility pr-chip {
+	padding-right: var(--era-chip-px);
+}
+
+/* @use padding for a content panel that sits UNDER a section header row — the
+ * even-padding exception, and the reason it is not called p-section: it
+ * deliberately under-pays the block start. For an evenly padded content panel
+ * use p-section, which is the plain token.
+ *
+ * A content panel always follows a section header ROW, and that row already
  * contributes its own slack: the heading's text sits in an h-bar bar, so there
  * is (h-bar − text)/2 of empty bar under its glyphs before the panel even
  * starts. Padding the panel evenly on top of that spends the space twice — the
@@ -688,7 +733,7 @@
  *
  * So the block-start pays only the REMAINDER. The target is the indent: the
  * space under a heading should measure the same as the space beside the text,
- * which is --era-content-p. The header row already supplies (h-bar − text)/2 of
+ * which is --era-pad-content. The header row already supplies (h-bar − text)/2 of
  * it, so the panel adds what's left, and heading-to-paragraph reads equal to
  * the paragraph's own inset. Subtracting one --era-gap (the previous rule) left
  * the header's slack unaccounted for and the heading still detached.
@@ -696,16 +741,9 @@
  * Both terms are density-derived, so the equality holds at every mode; the
  * max() is the floor for a hypothetical mode where the row's slack would
  * exceed the inset outright. */
-@utility p-content {
-	padding: var(--era-content-p);
-	padding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-bar) - var(--era-text)) / 2));
-}
-
-/* @use menu-panel padding — the surface-owned inset (0 on flat, 2px on
- * glass/bevel) that keeps row highlights inside a floating panel's frame;
- * pairs with rounded-menu-item on the rows. */
-@utility p-menu {
-	padding: var(--era-panel-inset);
+@utility p-section {
+	padding: var(--era-pad-content);
+	padding-top: max(0px, calc(var(--era-pad-content) - (var(--era-h-bar) - var(--era-text)) / 2));
 }
 
 /* @use the motion axis as an explicit transition-duration — for the rare case

package/dist/styles/themes.css

@@ -335,39 +335,46 @@
 }
 
 /* -------------------------------------------------- */
-/* Sand — dark (cooler sandstone with mint contrast)  */
+/* Sand — dark (saturated warm amber, mint contrast)  */
 /* -------------------------------------------------- */
 :root[data-theme='sand'],
 [data-theme='sand'].dark {
 	color-scheme: dark;
 
-	--color-1: oklch(0.25 0.019 56);
-	--color-2: oklch(0.3 0.022 57);
-	--color-3: oklch(0.37 0.026 58);
-	--color-4: oklch(0.45 0.03 58);
-	--color-5: oklch(0.54 0.034 59);
-	--color-6: oklch(0.62 0.036 58);
-	--color-7: oklch(0.7 0.035 57);
-	--color-8: oklch(0.76 0.033 56);
-	--color-9: oklch(0.8 0.034 54);
-	--color-10: oklch(0.84 0.028 62);
-	--color-11: oklch(0.89 0.022 70);
-	--color-12: oklch(0.93 0.016 78);
+	--color-1: oklch(0.5 0.1 70);
+	--color-2: oklch(0.55 0.11 68);
+	--color-3: oklch(0.6 0.12 65);
+	--color-4: oklch(0.65 0.13 62);
+	--color-5: oklch(0.7 0.14 60);
+	--color-6: oklch(0.75 0.12 58);
+	--color-7: oklch(0.8 0.1 55);
+	--color-8: oklch(0.82 0.08 52);
+	--color-9: oklch(0.855 0.065 50);
+	--color-10: oklch(0.89 0.05 48);
+	--color-11: oklch(0.915 0.035 46);
+	--color-12: oklch(0.945 0.022 44);
 
 	--color-border: var(--color-5);
 	--color-surface: var(--color-2);
 	--color-hover: color-mix(in oklch, var(--color-3) 80%, var(--color-2));
 	--color-fg: var(--color-11);
 
+	/* Accent INK. Every one of these used to be var(--color-1), which read as
+	 * near-black ink on a bright accent while the scale's floor was L 0.25. This
+	 * scale bottoms out at L 0.5, so that spelling collapsed to 2.48:1 on
+	 * success — and no step in the palette is dark enough to replace it. A
+	 * literal, at the palette's own hue so it still reads as sand. */
+	--color-ink: oklch(0.24 0.03 60);
+
 	--color-primary: oklch(0.8 0.034 54);
-	--color-primary-fg: var(--color-1);
+	--color-primary-fg: var(--color-ink);
 	--color-primary-hover: color-mix(in oklch, var(--color-primary) 80%, var(--color-success));
 	--color-destructive: oklch(0.615 0.15 33);
 	--color-destructive-fg: var(--color-12);
 	--color-success: oklch(0.71 0.09 164);
-	--color-success-fg: var(--color-1);
+	--color-success-fg: var(--color-ink);
 	--color-warning: oklch(0.78 0.1 85);
-	--color-warning-fg: var(--color-1);
+	--color-warning-fg: var(--color-ink);
 }
 
 /* -------------------------------------------------- */
@@ -377,22 +384,22 @@
 	:root[data-theme='sand']:not(.dark) {
 		color-scheme: light;
 
-		--color-1: oklch(0.96 0.01 78);
-		--color-2: oklch(0.92 0.014 74);
-		--color-3: oklch(0.85 0.02 68);
-		--color-4: oklch(0.78 0.026 62);
-		--color-5: oklch(0.69 0.032 57);
-		--color-6: oklch(0.6 0.035 54);
-		--color-7: oklch(0.52 0.033 52);
-		--color-8: oklch(0.45 0.03 50);
-		--color-9: oklch(0.39 0.026 48);
-		--color-10: oklch(0.32 0.022 46);
-		--color-11: oklch(0.26 0.018 44);
-		--color-12: oklch(0.21 0.014 42);
+		--color-1: oklch(0.945 0.022 44);
+		--color-2: oklch(0.915 0.035 46);
+		--color-3: oklch(0.89 0.05 48);
+		--color-4: oklch(0.855 0.065 50);
+		--color-5: oklch(0.82 0.08 52);
+		--color-6: oklch(0.8 0.1 55);
+		--color-7: oklch(0.75 0.12 58);
+		--color-8: oklch(0.7 0.14 60);
+		--color-9: oklch(0.65 0.13 62);
+		--color-10: oklch(0.6 0.12 65);
+		--color-11: oklch(0.55 0.11 68);
+		--color-12: oklch(0.5 0.1 70);
 
 		--color-border: var(--color-5);
 		--color-surface: var(--color-2);
-		--color-hover: oklch(0.88 0.016 72);
+		--color-hover: color-mix(in oklch, var(--color-3) 80%, var(--color-2));
 		--color-fg: var(--color-11);
 
 		--color-primary: oklch(0.55 0.12 58);
@@ -410,22 +417,22 @@
 [data-theme='sand'].light {
 	color-scheme: light;
 
-	--color-1: oklch(0.96 0.01 78);
-	--color-2: oklch(0.92 0.014 74);
-	--color-3: oklch(0.85 0.02 68);
-	--color-4: oklch(0.78 0.026 62);
-	--color-5: oklch(0.69 0.032 57);
-	--color-6: oklch(0.6 0.035 54);
-	--color-7: oklch(0.52 0.033 52);
-	--color-8: oklch(0.45 0.03 50);
-	--color-9: oklch(0.39 0.026 48);
-	--color-10: oklch(0.32 0.022 46);
-	--color-11: oklch(0.26 0.018 44);
-	--color-12: oklch(0.21 0.014 42);
+	--color-1: oklch(0.945 0.022 44);
+	--color-2: oklch(0.915 0.035 46);
+	--color-3: oklch(0.89 0.05 48);
+	--color-4: oklch(0.855 0.065 50);
+	--color-5: oklch(0.82 0.08 52);
+	--color-6: oklch(0.8 0.1 55);
+	--color-7: oklch(0.75 0.12 58);
+	--color-8: oklch(0.7 0.14 60);
+	--color-9: oklch(0.65 0.13 62);
+	--color-10: oklch(0.6 0.12 65);
+	--color-11: oklch(0.55 0.11 68);
+	--color-12: oklch(0.5 0.1 70);
 
 	--color-border: var(--color-5);
 	--color-surface: var(--color-2);
-	--color-hover: oklch(0.88 0.016 72);
+	--color-hover: color-mix(in oklch, var(--color-3) 80%, var(--color-2));
 	--color-fg: var(--color-11);
 
 	--color-primary: oklch(0.55 0.12 58);

package/dist/ui/accordion/accordion-content.svelte

@@ -8,7 +8,7 @@
 <Accordion.Content
 	bind:ref
 	class={cn(
-		'overflow-hidden border-t border-divider-faded p-(--era-content-p) text-body leading-body text-muted',
+		'overflow-hidden border-t border-divider-faded p-content text-body leading-body text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/accordion/accordion-trigger.svelte

@@ -14,11 +14,11 @@
 <Accordion.Trigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-control) w-full items-center justify-between gap-(--era-icon-inset-chip) rounded-(--era-rd-control) px-(--era-inset-control) text-body text-fg hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus:outline-none disabled:opacity-50',
+		'flex h-control w-full items-center justify-between gap-icon-inset-chip rounded-control px-inset-control text-body text-fg hover:bg-highlight hover:shadow-highlight focus:outline-none disabled:opacity-50',
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDown class="size-(--era-h-icon) text-muted" />
+	<ChevronDown class="size-icon text-muted" />
 </Accordion.Trigger>

package/dist/ui/alert-dialog/alert-dialog-content.svelte

@@ -11,11 +11,11 @@
 </script>
 
 <AlertDialog.Portal>
-	<AlertDialog.Overlay class="fixed inset-0 z-50 bg-(--era-overlay-bg)" />
+	<AlertDialog.Overlay class="fixed inset-0 z-50 bg-overlay" />
 	<AlertDialog.Content
 		bind:ref
 		class={cn(
-			'fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-(--era-gap) rounded-(--era-rd-bar) border border-divider bg-(--era-surface-bg) p-(--era-pad-card) shadow-(--era-shadow-lg) glass-blur',
+			'fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-gutter rounded-bar border border-divider bg-well p-card shadow-lg glass-blur',
 			className
 		)}
 		{...restProps}

package/dist/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -11,6 +11,6 @@
 
 <AlertDialog.Overlay
 	bind:ref
-	class={cn('fixed inset-0 z-50 bg-(--era-overlay-bg)', className)}
+	class={cn('fixed inset-0 z-50 bg-overlay', className)}
 	{...restProps}
 />

package/dist/ui/aspect-ratio/aspect-ratio.svelte

@@ -10,10 +10,6 @@
 	}: PartProps<AspectRatio.RootProps> = $props();
 </script>
 
-<AspectRatio.Root
-	bind:ref
-	class={cn('overflow-hidden rounded-(--era-rd-control)', className)}
-	{...restProps}
->
+<AspectRatio.Root bind:ref class={cn('overflow-hidden rounded-control', className)} {...restProps}>
 	{@render children?.()}
 </AspectRatio.Root>

package/dist/ui/avatar/avatar-fallback.svelte

@@ -13,7 +13,7 @@
 <Avatar.Fallback
 	bind:ref
 	class={cn(
-		'inline-flex size-full items-center justify-center bg-(--era-surface-bg-elevated) text-body text-muted',
+		'inline-flex size-full items-center justify-center bg-elevated text-body text-muted',
 		className
 	)}
 	{...restProps}