@immich/ui 0.50.0 → 0.50.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/Avatar/Avatar.svelte +10 -10
  2. package/dist/components/Badge/Badge.svelte +15 -15
  3. package/dist/components/CommandPalette/CommandPaletteItem.svelte +7 -5
  4. package/dist/components/ConfirmModal/ConfirmModal.svelte +2 -2
  5. package/dist/components/ConfirmModal/ConfirmModal.svelte.d.ts +2 -2
  6. package/dist/components/FormModal/FormModal.svelte +2 -2
  7. package/dist/components/FormModal/FormModal.svelte.d.ts +2 -2
  8. package/dist/components/Textarea/Textarea.svelte +1 -1
  9. package/dist/components/Toast/ToastContent.svelte +7 -7
  10. package/dist/theme/default.css +4 -4
  11. package/package.json +1 -1
package/dist/components/Avatar/Avatar.svelte CHANGED
@@ -11,7 +11,7 @@
11
11
  const { color = 'primary', size = 'medium', name }: Props = $props();
12
12
 
13
13
  const styles = tv({
14
- base: 'flex h-full w-full items-center justify-center font-medium select-none',
14
+ base: 'flex h-full w-full items-center justify-center font-medium text-white select-none',
15
15
  variants: {
16
16
  size: {
17
17
  tiny: 'h-5 w-5 text-xs',
@@ -22,15 +22,15 @@
22
22
  },
23
23
  color: {
24
24
  primary: 'bg-primary text-light',
25
- pink: 'text-light bg-pink-400',
26
- red: 'text-light bg-red-500',
27
- yellow: 'text-light bg-yellow-500',
28
- purple: 'text-dark bg-purple-600',
29
- orange: 'text-light bg-orange-600',
30
- gray: 'text-dark bg-gray-600',
31
- amber: 'text-light bg-amber-600',
32
- blue: 'text-dark bg-blue-500',
33
- green: 'text-dark bg-green-600',
25
+ pink: 'bg-pink-400',
26
+ red: 'bg-red-500',
27
+ yellow: 'bg-yellow-500',
28
+ purple: 'bg-purple-600',
29
+ orange: 'bg-orange-600',
30
+ gray: 'bg-gray-600',
31
+ amber: 'bg-amber-600',
32
+ blue: 'bg-blue-500',
33
+ green: 'bg-green-600',
34
34
  },
35
35
  },
36
36
  });
package/dist/components/Badge/Badge.svelte CHANGED
@@ -24,31 +24,31 @@
24
24
  }: Props = $props();
25
25
 
26
26
  const styles = tv({
27
- base: 'border px-2 py-0.5',
27
+ base: 'text-light inline-flex items-center border font-medium antialiased',
28
28
  variants: {
29
29
  shape: styleVariants.shape,
30
30
  color: {
31
- primary: 'border-primary-100 bg-primary-100 text-primary-950 dark:bg-primary-200 dark:border-primary-200',
32
- secondary: 'border-light-300 bg-light-100 text-light-950 dark:bg-light-200',
33
- success: 'border-success-100 bg-success-100 text-success-950 dark:bg-success-200 dark:border-success-200',
34
- info: 'border-info-200 bg-info-200 text-info-950',
35
- warning: 'border-warning-200 bg-warning-200 text-warning-950',
36
- danger: 'border-danger-200 bg-danger-200 text-danger-950 dark:bg-danger-200',
31
+ primary: 'bg-primary',
32
+ secondary: 'bg-dark',
33
+ success: 'bg-success',
34
+ info: 'bg-info',
35
+ warning: 'bg-warning',
36
+ danger: 'bg-danger text-danger-50',
37
37
  },
38
38
  textSize: styleVariants.textSize,
39
39
  paddingSize: {
40
- tiny: 'px-1.5 py-px',
41
- small: 'px-1.75 py-0.5',
42
- medium: 'px-2.5 py-0.75',
40
+ tiny: 'px-1.5 py-1',
41
+ small: 'px-1.75 py-0.75',
42
+ medium: 'px-2.5 py-1',
43
43
  large: 'px-2.75 py-1',
44
44
  giant: 'px-3 py-1.25',
45
45
  },
46
46
  roundedSize: {
47
- tiny: 'rounded-md',
48
- small: 'rounded-md',
49
- medium: 'rounded-md',
50
- large: 'rounded-lg',
51
- giant: 'rounded-lg',
47
+ tiny: 'rounded-lg',
48
+ small: 'rounded-lg',
49
+ medium: 'rounded-lg',
50
+ large: 'rounded-xl',
51
+ giant: 'rounded-xl',
52
52
  },
53
53
  },
54
54
  });
package/dist/components/CommandPalette/CommandPaletteItem.svelte CHANGED
@@ -43,11 +43,13 @@
43
43
  fullWidth
44
44
  variant={selected ? 'outline' : 'ghost'}
45
45
  color="secondary"
46
- class="flex justify-between gap-3 border text-start {selected ? 'border-neutral-500!' : ''}"
46
+ class="hover:bg-primary-50 flex justify-between gap-3 border py-4 text-start {selected
47
+ ? 'border-primary/50 bg-primary-50'
48
+ : 'border-light-200 dark:border-light-300'}"
47
49
  >
48
50
  <div class="flex flex-col">
49
- <div class="flex items-center gap-1">
50
- <Text fontWeight="bold">{item.title}</Text>
51
+ <div class="flex place-items-center gap-2">
52
+ <Text fontWeight="semi-bold">{item.title}</Text>
51
53
  <Icon icon={item.icon} size="1.25rem" class={item.iconClass} />
52
54
  </div>
53
55
  {#if item.description}
@@ -58,9 +60,9 @@
58
60
  >
59
61
  {/if}
60
62
  <div class="mt-2">
61
- <Badge size="small" color="primary" shape="rectangle">{item.type}</Badge>
63
+ <Badge color="primary" size="small">{item.type}</Badge>
62
64
  {#if item.isGlobal}
63
- <Badge size="small" shape="rectangle" color="warning">Global</Badge>
65
+ <Badge color="warning" size="small">Global</Badge>
64
66
  {/if}
65
67
  </div>
66
68
  </div>
package/dist/components/ConfirmModal/ConfirmModal.svelte CHANGED
@@ -4,8 +4,8 @@
4
4
  import ModalBody from '../Modal/ModalBody.svelte';
5
5
  import ModalFooter from '../Modal/ModalFooter.svelte';
6
6
  import HStack from '../Stack/HStack.svelte';
7
- import type { Color } from '../../types.js';
8
7
  import { t } from '../../services/translation.svelte.js';
8
+ import type { Color, ModalSize } from '../../types.js';
9
9
  import type { Snippet } from 'svelte';
10
10
 
11
11
  interface Props {
@@ -15,7 +15,7 @@
15
15
  confirmText?: string;
16
16
  confirmColor?: Color;
17
17
  disabled?: boolean;
18
- size?: 'small' | 'medium';
18
+ size?: ModalSize;
19
19
  onClose: (confirmed: boolean) => void;
20
20
  promptSnippet?: Snippet;
21
21
  }
package/dist/components/ConfirmModal/ConfirmModal.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { Color } from '../../types.js';
1
+ import type { Color, ModalSize } from '../../types.js';
2
2
  import type { Snippet } from 'svelte';
3
3
  interface Props {
4
4
  title?: string;
@@ -7,7 +7,7 @@ interface Props {
7
7
  confirmText?: string;
8
8
  confirmColor?: Color;
9
9
  disabled?: boolean;
10
- size?: 'small' | 'medium';
10
+ size?: ModalSize;
11
11
  onClose: (confirmed: boolean) => void;
12
12
  promptSnippet?: Snippet;
13
13
  }
package/dist/components/FormModal/FormModal.svelte CHANGED
@@ -5,7 +5,7 @@
5
5
  import ModalFooter from '../Modal/ModalFooter.svelte';
6
6
  import HStack from '../Stack/HStack.svelte';
7
7
  import { t } from '../../services/translation.svelte.js';
8
- import type { Color } from '../../types.js';
8
+ import type { Color, ModalSize } from '../../types.js';
9
9
  import { generateId } from '../../utilities/internal.js';
10
10
  import type { Snippet } from 'svelte';
11
11
 
@@ -15,7 +15,7 @@
15
15
  submitText?: string;
16
16
  submitColor?: Color;
17
17
  disabled?: boolean;
18
- size?: 'small' | 'medium';
18
+ size?: ModalSize;
19
19
  preventDefault?: boolean;
20
20
  onClose: () => void;
21
21
  onSubmit: (event: SubmitEvent) => void;
package/dist/components/FormModal/FormModal.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { Color } from '../../types.js';
1
+ import type { Color, ModalSize } from '../../types.js';
2
2
  import type { Snippet } from 'svelte';
3
3
  type Props = {
4
4
  title: string;
@@ -6,7 +6,7 @@ type Props = {
6
6
  submitText?: string;
7
7
  submitColor?: Color;
8
8
  disabled?: boolean;
9
- size?: 'small' | 'medium';
9
+ size?: ModalSize;
10
10
  preventDefault?: boolean;
11
11
  onClose: () => void;
12
12
  onSubmit: (event: SubmitEvent) => void;
package/dist/components/Textarea/Textarea.svelte CHANGED
@@ -22,7 +22,7 @@
22
22
  const { label, description, readOnly, required, invalid, disabled, ...labelProps } = $derived(getFieldContext());
23
23
 
24
24
  const styles = tv({
25
- base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
25
+ base: 'focus-within:ring-primary dark:focus-within:ring-primary w-full bg-gray-100 ring-1 ring-gray-200 outline-none focus-within:ring-1 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-800 dark:ring-black dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
26
26
  variants: {
27
27
  shape: styleVariants.shape,
28
28
  padding: {
package/dist/components/Toast/ToastContent.svelte CHANGED
@@ -27,15 +27,15 @@
27
27
  );
28
28
 
29
29
  const iconStyles = tv({
30
- base: 'h-8 w-8 shrink-0 rounded-xl py-1.75',
30
+ base: 'h-8 w-8 shrink-0 rounded-xl py-1.75 text-white',
31
31
  variants: {
32
32
  color: {
33
- primary: 'bg-primary-100 dark:bg-primary-200 text-primary',
34
- secondary: 'bg-light-200 dark:bg-light-300',
35
- success: 'bg-success-100 dark:bg-success-200 text-success',
36
- info: 'bg-info-200 text-info',
37
- warning: 'bg-warning-200 text-warning',
38
- danger: 'bg-danger-200 text-danger',
33
+ primary: 'bg-primary dark:bg-primary-200',
34
+ secondary: 'bg-dark dark:bg-light-300',
35
+ success: 'bg-success dark:bg-success-200',
36
+ info: 'bg-info dark:text-info-50',
37
+ warning: 'bg-warning dark:text-warning-50',
38
+ danger: 'bg-danger dark:text-danger-50',
39
39
  },
40
40
  },
41
41
  });
package/dist/theme/default.css CHANGED
@@ -119,7 +119,7 @@
119
119
  --immich-ui-primary-900: oklch(0.211 0.068 273.01);
120
120
  --immich-ui-primary-950: oklch(0.15 0.05 273.01);
121
121
 
122
- --immich-ui-success-50: oklch(0.969 0.051 148.59);
122
+ --immich-ui-success-50: oklch(0.983 0.0115 162.06);
123
123
  --immich-ui-success-100: oklch(0.937 0.109 148.66);
124
124
  --immich-ui-success-200: oklch(0.863 0.249 147.5);
125
125
  --immich-ui-success-300: oklch(0.813 0.234 147.54);
@@ -131,7 +131,7 @@
131
131
  --immich-ui-success-900: oklch(0.252 0.073 147.47);
132
132
  --immich-ui-success-950: oklch(0.194 0.056 147.87);
133
133
 
134
- --immich-ui-danger-50: oklch(0.96 0.018 17.57);
134
+ --immich-ui-danger-50: oklch(0.9747 0.0109 24.32);
135
135
  --immich-ui-danger-100: oklch(0.926 0.034 17.84);
136
136
  --immich-ui-danger-200: oklch(0.853 0.074 19.77);
137
137
  --immich-ui-danger-300: oklch(0.774 0.125 21.53);
@@ -143,7 +143,7 @@
143
143
  --immich-ui-danger-900: oklch(0.245 0.094 29.51);
144
144
  --immich-ui-danger-950: oklch(0.186 0.07 29.56);
145
145
 
146
- --immich-ui-warning: oklch(0.812 0.17 76.3);
146
+ --immich-ui-warning: oklch(0.9887 0.0126 86.83);
147
147
  --immich-ui-warning-50: oklch(0.983 0.01 58.27);
148
148
  --immich-ui-warning-100: oklch(0.959 0.027 63.96);
149
149
  --immich-ui-warning-200: oklch(0.925 0.051 64.24);
@@ -156,7 +156,7 @@
156
156
  --immich-ui-warning-900: oklch(0.27 0.057 76.33);
157
157
  --immich-ui-warning-950: oklch(0.209 0.044 77.51);
158
158
 
159
- --immich-ui-info-50: oklch(0.958 0.02 267.31);
159
+ --immich-ui-info-50: oklch(0.9801 0.0096 252.81);
160
160
  --immich-ui-info-100: oklch(0.922 0.036 268.3);
161
161
  --immich-ui-info-200: oklch(0.845 0.073 265.19);
162
162
  --immich-ui-info-300: oklch(0.769 0.114 261.53);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@immich/ui",
3
- "version": "0.50.0",
3
+ "version": "0.50.1",
4
4
  "license": "GNU Affero General Public License version 3",
5
5
  "repository": {
6
6
  "type": "git",