ui(editor): fix conflicting border colors by adding fern-border (#4643)

Fixes FER-

## Short description of the changes made
- noticed that contentful had funny borders appear on custom elements
- this adds in a new color token (`--fern-border`) so that we can use this when there is room for colors to conflict

_before (uses --border):_

![Screenshot 2025-10-31 at 1.42.13 PM.png](https://app.graphite.dev/user-attachments/assets/fe72cc6b-792f-4347-8e67-decf223e2288.png)

_after (uses --fern-border):_

![Screenshot 2025-10-31 at 1.42.01 PM.png](https://app.graphite.dev/user-attachments/assets/6acae8c7-b0ba-4388-96a7-330f16f259d1.png)

## What was the motivation & context behind this PR?
- improve intended coloring of editor

## How has this PR been tested?
- tested locally with contentful

Author: sbawabe

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/PageContents.tsx

@@ -4,7 +4,7 @@ import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { FernBreadcrumbs } from "@fern-docs/components/FernBreadcrumbs";
 import type { SerializableFoundNode } from "@fern-docs/components/navigation";
 import type { MdxToHtmlResponse } from "@fern-docs/mdx";
-
+import { cn } from "@/utils/utils";
 import PageEditor from "./PageEditor";
 import PageSubtitle from "./PageSubtitle";
 import PageTitle from "./PageTitle";
@@ -21,13 +21,13 @@ export declare namespace PageContents {
 export default function PageContents({ filename, initialHtml, initialFrontmatter, foundNode }: PageContents.Props) {
     const { title, subtitle, layout } = initialFrontmatter ?? {};
 
-    const hidePageHeader = layout === "custom";
+    const isCustomLayout = layout === "custom";
 
     const breadcrumb = foundNode ? FernNavigation.utils.createBreadcrumb(foundNode.parents) : [];
 
     return (
         <div className="max-w-content-width-wide mx-auto w-full pb-64">
-            {!hidePageHeader && (
+            {!isCustomLayout && (
                 <div className="mx-5 not-prose">
                     {breadcrumb.length > 0 && (
                         <div className="mb-2">
@@ -42,7 +42,12 @@ export default function PageContents({ filename, initialHtml, initialFrontmatter
                     />
                 </div>
             )}
-            <PageEditor className="-m-2 w-full p-3" filename={filename} initialHtml={initialHtml} />
+            {/* NOTE: We add extra padding for custom layouts so that +/drag controls don't get cut off */}
+            <PageEditor
+                className={cn("-m-2 w-full p-3", isCustomLayout && "px-12")}
+                filename={filename}
+                initialHtml={initialHtml}
+            />
         </div>
     );
 }

packages/fern-dashboard/src/app/globals.css

@@ -113,6 +113,7 @@
   --yellow-1200: #403c23;
 
   --fern-green-300: #dbfdd3;
+  --fern-border: var(--gray-500);
 }
 
 .dark {
@@ -213,6 +214,8 @@
   --yellow-1000: #ece4ab;
   --yellow-1100: #ebe196;
   --yellow-1200: #f6eeb4;
+
+  --fern-border: var(--gray-300);
 }
 
 @theme inline {

packages/fern-dashboard/src/components/editor/NodeHoverWrapper.tsx

@@ -18,10 +18,10 @@ const NodeHoverWrapper = ({ name, children, icon, actions }: NodeHoverWrapperPro
             <div className="absolute -top-14 left-0 right-0 h-16 z-10" />
 
             {/* Hover outline - only visible on group hover */}
-            <div className="pointer-events-none absolute -inset-2 hidden rounded-lg border-2 border-border border-dashed group-hover:block" />
+            <div className="pointer-events-none absolute -inset-2 hidden rounded-lg border-2 border-[var(--fern-border)] border-dashed group-hover:block" />
 
             <div className="absolute right-0 -top-13 z-10 items-center hidden gap-2 group-hover:flex">
-                <div className="flex items-center gap-1 rounded-[10px] border border-border bg-popover p-1 text-sm shadow-lg">
+                <div className="flex items-center gap-1 rounded-[10px] border border-[var(--fern-border)] bg-popover p-1 text-sm shadow-lg">
                     <div className="bg-[var(--fern-green-300)] h-[32px] p-1 px-2.5 rounded-md flex gap-2 items-center text-primary font-normal">
                         {icon}
                         {name}