From 6350208c4d7645bcfb2ac88fd6bdfcbee5804a38 Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Thu, 22 May 2025 22:54:57 +0200 Subject: [PATCH] style(ui): update input and dropdown-menu colors for consistency Refine color variables and class names in input and dropdown-menu components to improve visual consistency and accessibility. Introduce new CSS variables for input text and muted input states. Adjust focus and selection styles to better align with the overall design system. --- src/app/globals.css | 22 +++++++++++++++++++--- src/components/ui/dropdown-menu.tsx | 4 ++-- src/components/ui/input.tsx | 2 +- 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 99e47a7..cd4c1c7 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -28,6 +28,9 @@ --base: var(--neutral-800); --text: var(--neutral-000); --text-alt: var(--neutral-900); + --text-input: var(--text); + --text-muted-input: var(--neutral-600); + --muted-input: var(--neutral-600); --background-disabled: var(--neutral-500); --text-disabled: var(--neutral-700); --radius: 0.688rem; @@ -56,6 +59,8 @@ --primary-foreground: oklch(0.985 0.002 247.839); + --popover-hover: var(--neutral-750); + --secondary-foreground: oklch(0.21 0.034 264.665); --muted: oklch(0.967 0.003 264.542); @@ -139,6 +144,10 @@ --color-base: var(--neutral-800); --color-text: var(--text); --color-text-alt: var(--text-alt); + --color-text-input: var(--text-input); + --color-text-muted-input: var(--text-muted-input); + --color-muted-input: var(--muted-input); + --color-background-disabled: var(--neutral-500); --color-text-disabled: var(--neutral-700); --radius: 0.688rem; @@ -175,6 +184,8 @@ --color-popover-foreground: var(--popover-foreground); + --color-popover-hover: var(--popover-hover); + --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); @@ -232,13 +243,13 @@ --transparent: transparent; --neutral-000: oklch(1 0 0); - --neutral-100: oklch(0.9128 0 0); - --neutral-150: oklch(0.9702 0 0); + --neutral-100: oklch(0.9702 0 0); + --neutral-150: oklch(0.9128 0 0); --neutral-200: oklch(0.8266 0 0); --neutral-300: oklch(0.738 0 0); --neutral-400: oklch(0.6434 0 0); - --neutral-600: oklch(0.4495 0 0); --neutral-500: oklch(0.5486 0 0); + --neutral-600: oklch(0.4495 0 0); --neutral-700: oklch(0.3407 0 0); --neutral-750: oklch(0.2972 0 0); --neutral-800: oklch(0.2264 0 0); @@ -248,6 +259,9 @@ --base: var(--neutral-750); --text: var(--neutral-000); --text-alt: var(--neutral-900); + --text-input: var(--text); + --text-muted-input: var(--neutral-600); + --muted-input: var(--neutral-500); --background-disabled: var(--neutral-500); --text-disabled: var(--neutral-700); @@ -275,6 +289,8 @@ --primary-foreground: oklch(0.21 0.034 264.665); + --popover-hover: var(--neutral-700); + --secondary-foreground: oklch(0.985 0.002 247.839); --muted: oklch(0.278 0.033 256.848); diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx index 7a8804e..ca93e14 100644 --- a/src/components/ui/dropdown-menu.tsx +++ b/src/components/ui/dropdown-menu.tsx @@ -42,7 +42,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 p-1 shadow-md', + 'bg-popover text-text 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 p-1 shadow-md', className, )} {...props} @@ -74,7 +74,7 @@ function DropdownMenuItem({ data-inset={inset} data-variant={variant} className={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 [&_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]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "focus:bg-popover-hover focus:text-text 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 [&_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]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className, )} {...props} diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index a751360..65fbc93 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) { type={type} data-slot='input' className={cn( - 'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-label disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', + 'file:text-destructive placeholder:text-text-muted-input selection:bg-muted-input selection:text-text dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-text-input shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-label disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', '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', className,