@immich/ui 0.20.0 → 0.21.0

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

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

package/dist/components/Navbar/NavbarItem.svelte

@@ -10,7 +10,9 @@
 		href: string;
 		variant?: 'compact';
 		isActive?: () => boolean;
-	} & { icon?: string & Omit<IconProps, 'icon'> };
+		icon?: string | IconProps;
+		activeIcon?: string | IconProps;
+	};
 
 	const startsWithHref = () => page.url.pathname.startsWith(href);
 
@@ -20,12 +22,18 @@
 		title,
 		variant,
 		active: activeOverride,
-		...iconProps
+		icon,
+		activeIcon,
 	}: Props = $props();
 
 	const isActive = isActiveOverride ?? startsWithHref;
 	let active = $derived(activeOverride ?? isActive());
 
+	const iconProps = $derived(typeof icon === 'string' ? { icon } : icon);
+	const activeIconProps = $derived(
+		typeof activeIcon === 'string' ? { icon: activeIcon } : activeIcon,
+	);
+
 	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',
 		variants: {
@@ -48,13 +56,12 @@
 	class={styles({ active, variant: variant ?? 'default' })}
 >
 	<div class="flex w-full place-items-center gap-4 overflow-hidden truncate">
-		{#if iconProps.icon}
+		{#if iconProps}
 			<Icon
 				size="1.375em"
 				class="shrink-0"
 				aria-hidden={true}
-				{...iconProps}
-				icon={iconProps.icon}
+				{...active && activeIconProps ? activeIconProps : iconProps}
 			/>
 		{/if}
 		<span class="text-sm font-medium">{title}</span>

package/dist/components/Navbar/NavbarItem.svelte.d.ts

@@ -5,8 +5,8 @@ type Props = {
     href: string;
     variant?: 'compact';
     isActive?: () => boolean;
-} & {
-    icon?: string & Omit<IconProps, 'icon'>;
+    icon?: string | IconProps;
+    activeIcon?: string | IconProps;
 };
 declare const NavbarItem: import("svelte").Component<Props, {}, "">;
 type NavbarItem = ReturnType<typeof NavbarItem>;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ 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,6 +8,8 @@ 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/theme/default.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		/* light */
+		--immich-ui-primary: 66 80 175;
+		--immich-ui-dark: 58 58 58;
+		--immich-ui-light: 255 255 255;
+		--immich-ui-success: 16 188 99;
+		--immich-ui-danger: 200 60 60;
+		--immich-ui-warning: 216 143 64;
+		--immich-ui-info: 8 111 230;
+		--immich-ui-gray: 246 246 246;
+
+		--immich-ui-default-border: 209 213 219;
+	}
+
+	.dark {
+		/* dark */
+		--immich-ui-primary: 172 203 250;
+		--immich-ui-light: 0 0 0;
+		--immich-ui-dark: 229 231 235;
+		--immich-ui-success: 72 237 152;
+		--immich-ui-danger: 246 125 125;
+		--immich-ui-warning: 254 197 132;
+		--immich-ui-info: 121 183 254;
+		--immich-ui-gray: 33 33 33;
+
+		--immich-ui-default-border: 55 65 81;
+	}
+}

package/dist/theme/default.d.ts

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,16 @@
+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>)',
+    }),
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.20.0",
+	"version": "0.21.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",