From fb288cfdc1a90a09131a7a87042c55eb84ccedd4 Mon Sep 17 00:00:00 2001
From: Andrew Jiang <andrew@buildwithfern.com>
Date: Sat, 21 Dec 2024 10:59:04 -0500
Subject: [PATCH] fix: update padding and fix positioning (#1934)

---
 packages/fern-docs/components/.storybook/variables.css   | 2 +-
 packages/fern-docs/components/src/FernButtonV2.tsx       | 2 +-
 .../search-ui/src/components/desktop/desktop-ask-ai.tsx  | 6 +++---
 packages/fern-docs/tailwind.config.js                    | 2 +-
 packages/fern-docs/ui/.storybook/variables.css           | 4 ++--
 packages/fern-docs/ui/src/search/SearchV2.tsx            | 9 ---------
 .../ui/src/themes/stylesheet/getColorVariables.ts        | 4 ++--
 7 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/packages/fern-docs/components/.storybook/variables.css b/packages/fern-docs/components/.storybook/variables.css
index 175bcca6b8..7ba85decf4 100644
--- a/packages/fern-docs/components/.storybook/variables.css
+++ b/packages/fern-docs/components/.storybook/variables.css
@@ -64,7 +64,7 @@
   --accent-aaa: 173, 255, 140;
   --accent-tinted: 191, 255, 165;
   --background: 0, 0, 0;
-  --accent-contrast: 0, 0, 0;
+  --accent-contrast: #000;
   --bg-color-card: var(--grayscale-a2);
   --sidebar-background: transparent;
   --header-background: transparent;
diff --git a/packages/fern-docs/components/src/FernButtonV2.tsx b/packages/fern-docs/components/src/FernButtonV2.tsx
index 4a4ba4ca80..78a3b64b8a 100644
--- a/packages/fern-docs/components/src/FernButtonV2.tsx
+++ b/packages/fern-docs/components/src/FernButtonV2.tsx
@@ -9,7 +9,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-[var(--accent-10)] text-[var(--accent-1)] hover:bg-[var(--accent-9)]",
+          "bg-[var(--accent-10)] text-[var(--accent-contrast,var(--accent-1))] hover:bg-[var(--accent-9)]",
         destructive:
           "bg-[var(--red-10)] text-[var(--red-12)] hover:bg-[var(--red-11)]",
         outline:
diff --git a/packages/fern-docs/search-ui/src/components/desktop/desktop-ask-ai.tsx b/packages/fern-docs/search-ui/src/components/desktop/desktop-ask-ai.tsx
index 44ed1b2991..644e603146 100644
--- a/packages/fern-docs/search-ui/src/components/desktop/desktop-ask-ai.tsx
+++ b/packages/fern-docs/search-ui/src/components/desktop/desktop-ask-ai.tsx
@@ -481,7 +481,7 @@ const AskAIComposer = forwardRef<
     const inputRef = useRef<HTMLTextAreaElement>(null);
     return (
       <div
-        className="cursor-text border-t border-[var(--grayscale-a6)]"
+        className="cursor-text border-t border-[var(--grayscale-a6)] p-2"
         onClick={() => inputRef.current?.focus()}
       >
         <DesktopCommandInput asChild>
@@ -538,12 +538,12 @@ const AskAIComposer = forwardRef<
             )}
           />
         </DesktopCommandInput>
-        <div className="flex items-center justify-between px-2 pb-2">
+        <div className="flex items-center justify-between">
           <div>{actions}</div>
           <Button
             size="icon"
             className="rounded-full"
-            variant="ghost"
+            variant="default"
             onClick={isLoading ? stop : () => onSend?.(value)}
             disabled={!isLoading && !canSubmit}
           >
diff --git a/packages/fern-docs/tailwind.config.js b/packages/fern-docs/tailwind.config.js
index f072540cf1..70da65cc62 100644
--- a/packages/fern-docs/tailwind.config.js
+++ b/packages/fern-docs/tailwind.config.js
@@ -100,7 +100,7 @@ module.exports = {
         "accent-aa": withOpacity("--accent-aa"),
         "accent-aaa": withOpacity("--accent-aaa"),
         "accent-tinted": "var(--accent-10)",
-        "accent-contrast": withOpacity("--accent-contrast"),
+        "accent-contrast": "var(--accent-contrast)",
         "accent-muted": `var(--accent-6)`,
         "accent-highlight": "var(--accent-3)",
         "accent-highlight-faded": "var(--accent-2)",
diff --git a/packages/fern-docs/ui/.storybook/variables.css b/packages/fern-docs/ui/.storybook/variables.css
index 7fc04d5b5b..6af8d71bc4 100644
--- a/packages/fern-docs/ui/.storybook/variables.css
+++ b/packages/fern-docs/ui/.storybook/variables.css
@@ -29,7 +29,7 @@
   --accent-aaa: 49, 99, 29;
   --accent-tinted: 55, 111, 32;
   --background: 255, 255, 255;
-  --accent-contrast: 255, 255, 255;
+  --accent-contrast: #fff;
   --bg-color-card: rgba(255, 255, 255, 70%);
   --sidebar-background: transparent;
   --header-background: transparent;
@@ -63,7 +63,7 @@
   --accent-aaa: 173, 255, 140;
   --accent-tinted: 191, 255, 165;
   --background: 0, 0, 0;
-  --accent-contrast: 0, 0, 0;
+  --accent-contrast: #000;
   --bg-color-card: var(--grayscale-a2);
   --sidebar-background: transparent;
   --header-background: transparent;
diff --git a/packages/fern-docs/ui/src/search/SearchV2.tsx b/packages/fern-docs/ui/src/search/SearchV2.tsx
index 7db7cd2632..e2dd197bd0 100644
--- a/packages/fern-docs/ui/src/search/SearchV2.tsx
+++ b/packages/fern-docs/ui/src/search/SearchV2.tsx
@@ -1,6 +1,5 @@
 import {
   CommandActions,
-  CommandAskAIGroup,
   CommandEmpty,
   CommandGroupFilters,
   CommandGroupPlayground,
@@ -153,7 +152,6 @@ export function SearchV2(): ReactElement | false {
       <DesktopSearchDialog
         open={open}
         onOpenChange={setOpen}
-        asChild
         trigger={<DesktopSearchButton />}
       >
         {isAskAiEnabled ? (
@@ -184,13 +182,6 @@ export function SearchV2(): ReactElement | false {
               );
             }}
           >
-            <CommandAskAIGroup
-              onAskAI={(initialInput) => {
-                setInitialInput(initialInput);
-                setAskAi(true);
-              }}
-              forceMount
-            />
             {children}
           </DesktopCommandWithAskAI>
         ) : (
diff --git a/packages/fern-docs/ui/src/themes/stylesheet/getColorVariables.ts b/packages/fern-docs/ui/src/themes/stylesheet/getColorVariables.ts
index a8782d6ecb..c85b7fbad6 100644
--- a/packages/fern-docs/ui/src/themes/stylesheet/getColorVariables.ts
+++ b/packages/fern-docs/ui/src/themes/stylesheet/getColorVariables.ts
@@ -367,7 +367,7 @@ export function getColorVariables(
       [CSS_VARIABLES.ACCENT_PRIMARY_AAA]: `${accentPrimaryLightAAA.r}, ${accentPrimaryLightAAA.g}, ${accentPrimaryLightAAA.b}`,
       [CSS_VARIABLES.ACCENT_PRIMARY_TINTED]: `${accentPrimaryLightTinted.r}, ${accentPrimaryLightTinted.g}, ${accentPrimaryLightTinted.b}`,
       [CSS_VARIABLES.BACKGROUND]: `${backgroundColorLight.r}, ${backgroundColorLight.g}, ${backgroundColorLight.b}`,
-      [CSS_VARIABLES.ACCENT_PRIMARY_CONTRAST]: `${accentPrimaryLightContrast.r}, ${accentPrimaryLightContrast.g}, ${accentPrimaryLightContrast.b}`,
+      [CSS_VARIABLES.ACCENT_PRIMARY_CONTRAST]: `rgb(${accentPrimaryLightContrast.r}, ${accentPrimaryLightContrast.g}, ${accentPrimaryLightContrast.b})`,
       [CSS_VARIABLES.CARD_BACKGROUND]:
         cardBackgroundLight?.toRgbString() ??
         tinycolor("white").setAlpha(0.7).toRgbString(),
@@ -452,7 +452,7 @@ export function getColorVariables(
       [CSS_VARIABLES.ACCENT_PRIMARY_AAA]: `${accentPrimaryDarkAAA.r}, ${accentPrimaryDarkAAA.g}, ${accentPrimaryDarkAAA.b}`,
       [CSS_VARIABLES.ACCENT_PRIMARY_TINTED]: `${accentPrimaryDarkTinted.r}, ${accentPrimaryDarkTinted.g}, ${accentPrimaryDarkTinted.b}`,
       [CSS_VARIABLES.BACKGROUND]: `${backgroundColorDark.r}, ${backgroundColorDark.g}, ${backgroundColorDark.b}`,
-      [CSS_VARIABLES.ACCENT_PRIMARY_CONTRAST]: `${accentPrimaryDarkContrast.r}, ${accentPrimaryDarkContrast.g}, ${accentPrimaryDarkContrast.b}`,
+      [CSS_VARIABLES.ACCENT_PRIMARY_CONTRAST]: `rgb(${accentPrimaryDarkContrast.r}, ${accentPrimaryDarkContrast.g}, ${accentPrimaryDarkContrast.b})`,
       [CSS_VARIABLES.CARD_BACKGROUND]:
         cardBackgroundDark?.toRgbString() ??
         tinycolor(backgroundColorDark).darken(2).setAlpha(0.5).toRgbString(),