diff --git a/fern/products/docs/pages/component-library/custom-components/css-selectors.mdx b/fern/products/docs/pages/component-library/custom-components/css-selectors.mdx
index 94e306c25..714c9284e 100644
--- a/fern/products/docs/pages/component-library/custom-components/css-selectors.mdx
+++ b/fern/products/docs/pages/component-library/custom-components/css-selectors.mdx
@@ -6,20 +6,16 @@ max-toc-depth: 3
-Complete reference of all `.fern-*` selectors available for customizing your documentation site.
-
-
- Fern selectors use Tailwind CSS utilities and CSS custom properties. Write custom styles that complement existing styles rather than override them completely.
-
+Fern selectors use Tailwind CSS utilities and CSS custom properties. This page is a reference of all `.fern-*` selectors for customizing your documentation site.
## Layout and structure
-Selectors for controlling the overall page layout, background styling, and page heading appearance.
+Selectors for page layout, backgrounds, and headings.
-Applies a fixed background image to the documentation layout that won't scroll with page content.
+Fixed background image.
```css Default CSS
.fern-background-image {
@@ -35,7 +31,7 @@ Applies a fixed background image to the documentation layout that won't scroll w
-Styles the primary heading (h1) on documentation pages with balanced text wrapping and automatic word breaking to prevent overflow.
+Primary page heading (h1).
```css Default CSS
.fern-page-heading {
@@ -52,7 +48,7 @@ Styles the primary heading (h1) on documentation pages with balanced text wrappi
-Main page layout container that provides consistent padding and minimum height.
+Page layout container.
```css Default CSS
.fern-layout-page {
@@ -73,7 +69,7 @@ Main page layout container that provides consistent padding and minimum height.
-Layout container for guide-style documentation pages with consistent spacing.
+Guide page layout.
```css Default CSS
.fern-layout-guide {
@@ -94,7 +90,7 @@ Layout container for guide-style documentation pages with consistent spacing.
-Layout container for API Reference pages with two-column grid support.
+API Reference layout with two-column grid.
```css Default CSS
.fern-layout-reference {
@@ -133,7 +129,7 @@ Layout container for API Reference pages with two-column grid support.
-Layout container for overview pages with consistent spacing.
+Overview page layout.
```css Default CSS
.fern-layout-overview {
@@ -154,7 +150,7 @@ Layout container for overview pages with consistent spacing.
-Layout container for changelog pages with responsive aside positioning.
+Changelog page layout.
```css Default CSS
.fern-layout-changelog[data-aside-state="hidden"] {
@@ -182,12 +178,12 @@ Layout container for changelog pages with responsive aside positioning.
## Header components
-Selectors for customizing the site header, including the logo container, search bar, navigation tabs, and mobile menu button.
+Selectors for the site header, tabs, and mobile menu.
-Container for the documentation site header with a frosted glass backdrop blur effect.
+Site header container.
```css Default CSS
.fern-header {
@@ -200,7 +196,7 @@ Container for the documentation site header with a frosted glass backdrop blur e
-Container for navigation tabs in the header, hidden on mobile and visible on desktop (1024px+) with matching blur effect.
+Header navigation tabs (desktop only).
```css Default CSS
.fern-header-tabs {
@@ -224,7 +220,7 @@ Container for navigation tabs in the header, hidden on mobile and visible on des
-Container for the site logo in the header.
+Header logo container.
```css Default CSS
.fern-header-logo-container {
@@ -244,7 +240,7 @@ Container for the site logo in the header.
-Container for the search input in the header, hidden on mobile and visible on desktop.
+Header search input (desktop only).
```css Default CSS
.fern-header-search-bar {
@@ -265,7 +261,7 @@ Container for the search input in the header, hidden on mobile and visible on de
-Container for navigation links in the header.
+Header navigation links container.
```css Default CSS
.fern-header-navbar-links {
@@ -286,7 +282,7 @@ Container for navigation links in the header.
-Button to toggle mobile navigation menu.
+Mobile menu toggle button.
```css Default CSS
.fern-header-mobile-menu-button {
@@ -302,12 +298,12 @@ Button to toggle mobile navigation menu.
## Sidebar components
-Selectors for styling the sidebar navigation, including headers, links, groups, and tabs.
+Selectors for sidebar navigation and tabs.
-Header section at the top of the sidebar.
+Top of sidebar.
```css Default CSS
.fern-sidebar-header {
@@ -331,7 +327,7 @@ Header section at the top of the sidebar.
-Heading for sidebar navigation sections.
+Sidebar section heading.
```css Default CSS
.fern-sidebar-heading {
@@ -356,7 +352,7 @@ Heading for sidebar navigation sections.
-Text content of sidebar section headings.
+Sidebar heading text.
```css Default CSS
.fern-sidebar-heading-content {
@@ -378,7 +374,7 @@ Text content of sidebar section headings.
-Individual navigation link in the sidebar with hover and active states using grayscale and accent colors.
+Sidebar link.
```css Default CSS
.fern-sidebar-link {
@@ -419,7 +415,7 @@ Individual navigation link in the sidebar with hover and active states using gra
-Text content of sidebar navigation links, truncated with ellipsis by default with optional marquee animation or wrapping.
+Sidebar link text.
```css Default CSS
.fern-sidebar-link-title {
@@ -444,7 +440,7 @@ Text content of sidebar navigation links, truncated with ellipsis by default wit
-Enables marquee animation for long sidebar link titles (disabled when `prefers-reduced-motion` is set).
+Long title marquee animation.
```css Default CSS
.fern-sidebar-link-title-inner {
@@ -469,7 +465,7 @@ Enables marquee animation for long sidebar link titles (disabled when `prefers-r
-Container for grouped sidebar navigation items.
+Grouped sidebar items.
```css Default CSS
.fern-sidebar-group {
@@ -495,7 +491,7 @@ Container for grouped sidebar navigation items.
-Container for tab navigation in the sidebar.
+Sidebar tab navigation.
```css Default CSS
.fern-sidebar-tabs {
@@ -512,12 +508,12 @@ Container for tab navigation in the sidebar.
## Navigation components
-Selectors for breadcrumb navigation elements and separators.
+Selectors for breadcrumb navigation.
-Container for breadcrumb navigation.
+Breadcrumb navigation.
```css Default CSS
.fern-breadcrumb {
@@ -534,7 +530,7 @@ Container for breadcrumb navigation.
-Individual link or text in breadcrumb navigation.
+Breadcrumb link or text.
```css Default CSS
.fern-breadcrumb-item {
@@ -549,7 +545,7 @@ Individual link or text in breadcrumb navigation.
-Separator icon between breadcrumb items.
+Breadcrumb separator.
```css Default CSS
.fern-breadcrumb-arrow {
@@ -567,11 +563,11 @@ Separator icon between breadcrumb items.
## Button components
-Selectors for styling buttons with various variants, sizes, and states.
+Selectors for buttons.
-Styled button element with multiple variants (minimal, filled, outlined, primary, success, warning, danger), size modifiers (small, large, square), and support for rounded and multiline styles.
+Button with variants.
```css Default CSS
.fern-button {
@@ -615,7 +611,7 @@ Styled button element with multiple variants (minimal, filled, outlined, primary
-Wrapper for button content including icons and text.
+Button content wrapper.
```css Default CSS
.fern-button-content {
@@ -632,7 +628,7 @@ Wrapper for button content including icons and text.
-Text element inside button.
+Button text.
```css Default CSS
.fern-button-text {
@@ -652,7 +648,7 @@ Text element inside button.
-Container for grouping multiple buttons together.
+Button group.
```css Default CSS
.fern-button-group {
@@ -671,7 +667,7 @@ Container for grouping multiple buttons together.
-Button for copying code snippets or text, appears on hover over [code blocks](/learn/docs/writing-content/components/code-blocks).
+Copy button for [code blocks](/learn/docs/writing-content/components/code-blocks).
```css Default CSS
.fern-copy-button {
@@ -685,7 +681,7 @@ Button for copying code snippets or text, appears on hover over [code blocks](/l
-Button for expanding code blocks or collapsible content, appears on [code blocks with `maxLines` set](/learn/docs/writing-content/components/code-blocks#max-height).
+Expand button for [`maxLines` code blocks](/learn/docs/writing-content/components/code-blocks#max-height).
```css Default CSS
.fern-expand-button {
@@ -699,7 +695,7 @@ Button for expanding code blocks or collapsible content, appears on [code blocks
-Container for page action buttons such as edit, feedback, and share buttons. Provides a grouped button appearance with borders between items.
+Page action buttons (edit, feedback, share).
```css Default CSS
.fern-page-actions {
@@ -722,12 +718,12 @@ Container for page action buttons such as edit, feedback, and share buttons. Pro
## Card components
-Selectors for [card-style content blocks](/learn/docs/writing-content/components/cards) with interactive and elevated variants.
+Selectors for [cards](/learn/docs/writing-content/components/cards).
-Container for card-style content blocks with interactive and elevated variants, automatically styling nested lists and adapting to dark mode.
+Card container.
```css Default CSS
.fern-card {
@@ -764,12 +760,12 @@ Container for card-style content blocks with interactive and elevated variants,
## Form components
-Selectors for form inputs, text areas, checkboxes, radio buttons, and other form controls.
+Selectors for form inputs and controls.
-Styled text input element with hidden number spinners and increased font size on mobile for better usability.
+Text input.
```css Default CSS
.fern-input {
@@ -803,7 +799,7 @@ input.fern-input[type="number"] {
-Container for input with additional elements (icons, buttons), with focus ring and error state styling.
+Input container with focus ring.
```css Default CSS
.fern-input-group {
@@ -844,7 +840,7 @@ Container for input with additional elements (icons, buttons), with focus ring a
-Icon element within input group.
+Input icon.
```css Default CSS
.fern-input-icon {
@@ -866,7 +862,7 @@ Icon element within input group.
-Element positioned on the right side of input (e.g., clear button).
+Right-side input element.
```css Default CSS
.fern-input-right-element {
@@ -886,7 +882,7 @@ Element positioned on the right side of input (e.g., clear button).
-Clear button inside input fields that allows users to clear the input value.
+Input clear button.
```css Default CSS
.fern-input-clear-button {
@@ -913,7 +909,7 @@ Clear button inside input fields that allows users to clear the input value.
-Multi-line text input element.
+Multi-line text input.
```css Default CSS
.fern-textarea {
@@ -938,7 +934,7 @@ Multi-line text input element.
-Container for textarea with additional styling.
+Textarea container.
```css Default CSS
.fern-textarea-group {
@@ -968,7 +964,7 @@ Container for textarea with additional styling.
-Label element wrapping checkbox input.
+Checkbox label.
```css Default CSS
.fern-checkbox-label {
@@ -981,7 +977,7 @@ Label element wrapping checkbox input.
-Styled checkbox input.
+Checkbox input.
```css Default CSS
.fern-checkbox-item {
@@ -1008,7 +1004,7 @@ Styled checkbox input.
-Visual indicator when checkbox is checked.
+Checked indicator.
```css Default CSS
.fern-checkbox-indicator {
@@ -1027,7 +1023,7 @@ Visual indicator when checkbox is checked.
-Container for grouped radio buttons.
+Radio button group.
```css Default CSS
.fern-radio-group {
@@ -1046,7 +1042,7 @@ Container for grouped radio buttons.
-Label element wrapping radio input.
+Radio label.
```css Default CSS
.fern-radio-label {
@@ -1059,7 +1055,7 @@ Label element wrapping radio input.
-Styled radio button input.
+Radio button input.
```css Default CSS
.fern-radio-item {
@@ -1086,7 +1082,7 @@ Styled radio button input.
-Visual indicator when radio button is selected.
+Selected indicator.
```css Default CSS
.fern-radio-indicator {
@@ -1113,7 +1109,7 @@ Visual indicator when radio button is selected.
-Toggle control with multiple options.
+Segmented toggle control.
```css Default CSS
.fern-segmented-control {
@@ -1144,7 +1140,7 @@ Toggle control with multiple options.
-Number input with increment/decrement buttons.
+Numeric input with stepper buttons.
```css Default CSS
.fern-numeric-input-group {
@@ -1175,7 +1171,7 @@ Number input with increment/decrement buttons.
-Increment/decrement button in numeric input.
+Numeric input stepper button.
```css Default CSS
.fern-numeric-input-group .fern-numeric-input-step {
@@ -1212,12 +1208,12 @@ Increment/decrement button in numeric input.
## Dropdown and selection components
-Selectors for dropdown menus, selection items, and [product selector components](/learn/docs/configuration/products).
+Selectors for dropdowns and the [product selector](/learn/docs/configuration/products).
-Container for dropdown menu content.
+Dropdown menu container.
```css Default CSS
.fern-dropdown {
@@ -1240,7 +1236,7 @@ Container for dropdown menu content.
-Individual selectable item in dropdown.
+Dropdown menu item.
```css Default CSS
.fern-dropdown-item {
@@ -1265,7 +1261,7 @@ Individual selectable item in dropdown.
-Icon showing selected state in dropdown item.
+Dropdown selection indicator.
```css Default CSS
.fern-dropdown-item-indicator {
@@ -1283,7 +1279,7 @@ Icon showing selected state in dropdown item.
-Large selectable item with icon and title, used in product selector.
+Selection item.
```css Default CSS
.fern-selection-item {
@@ -1311,7 +1307,7 @@ Large selectable item with icon and title, used in product selector.
-Icon container in selection item.
+Selection item icon.
```css Default CSS
.fern-selection-item-icon {
@@ -1357,7 +1353,7 @@ Icon container in selection item.
-Title text in selection item.
+Selection item title.
```css Default CSS
.fern-selection-item-title {
@@ -1377,7 +1373,7 @@ Title text in selection item.
-Icon at the end of selection item (e.g., arrow).
+Selection item end icon.
```css Default CSS
.fern-selection-item-end-icon {
@@ -1389,7 +1385,7 @@ Icon at the end of selection item (e.g., arrow).
-Container for product selection dropdown applied to the FernDropdown component wrapper. Custom styling can be applied for specific layouts. See the [fern-api/docs repo `styles.css` file](https://github.com/fern-api/docs/blob/main/fern/assets/styles.css) for advanced customization examples.
+Product selector. See [`styles.css`](https://github.com/fern-api/docs/blob/main/fern/assets/styles.css) for examples.
```css Default CSS
.fern-product-selector {
@@ -1407,19 +1403,19 @@ Container for product selection dropdown applied to the FernDropdown component w
-Radio button group within the product selector dropdown. Can be customized with CSS grid for multi-column layouts. See the [fern-api/docs repo `styles.css` file](https://github.com/fern-api/docs/blob/main/fern/assets/styles.css) for examples.
+Product selector radio group. See [`styles.css`](https://github.com/fern-api/docs/blob/main/fern/assets/styles.css) for examples.
## Accordion components
-Selectors for [expandable accordion containers](/learn/docs/writing-content/components/accordions), items, triggers, and animations.
+Selectors for [accordions](/learn/docs/writing-content/components/accordions).
-Container for accordion component.
+Accordion container.
```css Default CSS
.fern-accordion {
@@ -1436,7 +1432,7 @@ Container for accordion component.
-Single expandable item in accordion.
+Accordion item.
```css Default CSS
.fern-accordion-item {
@@ -1458,7 +1454,7 @@ Single expandable item in accordion.
-Clickable trigger to expand/collapse accordion item.
+Expand/collapse trigger.
```css Default CSS
.fern-accordion-trigger {
@@ -1492,7 +1488,7 @@ Clickable trigger to expand/collapse accordion item.
-Arrow icon indicating expand/collapse state.
+Expand/collapse arrow.
```css Default CSS
.fern-accordion-trigger-arrow {
@@ -1512,7 +1508,7 @@ Arrow icon indicating expand/collapse state.
-Title text in accordion trigger.
+Accordion trigger title.
```css Default CSS
.fern-accordion-trigger-title {
@@ -1538,12 +1534,12 @@ Title text in accordion trigger.
## Scroll area components
-Selectors for custom scrollable areas with styled scrollbars and viewports.
+Selectors for scrollable areas.
-Container for custom scrollable area.
+Scrollable area container.
```css Default CSS
.fern-scroll-area {
@@ -1560,7 +1556,7 @@ Container for custom scrollable area.
-Viewport element containing scrollable content.
+Scroll viewport.
```css Default CSS
.fern-scroll-area-viewport {
@@ -1591,7 +1587,7 @@ Viewport element containing scrollable content.
-Styled scrollbar element.
+Scrollbar.
```css Default CSS
.fern-scroll-area-scrollbar {
@@ -1635,7 +1631,7 @@ Styled scrollbar element.
-Draggable thumb element in scrollbar. The `::before` pseudo-element increases touch target size for accessibility.
+Scrollbar thumb.
```css Default CSS
.fern-scroll-area-thumb {
@@ -1664,7 +1660,7 @@ Draggable thumb element in scrollbar. The `::before` pseudo-element increases to
-Corner element where horizontal and vertical scrollbars meet.
+Scrollbar corner.
```css Default CSS
.fern-scroll-area-corner {
@@ -1677,12 +1673,12 @@ Corner element where horizontal and vertical scrollbars meet.
## Badge components
-Selectors for [small labels and status indicators](/learn/docs/writing-content/components/badges), including HTTP method and status code badges.
+Selectors for [badges](/learn/docs/writing-content/components/badges) and HTTP method tags.
-Small badge for labels, status indicators, HTTP methods, etc. HTTP method badges use monospace font and support color variants based on HTTP method or status code.
+Badge for labels, status, and HTTP methods.
```css Default CSS
.fern-docs-badge {
@@ -1732,12 +1728,12 @@ Small badge for labels, status indicators, HTTP methods, etc. HTTP method badges
## MDX content components
-Selectors for content elements within MDX documentation, including links, callouts, steps, and tables.
+Selectors for links, callouts, steps, and tables.
-Styled link element in documentation content. External links automatically get an icon, and underline thickness increases on hover.
+Link with external icon and hover underline.
```css Default CSS
.fern-mdx-link {
@@ -1774,7 +1770,7 @@ Styled link element in documentation content. External links automatically get a
-Highlighted [callout](/learn/docs/writing-content/components/callouts) box for important information. Each intent has matching background, border, and text colors, and icons within callouts are automatically colored.
+[Callout](/learn/docs/writing-content/components/callouts) with intent-matched colors.
```css Default CSS
.fern-callout {
@@ -1804,7 +1800,7 @@ Highlighted [callout](/learn/docs/writing-content/components/callouts) box for i
-Container for [indented content](/learn/docs/writing-content/components/indent) with a vertical guide line. Creates left indentation with spacing between child elements. The guide line is rendered using a `::before` pseudo-element with a transparent border by default; customize it by setting `border-left-color` on `.fern-indent::before`.
+[Indent](/learn/docs/writing-content/components/indent) with vertical guide line.
```css Default CSS
.fern-indent {
@@ -1831,7 +1827,7 @@ Container for [indented content](/learn/docs/writing-content/components/indent)
-Container for [step-by-step instructions](/learn/docs/writing-content/components/steps).
+[Steps](/learn/docs/writing-content/components/steps) container.
```css Default CSS
.fern-steps {
@@ -1847,7 +1843,7 @@ Container for [step-by-step instructions](/learn/docs/writing-content/components
-Single step in [steps component](/learn/docs/writing-content/components/steps).
+Single [step](/learn/docs/writing-content/components/steps).
```css Default CSS
.fern-step > .fern-anchor {
@@ -1861,7 +1857,7 @@ Single step in [steps component](/learn/docs/writing-content/components/steps).
-Anchor link for [deep linking to sections](/learn/docs/writing-content/components/anchor). Positioned absolutely within step components and includes a `.fern-anchor-icon` child element with hover and copied states.
+[Anchor](/learn/docs/writing-content/components/anchor) for deep linking.
```css Default CSS
a.fern-anchor {
@@ -1912,7 +1908,7 @@ a.fern-anchor {
-Root container for table component with card-style styling. Used for custom table implementations and provides base styling for table layouts.
+Table container.
```css Default CSS
.fern-table-root {
@@ -1931,7 +1927,7 @@ Root container for table component with card-style styling. Used for custom tabl
-Styled table element with consistent spacing and borders. Supports a `.sticky` modifier for [sticky table headers](/learn/docs/writing-content/components/tables#sticky-tables) that remain visible during scrolling.
+Table with `.sticky` support for [sticky headers](/learn/docs/writing-content/components/tables#sticky-tables).
```css Default CSS
.fern-table {
@@ -1978,12 +1974,12 @@ Styled table element with consistent spacing and borders. Supports a `.sticky` m
## Changelog filter components
-Selectors for customizing the changelog filter UI, including the filter dropdown button, filter badges, and dropdown menu items. These selectors only appear on [changelog pages](/learn/docs/configuration/changelogs) that have tags configured.
+Selectors for changelog filter UI. Only on [changelog pages](/learn/docs/configuration/changelogs) with tags.
-The button that opens the changelog filter dropdown menu. This selector is applied when there are more than 5 filter options.
+Filter dropdown trigger button.
```css Default CSS
.fern-filter-dropdown-button {
@@ -2008,7 +2004,7 @@ The button that opens the changelog filter dropdown menu. This selector is appli
-The text content inside the filter dropdown button (e.g., "Select filters" or the selected filter names).
+Filter button text.
```css Default CSS
.fern-filter-dropdown-button-text {
@@ -2032,7 +2028,7 @@ The text content inside the filter dropdown button (e.g., "Select filters" or th
-The chevron icon inside the filter dropdown button.
+Filter button chevron.
```css Default CSS
.fern-filter-dropdown-button-icon {
@@ -2052,7 +2048,7 @@ The chevron icon inside the filter dropdown button.
-Individual filter option items inside the dropdown menu.
+Filter dropdown item.
```css Default CSS
.fern-filter-dropdown-item {
@@ -2076,7 +2072,7 @@ Individual filter option items inside the dropdown menu.
-Base class applied to all filter badges displayed on changelog entries. Use this selector in combination with `.fern-filter-badge-selected` or `.fern-filter-badge-unselected` for state-specific styling.
+Filter badge base class.
```css Default CSS
.fern-filter-badge {
@@ -2092,7 +2088,7 @@ Base class applied to all filter badges displayed on changelog entries. Use this
-Applied to filter badges that are selected, in addition to `.fern-filter-badge`.
+Selected filter badge.
```css Default CSS
.fern-filter-badge-selected {
@@ -2113,7 +2109,7 @@ Applied to filter badges that are selected, in addition to `.fern-filter-badge`.
-Applied to filter badges that aren't selected, in addition to `.fern-filter-badge`.
+Unselected filter badge.
```css Default CSS
.fern-filter-badge-unselected {
@@ -2134,7 +2130,7 @@ Applied to filter badges that aren't selected, in addition to `.fern-filter-badg
-The checkmark icon shown for selected items in filter dropdowns and other multi-select dropdowns.
+Filter dropdown checkmark.
```css Default CSS
.fern-dropdown-checkmark {
@@ -2158,15 +2154,14 @@ The checkmark icon shown for selected items in filter dropdowns and other multi-
-
## API Reference components
-Selectors for [API Reference documentation](/learn/docs/api-references/generate-api-ref), including property names, metadata, and containers.
+Selectors for [API Reference](/learn/docs/api-references/generate-api-ref) components.
-Container for API property documentation.
+API property container.
```css Default CSS
.fern-api-property {
@@ -2186,7 +2181,7 @@ Container for API property documentation.
-Header section of API property.
+API property header.
```css Default CSS
.fern-api-property-header {
@@ -2200,7 +2195,7 @@ Header section of API property.
-Property name in API documentation.
+API property name.
```css Default CSS
.fern-api-property-key {
@@ -2215,7 +2210,7 @@ Property name in API documentation.
-Metadata for API property (type, required, etc.).
+API property metadata (type, required).
```css Default CSS
.fern-api-property-meta {
@@ -2231,7 +2226,7 @@ Metadata for API property (type, required, etc.).
-Constraint information displayed for API properties such as minimum/maximum values, patterns, or other validation rules.
+API property constraint.
```css Default CSS
.fern-api-property-constraint {
@@ -2246,12 +2241,12 @@ Constraint information displayed for API properties such as minimum/maximum valu
## Utility components
-Selectors for miscellaneous utility elements like highlights, [icons](/learn/docs/writing-content/components/icons), [tooltips](/learn/docs/writing-content/components/tooltips), and footer.
+Selectors for [icons](/learn/docs/writing-content/components/icons), [tooltips](/learn/docs/writing-content/components/tooltips), and other elements.
-Highlighted/emphasized text element.
+Highlighted text.
```css Default CSS
.fern-highlight {
@@ -2265,7 +2260,7 @@ Highlighted/emphasized text element.
-Icon element in documentation content for inline icons in text. Automatically adapts to light and dark mode using CSS variables.
+Inline icon (adapts to theme).
```css Default CSS
.fern-mdx-icon {
@@ -2285,7 +2280,7 @@ Icon element in documentation content for inline icons in text. Automatically ad
-Element that triggers tooltip on hover for inline tooltips. Provides CSS custom properties (`--tooltip-underline-color`, `--tooltip-underline-hover-color`, etc.) for customizing underline appearance.
+Tooltip trigger with underline.
```css Default CSS
.fern-mdx-tooltip-trigger {
@@ -2312,7 +2307,7 @@ Element that triggers tooltip on hover for inline tooltips. Provides CSS custom
-Content displayed in tooltip, positioned absolutely relative to trigger. Provides a `--tooltip-padding-x` CSS custom property for customizing horizontal padding.
+Tooltip content.
```css Default CSS
.fern-mdx-tooltip-content {
@@ -2327,7 +2322,7 @@ Content displayed in tooltip, positioned absolutely relative to trigger. Provide
-Icon representing a file type used in selection items and file browsers. Automatically scales to 1.2× on hover when used within `.fern-selection-item`.
+File type icon.
```css Default CSS
.fern-selection-item-icon .fern-file-icon {
@@ -2346,7 +2341,7 @@ Icon representing a file type used in selection items and file browsers. Automat
-Child element within collapsible content for nested collapsible sections. Automatically animates with slide-down and slide-up effects when parent collapsible opens or closes.
+Collapsible child element.
```css Default CSS
.fern-collapsible[data-state="open"] .fern-collapsible-child {
@@ -2382,7 +2377,7 @@ Child element within collapsible content for nested collapsible sections. Automa
-[Interactive API endpoint that can be executed](/learn/docs/writing-content/components/runnable-endpoint) in API playground features. Provides special styling for lists, buttons, and disabled inputs within the component.
+[Runnable endpoint](/learn/docs/writing-content/components/runnable-endpoint).
```css Default CSS
.fern-runnable-endpoint ul {
@@ -2414,7 +2409,7 @@ Child element within collapsible content for nested collapsible sections. Automa
-Button for subscribing to RSS feeds.
+RSS feed button.
```css Default CSS
.fern-rss-feed-button .fern-button-content {
@@ -2426,7 +2421,7 @@ Button for subscribing to RSS feeds.
-Container for documentation footer.
+Documentation footer.
```css Default CSS
.fern-layout-footer.not-prose {
@@ -2438,7 +2433,7 @@ Container for documentation footer.
-Toolbar within the footer containing navigation and action buttons.
+Footer toolbar.
```css Default CSS
.fern-layout-footer-toolbar {
@@ -2459,7 +2454,7 @@ Toolbar within the footer containing navigation and action buttons.
-Container for the previous/next page navigation at the bottom of documentation pages.
+Previous/next page navigation.
```css Default CSS
.fern-footer-nav {
@@ -2479,7 +2474,7 @@ Container for the previous/next page navigation at the bottom of documentation p
-Previous page link in footer navigation.
+Previous page link.
```css Default CSS
.fern-footer-prev {
@@ -2497,7 +2492,7 @@ Previous page link in footer navigation.
-Next page link in footer navigation with card-style appearance.
+Next page link.
```css Default CSS
.fern-footer-next {
@@ -2527,12 +2522,12 @@ Next page link in footer navigation with card-style appearance.
## Changelog components
-Selectors for styling [changelog pages](/learn/docs/configuration/changelogs), including the main container, individual entries, and date displays.
+Selectors for [changelog pages](/learn/docs/configuration/changelogs).
-Main container for changelog pages with responsive layout.
+Changelog page container.
```css Default CSS
.fern-changelog {
@@ -2572,7 +2567,7 @@ Main container for changelog pages with responsive layout.
-Individual changelog entry container.
+Changelog entry.
```css Default CSS
.fern-changelog-entry {
@@ -2597,7 +2592,7 @@ Individual changelog entry container.
-Date display for changelog entries, positioned in sidebar on larger screens.
+Changelog date.
```css Default CSS
.fern-changelog-date {
@@ -2618,7 +2613,7 @@ Date display for changelog entries, positioned in sidebar on larger screens.
-Content area within changelog entries.
+Changelog content area.
```css Default CSS
.fern-changelog-content {
@@ -2637,7 +2632,7 @@ Content area within changelog entries.
-Label container for changelog entry metadata and filter badges.
+Changelog entry label.
```css Default CSS
.fern-changelog-label {
@@ -2656,180 +2651,3 @@ Label container for changelog entry metadata and filter badges.
-
-## Light and dark mode customization
-
-Techniques for creating styles that automatically adapt between light and dark themes using CSS variables.
-
-Fern applies theme-specific CSS variables that automatically adapt to light and dark modes. Light mode uses the `.light` and `:root` selectors, while dark mode uses the `.dark` selector. Use Fern's CSS custom properties so your styles automatically adapt across themes.
-
-
-
-
-Fern automatically generates CSS variables from your [`docs.yml` colors configuration](/learn/docs/configuration/site-level-settings#colors-configuration). Colors are converted to [oklch](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) for consistent color management, with hex fallbacks for unsupported browsers.
-
-**Accent and grayscale scales:**
-- `--accent-1` through `--accent-12` — accent color scale (generated from `accent-primary`)
-- `--accent-a1` through `--accent-a12` — accent color scale with alpha transparency
-- `--grayscale-1` through `--grayscale-12` — grayscale color scale
-- `--grayscale-a1` through `--grayscale-a12` — grayscale with alpha transparency
-
-**Named color scales:**
-
-Fern also generates named color scales that follow [Radix UI's step paradigms](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale). These match your `accent-primary` hue and include scales like `--red-1` through `--red-12`, `--blue-1` through `--blue-12`, and so on for other colors.
-
-**Theme variables:**
-- `--background` — page background color
-- `--card-background` — card background color
-- `--border` — border color
-- `--sidebar-background` — sidebar background color
-- `--header-background` — header background color
-- `--accent` — primary accent color
-
-
-
-
-
-Use CSS variables to create backgrounds that automatically adapt to the theme. Override with `.dark` selector only when you need theme-specific styling.
-
-```css
-/* Auto-adapts using Fern variables */
-.fern-background-image {
- background-color: var(--background);
- background-image: linear-gradient(
- to bottom,
- color-mix(in srgb, var(--accent-9), var(--background) 85%) 0%,
- var(--background) 100%
- );
-}
-
-/* Explicit dark mode override for different gradient direction */
-.dark .fern-background-image {
- background-image: linear-gradient(
- to bottom,
- var(--background) 0%,
- color-mix(in srgb, var(--accent-9), var(--background) 85%) 100%
- );
-}
-```
-
-
-
-
-
-Cards automatically adapt to theme changes when using CSS variables. Add explicit dark mode overrides only for properties like shadows that need theme-specific values.
-
-```css
-/* Plant catalog card that adapts to theme */
-.fern-card.plant-card {
- background-color: var(--card-background);
- border-color: var(--border);
- color: var(--grayscale-12);
- box-shadow: 0 1px 2px var(--grayscale-a3);
-}
-
-.fern-card.plant-card.interactive:hover {
- box-shadow: 0 4px 12px var(--accent-a6);
-}
-
-/* Dark mode shadow adjustment */
-.dark .fern-card.plant-card {
- box-shadow: 0 2px 6px var(--grayscale-a4);
-}
-```
-
-
-
-
-
-Text colors automatically adapt when using Fern's grayscale and accent variables. Use `--grayscale-12` for primary text, `--grayscale-a11` for secondary text, and `--accent-11` for links.
-
-```css
-/* Plant species content */
-.plant-content {
- color: var(--grayscale-12);
-}
-
-.plant-content .description {
- color: var(--grayscale-a11);
-}
-
-.plant-content a {
- color: var(--accent-11);
- text-decoration-color: color-mix(in srgb, var(--accent-11), transparent 50%);
-}
-
-.plant-content a:hover {
- color: var(--accent-12);
-}
-```
-
-
-
-
-
-There are multiple approaches for adapting images to light and dark modes.
-
-**SVG icons with currentColor (recommended):**
-
-```html HTML
-
-```
-
-```css CSS
-.plant-icon {
- color: var(--grayscale-11);
-}
-
-.plant-icon.accent {
- color: var(--accent-11);
-}
-```
-
-**Swapping background images:**
-
-```css CSS
-.hero-plant {
- background-image: url('/assets/plants/hero-light.png');
- background-size: cover;
- background-position: center;
-}
-
-.dark .hero-plant {
- background-image: url('/assets/plants/hero-dark.png');
-}
-```
-
-**Using picture element with prefers-color-scheme:**
-
-```html HTML
-
-
-
-
-```
-
-
- The `prefers-color-scheme` media query follows the operating system theme preference and may not match a manual theme toggle on your site. For perfect alignment with Fern's theme switcher, use the `.dark` selector approach instead.
-
-
-**Using CSS filters (last resort):**
-
-```css CSS
-.logo-monochrome {
- filter: grayscale(1);
-}
-
-.dark .logo-monochrome {
- filter: invert(1) grayscale(1);
-}
-```
-
-
- Avoid hardcoding hex colors in your custom CSS. Always use Fern's CSS variables to maintain proper contrast and theme consistency.
-
-
-
-
diff --git a/fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx b/fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx
index e90f61bbb..77dcc7e29 100644
--- a/fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx
+++ b/fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx
@@ -67,11 +67,185 @@ check out the [Global Configuration](/learn/docs/configuration/site-level-settin
### Built-in CSS color variables
-Colors set in your [`docs.yml` colors configuration](/learn/docs/configuration/site-level-settings#colors-configuration) are automatically available as CSS custom properties in your stylesheets. You don't need to redefine them — use these variables in your custom CSS to stay consistent with your site's theme and ensure styles adapt automatically between light and dark modes.
+Fern automatically generates CSS variables from your [`docs.yml` colors configuration](/learn/docs/configuration/site-level-settings#colors-configuration) and makes them available as CSS custom properties in your stylesheets. Colors are converted to [oklch](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) for consistent color management, with hex fallbacks for unsupported browsers. These variables adapt automatically between light and dark modes — light mode uses the `.light` and `:root` selectors, while dark mode uses the `.dark` selector.
-For example, `--accent-1` through `--accent-12` provide your accent color scale, `--grayscale-1` through `--grayscale-12` provide grayscale, and variables like `--background`, `--card-background`, and `--border` give you theme-level colors.
+
+
+
+- `--accent-1` through `--accent-12` — accent color scale (generated from `accent-primary`)
+- `--accent-a1` through `--accent-a12` — accent color scale with alpha transparency
+- `--grayscale-1` through `--grayscale-12` — grayscale color scale
+- `--grayscale-a1` through `--grayscale-a12` — grayscale with alpha transparency
+
+
+
+
+
+Fern also generates named color scales that follow [Radix UI's step paradigms](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale). These match your `accent-primary` hue and include scales like `--red-1` through `--red-12`, `--blue-1` through `--blue-12`, and so on for other colors.
+
+
+
+
+
+- `--background` — page background color
+- `--card-background` — card background color
+- `--border` — border color
+- `--sidebar-background` — sidebar background color
+- `--header-background` — header background color
+- `--accent` — primary accent color
+
+
+
+
+The accordions below show common patterns for using these variables to theme backgrounds, cards, text, and images.
+
+
+
+
+
+Use CSS variables to create backgrounds that automatically adapt to the theme. Override with `.dark` selector only when you need theme-specific styling.
+
+```css
+/* Auto-adapts using Fern variables */
+.fern-background-image {
+ background-color: var(--background);
+ background-image: linear-gradient(
+ to bottom,
+ color-mix(in srgb, var(--accent-9), var(--background) 85%) 0%,
+ var(--background) 100%
+ );
+}
+
+/* Explicit dark mode override for different gradient direction */
+.dark .fern-background-image {
+ background-image: linear-gradient(
+ to bottom,
+ var(--background) 0%,
+ color-mix(in srgb, var(--accent-9), var(--background) 85%) 100%
+ );
+}
+```
+
+
+
+
+
+Cards automatically adapt to theme changes when using CSS variables. Add explicit dark mode overrides only for properties like shadows that need theme-specific values.
+
+```css
+/* Plant catalog card that adapts to theme */
+.fern-card.plant-card {
+ background-color: var(--card-background);
+ border-color: var(--border);
+ color: var(--grayscale-12);
+ box-shadow: 0 1px 2px var(--grayscale-a3);
+}
+
+.fern-card.plant-card.interactive:hover {
+ box-shadow: 0 4px 12px var(--accent-a6);
+}
+
+/* Dark mode shadow adjustment */
+.dark .fern-card.plant-card {
+ box-shadow: 0 2px 6px var(--grayscale-a4);
+}
+```
+
+
+
+
+
+Text colors automatically adapt when using Fern's grayscale and accent variables. Use `--grayscale-12` for primary text, `--grayscale-a11` for secondary text, and `--accent-11` for links.
+
+```css
+/* Plant species content */
+.plant-content {
+ color: var(--grayscale-12);
+}
+
+.plant-content .description {
+ color: var(--grayscale-a11);
+}
+
+.plant-content a {
+ color: var(--accent-11);
+ text-decoration-color: color-mix(in srgb, var(--accent-11), transparent 50%);
+}
+
+.plant-content a:hover {
+ color: var(--accent-12);
+}
+```
+
+
+
+
+
+There are multiple approaches for adapting images to light and dark modes.
+
+**SVG icons with currentColor (recommended):**
+
+```html HTML
+
+```
+
+```css CSS
+.plant-icon {
+ color: var(--grayscale-11);
+}
+
+.plant-icon.accent {
+ color: var(--accent-11);
+}
+```
-For the full list of available CSS variables, color scales, and theme customization techniques, see the [CSS selectors reference](/learn/docs/customization/css-selectors-reference#light-and-dark-mode-customization).
+**Swapping background images:**
+
+```css CSS
+.hero-plant {
+ background-image: url('/assets/plants/hero-light.png');
+ background-size: cover;
+ background-position: center;
+}
+
+.dark .hero-plant {
+ background-image: url('/assets/plants/hero-dark.png');
+}
+```
+
+**Using picture element with prefers-color-scheme:**
+
+```html HTML
+
+
+
+
+```
+
+
+ The `prefers-color-scheme` media query follows the operating system theme preference and may not match a manual theme toggle on your site. For perfect alignment with Fern's theme switcher, use the `.dark` selector approach instead.
+
+
+**Using CSS filters (last resort):**
+
+```css CSS
+.logo-monochrome {
+ filter: grayscale(1);
+}
+
+.dark .logo-monochrome {
+ filter: invert(1) grayscale(1);
+}
+```
+
+
+ Avoid hardcoding hex colors in your custom CSS. Always use Fern's CSS variables to maintain proper contrast and theme consistency.
+
+
+
+
### Common use cases
diff --git a/fern/products/docs/pages/customization/site-level-settings.mdx b/fern/products/docs/pages/customization/site-level-settings.mdx
index 441c76c4a..82a66842f 100644
--- a/fern/products/docs/pages/customization/site-level-settings.mdx
+++ b/fern/products/docs/pages/customization/site-level-settings.mdx
@@ -157,7 +157,7 @@ instances:
## Colors configuration
-Configure your documentation's color palette for both light and dark modes. Only `accent-primary` is required — all other colors have sensible defaults. These colors are also automatically available as [CSS custom properties](/learn/docs/customization/css-selectors-reference#light-and-dark-mode-customization) in your custom stylesheets.
+Configure your documentation's color palette for both light and dark modes. Only `accent-primary` is required — all other colors have sensible defaults. These colors are also automatically available as [CSS custom properties](/learn/docs/customization/custom-css-and-js#built-in-css-color-variables) in your custom stylesheets.
```yaml docs.yml
colors:
-