diff --git a/frontend/viewer/src/app.css b/frontend/viewer/src/app.css index 14a7afe7a9..89d7e76ca0 100644 --- a/frontend/viewer/src/app.css +++ b/frontend/viewer/src/app.css @@ -15,7 +15,7 @@ @utility animate-shimmer { animation: shimmer 2s linear infinite; - background-image: linear-gradient(90deg, hsl(var(--muted-foreground)/0.2) 20%, hsl(var(--foreground)/0.3) 50%, hsl(var(--muted-foreground)/0.2) 65%); + background-image: linear-gradient(90deg, oklch(from var(--muted-foreground) l c h / 0.2) 20%, oklch(from var(--foreground) l c h / 0.3) 50%, oklch(from var(--muted-foreground) l c h / 0.2) 65%); background-size: 200% 100%; background-repeat: repeat; } @@ -35,7 +35,9 @@ @layer base { /* shadcn generated styles */ * { - @apply border-border; + @apply border-border outline-ring/50; + /* EDIT: Fixes dark mode gets "outline-style: none" which results in white (browser bug?) */ + @apply focus-visible:outline-solid; } .app { @apply bg-background text-foreground; diff --git a/frontend/viewer/src/home/AppBar.svelte b/frontend/viewer/src/home/AppBar.svelte index 7b0a8dcec9..b2bb0d3dff 100644 --- a/frontend/viewer/src/home/AppBar.svelte +++ b/frontend/viewer/src/home/AppBar.svelte @@ -29,7 +29,7 @@ linear-gradient is just a way to use a solid color and work around: "Only the last background can include a background color." See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds */ - linear-gradient(hsl(var(--primary) / 0.4)), - hsl(var(--background)); + linear-gradient(oklch(from var(--primary) l c h / 0.4)), + var(--background); } diff --git a/frontend/viewer/src/home/HomeView.svelte b/frontend/viewer/src/home/HomeView.svelte index 5865866444..c9ece430e9 100644 --- a/frontend/viewer/src/home/HomeView.svelte +++ b/frontend/viewer/src/home/HomeView.svelte @@ -138,7 +138,7 @@ diff --git a/frontend/viewer/src/lib/components/ui/button/button.svelte b/frontend/viewer/src/lib/components/ui/button/button.svelte index 4f066e2211..bb9cf0005d 100644 --- a/frontend/viewer/src/lib/components/ui/button/button.svelte +++ b/frontend/viewer/src/lib/components/ui/button/button.svelte @@ -9,14 +9,15 @@ import Anchor from '../anchor/anchor.svelte'; export const buttonVariants = tv({ - base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:[&:not(.loading)]:opacity-50 aria-disabled:pointer-events-none aria-disabled:[&:not(.loading)]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + base: "focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:[&:not(.loading)]:opacity-50 aria-disabled:pointer-events-none aria-disabled:[&:not(.loading)]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs', destructive: 'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs', + /* all border classes have been moved here, because they were/are the only variant that actually uses them */ outline: - 'bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs', + 'bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 focus-visible:border-ring border border-input aria-invalid:border-destructive dark:hover:bg-input/50 shadow-xs', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', diff --git a/frontend/viewer/src/lib/components/ui/input/composable-input.svelte b/frontend/viewer/src/lib/components/ui/input/composable-input.svelte index 418aa0883d..b919967355 100644 --- a/frontend/viewer/src/lib/components/ui/input/composable-input.svelte +++ b/frontend/viewer/src/lib/components/ui/input/composable-input.svelte @@ -32,11 +32,9 @@ const stringPlaceholder = $derived(typeof placeholder === 'string' ? placeholder : undefined); const snippetPlaceholder = $derived(typeof placeholder === 'function' ? placeholder : undefined); - const focusRingClass = - 'has-[.real-input:focus-visible]:ring-ring has-[.real-input:focus-visible]:outline-none has-[.real-input:focus-visible]:ring-2 has-[.real-input:focus-visible]:ring-offset-2'; - + {@render before?.()}
> { - focusRingClass?: string; - } - - const anyChildHasFocusRing = 'ring-ring outline-none ring-offset-2 has-focus-visible:ring-2'; - let { ref = $bindable(null), class: className, - focusRingClass = anyChildHasFocusRing, children, ...restProps - }: Props = $props(); + }: WithElementRef> = $props(); -
+
{@render children?.()}
diff --git a/frontend/viewer/src/lib/components/ui/input/input.svelte b/frontend/viewer/src/lib/components/ui/input/input.svelte index 67b5000c77..bdb4aabcdc 100644 --- a/frontend/viewer/src/lib/components/ui/input/input.svelte +++ b/frontend/viewer/src/lib/components/ui/input/input.svelte @@ -17,10 +17,14 @@ 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', ), - ghost: 'outline-none min-w-0 bg-transparent', - // shell variant has a dedicated component - shell: - 'border-input bg-background ring-offset-background placeholder:text-muted-foreground flex h-10 w-full rounded-md border text-base has-disabled:cursor-not-allowed has-disabled:opacity-50 md:text-sm flex gap-2 items-center justify-between', + ghost: 'outline-none min-w-0 bg-transparent selection:bg-primary selection:text-primary-foreground', + // shell variant has a dedicated component. Users should apply the class "real-input" to a wrapped to enable focus styles on the shell. + shell: cn( + 'border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-10 w-full min-w-0 rounded-md border text-base shadow-xs transition-[color,box-shadow] outline-none has-disabled:cursor-not-allowed has-disabled:opacity-50 md:text-sm', + 'flex gap-2 items-center justify-between', + 'has-[.real-input:focus-visible]:border-ring has-[.real-input:focus-visible]:ring-ring/50 has-[.real-input:focus-visible]:ring-[3px]', + 'has-[.real-input:aria-invalid]:ring-destructive/20 dark:has-[.real-input:aria-invalid]:ring-destructive/40 has-[.real-input:aria-invalid]:border-destructive', + ), }, visibleFocus: { off: '', diff --git a/frontend/viewer/src/project/ProjectSidebar.svelte b/frontend/viewer/src/project/ProjectSidebar.svelte index 3c1eea0ed8..ef696c5e81 100644 --- a/frontend/viewer/src/project/ProjectSidebar.svelte +++ b/frontend/viewer/src/project/ProjectSidebar.svelte @@ -76,7 +76,7 @@ - +
{@render primaryAction.snippet?.(sidebar?.isOpen())} diff --git a/frontend/viewer/src/project/browse/EntryView.svelte b/frontend/viewer/src/project/browse/EntryView.svelte index dc037228a5..fb94a4994c 100644 --- a/frontend/viewer/src/project/browse/EntryView.svelte +++ b/frontend/viewer/src/project/browse/EntryView.svelte @@ -156,7 +156,7 @@ {@render preview(entry)}
{/if} -
+
diff --git a/frontend/viewer/src/project/browse/sort/SortMenu.svelte b/frontend/viewer/src/project/browse/sort/SortMenu.svelte index faa23688bd..e69f25265b 100644 --- a/frontend/viewer/src/project/browse/sort/SortMenu.svelte +++ b/frontend/viewer/src/project/browse/sort/SortMenu.svelte @@ -20,12 +20,13 @@ - + {#snippet child({props})}