@insymetri/styleguide 0.1.87 → 0.1.89

package/dist/IIBadge/IIBadge.svelte

@@ -29,14 +29,14 @@
 	}
 
 	const sizeClasses: Record<string, string> = {
-		sm: 'px-8 py-4 text-tiny',
-		md: 'px-12 py-4 text-tiny',
+		sm: 'px-6 py-2 text-micro normal-case tracking-wide',
+		md: 'px-8 py-3 text-tiny tracking-none',
 	}
 </script>
 
 <span
 	class={cn(
-		'inline-flex items-center rounded-full border font-medium whitespace-nowrap',
+		'inline-flex items-center rounded-6 border font-medium whitespace-nowrap',
 		sizeClasses[size],
 		variantClasses[variant],
 		className

package/dist/IIButton/IIButton.svelte

@@ -66,35 +66,42 @@
 		}
 	}
 
+	// Weight 500 and the 0.5px press are part of the look: at 13px a 400-weight
+	// label reads as text rather than a control, and the nudge gives the press a
+	// physical beat without a colour change.
 	const baseClasses =
-		'relative inline-flex items-center justify-center whitespace-nowrap cursor-default transition-colors duration-base ease-in-out no-underline outline-none focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-primary'
+		'relative inline-flex items-center justify-center whitespace-nowrap font-medium cursor-default transition-all duration-base ease-in-out no-underline outline-none active:translate-y-[0.5px] disabled:active:translate-y-0 focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-primary'
 
+	// Solid fills (primary/danger/success/accent) carry no border and no shadow —
+	// the fill is the elevation, and hover dims rather than shifting hue.
+	// `secondary` is the workhorse: surface fill, hairline border, tier-1 shadow.
 	const variantClasses = {
 		primary:
-			'bg-button-primary text-button-primary border-0 hover:bg-button-primary-hover disabled:bg-button-primary-disabled',
+			'bg-button-primary text-button-primary border-0 shadow-none hover:opacity-92 disabled:bg-button-primary-disabled disabled:opacity-100',
 		secondary:
-			'bg-button-secondary text-button-secondary border border-button-secondary hover:text-button-secondary-hover hover:border-button-secondary-hover disabled:opacity-50',
-		ghost: 'text-button-ghost border-0 hover:bg-button-ghost-hover hover:text-button-ghost-hover disabled:opacity-50',
+			'bg-button-secondary text-button-secondary border border-button-secondary shadow-card hover:bg-background-alt hover:text-button-secondary-hover disabled:opacity-45 disabled:shadow-none',
+		ghost:
+			'text-button-ghost border-0 shadow-none hover:bg-button-ghost-hover hover:text-button-ghost-hover disabled:opacity-45',
 		danger:
-			'bg-button-danger text-button-danger border-0 hover:bg-button-danger-hover disabled:bg-button-danger-disabled',
+			'bg-button-danger text-button-danger border-0 shadow-none hover:opacity-92 disabled:bg-button-danger-disabled disabled:opacity-100',
 		success:
-			'bg-button-success text-button-success border-0 hover:bg-button-success-hover disabled:bg-button-success-disabled',
+			'bg-button-success text-button-success border-0 shadow-none hover:opacity-92 disabled:bg-button-success-disabled disabled:opacity-100',
 		accent:
-			'bg-button-accent text-button-accent border-0 hover:bg-button-accent-hover disabled:bg-button-accent-disabled',
+			'bg-button-accent text-button-accent border-0 shadow-none hover:opacity-92 disabled:bg-button-accent-disabled disabled:opacity-100',
 		dashed:
-			'bg-surface text-secondary border border-dashed border-gray-300 hover:bg-gray-50 hover:text-body hover:border-gray-400 disabled:opacity-50',
+			'bg-transparent text-secondary border border-dashed border-primary shadow-none hover:border-strong hover:text-body disabled:opacity-45',
 	} as const
 
 	const densityClasses = {
-		compact: 'h-28 px-8 gap-4 text-tiny leading-[22px] rounded-control',
-		default: 'h-32 px-12 gap-6 text-default leading-[26px] rounded-control',
-		comfortable: 'h-40 px-12 gap-6 text-small leading-[32px] rounded-control',
-		mobile: 'h-48 px-16 gap-8 text-default leading-[40px] rounded-control',
+		compact: 'h-26 px-8 gap-6 text-tiny leading-[20px] rounded-control',
+		default: 'h-30 px-11 gap-6 text-default leading-[24px] rounded-control',
+		comfortable: 'h-36 px-14 gap-6 text-default leading-[28px] rounded-control',
+		mobile: 'h-44 px-16 gap-8 text-large leading-[36px] rounded-control',
 	} as const
 
 	const fixedSizeClasses = {
-		sm: 'h-24 px-8 gap-4 text-tiny leading-[18px] rounded-control',
-		lg: 'h-40 px-16 gap-8 text-large leading-[32px] rounded-control',
+		sm: 'h-26 px-8 gap-4 text-tiny leading-[20px] rounded-control',
+		lg: 'h-36 px-14 gap-8 text-large leading-[28px] rounded-control',
 	} as const
 
 	const iconSizeClasses = {
@@ -103,9 +110,7 @@
 		lg: 'w-16 h-16',
 	} as const
 
-	const resolvedSizeClasses = $derived(
-		size === 'md' ? densityClasses[density.value] : fixedSizeClasses[size]
-	)
+	const resolvedSizeClasses = $derived(size === 'md' ? densityClasses[density.value] : fixedSizeClasses[size])
 </script>
 
 {#snippet iconContent()}
@@ -119,7 +124,8 @@
 	{/if}
 	{#if isLoading}
 		<span class="absolute inset-0 flex items-center justify-center pointer-events-none">
-			<span class={cn('border-2 border-current border-r-transparent rounded-full animate-spin', iconSizeClasses[size])}></span>
+			<span class={cn('border-2 border-current border-r-transparent rounded-full animate-spin', iconSizeClasses[size])}
+			></span>
 		</span>
 	{/if}
 {/snippet}

package/dist/IICalendar/IICalendarGrid.svelte

@@ -177,7 +177,7 @@
 		{#each monthNamesShort as name, i (i)}
 			<button
 				type="button"
-				class="py-8 rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none {i + 1 === displayedMonth ? 'bg-primary text-inverse font-semibold hover:bg-primary' : ''} {i + 1 === currentMonth && displayedYear === currentYear ? 'shadow-[inset_0_0_0_1px_var(--ii-primary)]' : ''}"
+				class="py-8 rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none {i + 1 === displayedMonth ? 'bg-primary text-on-primary font-semibold hover:bg-primary' : ''} {i + 1 === currentMonth && displayedYear === currentYear ? 'shadow-[inset_0_0_0_1px_var(--ii-primary)]' : ''}"
 				onclick={() => selectMonth(i + 1)}
 			>
 				{name}
@@ -191,7 +191,7 @@
 		{#each decadeYears as year (year)}
 			<button
 				type="button"
-				class="py-8 rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none {year === displayedYear ? 'bg-primary text-inverse font-semibold hover:bg-primary' : ''} {year === currentYear ? 'shadow-[inset_0_0_0_1px_var(--ii-primary)]' : ''} {year === decadeStart || year === decadeStart + 11 ? 'text-tertiary opacity-50' : ''}"
+				class="py-8 rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none {year === displayedYear ? 'bg-primary text-on-primary font-semibold hover:bg-primary' : ''} {year === currentYear ? 'shadow-[inset_0_0_0_1px_var(--ii-primary)]' : ''} {year === decadeStart || year === decadeStart + 11 ? 'text-tertiary opacity-50' : ''}"
 				onclick={() => selectYear(year)}
 			>
 				{year}

package/dist/IICard/IICard.svelte

@@ -23,22 +23,22 @@
 	}: Props = $props()
 
 	const variantClasses = {
-		default: 'bg-surface border border-primary',
-		outlined: 'bg-transparent border border-strong',
-		elevated: 'bg-surface shadow-card',
+		default: 'bg-surface-raised border border-subtle',
+		outlined: 'bg-transparent border border-primary',
+		elevated: 'bg-surface-raised border border-subtle shadow-card-hover',
 	} as const
 
 	const paddingClasses = {
 		none: '',
 		sm: 'p-12',
-		md: 'p-16',
-		lg: 'p-24',
+		md: 'p-18',
+		lg: 'p-20',
 	} as const
 </script>
 
 <div
 	class={cn(
-		'rounded-12',
+		'rounded-14',
 		variantClasses[variant],
 		hoverable && 'transition-shadow duration-fast hover:shadow-card-hover cursor-default',
 		className

package/dist/IICheckbox/IICheckbox.svelte

@@ -44,10 +44,10 @@
 	>
 		<div
 			class={cn(
-				'flex items-center justify-center border rounded-6 transition-all duration-fast motion-reduce:transition-none',
+				'flex items-center justify-center border-1.5 rounded-5 transition-all duration-fast motion-reduce:transition-none',
 				size === 'sm' ? 'w-16 h-16' : 'w-18 h-18',
 				checked
-					? 'bg-primary border-accent'
+					? 'bg-primary border-primary text-on-primary'
 					: 'border-strong bg-transparent hover:border-input-border-hover',
 				disabled && 'opacity-50'
 			)}
@@ -58,9 +58,7 @@
 		</div>
 	</Checkbox.Root>
 	{#if label}
-		<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50')}
-			>{label}</span
-		>
+		<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50')}>{label}</span>
 	{:else if children}
 		<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50')}>
 			{@render children()}

package/dist/IIInput/IIInput.svelte

@@ -37,10 +37,10 @@
 	const density = useDensity()
 
 	const densityClasses = {
-		compact: 'h-28 rounded-control text-small',
-		default: 'h-32 rounded-control text-small',
-		comfortable: 'h-40 rounded-control text-small',
-		mobile: 'h-48 rounded-control text-large',
+		compact: 'h-30 rounded-9 text-default',
+		default: 'h-34 rounded-9 text-default',
+		comfortable: 'h-38 rounded-9 text-default',
+		mobile: 'h-44 rounded-10 text-large',
 	} as const
 
 	const showError = $derived(error || !!errorMessage)
@@ -63,7 +63,7 @@
 				showError
 					? 'border-input-border-error hover:border-input-border-error focus-within:border-input-border-error focus-within:ring-error'
 					: 'hover:not-focus-within:border-button-secondary-hover focus-within:border-accent focus-within:ring-primary',
-					disabled && 'bg-input-bg-disabled'
+				disabled && 'bg-input-bg-disabled'
 			)}
 		>
 			{#if prefix}

package/dist/IIModal/IIModal.svelte

@@ -68,8 +68,8 @@
 		<Dialog.Overlay
 			class={cn(
 				'fixed inset-0 z-14 data-[state=open]:animate-modal-overlay-in data-[state=closed]:animate-modal-overlay-out motion-reduce:animate-none',
-				overlay === 'dark' && 'bg-black/30',
-				overlay === 'light' && 'bg-black/10',
+				overlay === 'dark' && 'bg-overlay backdrop-blur-4',
+				overlay === 'light' && 'bg-overlay-light backdrop-blur-2',
 				overlay === 'none' && 'pointer-events-none'
 			)}
 		/>
@@ -89,13 +89,13 @@
 				// property — both compose with the open/close slide animation, which owns `transform`
 				// (translateY). A transform-based center would be clobbered by the animation and
 				// shift the modal for the animation's duration.
-				'fixed left-0 right-0 mx-auto bg-surface border border-primary rounded-12 w-[calc(100%-20px)] flex flex-col z-15 data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out motion-reduce:animate-none focus:outline-none',
+				'fixed left-0 right-0 mx-auto bg-surface-raised border border-subtle rounded-16 w-[calc(100%-20px)] flex flex-col z-15 data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out motion-reduce:animate-none focus:outline-none',
 				// Vertical: anchored 15% from the top (default) vs. centered. When anchored, height
 				// is capped so a tall modal still clears the bottom (15% + 78vh leaves ~7vh below);
 				// centered can safely use the full 90vh since -50% keeps it within the viewport.
 				centered ? 'top-1/2 [translate:0_-50%] max-h-[90vh]' : 'top-[15%] max-h-[78vh]',
 				// Same edge for every overlay: shadow-modal (previously no-overlay used shadow-floating).
-			'shadow-modal',
+				'shadow-modal',
 				size === 'sm' && 'max-w-400',
 				size === 'md' && 'max-w-500',
 				size === 'lg' && 'max-w-700',

package/dist/IISegmentedControl/IISegmentedControl.svelte

@@ -16,13 +16,7 @@
 		focusWithRing?: () => void
 	}
 
-	let {
-		items,
-		value = $bindable(),
-		onValueChange,
-		class: className,
-		focusWithRing = $bindable(),
-	}: Props = $props()
+	let {items, value = $bindable(), onValueChange, class: className, focusWithRing = $bindable()}: Props = $props()
 
 	let rootEl = $state<HTMLDivElement | null>(null)
 	let forceRing = $state(false)
@@ -56,7 +50,7 @@
 		mobile: 3,
 	} as const
 
-	const activeIndex = $derived(items.findIndex((item) => item.value === value))
+	const activeIndex = $derived(items.findIndex(item => item.value === value))
 
 	function select(v: string) {
 		value = v
@@ -74,7 +68,9 @@
 	function typeahead(char: string) {
 		typeaheadBuffer += char.toLowerCase()
 		clearTimeout(typeaheadTimer)
-		typeaheadTimer = setTimeout(() => { typeaheadBuffer = '' }, 500)
+		typeaheadTimer = setTimeout(() => {
+			typeaheadBuffer = ''
+		}, 500)
 
 		const match = items.find(i => i.label.toLowerCase().startsWith(typeaheadBuffer))
 		if (match && match.value !== value) select(match.value)
@@ -105,10 +101,8 @@
 <div
 	bind:this={rootEl}
 	class={cn(
-		'relative inline-grid bg-input-bg border border-button-secondary rounded-control outline-none cursor-default',
-		forceRing
-			? 'focus:ring-3 focus:ring-primary'
-			: 'focus-visible:ring-3 focus-visible:ring-primary',
+		'relative inline-grid bg-background-alt border-0 rounded-10 outline-none cursor-default',
+		forceRing ? 'focus:ring-3 focus:ring-primary' : 'focus-visible:ring-3 focus-visible:ring-primary',
 		densityHeight[density.value],
 		className
 	)}

package/dist/IIStepper/IIStepper.svelte

@@ -49,8 +49,8 @@
 			<span
 				class={cn(
 					'flex items-center justify-center w-28 h-28 rounded-full text-tiny-emphasis transition-colors duration-fast',
-					isCompleted && 'bg-primary text-inverse',
-					isActive && 'bg-primary text-inverse',
+					isCompleted && 'bg-primary text-on-primary',
+					isActive && 'bg-primary text-on-primary',
 					!isCompleted && !isActive && 'bg-muted text-secondary'
 				)}
 			>

package/dist/IISwitch/IISwitch.svelte

@@ -30,19 +30,14 @@
 
 <label class={cn('flex items-center gap-12', className)}>
 	{#if label}
-		<span
-			class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50')}
-			>{label}</span
-		>
+		<span class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50')}>{label}</span>
 	{:else if children}
-		<span
-			class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50')}
-		>
+		<span class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50')}>
 			{@render children()}
 		</span>
 	{/if}
 	<Switch.Root
-		class="group relative w-44 h-24 bg-muted rounded-full cursor-default transition-all duration-fast shrink-0 appearance-none border-none outline-none focus-visible:ring-3 focus-visible:ring-primary data-[state=checked]:bg-primary data-[disabled]:opacity-50 motion-reduce:transition-none"
+		class="group relative w-32 h-18 bg-strong rounded-full cursor-default transition-all duration-fast shrink-0 appearance-none border-none outline-none focus-visible:ring-3 focus-visible:ring-primary data-[state=checked]:bg-success data-[disabled]:opacity-50 motion-reduce:transition-none"
 		{checked}
 		onCheckedChange={newChecked => {
 			checked = newChecked
@@ -54,7 +49,7 @@
 		{...restProps}
 	>
 		<Switch.Thumb
-			class="block w-18 h-18 bg-white rounded-full transition-all duration-fast translate-x-3 shadow-subtle group-data-[state=checked]:translate-x-23 motion-reduce:transition-none"
+			class="block w-14 h-14 bg-white rounded-full transition-all duration-fast translate-x-2 shadow-subtle group-data-[state=checked]:translate-x-16 motion-reduce:transition-none"
 		/>
 	</Switch.Root>
 </label>

package/dist/IITable/IITable.svelte

@@ -70,68 +70,76 @@
 	}
 </script>
 
-<div class={cn('bg-surface border border-primary rounded-10 overflow-x-auto overflow-y-hidden', className)}>
+<div class={cn('bg-surface-raised border border-subtle rounded-12 overflow-x-auto overflow-y-hidden', className)}>
 	{#if children}
 		<table class="w-full border-collapse">
 			{@render children()}
 		</table>
 	{:else}
-	<table class="w-full border-collapse">
-		<thead class={cn('bg-background border-b border-primary', stickyHeader && 'sticky top-0 z-1')}>
-			<tr>
-				{#each columns as col (col.key)}
-					<th
-						class={cn(
-							'px-16 py-8 text-tiny-strong text-secondary uppercase',
-							alignClass[col.align ?? 'left'],
-							col.width,
-							col.headerClass
-						)}
-					>
-						{col.header}
-					</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody>
-			{#if loading}
-				<IITableSkeleton rows={loadingRows} columns={columns.map(() => 'text')} />
-			{:else if rows.length === 0}
-				{#if empty}
-					<tr>
-						<td colspan={columns.length} class="px-16 py-32 text-center">
-							{@render empty()}
-						</td>
-					</tr>
-				{/if}
-			{:else}
-				{#each rows as row (rowKey?.(row) ?? row)}
-					<tr
-						class={cn(
-							'border-b border-primary last:border-b-0',
-							interactive && 'cursor-pointer hover:bg-background',
-							rowClass?.(row)
-						)}
-						style="transition: background-color var(--transition-fast)"
-						onclick={onRowClick ? e => onRowClick(row, e) : undefined}
-						onauxclick={onRowClick ? e => onRowClick(row, e) : undefined}
-					>
-						{#each columns as col (col.key)}
-							<td class={cn('px-16 py-8 text-body', cellText, alignClass[col.align ?? 'left'], col.width, cellClass(col, row))}>
-								{@render col.cell(row)}
-							</td>
-						{/each}
-					</tr>
-					{#if expandedRow && isExpanded?.(row)}
-						<tr class="border-b border-primary last:border-b-0 bg-background">
-							<td colspan={columns.length} class="px-16 py-12">
-								{@render expandedRow(row)}
+		<table class="w-full border-collapse">
+			<thead class={cn('bg-background border-b border-primary', stickyHeader && 'sticky top-0 z-1')}>
+				<tr>
+					{#each columns as col (col.key)}
+						<th
+							class={cn(
+								'px-14 py-9 text-tiny-emphasis text-tertiary uppercase tracking-wide',
+								alignClass[col.align ?? 'left'],
+								col.width,
+								col.headerClass
+							)}
+						>
+							{col.header}
+						</th>
+					{/each}
+				</tr>
+			</thead>
+			<tbody>
+				{#if loading}
+					<IITableSkeleton rows={loadingRows} columns={columns.map(() => 'text')} />
+				{:else if rows.length === 0}
+					{#if empty}
+						<tr>
+							<td colspan={columns.length} class="px-16 py-32 text-center">
+								{@render empty()}
 							</td>
 						</tr>
 					{/if}
-				{/each}
-			{/if}
-		</tbody>
-	</table>
+				{:else}
+					{#each rows as row (rowKey?.(row) ?? row)}
+						<tr
+							class={cn(
+								'border-b border-primary last:border-b-0',
+								interactive && 'cursor-pointer hover:bg-background',
+								rowClass?.(row)
+							)}
+							style="transition: background-color var(--transition-fast)"
+							onclick={onRowClick ? e => onRowClick(row, e) : undefined}
+							onauxclick={onRowClick ? e => onRowClick(row, e) : undefined}
+						>
+							{#each columns as col (col.key)}
+								<td
+									class={cn(
+										'px-14 py-10 text-body',
+										cellText,
+										alignClass[col.align ?? 'left'],
+										col.width,
+										cellClass(col, row)
+									)}
+								>
+									{@render col.cell(row)}
+								</td>
+							{/each}
+						</tr>
+						{#if expandedRow && isExpanded?.(row)}
+							<tr class="border-b border-primary last:border-b-0 bg-background">
+								<td colspan={columns.length} class="px-16 py-12">
+									{@render expandedRow(row)}
+								</td>
+							</tr>
+						{/if}
+					{/each}
+				{/if}
+			</tbody>
+		</table>
 	{/if}
 </div>

package/dist/IITooltip/IITooltip.svelte

@@ -38,7 +38,7 @@
 				<B.Content
 					{side}
 					sideOffset={6}
-					class="z-19 rounded-6 bg-gray-900 text-white text-tiny leading-tight font-medium px-8 py-4 shadow-dropdown data-[state=delayed-open]:animate-fade-in data-[state=instant-open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none"
+					class="z-19 rounded-6 bg-dark text-inverse text-tiny leading-tight font-medium px-8 py-4 shadow-dropdown data-[state=delayed-open]:animate-fade-in data-[state=instant-open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none"
 				>
 					{text}
 				</B.Content>

package/dist/MobileOnboarding/LoginFlowBareAlt.svelte

@@ -436,9 +436,9 @@
 										<div
 											class="w-24 h-24 rounded-full flex items-center justify-center shrink-0
 												{hasFailed
-												? 'bg-error text-inverse'
+												? 'bg-error text-on-primary'
 												: sentComplete
-													? 'bg-primary text-inverse'
+													? 'bg-primary text-on-primary'
 													: 'bg-muted text-secondary'}
 												{deliveryStatus === 'sending' ? ' animate-pulse' : ''}"
 										>
@@ -469,11 +469,11 @@
 										<div
 											class="w-24 h-24 rounded-full flex items-center justify-center shrink-0
 												{hasFailed
-												? 'bg-error text-inverse'
+												? 'bg-error text-on-primary'
 												: deliveredComplete
-													? 'bg-primary text-inverse'
+													? 'bg-primary text-on-primary'
 													: isInFlight
-														? 'bg-primary text-inverse animate-pulse'
+														? 'bg-primary text-on-primary animate-pulse'
 														: 'bg-muted text-secondary'}"
 										>
 											{#if deliveredComplete}

package/dist/MobileOnboarding/MobileFlow.svelte

@@ -68,7 +68,7 @@
 			<button
 				class="px-8 py-4 rounded-6 text-[11px] font-medium border-0 cursor-default transition-colors duration-fast
 					{screen === currentScreen
-					? 'bg-primary text-inverse'
+					? 'bg-primary text-on-primary'
 					: i < currentIndex
 						? 'bg-success/15 text-success'
 						: 'bg-muted text-secondary hover:bg-hover-overlay'}"

package/dist/MobileOnboarding/OTPScreen.svelte

@@ -84,8 +84,8 @@
 			<div class="flex items-center gap-0">
 				<div
 					class="w-24 h-24 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0 {deliveryStatus === 'sending'
-						? 'bg-primary text-inverse animate-pulse'
-						: 'bg-primary text-inverse'}"
+						? 'bg-primary text-on-primary animate-pulse'
+						: 'bg-primary text-on-primary'}"
 				>
 					{#if deliveryStatus !== 'sending'}
 						<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor">
@@ -108,9 +108,9 @@
 				<span class="text-[10px] text-secondary mr-4 ml-8">Delivered</span>
 				<div
 					class="w-24 h-24 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0 {deliveryStatus === 'delivered'
-						? 'bg-primary text-inverse'
+						? 'bg-primary text-on-primary'
 						: deliveryStatus === 'sent'
-							? 'bg-primary text-inverse animate-pulse'
+							? 'bg-primary text-on-primary animate-pulse'
 							: 'bg-muted text-secondary'}"
 				>
 					{#if deliveryStatus === 'delivered'}

package/dist/MobileOnboarding/OTPScreenBare.svelte

@@ -160,9 +160,9 @@
 								<div
 									class="w-24 h-24 rounded-full flex items-center justify-center shrink-0
 										{hasFailed
-										? 'bg-error text-inverse'
+										? 'bg-error text-on-primary'
 										: sentComplete
-											? 'bg-primary text-inverse'
+											? 'bg-primary text-on-primary'
 											: 'bg-muted text-secondary'}
 										{deliveryStatus === 'sending' ? ' animate-pulse' : ''}"
 								>
@@ -193,11 +193,11 @@
 								<div
 									class="w-24 h-24 rounded-full flex items-center justify-center shrink-0
 										{hasFailed
-										? 'bg-error text-inverse'
+										? 'bg-error text-on-primary'
 										: deliveredComplete
-											? 'bg-primary text-inverse'
+											? 'bg-primary text-on-primary'
 											: isInFlight
-												? 'bg-primary text-inverse animate-pulse'
+												? 'bg-primary text-on-primary animate-pulse'
 												: 'bg-muted text-secondary'}"
 								>
 									{#if deliveredComplete}

package/dist/MobileOnboarding/current/ComparisonFlow.svelte

@@ -69,7 +69,7 @@
 			<button
 				class="px-8 py-4 rounded-6 text-[11px] font-medium border-0 cursor-default transition-colors duration-fast
 					{screen === currentScreen
-					? 'bg-primary text-inverse'
+					? 'bg-primary text-on-primary'
 					: i < currentIndex
 						? 'bg-success/15 text-success'
 						: 'bg-muted text-secondary hover:bg-hover-overlay'}"

package/dist/icons.d.ts

@@ -95,5 +95,24 @@ export declare const icons: {
     readonly moon: "<path fill=\"currentColor\" d=\"M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z\"/>";
     readonly coffee: "<path fill=\"currentColor\" d=\"M80,56V24a8,8,0,0,1,16,0V56a8,8,0,0,1-16,0Zm40,8a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,120,64Zm32,0a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,152,64Zm96,56v8a40,40,0,0,1-37.51,39.91,96.59,96.59,0,0,1-27,40.09H208a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H56.54A96.3,96.3,0,0,1,24,136V88a8,8,0,0,1,8-8H208A40,40,0,0,1,248,120ZM200,96H40v40a80.27,80.27,0,0,0,45.12,72h69.76A80.27,80.27,0,0,0,200,136Zm32,24a24,24,0,0,0-16-22.62V136a95.78,95.78,0,0,1-1.2,15A24,24,0,0,0,232,128Z\"/>";
     readonly paperclip: "<path fill=\"currentColor\" d=\"M209.66,122.34a8,8,0,0,1,0,11.32l-82.05,82a56,56,0,0,1-79.2-79.21L147.67,35.73a40,40,0,1,1,56.61,56.55L105,193A24,24,0,1,1,71,159L154.3,74.38A8,8,0,1,1,165.7,85.6L82.39,170.31a8,8,0,1,0,11.27,11.36L192.93,81A24,24,0,1,0,159,47L59.76,147.68a40,40,0,1,0,56.53,56.62l82.06-82A8,8,0,0,1,209.66,122.34Z\"/>";
+    readonly 'house-bold': "<path fill=\"currentColor\" d=\"m222.14 105.85l-80-80a20 20 0 0 0-28.28 0l-80 80A19.86 19.86 0 0 0 28 120v96a12 12 0 0 0 12 12h64a12 12 0 0 0 12-12v-52h24v52a12 12 0 0 0 12 12h64a12 12 0 0 0 12-12v-96a19.86 19.86 0 0 0-5.86-14.15M204 204h-40v-52a12 12 0 0 0-12-12h-48a12 12 0 0 0-12 12v52H52v-82.35l76-76l76 76Z\"/>";
+    readonly 'users-bold': "<path fill=\"currentColor\" d=\"M125.18 156.94a64 64 0 1 0-82.36 0a100.23 100.23 0 0 0-39.49 32a12 12 0 0 0 19.35 14.2a76 76 0 0 1 122.64 0a12 12 0 0 0 19.36-14.2a100.33 100.33 0 0 0-39.5-32M44 108a40 40 0 1 1 40 40a40 40 0 0 1-40-40m206.1 97.67a12 12 0 0 1-16.78-2.57A76.31 76.31 0 0 0 172 172a12 12 0 0 1 0-24a40 40 0 1 0-10.3-78.67a12 12 0 1 1-6.16-23.19a64 64 0 0 1 57.64 110.8a100.23 100.23 0 0 1 39.49 32a12 12 0 0 1-2.57 16.73\"/>";
+    readonly 'users-four-bold': "<path fill=\"currentColor\" d=\"M24.79 121.59a12 12 0 0 0 16.81-2.38a48 48 0 0 1 76.81 0a12 12 0 0 0 16.8 2.39a12.2 12.2 0 0 0 2.38-2.39a48 48 0 0 1 76.81 0a12 12 0 1 0 19.19-14.41a72 72 0 0 0-25.3-21.22a40 40 0 1 0-64.58 0A71 71 0 0 0 128 94.31a71 71 0 0 0-15.71-10.74a40 40 0 1 0-64.58 0a72 72 0 0 0-25.3 21.22a12 12 0 0 0 2.38 16.8M176 44a16 16 0 1 1-16 16a16 16 0 0 1 16-16m-96 0a16 16 0 1 1-16 16a16 16 0 0 1 16-16m128.29 151.57a40 40 0 1 0-64.58 0A71.3 71.3 0 0 0 128 206.3a71.3 71.3 0 0 0-15.71-10.73a40 40 0 1 0-64.58 0a72 72 0 0 0-25.3 21.22a12 12 0 0 0 19.19 14.42a48 48 0 0 1 76.81 0a12 12 0 0 0 16.8 2.39a12.2 12.2 0 0 0 2.38-2.39a48 48 0 0 1 76.81 0a12 12 0 1 0 19.19-14.41a71.9 71.9 0 0 0-25.3-21.23M80 156a16 16 0 1 1-16 16a16 16 0 0 1 16-16m96 0a16 16 0 1 1-16 16a16 16 0 0 1 16-16\"/>";
+    readonly 'phone-bold': "<path fill=\"currentColor\" d=\"m224 154.8l-47.09-21.11l-.18-.08a19.94 19.94 0 0 0-19 1.75a13 13 0 0 0-1.12.84l-22.31 19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a12 12 0 0 0 .85-1.15a20 20 0 0 0 1.66-18.83a1.4 1.4 0 0 1-.08-.18L101.2 32a20.06 20.06 0 0 0-20.78-11.85A60.27 60.27 0 0 0 28 80c0 81.61 66.39 148 148 148a60.27 60.27 0 0 0 59.85-52.42A20.06 20.06 0 0 0 224 154.8M176 204A124.15 124.15 0 0 1 52 80a36.29 36.29 0 0 1 28.48-35.54l18.82 42l-19.16 22.82a12 12 0 0 0-.86 1.16A20 20 0 0 0 78 130.08c9.42 19.28 28.83 38.56 48.31 48a20 20 0 0 0 19.69-1.45a12 12 0 0 0 1.11-.85l22.43-19.07l42 18.81A36.29 36.29 0 0 1 176 204\"/>";
+    readonly 'check-circle-bold': "<path fill=\"currentColor\" d=\"M176.49 95.51a12 12 0 0 1 0 17l-56 56a12 12 0 0 1-17 0l-24-24a12 12 0 1 1 17-17L112 143l47.51-47.52a12 12 0 0 1 16.98.03M236 128A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84a84.09 84.09 0 0 0 84-84\"/>";
+    readonly 'address-book-bold': "<path fill=\"currentColor\" d=\"M208 20H64a20 20 0 0 0-20 20v20H32a12 12 0 0 0 0 24h12v32H32a12 12 0 0 0 0 24h12v32H32a12 12 0 0 0 0 24h12v20a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V40a20 20 0 0 0-20-20m-4 192H68V44h136Zm-103.2-40.63a48 48 0 0 1 70.4 0a12 12 0 0 0 17.6-16.32a72 72 0 0 0-19.21-14.68a44 44 0 1 0-67.19 0a72.1 72.1 0 0 0-19.2 14.68a12 12 0 0 0 17.6 16.32M116 112a20 20 0 1 1 20 20a20 20 0 0 1-20-20\"/>";
+    readonly 'file-text-bold': "<path fill=\"currentColor\" d=\"m216.49 79.52l-56-56A12 12 0 0 0 152 20H56a20 20 0 0 0-20 20v176a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V88a12 12 0 0 0-3.51-8.48M160 57l23 23h-23ZM60 212V44h76v48a12 12 0 0 0 12 12h48v108Zm112-80a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m0 40a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12\"/>";
+    readonly 'currency-dollar-bold': "<path fill=\"currentColor\" d=\"M152 116h-12V60h4a28 28 0 0 1 28 28a12 12 0 0 0 24 0a52.06 52.06 0 0 0-52-52h-4V24a12 12 0 0 0-24 0v12h-4a52 52 0 0 0 0 104h4v56h-12a28 28 0 0 1-28-28a12 12 0 0 0-24 0a52.06 52.06 0 0 0 52 52h12v12a12 12 0 0 0 24 0v-12h12a52 52 0 0 0 0-104m-40 0a28 28 0 0 1 0-56h4v56Zm40 80h-12v-56h12a28 28 0 0 1 0 56\"/>";
+    readonly 'clipboard-text-bold': "<path fill=\"currentColor\" d=\"M172 164a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m-12-52H96a12 12 0 0 0 0 24h64a12 12 0 0 0 0-24m60-64v168a20 20 0 0 1-20 20H56a20 20 0 0 1-20-20V48a20 20 0 0 1 20-20h34.53a51.88 51.88 0 0 1 74.94 0H200a20 20 0 0 1 20 20M100.29 60h55.42a28 28 0 0 0-55.42 0M196 52h-17.41A52 52 0 0 1 180 64v8a12 12 0 0 1-12 12H88a12 12 0 0 1-12-12v-8a52 52 0 0 1 1.41-12H60v160h136Z\"/>";
+    readonly 'article-bold': "<path fill=\"currentColor\" d=\"M216 36H40a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h176a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20m-4 160H44V60h168ZM68 92a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12m0 36a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12m0 36a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12\"/>";
+    readonly 'list-bullets-bold': "<path fill=\"currentColor\" d=\"M76 64a12 12 0 0 1 12-12h128a12 12 0 0 1 0 24H88a12 12 0 0 1-12-12m140 52H88a12 12 0 0 0 0 24h128a12 12 0 0 0 0-24m0 64H88a12 12 0 0 0 0 24h128a12 12 0 0 0 0-24M44 112a16 16 0 1 0 16 16a16 16 0 0 0-16-16m0-64a16 16 0 1 0 16 16a16 16 0 0 0-16-16m0 128a16 16 0 1 0 16 16a16 16 0 0 0-16-16\"/>";
+    readonly 'chart-line-up-bold': "<path fill=\"currentColor\" d=\"M236 208a12 12 0 0 1-12 12H32a12 12 0 0 1-12-12V48a12 12 0 0 1 24 0v99l43.51-43.52a12 12 0 0 1 17 0L128 127l43-43h-11a12 12 0 0 1 0-24h40a12 12 0 0 1 12 12v40a12 12 0 0 1-24 0v-11l-51.51 51.52a12 12 0 0 1-17 0L96 129l-52 52v15h180a12 12 0 0 1 12 12\"/>";
+    readonly 'plus-bold': "<path fill=\"currentColor\" d=\"M228 128a12 12 0 0 1-12 12h-76v76a12 12 0 0 1-24 0v-76H40a12 12 0 0 1 0-24h76V40a12 12 0 0 1 24 0v76h76a12 12 0 0 1 12 12\"/>";
+    readonly 'caret-double-right-bold': "<path fill=\"currentColor\" d=\"m144.49 136.49l-80 80a12 12 0 0 1-17-17L119 128L47.51 56.49a12 12 0 0 1 17-17l80 80a12 12 0 0 1-.02 17m80-17l-80-80a12 12 0 1 0-17 17L199 128l-71.52 71.51a12 12 0 0 0 17 17l80-80a12 12 0 0 0 .01-17Z\"/>";
+    readonly 'caret-down-bold': "<path fill=\"currentColor\" d=\"m216.49 104.49l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z\"/>";
+    readonly 'gear-bold': "<path fill=\"currentColor\" d=\"M128 76a52 52 0 1 0 52 52a52.06 52.06 0 0 0-52-52m0 80a28 28 0 1 1 28-28a28 28 0 0 1-28 28m92-27.21v-1.58l14-17.51a12 12 0 0 0 2.23-10.59A111.8 111.8 0 0 0 225 71.89a12 12 0 0 0-9.11-5.89l-22.28-2.5l-1.11-1.11L190 40.1a12 12 0 0 0-5.89-9.1a111.7 111.7 0 0 0-27.23-11.27A12 12 0 0 0 146.3 22l-17.51 14h-1.58L109.7 22a12 12 0 0 0-10.59-2.23a111.8 111.8 0 0 0-27.22 11.28A12 12 0 0 0 66 40.11l-2.5 22.28l-1.11 1.11L40.1 66a12 12 0 0 0-9.1 5.89a111.7 111.7 0 0 0-11.23 27.23A12 12 0 0 0 22 109.7l14 17.51v1.58L22 146.3a12 12 0 0 0-2.23 10.59a111.8 111.8 0 0 0 11.29 27.22a12 12 0 0 0 9.05 5.89l22.28 2.48l1.11 1.11L66 215.9a12 12 0 0 0 5.89 9.1a111.7 111.7 0 0 0 27.23 11.27A12 12 0 0 0 109.7 234l17.51-14h1.58l17.51 14a12 12 0 0 0 10.59 2.23A111.8 111.8 0 0 0 184.11 225a12 12 0 0 0 5.91-9.06l2.48-22.28l1.11-1.11L215.9 190a12 12 0 0 0 9.06-5.91a111.7 111.7 0 0 0 11.27-27.23A12 12 0 0 0 234 146.3Zm-24.12-4.89a70 70 0 0 1 0 8.2a12 12 0 0 0 2.61 8.22l12.84 16.05a86.5 86.5 0 0 1-4.33 10.49l-20.43 2.27a12 12 0 0 0-7.65 4a69 69 0 0 1-5.8 5.8a12 12 0 0 0-4 7.65L166.86 207a86.5 86.5 0 0 1-10.49 4.35l-16.05-12.85a12 12 0 0 0-7.5-2.62h-.72a70 70 0 0 1-8.2 0a12.06 12.06 0 0 0-8.22 2.6l-16.05 12.85A86.5 86.5 0 0 1 89.14 207l-2.27-20.43a12 12 0 0 0-4-7.65a69 69 0 0 1-5.8-5.8a12 12 0 0 0-7.65-4L49 166.86a86.5 86.5 0 0 1-4.35-10.49l12.84-16.05a12 12 0 0 0 2.61-8.22a70 70 0 0 1 0-8.2a12 12 0 0 0-2.61-8.22L44.67 99.63A86.5 86.5 0 0 1 49 89.14l20.43-2.27a12 12 0 0 0 7.65-4a69 69 0 0 1 5.8-5.8a12 12 0 0 0 4-7.65L89.14 49a86.5 86.5 0 0 1 10.49-4.35l16.05 12.85a12.06 12.06 0 0 0 8.22 2.6a70 70 0 0 1 8.2 0a12 12 0 0 0 8.22-2.6l16.05-12.85A86.5 86.5 0 0 1 166.86 49l2.27 20.43a12 12 0 0 0 4 7.65a69 69 0 0 1 5.8 5.8a12 12 0 0 0 7.65 4L207 89.14a86.5 86.5 0 0 1 4.35 10.49l-12.84 16.05a12 12 0 0 0-2.63 8.22\"/>";
+    readonly 'sign-out-bold': "<path fill=\"currentColor\" d=\"M124 216a12 12 0 0 1-12 12H48a12 12 0 0 1-12-12V40a12 12 0 0 1 12-12h64a12 12 0 0 1 0 24H60v152h52a12 12 0 0 1 12 12m108.49-96.49l-40-40a12 12 0 0 0-17 17L195 116h-83a12 12 0 0 0 0 24h83l-19.52 19.51a12 12 0 0 0 17 17l40-40a12 12 0 0 0 .01-17\"/>";
+    readonly 'user-bold': "<path fill=\"currentColor\" d=\"M234.38 210a123.36 123.36 0 0 0-60.78-53.23a76 76 0 1 0-91.2 0A123.36 123.36 0 0 0 21.62 210a12 12 0 1 0 20.77 12c18.12-31.32 50.12-50 85.61-50s67.49 18.69 85.61 50a12 12 0 0 0 20.77-12M76 96a52 52 0 1 1 52 52a52.06 52.06 0 0 1-52-52\"/>";
+    readonly 'calendar-blank-bold': "<path fill=\"currentColor\" d=\"M208 28h-20v-4a12 12 0 0 0-24 0v4H92v-4a12 12 0 0 0-24 0v4H48a20 20 0 0 0-20 20v160a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V48a20 20 0 0 0-20-20M68 52a12 12 0 0 0 24 0h72a12 12 0 0 0 24 0h16v24H52V52ZM52 204V100h152v104Z\"/>";
 };
 export type IconName = keyof typeof icons;