From ab801d9539781dc7d0e45d8750aa994d9ec6de4b Mon Sep 17 00:00:00 2001 From: Andrew Jiang Date: Fri, 6 Dec 2024 18:59:41 -0500 Subject: [PATCH 1/2] fix: improve searchbar colors --- packages/ui/components/src/kbd.scss | 2 +- .../src/components/desktop/desktop-search-button.tsx | 8 +++----- .../src/components/desktop/desktop-search-dialog.tsx | 2 +- .../ui/fern-docs-search-ui/src/components/ui/dropdown.tsx | 2 +- .../ui/fern-docs-search-ui/src/components/ui/tooltip.tsx | 2 +- 5 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/ui/components/src/kbd.scss b/packages/ui/components/src/kbd.scss index 8e1e0f6114..3916e207a9 100644 --- a/packages/ui/components/src/kbd.scss +++ b/packages/ui/components/src/kbd.scss @@ -8,6 +8,6 @@ @layer components { .fern-kbd { - @apply bg-[var(--grayscale-a3)] text-[var(--grayscale-a10)] rounded px-1 py-0.5 text-xs; + @apply bg-[var(--grayscale-1)] text-[var(--grayscale-a10)] border border-[var(--grayscale-a6)] rounded-md px-1.5 py-0.5 text-xs; } } diff --git a/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-search-button.tsx b/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-search-button.tsx index 55def85416..08118848e5 100644 --- a/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-search-button.tsx +++ b/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-search-button.tsx @@ -5,14 +5,12 @@ import { ComponentPropsWithoutRef, forwardRef, memo } from "react"; import { cn } from "../ui/cn"; const buttonVariants = cva( - "inline-flex items-center justify-start gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--accent-6)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-9 p-2 w-full", + "inline-flex items-center justify-start gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors hover:transition-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--accent-6)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-9 p-2 w-full cursor-text", { variants: { variant: { - default: - "border border-[var(--grayscale-a6)] bg-[var(--grayscale-a1)] text-[var(--grayscale-a10)] hover:bg-[var(--grayscale-a2)]", - loading: - "border border-[var(--grayscale-a6)] bg-[var(--grayscale-a1)] text-[var(--grayscale-a10)] cursor-default", + default: "bg-[var(--grayscale-a3)] text-[var(--grayscale-a10)] hover:bg-[var(--grayscale-a4)]", + loading: "bg-[var(--grayscale-a3)] text-[var(--grayscale-a10)] cursor-default", }, }, defaultVariants: { diff --git a/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-search-dialog.tsx b/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-search-dialog.tsx index bce26d9ccc..e89d42c831 100644 --- a/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-search-dialog.tsx +++ b/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-search-dialog.tsx @@ -53,7 +53,7 @@ export const DesktopSearchDialog = memo( { diff --git a/packages/ui/fern-docs-search-ui/src/components/ui/dropdown.tsx b/packages/ui/fern-docs-search-ui/src/components/ui/dropdown.tsx index ebcda5efa2..e1398042c5 100644 --- a/packages/ui/fern-docs-search-ui/src/components/ui/dropdown.tsx +++ b/packages/ui/fern-docs-search-ui/src/components/ui/dropdown.tsx @@ -64,7 +64,7 @@ const DropdownMenuContent = React.forwardRef< className={cn( "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--grayscale-a6)] bg-[var(--grayscale-a1)] backdrop-blur-xl p-1 text-[var(--grayscale-a12)] shadow-md", "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", - "before:absolute before:inset-0 before:bg-[var(--white-a6)] dark:before:bg-[var(--black-a6)] before:-z-50 before:pointer-events-none", + "before:absolute before:inset-0 before:bg-[var(--white-a9)] dark:before:bg-[var(--black-a9)] before:-z-50 before:pointer-events-none", className, )} {...props} diff --git a/packages/ui/fern-docs-search-ui/src/components/ui/tooltip.tsx b/packages/ui/fern-docs-search-ui/src/components/ui/tooltip.tsx index 1c2063fe1e..19aba21efa 100644 --- a/packages/ui/fern-docs-search-ui/src/components/ui/tooltip.tsx +++ b/packages/ui/fern-docs-search-ui/src/components/ui/tooltip.tsx @@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef< sideOffset={sideOffset} className={cn( "z-50 overflow-hidden rounded-md border border-[var(--grayscale-a6)] bg-[var(--grayscale-a1)] backdrop-blur-xl px-3 py-1.5 text-sm text-[var(--accent-12)] shadow-md", - "before:absolute before:inset-0 before:bg-[var(--white-a6)] dark:before:bg-[var(--black-a6)] before:-z-50 before:pointer-events-none", + "before:absolute before:inset-0 before:bg-[var(--white-a9)] dark:before:bg-[var(--black-a9)] before:-z-50 before:pointer-events-none", { "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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": animate, From a01f1df80f4ff494e9249a63191703b879f351be Mon Sep 17 00:00:00 2001 From: Andrew Jiang Date: Fri, 6 Dec 2024 19:12:01 -0500 Subject: [PATCH 2/2] slightly more contrast --- packages/ui/components/src/kbd.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/components/src/kbd.scss b/packages/ui/components/src/kbd.scss index 3916e207a9..381c9c9b7d 100644 --- a/packages/ui/components/src/kbd.scss +++ b/packages/ui/components/src/kbd.scss @@ -8,6 +8,6 @@ @layer components { .fern-kbd { - @apply bg-[var(--grayscale-1)] text-[var(--grayscale-a10)] border border-[var(--grayscale-a6)] rounded-md px-1.5 py-0.5 text-xs; + @apply bg-[var(--grayscale-1)] text-[var(--grayscale-a12)] border border-[var(--grayscale-a6)] rounded-md px-1.5 py-0.5 text-xs; } }