fix: changed component bg colors and updated product switcher

Author: Kapil Gowru

fern/assets/styles.css

@@ -214,7 +214,7 @@ h1, h2, h3 {
       }
     }
 
-    > a[href*="fern-def"] {
+    > a[href*="ferndef"] {
       grid-column: 3;
       grid-row: 5;
       transform: translateY(-96px);
@@ -225,7 +225,7 @@ h1, h2, h3 {
       }
     }
 
-    > a[href*="api-definitions"] {
+    > a[href="/learn/api-definitions"] {
       display: none;
     }
   }
@@ -1109,86 +1109,58 @@ h1, h2, h3 {
 }
 
 /*** START -- HIGHLIGHTED FRAME STYLING ***/
-@keyframes gradient-animation {
-  0% {
-    background-image:
-      radial-gradient(at 40% 20%, hsla(109,80%,78%,1) 0px, transparent 50%),
-      radial-gradient(at 0% 100%, hsla(222,83%,81%,1) 0px, transparent 50%),
-      radial-gradient(at 0% 50%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 80% 100%, hsla(222,75%,72%,1) 0px, transparent 50%),
-      radial-gradient(at 35% 74%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 85% 14%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 25% 10%, hsla(222,83%,81%,1) 0px, transparent 50%);
-  }
-  25% {
-    background-image:
-      radial-gradient(at 60% 30%, hsla(109,80%,78%,1) 0px, transparent 50%),
-      radial-gradient(at 20% 80%, hsla(222,83%,81%,1) 0px, transparent 50%),
-      radial-gradient(at 10% 60%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 70% 90%, hsla(222,75%,72%,1) 0px, transparent 50%),
-      radial-gradient(at 45% 84%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 75% 24%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 35% 20%, hsla(222,83%,81%,1) 0px, transparent 50%);
+/* @keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
   }
   50% {
-    background-image:
-      radial-gradient(at 50% 40%, hsla(109,80%,78%,1) 0px, transparent 50%),
-      radial-gradient(at 10% 90%, hsla(222,83%,81%,1) 0px, transparent 50%),
-      radial-gradient(at 20% 40%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 90% 80%, hsla(222,75%,72%,1) 0px, transparent 50%),
-      radial-gradient(at 25% 64%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 95% 34%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 15% 30%, hsla(222,83%,81%,1) 0px, transparent 50%);
-  }
-  75% {
-    background-image:
-      radial-gradient(at 30% 10%, hsla(109,80%,78%,1) 0px, transparent 50%),
-      radial-gradient(at 5% 105%, hsla(222,83%,81%,1) 0px, transparent 50%),
-      radial-gradient(at 5% 45%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 85% 95%, hsla(222,75%,72%,1) 0px, transparent 50%),
-      radial-gradient(at 40% 69%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 80% 19%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 20% 15%, hsla(222,83%,81%,1) 0px, transparent 50%);
-  }
-  100% {
-    background-image:
-      radial-gradient(at 45% 25%, hsla(109,80%,78%,1) 0px, transparent 50%),
-      radial-gradient(at 5% 95%, hsla(222,83%,81%,1) 0px, transparent 50%),
-      radial-gradient(at 15% 55%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 75% 105%, hsla(222,75%,72%,1) 0px, transparent 50%),
-      radial-gradient(at 50% 80%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 90% 20%, hsla(108,91%,90%,1) 0px, transparent 50%),
-      radial-gradient(at 30% 5%, hsla(222,83%,81%,1) 0px, transparent 50%);
+    background-position: 100% 50%;
   }
-}
+} */
 
 .highlight-frame {
   /* background-color: var(--accent-a2); */
   background-color:hsla(222,58%,66%,1);
-  background-image:
-  radial-gradient(at 40% 20%, hsla(109,80%,78%,1) 0px, transparent 50%),
-  radial-gradient(at 0% 100%, hsla(222,83%,81%,1) 0px, transparent 50%),
-  radial-gradient(at 0% 50%, hsla(108,91%,90%,1) 0px, transparent 50%),
-  radial-gradient(at 80% 100%, hsla(222,75%,72%,1) 0px, transparent 50%),
-  radial-gradient(at 35% 74%, hsla(108,91%,90%,1) 0px, transparent 50%),
-  radial-gradient(at 85% 14%, hsla(108,91%,90%,1) 0px, transparent 50%),
-  radial-gradient(at 25% 10%, hsla(222,83%,81%,1) 0px, transparent 50%);
-  border-radius: 0.75rem;
-  padding: 1rem;
+  background:
+    radial-gradient(circle at 20% 50%, hsla(109,80%,78%,0.8) 0%, transparent 50%),
+    radial-gradient(circle at 80% 50%, hsla(222,83%,81%,0.8) 0%, transparent 50%),
+    radial-gradient(circle at 50% 20%, hsla(108,91%,90%,0.7) 0%, transparent 50%),
+    radial-gradient(circle at 50% 80%, hsla(222,75%,72%,0.7) 0%, transparent 50%),
+    hsla(222,58%,66%,1);
+  background-size: 100% 100%;
+  border-radius: 1rem;
+  padding: 0.5rem;
   margin: 1rem 0;
-  animation: gradient-animation 15s ease-in-out infinite alternate;
-  background-size: 200% 200%;
-}
+  /* animation: gradient-shift 20s ease-in-out infinite; */
 
-.highlight-frame > *:first-child {
-  margin-top: 0;
-}
+  .highlight-frame-content {
+    padding: 1rem;
+    background-color: var(--background, lightdark(#fff,#000));
+    border-radius: 0.5rem;
+    overflow: hidden;
 
-.highlight-frame > *:last-child {
-  margin-bottom: 0;
-}
+    > *:first-child {
+      margin-top: 0;
+    }
+    
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .highlight-frame-content-not-prose {
+    padding: 0.5rem;
+    background-color: var(--background, lightdark(#fff,#000));
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
 
-:is(.dark) .highlight-frame {
-  background-color: var(--accent-a3);
+  > *:first-child {
+    margin-top: 0;
+  }
+  
+  > *:last-child {
+    margin-bottom: 0;
+  }
 }
 /*** END -- HIGHLIGHTED FRAME STYLING ***/

fern/docs.yml

@@ -61,34 +61,29 @@ products:
     slug: api-definitions
 
   - display-name: OpenAPI
-    path: ./products/api-def/openapi-def.yml
+    href: /learn/api-definitions/openapi/overview
     icon: fa-regular fa-book
     image: ./images/product-switcher/openapi-definition-light.png
-    slug: openapi-definition
 
   - display-name: AsyncAPI
-    path: ./products/api-def/asyncapi-def.yml
+    href: /learn/api-definitions/asyncapi/overview
     icon: fa-regular fa-bolt
     image: ./images/product-switcher/asyncapi-light.png
-    slug: asyncapi-definition
 
   - display-name: OpenRPC
-    path: ./products/api-def/openrpc-def.yml
+    href: /learn/api-definitions/openrpc/overview
     icon: fa-regular fa-code
     image: ./images/product-switcher/openrpc-light.png
-    slug: openrpc-definition
 
   - display-name: gRPC
-    path: ./products/api-def/grpc-def.yml
+    href: /learn/api-definitions/grpc/overview
     icon: fa-regular fa-plug
     image: ./images/product-switcher/grpc-light.png
-    slug: grpc-definition
 
   - display-name: Fern Definition
-    path: ./products/api-def/ferndef-def.yml
+    href: /learn/api-definitions/ferndef/overview
     icon: fa-regular fa-seedling
     image: ./images/product-switcher/fern-definition-light.png
-    slug: fern-definition
 
 css: ./assets/styles.css
 

fern/fern.config.json

@@ -1,4 +1,4 @@
 {
   "organization": "fern",
-  "version": "0.95.0"
-}
+  "version": "0.107.3"
+}

fern/products/docs/pages/component-library/default-components/anchor.mdx

@@ -14,7 +14,9 @@ The `<Anchor>` component creates direct links to specific content like paragraph
 Wrap your content with the `<Anchor>` tag and assign it a custom anchor ID, which you can link to in URLs using the hash symbol (example: `https://website.com/page#data`).
 
 <div className="highlight-frame">
-<Anchor id="data">This sentence has a custom anchor named `#data`</Anchor>. You can access it via this URL: https://buildwithfern.com/learn/docs/writing-content/components/anchor#data.
+  <div className="highlight-frame-content">
+  <Anchor id="data">This sentence has a custom anchor named `#data`</Anchor>. You can access it via this URL: https://buildwithfern.com/learn/docs/writing-content/components/anchor#data.
+  </div>
 </div>
 
 ```jsx Markdown
@@ -26,17 +28,18 @@ Wrap your content with the `<Anchor>` tag and assign it a custom anchor ID, whic
 ### Anchor a table
 
 <div className="highlight-frame">
+  <div className="highlight-frame-content">
   <Anchor id="api-endpoints">
-
   | Endpoint | Method | Description |
   |----------|--------|-------------|
   | `/plants` | GET | Retrieve all plants |
   | `/plants/:id` | GET | Retrieve a specific plant |
   | `/plants` | POST | Create a new plant |
 
   </Anchor>
+  <p>You can link directly to the [API endpoints table](#api-endpoints).</p>
+  </div>
 
-You can link directly to the [API endpoints table](#api-endpoints).
 </div>
 
 ```jsx Markdown
@@ -56,8 +59,8 @@ You can link directly to the [API endpoints table](#api-endpoints).
 ### Anchor a code block
 
 <div className="highlight-frame">
+  <div className="highlight-frame-content">
   <Anchor id="example-code">
-
   ```python
   def water_plant(plant_id, amount):
       """Water a plant with specified amount"""
@@ -68,6 +71,7 @@ You can link directly to the [API endpoints table](#api-endpoints).
   ```
 Reference the [watering code example](#example-code) in your implementation.
   </Anchor>
+  </div>
 </div>
 
 ````jsx Markdown

fern/products/docs/pages/component-library/default-components/badges.mdx

@@ -8,7 +8,9 @@ Use the `<Badge>` component to display small pieces of information, such as stat
 ## Usage
 
 <div className="highlight-frame">
-### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
+  <div className="highlight-frame-content">
+  ### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
+  </div>
 </div>
 
 ```jsx Markdown
@@ -20,14 +22,18 @@ Use the `<Badge>` component to display small pieces of information, such as stat
 ### Intents
 
 <div className="highlight-frame">
-  <Badge intent="success">Success</Badge>
-  <Badge intent="note">Note</Badge>
-  <Badge intent="tip">Tip</Badge>
-  <Badge intent="warning">Warning</Badge>
-  <Badge intent="error">Error</Badge>
-  <Badge intent="info">Info</Badge>
-  <Badge intent="launch">Launch</Badge>
-  <Badge intent="check">Check</Badge>
+  <div className="highlight-frame-content"> 
+    <div className="flex flex-wrap gap-2">
+    <Badge intent="success">Success</Badge>
+    <Badge intent="note">Note</Badge>
+    <Badge intent="tip">Tip</Badge>
+    <Badge intent="warning">Warning</Badge>
+    <Badge intent="error">Error</Badge>
+    <Badge intent="info">Info</Badge>
+    <Badge intent="launch">Launch</Badge>
+    <Badge intent="check">Check</Badge>
+    </div>
+  </div>
 </div>
 
 ```jsx Markdown
@@ -44,10 +50,14 @@ Use the `<Badge>` component to display small pieces of information, such as stat
 ### Styles
 
 <div className="highlight-frame">
-  <Badge intent="success" minimal>Success badge, minimal style</Badge>
-  <Badge intent="error" minimal>Error badge, minimal style</Badge>
-  <Badge intent="success" outlined>Success badge, outlined style</Badge>
-  <Badge intent="error" minimal outlined>Error badge, outlined and minimal style</Badge>
+  <div className="highlight-frame-content">
+    <div className="flex flex-wrap gap-2">  
+    <Badge intent="success" minimal>Success badge, minimal style</Badge>
+    <Badge intent="error" minimal>Error badge, minimal style</Badge>
+    <Badge intent="success" outlined>Success badge, outlined style</Badge>
+    <Badge intent="error" minimal outlined>Error badge, outlined and minimal style</Badge>
+    </div>
+  </div>
 </div>
 
 ```jsx Markdown