Skip to content

feat: Follow system theme #1205

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
dawsontoth merged 1 commit into from
May 21, 2026
Merged

feat: Follow system theme #1205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 11 additions & 0 deletions .claude/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"version": "0.0.1",
"configurations": [
{
"name": "studio",
"runtimeExecutable": "pnpm",
"runtimeArgs": ["run", "dev"],
"port": 5173
}
]
}
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="dark-mode">
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/HDBDogOnly.svg" />
Expand Down
4 changes: 2 additions & 2 deletions src/components/DataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData
});

return (
<div className="bg-black-dark rounded-md">
<div className="bg-card dark:bg-black-dark rounded-md">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
Expand All @@ -32,7 +32,7 @@ export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData
</TableRow>
))}
</TableHeader>
<TableBody className="bg-black">
<TableBody className="bg-background dark:bg-black">
{table.getRowModel().rows?.length
? (
table.getRowModel().rows.map((row) => (
Expand Down
2 changes: 1 addition & 1 deletion src/components/Loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ interface LoadingProps extends ComponentProps<'div'> {
export function Loading({ className, text, centered, ...props }: LoadingProps) {
const additionalClassName = centered ? 'flex flex-col items-center justify-center' : '';
return (
<div className={`text-white h-full w-full ${className || ''} ${additionalClassName}`} {...props}>
<div className={`text-foreground h-full w-full ${className || ''} ${additionalClassName}`} {...props}>
<img src="/HDBDogOnly.svg" width="100px" height="100px" alt="HDB Dog Logo Loading" className="inline-block" />
<p className="pt-4">{!text ? 'Loading...' : text}</p>
</div>
Expand Down
11 changes: 10 additions & 1 deletion src/components/MainLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,16 @@ export function MainLogo() {
<>
{isLocalStudio
? <img src="/harper-studio_white.png" alt="Harper Studio" className="w-64 hidden md:inline-block" />
: <img src="/harper-fabric_white.png" alt="Harper Fabric" className="w-64 hidden md:inline-block" />}
: (
<>
<img
src="/harper-fabric_black.png"
alt="Harper Fabric"
className="w-64 hidden md:inline-block dark:hidden"
/>
<img src="/harper-fabric_white.png" alt="Harper Fabric" className="w-64 hidden md:dark:inline-block" />
</>
)}
<img src="/HDBDogOnly.svg" width="50px" height="44px" alt="Harper" className="inline-block md:hidden" />
</>
);
Expand Down
22 changes: 12 additions & 10 deletions src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import {
import { ReactNode, useCallback, useMemo, useState } from 'react';
import { toast } from 'sonner';

const activeLinkProps = { className: 'text-white' };
const activeLinkProps = { className: 'text-foreground dark:text-white font-semibold' };

export function Navbar() {
const { mutate: signOut } = useLogoutMutation();
Expand Down Expand Up @@ -164,7 +164,7 @@ function AnonymousNav() {
<Version />
</div>
<NavigationMenu>
<NavigationMenuList className="text-grey-400">
<NavigationMenuList className="text-muted-foreground dark:text-grey-400">
<NavigationMenuItem>
<NavigationMenuLink asChild>
<Link
Expand Down Expand Up @@ -204,11 +204,11 @@ function DesktopNav({ menuItems }: { menuItems: Array<MenuGroup | MenuItem> }) {
<Version />
</div>
<NavigationMenu>
<NavigationMenuList className="text-grey-400">
<NavigationMenuList className="text-muted-foreground dark:text-grey-400">
{menuItems.map(menuItem =>
isMenuGroup(menuItem)
? !!menuItem.items.length && (
<div key={menuItem.text} className="bg-black rounded-2xl flex">
<div key={menuItem.text} className="bg-muted dark:bg-black rounded-2xl flex">
{menuItem.items.map(innerMenuItem => (
<DesktopNavItem key={innerMenuItem.text} menuItem={innerMenuItem} />
))}
Expand All @@ -225,7 +225,7 @@ function DesktopNav({ menuItems }: { menuItems: Array<MenuGroup | MenuItem> }) {

function DesktopNavItem({ menuItem }: { menuItem: MenuItem }) {
return (
<NavigationMenuItem className="text-gray-400 hover:text-white">
<NavigationMenuItem className="text-muted-foreground dark:text-gray-400 hover:text-foreground dark:hover:text-white">
<NavigationMenuLink asChild>
<Link
to={menuItem.to}
Expand Down Expand Up @@ -259,27 +259,29 @@ function MobileNav({ menuItems }: { menuItems: Array<MenuGroup | MenuItem> }) {
<Version />
<button
type="button"
className="shadow-xs text-grey-400 hover:text-white hover:bg-black-dark"
className="shadow-xs text-muted-foreground dark:text-grey-400 hover:text-foreground dark:hover:text-white hover:bg-muted dark:hover:bg-black-dark"
onClick={toggleMenu}
>
<span className="sr-only">{isMenuOpen ? 'Close menu' : 'Open menu'}</span>
{isMenuOpen ? <X /> : <Menu />}
</button>
</div>
<div
className={`${isMenuOpen ? 'fixed' : 'hidden'} top-40 bottom-0 left-0 right-0 bg-black-dark opacity-70`}
className={`${
isMenuOpen ? 'fixed' : 'hidden'
} top-40 bottom-0 left-0 right-0 bg-foreground/20 dark:bg-black-dark dark:opacity-70`}
onClick={closeMenu}
>
</div>
<div
className={`${
isMenuOpen ? 'block' : 'hidden'
} md:hidden z-50 space-y-1 pb-3 bg-black-dark absolute left-0 top-full w-full rounded-b-md`}
} md:hidden z-50 space-y-1 pb-3 bg-card border-b border-border dark:bg-black-dark dark:border-none absolute left-0 top-full w-full rounded-b-md`}
>
{menuItems.map(menuItem =>
isMenuGroup(menuItem)
? !!menuItem.items.length && (
<div key={menuItem.text} className="bg-black pl-10 pr-2 py-2">
<div key={menuItem.text} className="bg-muted dark:bg-black pl-10 pr-2 py-2">
{menuItem.items.map(innerMenuItem => (
<MobileNavItem key={innerMenuItem.text} menuItem={innerMenuItem} onClick={closeMenu} />
))}
Expand All @@ -302,7 +304,7 @@ function MobileNavItem({ menuItem, onClick }: { menuItem: MenuItem; onClick: ()
to={menuItem.to}
onClick={linkOnClick}
target={menuItem.target}
className="flex flex-row px-3 py-2 text-base font-medium rounded-md text-gray-400 hover:text-white"
className="flex flex-row px-3 py-2 text-base font-medium rounded-md text-muted-foreground dark:text-gray-400 hover:text-foreground dark:hover:text-white"
activeProps={menuItem.to ? activeLinkProps : undefined}
>
{menuItem.icon}
Expand Down
4 changes: 2 additions & 2 deletions src/components/RadioButtonGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function RadioButtonGroup<
<Label
htmlFor={`${name}-${option.value}`}
className={cn(
'flex h-10 items-center justify-center rounded-md border border-input px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-grey-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'flex h-10 items-center justify-center rounded-md border border-input px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'peer-data-[state=checked]:bg-primary peer-data-[state=checked]:text-primary-foreground',
)}
>
Expand Down Expand Up @@ -88,7 +88,7 @@ export function RadioButtonGroup<
<Label
htmlFor={`${name}-${option.value}`}
className={cn(
'flex h-10 items-center bg-black/30 justify-center rounded-md border border-input px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'flex h-10 items-center bg-muted/50 justify-center rounded-md border border-input px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'peer-data-[state=checked]:bg-primary peer-data-[state=checked]:text-primary-foreground',
)}
>
Expand Down
4 changes: 2 additions & 2 deletions src/components/SimpleBrowseDataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function SimpleBrowseDataTable<TData, TValue>({
{children}
<div className="grow hidden lg:visible"></div>
</div>
<Table containerClassName="rounded-md bg-black-dark">
<Table containerClassName="rounded-md bg-card dark:bg-black-dark">
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="border-none">
Expand All @@ -69,7 +69,7 @@ export function SimpleBrowseDataTable<TData, TValue>({
</TableRow>
))}
</TableHeader>
<TableBody className="bg-black border border-grey-700">
<TableBody className="bg-background dark:bg-black border border-border dark:border-grey-700">
{table.getRowModel().rows?.length
? (table.getRowModel().rows.map((row) => (
<TableRow
Expand Down
2 changes: 1 addition & 1 deletion src/components/SubNavMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ReactNode } from 'react';

export function SubNavMenu({ children }: { children?: ReactNode }) {
return (
<nav className="fixed top-20 w-full h-12 z-39 py-2 px-4 md:px-12 bg-grey-700">
<nav className="fixed top-20 w-full h-12 z-39 py-2 px-4 md:px-12 bg-violet-50 border-b border-violet-100 dark:bg-grey-700 dark:border-none">
<div className="flex items-center h-full space-x-2">
<Breadcrumbs />
{children}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/badgeVariants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const badgeVariants = cva(
success: 'border-green bg-green/40 text-white [a&]:hover:bg-green/90',
destructive:
'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
outline: 'text-white [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
},
},
defaultVariants: {
Expand Down
3 changes: 2 additions & 1 deletion src/components/ui/buttonVariants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { cva } from 'class-variance-authority';

const hoverBounce = 'hover:-translate-y-1 transition duration-200';
const outlineCommon = 'border bg-transparent border-2 text-white shadow-xs hover:bg-grey-700/40';
const outlineCommon =
'border bg-transparent border-2 text-foreground shadow-xs hover:bg-accent/60 dark:text-white dark:hover:bg-grey-700/40';
export const buttonVariants = cva(
`inline-flex
items-center
Expand Down
5 changes: 4 additions & 1 deletion src/components/ui/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="card"
className={cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-4 shadow-deep', className)}
className={cn(
'bg-card text-card-foreground flex flex-col gap-4 rounded-2xl py-5 shadow-deep ring-1 ring-black/5 dark:ring-white/5',
className,
)}
{...props}
/>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/ui/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function DialogContent({ className, children, ...props }: React.ComponentProps<t
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
'bg-black '
'bg-popover '
+ 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 '
+ 'fixed top-[50%] left-[50%] z-50 grid '
+ 'w-full max-w-[calc(100%-2rem)] lg:max-w-2xl '
Expand All @@ -54,7 +54,7 @@ function DialogContent({ className, children, ...props }: React.ComponentProps<t
>
{children}
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
<XIcon className="text-white" />
<XIcon className="text-popover-foreground" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
Expand Down Expand Up @@ -86,7 +86,7 @@ function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn('text-lg leading-none text-white font-semibold', className)}
className={cn('text-lg leading-none text-popover-foreground font-semibold', className)}
{...props}
/>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/ui/dropdownMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ function DropdownMenuContent({
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
className={cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-grey-700 p-1 shadow-md',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border p-1 shadow-md',
className,
)}
{...props}
Expand Down Expand Up @@ -149,7 +149,7 @@ function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typ
return (
<DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator"
className={cn('bg-grey-700 -mx-1 my-1 h-px', className)}
className={cn('bg-border -mx-1 my-1 h-px', className)}
{...props}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/50 ring-ring/10
dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:outline-destructive/60
aria-invalid:ring-destructive/20 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive
flex h-9 w-full min-w-0 rounded-md border bg-grey-700 px-3 py-1 text-base text-white
flex h-9 w-full min-w-0 rounded-md border bg-white text-foreground dark:bg-grey-700 dark:text-white px-3 py-1 text-base
file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium
focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-purple disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50
aria-invalid:focus-visible:ring-[1px] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-1`,
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/navigation/NavigationMenuLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export function NavigationMenuLink({ className, ...props }: React.ComponentProps
<NavigationMenuPrimitive.Link
data-slot="navigation-menu-link"
className={cn(
"hover:text-white ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
"hover:text-foreground dark:hover:text-white ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function SelectTrigger({ className, children, ...props }: React.ComponentProps<t
<SelectPrimitive.Trigger
data-slot="select-trigger"
className={cn(
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-grey-700 px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:truncate *:data-[slot=select-value]:block *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-input dark:bg-grey-700 px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:truncate *:data-[slot=select-value]:block *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
Expand Down
5 changes: 2 additions & 3 deletions src/components/ui/tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimi
<TabsPrimitive.List
data-slot="tabs-list"
className={cn(
'text-muted-foreground inline-flex w-fit items-center justify-center rounded-full bg-gray-950 p-1',
'text-muted-foreground inline-flex w-fit items-center justify-center rounded-full bg-muted dark:bg-gray-950 p-1',
className,
)}
{...props}
Expand All @@ -25,8 +25,7 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
data-slot="tabs-trigger"
className={cn(
// 'data-[state=inactive]:border-b-4 data-[state=inactive]:border-b-grey-700 ' +
'data-[state=active]:text-white data-[state=active]:bg-gray-600 '
+ 'dark:data-[state=active]:text-foreground '
'data-[state=active]:text-foreground data-[state=active]:bg-card dark:data-[state=active]:bg-gray-600 '
+ 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring '
+ 'focus-visible:ring-[3px] focus-visible:outline-1 '
+ 'text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 '
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export function Textarea({ className, ...props }: React.ComponentProps<'textarea
dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/50 ring-ring/10
dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:outline-destructive/60
aria-invalid:ring-destructive/20 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive
flex w-full min-w-0 rounded-md border bg-grey-700 px-3 py-1 text-base text-white
flex w-full min-w-0 rounded-md border bg-white text-foreground dark:bg-grey-700 dark:text-white
file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium
focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-purple disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50
aria-invalid:focus-visible:ring-[1px] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-1`,
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/toggleVariants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const toggleVariants = cva(
variant: {
default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
outline:
'border bg-default border-primary border-2 text-white shadow-xs hover:-translate-y-1 transition duration-200 hover:bg-grey-700/40',
'border bg-default border-primary border-2 text-foreground shadow-xs hover:-translate-y-1 transition duration-200 hover:bg-accent/60 dark:text-white dark:hover:bg-grey-700/40',
},
size: {
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
Expand Down
Loading