From 5cfe1809ddae13d3979589b69b7900d2cfd5b4f9 Mon Sep 17 00:00:00 2001 From: Kapil Gowru Date: Tue, 4 Nov 2025 00:54:55 -0500 Subject: [PATCH 1/3] feat: updated styles --- fern/assets/styles.css | 68 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 66 insertions(+), 2 deletions(-) diff --git a/fern/assets/styles.css b/fern/assets/styles.css index cd4e7ffd8..ba54a350a 100644 --- a/fern/assets/styles.css +++ b/fern/assets/styles.css @@ -1109,11 +1109,75 @@ 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%); + } + 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%); + } +} + .highlight-frame { - background-color: var(--accent-a2); + /* 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: 1.5rem; + padding: 1rem; margin: 1rem 0; + animation: gradient-animation 15s ease-in-out infinite alternate; + background-size: 200% 200%; } .highlight-frame > *:first-child { From dae198453ccc62c19281d28f0dfdf0f444b62fa0 Mon Sep 17 00:00:00 2001 From: Kapil Gowru Date: Tue, 4 Nov 2025 17:00:07 -0500 Subject: [PATCH 2/3] fix: changed component bg colors and updated product switcher --- fern/assets/styles.css | 116 +++++++---------- fern/docs.yml | 15 +-- fern/fern.config.json | 4 +- .../default-components/anchor.mdx | 12 +- .../default-components/badges.mdx | 36 ++++-- .../default-components/button.mdx | 54 ++++---- .../default-components/callouts.mdx | 28 ++-- .../default-components/cards.mdx | 120 +++++++++--------- .../default-components/embed.mdx | 20 +-- .../endpoint-schema-snippet.mdx | 28 +++- .../default-components/frames.mdx | 8 +- .../default-components/icons.mdx | 24 ++-- .../default-components/parameter-fields.mdx | 32 +++-- .../default-components/runnable-endpoint.mdx | 2 +- .../default-components/steps.mdx | 18 +-- .../default-components/sticky-tables.mdx | 46 ++++--- .../default-components/tabs.mdx | 72 ++++++----- .../default-components/tooltips.mdx | 6 +- 18 files changed, 343 insertions(+), 298 deletions(-) diff --git a/fern/assets/styles.css b/fern/assets/styles.css index ba54a350a..9eeb689b3 100644 --- a/fern/assets/styles.css +++ b/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 ***/ diff --git a/fern/docs.yml b/fern/docs.yml index c6e6601f4..d246f923e 100644 --- a/fern/docs.yml +++ b/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 diff --git a/fern/fern.config.json b/fern/fern.config.json index 13c3caaa2..11a959709 100644 --- a/fern/fern.config.json +++ b/fern/fern.config.json @@ -1,4 +1,4 @@ { "organization": "fern", - "version": "0.95.0" -} + "version": "0.107.3" +} \ No newline at end of file diff --git a/fern/products/docs/pages/component-library/default-components/anchor.mdx b/fern/products/docs/pages/component-library/default-components/anchor.mdx index 32a43f6ff..168923037 100644 --- a/fern/products/docs/pages/component-library/default-components/anchor.mdx +++ b/fern/products/docs/pages/component-library/default-components/anchor.mdx @@ -14,7 +14,9 @@ The `` component creates direct links to specific content like paragraph Wrap your content with the `` 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`).
-This sentence has a custom anchor named `#data`. You can access it via this URL: https://buildwithfern.com/learn/docs/writing-content/components/anchor#data. +
+ This sentence has a custom anchor named `#data`. You can access it via this URL: https://buildwithfern.com/learn/docs/writing-content/components/anchor#data. +
```jsx Markdown @@ -26,8 +28,8 @@ Wrap your content with the `` tag and assign it a custom anchor ID, whic ### Anchor a table
+
- | Endpoint | Method | Description | |----------|--------|-------------| | `/plants` | GET | Retrieve all plants | @@ -35,8 +37,9 @@ Wrap your content with the `` tag and assign it a custom anchor ID, whic | `/plants` | POST | Create a new plant | +

You can link directly to the [API endpoints table](#api-endpoints).

+
-You can link directly to the [API endpoints table](#api-endpoints).
```jsx Markdown @@ -56,8 +59,8 @@ You can link directly to the [API endpoints table](#api-endpoints). ### Anchor a code block
+
- ```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. +
````jsx Markdown diff --git a/fern/products/docs/pages/component-library/default-components/badges.mdx b/fern/products/docs/pages/component-library/default-components/badges.mdx index 4d5fdc726..f887ce247 100644 --- a/fern/products/docs/pages/component-library/default-components/badges.mdx +++ b/fern/products/docs/pages/component-library/default-components/badges.mdx @@ -8,7 +8,9 @@ Use the `` component to display small pieces of information, such as stat ## Usage
-### Plant Care API v2.1.0 New +
+ ### Plant Care API v2.1.0 New +
```jsx Markdown @@ -20,14 +22,18 @@ Use the `` component to display small pieces of information, such as stat ### Intents
- Success - Note - Tip - Warning - Error - Info - Launch - Check +
+
+ Success + Note + Tip + Warning + Error + Info + Launch + Check +
+
```jsx Markdown @@ -44,10 +50,14 @@ Use the `` component to display small pieces of information, such as stat ### Styles
- Success badge, minimal style - Error badge, minimal style - Success badge, outlined style - Error badge, outlined and minimal style +
+
+ Success badge, minimal style + Error badge, minimal style + Success badge, outlined style + Error badge, outlined and minimal style +
+
```jsx Markdown diff --git a/fern/products/docs/pages/component-library/default-components/button.mdx b/fern/products/docs/pages/component-library/default-components/button.mdx index e04a0921b..58cbaf026 100644 --- a/fern/products/docs/pages/component-library/default-components/button.mdx +++ b/fern/products/docs/pages/component-library/default-components/button.mdx @@ -8,10 +8,12 @@ The ` - - +
+
+ + + +
@@ -26,14 +28,12 @@ The ` - -
@@ -50,10 +50,12 @@ The ` - - +
+
+ + + +
@@ -66,10 +68,12 @@ The ` - - +
+
+ + + +
@@ -82,10 +86,12 @@ The ` - - +
+
+ + + +
@@ -98,9 +104,11 @@ The ` - +
+
+ + +
diff --git a/fern/products/docs/pages/component-library/default-components/callouts.mdx b/fern/products/docs/pages/component-library/default-components/callouts.mdx index e9fe869be..f797ee636 100644 --- a/fern/products/docs/pages/component-library/default-components/callouts.mdx +++ b/fern/products/docs/pages/component-library/default-components/callouts.mdx @@ -10,7 +10,9 @@ To display very short pieces of information like status indicators and version n ## Usage
-This adds a note in your documentation. +
+ This adds a note in your documentation. +
```jsx Markdown @@ -22,13 +24,15 @@ To display very short pieces of information like status indicators and version n ### Intents
-This raises a warning to watch out for -This indicates a successful operation or positive outcome -This indicates a potential error -This draws attention to important information -This celebrates an announcement, styled using the primary accent of the docs site -This suggests a helpful tip -This shows a checked status +
+ This raises a warning to watch out for + This indicates a successful operation or positive outcome + This indicates a potential error + This draws attention to important information + This celebrates an announcement, styled using the primary accent of the docs site + This suggests a helpful tip + This shows a checked status +
```jsx Markdown @@ -44,9 +48,11 @@ To display very short pieces of information like status indicators and version n ### Custom icon
- -This callout uses a title and a custom Font Awesome icon. - +
+ + This callout uses a title and a custom Font Awesome icon. + +
```jsx Markdown diff --git a/fern/products/docs/pages/component-library/default-components/cards.mdx b/fern/products/docs/pages/component-library/default-components/cards.mdx index 78444af2e..c3ab4b161 100644 --- a/fern/products/docs/pages/component-library/default-components/cards.mdx +++ b/fern/products/docs/pages/component-library/default-components/cards.mdx @@ -10,6 +10,7 @@ You can use individual cards or arrange multiple cards in a responsive grid layo ## Usage
+
The icon field references a Font Awesome icon. +
```jsx Markdown @@ -34,36 +36,38 @@ You can use individual cards or arrange multiple cards in a responsive grid layo ### Group of cards
- - - Learn how to water your plants - - - Understand sunlight requirements for different plants - - - Choose the right soil for optimal plant growth - - - Apply fertilizer to keep your plants healthy - - +
+ + + Learn how to water your plants + + + Understand sunlight requirements for different plants + + + Choose the right soil for optimal plant growth + + + Apply fertilizer to keep your plants healthy + + +
```jsx Markdown @@ -102,13 +106,13 @@ You can use individual cards or arrange multiple cards in a responsive grid layo ### Custom icon
-} - href="/learn/docs/writing-content/components/cards" -> - Pass in an image tag to use a custom icon. - + } + href="/learn/docs/writing-content/components/cards" + > + Pass in an image tag to use a custom icon. +
```jsx Markdown @@ -124,13 +128,13 @@ You can use individual cards or arrange multiple cards in a responsive grid layo ### Custom icon position
- - You can set the icon position as `left` or `top`. - + + You can set the icon position as `left` or `top`. +
```jsx Markdown @@ -148,13 +152,13 @@ You can use individual cards or arrange multiple cards in a responsive grid layo Cards support displaying images alongside content. The image automatically resizes to fit the card dimensions, so you typically don't need to specify `imageWidth` or `imageHeight` unless you want to override the default behavior.
- - Display an image alongside your card content. The image automatically scales to fit the card. - + + Display an image alongside your card content. The image automatically scales to fit the card. +
```jsx Markdown @@ -167,13 +171,13 @@ Cards support displaying images alongside content. The image automatically resiz ```
- - Position the image at the top of the card for a banner-style layout. - + + Position the image at the top of the card for a banner-style layout. +
```jsx Markdown diff --git a/fern/products/docs/pages/component-library/default-components/embed.mdx b/fern/products/docs/pages/component-library/default-components/embed.mdx index 833f56c80..43a0f2c97 100644 --- a/fern/products/docs/pages/component-library/default-components/embed.mdx +++ b/fern/products/docs/pages/component-library/default-components/embed.mdx @@ -13,11 +13,11 @@ Embed local assets like PDFs, videos, and other media directly in your documenta ## Usage (embed video)
- +
```jsx Markdown - + ``` ## Variants @@ -29,13 +29,13 @@ Embed local assets like PDFs, videos, and other media directly in your documenta
-
```jsx Markdown -