diff --git a/frontend/src/lib/components/formatted-message.svelte b/frontend/src/lib/components/formatted-message.svelte index fa3eb508..0a105062 100644 --- a/frontend/src/lib/components/formatted-message.svelte +++ b/frontend/src/lib/components/formatted-message.svelte @@ -37,12 +37,7 @@ {@render children?.()} {/snippet} {#snippet link({ children, options })} - + {@render children?.()} {/snippet} diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte index d79f2be8..aaf5cdcb 100644 --- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte +++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte @@ -22,6 +22,6 @@ diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte index 61f9f18f..208feb66 100644 --- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte +++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte @@ -10,7 +10,7 @@ let { ref = $bindable(null), class: className, - variant = 'outline', + variant = 'ghost', size = 'default', ...restProps }: AlertDialogPrimitive.CancelProps & { @@ -22,6 +22,6 @@ diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte index 4b93db4e..b559767a 100644 --- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte +++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte @@ -24,7 +24,8 @@ data-slot="alert-dialog-content" data-size={size} class={cn( - 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl p-6 shadow-xl ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md', + 'group/alert-dialog-content bg-popover text-popover-foreground border-border shadow-overlay transition-motion fixed top-1/2 left-1/2 z-(--z-overlay) grid max-h-[85dvh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl border px-6 py-5 duration-(--dur-slow) outline-none data-closed:opacity-0 data-closed:duration-(--dur-base) data-closed:ease-in sm:data-[size=default]:max-w-(--dialog-sm) sm:data-[size=sm]:max-w-xs starting:scale-(--pop-scale) starting:opacity-0', + 'max-sm:before:bg-border-strong max-sm:inset-x-0 max-sm:top-auto max-sm:bottom-0 max-sm:w-full max-sm:translate-0 max-sm:rounded-t-lg max-sm:rounded-b-none max-sm:pt-6 max-sm:pb-[calc(20px+env(safe-area-inset-bottom))] max-sm:before:absolute max-sm:before:top-2 max-sm:before:left-1/2 max-sm:before:h-1 max-sm:before:w-9 max-sm:before:-translate-x-1/2 max-sm:before:rounded-[2px] max-sm:data-closed:translate-y-full max-sm:data-closed:opacity-100 max-sm:starting:translate-y-full max-sm:starting:scale-100 max-sm:starting:opacity-100', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte index 3930f40f..7e534b42 100644 --- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte +++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte @@ -12,9 +12,6 @@ diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte index b983c818..c29a56f8 100644 --- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte +++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte @@ -14,7 +14,7 @@ bind:this={ref} data-slot="alert-dialog-footer" class={cn( - 'cn-alert-dialog-footer flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end', + 'mt-1 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte index d07e8cd0..dda6d4d4 100644 --- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte +++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte @@ -13,10 +13,7 @@
{@render children?.()} diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte index 340248dd..f6db33e3 100644 --- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte +++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte @@ -14,7 +14,7 @@ bind:this={ref} data-slot="alert-dialog-media" class={cn( - "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", + "bg-fill-muted mb-2 inline-flex size-12 items-center justify-center rounded-full *:[svg:not([class*='size-'])]:size-6", className )} {...restProps} diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte index da8cf95c..4101c635 100644 --- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte +++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte @@ -13,7 +13,7 @@ bind:ref data-slot="alert-dialog-overlay" class={cn( - 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm', + 'bg-scrim transition-motion fixed inset-0 isolate z-(--z-overlay) backdrop-blur-[4px] duration-(--dur-slow) data-closed:opacity-0 data-closed:duration-(--dur-base) data-closed:ease-in starting:opacity-0 [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none!', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte index a51382fa..2d1f8e2f 100644 --- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte +++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte @@ -12,9 +12,6 @@ diff --git a/frontend/src/lib/components/ui/alert/alert-action.svelte b/frontend/src/lib/components/ui/alert/alert-action.svelte index 97158caf..e386dba0 100644 --- a/frontend/src/lib/components/ui/alert/alert-action.svelte +++ b/frontend/src/lib/components/ui/alert/alert-action.svelte @@ -13,7 +13,7 @@
{@render children?.()} diff --git a/frontend/src/lib/components/ui/alert/alert-description.svelte b/frontend/src/lib/components/ui/alert/alert-description.svelte index a2b85ce1..f135ce52 100644 --- a/frontend/src/lib/components/ui/alert/alert-description.svelte +++ b/frontend/src/lib/components/ui/alert/alert-description.svelte @@ -14,7 +14,7 @@ bind:this={ref} data-slot="alert-description" class={cn( - 'text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4', + 'text-fg [&_a]:inline-link text-pretty group-has-[>svg]/alert:col-start-2 [&_p:not(:last-child)]:mb-2', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/alert/alert-title.svelte b/frontend/src/lib/components/ui/alert/alert-title.svelte index 0bffdde0..6257c2c0 100644 --- a/frontend/src/lib/components/ui/alert/alert-title.svelte +++ b/frontend/src/lib/components/ui/alert/alert-title.svelte @@ -14,7 +14,7 @@ bind:this={ref} data-slot="alert-title" class={cn( - '[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3', + '[&_a]:inline-link font-medium text-(--tone-fg) group-has-[>svg]/alert:col-start-2', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/alert/alert.svelte b/frontend/src/lib/components/ui/alert/alert.svelte index 774cd18d..a297bdca 100644 --- a/frontend/src/lib/components/ui/alert/alert.svelte +++ b/frontend/src/lib/components/ui/alert/alert.svelte @@ -2,20 +2,20 @@ import { tv, type VariantProps } from 'tailwind-variants'; export const alertVariants = tv({ - base: "grid gap-0.5 rounded-2xl border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full", + base: 'group/alert relative grid w-full gap-0.5 rounded-sm border border-(--tone-border) bg-(--tone-soft) px-3 py-2.5 text-left text-control text-fg has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:size-3.5 *:[svg]:translate-y-0.75 *:[svg]:text-(--tone-solid)', variants: { variant: { - default: 'bg-card text-card-foreground', - destructive: - 'bg-red-200 text-red-900 dark:bg-red-900 dark:text-red-100 *:[svg]:text-current', + info: '[--tone-border:var(--info-border)] [--tone-fg:var(--info-fg)] [--tone-soft:var(--info-soft)] [--tone-solid:var(--info-solid)]', success: - 'bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-100 *:[svg]:text-current', - info: 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100 *:[svg]:text-current', - warning: 'bg-warning text-warning-foreground border-warning/40 *:[svg]:text-current' + '[--tone-border:var(--success-border)] [--tone-fg:var(--success-fg)] [--tone-soft:var(--success-soft)] [--tone-solid:var(--success-solid)]', + warning: + '[--tone-border:var(--warning-border)] [--tone-fg:var(--warning-fg)] [--tone-soft:var(--warning-soft)] [--tone-solid:var(--warning-solid)]', + destructive: + '[--tone-border:var(--danger-border)] [--tone-fg:var(--danger-fg)] [--tone-soft:var(--danger-soft)] [--tone-solid:var(--danger-solid)]' } }, defaultVariants: { - variant: 'default' + variant: 'info' } }); @@ -24,6 +24,7 @@ - -
- {@render children?.()} -
diff --git a/frontend/src/lib/components/ui/card/card-content.svelte b/frontend/src/lib/components/ui/card/card-content.svelte deleted file mode 100644 index 483391bb..00000000 --- a/frontend/src/lib/components/ui/card/card-content.svelte +++ /dev/null @@ -1,20 +0,0 @@ - - -
- {@render children?.()} -
diff --git a/frontend/src/lib/components/ui/card/card-description.svelte b/frontend/src/lib/components/ui/card/card-description.svelte deleted file mode 100644 index ef81151e..00000000 --- a/frontend/src/lib/components/ui/card/card-description.svelte +++ /dev/null @@ -1,20 +0,0 @@ - - -

- {@render children?.()} -

diff --git a/frontend/src/lib/components/ui/card/card-footer.svelte b/frontend/src/lib/components/ui/card/card-footer.svelte deleted file mode 100644 index 5f149258..00000000 --- a/frontend/src/lib/components/ui/card/card-footer.svelte +++ /dev/null @@ -1,23 +0,0 @@ - - -
- {@render children?.()} -
diff --git a/frontend/src/lib/components/ui/card/card-header.svelte b/frontend/src/lib/components/ui/card/card-header.svelte deleted file mode 100644 index 82c94747..00000000 --- a/frontend/src/lib/components/ui/card/card-header.svelte +++ /dev/null @@ -1,23 +0,0 @@ - - -
- {@render children?.()} -
diff --git a/frontend/src/lib/components/ui/card/card-title.svelte b/frontend/src/lib/components/ui/card/card-title.svelte deleted file mode 100644 index 2a6ff21e..00000000 --- a/frontend/src/lib/components/ui/card/card-title.svelte +++ /dev/null @@ -1,20 +0,0 @@ - - -
- {@render children?.()} -
diff --git a/frontend/src/lib/components/ui/card/card.svelte b/frontend/src/lib/components/ui/card/card.svelte deleted file mode 100644 index 03770685..00000000 --- a/frontend/src/lib/components/ui/card/card.svelte +++ /dev/null @@ -1,25 +0,0 @@ - - -
img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-4xl *:[img:last-child]:rounded-b-4xl', - className - )} - {...restProps} -> - {@render children?.()} -
diff --git a/frontend/src/lib/components/ui/card/index.ts b/frontend/src/lib/components/ui/card/index.ts deleted file mode 100644 index 77d36747..00000000 --- a/frontend/src/lib/components/ui/card/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -import Root from './card.svelte'; -import Content from './card-content.svelte'; -import Description from './card-description.svelte'; -import Footer from './card-footer.svelte'; -import Header from './card-header.svelte'; -import Title from './card-title.svelte'; -import Action from './card-action.svelte'; - -export { - Root, - Content, - Description, - Footer, - Header, - Title, - Action, - // - Root as Card, - Content as CardContent, - Description as CardDescription, - Footer as CardFooter, - Header as CardHeader, - Title as CardTitle, - Action as CardAction -}; diff --git a/frontend/src/lib/components/ui/checkbox/checkbox.svelte b/frontend/src/lib/components/ui/checkbox/checkbox.svelte index e8f6977c..f98b94bf 100644 --- a/frontend/src/lib/components/ui/checkbox/checkbox.svelte +++ b/frontend/src/lib/components/ui/checkbox/checkbox.svelte @@ -11,13 +11,16 @@ class: className, ...restProps }: WithoutChildrenOrChild = $props(); + + const markClass = + 'col-start-1 row-start-1 size-3 transition-[opacity,scale] duration-(--dur-base) ease-out'; {#snippet children({ checked, indeterminate })} -
- {#if checked} - - {:else if indeterminate} - - {/if} -
+ + + + {/snippet} diff --git a/frontend/src/lib/components/ui/command/command-dialog.svelte b/frontend/src/lib/components/ui/command/command-dialog.svelte index a4347cc7..0f6aacf8 100644 --- a/frontend/src/lib/components/ui/command/command-dialog.svelte +++ b/frontend/src/lib/components/ui/command/command-dialog.svelte @@ -33,7 +33,10 @@ {description} diff --git a/frontend/src/lib/components/ui/command/command-empty.svelte b/frontend/src/lib/components/ui/command/command-empty.svelte index c523e400..09575985 100644 --- a/frontend/src/lib/components/ui/command/command-empty.svelte +++ b/frontend/src/lib/components/ui/command/command-empty.svelte @@ -12,6 +12,6 @@ diff --git a/frontend/src/lib/components/ui/command/command-group.svelte b/frontend/src/lib/components/ui/command/command-group.svelte index a137abd9..ee17a0c6 100644 --- a/frontend/src/lib/components/ui/command/command-group.svelte +++ b/frontend/src/lib/components/ui/command/command-group.svelte @@ -17,15 +17,12 @@ {#if heading} - + {heading} {/if} diff --git a/frontend/src/lib/components/ui/command/command-input.svelte b/frontend/src/lib/components/ui/command/command-input.svelte index 7e002015..089db9cd 100644 --- a/frontend/src/lib/components/ui/command/command-input.svelte +++ b/frontend/src/lib/components/ui/command/command-input.svelte @@ -13,14 +13,11 @@
- + {#snippet child({ props })} diff --git a/frontend/src/lib/components/ui/command/command-item.svelte b/frontend/src/lib/components/ui/command/command-item.svelte index 15aa55ef..38558246 100644 --- a/frontend/src/lib/components/ui/command/command-item.svelte +++ b/frontend/src/lib/components/ui/command/command-item.svelte @@ -15,13 +15,13 @@ bind:ref data-slot="command-item" class={cn( - "group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-full px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "group/command-item data-selected:bg-fg/6 text-control [&_svg:not([class*='text-'])]:text-fg-muted relative flex min-h-9 cursor-default items-center gap-2 rounded-sm px-2.5 outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...restProps} > {@render children?.()} diff --git a/frontend/src/lib/components/ui/command/command-link-item.svelte b/frontend/src/lib/components/ui/command/command-link-item.svelte index 094eccfb..75fe705b 100644 --- a/frontend/src/lib/components/ui/command/command-link-item.svelte +++ b/frontend/src/lib/components/ui/command/command-link-item.svelte @@ -13,7 +13,7 @@ bind:ref data-slot="command-item" class={cn( - "aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "data-selected:bg-fg/6 text-control [&_svg:not([class*='text-'])]:text-fg-muted relative flex min-h-9 cursor-default items-center gap-2 rounded-sm px-2.5 outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...restProps} diff --git a/frontend/src/lib/components/ui/command/command-list.svelte b/frontend/src/lib/components/ui/command/command-list.svelte index c7ddbd71..739c06c9 100644 --- a/frontend/src/lib/components/ui/command/command-list.svelte +++ b/frontend/src/lib/components/ui/command/command-list.svelte @@ -13,7 +13,7 @@ bind:ref data-slot="command-list" class={cn( - 'no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none', + 'max-h-72 scroll-py-1 [scrollbar-width:thin] [scrollbar-color:color-mix(in_srgb,var(--fg)_18%,transparent)_transparent] overflow-x-hidden overflow-y-auto outline-none', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/command/command-separator.svelte b/frontend/src/lib/components/ui/command/command-separator.svelte index 4ea36f49..4525005c 100644 --- a/frontend/src/lib/components/ui/command/command-separator.svelte +++ b/frontend/src/lib/components/ui/command/command-separator.svelte @@ -12,6 +12,6 @@ diff --git a/frontend/src/lib/components/ui/command/command-shortcut.svelte b/frontend/src/lib/components/ui/command/command-shortcut.svelte index daaba4fc..97dcbce2 100644 --- a/frontend/src/lib/components/ui/command/command-shortcut.svelte +++ b/frontend/src/lib/components/ui/command/command-shortcut.svelte @@ -13,10 +13,7 @@ {@render children?.()} diff --git a/frontend/src/lib/components/ui/command/command.svelte b/frontend/src/lib/components/ui/command/command.svelte index 33c403a2..c8c0aaad 100644 --- a/frontend/src/lib/components/ui/command/command.svelte +++ b/frontend/src/lib/components/ui/command/command.svelte @@ -20,9 +20,6 @@ bind:value bind:ref data-slot="command" - class={cn( - 'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-4xl p-1', - className - )} + class={cn('text-popover-foreground flex size-full flex-col overflow-hidden p-1', className)} {...restProps} /> diff --git a/frontend/src/lib/components/ui/dialog/dialog-content.svelte b/frontend/src/lib/components/ui/dialog/dialog-content.svelte index 58abf299..f7312fd3 100644 --- a/frontend/src/lib/components/ui/dialog/dialog-content.svelte +++ b/frontend/src/lib/components/ui/dialog/dialog-content.svelte @@ -7,28 +7,33 @@ import type { ComponentProps } from 'svelte'; import { Button } from '#lib/components/ui/button/index.js'; import XIcon from '@lucide/svelte/icons/x'; + import { m } from '#lib/paraglide/messages.js'; let { ref = $bindable(null), class: className, portalProps, + overlayClass, children, showCloseButton = true, ...restProps }: WithoutChildrenOrChild & { portalProps?: WithoutChildrenOrChild>; + overlayClass?: string; children: Snippet; showCloseButton?: boolean; } = $props(); - + + [data-slot=dialog-close]]:*:data-[slot=dialog-header]:pr-6 starting:scale-(--pop-scale) starting:opacity-0', + 'max-sm:before:bg-border-strong max-sm:inset-x-0 max-sm:top-auto max-sm:bottom-0 max-sm:w-full max-sm:max-w-none max-sm:translate-0 max-sm:rounded-t-lg max-sm:rounded-b-none max-sm:pt-6 max-sm:pb-[calc(20px+env(safe-area-inset-bottom))] max-sm:before:absolute max-sm:before:top-2 max-sm:before:left-1/2 max-sm:before:h-1 max-sm:before:w-9 max-sm:before:-translate-x-1/2 max-sm:before:rounded-[2px] max-sm:data-closed:translate-y-full max-sm:data-closed:opacity-100 max-sm:starting:translate-y-full max-sm:starting:scale-100 max-sm:starting:opacity-100', className )} {...restProps} @@ -39,12 +44,12 @@ {#snippet child({ props })} {/snippet} diff --git a/frontend/src/lib/components/ui/dialog/dialog-description.svelte b/frontend/src/lib/components/ui/dialog/dialog-description.svelte index 12014a19..3ca59646 100644 --- a/frontend/src/lib/components/ui/dialog/dialog-description.svelte +++ b/frontend/src/lib/components/ui/dialog/dialog-description.svelte @@ -12,9 +12,6 @@ diff --git a/frontend/src/lib/components/ui/dialog/dialog-footer.svelte b/frontend/src/lib/components/ui/dialog/dialog-footer.svelte index c8597cd5..a5004147 100644 --- a/frontend/src/lib/components/ui/dialog/dialog-footer.svelte +++ b/frontend/src/lib/components/ui/dialog/dialog-footer.svelte @@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements'; import { Dialog as DialogPrimitive } from 'bits-ui'; import { Button } from '#lib/components/ui/button/index.js'; + import { m } from '#lib/paraglide/messages.js'; let { ref = $bindable(null), @@ -18,14 +19,14 @@
{@render children?.()} {#if showCloseButton} {#snippet child({ props })} - + {/snippet} {/if} diff --git a/frontend/src/lib/components/ui/dialog/dialog-header.svelte b/frontend/src/lib/components/ui/dialog/dialog-header.svelte index b6bb2c28..54622539 100644 --- a/frontend/src/lib/components/ui/dialog/dialog-header.svelte +++ b/frontend/src/lib/components/ui/dialog/dialog-header.svelte @@ -13,7 +13,7 @@
{@render children?.()} diff --git a/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte b/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte index 2d6bce03..a036e04a 100644 --- a/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte +++ b/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte @@ -13,7 +13,7 @@ bind:ref data-slot="dialog-overlay" class={cn( - 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm', + 'bg-scrim transition-motion fixed inset-0 isolate z-(--z-overlay) backdrop-blur-[4px] duration-(--dur-slow) data-closed:opacity-0 data-closed:duration-(--dur-base) data-closed:ease-in starting:opacity-0 [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none!', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/dialog/dialog-title.svelte b/frontend/src/lib/components/ui/dialog/dialog-title.svelte index 891ff1b9..999ce334 100644 --- a/frontend/src/lib/components/ui/dialog/dialog-title.svelte +++ b/frontend/src/lib/components/ui/dialog/dialog-title.svelte @@ -12,6 +12,6 @@ diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte index a408e2e1..4d6a6576 100644 --- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte +++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte @@ -23,20 +23,20 @@ bind:indeterminate data-slot="dropdown-menu-checkbox-item" class={cn( - "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none data-inset:pl-9.5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "data-highlighted:bg-fg/6 text-control [&_svg:not([class*='text-'])]:text-fg-muted relative flex min-h-9 cursor-pointer items-center gap-2 rounded-sm px-2.5 pr-8 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-45 data-inset:pl-8.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...restProps} > {#snippet children({ checked, indeterminate })} {#if indeterminate} - + {:else if checked} - + {/if} {@render childrenProp?.()} diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte index c740c57e..80a09bcd 100644 --- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte +++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte @@ -23,7 +23,7 @@ {sideOffset} {align} class={cn( - 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-popover/70 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:data-highlighted:bg-destructive/10! dark:**:data-[variant=destructive]:data-highlighted:bg-destructive/20! relative z-50 min-w-48 animate-none! overflow-x-hidden overflow-y-auto rounded-3xl p-1.5 shadow-lg ring-1 duration-100 outline-none before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 data-closed:overflow-hidden', + 'text-popover-foreground shadow-popover bg-popover/72 border-fg/6 dark:border-fg/10 [@media(prefers-reduced-transparency:reduce)]:bg-popover! transition-motion z-(--z-popover) max-h-(--bits-dropdown-menu-content-available-height) min-w-50 origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 backdrop-blur-[40px] backdrop-saturate-150 duration-(--dur-base) outline-none data-closed:pointer-events-none data-closed:opacity-0 data-closed:duration-(--dur-fast) data-closed:ease-in starting:scale-(--pop-scale) starting:opacity-0 [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none!', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte index 5f55d9b8..fbe7062d 100644 --- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte +++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte @@ -17,6 +17,6 @@ bind:ref data-slot="dropdown-menu-group-heading" data-inset={inset} - class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8', className)} + class={cn('text-caption text-fg-muted px-2.5 pt-2 pb-1 font-medium data-inset:pl-8.5', className)} {...restProps} /> diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte index b951aaa2..8ebeb034 100644 --- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte +++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte @@ -20,7 +20,7 @@ data-inset={inset} data-variant={variant} class={cn( - "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-pointer items-center gap-2.5 rounded-2xl px-3 py-1.5 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "group/dropdown-menu-item data-highlighted:bg-fg/6 text-control not-data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-fg-muted data-[variant=destructive]:text-danger-fg data-[variant=destructive]:data-highlighted:bg-danger-soft data-[variant=destructive]:*:[svg]:text-danger-fg relative flex min-h-9 cursor-pointer items-center gap-2 rounded-sm px-2.5 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-45 data-inset:pl-8.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...restProps} diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte index d38eeda9..fec53173 100644 --- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte +++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte @@ -17,10 +17,7 @@ bind:this={ref} data-slot="dropdown-menu-label" data-inset={inset} - class={cn( - 'text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5 data-[inset]:pl-8', - className - )} + class={cn('text-caption text-fg-muted px-2.5 pt-2 pb-1 font-medium data-inset:pl-8.5', className)} {...restProps} > {@render children?.()} diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte index 33dec67e..a87dd5ac 100644 --- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte +++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte @@ -15,18 +15,18 @@ bind:ref data-slot="dropdown-menu-radio-item" class={cn( - "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none data-inset:pl-9.5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "data-highlighted:bg-fg/6 text-control [&_svg:not([class*='text-'])]:text-fg-muted relative flex min-h-9 cursor-pointer items-center gap-2 rounded-sm px-2.5 pr-8 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-45 data-inset:pl-8.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...restProps} > {#snippet children({ checked })} {#if checked} - + {/if} {@render childrenProp?.({ checked })} diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte index dd28c538..2638b87f 100644 --- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte +++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte @@ -12,6 +12,6 @@ diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte index 34ca503a..194284f0 100644 --- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte +++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte @@ -13,10 +13,7 @@ {@render children?.()} diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte index 9637c4c2..43be2b69 100644 --- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte +++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte @@ -1,6 +1,7 @@ - + + + + diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte index b18d6d5b..b9f4d784 100644 --- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte +++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte @@ -19,7 +19,7 @@ data-slot="dropdown-menu-sub-trigger" data-inset={inset} class={cn( - "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-2xl px-3 py-1.5 text-sm font-medium outline-hidden select-none data-inset:pl-9.5 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "data-highlighted:bg-fg/6 text-control [&_svg:not([class*='text-'])]:text-fg-muted data-open:bg-fg/6 relative flex min-h-9 cursor-pointer items-center gap-2 rounded-sm px-2.5 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-45 data-inset:pl-8.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...restProps} diff --git a/frontend/src/lib/components/ui/empty/empty-content.svelte b/frontend/src/lib/components/ui/empty/empty-content.svelte index ac9a2205..bfb79369 100644 --- a/frontend/src/lib/components/ui/empty/empty-content.svelte +++ b/frontend/src/lib/components/ui/empty/empty-content.svelte @@ -13,10 +13,7 @@
{@render children?.()} diff --git a/frontend/src/lib/components/ui/empty/empty-description.svelte b/frontend/src/lib/components/ui/empty/empty-description.svelte index 47579898..268845ac 100644 --- a/frontend/src/lib/components/ui/empty/empty-description.svelte +++ b/frontend/src/lib/components/ui/empty/empty-description.svelte @@ -13,10 +13,7 @@
a:hover]:text-primary text-sm/relaxed text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4', - className - )} + class={cn('text-body text-fg-muted [&>a]:inline-link', className)} {...restProps} > {@render children?.()} diff --git a/frontend/src/lib/components/ui/empty/empty-header.svelte b/frontend/src/lib/components/ui/empty/empty-header.svelte index 59dc50d6..4a65ef2d 100644 --- a/frontend/src/lib/components/ui/empty/empty-header.svelte +++ b/frontend/src/lib/components/ui/empty/empty-header.svelte @@ -13,7 +13,7 @@
{@render children?.()} diff --git a/frontend/src/lib/components/ui/empty/empty-media.svelte b/frontend/src/lib/components/ui/empty/empty-media.svelte index 20f677cb..e2f16f3f 100644 --- a/frontend/src/lib/components/ui/empty/empty-media.svelte +++ b/frontend/src/lib/components/ui/empty/empty-media.svelte @@ -2,11 +2,11 @@ import { tv, type VariantProps } from 'tailwind-variants'; export const emptyMediaVariants = tv({ - base: 'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0', + base: 'mb-1 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0', variants: { variant: { default: 'bg-transparent', - icon: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted text-foreground [&_svg:not([class*='size-'])]:size-5" + icon: "size-10 rounded-md bg-fill-muted text-fg-muted [&_svg:not([class*='size-'])]:size-4.5" } }, defaultVariants: { diff --git a/frontend/src/lib/components/ui/empty/empty-title.svelte b/frontend/src/lib/components/ui/empty/empty-title.svelte index 9063a4ca..2552b430 100644 --- a/frontend/src/lib/components/ui/empty/empty-title.svelte +++ b/frontend/src/lib/components/ui/empty/empty-title.svelte @@ -13,7 +13,7 @@
{@render children?.()} diff --git a/frontend/src/lib/components/ui/empty/empty.svelte b/frontend/src/lib/components/ui/empty/empty.svelte index fc78eb12..1f545f1b 100644 --- a/frontend/src/lib/components/ui/empty/empty.svelte +++ b/frontend/src/lib/components/ui/empty/empty.svelte @@ -14,7 +14,7 @@ bind:this={ref} data-slot="empty" class={cn( - 'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-2xl border-dashed p-12 text-center text-balance', + 'flex w-full max-w-[420px] min-w-0 flex-col items-start gap-4 pt-16 pb-12 text-left', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/field/field-content.svelte b/frontend/src/lib/components/ui/field/field-content.svelte index 104695b8..da0918b2 100644 --- a/frontend/src/lib/components/ui/field/field-content.svelte +++ b/frontend/src/lib/components/ui/field/field-content.svelte @@ -13,7 +13,7 @@
{@render children?.()} diff --git a/frontend/src/lib/components/ui/field/field-description.svelte b/frontend/src/lib/components/ui/field/field-description.svelte index 7d474229..ce48a4d8 100644 --- a/frontend/src/lib/components/ui/field/field-description.svelte +++ b/frontend/src/lib/components/ui/field/field-description.svelte @@ -14,9 +14,8 @@ bind:this={ref} data-slot="field-description" class={cn( - 'text-muted-foreground text-left text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5', - 'last:mt-0 nth-last-2:-mt-1', - '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', + 'text-caption text-fg-muted text-left [[data-variant=legend]+&]:-mt-1.5', + '[&>a]:inline-link', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/field/field-error.svelte b/frontend/src/lib/components/ui/field/field-error.svelte index 731910e0..b16f0da9 100644 --- a/frontend/src/lib/components/ui/field/field-error.svelte +++ b/frontend/src/lib/components/ui/field/field-error.svelte @@ -2,6 +2,7 @@ import { cn, type WithElementRef } from '#lib/utils/style.js'; import type { HTMLAttributes } from 'svelte/elements'; import type { Snippet } from 'svelte'; + import CircleAlertIcon from '@lucide/svelte/icons/circle-alert'; let { ref = $bindable(null), @@ -38,9 +39,10 @@ bind:this={ref} role="alert" data-slot="field-error" - class={cn('text-destructive text-sm font-normal', className)} + class={cn('text-caption text-danger-fg flex items-start gap-1', className)} {...restProps} > + {#if children} {@render children()} {:else if singleErrorMessage} diff --git a/frontend/src/lib/components/ui/field/field-group.svelte b/frontend/src/lib/components/ui/field/field-group.svelte index a9347a77..8d68dfc8 100644 --- a/frontend/src/lib/components/ui/field/field-group.svelte +++ b/frontend/src/lib/components/ui/field/field-group.svelte @@ -14,7 +14,7 @@ bind:this={ref} data-slot="field-group" class={cn( - 'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4', + 'group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/field/field-label.svelte b/frontend/src/lib/components/ui/field/field-label.svelte index 6c5c7712..2d9c3c10 100644 --- a/frontend/src/lib/components/ui/field/field-label.svelte +++ b/frontend/src/lib/components/ui/field/field-label.svelte @@ -1,16 +1,17 @@ @@ -18,12 +19,14 @@ bind:ref data-slot="field-label" class={cn( - 'has-data-checked:bg-input/30 group/field-label peer/field-label flex w-fit gap-2 leading-snug leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4', - 'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col', - required && "after:text-red-500 after:content-['*']", + 'group/field-label peer/field-label flex w-fit gap-2 font-semibold group-data-[disabled=true]/field:opacity-45', + 'has-[>[data-slot=field]]:bg-surface hover:has-[>[data-slot=field]]:bg-fill-row-hover has-data-checked:border-border-selected has-[>[data-slot=field]]:has-data-checked:bg-surface-raised hover:has-[>[data-slot=field]]:has-data-checked:bg-surface-raised has-data-checked:shadow-selected has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border has-[>[data-slot=field]]:font-medium has-[>[data-slot=field]]:has-disabled:cursor-not-allowed *:data-[slot=field]:px-4 *:data-[slot=field]:py-3 has-disabled:**:data-[slot=field-content]:opacity-45', className )} {...restProps} > {@render children?.()} + {#if optional} + {m.field_optional()} + {/if} diff --git a/frontend/src/lib/components/ui/field/field-legend.svelte b/frontend/src/lib/components/ui/field/field-legend.svelte index a81746d5..07f939ed 100644 --- a/frontend/src/lib/components/ui/field/field-legend.svelte +++ b/frontend/src/lib/components/ui/field/field-legend.svelte @@ -18,7 +18,7 @@ data-slot="field-legend" data-variant={variant} class={cn( - 'mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', + 'text-fg data-[variant=label]:text-control data-[variant=legend]:text-heading mb-3 data-[variant=label]:font-semibold', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/field/field-separator.svelte b/frontend/src/lib/components/ui/field/field-separator.svelte index 6947ef08..0947d3ab 100644 --- a/frontend/src/lib/components/ui/field/field-separator.svelte +++ b/frontend/src/lib/components/ui/field/field-separator.svelte @@ -20,13 +20,16 @@ bind:this={ref} data-slot="field-separator" data-content={hasContent} - class={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)} + class={cn( + 'text-caption relative -my-2 h-5 group-data-[variant=outline]/field-group:-mb-2', + className + )} {...restProps} > {#if children} {@render children()} diff --git a/frontend/src/lib/components/ui/field/field-title.svelte b/frontend/src/lib/components/ui/field/field-title.svelte index 82821c12..ed71a410 100644 --- a/frontend/src/lib/components/ui/field/field-title.svelte +++ b/frontend/src/lib/components/ui/field/field-title.svelte @@ -14,7 +14,7 @@ bind:this={ref} data-slot="field-label" class={cn( - 'flex w-fit items-center gap-2 text-sm leading-snug leading-snug font-medium group-data-[disabled=true]/field:opacity-50', + 'text-control text-fg flex w-fit items-center gap-2 font-medium group-data-[disabled=true]/field:opacity-45', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/field/field.svelte b/frontend/src/lib/components/ui/field/field.svelte index 59219c77..2b8d8934 100644 --- a/frontend/src/lib/components/ui/field/field.svelte +++ b/frontend/src/lib/components/ui/field/field.svelte @@ -2,14 +2,14 @@ import { tv, type VariantProps } from 'tailwind-variants'; export const fieldVariants = tv({ - base: 'data-[invalid=true]:text-destructive gap-3 group/field flex w-full', + base: 'group/field flex w-full', variants: { orientation: { - vertical: 'cn-field-orientation-vertical flex-col [&>*]:w-full [&>.sr-only]:w-auto', + vertical: 'flex-col gap-1.5 [&>*]:w-full [&>.sr-only]:w-auto', horizontal: - 'cn-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px', + 'flex-row items-center gap-3 has-[>[data-slot=field-content]]:items-start [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px', responsive: - 'cn-field-orientation-responsive flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px' + 'flex-col gap-1.5 @md/field-group:flex-row @md/field-group:items-center @md/field-group:gap-3 @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px' } }, defaultVariants: { diff --git a/frontend/src/lib/components/ui/input-group/input-group-addon.svelte b/frontend/src/lib/components/ui/input-group/input-group-addon.svelte index 466f88f6..bc111370 100644 --- a/frontend/src/lib/components/ui/input-group/input-group-addon.svelte +++ b/frontend/src/lib/components/ui/input-group/input-group-addon.svelte @@ -1,15 +1,13 @@ - diff --git a/frontend/src/lib/components/ui/input-group/input-group-text.svelte b/frontend/src/lib/components/ui/input-group/input-group-text.svelte index 7204b3f3..b2590fd9 100644 --- a/frontend/src/lib/components/ui/input-group/input-group-text.svelte +++ b/frontend/src/lib/components/ui/input-group/input-group-text.svelte @@ -13,7 +13,7 @@ - import { cn } from '#lib/utils/style.js'; - import { Textarea } from '#lib/components/ui/textarea/index.js'; - import type { ComponentProps } from 'svelte'; + import { cn, type WithElementRef, type WithoutChildren } from '#lib/utils/style.js'; + import type { HTMLTextareaAttributes } from 'svelte/elements'; let { ref = $bindable(null), value = $bindable(), class: className, - ...props - }: ComponentProps = $props(); + ...restProps + }: WithoutChildren> = $props(); - diff --git a/frontend/src/lib/components/ui/input-group/input-group.svelte b/frontend/src/lib/components/ui/input-group/input-group.svelte index 357a89e1..e6c4618d 100644 --- a/frontend/src/lib/components/ui/input-group/input-group.svelte +++ b/frontend/src/lib/components/ui/input-group/input-group.svelte @@ -15,7 +15,7 @@ data-slot="input-group" role="group" class={cn( - 'group/input-group bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-9 w-full min-w-0 items-center rounded-4xl border border-transparent transition-[color,box-shadow,background-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-3xl has-data-[align=block-start]:rounded-3xl has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[textarea]:rounded-2xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5', + 'group/input-group bg-fill-muted text-fg ring-ring-halo hover:bg-fill-hover has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:bg-surface has-[[data-slot][aria-invalid=true]]:border-danger-solid has-[[data-slot][aria-invalid=true]]:ring-danger-solid/20 dark:border-fg/10 dark:bg-fg/6 dark:hover:bg-fg/9 dark:has-[[data-slot=input-group-control]:focus-visible]:border-ring dark:has-[[data-slot=input-group-control]:focus-visible]:bg-fg/7 dark:has-[[data-slot][aria-invalid=true]]:border-danger-solid relative flex h-(--h-md) w-full min-w-0 items-center rounded-sm border border-transparent has-[[data-slot=input-group-control]:focus-visible]:ring-(length:--halo-width) has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=inline-end]]:[&>input]:pr-2.5 has-[>[data-align=inline-start]]:[&>input]:pl-2.5', className )} {...props} diff --git a/frontend/src/lib/components/ui/input-otp/input-otp-group.svelte b/frontend/src/lib/components/ui/input-otp/input-otp-group.svelte index eae49d93..64a4da18 100644 --- a/frontend/src/lib/components/ui/input-otp/input-otp-group.svelte +++ b/frontend/src/lib/components/ui/input-otp/input-otp-group.svelte @@ -14,7 +14,7 @@ bind:this={ref} data-slot="input-otp-group" class={cn( - 'has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center gap-1.5 rounded-3xl has-aria-invalid:ring-3', + 'bg-surface relative flex min-w-0 flex-1 overflow-hidden rounded-sm after:pointer-events-none after:absolute after:inset-0 after:z-1 after:rounded-[inherit] after:shadow-[inset_0_0_0_1px_var(--border-control)]', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/input-otp/input-otp-separator.svelte b/frontend/src/lib/components/ui/input-otp/input-otp-separator.svelte index 13105c38..69b0b574 100644 --- a/frontend/src/lib/components/ui/input-otp/input-otp-separator.svelte +++ b/frontend/src/lib/components/ui/input-otp/input-otp-separator.svelte @@ -16,7 +16,10 @@ bind:this={ref} data-slot="input-otp-separator" role="separator" - class={cn("flex items-center [&_svg:not([class*='size-'])]:size-4", className)} + class={cn( + "text-fg-muted flex w-7 shrink-0 items-center justify-center [&_svg:not([class*='size-'])]:size-3", + className + )} {...restProps} > {#if children} diff --git a/frontend/src/lib/components/ui/input-otp/input-otp-slot.svelte b/frontend/src/lib/components/ui/input-otp/input-otp-slot.svelte index b9f553a0..19714908 100644 --- a/frontend/src/lib/components/ui/input-otp/input-otp-slot.svelte +++ b/frontend/src/lib/components/ui/input-otp/input-otp-slot.svelte @@ -15,17 +15,15 @@ bind:ref data-slot="input-otp-slot" class={cn( - 'bg-input/50 border-input data-active:border-ring data-active:ring-ring/30 data-active:aria-invalid:ring-destructive/20 dark:data-active:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative flex h-13 w-10 items-center justify-center rounded-sm border text-sm transition-all outline-none data-active:z-10 data-active:ring-3', + 'text-code-cell text-fg before:bg-danger-soft aria-invalid:text-danger-fg relative isolate grid h-18 max-w-14 min-w-[30px] flex-1 place-items-center font-mono uppercase tabular-nums before:absolute before:inset-0 before:-z-1 before:opacity-0 before:transition-opacity before:duration-(--dur-fast) before:ease-out after:pointer-events-none after:absolute after:inset-0 after:opacity-0 after:shadow-[inset_0_0_0_1px_var(--ring),inset_0_0_0_calc(1px+var(--halo-width))_var(--ring-halo)] first:after:rounded-l-sm last:after:rounded-r-sm aria-invalid:before:opacity-100 data-active:z-2 data-active:after:opacity-100 [&+&]:shadow-[inset_1px_0_0_var(--border-strong)]', className )} {...restProps} > {cell.char} {#if cell.hasFakeCaret} -
-
+
+
{/if} diff --git a/frontend/src/lib/components/ui/input-otp/input-otp.svelte b/frontend/src/lib/components/ui/input-otp/input-otp.svelte index 4f0c1ab7..d24ec5d3 100644 --- a/frontend/src/lib/components/ui/input-otp/input-otp.svelte +++ b/frontend/src/lib/components/ui/input-otp/input-otp.svelte @@ -19,7 +19,7 @@ data-lpignore="true" data-1p-ignore="true" class={cn( - 'cn-input-otp-input flex items-center gap-2 disabled:cursor-not-allowed has-disabled:opacity-50', + 'flex w-full items-center disabled:cursor-not-allowed has-disabled:opacity-45', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/input/index.ts b/frontend/src/lib/components/ui/input/index.ts index ef216d22..8bf2ffa7 100644 --- a/frontend/src/lib/components/ui/input/index.ts +++ b/frontend/src/lib/components/ui/input/index.ts @@ -1,4 +1,4 @@ -import Root from './input.svelte'; +import Root, { filledFieldClass, readOnlyFieldClass } from './input.svelte'; export type FormInputEvent = T & { currentTarget: EventTarget & HTMLInputElement; @@ -6,6 +6,8 @@ export type FormInputEvent = T & { export { Root, + filledFieldClass, + readOnlyFieldClass, // Root as Input }; diff --git a/frontend/src/lib/components/ui/input/input.svelte b/frontend/src/lib/components/ui/input/input.svelte index 00b9cc49..19838f47 100644 --- a/frontend/src/lib/components/ui/input/input.svelte +++ b/frontend/src/lib/components/ui/input/input.svelte @@ -1,3 +1,14 @@ + + {#if type === 'file'} {:else} - + {/if} diff --git a/frontend/src/lib/components/ui/item/item-content.svelte b/frontend/src/lib/components/ui/item/item-content.svelte index 82203c72..f26632e3 100644 --- a/frontend/src/lib/components/ui/item/item-content.svelte +++ b/frontend/src/lib/components/ui/item/item-content.svelte @@ -14,7 +14,7 @@ bind:this={ref} data-slot="item-content" class={cn( - 'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none', + 'flex flex-1 flex-col gap-0.5 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/item/item-description.svelte b/frontend/src/lib/components/ui/item/item-description.svelte index caf571b9..6f830036 100644 --- a/frontend/src/lib/components/ui/item/item-description.svelte +++ b/frontend/src/lib/components/ui/item/item-description.svelte @@ -14,7 +14,7 @@ bind:this={ref} data-slot="item-description" class={cn( - 'text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm font-normal [&>a]:underline [&>a]:underline-offset-4', + 'text-caption text-fg-muted [&>a:hover]:text-fg line-clamp-2 text-left [&>a]:underline [&>a]:underline-offset-4', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/item/item-media.svelte b/frontend/src/lib/components/ui/item/item-media.svelte index e41643c3..40664d4b 100644 --- a/frontend/src/lib/components/ui/item/item-media.svelte +++ b/frontend/src/lib/components/ui/item/item-media.svelte @@ -8,7 +8,7 @@ default: 'bg-transparent', icon: "[&_svg:not([class*='size-'])]:size-4", image: - 'size-10 overflow-hidden rounded-xl group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-lg [&_img]:size-full [&_img]:object-cover' + 'size-10 overflow-hidden rounded-md group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-xs [&_img]:size-full [&_img]:object-cover' } }, defaultVariants: { diff --git a/frontend/src/lib/components/ui/item/item-title.svelte b/frontend/src/lib/components/ui/item/item-title.svelte index a106f550..6a35161c 100644 --- a/frontend/src/lib/components/ui/item/item-title.svelte +++ b/frontend/src/lib/components/ui/item/item-title.svelte @@ -14,7 +14,7 @@ bind:this={ref} data-slot="item-title" class={cn( - 'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-semibold underline-offset-4', + 'text-heading line-clamp-1 flex w-fit items-center gap-2 underline-offset-4', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/item/item.svelte b/frontend/src/lib/components/ui/item/item.svelte index 950e686e..907c7b56 100644 --- a/frontend/src/lib/components/ui/item/item.svelte +++ b/frontend/src/lib/components/ui/item/item.svelte @@ -2,19 +2,18 @@ import { tv, type VariantProps } from 'tailwind-variants'; export const itemVariants = tv({ - base: '[a]:hover:bg-muted rounded-2xl border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors', + base: 'group/item flex w-full flex-wrap items-center rounded-md border text-control transition-colors duration-(--dur-fast) outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [a]:hover:bg-fill-row-hover', variants: { variant: { default: 'border-transparent', - outline: 'border-border', - muted: 'bg-muted/50 border-transparent', - card: 'bg-card shadow-sm border-transparent', - transparent: 'bg-transparent border-transparent' + outline: 'border-border bg-surface', + card: 'border-border bg-surface', + transparent: 'border-transparent bg-transparent' }, size: { - default: 'gap-3.5 px-4 py-3.5', - sm: 'gap-3.5 px-3.5 py-3', - xs: 'gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0' + default: 'gap-4 px-4 py-3', + sm: 'gap-3 px-3 py-2.5', + xs: 'gap-2.5 px-3 py-2 in-data-[slot=dropdown-menu-content]:p-0' } }, defaultVariants: { diff --git a/frontend/src/lib/components/ui/label/label.svelte b/frontend/src/lib/components/ui/label/label.svelte index a0127b53..ac87105a 100644 --- a/frontend/src/lib/components/ui/label/label.svelte +++ b/frontend/src/lib/components/ui/label/label.svelte @@ -14,7 +14,7 @@ bind:ref data-slot="label" class={cn( - 'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', + 'text-control text-fg flex items-center gap-2 font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-45 peer-disabled:cursor-not-allowed peer-disabled:opacity-45', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte index b7fd5e2b..ada668ed 100644 --- a/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte +++ b/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte @@ -15,7 +15,7 @@ aria-hidden="true" data-slot="pagination-ellipsis" class={cn( - "flex size-9 items-center items-center justify-center justify-center [&_svg:not([class*='size-'])]:size-4", + "text-fg-muted flex size-(--h-sm) items-center justify-center [&_svg:not([class*='size-'])]:size-4", className )} {...restProps} diff --git a/frontend/src/lib/components/ui/pagination/pagination-link.svelte b/frontend/src/lib/components/ui/pagination/pagination-link.svelte index 34a004b9..3726ad04 100644 --- a/frontend/src/lib/components/ui/pagination/pagination-link.svelte +++ b/frontend/src/lib/components/ui/pagination/pagination-link.svelte @@ -5,7 +5,7 @@ let { ref = $bindable(null), class: className, - size = 'icon', + size = 'icon-sm', isActive, page, children, @@ -28,8 +28,8 @@ data-active={isActive} data-size={size} class={cn( - buttonVariants({ size, variant: isActive ? 'outline' : 'ghost' }), - 'cn-pagination-link', + buttonVariants({ size, variant: isActive ? 'secondary' : 'ghost' }), + 'tabular-nums', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte b/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte index 3075ce86..b1e1a108 100644 --- a/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte +++ b/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte @@ -13,14 +13,14 @@ {#snippet Fallback()} - Next - + Next + {/snippet} {#if children} diff --git a/frontend/src/lib/components/ui/pagination/pagination-next.svelte b/frontend/src/lib/components/ui/pagination/pagination-next.svelte index fa28b95c..458dbb97 100644 --- a/frontend/src/lib/components/ui/pagination/pagination-next.svelte +++ b/frontend/src/lib/components/ui/pagination/pagination-next.svelte @@ -14,9 +14,9 @@ - + Next diff --git a/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte b/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte index 6ac5d2d2..f1f37165 100644 --- a/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte +++ b/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte @@ -13,14 +13,14 @@ {#snippet Fallback()} - - Previous + + Previous {/snippet} {#if children} diff --git a/frontend/src/lib/components/ui/pagination/pagination-previous.svelte b/frontend/src/lib/components/ui/pagination/pagination-previous.svelte index 681c85d0..b2049170 100644 --- a/frontend/src/lib/components/ui/pagination/pagination-previous.svelte +++ b/frontend/src/lib/components/ui/pagination/pagination-previous.svelte @@ -14,9 +14,9 @@ - + Previous diff --git a/frontend/src/lib/components/ui/pagination/pagination.svelte b/frontend/src/lib/components/ui/pagination/pagination.svelte index f495121d..12a02e0f 100644 --- a/frontend/src/lib/components/ui/pagination/pagination.svelte +++ b/frontend/src/lib/components/ui/pagination/pagination.svelte @@ -23,6 +23,6 @@ {count} {perPage} {siblingCount} - class={cn('cn-pagination mx-auto flex w-full justify-center', className)} + class={cn('mx-auto flex w-full justify-center', className)} {...restProps} /> diff --git a/frontend/src/lib/components/ui/popover/popover-content.svelte b/frontend/src/lib/components/ui/popover/popover-content.svelte index 0cc85f96..24f985dc 100644 --- a/frontend/src/lib/components/ui/popover/popover-content.svelte +++ b/frontend/src/lib/components/ui/popover/popover-content.svelte @@ -25,7 +25,7 @@ {sideOffset} {align} class={cn( - 'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-3xl p-4 text-sm shadow-lg ring-1 outline-hidden duration-100', + 'bg-popover text-popover-foreground border-border shadow-popover transition-motion has-data-[slot=command]:bg-popover/72 has-data-[slot=command]:border-fg/6 dark:has-data-[slot=command]:border-fg/10 [@media(prefers-reduced-transparency:reduce)]:bg-popover! z-(--z-popover) flex w-72 origin-(--bits-popover-content-transform-origin) flex-col gap-4 rounded-md border p-3 outline-hidden duration-(--dur-base) has-data-[slot=command]:backdrop-blur-[40px] has-data-[slot=command]:backdrop-saturate-150 data-closed:pointer-events-none data-closed:opacity-0 data-closed:duration-(--dur-fast) data-closed:ease-in starting:scale-(--pop-scale) starting:opacity-0 [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none!', sameWidth && 'w-(--bits-popover-anchor-width)', className )} diff --git a/frontend/src/lib/components/ui/popover/popover-description.svelte b/frontend/src/lib/components/ui/popover/popover-description.svelte index a809eb85..605a533d 100644 --- a/frontend/src/lib/components/ui/popover/popover-description.svelte +++ b/frontend/src/lib/components/ui/popover/popover-description.svelte @@ -13,7 +13,7 @@
{@render children?.()} diff --git a/frontend/src/lib/components/ui/popover/popover-header.svelte b/frontend/src/lib/components/ui/popover/popover-header.svelte index d7d15e0a..61c2882e 100644 --- a/frontend/src/lib/components/ui/popover/popover-header.svelte +++ b/frontend/src/lib/components/ui/popover/popover-header.svelte @@ -13,7 +13,7 @@
{@render children?.()} diff --git a/frontend/src/lib/components/ui/popover/popover-title.svelte b/frontend/src/lib/components/ui/popover/popover-title.svelte index b1b380c4..0fcdf00c 100644 --- a/frontend/src/lib/components/ui/popover/popover-title.svelte +++ b/frontend/src/lib/components/ui/popover/popover-title.svelte @@ -13,7 +13,7 @@
{@render children?.()} diff --git a/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte b/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte index 061e5c13..1c9223e8 100644 --- a/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte +++ b/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte @@ -1,6 +1,5 @@ + {#snippet loadingIcon()} - + {/snippet} {#snippet successIcon()} - + {/snippet} {#snippet errorIcon()} - + {/snippet} {#snippet infoIcon()} - + {/snippet} {#snippet warningIcon()} - + {/snippet} diff --git a/frontend/src/lib/components/ui/spinner/spinner.svelte b/frontend/src/lib/components/ui/spinner/spinner.svelte index 09f6025e..772ea6b4 100644 --- a/frontend/src/lib/components/ui/spinner/spinner.svelte +++ b/frontend/src/lib/components/ui/spinner/spinner.svelte @@ -1,14 +1,26 @@ - + +> + + diff --git a/frontend/src/lib/components/ui/switch/switch.svelte b/frontend/src/lib/components/ui/switch/switch.svelte index 2d56f705..d0ff7b02 100644 --- a/frontend/src/lib/components/ui/switch/switch.svelte +++ b/frontend/src/lib/components/ui/switch/switch.svelte @@ -6,26 +6,23 @@ ref = $bindable(null), class: className, checked = $bindable(false), - size = 'default', ...restProps - }: WithoutChildrenOrChild & { - size?: 'sm' | 'default'; - } = $props(); + }: WithoutChildrenOrChild = $props(); + diff --git a/frontend/src/lib/components/ui/table/table-body.svelte b/frontend/src/lib/components/ui/table/table-body.svelte index dbca9db1..548733eb 100644 --- a/frontend/src/lib/components/ui/table/table-body.svelte +++ b/frontend/src/lib/components/ui/table/table-body.svelte @@ -1,5 +1,5 @@ - + {@render children?.()} diff --git a/frontend/src/lib/components/ui/table/table-caption.svelte b/frontend/src/lib/components/ui/table/table-caption.svelte index 5f488944..f6c922ad 100644 --- a/frontend/src/lib/components/ui/table/table-caption.svelte +++ b/frontend/src/lib/components/ui/table/table-caption.svelte @@ -13,7 +13,7 @@ {@render children?.()} diff --git a/frontend/src/lib/components/ui/table/table-cell.svelte b/frontend/src/lib/components/ui/table/table-cell.svelte index 810c67cc..3d2a7779 100644 --- a/frontend/src/lib/components/ui/table/table-cell.svelte +++ b/frontend/src/lib/components/ui/table/table-cell.svelte @@ -13,7 +13,10 @@ {@render children?.()} diff --git a/frontend/src/lib/components/ui/table/table-footer.svelte b/frontend/src/lib/components/ui/table/table-footer.svelte index b7472fee..44da24d8 100644 --- a/frontend/src/lib/components/ui/table/table-footer.svelte +++ b/frontend/src/lib/components/ui/table/table-footer.svelte @@ -13,7 +13,7 @@ tr]:last:border-b-0', className)} + class={cn('bg-surface-sunken border-t font-medium [&>tr]:last:border-b-0', className)} {...restProps} > {@render children?.()} diff --git a/frontend/src/lib/components/ui/table/table-head.svelte b/frontend/src/lib/components/ui/table/table-head.svelte index 7325e969..0d96ec89 100644 --- a/frontend/src/lib/components/ui/table/table-head.svelte +++ b/frontend/src/lib/components/ui/table/table-head.svelte @@ -15,7 +15,7 @@ data-slot="table-head" scope="col" class={cn( - 'text-foreground h-12 px-3 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0', + 'bg-surface-sunken text-caption text-fg-muted h-10 px-4 text-left align-middle font-medium whitespace-nowrap first:rounded-l-sm last:rounded-r-sm [&:has([role=checkbox])]:pr-0', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/table/table-header.svelte b/frontend/src/lib/components/ui/table/table-header.svelte index c8aeceb8..a76e5ae8 100644 --- a/frontend/src/lib/components/ui/table/table-header.svelte +++ b/frontend/src/lib/components/ui/table/table-header.svelte @@ -1,5 +1,5 @@ - + {@render children?.()} diff --git a/frontend/src/lib/components/ui/table/table-row.svelte b/frontend/src/lib/components/ui/table/table-row.svelte index 92b92238..8bcb965d 100644 --- a/frontend/src/lib/components/ui/table/table-row.svelte +++ b/frontend/src/lib/components/ui/table/table-row.svelte @@ -14,7 +14,7 @@ bind:this={ref} data-slot="table-row" class={cn( - 'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', + 'in-[tbody]:hover:bg-fill-row-hover in-[tbody]:has-focus-visible:bg-fill-row-hover data-[state=selected]:bg-fill-muted border-b transition-colors duration-(--dur-fast) in-[thead]:border-b-0', className )} {...restProps} diff --git a/frontend/src/lib/components/ui/table/table.svelte b/frontend/src/lib/components/ui/table/table.svelte index 1ba6cd71..a4e7af4b 100644 --- a/frontend/src/lib/components/ui/table/table.svelte +++ b/frontend/src/lib/components/ui/table/table.svelte @@ -10,11 +10,12 @@ }: WithElementRef = $props(); -
+ +
{@render children?.()} diff --git a/frontend/src/lib/components/ui/tabs/tabs-content.svelte b/frontend/src/lib/components/ui/tabs/tabs-content.svelte index 0f592422..5397f4b3 100644 --- a/frontend/src/lib/components/ui/tabs/tabs-content.svelte +++ b/frontend/src/lib/components/ui/tabs/tabs-content.svelte @@ -12,6 +12,6 @@ diff --git a/frontend/src/lib/components/ui/tabs/tabs-list.svelte b/frontend/src/lib/components/ui/tabs/tabs-list.svelte index a00ee70a..48e57c6f 100644 --- a/frontend/src/lib/components/ui/tabs/tabs-list.svelte +++ b/frontend/src/lib/components/ui/tabs/tabs-list.svelte @@ -2,11 +2,11 @@ import { tv, type VariantProps } from 'tailwind-variants'; export const tabsListVariants = tv({ - base: 'rounded-full p-1 group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col', + base: 'group/tabs-list relative isolate flex w-fit items-center group-data-[orientation=vertical]/tabs:flex-col', variants: { variant: { - default: 'cn-tabs-list-variant-default bg-muted', - line: 'cn-tabs-list-variant-line gap-1 bg-transparent' + default: 'gap-1', + line: 'w-full gap-6 shadow-[inset_0_-1px_0_var(--border)]' } }, defaultVariants: { @@ -18,7 +18,6 @@ @@ -13,10 +14,24 @@ bind:ref data-slot="tabs-trigger" class={cn( - "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 rounded-full border border-transparent! px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:rounded-2xl group-data-vertical/tabs:px-3 group-data-vertical/tabs:py-1.5 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", - 'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent', - 'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground', + "group/tabs-trigger text-control text-fg-muted hover:text-fg focus-visible:outline-ring data-[state=active]:text-fg relative inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-colors duration-(--dur-fast) focus-visible:outline-2 disabled:pointer-events-none disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", + 'group-data-[variant=default]/tabs-list:h-(--h-sm) group-data-[variant=default]/tabs-list:rounded-sm group-data-[variant=default]/tabs-list:px-3 group-data-[variant=default]/tabs-list:focus-visible:outline-offset-2 group-data-[variant=default]/tabs-list:data-[state=active]:font-medium', + 'group-data-[variant=line]/tabs-list:h-11 group-data-[variant=line]/tabs-list:rounded-xs group-data-[variant=line]/tabs-list:px-0.5 group-data-[variant=line]/tabs-list:font-medium group-data-[variant=line]/tabs-list:focus-visible:-outline-offset-2', + 'group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start', className )} {...restProps} -/> +> + + + + + {@render children?.()} + + + diff --git a/frontend/src/lib/components/ui/tabs/tabs.svelte b/frontend/src/lib/components/ui/tabs/tabs.svelte index 3abf85f0..d5e26077 100644 --- a/frontend/src/lib/components/ui/tabs/tabs.svelte +++ b/frontend/src/lib/components/ui/tabs/tabs.svelte @@ -15,9 +15,11 @@ } = $props(); // Follows the hash on load and on later hash changes, so that links like `#credentials` elsewhere on the page can switch the tab + // Tab changes write the hash with a shallow goto, so when Back restores such an entry page.url has no hash and the browser's own hash is the fallback $effect(() => { - if (useHash && page.url.hash) { - value = page.url.hash.substring(1); + const hash = page.url.hash || location.hash; + if (useHash && hash) { + value = hash.substring(1); } }); diff --git a/frontend/src/lib/components/ui/textarea/textarea.svelte b/frontend/src/lib/components/ui/textarea/textarea.svelte index ba0f718c..8abc68fc 100644 --- a/frontend/src/lib/components/ui/textarea/textarea.svelte +++ b/frontend/src/lib/components/ui/textarea/textarea.svelte @@ -1,4 +1,5 @@ +