@immich/ui 0.46.0 → 0.48.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,17 +28,12 @@
     variants: {
       shape: styleVariants.shape,
       color: {
-        primary:
-          'bg-primary-100 border-primary-100 text-primary-950 dark:text-primary-50 dark:bg-primary-800 dark:border-primary-800',
-        secondary:
-          'border-neutral-20 bg-neutral-100 text-neutral-950 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50',
-        success:
-          'border-success-100 bg-success-100 text-success-950 dark:text-success-50 dark:bg-success-800 dark:border-success-800',
-        info: 'border-info-100 bg-info-200 text-info-950 dark:text-info-50 dark:bg-info-800 dark:border-info-800',
-        warning:
-          'border-warning-100 bg-warning-200 text-warning-950 dark:text-warning-50 dark:bg-warning-800 dark:border-warning-800',
-        danger:
-          'border-danger-100 bg-danger-200 text-danger-950 dark:text-danger-50 dark:bg-danger-900 dark:border-danger-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: {

package/dist/components/Card/Card.svelte

@@ -51,12 +51,12 @@
     base: 'flex w-full grow flex-col',
     variants: {
       color: {
-        primary: 'bg-primary-50 dark:bg-primary-900',
-        secondary: 'text-dark bg-neutral-50 dark:bg-neutral-900 dark:text-white',
-        success: 'bg-success-50 dark:bg-success-900',
-        danger: 'bg-danger-50 dark:bg-danger-900',
-        warning: 'bg-warning-50 dark:bg-warning-900',
-        info: 'bg-info-50 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',
       },
     },
   });

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/CommandPaletteItem.svelte

@@ -1,13 +1,14 @@
 <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 { CommandItemResponse } from '../../services/command-palette-manager.svelte';
+  import { cleanClass } from '../../utilities/internal.js';
   import { mdiClose } from '@mdi/js';
-  import Badge from '../Badge/Badge.svelte';
 
   type Props = {
     item: CommandItemResponse;
@@ -78,9 +79,7 @@
       <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={selected ? '' : 'border-neutral-200 dark:border-neutral-700'}
-              >{shortcut.join(' ')}</Kbd
-            >
+            <Kbd size="tiny" class={cleanClass(selected && 'border')}>{shortcut.join(' ')}</Kbd>
           </div>
         {/each}
       </div>

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -3,7 +3,7 @@
   import Text from '../Text/Text.svelte';
   import { zIndex } from '../../constants.js';
   import { styleVariants } from '../../styles.js';
-  import { MenuItemType, type ContextMenuProps, type MenuItem } from '../../types.js';
+  import { MenuItemType, type ContextMenuProps, type ActionItem } from '../../types.js';
   import { cleanClass, isEnabled } from '../../utilities/internal.js';
   import { DropdownMenu } from 'bits-ui';
   import { fly } from 'svelte/transition';
@@ -20,19 +20,19 @@
     ...restProps
   }: ContextMenuProps = $props();
 
-  const isDivider = (item: MenuItem | MenuItemType): item is MenuItemType => {
+  const isDivider = (item: ActionItem | MenuItemType): item is MenuItemType => {
     return item === MenuItemType.Divider;
   };
 
   const itemStyles = tv({
-    base: 'dark:hover:bg-primary-800 hover:bg-primary-100 flex w-full items-center gap-1 rounded-lg p-1 text-start hover:cursor-pointer',
+    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: 'flex flex-col gap-1 overflow-hidden rounded-xl border bg-neutral-100 py-1 shadow-sm dark:border-neutral-700 dark:bg-neutral-900',
+    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,12 +102,12 @@
             <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 dark:border-neutral-700" />
+                  <DropdownMenu.Separator class="dark:border-light-300 my-0.5 border-t" />
                 {:else}
                   <DropdownMenu.Item
                     textValue={item.title}
                     closeOnSelect
-                    onSelect={(event) => item.onSelect?.({ event, item })}
+                    onSelect={() => item.onAction(item)}
                     class="px-1"
                   >
                     <div class={itemStyles({ color: item.color })}>
@@ -119,13 +119,13 @@
               {/each}
 
               {#if filteredBottomItems}
-                <DropdownMenu.Separator class="my-0.5 border-t dark:border-neutral-700" />
+                <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
                       textValue={item.title}
                       closeOnSelect
-                      onSelect={(event) => item.onSelect?.({ event, item })}
+                      onSelect={() => item.onAction(item)}
                       title={item.title}
                     >
                       <div class={cleanClass(itemStyles({ color: item.color }))}>

package/dist/components/ContextMenu/ContextMenuButton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import IconButton from '../IconButton/IconButton.svelte';
+  import { menuManager } from '../../services/menu-manager.svelte.js';
+  import type { ContextMenuButtonProps } from '../../types.js';
+  import { mdiDotsVertical } from '@mdi/js';
+
+  const {
+    color = 'secondary',
+    position = 'top-right',
+    icon = mdiDotsVertical,
+    variant = 'ghost',
+    shape = 'round',
+    items,
+    bottomItems,
+    ...rest
+  }: ContextMenuButtonProps = $props();
+
+  const onclick = async (event: Event) => {
+    await menuManager.show({ target: event.currentTarget as HTMLElement, position, items, bottomItems });
+  };
+</script>
+
+<IconButton {icon} {color} {shape} {variant} {...rest} {onclick} />

package/dist/components/ContextMenu/ContextMenuButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ContextMenuButtonProps } from '../../types.js';
+declare const ContextMenuButton: import("svelte").Component<ContextMenuButtonProps, {}, "">;
+type ContextMenuButton = ReturnType<typeof ContextMenuButton>;
+export default ContextMenuButton;

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/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-100 dark:bg-primary-800 border-transparent',
-        secondary: 'border-transparent bg-neutral-200 dark:bg-neutral-700',
-        success: 'bg-success-100 dark:bg-success-800 border-transparent',
-        danger: 'bg-danger-100 dark:bg-danger-800 border-transparent',
-        warning: 'bg-warning-100 dark:bg-warning-800 border-transparent',
-        info: 'bg-info-100 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',
       },
     },
   });

package/dist/components/Toast/ToastContainer.svelte

@@ -18,12 +18,12 @@
     base: 'bg-light text-dark overflow-hidden border py-1.5 shadow-xs transition-all',
     variants: {
       color: {
-        primary: 'border-primary-100 bg-primary-50 dark:bg-primary-900 dark:border-primary-800',
-        secondary: 'border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800',
-        success: 'border-success-100 bg-success-50 dark:bg-success-900 dark:border-success-800',
-        info: 'border-info-100 bg-info-50 dark:bg-info-900 dark:border-info-800',
-        warning: 'border-warning-100 bg-warning-50 dark:bg-warning-900 dark:border-warning-800',
-        danger: 'border-danger-100 bg-danger-50 dark:bg-danger-900 dark:border-danger-800',
+        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

@@ -30,12 +30,12 @@
     base: 'h-8 w-8 shrink-0 rounded-xl py-1.75',
     variants: {
       color: {
-        primary: 'bg-primary-100 dark:bg-primary-800 text-primary',
-        secondary: 'bg-neutral-200 dark:bg-neutral-700',
-        success: 'bg-success-100 dark:bg-success-800 text-success',
-        info: 'bg-info-200 dark:bg-info-800 text-info',
-        warning: 'bg-warning-200 dark:bg-warning-700 text-warning',
-        danger: 'bg-danger-200 dark:bg-danger-800 text-danger',
+        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',
       },
     },
   });

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-10 w-10 items-center justify-center rounded-lg hover:cursor-pointer 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,
     },
@@ -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:hover:bg-primary-300 data-selected:text-light data-today:border-primary-200 data-today:dark:border-primary-600 data-today:dark:bg-primary-800 data-today:bg-primary-50 border border-transparent text-sm 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/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));
@@ -144,79 +168,127 @@
     --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: 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-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",
@@ -68,6 +67,13 @@ export type CloseButtonProps = {
     class?: string;
     translations?: TranslationProps<'close'>;
 } & ButtonOrAnchor;
+export type ContextMenuButtonProps = ButtonBase & {
+    icon?: IconLike;
+    position?: ContextMenuPosition;
+    'aria-label': string;
+    items: MenuItems;
+    bottomItems?: Array<ActionItem | undefined>;
+} & Omit<HTMLButtonAttributes, 'color' | 'size'>;
 export type IconButtonProps = ButtonBase & {
     icon: IconLike;
     flipped?: boolean;
@@ -189,7 +195,6 @@ export type ToastShow = {
     shape?: Shape;
     icon?: IconLike | false;
     size?: ContainerSize;
-    variant?: ToastVariant;
 };
 export type ToastOptions = {
     id?: string;
@@ -205,23 +210,13 @@ export type ToastButton = {
     variant?: Variants;
     onClick: () => void;
 };
-export type MenuSelectHandler = (context: {
-    event: Event;
-    item: MenuItem;
-}) => void;
-export type MenuItem = {
-    title: string;
-    icon: IconLike;
-    color?: Color;
-    onSelect?: MenuSelectHandler;
-} & IfLike;
 export declare enum MenuItemType {
     Divider = "divider"
 }
-export type MenuItems = Array<MenuItem | MenuItemType | undefined>;
+export type MenuItems = Array<ActionItem | MenuItemType | undefined>;
 export type MenuProps = {
     items: MenuItems;
-    bottomItems?: (MenuItem | undefined)[];
+    bottomItems?: (ActionItem | undefined)[];
     size?: MenuSize;
 } & HTMLAttributes<HTMLDivElement>;
 export type ContextMenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
@@ -244,4 +239,14 @@ export type DatePickerProps = {
 export type IfLike = {
     $if?: () => boolean;
 };
+export type ActionItemHandler<T = never> = (item: ActionItem<T>) => void | Promise<void>;
+export type ActionItem<T = never> = Omit<{
+    title: string;
+    icon: IconLike;
+    color?: Color;
+    onAction: ActionItemHandler<T>;
+    data: T;
+} & IfLike, [
+    T
+] extends [never] ? 'data' : ''>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",
@@ -58,7 +58,7 @@
     "@immich/svelte-markdown-preprocess": "^0.1.0"
   },
   "volta": {
-    "node": "24.11.0"
+    "node": "24.11.1"
   },
   "scripts": {
     "create": "node scripts/create.js",

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;