@signal9/era-ui 10.1.0 → 11.0.0

package/dist/ui/bar/bar.svelte.d.ts

@@ -1,8 +1,8 @@
 export declare const barVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        chip: "h-(--era-h-chip) rounded-(--era-rd-chip)";
-        control: "h-(--era-h-control) rounded-(--era-rd-control)";
-        bar: "h-(--era-h-bar) rounded-(--era-rd-bar)";
+        chip: "h-chip rounded-chip";
+        control: "h-control rounded-control";
+        bar: "h-bar rounded-bar";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -19,7 +19,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   per size and comes from the compounds below.
      */
     content: {
-        tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
+        tier: "gap-icon-inset-chip px-icon-inset-chip";
         pill: "";
     };
     /**
@@ -41,14 +41,14 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   both. Collapses to flat in square mode like every radius.
      */
     divider: {
-        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-control) [box-shadow:0_1px_0_var(--color-divider-faded)]";
+        true: "shrink-0 rounded-t-none rounded-b-control [box-shadow:0_1px_0_var(--color-divider-faded)]";
         false: "";
     };
 }, undefined, "flex items-center leading-none", {
     size: {
-        chip: "h-(--era-h-chip) rounded-(--era-rd-chip)";
-        control: "h-(--era-h-control) rounded-(--era-rd-control)";
-        bar: "h-(--era-h-bar) rounded-(--era-rd-bar)";
+        chip: "h-chip rounded-chip";
+        control: "h-control rounded-control";
+        bar: "h-bar rounded-bar";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -65,7 +65,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   per size and comes from the compounds below.
      */
     content: {
-        tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
+        tier: "gap-icon-inset-chip px-icon-inset-chip";
         pill: "";
     };
     /**
@@ -87,14 +87,14 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   both. Collapses to flat in square mode like every radius.
      */
     divider: {
-        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-control) [box-shadow:0_1px_0_var(--color-divider-faded)]";
+        true: "shrink-0 rounded-t-none rounded-b-control [box-shadow:0_1px_0_var(--color-divider-faded)]";
         false: "";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        chip: "h-(--era-h-chip) rounded-(--era-rd-chip)";
-        control: "h-(--era-h-control) rounded-(--era-rd-control)";
-        bar: "h-(--era-h-bar) rounded-(--era-rd-bar)";
+        chip: "h-chip rounded-chip";
+        control: "h-control rounded-control";
+        bar: "h-bar rounded-bar";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -111,7 +111,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   per size and comes from the compounds below.
      */
     content: {
-        tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
+        tier: "gap-icon-inset-chip px-icon-inset-chip";
         pill: "";
     };
     /**
@@ -133,7 +133,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   both. Collapses to flat in square mode like every radius.
      */
     divider: {
-        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-control) [box-shadow:0_1px_0_var(--color-divider-faded)]";
+        true: "shrink-0 rounded-t-none rounded-b-control [box-shadow:0_1px_0_var(--color-divider-faded)]";
         false: "";
     };
 }, undefined>>;

package/dist/ui/button/button.svelte

@@ -83,7 +83,7 @@
 		class="inline-flex items-center justify-center [gap:inherit] not-has-[svg]:era-label-ink"
 	>
 		{#if loading}
-			<LoaderCircle class="size-(--era-h-icon) shrink-0 animate-spin" aria-hidden="true" />
+			<LoaderCircle class="size-icon shrink-0 animate-spin" aria-hidden="true" />
 			{#if loadingLabel}<span class="sr-only">{loadingLabel}</span>{/if}
 		{/if}
 		{@render children?.()}

package/dist/ui/button/variants.d.ts

@@ -1,6 +1,6 @@
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        filled: "flex justify-center shadow-(--era-shadow) hover:shadow-(--era-highlight-shadow) active:shadow-(--era-shadow-pressed) [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
+        filled: "flex justify-center shadow-sm hover:shadow-highlight active:shadow-pressed [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
         link: "inline-flex underline-offset-2 hover:underline";
     };
     tone: {
@@ -22,9 +22,9 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     active: {
         true: "";
     };
-}, undefined, "items-center gap-(--era-gap) text-body era-interactive leading-none", {
+}, undefined, "items-center gap-gutter text-body era-interactive leading-none", {
     variant: {
-        filled: "flex justify-center shadow-(--era-shadow) hover:shadow-(--era-highlight-shadow) active:shadow-(--era-shadow-pressed) [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
+        filled: "flex justify-center shadow-sm hover:shadow-highlight active:shadow-pressed [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
         link: "inline-flex underline-offset-2 hover:underline";
     };
     tone: {
@@ -48,7 +48,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        filled: "flex justify-center shadow-(--era-shadow) hover:shadow-(--era-highlight-shadow) active:shadow-(--era-shadow-pressed) [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
+        filled: "flex justify-center shadow-sm hover:shadow-highlight active:shadow-pressed [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
         link: "inline-flex underline-offset-2 hover:underline";
     };
     tone: {

package/dist/ui/button/variants.js

@@ -3,7 +3,7 @@ import { tv } from '../../utils/index.js';
 // entirely, so all geometry lives on filled compound variants rather than a
 // plain size variant.
 export const buttonVariants = tv({
-    base: 'items-center gap-(--era-gap) text-body era-interactive leading-none',
+    base: 'items-center gap-gutter text-body era-interactive leading-none',
     variants: {
         variant: {
             // The active: press treatment is inert outside the bevel surface —
@@ -12,7 +12,7 @@ export const buttonVariants = tv({
             // (press-sink, `[&:active>*]` — the one content-wrapper span from
             // button.svelte) so the icon AND label depress together like a keycap
             // while the frame holds still.
-            filled: 'flex justify-center shadow-(--era-shadow) hover:shadow-(--era-highlight-shadow) active:shadow-(--era-shadow-pressed) [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)',
+            filled: 'flex justify-center shadow-sm hover:shadow-highlight active:shadow-pressed [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)',
             link: 'inline-flex underline-offset-2 hover:underline'
         },
         tone: { default: '', accent: '', destructive: '', success: '', warning: '' },
@@ -25,27 +25,27 @@ export const buttonVariants = tv({
         {
             variant: 'filled',
             size: 'control',
-            class: 'h-(--era-h-control) min-w-(--era-h-control) rounded-(--era-rd-control)'
+            class: 'h-control min-w-control rounded-control'
         },
         {
             variant: 'filled',
             size: 'chip',
-            class: 'h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip)'
+            class: 'h-chip min-w-chip rounded-chip'
         },
         {
             variant: 'filled',
             size: 'pill',
-            class: 'h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill)'
+            class: 'h-pill min-w-pill rounded-pill'
         },
         {
             variant: 'filled',
             size: 'icon',
-            class: 'h-(--era-h-icon) min-w-(--era-h-icon) rounded-(--era-rd-icon)'
+            class: 'h-icon min-w-icon rounded-icon'
         },
         {
             variant: 'filled',
             size: 'icon',
-            class: 'h-(--era-h-icon) min-w-(--era-h-icon) rounded-(--era-rd-icon)'
+            class: 'h-icon min-w-icon rounded-icon'
         },
         // filled insets; icon buttons go square instead. When an icon is present,
         // gap widens to match the wall inset so the icon sits in rhythm with it.
@@ -53,16 +53,16 @@ export const buttonVariants = tv({
             variant: 'filled',
             icon: false,
             size: 'control',
-            class: 'px-(--era-inset-control) has-[svg]:gap-(--era-inset-control)'
+            class: 'px-inset-control has-[svg]:gap-inset-control'
         },
         {
             variant: 'filled',
             icon: false,
             size: 'chip',
-            class: 'px-(--era-inset-chip) has-[svg]:gap-(--era-inset-chip)'
+            class: 'px-inset-chip has-[svg]:gap-inset-chip'
         },
-        { variant: 'filled', icon: false, size: 'pill', class: 'px-(--era-pill-px)' },
-        { variant: 'filled', icon: false, size: 'icon', class: 'px-(--era-gap)' },
+        { variant: 'filled', icon: false, size: 'pill', class: 'px-pill' },
+        { variant: 'filled', icon: false, size: 'icon', class: 'px-gutter' },
         { variant: 'filled', icon: true, class: 'aspect-square px-0' },
         // Icon glyph sizing. The glyph is the icon tier (h-icon) at default/sm —
         // matching every text button's icon — but at the tight tiers, where the box
@@ -77,15 +77,15 @@ export const buttonVariants = tv({
         // notes "new note" button rendered a 24px glyph in a 24px box — flush,
         // no padding at all. Stating them makes the documented intent real and
         // removes the dependency on every call site remembering.
-        { icon: true, size: 'control', class: '[&_svg]:size-(--era-h-icon)' },
-        { icon: true, size: 'chip', class: '[&_svg]:size-(--era-h-icon)' },
-        { icon: true, size: 'pill', class: '[&_svg]:size-(--era-glyph-pill)' },
-        { icon: true, size: 'icon', class: '[&_svg]:size-(--era-glyph-icon)' },
+        { icon: true, size: 'control', class: '[&_svg]:size-icon' },
+        { icon: true, size: 'chip', class: '[&_svg]:size-icon' },
+        { icon: true, size: 'pill', class: '[&_svg]:size-glyph-pill' },
+        { icon: true, size: 'icon', class: '[&_svg]:size-glyph-icon' },
         // filled tones
         {
             variant: 'filled',
             tone: 'default',
-            class: 'text-fg hover:bg-(--era-highlight) hover:text-bright'
+            class: 'text-fg hover:bg-highlight hover:text-bright'
         },
         {
             variant: 'filled',
@@ -101,14 +101,14 @@ export const buttonVariants = tv({
         { variant: 'filled', tone: 'warning', class: 'text-fg hover:bg-warning hover:text-warning-fg' },
         // Latched controls (Toggle on, current tab/page) hold the pressed face:
         // the pressed shadow, so a selected control sits DOWN like a
-        // physically-held key — and `hover:shadow-(--era-shadow-pressed)` keeps it
+        // physically-held key — and `hover:shadow-pressed` keeps it
         // down when the cursor is over it (else the base `hover:shadow-…highlight`
         // would raise it back up, the "it comes back up on hover" bug on bevel).
         // The result is two states, not three: raised, and held-down.
         {
             variant: 'filled',
             active: true,
-            class: 'bg-fill text-bright shadow-(--era-shadow-pressed) hover:shadow-(--era-shadow-pressed)'
+            class: 'bg-fill text-bright shadow-pressed hover:shadow-pressed'
         },
         // link tones: static prose until the cursor confirms interactivity
         { variant: 'link', tone: 'default', class: 'text-fg' },

package/dist/ui/button-group/button-group.svelte

@@ -22,9 +22,9 @@
 		// shrink-0: a segmented control is its buttons' width — Badge/Chip's law
 		// one tier up. Squeezed, its rounded fill slid out from under the end
 		// buttons (measured 4px at touch on the board).
-		'flex shrink-0 gap-(--era-icon-inset-chip)',
+		'flex shrink-0 gap-icon-inset-chip',
 		orientation === 'vertical'
-			? 'flex-col items-stretch p-(--era-icon-inset-chip) [&>*]:justify-start'
+			? 'flex-col items-stretch p-icon-inset-chip [&>*]:justify-start'
 			: 'items-center',
 		className
 	)}

package/dist/ui/calendar/calendar-day.svelte

@@ -8,7 +8,7 @@
 <Calendar.Day
 	bind:ref
 	class={cn(
-		'inline-flex size-(--era-h-control) cursor-default items-center justify-center rounded-(--era-rd-control) text-body text-fg hover:bg-(--era-highlight) focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
+		'inline-flex size-control cursor-default items-center justify-center rounded-control text-body text-fg hover:bg-highlight focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
 		className
 	)}
 	{...restProps}

package/dist/ui/calendar/calendar-grid-row.svelte

@@ -5,4 +5,4 @@
 	let { ref = $bindable(null), class: className, ...restProps }: Calendar.GridRowProps = $props();
 </script>
 
-<Calendar.GridRow bind:ref class={cn('flex gap-(--era-gap)', className)} {...restProps} />
+<Calendar.GridRow bind:ref class={cn('flex gap-gutter', className)} {...restProps} />

package/dist/ui/calendar/calendar-grid.svelte

@@ -5,4 +5,4 @@
 	let { ref = $bindable(null), class: className, ...restProps }: Calendar.GridProps = $props();
 </script>
 
-<Calendar.Grid bind:ref class={cn('flex flex-col gap-(--era-gap)', className)} {...restProps} />
+<Calendar.Grid bind:ref class={cn('flex flex-col gap-gutter', className)} {...restProps} />

package/dist/ui/calendar/calendar-head-cell.svelte

@@ -8,7 +8,7 @@
 <Calendar.HeadCell
 	bind:ref
 	class={cn(
-		'flex size-(--era-h-control) items-center justify-center text-body font-normal text-muted',
+		'flex size-control items-center justify-center text-body font-normal text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/calendar/calendar-header.svelte

@@ -7,6 +7,6 @@
 
 <Calendar.Header
 	bind:ref
-	class={cn('flex h-(--era-h-control) items-center justify-between gap-(--era-gap)', className)}
+	class={cn('flex h-control items-center justify-between gap-gutter', className)}
 	{...restProps}
 />

package/dist/ui/calendar/calendar-next-button.svelte

@@ -23,7 +23,7 @@
 			{#if children}
 				{@render children()}
 			{:else}
-				<ChevronRight class="size-(--era-h-icon)" />
+				<ChevronRight class="size-icon" />
 			{/if}
 		</Button>
 	{/snippet}

package/dist/ui/calendar/calendar-prev-button.svelte

@@ -23,7 +23,7 @@
 			{#if children}
 				{@render children()}
 			{:else}
-				<ChevronLeft class="size-(--era-h-icon)" />
+				<ChevronLeft class="size-icon" />
 			{/if}
 		</Button>
 	{/snippet}

package/dist/ui/calendar/calendar-root.svelte

@@ -23,7 +23,7 @@
 	bind:ref
 	bind:value
 	bind:placeholder
-	class={cn('inline-flex flex-col gap-(--era-gap)', className)}
+	class={cn('inline-flex flex-col gap-gutter', className)}
 	fixedWeeks
 	weekdayFormat="short"
 	{...restPropsAsAny}

package/dist/ui/card/card.svelte

@@ -2,17 +2,17 @@
 	import { cn, tv } from '../../utils/index.js';
 
 	export const cardVariants = tv({
-		base: 'block w-full rounded-(--era-rd-bar) text-left text-fg',
+		base: 'block w-full rounded-bar text-left text-fg',
 		variants: {
 			tone: {
-				elevated: 'bg-(--era-surface-bg-elevated) shadow-(--era-shadow)',
-				surface: 'bg-(--era-surface-bg)',
+				elevated: 'bg-elevated shadow-sm',
+				surface: 'bg-well',
 				// The recessed tier, the container-level twin of --era-field-bg. The
 				// other two tones are RAISED (elevated) and level (surface); there was
 				// no way to say "sunken", so anything wanting one — a tool's output
 				// pane, an expanded chip body — hand-rolled the fill and shadow-well
 				// pair instead of importing this.
-				well: 'bg-(--era-field-bg) shadow-(--era-shadow-well)',
+				well: 'bg-field shadow-well',
 				flat: ''
 			},
 			// Sectioned layout (header / body / footer with dividers) omits the
@@ -21,7 +21,7 @@
 			// default button padding and lines up with the <div>/<a> variants.
 			//
 			// EVEN on all four sides. This carried a half-height top padding
-			// (pt-gutter against pb-pad-md) borrowed from `p-content`, whose
+			// (pt-gutter against pb-pad-md) borrowed from `p-section`, whose
 			// asymmetry is earned: a content panel always follows a section heading
 			// ROW, and that row's own bar already contributes slack above the text,
 			// so padding evenly on top of it spends the space twice. A card has no
@@ -31,9 +31,9 @@
 			// reported it as "cards aren't evenly spaced", which is exactly what it
 			// was: the even-gap law, broken by default, in the component that
 			// bounds more consumer content than any other.
-			sectioned: { true: 'p-0', false: 'p-(--era-pad-card)' },
+			sectioned: { true: 'p-0', false: 'p-card' },
 			interactive: {
-				true: 'cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50'
+				true: 'cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50'
 			}
 		},
 		defaultVariants: { tone: 'elevated', sectioned: false, interactive: false }
@@ -113,15 +113,15 @@
 {#snippet body()}
 	{#if sectioned}
 		{#if header}
-			<div class="border-b border-divider-faded p-(--era-pad-card) text-bright">
+			<div class="border-b border-divider-faded p-card text-bright">
 				{@render header()}
 			</div>
 		{/if}
-		<div class="p-(--era-pad-card)">
+		<div class="p-card">
 			{@render children?.()}
 		</div>
 		{#if footer}
-			<div class="border-t border-divider-faded p-(--era-pad-card)">
+			<div class="border-t border-divider-faded p-card">
 				{@render footer()}
 			</div>
 		{/if}

package/dist/ui/card/card.svelte.d.ts

@@ -1,44 +1,44 @@
 export declare const cardVariants: import("tailwind-variants").TVReturnType<{
     tone: {
-        elevated: "bg-(--era-surface-bg-elevated) shadow-(--era-shadow)";
-        surface: "bg-(--era-surface-bg)";
-        well: "bg-(--era-field-bg) shadow-(--era-shadow-well)";
+        elevated: "bg-elevated shadow-sm";
+        surface: "bg-well";
+        well: "bg-field shadow-well";
         flat: "";
     };
     sectioned: {
         true: "p-0";
-        false: "p-(--era-pad-card)";
+        false: "p-card";
     };
     interactive: {
-        true: "cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
-}, undefined, "block w-full rounded-(--era-rd-bar) text-left text-fg", {
+}, undefined, "block w-full rounded-bar text-left text-fg", {
     tone: {
-        elevated: "bg-(--era-surface-bg-elevated) shadow-(--era-shadow)";
-        surface: "bg-(--era-surface-bg)";
-        well: "bg-(--era-field-bg) shadow-(--era-shadow-well)";
+        elevated: "bg-elevated shadow-sm";
+        surface: "bg-well";
+        well: "bg-field shadow-well";
         flat: "";
     };
     sectioned: {
         true: "p-0";
-        false: "p-(--era-pad-card)";
+        false: "p-card";
     };
     interactive: {
-        true: "cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     tone: {
-        elevated: "bg-(--era-surface-bg-elevated) shadow-(--era-shadow)";
-        surface: "bg-(--era-surface-bg)";
-        well: "bg-(--era-field-bg) shadow-(--era-shadow-well)";
+        elevated: "bg-elevated shadow-sm";
+        surface: "bg-well";
+        well: "bg-field shadow-well";
         flat: "";
     };
     sectioned: {
         true: "p-0";
-        false: "p-(--era-pad-card)";
+        false: "p-card";
     };
     interactive: {
-        true: "cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
 }, undefined>>;
 import type { Snippet } from 'svelte';

package/dist/ui/checkbox/checkbox-group.svelte

@@ -13,6 +13,6 @@
 <Checkbox.Group
 	bind:ref
 	bind:value
-	class={cn('flex flex-col gap-(--era-gap)', className)}
+	class={cn('flex flex-col gap-gutter', className)}
 	{...restProps}
 />

package/dist/ui/checkbox/checkbox.svelte

@@ -18,7 +18,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		'group/checkbox flex size-(--era-h-icon) shrink-0 era-interactive cursor-pointer items-center justify-center rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well) hover:bg-(--era-highlight)',
+		'group/checkbox flex size-icon shrink-0 era-interactive cursor-pointer items-center justify-center rounded-control bg-elevated shadow-well hover:bg-highlight',
 		className
 	)}
 	{...restProps}

package/dist/ui/chip/chip.svelte

@@ -13,11 +13,11 @@
 	export const chipVariants = tv({
 		// shrink-0 + nowrap for the same reason Badge carries them: the pill is
 		// already exactly its text's size, so any squeeze puts ink outside the fill.
-		base: 'inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow)',
+		base: 'inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-sm',
 		variants: {
 			size: {
-				chip: 'h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)',
-				pill: 'h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)'
+				chip: 'h-chip min-w-chip rounded-chip pl-chip',
+				pill: 'h-pill min-w-pill rounded-pill pl-pill'
 			},
 			dismissible: { true: '', false: '' }
 		},
@@ -26,14 +26,12 @@
 			{
 				size: 'chip',
 				dismissible: false,
-				class:
-					'gap-(--era-gap) pr-(--era-chip-px) not-has-[svg]:era-label-ink not-has-[svg]:text-center'
+				class: 'gap-gutter pr-chip not-has-[svg]:era-label-ink not-has-[svg]:text-center'
 			},
 			{
 				size: 'pill',
 				dismissible: false,
-				class:
-					'gap-(--era-gap) pr-(--era-pill-px) not-has-[svg]:era-label-ink not-has-[svg]:text-center'
+				class: 'gap-gutter pr-pill not-has-[svg]:era-label-ink not-has-[svg]:text-center'
 			},
 			// Dismissible, two geometries because the two tiers afford different ones:
 			//
@@ -51,9 +49,9 @@
 			{
 				size: 'chip',
 				dismissible: true,
-				class: 'gap-(--era-pill-inset-chip) pr-(--era-pill-inset-chip)'
+				class: 'gap-pill-inset-chip pr-pill-inset-chip'
 			},
-			{ size: 'pill', dismissible: true, class: 'gap-(--era-icon-inset-pill) pr-0' }
+			{ size: 'pill', dismissible: true, class: 'gap-icon-inset-pill pr-0' }
 		],
 		defaultVariants: { size: 'chip', dismissible: false }
 	});

package/dist/ui/chip/chip.svelte.d.ts

@@ -1,16 +1,16 @@
 export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        chip: "h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)";
-        pill: "h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)";
+        chip: "h-chip min-w-chip rounded-chip pl-chip";
+        pill: "h-pill min-w-pill rounded-pill pl-pill";
     };
     dismissible: {
         true: "";
         false: "";
     };
-}, undefined, "inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow)", {
+}, undefined, "inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-sm", {
     size: {
-        chip: "h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)";
-        pill: "h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)";
+        chip: "h-chip min-w-chip rounded-chip pl-chip";
+        pill: "h-pill min-w-pill rounded-pill pl-pill";
     };
     dismissible: {
         true: "";
@@ -18,8 +18,8 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        chip: "h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)";
-        pill: "h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)";
+        chip: "h-chip min-w-chip rounded-chip pl-chip";
+        pill: "h-pill min-w-pill rounded-pill pl-pill";
     };
     dismissible: {
         true: "";

package/dist/ui/code-block/code-block.svelte

@@ -38,14 +38,11 @@
      visibly off its curve. -->
 <div
 	bind:this={ref}
-	class={cn(
-		'relative rounded-(--era-rd-bar) bg-(--era-field-bg) shadow-(--era-shadow-well)',
-		className
-	)}
+	class={cn('relative rounded-bar bg-field shadow-well', className)}
 	{...restProps}
 >
 	<pre
-		class="overflow-x-auto px-(--era-field-px) py-(--era-inset-control) pr-[calc(var(--era-chip-inset-bar)+var(--era-h-chip)+var(--era-field-px))] font-mono text-body leading-body text-fg"><code
+		class="overflow-x-auto px-field py-inset-control pr-[calc(var(--era-chip-inset-bar)+var(--era-h-chip)+var(--era-field-px))] font-mono text-body leading-body text-fg"><code
 			>{#if children}{@render children()}{:else}{code}{/if}</code
 		></pre>
 	{#if copyable}
@@ -60,9 +57,6 @@
 		     in, which broke the moment the leading changed and was never the
 		     corner's own law: the button sat 4.75px from the top and 6.15px from
 		     the right edge at dense, visibly off the curve. -->
-		<CopyButton
-			text={copyText}
-			class="absolute top-(--era-chip-inset-bar) right-(--era-chip-inset-bar) bg-(--era-field-bg)"
-		/>
+		<CopyButton text={copyText} class="absolute top-chip-inset-bar right-chip-inset-bar bg-field" />
 	{/if}
 </div>

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

@@ -13,7 +13,7 @@
 <Collapsible.Trigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-control) w-full items-center rounded-(--era-rd-control) px-(--era-inset-control) text-body text-fg hover:bg-(--era-highlight) focus:outline-none disabled:opacity-50',
+		'flex h-control w-full items-center rounded-control px-inset-control text-body text-fg hover:bg-highlight focus:outline-none disabled:opacity-50',
 		className
 	)}
 	{...restProps}

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

@@ -15,7 +15,7 @@
 	bind:ref
 	align="start"
 	class={cn(
-		'z-50 w-max min-w-(--bits-combobox-anchor-width) overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
+		'z-50 w-max min-w-(--bits-combobox-anchor-width) overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
 		className
 	)}
 	{sideOffset}

package/dist/ui/combobox/combobox-empty.svelte

@@ -11,12 +11,7 @@
 	} = $props();
 </script>
 
-<div
-	class={cn(
-		'flex h-(--era-h-control) items-center px-(--era-inset-control) text-body text-muted',
-		className
-	)}
->
+<div class={cn('flex h-control items-center px-inset-control text-body text-muted', className)}>
 	{#if children}
 		{@render children()}
 	{:else}

package/dist/ui/combobox/combobox-group-heading.svelte

@@ -12,10 +12,7 @@
 
 <Combobox.GroupHeading
 	bind:ref
-	class={cn(
-		'flex h-(--era-h-control) items-center px-(--era-inset-control) text-body text-muted',
-		className
-	)}
+	class={cn('flex h-control items-center px-inset-control text-body text-muted', className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/ui/combobox/combobox-input.svelte

@@ -12,7 +12,7 @@
 	class={cn(
 		inputVariants(),
 		// era-ink-center: the same font-box-vs-ink correction Input documents.
-		'era-ink-center data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
+		'era-ink-center data-[state=open]:rounded-b-none data-[state=open]:shadow-pressed',
 		className
 	)}
 	{...restProps}