@immich/ui 0.21.1 → 0.22.1

package/dist/common/context.svelte.d.ts

@@ -3,7 +3,8 @@ export declare const setFieldContext: (field: FieldContext) => FieldContext;
 export declare const hasFieldContext: () => boolean;
 export declare const getFieldContext: () => {
     label: string | undefined;
-    color: "primary" | "success" | "danger" | "warning" | "info" | "secondary" | "muted";
+    description: string | undefined;
+    color: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "muted";
     invalid: boolean;
     readOnly: boolean;
     required: boolean;

package/dist/common/context.svelte.js

@@ -4,6 +4,6 @@ const fieldKey = Symbol(withPrefix('field'));
 export const setFieldContext = (field) => setContext(fieldKey, field);
 export const hasFieldContext = () => hasContext(fieldKey);
 export const getFieldContext = () => {
-    const { label, color = 'secondary', invalid = false, readOnly = false, required = false, disabled = false, } = getContext(fieldKey) || {};
-    return { label, color, invalid, readOnly, required, disabled };
+    const { label, color = 'secondary', invalid = false, readOnly = false, required = false, disabled = false, description, } = getContext(fieldKey) || {};
+    return { label, description, color, invalid, readOnly, required, disabled };
 };

package/dist/components/AppShell/AppShellSidebar.svelte

@@ -17,7 +17,7 @@
 <Child for={ChildKey.AppShell} as={ChildKey.AppShellSidebar}>
 	<Scrollable
 		class={cleanClass(
-			'relative shrink-0 bg-light text-dark transition-all duration-200',
+			'bg-light text-dark relative shrink-0 transition-all duration-200',
 			open ? 'w-[min(100vw,16rem)]' : 'w-[0px]',
 			className,
 		)}

package/dist/components/AppShell/PageLayout.svelte

@@ -18,7 +18,7 @@
 	}: Props = $props();
 
 	let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden');
-	let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full');
+	let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-(--spacing(16)))]' : 'top-0 h-full');
 </script>
 
 <section class="relative">

package/dist/components/Avatar/Avatar.svelte

@@ -21,7 +21,7 @@
 	const { color = 'primary', size = 'medium', name }: Props = $props();
 
 	const styles = tv({
-		base: 'flex h-full w-full select-none items-center justify-center font-medium',
+		base: 'flex h-full w-full items-center justify-center font-medium select-none',
 		variants: {
 			size: {
 				tiny: 'h-5 w-5 text-xs',
@@ -32,15 +32,15 @@
 			},
 			color: {
 				primary: 'bg-primary text-light',
-				pink: 'bg-pink-400 text-light',
-				red: 'bg-red-500 text-light',
-				yellow: 'bg-yellow-500 text-light',
-				purple: 'bg-purple-600 text-dark',
-				orange: 'bg-orange-600 text-light',
-				gray: 'bg-gray-600 text-dark',
-				amber: 'bg-amber-600 text-light',
-				blue: 'bg-blue-500 text-dark',
-				green: 'bg-green-600 text-dark',
+				pink: 'text-light bg-pink-400',
+				red: 'text-light bg-red-500',
+				yellow: 'text-light bg-yellow-500',
+				purple: 'text-dark bg-purple-600',
+				orange: 'text-light bg-orange-600',
+				gray: 'text-dark bg-gray-600',
+				amber: 'text-light bg-amber-600',
+				blue: 'text-dark bg-blue-500',
+				green: 'text-dark bg-green-600',
 			},
 		},
 	});

package/dist/components/Card/Card.svelte

@@ -48,7 +48,7 @@
 		variants: {
 			color: {
 				primary: 'bg-primary/25 dark:bg-primary/25',
-				secondary: 'bg-gray-50 text-dark dark:bg-neutral-900 dark:text-white',
+				secondary: 'text-dark bg-gray-50 dark:bg-neutral-900 dark:text-white',
 				success: 'bg-success/15 dark:bg-success/30',
 				danger: 'bg-danger/15 dark:bg-danger/50',
 				warning: 'bg-warning/25 dark:bg-warning/50',

package/dist/components/Code/Code.svelte

@@ -42,9 +42,9 @@
 
 			filledColor: {
 				false: '',
-				muted: 'bg-gray-600 text-light dark:bg-gray-800',
-				primary: 'bg-gray-200 text-primary dark:bg-primary/20 dark:text-gray-200',
-				secondary: 'bg-gray-700 text-light dark:bg-gray-200',
+				muted: 'text-light bg-gray-600 dark:bg-gray-800',
+				primary: 'text-primary dark:bg-primary/20 bg-gray-200 dark:text-gray-200',
+				secondary: 'text-light bg-gray-700 dark:bg-gray-200',
 				success: 'bg-success text-light',
 				danger: 'bg-danger text-light',
 				warning: 'bg-warning text-light',

package/dist/components/Container/Container.svelte

@@ -18,10 +18,10 @@
 		variants: {
 			size: {
 				tiny: 'max-w-lg',
-				small: 'max-w-screen-sm',
-				medium: 'max-w-screen-md',
-				large: 'max-w-screen-lg',
-				giant: 'max-w-screen-xl',
+				small: 'max-w-(--breakpoint-sm)',
+				medium: 'max-w-(--breakpoint-md)',
+				large: 'max-w-(--breakpoint-lg)',
+				giant: 'max-w-(--breakpoint-xl)',
 				full: 'w-full',
 			},
 		},

package/dist/components/Form/Checkbox.svelte

@@ -2,6 +2,7 @@
 	import { getFieldContext } from '../../common/context.svelte.js';
 	import Icon from '../Icon/Icon.svelte';
 	import Label from '../Label/Label.svelte';
+	import Text from '../Text/Text.svelte';
 	import type { Color, Shape, Size } from '../../types.js';
 	import { cleanClass, generateId } from '../../utils.js';
 	import { mdiCheck, mdiMinus } from '@mdi/js';
@@ -24,11 +25,11 @@
 		...restProps
 	}: CheckboxProps = $props();
 
-	const { readOnly, required, invalid, disabled, label, ...labelProps } =
+	const { readOnly, required, invalid, disabled, label, description, ...labelProps } =
 		$derived(getFieldContext());
 
 	const containerStyles = tv({
-		base: 'ring-offset-background focus-visible:ring-ring peer box-content overflow-hidden border-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50',
+		base: 'ring-offset-background focus-visible:ring-ring peer data-[state=checked]:bg-primary box-content overflow-hidden border-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',
@@ -79,11 +80,15 @@
 	const id = generateId();
 	const inputId = `input-${id}`;
 	const labelId = `label-${id}`;
+	const descriptionId = $derived(description ? `description-${id}` : undefined);
 </script>
 
 <div class="flex flex-col gap-1">
 	{#if label}
 		<Label id={labelId} for={inputId} {label} {...labelProps} />
+		{#if description}
+			<Text color="secondary" size="small" id={descriptionId}>{description}</Text>
+		{/if}
 	{/if}
 
 	<CheckboxPrimitive.Root
@@ -101,6 +106,7 @@
 		disabled={disabled || readOnly}
 		{required}
 		aria-readonly={disabled || readOnly}
+		aria-describedby={descriptionId}
 		{...restProps}
 	>
 		{#snippet children({ checked, indeterminate })}

package/dist/components/Form/Input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getFieldContext } from '../../common/context.svelte.js';
 	import Label from '../Label/Label.svelte';
+	import Text from '../Text/Text.svelte';
 	import type { InputProps } from '../../types.js';
 	import { cleanClass, generateId } from '../../utils.js';
 	import { tv } from 'tailwind-variants';
@@ -15,11 +16,11 @@
 		...restProps
 	}: InputProps = $props();
 
-	const { label, readOnly, required, invalid, disabled, ...labelProps } =
+	const { label, description, readOnly, required, invalid, disabled, ...labelProps } =
 		$derived(getFieldContext());
 
 	const inputStyles = tv({
-		base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 aria-readonly:text-dark/50 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:disabled:text-gray-200 dark:aria-readonly:text-dark/75',
+		base: 'aria-readonly:text-dark/50 dark:aria-readonly:text-dark/75 w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',
@@ -53,7 +54,7 @@
 				giant: 'text-xl',
 			},
 			invalid: {
-				true: 'border border-danger/80',
+				true: 'border-danger/80 border',
 				false: '',
 			},
 		},
@@ -62,6 +63,7 @@
 	const id = generateId();
 	const inputId = `input-${id}`;
 	const labelId = `label-${id}`;
+	const descriptionId = $derived(description ? `description-${id}` : undefined);
 </script>
 
 <div class="flex w-full flex-col gap-1" bind:this={containerRef}>
@@ -69,6 +71,10 @@
 		<Label id={labelId} for={inputId} {label} {...labelProps} />
 	{/if}
 
+	{#if description}
+		<Text color="secondary" size="small" id={descriptionId}>{description}</Text>
+	{/if}
+
 	<div class={cleanClass('relative w-full', label && 'mt-1.5')}>
 		<input
 			id={inputId}
@@ -77,6 +83,7 @@
 			aria-required={required}
 			{disabled}
 			aria-disabled={disabled}
+			aria-describedby={descriptionId}
 			readonly={readOnly}
 			aria-readonly={readOnly}
 			class={cleanClass(

package/dist/components/Heading/Heading.svelte

@@ -27,7 +27,7 @@
 	}: Props = $props();
 
 	const styles = tv({
-		base: 'font-semibold leading-none tracking-tight',
+		base: 'leading-none font-semibold tracking-tight',
 		variants: {
 			color: {
 				muted: 'text-gray-600 dark:text-gray-400',

package/dist/components/Kbd/Kbd.svelte

@@ -15,7 +15,7 @@
 	const { class: className, size = 'small', children, ...restProps }: Props = $props();
 
 	const styles = tv({
-		base: 'flex flex-col rounded-md border border-b-2 bg-subtle px-1 font-mono text-dark shadow',
+		base: 'bg-subtle text-dark flex flex-col rounded-md border border-b-2 px-1 font-mono shadow',
 		variants: {
 			size: {
 				tiny: 'text-xs',

package/dist/components/LoadingSpinner/LoadingSpinner.svelte

@@ -12,7 +12,7 @@
 	let { size = 'medium', color = 'primary', class: className }: Props = $props();
 
 	const styles = tv({
-		base: 'animate-spin fill-primary text-gray-400 dark:text-gray-600',
+		base: 'fill-primary animate-spin text-gray-400 dark:text-gray-600',
 		variants: {
 			size: {
 				tiny: 'h-3',

package/dist/components/Logo/Logo.svelte

@@ -47,7 +47,7 @@
 			variant: {
 				stacked: '',
 				inline: '',
-				logo: 'aspect-square rounded-full bg-light shadow-lg',
+				logo: 'bg-light aspect-square rounded-full shadow-lg',
 				icon: 'aspect-square',
 			},
 		},

package/dist/components/Modal/Modal.svelte

@@ -37,14 +37,14 @@
 	}: Props = $props();
 
 	const modalStyles = tv({
-		base: 'flex rounded-none border border-subtle bg-subtle sm:rounded-2xl',
+		base: 'bg-light dark:bg-subtle border-subtle shadow-primary/20 flex rounded-none border shadow-sm sm:rounded-2xl dark:border-white/10',
 		variants: {
 			size: {
 				tiny: 'h-full sm:h-min md:max-w-sm',
 				small: 'h-full sm:h-min md:max-w-md',
-				medium: 'h-full sm:h-min md:max-w-screen-sm',
-				large: 'h-full sm:h-min md:max-w-screen-md',
-				giant: 'h-full sm:h-min md:max-w-screen-lg',
+				medium: 'h-full sm:h-min md:max-w-(--breakpoint-sm)',
+				large: 'h-full sm:h-min md:max-w-(--breakpoint-md)',
+				giant: 'h-full sm:h-min md:max-w-(--breakpoint-lg)',
 				full: 'h-full w-full',
 			},
 		},
@@ -69,28 +69,28 @@
 				'absolute start-0 top-0 flex h-dvh w-screen items-center justify-center overflow-hidden sm:p-4',
 			)}
 		>
-			<div class={cleanClass('flex h-full w-full flex-col items-center justify-center ')}>
+			<div class={cleanClass('flex h-full w-full flex-col items-center justify-center')}>
 				<Card class={cleanClass(modalStyles({ size }), className)}>
-					<CardHeader class="border-b border-gray-400 py-3 dark:border-gray-500">
+					<CardHeader class="border-b border-gray-200 px-5 py-3 dark:border-white/10">
 						<div class="flex items-center justify-between gap-2">
 							{#if typeof icon === 'string'}
 								<Icon {icon} size="1.5rem" aria-hidden />
 							{:else if icon}
 								<Logo variant="icon" size="tiny" />
 							{/if}
-							<CardTitle tag="h1" class="grow">{title}</CardTitle>
+							<CardTitle tag="p" class="text-dark/90 grow text-lg font-semibold">{title}</CardTitle>
 							<Dialog.Close>
 								<CloseButton onclick={() => onChange(false)} class="-me-2" />
 							</Dialog.Close>
 						</div>
 					</CardHeader>
 
-					<CardBody class="grow p-5">
+					<CardBody class="grow px-5">
 						{@render bodyChildren?.snippet()}
 					</CardBody>
 
 					{#if footerChildren}
-						<CardFooter class="border-t border-gray-400 dark:border-gray-500">
+						<CardFooter class="border-t border-gray-200 dark:border-white/10">
 							{@render footerChildren.snippet()}
 						</CardFooter>
 					{/if}

package/dist/components/Navbar/NavbarItem.svelte

@@ -35,7 +35,7 @@
 	);
 
 	const styles = tv({
-		base: 'flex w-full place-items-center gap-4 rounded-e-full px-5 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5',
+		base: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-e-full px-5 transition-[padding] delay-100 duration-100 group-hover:sm:px-5',
 		variants: {
 			active: {
 				true: 'bg-primary/10 text-primary',
@@ -55,7 +55,7 @@
 	aria-current={active ? 'page' : undefined}
 	class={styles({ active, variant: variant ?? 'default' })}
 >
-	<div class="flex w-full place-items-center gap-4 overflow-hidden truncate">
+	<div class="flex w-full place-items-center gap-4 truncate overflow-hidden">
 		{#if iconProps}
 			<Icon
 				size="1.375em"

package/dist/components/SupporterBadge/SupporterBadge.svelte

@@ -34,7 +34,7 @@
 				giant: 'px-3 py-2',
 			},
 			effect: {
-				hover: 'supporter-effect-hover border border-dark/25',
+				hover: 'supporter-effect-hover border-dark/25 border',
 				always: 'supporter-effect shadow',
 			},
 		},

package/dist/components/Switch/Switch.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getFieldContext } from '../../common/context.svelte.js';
 	import Label from '../Label/Label.svelte';
+	import Text from '../Text/Text.svelte';
 	import type { Color } from '../../types.js';
 	import { cleanClass, generateId } from '../../utils.js';
 	import { Switch, type WithoutChildrenOrChild } from 'bits-ui';
@@ -22,7 +23,8 @@
 		...restProps
 	}: Props = $props();
 
-	const { readOnly, required, disabled, label, ...labelProps } = $derived(getFieldContext());
+	const { readOnly, required, disabled, label, description, ...labelProps } =
+		$derived(getFieldContext());
 
 	const enabled = $derived(checked && !disabled);
 
@@ -52,10 +54,10 @@
 	});
 
 	const dot = tv({
-		base: 'absolute h-6 w-6 rounded-full transition-transform duration-[400ms]',
+		base: 'absolute h-6 w-6 rounded-full transition-transform duration-400',
 		variants: {
 			checked: {
-				true: 'translate-x-6 border border-gray-500/10 shadow-sm dark:border-gray-800/50 rtl:-translate-x-6',
+				true: 'translate-x-6 border border-gray-500/10 shadow-sm rtl:-translate-x-6 dark:border-gray-800/50',
 				false: '',
 			},
 			fillColor: {
@@ -72,6 +74,7 @@
 
 	const inputId = `input-${id}`;
 	const labelId = `label-${id}`;
+	const descriptionId = $derived(description ? `description-${id}` : undefined);
 </script>
 
 <Switch.Root
@@ -83,13 +86,19 @@
 	class={cleanClass(label && 'w-full', className)}
 	aria-readonly={readOnly}
 	aria-labelledby={labelId}
+	aria-describedby={descriptionId}
 	{...restProps}
 >
 	<Switch.Thumb>
 		{#snippet child()}
 			<div class={cleanClass(label && 'flex items-center justify-between gap-1')}>
 				{#if label}
-					<Label id={labelId} for={inputId} {label} {...labelProps} />
+					<div class="text-start">
+						<Label id={labelId} for={inputId} {label} {...labelProps} />
+						{#if description}
+							<Text color="secondary" size="small" id={descriptionId}>{description}</Text>
+						{/if}
+					</div>
 				{/if}
 				<span class={wrapper({ disabled })}>
 					<span class={bar({ fillColor: enabled ? color : 'default' })}> </span>

package/dist/components/Text/Text.svelte

@@ -2,6 +2,7 @@
 	import type { Size, TextColor } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
@@ -11,7 +12,7 @@
 		children: Snippet;
 		variant?: 'italic';
 		fontWeight?: 'light' | 'normal' | 'semi-bold' | 'bold';
-	};
+	} & HTMLAttributes<HTMLParagraphElement>;
 
 	const {
 		color,
@@ -20,6 +21,7 @@
 		fontWeight = 'normal',
 		children,
 		class: className,
+		...restProps
 	}: Props = $props();
 
 	const styles = tv({
@@ -56,6 +58,6 @@
 	});
 </script>
 
-<p class={cleanClass(styles({ color, size, fontWeight, variant }), className)}>
+<p class={cleanClass(styles({ color, size, fontWeight, variant }), className)} {...restProps}>
 	{@render children()}
 </p>

package/dist/components/Text/Text.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Size, TextColor } from '../../types.js';
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 type Props = {
     color?: TextColor;
     class?: string;
@@ -7,7 +8,7 @@ type Props = {
     children: Snippet;
     variant?: 'italic';
     fontWeight?: 'light' | 'normal' | 'semi-bold' | 'bold';
-};
+} & HTMLAttributes<HTMLParagraphElement>;
 declare const Text: import("svelte").Component<Props, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/index.d.ts

@@ -7,7 +7,6 @@ export { default as immichLogoStackedLight } from './assets/immich-logo-stacked-
 export { default as immichLogoJson } from './assets/immich-logo.json';
 export { default as immichLogo } from './assets/immich-logo.svg';
 export { default as playStoreBadge } from './assets/playstore-badge.png';
-export * from './theme/default.js';
 export { default as Alert } from './components/Alert/Alert.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
 export { default as AppShellHeader } from './components/AppShell/AppShellHeader.svelte';

package/dist/index.js

@@ -8,8 +8,6 @@ export { default as immichLogoStackedLight } from './assets/immich-logo-stacked-
 export { default as immichLogoJson } from './assets/immich-logo.json';
 export { default as immichLogo } from './assets/immich-logo.svg';
 export { default as playStoreBadge } from './assets/playstore-badge.png';
-// theme
-export * from './theme/default.js';
 // components
 export { default as Alert } from './components/Alert/Alert.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';

package/dist/internal/Button.svelte

@@ -33,7 +33,7 @@
 	const disabled = $derived((restProps as HTMLButtonAttributes).disabled || loading);
 
 	const buttonVariants = tv({
-		base: 'ring-offset-background focus-visible:ring-ring flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+		base: 'ring-offset-background focus-visible:ring-ring flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
 		variants: {
 			disabled: {
 				true: 'disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50',
@@ -84,12 +84,12 @@
 				info: 'bg-info text-light hover:bg-info/80',
 			},
 			outlineColor: {
-				primary: 'border border-primary bg-primary/10 text-primary hover:bg-primary/20',
-				secondary: 'border border-dark bg-dark/10 text-dark hover:bg-dark/20',
-				success: 'border border-success bg-success/10 text-success hover:bg-success/20',
-				danger: 'border border-danger bg-danger/10 text-danger hover:bg-danger/20',
-				warning: 'border border-warning bg-warning/10 text-warning hover:bg-warning/20',
-				info: 'border border-info bg-info/10 text-info hover:bg-info/20',
+				primary: 'border-primary bg-primary/10 text-primary hover:bg-primary/20 border',
+				secondary: 'border-dark bg-dark/10 text-dark hover:bg-dark/20 border',
+				success: 'border-success bg-success/10 text-success hover:bg-success/20 border',
+				danger: 'border-danger bg-danger/10 text-danger hover:bg-danger/20 border',
+				warning: 'border-warning bg-warning/10 text-warning hover:bg-warning/20 border',
+				info: 'border-info bg-info/10 text-info hover:bg-info/20 border',
 			},
 			ghostColor: {
 				primary: 'text-primary hover:bg-primary/10',

package/dist/internal/Select.svelte

@@ -116,7 +116,7 @@
 		<Select.Portal>
 			<Select.Content
 				bind:ref={contentRef}
-				class="max-h-96 select-none rounded-xl border bg-light py-3 text-dark outline-none"
+				class="bg-light text-dark max-h-96 rounded-xl border py-3 outline-none select-none"
 				sideOffset={10}
 			>
 				<Select.ScrollUpButton class="flex w-full items-center justify-center">
@@ -126,7 +126,7 @@
 					{#each options as { value, label, disabled }, i (i + value)}
 						<Select.Item
 							class={cleanClass(
-								'flex h-10 w-full select-none items-center px-5 py-3 text-sm outline-none duration-75 hover:bg-subtle data-[selected]:bg-primary/10 data-[disabled]:opacity-50',
+								'hover:bg-subtle data-[selected]:bg-primary/10 flex h-10 w-full items-center px-5 py-3 text-sm duration-75 outline-none select-none data-disabled:opacity-50',
 								disabled ? 'cursor-not-allowed' : 'cursor-pointer',
 							)}
 							{value}
@@ -135,7 +135,7 @@
 						>
 							{#snippet children({ selected })}
 								<div
-									class="flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors"
+									class="flex cursor-pointer items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-colors"
 								>
 									<span>{label}</span>
 								</div>

package/dist/styles.d.ts

@@ -16,41 +16,7 @@ export declare const styles: {
             warning: string;
             info: string;
         };
-    }, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
-        size: {
-            tiny: string;
-            small: string;
-            medium: string;
-            large: string;
-            giant: string;
-        };
-        color: {
-            muted: string;
-            primary: string;
-            secondary: string;
-            success: string;
-            danger: string;
-            warning: string;
-            info: string;
-        };
-    }, {
-        size: {
-            tiny: string;
-            small: string;
-            medium: string;
-            large: string;
-            giant: string;
-        };
-        color: {
-            muted: string;
-            primary: string;
-            secondary: string;
-            success: string;
-            danger: string;
-            warning: string;
-            info: string;
-        };
-    }>, {
+    }, undefined, "", {
         size: {
             tiny: string;
             small: string;
@@ -84,39 +50,5 @@ export declare const styles: {
             warning: string;
             info: string;
         };
-    }, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
-        size: {
-            tiny: string;
-            small: string;
-            medium: string;
-            large: string;
-            giant: string;
-        };
-        color: {
-            muted: string;
-            primary: string;
-            secondary: string;
-            success: string;
-            danger: string;
-            warning: string;
-            info: string;
-        };
-    }, {
-        size: {
-            tiny: string;
-            small: string;
-            medium: string;
-            large: string;
-            giant: string;
-        };
-        color: {
-            muted: string;
-            primary: string;
-            secondary: string;
-            success: string;
-            danger: string;
-            warning: string;
-            info: string;
-        };
-    }>, unknown, unknown, undefined>>;
+    }, undefined, "", unknown, unknown, undefined>>;
 };

package/dist/theme/default.css

@@ -1,6 +1,17 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme inline {
+	--color-primary: rgb(var(--immich-ui-primary));
+	--color-light: rgb(var(--immich-ui-light));
+	--color-dark: rgb(var(--immich-ui-dark));
+	--color-success: rgb(var(--immich-ui-success));
+	--color-danger: rgb(var(--immich-ui-danger));
+	--color-warning: rgb(var(--immich-ui-warning));
+	--color-info: rgb(var(--immich-ui-info));
+	--color-subtle: rgb(var(--immich-ui-gray));
+}
+
+@custom-variant dark (&:where(.dark, .dark *));
 
 @layer base {
 	:root {
@@ -28,6 +39,14 @@
 		--immich-ui-info: 121 183 254;
 		--immich-ui-gray: 33 33 33;
 
-		--immich-ui-default-border: 55 65 81;
+		--immich-ui-default-border: 33 33 33;
+	}
+
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: rgb(var(--immich-ui-default-border));
 	}
 }

package/dist/types.d.ts

@@ -90,6 +90,7 @@ export type LabelProps = {
 } & HTMLLabelAttributes;
 export type FieldContext = {
     label?: string;
+    description?: string;
     invalid?: boolean;
     disabled?: boolean;
     required?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.21.1",
+	"version": "0.22.1",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",
@@ -35,7 +35,6 @@
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		},
-		"./theme/default.js": "./dist/theme/default.js",
 		"./theme/default.css": "./dist/theme/default.css"
 	},
 	"peerDependencies": {
@@ -46,6 +45,8 @@
 		"@sveltejs/kit": "^2.13.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.2",
+		"@tailwindcss/postcss": "^4.1.7",
+		"@tailwindcss/vite": "^4.1.7",
 		"@types/eslint": "^9.6.0",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.7.0",
@@ -54,12 +55,12 @@
 		"globals": "^16.0.0",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
-		"prettier-plugin-tailwindcss": "^0.6.5",
+		"prettier-plugin-tailwindcss": "^0.6.11",
 		"publint": "^0.3.0",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"svelte-highlight": "^7.8.0",
-		"tailwindcss": "^3.4.9",
+		"tailwindcss": "^4.1.7",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.15.0",
 		"vite": "^6.0.3",
@@ -69,7 +70,7 @@
 		"@mdi/js": "^7.4.47",
 		"bits-ui": "^1.0.0-next.46",
 		"tailwind-merge": "^2.5.4",
-		"tailwind-variants": "^0.3.0"
+		"tailwind-variants": "^1.0.0"
 	},
 	"volta": {
 		"node": "22.15.0"

package/dist/theme/default.d.ts

@@ -1,13 +0,0 @@
-export declare const tailwindConfig: () => {
-    colors: {
-        primary: string;
-        light: string;
-        dark: string;
-        success: string;
-        danger: string;
-        warning: string;
-        info: string;
-        subtle: string;
-    };
-    borderColor: ({ theme }: import("tailwindcss/types/config").PluginUtils) => any;
-};

package/dist/theme/default.js

@@ -1,16 +0,0 @@
-export const tailwindConfig = () => ({
-    colors: {
-        primary: 'rgb(var(--immich-ui-primary) / <alpha-value>)',
-        light: 'rgb(var(--immich-ui-light) / <alpha-value>)',
-        dark: 'rgb(var(--immich-ui-dark) / <alpha-value>)',
-        success: 'rgb(var(--immich-ui-success) / <alpha-value>)',
-        danger: 'rgb(var(--immich-ui-danger) / <alpha-value>)',
-        warning: 'rgb(var(--immich-ui-warning) / <alpha-value>)',
-        info: 'rgb(var(--immich-ui-info) / <alpha-value>)',
-        subtle: 'rgb(var(--immich-ui-gray) / <alpha-value>)',
-    },
-    borderColor: ({ theme }) => ({
-        ...theme('colors'),
-        DEFAULT: 'rgb(var(--immich-ui-default-border) / <alpha-value>)',
-    }),
-});