Skip to content

upgrade to tailwind 4 #430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Feb 26, 2025
Merged

upgrade to tailwind 4 #430

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3109320
@config "../tailwind.config.js";
ken-zlai Feb 25, 2025
30bbaab
upgrade to tailwind 4
ken-zlai Feb 25, 2025
49bdccb
npm run format
ken-zlai Feb 25, 2025
7d9705a
explicitly list safelist things
ken-zlai Feb 25, 2025
6a7d530
Merge branch 'main' into ken/tailwind-4
ken-zlai Feb 25, 2025
0b5e3ad
cursor-pointer
ken-zlai Feb 25, 2025
200b6df
Revert "cursor-pointer"
ken-zlai Feb 25, 2025
5f23999
Merge branch 'main' into ken/tailwind-4
ken-zlai Feb 26, 2025
0f628cd
npm install
ken-zlai Feb 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,010 changes: 805 additions & 205 deletions frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@sveltejs/adapter-static": "^3.0.8",
"@sveltejs/kit": "^2.17.2",
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@tailwindcss/postcss": "^4.0.8",
"@tailwindcss/typography": "^0.5.15",
"@types/d3": "^7.4.3",
"@types/eslint": "^9.6.1",
Expand All @@ -51,7 +52,7 @@
"svelte-intersection-observer": "^1.0.0",
"svelte-radix": "^1.1.1",
"sveltekit-search-params": "^4.0.0-next.0",
"tailwindcss": "^3.4.17",
"tailwindcss": "^4.0.8",
"typescript": "^5.7.3",
"typescript-eslint": "^8.24.1",
"unplugin-icons": "^22.1.0",
Expand Down
8 changes: 4 additions & 4 deletions frontend/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import tailwindcss from '@tailwindcss/postcss';
import autoprefixer from 'autoprefixer';

export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
plugins: [tailwindcss, autoprefixer]
};
114 changes: 66 additions & 48 deletions frontend/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,42 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';

@config "../tailwind.config.js";

/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.

If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}

@utility content-auto {
content-visibility: auto;
}

@utility grid-stack {
& > * {
grid-area: 1 / 1;
}
}

@utility scrollbar-none {
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}

@layer base {
:root {
Expand Down Expand Up @@ -175,55 +211,37 @@
}
}

@font-face {
font-family: 'Geist';
src: url('/fonts/Geist-v1.4.01/webfonts/Geist[wght].woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Geist Mono';
src: url('/fonts/GeistMono-1.4.01/webfonts/GeistMono[wght].woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0030-0039; /* Digits 0-9 */
}

@font-face {
font-family: 'Inter';
src: url('/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Inter';
src: url('/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}

@layer utilities {
.content-auto {
content-visibility: auto;
@font-face {
font-family: 'Geist';
src: url('/fonts/Geist-v1.4.01/webfonts/Geist[wght].woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Geist Mono';
src: url('/fonts/GeistMono-1.4.01/webfonts/GeistMono[wght].woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0030-0039; /* Digits 0-9 */
}

.grid-stack {
& > * {
grid-area: 1 / 1;
}
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}

.scrollbar-none {
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
}
2 changes: 1 addition & 1 deletion frontend/src/lib/components/CollapsibleSection.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
<IconChevronDown
class="size-4 transition-transform duration-200 {open ? '' : '-rotate-90'}"
/>
<h2 class="{sizeClasses.title} !ml-2 select-text">{title}</h2>
<h2 class="{sizeClasses.title} ml-2! select-text">{title}</h2>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix important flag syntax.

The important flag is incorrectly placed after class name. In Tailwind, it should be before the utility.

-			<h2 class="{sizeClasses.title} ml-2! select-text">{title}</h2>
+			<h2 class="{sizeClasses.title} !ml-2 select-text">{title}</h2>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<h2 class="{sizeClasses.title} ml-2! select-text">{title}</h2>
<h2 class="{sizeClasses.title} !ml-2 select-text">{title}</h2>

</CollapsibleTrigger>
<div class="flex items-center justify-between flex-1 ml-2">
{#if headerContentLeft}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/lib/components/ExpandableCell.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
<div class="w-4">
{#if $canExpand}
<IconChevronDown
class="size-4 transition-transform duration-200 text-neutral-900 flex-shrink-0 {$isExpanded
class="size-4 transition-transform duration-200 text-neutral-900 shrink-0 {$isExpanded
? ''
: '-rotate-90'}"
/>
Expand All @@ -64,7 +64,7 @@
{#if Icon}
<div
style:--color={config.color}
class="bg-[hsl(var(--color)/5%)] text-[hsl(var(--color))] w-4 h-4 rounded flex items-center justify-center ml-2 flex-shrink-0"
class="bg-[hsl(var(--color)/5%)] text-[hsl(var(--color))] w-4 h-4 rounded flex items-center justify-center ml-2 shrink-0"
>
<Icon />
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/NavigationBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@
</Button>
<Separator class="my-[22px]" />
<span class="mb-[10px] px-2 text-xs-medium text-muted-icon-neutral">Datasets</span>
<ul class="space-y-[1px] flex-grow">
<ul class="space-y-[1px] grow">
{#each navItems as item}
<li>
<Button
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/SplitView.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
role="presentation"
></div>
<button
class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
onclick={() => (sidebarOpen = false)}
>
<IconXMark class="text-sm" />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/StatusCell.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
>
</p>
<div class="mt-4">
<Button variant="secondary" class="!text-small !text-neutral-800">
<Button variant="secondary" class="text-small! text-neutral-800!">
<IconArrowDownOnSquare16Solid class="mr-2 h-4 w-4" />
Download Logs
</Button>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/charts/FeaturesLineChart.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
{@const value = seriesTooltipData ? valueAccessor(seriesTooltipData) : null}

<button
class="col-span-full grid grid-cols-[1fr,auto] gap-6 hover:bg-neutral-400 py-2 px-3 rounded"
class="col-span-full grid grid-cols-[1fr_auto] gap-6 hover:bg-neutral-400 py-2 px-3 rounded"
onclick={() => onitemclick?.({ series: s, data: seriesTooltipData, value })}
onmouseenter={() => setHighlightSeriesKey(s.key)}
onmouseleave={() => setHighlightSeriesKey(null)}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/charts/TransformControls.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class={cn(
'bg-surface-100/50 border rounded-full m-1 backdrop-blur z-10 flex p-1',
'bg-surface-100/50 border rounded-full m-1 backdrop-blur-sm z-10 flex p-1',
orientation === 'vertical' && 'flex-col',
{
'top-left': 'absolute top-0 left-0',
Expand Down
7 changes: 4 additions & 3 deletions frontend/src/lib/components/ui/badge/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ import { type VariantProps, tv } from 'tailwind-variants';

export { default as Badge } from './badge.svelte';
export const badgeVariants = tv({
base: 'focus:ring-ring inline-flex select-none items-center rounded-md border border-neutral-500 px-2 py-0.5 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
base: 'focus:ring-ring inline-flex select-none items-center rounded-md border border-neutral-500 px-2 py-0.5 text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2',
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow',
default:
'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow-sm',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow',
'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow-sm',
outline: 'text-foreground',
key: '',
'key-bg': 'border-transparent bg-neutral-400',
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,6 @@
class={cn('flex h-9 w-9 items-center justify-center', className)}
{...$$restProps}
>
<DotsHorizontal class="h-4 w-4 outline-none" tabindex="-1" />
<DotsHorizontal class="h-4 w-4 outline-hidden" tabindex="-1" />
<span class="sr-only">More</span>
</span>
12 changes: 6 additions & 6 deletions frontend/src/lib/components/ui/button/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ import { type VariantProps, tv } from 'tailwind-variants';
import Root from './button.svelte';

const buttonVariants = tv({
base: 'focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-small font-regular-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',
base: 'focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-small font-regular-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',
variants: {
variant: {
default: 'bg-primary [&]:text-primary-foreground hover:bg-primary/90 shadow',
default: 'bg-primary [&]:text-primary-foreground hover:bg-primary/90 shadow-sm',
destructive:
'bg-destructive [&]:text-destructive-foreground hover:bg-destructive/90 shadow-sm',
'bg-destructive [&]:text-destructive-foreground hover:bg-destructive/90 shadow-xs',
outline:
'border-neutral-400 bg-transparent hover:bg-accent hover:text-accent-foreground border shadow-sm',
secondary: 'bg-secondary [&]:text-secondary-foreground hover:bg-secondary/80 shadow-sm',
secondaryAlt: 'bg-[#1D1D1F] [&]:text-secondary-foreground hover:bg-secondary/80 shadow-sm',
'border-neutral-400 bg-transparent hover:bg-accent hover:text-accent-foreground border shadow-xs',
secondary: 'bg-secondary [&]:text-secondary-foreground hover:bg-secondary/80 shadow-xs',
secondaryAlt: 'bg-[#1D1D1F] [&]:text-secondary-foreground hover:bg-secondary/80 shadow-xs',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: '[&]:text-primary underline-offset-4 hover:underline'
},
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/lib/components/ui/calendar/calendar-day.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@
// Today
'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
// Selected
'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100',
'data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary data-selected:hover:text-primary-foreground data-selected:focus:bg-primary data-selected:focus:text-primary-foreground data-selected:opacity-100',
// Disabled
'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
'data-disabled:text-muted-foreground data-disabled:opacity-50',
// Unavailable
'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
'data-unavailable:text-destructive-foreground data-unavailable:line-through',
// Outside months
'data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30',
'data-outside-month:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-outside-month:pointer-events-none data-outside-month:opacity-50 [&[data-outside-month][data-selected]]:opacity-30',
className
)}
{...$$restProps}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ui/checkbox/checkbox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<CheckboxPrimitive.Root
class={cn(
'border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content h-4 w-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
'border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content h-4 w-4 shrink-0 rounded-sm border shadow-sm focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
className
)}
bind:checked
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ui/command/command-dialog.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<Dialog.Root bind:open {...$$restProps}>
<Dialog.Content class="overflow-hidden p-0">
<Command
class="[&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
class="**:data-cmdk-group-heading:text-muted-foreground **:data-cmdk-group-heading:px-2 **:data-cmdk-group-heading:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 **:data-cmdk-group:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 **:data-cmdk-input:h-12 **:data-cmdk-item:px-2 **:data-cmdk-item:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
{...$$restProps}
bind:value
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ui/command/command-group.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<CommandPrimitive.Group
class={cn(
'text-foreground [&_[data-cmdk-group-heading]]:text-neutral-700 overflow-hidden !p-0 [&_[data-cmdk-group-heading]]:px-4 [&_[data-cmdk-group-heading]]:py-1 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:h-6 [&_[data-cmdk-group-heading]]:bg-neutral-300',
'text-foreground **:data-cmdk-group-heading:text-neutral-700 overflow-hidden p-0! **:data-cmdk-group-heading:px-4 **:data-cmdk-group-heading:py-1 **:data-cmdk-group-heading:text-xs **:data-cmdk-group-heading:font-medium **:data-cmdk-group-heading:h-6 **:data-cmdk-group-heading:bg-neutral-300',
className
)}
{...$$restProps}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ui/command/command-input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<MagnifyingGlass class="mr-2 h-4 w-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
class={cn(
'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-regular outline-none disabled:cursor-not-allowed disabled:opacity-50',
'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-regular outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
className
)}
{...$$restProps}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/lib/components/ui/command/command-item.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
<CommandPrimitive.Item
{asChild}
class={cn(
'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center !px-4 py-1.5 text-regular outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg:first-of-type]:mr-2 bg-neutral-200 h-10 [&:not(:last-child)]:border-b',
'data-[disabled]:cursor-default cursor-pointer',
'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center px-4! py-1.5 text-regular outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg:first-of-type]:mr-2 bg-neutral-200 h-10 not-last:border-b',
'data-disabled:cursor-default cursor-pointer',
className
)}
{...$$restProps}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ui/dialog/dialog-content.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
>
<slot />
<DialogPrimitive.Close
class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none border border-border p-2 hover:bg-muted"
class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none border border-border p-2 hover:bg-muted"
>
<Cross2 class="h-4 w-4" />
<span class="sr-only">Close</span>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@
<DialogPrimitive.Overlay
{transition}
{transitionConfig}
class={cn('bg-background/80 fixed inset-0 z-50 backdrop-blur-sm ', className)}
class={cn('bg-background/80 fixed inset-0 z-50 backdrop-blur-xs ', className)}
{...$$restProps}
/>
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<DropdownMenuPrimitive.CheckboxItem
bind:checked
class={cn(
'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50',
className
)}
{...$$restProps}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
{transitionConfig}
{sideOffset}
class={cn(
'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none',
'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-hidden',
className
)}
{...$$restProps}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<DropdownMenuPrimitive.Item
class={cn(
'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50',
inset && 'pl-8',
className
)}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

<DropdownMenuPrimitive.RadioItem
class={cn(
'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50',
className
)}
{value}
Expand Down
Loading