@immich/ui 0.45.1 → 0.47.0

package/dist/components/AnnouncementBanner/AnnouncementBanner.svelte

@@ -29,13 +29,13 @@
         false: '',
       },
       color: {
-        primary: 'bg-primary-100 text-primary dark:bg-primary-900',
-        secondary: 'text-dark dark:bg-dark/25 bg-gray-200',
+        primary: 'bg-primary-100 text-primary',
+        secondary: 'text-dark bg-light-200 dark:bg-light-300',
         muted: 'bg-subtle text-subtle dark:bg-subtle',
-        info: 'bg-info-100 text-info dark:bg-info-900',
-        warning: 'bg-warning-100 text-warning dark:bg-warning-900',
-        danger: 'bg-danger-100 text-danger dark:bg-danger-900',
-        success: 'bg-success-100 text-success dark:bg-success-900',
+        info: 'bg-info-100 text-info',
+        warning: 'bg-warning-100 text-warning',
+        danger: 'bg-danger-100 text-danger',
+        success: 'bg-success-100 text-success',
       },
     },
   });

package/dist/components/Badge/Badge.svelte

@@ -28,27 +28,27 @@
     variants: {
       shape: styleVariants.shape,
       color: {
-        primary: 'bg-primary-200 text-primary-950 dark:text-primary-50 dark:bg-primary-800',
-        secondary: 'bg-neutral-200 text-neutral-950 dark:bg-neutral-800 dark:text-neutral-50',
-        success: 'bg-success-200 text-success-950 dark:text-success-50 dark:bg-success-800',
-        danger: 'bg-danger-200 text-danger-950 dark:text-danger-50 dark:bg-danger-800',
-        warning: 'bg-warning-200 text-warning-950 dark:text-warning-50 dark:bg-warning-800',
-        info: 'bg-info-200 text-info-950 dark:text-info-50 dark:bg-info-800',
+        primary: 'border-primary-100 bg-primary-100 text-primary-950 dark:bg-primary-200 dark:border-primary-200',
+        secondary: 'border-light-300 bg-light-100 text-light-950 dark:bg-light-200',
+        success: 'border-success-100 bg-success-100 text-success-950 dark:bg-success-200 dark:border-success-200',
+        info: 'border-info-200 bg-info-200 text-info-950',
+        warning: 'border-warning-200 bg-warning-200 text-warning-950',
+        danger: 'border-danger-200 bg-danger-200 text-danger-950 dark:bg-danger-200',
       },
       textSize: styleVariants.textSize,
       paddingSize: {
-        tiny: 'px-1 py-0.5',
-        small: 'px-2 py-0.5',
-        medium: 'px-2 py-0.5',
-        large: 'px-2 py-1.5',
-        giant: 'px-3 py-1',
+        tiny: 'px-1.5 py-px',
+        small: 'px-1.75 py-0.5',
+        medium: 'px-2.5 py-0.75',
+        large: 'px-2.75 py-1',
+        giant: 'px-3 py-1.25',
       },
       roundedSize: {
-        tiny: 'rounded-sm',
-        small: 'rounded-sm',
-        medium: 'rounded-sm',
-        large: 'rounded-md',
-        giant: 'rounded-md',
+        tiny: 'rounded-md',
+        small: 'rounded-md',
+        medium: 'rounded-md',
+        large: 'rounded-lg',
+        giant: 'rounded-lg',
       },
     },
   });

package/dist/components/Card/Card.svelte

@@ -6,6 +6,8 @@
   import type { Color } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { mdiChevronDown } from '@mdi/js';
+  import { slide } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
   import { type Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
@@ -49,12 +51,12 @@
     base: 'flex w-full grow flex-col',
     variants: {
       color: {
-        primary: 'bg-primary-100 dark:bg-primary-900',
-        secondary: 'text-dark bg-gray-100 dark:bg-neutral-900 dark:text-white',
-        success: 'bg-success-100 dark:bg-success-900',
-        danger: 'bg-danger-100 dark:bg-danger-900',
-        warning: 'bg-warning-100 dark:bg-warning-900',
-        info: 'bg-info-100 dark:bg-info-900',
+        primary: 'bg-primary-50 dark:bg-primary-100',
+        secondary: 'text-dark bg-light-50 dark:bg-light-100 dark:text-white',
+        success: 'bg-success-50 dark:bg-success-100',
+        danger: 'bg-danger-50 dark:bg-danger-100',
+        warning: 'bg-warning-50 dark:bg-warning-100',
+        info: 'bg-info-50 dark:bg-info-100',
       },
     },
   });
@@ -134,9 +136,11 @@
     {/if}
 
     {#if bodyChild && expanded}
-      <Scrollable class={twMerge(cleanClass('p-4', bodyChild?.class))}>
-        {@render bodyChild?.snippet()}
-      </Scrollable>
+      <div transition:slide={{ duration: expandable ? 200 : 0, easing: cubicOut }}>
+        <Scrollable class={twMerge(cleanClass('p-4', bodyChild?.class))}>
+          {@render bodyChild?.snippet()}
+        </Scrollable>
+      </div>
     {/if}
 
     {#if footerChild}

package/dist/components/Code/Code.svelte

@@ -41,7 +41,7 @@
         false: '',
         muted: 'text-dark bg-subtle',
         primary: 'text-dark dark:bg-primary/20 bg-gray-200 dark:text-gray-200',
-        secondary: 'text-light bg-gray-700 dark:bg-gray-200',
+        secondary: 'text-light bg-light-700',
         success: 'bg-success text-light',
         danger: 'bg-danger text-light',
         warning: 'bg-warning text-light',
@@ -50,7 +50,7 @@
 
       outlineTheme: {
         false: '',
-        muted: 'border border-gray-600 text-gray-600 dark:border-gray-400 dark:text-gray-400',
+        muted: 'border-light-600 text-light-600 border',
         primary: 'border-primary text-primary border',
         secondary: 'border-dark text-dark border',
         success: 'border-success text-success border',

package/dist/components/CommandPalette/CommandPaletteContext.svelte

@@ -11,7 +11,7 @@
 
   $effect(() => {
     // prevent reactivity loop
-    const addCommands = (commands: CommandItem[], global?: boolean) =>
+    const addCommands = (commands: CommandItem[], global: boolean = false) =>
       untrack(() => commandPaletteManager.addCommands(commands, { global }));
 
     return addCommands(commands, global);

package/dist/components/CommandPalette/CommandPaletteItem.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
   import { renderShortcut } from '../../actions/shortcut.js';
+  import Badge from '../Badge/Badge.svelte';
   import Button from '../Button/Button.svelte';
   import Icon from '../Icon/Icon.svelte';
   import IconButton from '../IconButton/IconButton.svelte';
   import Kbd from '../Kbd/Kbd.svelte';
   import Text from '../Text/Text.svelte';
-  import type { CommandItem } from '../../services/command-palette-manager.svelte';
+  import type { CommandItemResponse } from '../../services/command-palette-manager.svelte';
+  import { cleanClass } from '../../utilities/internal.js';
   import { mdiClose } from '@mdi/js';
 
   type Props = {
-    item: CommandItem;
+    item: CommandItemResponse;
     selected: boolean;
     onSelect: () => void;
     onRemove?: () => void;
@@ -41,46 +43,46 @@
     fullWidth
     variant={selected ? 'outline' : 'ghost'}
     color="secondary"
-    class="overflow-hidden border"
+    class="flex justify-between gap-3 border text-start {selected ? 'border-neutral-500!' : ''}"
   >
-    <div class="flex w-full place-items-center justify-between gap-2">
-      <div class="flex min-w-0 place-items-center gap-2">
-        <Icon icon={item.icon} size="2rem" class={item.iconClass} />
-        <div class="flex min-w-0 flex-col">
-          <div class="flex place-items-center gap-1">
-            <Text fontWeight="bold">{item.title}</Text>
-          </div>
-          {#if item.description}
-            <Text
-              size="small"
-              class="overflow-hidden text-ellipsis whitespace-nowrap"
-              color={selected ? undefined : 'muted'}>{item.description}</Text
-            >
-          {/if}
-        </div>
+    <div class="flex flex-col">
+      <div class="flex items-center gap-1">
+        <Text fontWeight="bold">{item.title}</Text>
+        <Icon icon={item.icon} size="1.25rem" class={item.iconClass} />
       </div>
-      <div class="flex flex-col items-end gap-1">
-        {#if onRemove}
-          <IconButton
-            size="small"
-            onclick={handleRemove}
-            icon={mdiClose}
-            shape="round"
-            variant="ghost"
-            color="secondary"
-            aria-label="Remove"
-          />
-        {:else}
-          <span class="shrink-0">[{item.type}]</span>
-        {/if}
-        {#if renderedShortcuts.length > 0}
-          <div class="flex justify-end gap-1">
-            {#each renderedShortcuts[0] as key (key)}
-              <Kbd size="small">{key}</Kbd>
-            {/each}
-          </div>
+      {#if item.description}
+        <Text
+          size="small"
+          class="mt-0.5 line-clamp-4 w-full overflow-hidden text-ellipsis md:line-clamp-2"
+          color="muted">{item.description}</Text
+        >
+      {/if}
+      <div class="mt-2">
+        <Badge size="small" color="primary" shape="rectangle">{item.type}</Badge>
+        {#if item.isGlobal}
+          <Badge size="small" shape="rectangle" color="warning">Global</Badge>
         {/if}
       </div>
     </div>
+    {#if onRemove}
+      <IconButton
+        size="small"
+        onclick={handleRemove}
+        class="shrink-0"
+        icon={mdiClose}
+        shape="round"
+        variant="ghost"
+        color="secondary"
+        aria-label="Remove"
+      />
+    {:else if renderedShortcuts.length > 0}
+      <div class="flex shrink-0 flex-col justify-end gap-1">
+        {#each renderedShortcuts as shortcut (shortcut.join('-'))}
+          <div class="flex justify-end">
+            <Kbd size="tiny" class={cleanClass(selected && 'border')}>{shortcut.join(' ')}</Kbd>
+          </div>
+        {/each}
+      </div>
+    {/if}
   </Button>
 </div>

package/dist/components/CommandPalette/CommandPaletteItem.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { CommandItem } from '../../services/command-palette-manager.svelte';
+import type { CommandItemResponse } from '../../services/command-palette-manager.svelte';
 type Props = {
-    item: CommandItem;
+    item: CommandItemResponse;
     selected: boolean;
     onSelect: () => void;
     onRemove?: () => void;

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -25,14 +25,14 @@
   };
 
   const itemStyles = tv({
-    base: 'hover:bg-subtle flex w-full items-center gap-1 rounded-md px-1 py-0.5 text-start',
+    base: 'hover:bg-light-200 flex w-full items-center gap-1 rounded-lg p-1 text-start hover:cursor-pointer',
     variants: {
       color: styleVariants.textColor,
     },
   });
 
   const wrapperStyles = tv({
-    base: 'bg-light flex flex-col gap-1 overflow-hidden rounded-lg border py-1',
+    base: 'bg-light-100 dark:border-light-300 flex flex-col gap-1 overflow-hidden rounded-xl border py-1 shadow-sm',
     variants: {
       size: {
         tiny: 'w-32',
@@ -102,7 +102,7 @@
             <div {...props} {...restProps} class={cleanClass(wrapperStyles({ size }), className)} transition:fly>
               {#each filteredItems as item, i (isDivider(item) ? i : item.title)}
                 {#if isDivider(item)}
-                  <DropdownMenu.Separator class="my-0.5 border-t" />
+                  <DropdownMenu.Separator class="dark:border-light-300 my-0.5 border-t" />
                 {:else}
                   <DropdownMenu.Item
                     textValue={item.title}
@@ -112,14 +112,14 @@
                   >
                     <div class={itemStyles({ color: item.color })}>
                       <Icon icon={item.icon} class="m-2 shrink-0" />
-                      <Text class="grow text-start">{item.title}</Text>
+                      <Text class="grow text-start font-medium select-none" size="medium">{item.title}</Text>
                     </div>
                   </DropdownMenu.Item>
                 {/if}
               {/each}
 
               {#if filteredBottomItems}
-                <DropdownMenu.Separator class="my-0.5 border-t" />
+                <DropdownMenu.Separator class="dark:border-light-300 my-0.5 border-t" />
                 <div class="flex gap-1 px-1">
                   {#each filteredBottomItems as item (item.title)}
                     <DropdownMenu.Item

package/dist/components/Input/Input.svelte

@@ -50,7 +50,7 @@
   });
 
   const inputStyles = tv({
-    base: cleanClass(styleVariants.inputCommon, 'flex-1 py-2'),
+    base: cleanClass(styleVariants.inputCommon, 'flex-1 py-2.5'),
     variants: {
       textSize: styleVariants.textSize,
       leadingPadding: {
@@ -88,18 +88,11 @@
 
 <div class="flex w-full flex-col gap-1" bind:this={containerRef}>
   {#if label}
-    <Label
-      id={labelId}
-      for={inputId}
-      {label}
-      requiredIndicator={required === 'indicator'}
-      {...labelProps}
-      class="font-medium"
-    />
+    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
   {/if}
 
   {#if description}
-    <Text color="muted" size="small" id={descriptionId} class="mb-1">{description}</Text>
+    <Text color="muted" size="small" id={descriptionId} class="mb-2">{description}</Text>
   {/if}
 
   <div

package/dist/components/Label/Label.svelte

@@ -7,7 +7,7 @@
   const { label, size, color, class: className, children, requiredIndicator, ...restProps }: LabelProps = $props();
 
   const styles = tv({
-    base: '',
+    base: 'font-medium',
     variants: {
       size: styleVariants.textSize,
       color: styleVariants.textColor,

package/dist/components/Modal/Modal.svelte

@@ -99,7 +99,7 @@
       {interactOutsideBehavior}
       class={cleanClass(modalContentStyles({ size }))}
     >
-      <div class={cleanClass('flex grow flex-col justify-center')}>
+      <div class={cleanClass('flex w-full grow flex-col justify-center')}>
         <Card bind:ref={cardRef} class={cleanClass(modalStyles({ size }), className)}>
           <CardHeader class="border-b border-gray-200 px-5 py-3 dark:border-white/10">
             {#if headerChildren}

package/dist/components/ProgressBar/ProgressBar.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { styleVariants } from '../../styles.js';
+  import type { Color, Shape, Size } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import type { Snippet } from 'svelte';
+  import { tv } from 'tailwind-variants';
+
+  type Props = {
+    progress: number;
+    size?: Size;
+    shape?: Shape;
+    color?: Color;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let { progress, shape = 'round', size = 'medium', color = 'primary', class: className, children }: Props = $props();
+
+  const containerStyles = tv({
+    base: 'bg-light-100 dark:bg-light-200 dark:border-light-300 relative w-full overflow-hidden border',
+    variants: {
+      shape: styleVariants.shape,
+      size: {
+        tiny: 'h-3',
+        small: 'h-4',
+        medium: 'h-5',
+        large: 'h-6',
+        giant: 'h-12',
+      },
+      roundedSize: {
+        tiny: 'rounded-sm',
+        small: 'rounded-md',
+        medium: 'rounded-md',
+        large: 'rounded-lg',
+        giant: 'rounded-xl',
+      },
+    },
+  });
+
+  const barStyles = tv({
+    base: 'h-full transition-all duration-700 ease-in-out',
+    variants: {
+      color: styleVariants.filledColor,
+      shape: styleVariants.shape,
+    },
+  });
+</script>
+
+<div
+  class={cleanClass(
+    containerStyles({ size, shape, roundedSize: shape === 'semi-round' ? size : undefined }),
+    className,
+  )}
+>
+  <div class="absolute flex h-full w-full items-center justify-center">
+    {@render children?.()}
+  </div>
+  <div class={cleanClass(barStyles({ color, shape }))} style="width: {progress * 100}%"></div>
+</div>

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

@@ -0,0 +1,13 @@
+import type { Color, Shape, Size } from '../../types.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    progress: number;
+    size?: Size;
+    shape?: Shape;
+    color?: Color;
+    class?: string;
+    children?: Snippet;
+};
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/components/SupporterBadge/SupporterBadge.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Logo from '../Logo/Logo.svelte';
   import Text from '../Text/Text.svelte';
+  import { t } from '../../services/translation.svelte.js';
   import type { Size } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
@@ -13,7 +14,7 @@
     children?: Snippet;
   };
 
-  const { effect = 'hover', text = 'Supporter', size = 'medium', children }: Props = $props();
+  const { effect = 'hover', text = t('supporter'), size = 'medium', children }: Props = $props();
 
   const iconSize: Record<Size, Size> = {
     tiny: 'tiny',

package/dist/components/Switch/Switch.svelte

@@ -41,13 +41,13 @@
     base: 'h-8 w-13 rounded-full border-2',
     variants: {
       fillColor: {
-        default: 'border-gray-400 bg-gray-200 dark:border-gray-500 dark:bg-gray-800',
-        primary: 'bg-primary-200 dark:bg-primary-800 border-transparent',
-        secondary: 'border-transparent bg-neutral-300 dark:bg-neutral-700',
-        success: 'bg-success-200 dark:bg-success-800 border-transparent',
-        danger: 'bg-danger-200 dark:bg-danger-800 border-transparent',
-        warning: 'bg-warning-200 dark:bg-warning-800 border-transparent',
-        info: 'bg-info-200 dark:bg-info-800 border-transparent',
+        default: 'border-light-400 bg-light-200 dark:border-gray-500',
+        primary: 'bg-primary-100 dark:bg-primary-200 border-transparent',
+        secondary: 'bg-light-200 dark:bg-light-300 border-transparent',
+        success: 'bg-success-100 dark:bg-success-200 border-transparent',
+        danger: 'bg-danger-100 dark:bg-danger-200 border-transparent',
+        warning: 'bg-warning-100 dark:bg-warning-200 border-transparent',
+        info: 'bg-info-100 dark:bg-info-200 border-transparent',
       },
     },
   });
@@ -95,7 +95,7 @@
           <div class="text-start">
             <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
             {#if description}
-              <Text color="secondary" size="small" id={descriptionId}>{description}</Text>
+              <Text color="muted" size="small" id={descriptionId}>{description}</Text>
             {/if}
           </div>
         {/if}

package/dist/components/Toast/ToastContainer.svelte

@@ -15,16 +15,15 @@
   }: ToastContainerProps = $props();
 
   const containerStyles = tv({
-    base: 'bg-light text-dark overflow-hidden py-1.5 shadow-xs transition-all',
+    base: 'bg-light text-dark overflow-hidden border py-1.5 shadow-xs transition-all',
     variants: {
       color: {
-        primary: 'bg-primary-100 dark:bg-primary-900',
-        secondary: 'bg-neutral-100 dark:bg-neutral-900',
-        muted: 'bg-subtle dark:bg-subtle',
-        info: 'bg-info-100 dark:bg-info-900',
-        warning: 'bg-warning-100 dark:bg-warning-900',
-        danger: 'bg-danger-100 dark:bg-danger-900',
-        success: 'bg-success-100 dark:bg-success-900',
+        primary: 'border-primary-100 bg-primary-50 dark:bg-primary-100 dark:border-primary-200',
+        secondary: 'border-light-200 bg-light-100 dark:bg-light-200 dark:border-light-300',
+        success: 'border-success-100 bg-success-50 dark:bg-success-100 dark:border-success-200',
+        info: 'border-info-100 bg-info-50 dark:bg-info-100 dark:border-info-200',
+        warning: 'border-warning-100 bg-warning-50 dark:bg-warning-100 dark:border-warning-200',
+        danger: 'border-danger-100 bg-danger-50 dark:bg-danger-100 dark:border-danger-200',
       },
       shape: styleVariants.shape,
       size: {

package/dist/components/Toast/ToastContent.svelte

@@ -27,7 +27,20 @@
   );
 
   const iconStyles = tv({
-    base: 'h-10 w-10 shrink-0 py-2',
+    base: 'h-8 w-8 shrink-0 rounded-xl py-1.75',
+    variants: {
+      color: {
+        primary: 'bg-primary-100 dark:bg-primary-200 text-primary',
+        secondary: 'bg-light-200 dark:bg-light-300',
+        success: 'bg-success-100 dark:bg-success-200 text-success',
+        info: 'bg-info-200 text-info',
+        warning: 'bg-warning-200 text-warning',
+        danger: 'bg-danger-200 text-danger',
+      },
+    },
+  });
+
+  const titleStyles = tv({
     variants: {
       color: styleVariants.textColor,
     },
@@ -38,16 +51,16 @@
   {#if typeof text === 'string'}{text}{:else}{@render text()}{/if}
 {/snippet}
 
-<div class="flex items-center px-2">
+<div class="flex items-center px-3">
   <div class="flex items-center">
     {#if icon}
-      <Icon {icon} class={iconStyles({ color })} />
+      <Icon {icon} class={iconStyles({ color })} size="18" />
     {/if}
   </div>
-  <div class="flex grow justify-between">
+  <div class="ms-1 flex grow justify-between">
     <div class="flex flex-col p-2">
       {#if title}
-        <Text fontWeight="bold">{@render resolve(title)}</Text>
+        <Text fontWeight="semi-bold" class={titleStyles({ color })}>{@render resolve(title)}</Text>
       {/if}
       {#if description}
         <Text size="small">{@render resolve(description)}</Text>

package/dist/index.d.ts

@@ -55,6 +55,7 @@ export { default as NavbarGroup } from './components/Navbar/NavbarGroup.svelte';
 export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
 export { default as NumberInput } from './components/NumberInput/NumberInput.svelte';
 export { default as PasswordInput } from './components/PasswordInput/PasswordInput.svelte';
+export { default as ProgressBar } from './components/ProgressBar/ProgressBar.svelte';
 export { default as Scrollable } from './components/Scrollable/Scrollable.svelte';
 export { default as Select } from './components/Select/Select.svelte';
 export { default as SiteMetadata } from './components/SiteMetadata/SiteMetadata.svelte';

package/dist/index.js

@@ -57,6 +57,7 @@ export { default as NavbarGroup } from './components/Navbar/NavbarGroup.svelte';
 export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
 export { default as NumberInput } from './components/NumberInput/NumberInput.svelte';
 export { default as PasswordInput } from './components/PasswordInput/PasswordInput.svelte';
+export { default as ProgressBar } from './components/ProgressBar/ProgressBar.svelte';
 export { default as Scrollable } from './components/Scrollable/Scrollable.svelte';
 export { default as Select } from './components/Select/Select.svelte';
 export { default as SiteMetadata } from './components/SiteMetadata/SiteMetadata.svelte';

package/dist/internal/Button.svelte

@@ -72,19 +72,19 @@
       filledColorHover: styleVariants.filledColorHover,
       outlineColor: {
         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',
+        secondary: 'border-dark bg-light-100 text-dark hover:bg-light-200 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-50 dark:hover:bg-primary-950',
-        secondary: 'text-dark hover:bg-dark/10',
-        success: 'text-success hover:bg-success-50 dark:hover:bg-success-950',
-        danger: 'text-danger hover:bg-danger-50 dark:hover:bg-danger-950',
-        warning: 'text-warning hover:bg-warning-50 dark:hover:bg-warning-950',
-        info: 'text-info hover:bg-info-50 dark:hover:bg-info-950',
+        primary: 'text-primary hover:bg-primary-50',
+        secondary: 'text-dark hover:bg-light-100',
+        success: 'text-success hover:bg-success-50',
+        danger: 'text-danger hover:bg-danger-50',
+        warning: 'text-warning hover:bg-warning-50',
+        info: 'text-info hover:bg-info-50',
       },
     },
   });

package/dist/internal/DatePicker.svelte

@@ -51,11 +51,11 @@
   });
 
   const buttonStyles = tv({
-    base: 'flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-neutral-200 hover:dark:bg-neutral-700',
+    base: 'hover:bg-light-200 hover:dark:bg-light-300 flex h-10 w-10 items-center justify-center rounded-lg hover:cursor-pointer',
   });
 
   const segmentStyles = tv({
-    base: 'rounded px-1 py-0.5 tabular-nums outline-none focus:bg-gray-300 focus:text-gray-900 data-disabled:cursor-not-allowed data-focused:bg-gray-300 data-focused:text-gray-900 data-placeholder:text-gray-400 dark:focus:bg-gray-700 dark:focus:text-gray-100 dark:data-focused:bg-gray-700 dark:data-focused:text-gray-100',
+    base: 'focus:bg-light-300 focus:text-light-900 data-focused:bg-light-300 data-focused:text-light-900 data-placeholder:text-light-400 dark:focus:bg-light-700 dark:focus:text-light-100 dark:data-focused:bg-light-300 dark:data-focused:text-light-900 rounded px-1 py-0.5 tabular-nums outline-none data-disabled:cursor-not-allowed',
     variants: {
       textSize: styleVariants.textSize,
     },
@@ -85,7 +85,7 @@
       })}
     >
       {#snippet children({ segments })}
-        <div class={cleanClass(styleVariants.inputCommon, 'w-full px-4 py-2')}>
+        <div class={cleanClass(styleVariants.inputCommon, 'w-full px-3 py-2 font-medium')}>
           {#each segments as { part, value }, i (`segment-${i}`)}
             <DatePicker.Segment {part} class={segmentStyles({ textSize: size })}>
               {value}
@@ -140,7 +140,7 @@
                       {#each weekDates as date (`date-${date.toString()}`)}
                         <DatePicker.Cell {date} month={month.value} class="flex-1">
                           <DatePicker.Day
-                            class="{buttonStyles()} data-selected:bg-primary data-selected:text-light data-today:border-primary border border-transparent data-disabled:cursor-not-allowed data-disabled:opacity-40 data-outside-month:text-gray-400 data-unavailable:cursor-not-allowed data-unavailable:text-gray-300 data-unavailable:line-through"
+                            class="{buttonStyles()} data-selected:bg-primary data-selected:hover:bg-primary-300 data-selected:text-light data-today:border-primary-200 data-today:dark:border-primary-400 data-today:dark:bg-primary-200 data-today:bg-primary-50 data-outside-month:text-light-400 data-unavailable:text-light-300 border border-transparent text-sm data-disabled:cursor-not-allowed data-disabled:opacity-40 data-unavailable:cursor-not-allowed data-unavailable:line-through"
                           >
                             {date.day}
                           </DatePicker.Day>

package/dist/internal/Select.svelte

@@ -84,7 +84,7 @@
   <Select.Root type={multiple ? 'multiple' : 'single'} bind:value={internalValue as never} {onValueChange}>
     <Select.Trigger
       {disabled}
-      class="w-full items-center gap-1 rounded-lg focus-visible:outline-none"
+      class="w-full items-center gap-1 rounded-lg py-0 focus-visible:outline-none"
       aria-label={placeholder}
     >
       <Field {readOnly} {required} {disabled} {invalid}>
@@ -104,6 +104,7 @@
               variant="ghost"
               shape="round"
               color="secondary"
+              size="tiny"
               class="m-1"
               icon={mdiUnfoldMoreHorizontal}
               {disabled}

package/dist/services/command-palette-manager.svelte.d.ts

@@ -12,28 +12,25 @@ export type CommandItem = {
         ignoreInputFields?: boolean;
         preventDefault?: boolean;
     };
+    id?: string;
 } & IfLike & ({
     href: string;
 } | {
-    action: (command: CommandItem) => void;
+    action: (command: CommandItemResponse) => void;
 });
-export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default' | 'command_palette_to_select' | 'command_palette_to_close' | 'command_palette_to_navigate' | 'command_palette_to_show_all'>;
+export type CommandItemResponse = CommandItem & {
+    id: string;
+    isGlobal: boolean;
+};
+export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default' | 'command_palette_to_select' | 'command_palette_to_close' | 'command_palette_to_navigate' | 'command_palette_to_show_all' | 'global'>;
 export declare const asText: (...items: unknown[]) => string;
 declare class CommandPaletteManager {
     #private;
     selectedIndex: number;
-    items: (CommandItem & {
-        id: string;
-    })[];
-    filteredItems: (CommandItem & {
-        id: string;
-    })[];
-    recentItems: (CommandItem & {
-        id: string;
-    })[];
-    results: (CommandItem & {
-        id: string;
-    })[];
+    items: CommandItemResponse[];
+    filteredItems: CommandItemResponse[];
+    recentItems: CommandItemResponse[];
+    results: CommandItemResponse[];
     get isEnabled(): boolean;
     enable(): void;
     get query(): string;
@@ -50,10 +47,8 @@ declare class CommandPaletteManager {
     up(): void;
     down(): void;
     reset(): void;
-    addCommands(itemOrItems: MaybeArray<CommandItem & {
-        id?: string;
-    }>, options?: {
-        global?: boolean;
+    addCommands(itemOrItems: MaybeArray<CommandItem>, options?: {
+        global: boolean;
     }): () => void;
     removeCommands(itemOrItems: MaybeArray<{
         id: string;

package/dist/services/command-palette-manager.svelte.js

@@ -178,9 +178,13 @@ class CommandPaletteManager {
         this.#globalLayer = { items: [], recentItems: [] };
         this.#query = '';
     }
-    addCommands(itemOrItems, options = {}) {
+    addCommands(itemOrItems, options = { global: false }) {
         const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
-        const itemsWithId = items.map((item) => ({ ...item, id: item.id ?? generateId() }));
+        const itemsWithId = items.map((item) => ({
+            ...item,
+            id: item.id ?? generateId(),
+            isGlobal: options.global,
+        }));
         if (options.global) {
             this.#globalLayer.items.push(...itemsWithId);
         }

package/dist/services/modal-manager.svelte.d.ts

@@ -9,8 +9,6 @@ type ExtendsEmptyObject<T> = keyof T extends never ? never : T;
 type StripParamIfOptional<T> = T extends void ? [] : [T];
 type OptionalParamIfEmpty<T> = ExtendsEmptyObject<T> extends never ? [] | [Record<string, never> | undefined] : [T];
 declare class ModalManager {
-    #private;
-    get openCount(): number;
     show<T extends object>(Component: Component<T>, ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>): Promise<OnCloseData<T>>;
     open<T extends object, K = OnCloseData<T>>(Component: Component<T>, ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>): {
         onClose: Promise<K>;

package/dist/services/modal-manager.svelte.js

@@ -1,10 +1,6 @@
 import { mount, unmount } from 'svelte';
 import ConfirmModal from '../components/ConfirmModal/ConfirmModal.svelte';
 class ModalManager {
-    #openCount = $state(0);
-    get openCount() {
-        return this.#openCount;
-    }
     show(Component, ...props) {
         return this.open(Component, ...props).onClose;
     }
@@ -14,7 +10,6 @@ class ModalManager {
         const deferred = new Promise((resolve) => {
             onClose = async (...args) => {
                 await unmount(modal);
-                this.#openCount--;
                 // make sure bits-ui clean up finishes before resolving
                 setTimeout(() => resolve(args[0]), 10);
             };
@@ -25,7 +20,6 @@ class ModalManager {
                     onClose,
                 },
             });
-            this.#openCount++;
         });
         return {
             onClose: deferred,

package/dist/services/translation.svelte.d.ts

@@ -22,6 +22,8 @@ declare const defaultTranslations: {
     toast_warning_title: string;
     toast_danger_title: string;
     save: string;
+    supporter: string;
+    global: string;
 };
 export type Translations = typeof defaultTranslations;
 export declare const translate: <T extends keyof Translations>(key: T, overrides?: TranslationProps<T>) => string;

package/dist/services/translation.svelte.js

@@ -28,6 +28,8 @@ const defaultTranslations = {
     toast_warning_title: 'Warning',
     toast_danger_title: 'Error',
     save: 'Save',
+    supporter: 'Supporter',
+    global: 'Global',
 };
 let translations = $state(defaultTranslations);
 export const translate = (key, overrides) => overrides?.[key] ?? translations[key];

package/dist/styles.js

@@ -13,7 +13,7 @@ export const styleVariants = {
         muted: 'text-gray-600 dark:text-gray-400',
     },
     inputCommon: 'disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 bg-transparent transition outline-none disabled:cursor-not-allowed ',
-    inputContainerCommon: 'bg-gray-100 ring-1 ring-gray-200 focus-within:ring-primary dark:focus-within:ring-primary transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-600 dark:ring-black',
+    inputContainerCommon: 'bg-gray-100 ring-1 ring-gray-200 focus-within:ring-primary dark:focus-within:ring-primary transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-black',
     shape: {
         rectangle: 'rounded-none',
         'semi-round': '',

package/dist/theme/default.css

@@ -66,15 +66,39 @@
   --color-info-900: var(--immich-ui-info-900);
   --color-info-950: var(--immich-ui-info-950);
 
+  --color-light-50: var(--immich-ui-light-50);
+  --color-light-100: var(--immich-ui-light-100);
+  --color-light-200: var(--immich-ui-light-200);
+  --color-light-300: var(--immich-ui-light-300);
+  --color-light-400: var(--immich-ui-light-400);
+  --color-light-500: var(--immich-ui-light-500);
+  --color-light-600: var(--immich-ui-light-600);
+  --color-light-700: var(--immich-ui-light-700);
+  --color-light-800: var(--immich-ui-light-800);
+  --color-light-900: var(--immich-ui-light-900);
+  --color-light-950: var(--immich-ui-light-950);
+
+  --color-dark-50: var(--immich-ui-dark-50);
+  --color-dark-100: var(--immich-ui-dark-100);
+  --color-dark-200: var(--immich-ui-dark-200);
+  --color-dark-300: var(--immich-ui-dark-300);
+  --color-dark-400: var(--immich-ui-dark-400);
+  --color-dark-500: var(--immich-ui-dark-500);
+  --color-dark-600: var(--immich-ui-dark-600);
+  --color-dark-700: var(--immich-ui-dark-700);
+  --color-dark-800: var(--immich-ui-dark-800);
+  --color-dark-900: var(--immich-ui-dark-900);
+  --color-dark-950: var(--immich-ui-dark-950);
+
   --color-primary: var(--immich-ui-primary-500);
   --color-success: var(--immich-ui-success-500);
   --color-danger: var(--immich-ui-danger-500);
   --color-warning: var(--immich-ui-warning-500);
   --color-info: var(--immich-ui-info-500);
-  --color-light: rgb(var(--immich-ui-light));
+  --color-light: var(--immich-ui-light);
   --color-dark: var(--immich-ui-dark);
-  --color-muted: rgb(var(--immich-ui-muted));
-  --color-subtle: rgb(var(--immich-ui-gray));
+  --color-muted: var(--immich-ui-muted);
+  --color-subtle: var(--immich-ui-gray);
 }
 
 @custom-variant dark (&:where(.dark, .dark *):not(.light));
@@ -83,140 +107,188 @@
   :root,
   .light {
     /* light */
-    --immich-ui-primary-50: oklch(0.949 0.016 282.34);
+    --immich-ui-primary-50: oklch(0.9616 0.0166 271.24);
     --immich-ui-primary-100: oklch(0.897 0.033 281.96);
     --immich-ui-primary-200: oklch(0.787 0.07 281.03);
     --immich-ui-primary-300: oklch(0.686 0.106 278.96);
     --immich-ui-primary-400: oklch(0.577 0.142 275.93);
-    --immich-ui-primary-500: oklch(0.473 0.151 272.94);
+    --immich-ui-primary-500: #4250af;
     --immich-ui-primary-600: oklch(0.404 0.129 273.18);
     --immich-ui-primary-700: oklch(0.343 0.109 272.56);
     --immich-ui-primary-800: oklch(0.272 0.088 272.94);
     --immich-ui-primary-900: oklch(0.211 0.068 273.01);
     --immich-ui-primary-950: oklch(0.15 0.05 273.01);
 
-    --immich-ui-success-50: oklch(0.969 0.048 153.5);
-    --immich-ui-success-100: oklch(0.926 0.124 152.83);
-    --immich-ui-success-200: oklch(0.864 0.223 152.18);
-    --immich-ui-success-300: oklch(0.804 0.206 152.33);
-    --immich-ui-success-400: oklch(0.755 0.194 152.36);
-    --immich-ui-success-500: oklch(0.698 0.179 152.3);
-    --immich-ui-success-600: oklch(0.588 0.151 152.25);
-    --immich-ui-success-700: oklch(0.469 0.12 152.39);
-    --immich-ui-success-800: oklch(0.359 0.093 152.23);
-    --immich-ui-success-900: oklch(0.243 0.063 151.99);
-    --immich-ui-success-950: oklch(0.169 0.042 151.99);
-
-    --immich-ui-danger-50: oklch(0.976 0.008 17.52);
-    --immich-ui-danger-100: oklch(0.951 0.015 17.54);
-    --immich-ui-danger-200: oklch(0.867 0.046 18.1);
-    --immich-ui-danger-300: oklch(0.778 0.085 19.18);
-    --immich-ui-danger-400: oklch(0.696 0.129 20.93);
-    --immich-ui-danger-500: oklch(0.608 0.179 24.17);
-    --immich-ui-danger-600: oklch(0.518 0.153 24.17);
-    --immich-ui-danger-700: oklch(0.422 0.124 24.12);
-    --immich-ui-danger-800: oklch(0.331 0.098 24.2);
-    --immich-ui-danger-900: oklch(0.231 0.069 24.25);
-    --immich-ui-danger-950: oklch(0.184 0.055 24.33);
-
-    --immich-ui-warning: oklch(0.689 0.133 67.56);
-    --immich-ui-warning-50: oklch(0.974 0.013 67.56);
-    --immich-ui-warning-100: oklch(0.947 0.029 67.56);
-    --immich-ui-warning-200: oklch(0.892 0.061 67.56);
-    --immich-ui-warning-300: oklch(0.825 0.097 67.56);
-    --immich-ui-warning-400: oklch(0.757 0.115 67.56);
-    --immich-ui-warning-500: oklch(0.689 0.133 67.56);
-    --immich-ui-warning-600: oklch(0.604 0.117 67.56);
-    --immich-ui-warning-700: oklch(0.509 0.099 67.56);
-    --immich-ui-warning-800: oklch(0.418 0.081 67.56);
-    --immich-ui-warning-900: oklch(0.341 0.066 67.56);
-    --immich-ui-warning-950: oklch(0.273 0.053 67.56);
-
-    --immich-ui-info-50: oklch(0.967 0.018 254.53);
-    --immich-ui-info-100: oklch(0.933 0.037 254.53);
-    --immich-ui-info-200: oklch(0.862 0.078 254.53);
-    --immich-ui-info-300: oklch(0.768 0.126 254.53);
-    --immich-ui-info-400: oklch(0.667 0.152 254.53);
-    --immich-ui-info-500: oklch(0.567 0.177 254.53);
-    --immich-ui-info-600: oklch(0.492 0.155 254.53);
-    --immich-ui-info-700: oklch(0.419 0.132 254.53);
-    --immich-ui-info-800: oklch(0.347 0.109 254.53);
-    --immich-ui-info-900: oklch(0.285 0.089 254.53);
-    --immich-ui-info-950: oklch(0.232 0.073 254.53);
-
-    --immich-ui-light: 255 255 255;
-    --immich-ui-dark: rgb(63, 60, 60);
-    --immich-ui-muted: 161 161 161;
-    --immich-ui-gray: 246 246 246;
-    --immich-ui-default-border: 209 213 219;
+    --immich-ui-success-50: oklch(0.969 0.051 148.59);
+    --immich-ui-success-100: oklch(0.937 0.109 148.66);
+    --immich-ui-success-200: oklch(0.863 0.249 147.5);
+    --immich-ui-success-300: oklch(0.813 0.234 147.54);
+    --immich-ui-success-400: oklch(0.762 0.219 147.59);
+    --immich-ui-success-500: oklch(0.708 0.204 147.56);
+    --immich-ui-success-600: oklch(0.594 0.171 147.56);
+    --immich-ui-success-700: oklch(0.476 0.136 147.69);
+    --immich-ui-success-800: oklch(0.36 0.104 147.58);
+    --immich-ui-success-900: oklch(0.252 0.073 147.47);
+    --immich-ui-success-950: oklch(0.194 0.056 147.87);
+
+    --immich-ui-danger-50: oklch(0.96 0.018 17.57);
+    --immich-ui-danger-100: oklch(0.926 0.034 17.84);
+    --immich-ui-danger-200: oklch(0.853 0.074 19.77);
+    --immich-ui-danger-300: oklch(0.774 0.125 21.53);
+    --immich-ui-danger-400: oklch(0.701 0.178 23.61);
+    --immich-ui-danger-500: oklch(0.633 0.24 28.79);
+    --immich-ui-danger-600: oklch(0.533 0.204 28.97);
+    --immich-ui-danger-700: oklch(0.433 0.166 28.91);
+    --immich-ui-danger-800: oklch(0.342 0.131 28.79);
+    --immich-ui-danger-900: oklch(0.245 0.094 29.51);
+    --immich-ui-danger-950: oklch(0.186 0.07 29.56);
+
+    --immich-ui-warning: oklch(0.812 0.17 76.3);
+    --immich-ui-warning-50: oklch(0.983 0.01 58.27);
+    --immich-ui-warning-100: oklch(0.959 0.027 63.96);
+    --immich-ui-warning-200: oklch(0.925 0.051 64.24);
+    --immich-ui-warning-300: oklch(0.882 0.086 67.45);
+    --immich-ui-warning-400: oklch(0.85 0.12 70.92);
+    --immich-ui-warning-500: oklch(0.812 0.17 76.3);
+    --immich-ui-warning-600: oklch(0.679 0.142 76.48);
+    --immich-ui-warning-700: oklch(0.539 0.113 76.63);
+    --immich-ui-warning-800: oklch(0.408 0.086 75.75);
+    --immich-ui-warning-900: oklch(0.27 0.057 76.33);
+    --immich-ui-warning-950: oklch(0.209 0.044 77.51);
+
+    --immich-ui-info-50: oklch(0.958 0.02 267.31);
+    --immich-ui-info-100: oklch(0.922 0.036 268.3);
+    --immich-ui-info-200: oklch(0.845 0.073 265.19);
+    --immich-ui-info-300: oklch(0.769 0.114 261.53);
+    --immich-ui-info-400: oklch(0.691 0.159 256.82);
+    --immich-ui-info-500: oklch(0.611 0.177 252.85);
+    --immich-ui-info-600: oklch(0.519 0.149 252.81);
+    --immich-ui-info-700: oklch(0.422 0.123 252.93);
+    --immich-ui-info-800: oklch(0.328 0.096 253.05);
+    --immich-ui-info-900: oklch(0.234 0.067 252.62);
+    --immich-ui-info-950: oklch(0.178 0.052 253.61);
+
+    --immich-ui-light-50: var(--color-neutral-50);
+    --immich-ui-light-100: var(--color-neutral-100);
+    --immich-ui-light-200: var(--color-neutral-200);
+    --immich-ui-light-300: var(--color-neutral-300);
+    --immich-ui-light-400: var(--color-neutral-400);
+    --immich-ui-light-500: var(--color-neutral-500);
+    --immich-ui-light-600: var(--color-neutral-600);
+    --immich-ui-light-700: var(--color-neutral-700);
+    --immich-ui-light-800: var(--color-neutral-800);
+    --immich-ui-light-900: var(--color-neutral-900);
+    --immich-ui-light-950: var(--color-neutral-950);
+
+    --immich-ui-dark-50: var(--color-neutral-950);
+    --immich-ui-dark-100: var(--color-neutral-900);
+    --immich-ui-dark-200: var(--color-neutral-800);
+    --immich-ui-dark-300: var(--color-neutral-700);
+    --immich-ui-dark-400: var(--color-neutral-600);
+    --immich-ui-dark-500: var(--color-neutral-500);
+    --immich-ui-dark-600: var(--color-neutral-400);
+    --immich-ui-dark-700: var(--color-neutral-300);
+    --immich-ui-dark-800: var(--color-neutral-200);
+    --immich-ui-dark-900: var(--color-neutral-100);
+    --immich-ui-dark-950: var(--color-neutral-50);
+
+    --immich-ui-light: oklch(100% 0 0);
+    --immich-ui-dark: oklch(36% 0 17);
+    --immich-ui-muted: oklch(71% 0 271);
+    --immich-ui-gray: oklch(97% 0 271);
+    --immich-ui-default-border: var(--immich-ui-light-300);
   }
 
   .dark {
-    --immich-ui-primary-50: oklch(0.982 0.007 268.63);
-    --immich-ui-primary-100: oklch(0.966 0.015 260.75);
-    --immich-ui-primary-200: oklch(0.932 0.03 262.55);
-    --immich-ui-primary-300: oklch(0.906 0.041 260.95);
-    --immich-ui-primary-400: oklch(0.871 0.057 259.89);
+    --immich-ui-primary-950: oklch(0.982 0.007 268.63);
+    --immich-ui-primary-900: oklch(0.966 0.015 260.75);
+    --immich-ui-primary-800: oklch(0.932 0.03 262.55);
+    --immich-ui-primary-700: oklch(0.906 0.041 260.95);
+    --immich-ui-primary-600: oklch(0.871 0.057 259.89);
     --immich-ui-primary-500: oklch(0.836 0.074 258.58);
-    --immich-ui-primary-600: oklch(0.526 0.063 256.86);
-    --immich-ui-primary-700: oklch(0.449 0.054 257.6);
-    --immich-ui-primary-800: oklch(0.372 0.045 257.42);
-    --immich-ui-primary-900: oklch(0.258 0.032 258.31);
-    --immich-ui-primary-950: oklch(0.198 0.023 257.29);
-
-    --immich-ui-success-50: oklch(0.979 0.027 157.32);
-    --immich-ui-success-100: oklch(0.969 0.043 155.86);
-    --immich-ui-success-200: oklch(0.937 0.09 156.81);
-    --immich-ui-success-300: oklch(0.894 0.164 156.29);
-    --immich-ui-success-400: oklch(0.866 0.186 156.06);
+    --immich-ui-primary-400: oklch(0.526 0.063 256.86);
+    --immich-ui-primary-300: oklch(0.449 0.054 257.6);
+    --immich-ui-primary-200: oklch(0.372 0.045 257.42);
+    --immich-ui-primary-100: oklch(0.258 0.032 258.31);
+    --immich-ui-primary-50: oklch(0.198 0.023 257.29);
+
+    --immich-ui-success-950: oklch(0.979 0.027 157.32);
+    --immich-ui-success-900: oklch(0.969 0.043 155.86);
+    --immich-ui-success-800: oklch(0.937 0.09 156.81);
+    --immich-ui-success-700: oklch(0.894 0.164 156.29);
+    --immich-ui-success-600: oklch(0.866 0.186 156.06);
     --immich-ui-success-500: oklch(0.842 0.181 156.04);
-    --immich-ui-success-600: oklch(0.699 0.151 155.85);
-    --immich-ui-success-700: oklch(0.555 0.119 156.26);
-    --immich-ui-success-800: oklch(0.419 0.089 156.41);
-    --immich-ui-success-900: oklch(0.279 0.06 155.24);
-    --immich-ui-success-950: oklch(0.181 0.04 155.24);
-
-    --immich-ui-danger-50: oklch(0.975 0.011 17.5);
-    --immich-ui-danger-100: oklch(0.943 0.025 17.67);
-    --immich-ui-danger-200: oklch(0.894 0.049 18.13);
-    --immich-ui-danger-300: oklch(0.836 0.079 18.9);
-    --immich-ui-danger-400: oklch(0.781 0.112 19.92);
+    --immich-ui-success-400: oklch(0.699 0.151 155.85);
+    --immich-ui-success-300: oklch(0.555 0.119 156.26);
+    --immich-ui-success-200: oklch(0.419 0.089 156.41);
+    --immich-ui-success-100: oklch(0.279 0.06 155.24);
+    --immich-ui-success-50: oklch(0.181 0.04 155.24);
+
+    --immich-ui-danger-950: oklch(0.975 0.011 17.5);
+    --immich-ui-danger-900: oklch(0.943 0.025 17.67);
+    --immich-ui-danger-800: oklch(0.894 0.049 18.13);
+    --immich-ui-danger-700: oklch(0.836 0.079 18.9);
+    --immich-ui-danger-600: oklch(0.781 0.112 19.92);
     --immich-ui-danger-500: oklch(0.727 0.149 21.41);
-    --immich-ui-danger-600: oklch(0.622 0.232 27.33);
-    --immich-ui-danger-700: oklch(0.505 0.188 27.33);
-    --immich-ui-danger-800: oklch(0.387 0.144 27.27);
-    --immich-ui-danger-900: oklch(0.262 0.097 27.31);
-    --immich-ui-danger-950: oklch(0.207 0.077 27.3);
-
-    --immich-ui-warning-50: oklch(0.993 0.005 67.8);
-    --immich-ui-warning-100: oklch(0.975 0.017 67.63);
-    --immich-ui-warning-200: oklch(0.958 0.029 67.47);
-    --immich-ui-warning-300: oklch(0.934 0.048 69.18);
-    --immich-ui-warning-400: oklch(0.907 0.07 70.22);
+    --immich-ui-danger-400: oklch(0.622 0.232 27.33);
+    --immich-ui-danger-300: oklch(0.505 0.188 27.33);
+    --immich-ui-danger-200: oklch(0.387 0.144 27.27);
+    --immich-ui-danger-100: oklch(0.262 0.097 27.31);
+    --immich-ui-danger-50: oklch(0.207 0.077 27.3);
+
+    --immich-ui-warning-950: oklch(0.993 0.005 67.8);
+    --immich-ui-warning-900: oklch(0.975 0.017 67.63);
+    --immich-ui-warning-800: oklch(0.958 0.029 67.47);
+    --immich-ui-warning-700: oklch(0.934 0.048 69.18);
+    --immich-ui-warning-600: oklch(0.907 0.07 70.22);
     --immich-ui-warning-500: oklch(0.888 0.089 72.24);
-    --immich-ui-warning-600: oklch(0.738 0.153 79.79);
-    --immich-ui-warning-700: oklch(0.589 0.122 79.52);
-    --immich-ui-warning-800: oklch(0.442 0.092 79.1);
-    --immich-ui-warning-900: oklch(0.286 0.059 78.61);
-    --immich-ui-warning-950: oklch(0.197 0.039 78.61);
-
-    --immich-ui-info-50: oklch(0.975 0.012 259.84);
-    --immich-ui-info-100: oklch(0.956 0.021 261.78);
-    --immich-ui-info-200: oklch(0.905 0.046 259.51);
-    --immich-ui-info-300: oklch(0.861 0.068 259.36);
-    --immich-ui-info-400: oklch(0.811 0.096 255.92);
+    --immich-ui-warning-400: oklch(0.738 0.153 79.79);
+    --immich-ui-warning-300: oklch(0.589 0.122 79.52);
+    --immich-ui-warning-200: oklch(0.442 0.092 79.1);
+    --immich-ui-warning-100: oklch(0.286 0.059 78.61);
+    --immich-ui-warning-50: oklch(0.197 0.039 78.61);
+
+    --immich-ui-info-950: oklch(0.975 0.012 259.84);
+    --immich-ui-info-900: oklch(0.956 0.021 261.78);
+    --immich-ui-info-800: oklch(0.905 0.046 259.51);
+    --immich-ui-info-700: oklch(0.861 0.068 259.36);
+    --immich-ui-info-600: oklch(0.811 0.096 255.92);
     --immich-ui-info-500: oklch(0.767 0.122 253.35);
-    --immich-ui-info-600: oklch(0.638 0.166 246.52);
-    --immich-ui-info-700: oklch(0.516 0.135 246.69);
-    --immich-ui-info-800: oklch(0.386 0.1 246.5);
-    --immich-ui-info-900: oklch(0.265 0.07 247.05);
-    --immich-ui-info-950: oklch(0.186 0.049 247.05);
-
-    --immich-ui-light: 0 0 0;
-    --immich-ui-dark: rgb(221, 221, 221);
-    --immich-ui-muted: 212 212 212;
-    --immich-ui-gray: 33 33 33;
-    --immich-ui-default-border: 33 33 33;
+    --immich-ui-info-400: oklch(0.638 0.166 246.52);
+    --immich-ui-info-300: oklch(0.516 0.135 246.69);
+    --immich-ui-info-200: oklch(0.386 0.1 246.5);
+    --immich-ui-info-100: oklch(0.265 0.07 247.05);
+    --immich-ui-info-50: oklch(0.186 0.049 247.05);
+
+    --immich-ui-light-50: var(--color-neutral-950);
+    --immich-ui-light-100: var(--color-neutral-900);
+    --immich-ui-light-200: var(--color-neutral-800);
+    --immich-ui-light-300: var(--color-neutral-700);
+    --immich-ui-light-400: var(--color-neutral-600);
+    --immich-ui-light-500: var(--color-neutral-500);
+    --immich-ui-light-600: var(--color-neutral-400);
+    --immich-ui-light-700: var(--color-neutral-300);
+    --immich-ui-light-800: var(--color-neutral-200);
+    --immich-ui-light-900: var(--color-neutral-100);
+    --immich-ui-light-950: var(--color-neutral-50);
+
+    --immich-ui-dark-50: var(--color-neutral-50);
+    --immich-ui-dark-100: var(--color-neutral-100);
+    --immich-ui-dark-200: var(--color-neutral-200);
+    --immich-ui-dark-300: var(--color-neutral-300);
+    --immich-ui-dark-400: var(--color-neutral-400);
+    --immich-ui-dark-500: var(--color-neutral-500);
+    --immich-ui-dark-600: var(--color-neutral-600);
+    --immich-ui-dark-700: var(--color-neutral-700);
+    --immich-ui-dark-800: var(--color-neutral-800);
+    --immich-ui-dark-900: var(--color-neutral-900);
+    --immich-ui-dark-950: var(--color-neutral-950);
+
+    --immich-ui-light: oklch(0% 0 0);
+    --immich-ui-dark: oklch(89% 0 271);
+    --immich-ui-muted: oklch(87% 0 271);
+    --immich-ui-gray: oklch(25% 0 271);
+    --immich-ui-default-border: var(--immich-ui-light-200);
   }
 
   *,
@@ -224,6 +296,6 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: rgb(var(--immich-ui-default-border));
+    border-color: var(--immich-ui-default-border);
   }
 }

package/dist/types.d.ts

@@ -15,7 +15,6 @@ export type HeadingSize = Size | 'title';
 export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
 export type Shape = 'rectangle' | 'semi-round' | 'round';
 export type Variants = 'filled' | 'outline' | 'ghost';
-export type ToastVariant = 'filled' | 'outline';
 export type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 export declare enum Theme {
     Light = "light",
@@ -189,7 +188,6 @@ export type ToastShow = {
     shape?: Shape;
     icon?: IconLike | false;
     size?: ContainerSize;
-    variant?: ToastVariant;
 };
 export type ToastOptions = {
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.45.1",
+  "version": "0.47.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",

package/dist/components/AppShell/PageLayout.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    title?: string | undefined;
-    description?: string | undefined;
-    scrollbar?: boolean;
-    buttons?: Snippet;
-    children?: Snippet;
-  }
-
-  let { title = undefined, description = undefined, scrollbar = true, buttons, children }: Props = $props();
-
-  let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden');
-  let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-(--spacing(16)))]' : 'top-0 h-full');
-</script>
-
-<section class="relative">
-  {#if title || buttons}
-    <div
-      class="dark:border-immich-neutral dark:text-immich-dark-fg absolute flex h-16 w-full place-items-center justify-between border-b p-4"
-    >
-      <div class="flex items-center gap-2">
-        {#if title}
-          <div class="font-medium" tabindex="-1">{title}</div>
-        {/if}
-        {#if description}
-          <p class="text-sm text-gray-400 dark:text-gray-600">{description}</p>
-        {/if}
-      </div>
-      {@render buttons?.()}
-    </div>
-  {/if}
-
-  <div class="{scrollbarClass} scrollbar-stable absolute {hasTitleClass} w-full overflow-y-auto">
-    {@render children?.()}
-  </div>
-</section>

package/dist/components/AppShell/PageLayout.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    title?: string | undefined;
-    description?: string | undefined;
-    scrollbar?: boolean;
-    buttons?: Snippet;
-    children?: Snippet;
-}
-declare const PageLayout: import("svelte").Component<Props, {}, "">;
-type PageLayout = ReturnType<typeof PageLayout>;
-export default PageLayout;