icon

number

Theme variables

This reference documents all available customizable theme variables that can be added to your retype.yml file. Each variable can be overridden in both base (light mode) and dark (dark mode) configurations.

The following demonstrates a basic configuration where the base-color and background color are configured with custom values:

theme:
  base:
    base-color: "#8839ef"
    base-bg: "#eff1f5"
  dark:
    base-color: "#ca9ee6"
    base-bg: "#303446"

!!!base Pro Feature The theme functionality requires a Retype Pro key or adding the following pro trial mode setting into your project retype.yml configuration file:

start
  pro: true

!!!

Base{#base-variables}

Core variables that define the fundamental appearance of your site.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`base-color`	Brand color	`#5495f1`	`#5495f1`
`base-white`	Pure white color	`#ffffff`	`#ffffff`
`base-black`	Pure black color	`#000000`	`#000000`
`base-dark`	Pure dark color	`#121212`	`#121212`
`base-bg`	Main background color	`base-white`	`dark-900`
`base-text`	Primary text color	`gray-700`	`dark-300`
`base-text-muted`	Muted text color	`gray-400`	`gray-400`
`base-text-strong`	Strong/bold text color	`gray-900`	`base-white`
`base-border`	Default border color	`gray-200`	`dark-650`
`base-border-hover`	Border color on hover	`gray-300`	`gray-550`
`base-border-strong`	Strong border color	`gray-400`	`gray-450`
`base-link`	Link color	`base-500`	`base-500`
`base-link-hover`	Link hover color	`base-800`	`base-300`
`base-link-weight`	Link font weight	`500`	`500`
`base-item-text`	Base item text color	`base-text-strong`	`base-text-strong`
`base-item-text-active`	Active base item text color	`base-link`	`base-link`
`base-item-bg`	Base item background	`transparent`	`transparent`
`base-item-bg-hover`	Base item hover background	`base-50`	`dark-600`
`base-item-bg-active`	Active base item background	`base-100`	`dark-550`

Variants

Semantic color variants are used throughout Retype components. These colors provide consistent theming for different types of content and actions. Each variant is available as a full color palette from 50 (lightest) to 900 (darkest).

Variable {.whitespace-nowrap}	Description	Default `base`
`base`	Foundation brand color for main actions and highlights	`#5495f1`
`primary`	Primary color variant used for actions, highlights, and key elements across components	`#5495f1`
`success`	Success state color for positive actions and confirmations	`#36ad99`
`danger`	Danger/error state color for warnings and destructive actions	`#e53e3e`
`warning`	Warning state color for caution and important notices	`#edab26`
`royal`	Royal purple color for special emphasis and premium features	`#a667e3`

Color Palettes

System elements and base variants for Components are derived from the base-color using the base color palette.

Base

Color variations based on your base-color setting:

Variable {.whitespace-nowrap}	Description
`base-50`	Lightest base color shade (10% mix with white)
`base-100`	Very light base color shade (15% mix with white)
`base-200`	Light base color shade (30% mix with white)
`base-300`	Medium-light base color shade (50% mix with white)
`base-400`	Medium base color shade (70% mix with white)
`base-500`	Base color (same as `base-color`)
`base-600`	Medium-dark base color shade (90% mix with black)
`base-700`	Dark base color shade (80% mix with black)
`base-800`	Very dark base color shade (60% mix with black)
`base-900`	Darkest base color shade (40% mix with black)

Semantic Color Palettes

Each semantic color includes shades from 50 (lightest) to 900 (darkest):

The semantic color shades follow a consistent pattern where:

Lower numbers (50-400) are lighter shades created by mixing with white
Higher numbers (600-900) are darker shades created by mixing with black
The mid color 500 of each sequence represents the pure color for that sequence

Primary

Semantic palette primary with shades 50 through 900:

Shade	Description
`primary-50`	Lightest primary shade (10% mix with white)
`primary-100`	Very light primary shade (15% mix with white)
`primary-200`	Light primary shade (30% mix with white)
`primary-300`	Medium-light primary shade (50% mix with white)
`primary-400`	Medium primary shade (70% mix with white)
`primary-500`	Base primary color (`#5495f1`)
`primary-600`	Medium-dark primary shade (90% mix with black)
`primary-700`	Dark primary shade (80% mix with black)
`primary-800`	Very dark primary shade (60% mix with black)
`primary-900`	Darkest primary shade (40% mix with black)

Success

Semantic palette success with shades 50 through 900:

Shade	Description
`success-50`	Lightest success shade (10% mix with white)
`success-100`	Very light success shade (15% mix with white)
`success-200`	Light success shade (30% mix with white)
`success-300`	Medium-light success shade (50% mix with white)
`success-400`	Medium success shade (70% mix with white)
`success-500`	Base success color (`#36ad99`)
`success-600`	Medium-dark success shade (90% mix with black)
`success-700`	Dark success shade (80% mix with black)
`success-800`	Very dark success shade (60% mix with black)
`success-900`	Darkest success shade (40% mix with black)

Danger

Semantic palette danger with shades 50 through 900:

Shade	Description
`danger-50`	Lightest danger shade (10% mix with white)
`danger-100`	Very light danger shade (15% mix with white)
`danger-200`	Light danger shade (30% mix with white)
`danger-300`	Medium-light danger shade (50% mix with white)
`danger-400`	Medium danger shade (70% mix with white)
`danger-500`	Base danger color (`#e53e3e`)
`danger-600`	Medium-dark danger shade (90% mix with black)
`danger-700`	Dark danger shade (80% mix with black)
`danger-800`	Very dark danger shade (60% mix with black)
`danger-900`	Darkest danger shade (40% mix with black)

Warning

Semantic palette warning with shades 50 through 900:

Shade	Description
`warning-50`	Lightest warning shade (10% mix with white)
`warning-100`	Very light warning shade (15% mix with white)
`warning-200`	Light warning shade (30% mix with white)
`warning-300`	Medium-light warning shade (50% mix with white)
`warning-400`	Medium warning shade (70% mix with white)
`warning-500`	Base warning color (`#edab26`)
`warning-600`	Medium-dark warning shade (90% mix with black)
`warning-700`	Dark warning shade (80% mix with black)
`warning-800`	Very dark warning shade (60% mix with black)
`warning-900`	Darkest warning shade (40% mix with black)

Royal

Semantic palette royal with shades 50 through 900

Shade	Description
`royal-50`	Lightest royal shade (10% mix with white)
`royal-100`	Very light royal shade (15% mix with white)
`royal-200`	Light royal shade (30% mix with white)
`royal-300`	Medium-light royal shade (50% mix with white)
`royal-400`	Medium royal shade (70% mix with white)
`royal-500`	Base royal color (`#a667e3`)
`royal-600`	Medium-dark royal shade (90% mix with black)
`royal-700`	Dark royal shade (80% mix with black)
`royal-800`	Very dark royal shade (60% mix with black)
`royal-900`	Darkest royal shade (40% mix with black)

Gray

Predefined gray color variations:

Variable {.whitespace-nowrap}	Description	Default `base`
`gray-50`	Lightest gray	`#f8f9fc`
`gray-100`	Very light gray	`#f4f6fc`
`gray-150`	Light gray variant	`#edf0f6`
`gray-200`	Light gray	`#e4e8f1`
`gray-250`	Medium-light gray variant	`#d2d9e3`
`gray-300`	Medium-light gray	`#bdc8da`
`gray-350`	Medium gray variant	`#a4b1c6`
`gray-400`	Medium gray	`#8693a9`
`gray-450`	Medium-dark gray variant	`#65718c`
`gray-500`	Medium-dark gray	`#525e78`
`gray-550`	Dark gray variant	`#46536d`
`gray-600`	Dark gray	`#3f4a64`
`gray-650`	Very dark gray variant	`#313c56`
`gray-700`	Very dark gray	`#2c3047`
`gray-750`	Darkest gray variant	`#1f2236`
`gray-800`	Near black gray	`#181d2d`
`gray-850`	Almost black gray	`#101523`
`gray-900`	Darkest gray	`#090d1c`

Dark

Specialized dark mode color variations:

Variable {.whitespace-nowrap}	Description	Default `base`
`dark-50`	Lightest dark mode color	`#fafafa`
`dark-100`	Very light dark mode color	`#f7f7f7`
`dark-150`	Light dark mode variant	`#f2f2f2`
`dark-200`	Light dark mode color	`#eeeeee`
`dark-250`	Medium-light dark mode variant	`#e0e0e0`
`dark-300`	Medium-light dark mode color	`#c4c4c4`
`dark-350`	Medium dark mode variant	`#9e9e9e`
`dark-400`	Medium dark mode color	`#616161`
`dark-450`	Medium-dark dark mode variant	`#424242`
`dark-500`	Medium-dark dark mode color	`#353535`
`dark-550`	Dark mode variant	`#323232`
`dark-600`	Dark mode color	`#2d2d2d`
`dark-650`	Very dark mode variant	`#2c2c2c`
`dark-700`	Very dark mode color	`#272727`
`dark-750`	Darkest mode variant	`#252525`
`dark-800`	Near black dark mode	`#222222`
`dark-850`	Almost black dark mode	`#1e1e1e`
`dark-900`	Darkest dark mode color	`#121212`

Helper

Utility variables used throughout the theme system.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`transparent`	Transparent color value	`transparent`	`transparent`
`skeleton-bg`	Skeleton loading background	`gray-200`	`dark-600`
`selector`	Browser accent color used by controls that inherit the selector color	`#5495f1`	`#5495f1`
`grid`	Grid guide color	`#5495f1`	`#5495f1`
`radius-xl`	Extra large shared radius token	`0.75rem`	`0.75rem`
`radius-2xl`	Two extra large shared radius token	`1rem`	`1rem`
`mix-50`	Color mixing percentage for the `50` palette stop	`10%`	`10%`
`mix-100`	Color mixing percentage for the `100` palette stop	`15%`	`15%`
`mix-200`	Color mixing percentage for the `200` palette stop	`30%`	`30%`
`mix-300`	Color mixing percentage for the `300` palette stop	`50%`	`50%`
`mix-400`	Color mixing percentage for the `400` palette stop	`70%`	`70%`
`mix-600`	Color mixing percentage for the `600` palette stop	`90%`	`90%`
`mix-700`	Color mixing percentage for the `700` palette stop	`80%`	`80%`
`mix-800`	Color mixing percentage for the `800` palette stop	`60%`	`60%`
`mix-900`	Color mixing percentage for the `900` palette stop	`40%`	`40%`

Selection

Variables for customizing text selection highlight appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`selection-bg`	Text selection background color	`var(--base-200)`	`var(--base-700)`
`selection-text`	Text selection text color	`var(--base-text-strong)`	`var(--base-white)`

Branding

Variables for customizing branding elements.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`branding-label-text`	Branding label text color	`base-500`	`base-500`
`branding-label-bg`	Branding label background	`base-50`	`transparent`
`branding-label-border`	Branding label border color	`base-300`	`base-500`

Header

Variables controlling the header appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`header-bg`	Header background color	`base-bg`	`base-bg`
`header-border`	Header border color	`base-border`	`base-border`
`header-title-font-size`	Header title font size	`1.5rem`, or `1.25rem` for long titles	`1.5rem`, or `1.25rem` for long titles
`header-title-font-size-md`	Header title font size on medium and wider screens	`header-title-font-size`	`header-title-font-size`
`header-title-font-weight`	Header title font weight	`700`	`700`
`header-title-line-height`	Header title line height	`1.375`	`1.375`
`header-title-line-height-md`	Header title line height on medium and wider screens	`header-title-line-height`	`header-title-line-height`
`header-title-max-width`	Header title maximum width	`none`	`none`
`header-text`	Header text color	`base-link`	`base-link`
`header-text-weight`	Header text font weight	`base-link-weight`	`base-link-weight`
`header-text-hover`	Header text hover color	`base-link-hover`	`base-link-hover`
`header-height-mobile`	Header height on mobile	`4rem`	`4rem`
`header-height-desktop`	Header height on desktop	`5rem`	`5rem`

Layout

Variables controlling layout dimensions for content, sidebars, header height, and footer spacing.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`layout-site-max-width`	Maximum width for the overall site container (header, main content shell, and constrained footer areas)	`1800px`	`1800px`
`layout-default-content-min-width`	Minimum width for default layout content area	`0`	`0`
`layout-default-content-max-width`	Maximum width for default layout content area	`none`	`none`
`layout-blog-content-min-width`	Minimum width for blog layout content area	`0`	`0`
`layout-blog-content-max-width`	Maximum width for blog layout content area	`49.75rem`	`49.75rem`
`layout-central-content-min-width`	Minimum width for central layout content area	`0`	`0`
`layout-central-content-max-width`	Maximum width for central layout content area	`49.75rem`	`49.75rem`
`layout-sidebar-left-width`	Left sidebar width	`18.75rem`	`18.75rem`
`layout-sidebar-right-width-md`	Right sidebar width at medium breakpoint	`26rem`	`26rem`
`layout-sidebar-right-width-lg`	Right sidebar width at large breakpoint	`16rem`	`16rem`

Search

Variables for customizing search functionality appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`search-text`	Search input text color	`base-text`	`base-text`
`search-placeholder`	Search placeholder text color	`base-text-muted`	`base-text-muted`
`search-bg`	Search input background	`header-bg`	`header-bg`
`search-border`	Search input border color	`base-border`	`base-border-hover`
`search-border-hover`	Search input hover border color	`base-border-hover`	`base-border-strong`
`search-border-focus`	Search input focus border color	`base-border-hover`	`base-border-strong`
`search-highlight-bg`	Search result highlight background	`base-100`	`base-800`
`search-hint-text`	Search hint text color	`search-placeholder`	`search-placeholder`
`search-hint-bg`	Search hint background	`header-bg`	`header-bg`
`search-hint-border`	Search hint border color	`search-border`	`search-border`
`search-result-heading`	Search result heading text color	`base-text-strong`	`base-text-strong`
`search-result-text`	Search result summary text color	`gray-400`	`dark-350`
`search-result-breadcrumb`	Search result breadcrumb text color	`header-text`	`header-text`
`search-result-breadcrumb-hover`	Search result breadcrumb hover text color	`header-text-hover`	`header-text-hover`
`search-result-icon`	Search result icon color	`base-text-muted`	`base-text-muted`
`search-result-hover`	Search result hover background	`base-item-bg-hover`	`dark-450`
`search-result-active-bg`	Active search result background	`search-result-hover`	`search-result-hover`
`search-result-active-ring`	Active search result ring color	`base-200`	`dark-650`
`search-result-active-ring-width`	Active search result ring width	`1px`	`1px`
`search-result-active-radius`	Active search result border radius	`0.5rem`	`0.5rem`
`search-result-border`	Search result border color	`gray-100`	`dark-500`
`search-result-code-bg`	Search result inline code background	`gray-100`	`dark-600`
`search-result-count`	Search result count text color	`base-text-muted`	`base-text-muted`
`search-no-results-text`	Search no-results text color	`base-text-muted`	`base-text-muted`
`search-no-results-icon`	Search no-results icon color	`gray-300`	`gray-600`
`search-footer-text`	Search footer text color	`base-text-muted`	`base-text-muted`
`search-footer-kbd-bg`	Search footer keyboard key background	`gray-100`	`dark-500`
`search-modal-bg`	Search modal background	`base-white`	`dark-650`
`search-modal-border`	Search modal border color	`gray-200`	`dark-500`
`search-results-bg`	Search results panel background	`base-white`	`dark-700`
`search-backdrop`	Search modal backdrop background	`rgba(75, 85, 99, 0.7)`	`rgba(18, 18, 18, 0.8)`
`search-backdrop-blur`	Search modal backdrop blur	`4px`	`4px`

Filter

Variables for customizing filter functionality.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`filter-text`	Filter input text color	`base-text`	`base-text`
`filter-placeholder`	Filter placeholder text color	`base-text-muted`	`base-text-muted`
`filter-bg`	Filter input background	`sidebar-left-bg`	`sidebar-left-bg`
`filter-border`	Filter input border color	`base-border`	`base-border-hover`
`filter-border-hover`	Filter input hover border color	`base-border-hover`	`base-border-strong`
`filter-border-focus`	Filter input focus border color	`base-border-hover`	`base-border-strong`

Body

Variables controlling the main content area.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`body-bg`	Main content background	`base-bg`	`base-bg`
`body-text`	Main content text color	`base-text`	`base-text`
`body-link`	Body link color	`base-link`	`base-link`
`body-link-hover`	Body link hover color	`base-link-hover`	`base-link-hover`
`body-link-weight`	Body link font weight	`base-link-weight`	`base-link-weight`
`body-link-decoration-line`	Body link text decoration line	`underline`	`underline`
`body-link-decoration-thickness`	Body link underline thickness	`1px`	`1px`
`body-link-underline-offset`	Body link underline offset	`4px`	`4px`
`body-link-decoration-color`	Body link underline color	`base-200`	`base-800`
`body-link-decoration-color-hover`	Body link hover underline color	`base-600`	`base-500`

Heading

Variables for heading text styling.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`heading-text`	Heading text color	`gray-900`	`base-white`
`heading-weight`	Default heading font weight	`700`	`700`
`heading-case`	Default heading text transform	`normal-case`	`normal-case`
`heading-h1`	H1 heading text color	`heading-text`	`heading-text`
`heading-h2`	H2 heading text color	`heading-text`	`heading-text`
`heading-h3`	H3 heading text color	`heading-text`	`heading-text`
`heading-h4`	H4 heading text color	`heading-text`	`heading-text`
`heading-h5`	H5 heading text color	`heading-text`	`heading-text`
`heading-h6`	H6 heading text color	`heading-text`	`heading-text`
`heading-h1-weight`	H1 heading font weight	`heading-weight`	`heading-weight`
`heading-h2-weight`	H2 heading font weight	`heading-weight`	`heading-weight`
`heading-h3-weight`	H3 heading font weight	`heading-weight`	`heading-weight`
`heading-h4-weight`	H4 heading font weight	`heading-weight`	`heading-weight`
`heading-h5-weight`	H5 heading font weight	`heading-weight`	`heading-weight`
`heading-h6-weight`	H6 heading font weight	`heading-weight`	`heading-weight`
`heading-h1-case`	H1 heading text transform	`heading-case`	`heading-case`
`heading-h2-case`	H2 heading text transform	`heading-case`	`heading-case`
`heading-h3-case`	H3 heading text transform	`heading-case`	`heading-case`
`heading-h4-case`	H4 heading text transform	`heading-case`	`heading-case`
`heading-h5-case`	H5 heading text transform	`heading-case`	`heading-case`
`heading-h6-case`	H6 heading text transform	`heading-case`	`heading-case`
`heading-h1-font-size`	H1 heading font size	`2.5rem`	`2.5rem`
`heading-h2-font-size`	H2 heading font size	`2rem`	`2rem`
`heading-h3-font-size`	H3 heading font size	`1.5rem`	`1.5rem`
`heading-h4-font-size`	H4 heading font size	`1.125rem`	`1.125rem`
`heading-h5-font-size`	H5 heading font size	`1rem`	`1rem`
`heading-h6-font-size`	H6 heading font size	`0.875rem`	`0.875rem`
`heading-h1-margin-bottom`	H1 heading bottom margin	`2rem`	`2rem`
`heading-h2-margin-bottom`	H2 heading bottom margin	`1.5rem`	`1.5rem`
`heading-h3-margin-bottom`	H3 heading bottom margin	`1rem`	`1rem`
`heading-h4-margin-bottom`	H4 heading bottom margin	`0.75rem`	`0.75rem`
`heading-h5-margin-bottom`	H5 heading bottom margin	`0.5rem`	`0.5rem`
`heading-h6-margin-bottom`	H6 heading bottom margin	`0.5rem`	`0.5rem`
`heading-h1-padding-top`	H1 heading top padding	`0`	`0`
`heading-h2-padding-top`	H2 heading top padding	`0`	`0`
`heading-h3-padding-top`	H3 heading top padding	`0`	`0`
`heading-h4-padding-top`	H4 heading top padding	`0`	`0`
`heading-h5-padding-top`	H5 heading top padding	`0`	`0`
`heading-h6-padding-top`	H6 heading top padding	`0`	`0`
`heading-h1-border-top`	H1 heading top border color	`transparent`	`transparent`
`heading-h2-border-top`	H2 heading top border color	`transparent`	`transparent`
`heading-h3-border-top`	H3 heading top border color	`transparent`	`transparent`
`heading-h4-border-top`	H4 heading top border color	`transparent`	`transparent`
`heading-h5-border-top`	H5 heading top border color	`transparent`	`transparent`
`heading-h6-border-top`	H6 heading top border color	`transparent`	`transparent`

Scheme

Variables for the Light/Dark switcher component.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`scheme-menu-item-bg`	Switcher item background	`base-item-bg`	`base-item-bg`
`scheme-menu-item-bg-hover`	Switcher item hover background	`base-item-bg-hover`	`base-item-bg-hover`
`scheme-menu-item-bg-active`	Switcher active item background	`base-item-bg-active`	`base-item-bg-active`
`scheme-menu-item-text`	Switcher item text color	`base-text`	`base-text`
`scheme-menu-item-text-active`	Switcher active item text color	`base-item-text-active`	`base-item-text-active`

Sidebar

Variables controlling the left and right sidebars.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`sidebar-left-bg`	Left sidebar background	`base-bg`	`base-bg`
`sidebar-left-border`	Left sidebar border	`base-border`	`base-border`
`sidebar-right-bg`	Right sidebar background	`base-bg`	`base-bg`
`sidebar-right-border`	Right sidebar border	`base-border`	`base-border`

Navigation

Variables for customizing navigation appearance and behavior.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`nav-bg`	Navigation background	`sidebar-left-bg`	`sidebar-left-bg`
`nav-item-bg-hover`	Navigation item hover background	`base-item-bg-hover`	`base-item-bg-hover`
`nav-item-bg-active`	Active navigation item background	`base-item-bg-active`	`base-item-bg-active`
`nav-item-bg-active-hover`	Active navigation item hover background	`base-item-bg-active`	`base-item-bg-active`
`nav-item-text`	Navigation item text color	`gray-900`	`dark-300`
`nav-item-text-hover`	Navigation item hover text color	`base-item-text-active`	`base-item-text-active`
`nav-item-text-active`	Active navigation item text color	`base-item-text-active`	`base-item-text-active`
`nav-item-text-active-hover`	Active navigation item hover text color	`base-item-text-active`	`base-item-text-active`
`nav-item-text-active-weight`	Active navigation item font weight	`base-link-weight`	`base-link-weight`
`nav-item-button`	Navigation button color	`gray-400`	`dark-400`
`nav-item-button-active-hover`	Navigation button active hover color	`base-200`	`base-200`
`nav-item-border-active`	Active navigation item border color	`base-500`	`base-500`
`nav-item-text-stack`	Stack navigation text color	`gray-700`	`base-text-strong`
`nav-item-text-stack-case`	Stack navigation text transform	`uppercase`	`uppercase`
`nav-item-text-stack-weight`	Stack navigation text font weight	`600`	`600`
`nav-badge-margin-left`	Navigation badge left margin	`auto`	`auto`
`nav-badge-margin-left-alt`	Alternative navigation badge left margin	`0.75rem`	`0.75rem`

Variables controlling the Table of Contents appearance in the right sidebar.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`toc-heading`	Table of contents heading color	`gray-700`	`dark-400`
`toc-text`	Table of contents text color	`gray-700`	`dark-300`
`toc-text-hover`	Table of contents hover text color	`base-500`	`base-500`
`toc-text-active`	Table of contents active text color	`base-500`	`base-500`
`toc-border-active`	Table of contents active border color	`base-500`	`base-500`
`toc-heading-case`	Table of contents heading text transform	`uppercase`	`uppercase`
`toc-heading-weight`	Table of contents heading font weight	`600`	`600`
`toc-label-text`	Table of contents label text color	`toc-heading`	`toc-heading`
`toc-label-text-hover`	Table of contents label hover text color	`body-link`	`body-link`
`toc-label-decoration-line`	Table of contents label text decoration line	`inherit`	`inherit`
`toc-label-decoration-thickness`	Table of contents label text decoration thickness	`inherit`	`inherit`
`toc-label-underline-offset`	Table of contents label underline offset	`inherit`	`inherit`
`toc-label-decoration-color`	Table of contents label decoration color	`currentColor`	`currentColor`
`toc-label-decoration-color-hover`	Table of contents label hover decoration color	`currentColor`	`currentColor`

Footer

Variables controlling the footer appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`footer-text`	Footer text color	`gray-500`	`dark-350`
`footer-link`	Footer link color	`base-link`	`base-link`
`footer-link-hover`	Footer link hover color	`base-link-hover`	`base-link-hover`
`footer-link-weight`	Footer link font weight	`base-link-weight`	`base-link-weight`
`footer-content-max-width`	Maximum width for constrained footer containers	`49.75rem`	`49.75rem`
`footer-padding-y`	Vertical footer padding for constrained footer containers	`1.5rem`	`1.5rem`

Action Component

Variables for customizing action buttons and action menus.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`action-border-width`	Action border width	`1px`	`1px`
`action-height`	Action button height	`1.75rem`	`1.75rem`
`action-gap`	Gap between action button items	`0.375rem`	`0.375rem`
`action-padding-x`	Action button horizontal padding	`1.25rem`	`1.25rem`
`action-toggle-size`	Action menu toggle size	`1.75rem`	`1.75rem`
`action-menu-offset-y`	Action menu vertical offset	`0.5rem`	`0.5rem`
`action-menu-max-width`	Action menu maximum width	`min(300px, calc(100vw - 2rem))`	`min(300px, calc(100vw - 2rem))`
`action-z-index`	Action button z-index	`10`	`10`
`action-menu-z-index`	Action menu z-index	`10`	`10`
`action-background`	Action button background	`search-bg`	`search-bg`
`action-border-color`	Action button border color	`search-border`	`search-border`
`action-border-color-hover`	Action button hover border color	`search-border-hover`	`search-border-hover`
`action-text`	Action button text color	`search-text`	`search-text`
`action-text-muted`	Action muted text color	`search-placeholder`	`search-placeholder`
`action-primary-hover-text`	Primary action hover text color	`gray-700`	`dark-200`
`action-toggle-hover-text`	Action menu toggle hover text color	`gray-600`	`dark-200`
`action-menu-panel-background`	Action menu panel background	`base-bg`	`base-bg`
`action-menu-panel-border`	Action menu panel border color	`base-border`	`base-border`
`action-menu-item-text`	Action menu item text color	`base-text`	`base-text`
`action-menu-item-description-text`	Action menu item description text color	`gray-400`	`dark-350`
`action-menu-item-hover-text`	Action menu item hover text color	`gray-600`	`dark-200`
`action-menu-item-hover-bg`	Action menu item hover background	`base-item-bg-hover`	`base-item-bg-hover`

Backlinks Component

Variables for customizing backlinks appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`backlinks-display`	Backlinks display mode	`block`	`block`
`backlinks-margin-top`	Backlinks top margin	`0`	`0`
`backlinks-margin-bottom`	Backlinks bottom margin	`1.5rem`	`1.5rem`
`backlinks-border-top`	Backlinks top border color	`transparent`	`transparent`
`backlinks-title`	Backlinks title color	`heading-h2`	`heading-h2`
`backlinks-title-case`	Backlinks title text transform	`heading-h2-case`	`heading-h2-case`
`backlinks-title-padding-top`	Backlinks title top padding	`heading-h2-padding-top`	`heading-h2-padding-top`
`backlinks-title-margin-top`	Backlinks title top margin	`0`	`0`
`backlinks-title-margin-bottom`	Backlinks title bottom margin	`heading-h2-margin-bottom`	`heading-h2-margin-bottom`
`backlinks-title-font-size`	Backlinks title font size	`heading-h2-font-size`	`heading-h2-font-size`
`backlinks-title-font-weight`	Backlinks title font weight	`heading-h2-weight`	`heading-h2-weight`
`backlinks-link`	Backlinks link color	`base-link`	`base-link`
`backlinks-link-hover`	Backlinks link hover color	`base-link-hover`	`base-link-hover`
`backlinks-link-font-size`	Backlinks link font size	`0.875rem`	`0.875rem`
`backlinks-text`	Backlinks text color	`body-text`	`body-text`
`backlinks-text-font-size`	Backlinks text font size	`0.875rem`	`0.875rem`
`backlinks-text-font-weight`	Backlinks text font weight	`400`	`400`

Badge Component

Variables for customizing badge components across all variants.

Base Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-base`	Base badge background	`base-100`	`base-100`
`badge-base-hover`	Base badge hover background	`base-100`	`base-200`
`badge-base-text`	Base badge text color	`base-500`	`base-500`
`badge-base-text-hover`	Base badge hover text color	`base-500`	`base-500`
`badge-base-border`	Base badge border color	`base-200`	`base-200`
`badge-base-border-hover`	Base badge hover border color	`base-400`	`base-400`

Primary Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-primary`	Primary badge background	`primary-100`	`primary-100`
`badge-primary-hover`	Primary badge hover background	`primary-100`	`primary-200`
`badge-primary-text`	Primary badge text color	`primary-500`	`primary-500`
`badge-primary-text-hover`	Primary badge hover text color	`primary-500`	`primary-500`
`badge-primary-border`	Primary badge border color	`primary-200`	`primary-200`
`badge-primary-border-hover`	Primary badge hover border color	`primary-400`	`primary-400`

Secondary Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-secondary`	Secondary badge background	`gray-100`	`gray-100`
`badge-secondary-hover`	Secondary badge hover background	`gray-100`	`gray-250`
`badge-secondary-text`	Secondary badge text color	`gray-600`	`gray-600`
`badge-secondary-text-hover`	Secondary badge hover text color	`gray-600`	`gray-600`
`badge-secondary-border`	Secondary badge border color	`gray-200`	`gray-200`
`badge-secondary-border-hover`	Secondary badge hover border color	`gray-400`	`gray-400`

Success Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-success`	Success badge background	`success-100`	`success-100`
`badge-success-hover`	Success badge hover background	`success-100`	`success-200`
`badge-success-text`	Success badge text color	`success-700`	`success-700`
`badge-success-text-hover`	Success badge hover text color	`success-700`	`success-700`
`badge-success-border`	Success badge border color	`success-200`	`success-200`
`badge-success-border-hover`	Success badge hover border color	`success-400`	`success-400`

Question Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-question`	Question badge background	`royal-100`	`royal-100`
`badge-question-hover`	Question badge hover background	`royal-100`	`royal-200`
`badge-question-text`	Question badge text color	`royal-700`	`royal-700`
`badge-question-text-hover`	Question badge hover text color	`royal-700`	`royal-700`
`badge-question-border`	Question badge border color	`royal-200`	`royal-200`
`badge-question-border-hover`	Question badge hover border color	`royal-400`	`royal-400`

Danger Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-danger`	Danger badge background	`danger-100`	`danger-100`
`badge-danger-hover`	Danger badge hover background	`danger-100`	`danger-200`
`badge-danger-text`	Danger badge text color	`danger-600`	`danger-600`
`badge-danger-text-hover`	Danger badge hover text color	`danger-600`	`danger-600`
`badge-danger-border`	Danger badge border color	`danger-200`	`danger-200`
`badge-danger-border-hover`	Danger badge hover border color	`danger-400`	`danger-400`

Warning Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-warning`	Warning badge background	`warning-100`	`warning-100`
`badge-warning-hover`	Warning badge hover background	`warning-100`	`warning-200`
`badge-warning-text`	Warning badge text color	`warning-700`	`warning-700`
`badge-warning-text-hover`	Warning badge hover text color	`warning-700`	`warning-700`
`badge-warning-border`	Warning badge border color	`warning-200`	`warning-200`
`badge-warning-border-hover`	Warning badge hover border color	`warning-400`	`warning-400`

Info Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-info`	Info badge background	`transparent`	`transparent`
`badge-info-hover`	Info badge hover background	`transparent`	`transparent`
`badge-info-text`	Info badge text color	`base-500`	`base-500`
`badge-info-text-hover`	Info badge hover text color	`base-300`	`base-300`
`badge-info-border`	Info badge border color	`base-500`	`base-500`
`badge-info-border-hover`	Info badge hover border color	`base-300`	`base-300`

Light Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-light`	Light badge background	`gray-50`	`gray-50`
`badge-light-hover`	Light badge hover background	`gray-150`	`dark-200`
`badge-light-text`	Light badge text color	`gray-600`	`dark-600`
`badge-light-text-hover`	Light badge hover text color	`gray-600`	`dark-600`
`badge-light-border`	Light badge border color	`gray-200`	`transparent`
`badge-light-border-hover`	Light badge hover border color	`gray-400`	`gray-400`

Dark Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-dark`	Dark badge background	`gray-700`	`dark-450`
`badge-dark-hover`	Dark badge hover background	`gray-600`	`dark-400`
`badge-dark-text`	Dark badge text color	`base-white`	`base-white`
`badge-dark-text-hover`	Dark badge hover text color	`base-white`	`base-white`
`badge-dark-border`	Dark badge border color	`gray-700`	`dark-450`
`badge-dark-border-hover`	Dark badge hover border color	`gray-500`	`dark-400`

Ghost Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-ghost`	Ghost badge background	`body-bg`	`dark-550`
`badge-ghost-hover`	Ghost badge hover background	`gray-50`	`dark-450`
`badge-ghost-text`	Ghost badge text color	`gray-300`	`dark-400`
`badge-ghost-text-hover`	Ghost badge hover text color	`gray-300`	`dark-450`
`badge-ghost-border`	Ghost badge border color	`gray-200`	`dark-450`
`badge-ghost-border-hover`	Ghost badge hover border color	`gray-300`	`dark-450`

Contrast Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-contrast`	Contrast badge background	`gray-900`	`base-white`
`badge-contrast-hover`	Contrast badge hover background	`gray-600`	`dark-200`
`badge-contrast-text`	Contrast badge text color	`base-white`	`dark-850`
`badge-contrast-text-hover`	Contrast badge hover text color	`base-white`	`dark-850`
`badge-contrast-border`	Contrast badge border color	`gray-900`	`base-white`
`badge-contrast-border-hover`	Contrast badge hover border color	`gray-800`	`base-white`

Clean Badge

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`badge-clean`	Clean badge background	`base-white`	`base-dark`
`badge-clean-hover`	Clean badge hover background	`gray-100`	`dark-600`
`badge-clean-text`	Clean badge text color	`gray-600`	`base-white`
`badge-clean-border`	Clean badge border color	`gray-600`	`base-white`

Button Component

Variables for customizing button components across all variants.

Base Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-base`	Base button background	`base-500`	`base-500`
`button-base-hover`	Base button hover background	`base-700`	`base-700`
`button-base-text`	Base button text color	`base-50`	`base-50`

Primary Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-primary`	Primary button background	`primary-500`	`primary-500`
`button-primary-hover`	Primary button hover background	`primary-700`	`primary-700`
`button-primary-text`	Primary button text color	`primary-50`	`primary-50`

Secondary Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-secondary`	Secondary button background	`gray-500`	`gray-500`
`button-secondary-hover`	Secondary button hover background	`gray-700`	`dark-450`
`button-secondary-text`	Secondary button text color	`gray-50`	`gray-50`

Success Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-success`	Success button background	`success-500`	`success-500`
`button-success-hover`	Success button hover background	`success-700`	`success-700`
`button-success-text`	Success button text color	`success-50`	`success-50`

Question Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-question`	Question button background	`royal-500`	`royal-500`
`button-question-hover`	Question button hover background	`royal-700`	`royal-700`
`button-question-text`	Question button text color	`royal-50`	`royal-50`
`button-question-text-hover`	Question button hover text color	`royal-100`	`royal-100`
`button-question-border`	Question button border color	`royal-500`	`royal-500`
`button-question-border-hover`	Question button hover border color	`royal-700`	`royal-700`

Danger Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-danger`	Danger button background	`danger-500`	`danger-500`
`button-danger-hover`	Danger button hover background	`danger-700`	`danger-700`
`button-danger-text`	Danger button text color	`danger-50`	`danger-50`

Warning Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-warning`	Warning button background	`warning-500`	`warning-500`
`button-warning-hover`	Warning button hover background	`warning-600`	`warning-600`
`button-warning-text`	Warning button text color	`warning-900`	`warning-900`

Info Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-info`	Info button background	`transparent`	`transparent`
`button-info-hover`	Info button hover background	`transparent`	`transparent`
`button-info-text`	Info button text color	`base-500`	`base-500`
`button-info-text-hover`	Info button hover text color	`base-300`	`base-300`
`button-info-border`	Info button border color	`base-500`	`base-500`
`button-info-border-hover`	Info button hover border color	`base-300`	`base-300`

Light Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-light`	Light button background	`gray-50`	`gray-50`
`button-light-hover`	Light button hover background	`gray-150`	`dark-200`
`button-light-text`	Light button text color	`gray-600`	`dark-600`
`button-light-text-hover`	Light button hover text color	`gray-600`	`dark-600`
`button-light-border`	Light button border color	`gray-200`	`transparent`
`button-light-border-hover`	Light button hover border color	`gray-400`	`gray-400`

Dark Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-dark`	Dark button background	`gray-700`	`dark-550`
`button-dark-hover`	Dark button hover background	`gray-600`	`dark-450`
`button-dark-text`	Dark button text color	`gray-50`	`dark-350`

Ghost Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-ghost`	Ghost button background	`gray-100`	`dark-600`
`button-ghost-hover`	Ghost button hover background	`gray-150`	`dark-450`
`button-ghost-text`	Ghost button text color	`gray-300`	`dark-400`

Contrast Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-contrast`	Contrast button background	`gray-900`	`base-white`
`button-contrast-hover`	Contrast button hover background	`gray-700`	`dark-300`
`button-contrast-text`	Contrast button text color	`gray-50`	`base-black`

Clean Button

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`button-clean`	Clean button background	`base-white`	`base-dark`
`button-clean-hover`	Clean button hover background	`gray-100`	`dark-600`
`button-clean-text`	Clean button text color	`gray-600`	`base-white`
`button-clean-border`	Clean button border color	`gray-600`	`base-white`

Callout Component

Variables for customizing callout components.

Base Callout

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`callout-base-bg`	Base callout background	`base-white`	`dark-800`
`callout-base-border`	Base callout border	`base-border`	`base-border`
`callout-base`	Base callout accent color	`base-500`	`base-500`

Callout Accent Colors

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`callout-primary`	Primary callout accent color	`primary-500`	`primary-500`
`callout-secondary`	Secondary callout accent color	`gray-500`	`gray-500`
`callout-success`	Success callout accent color	`success-500`	`success-500`
`callout-question`	Question callout accent color	`royal-500`	`royal-500`
`callout-tip`	Tip callout accent color	`success-400`	`success-400`
`callout-danger`	Danger callout accent color	`danger-500`	`danger-500`
`callout-warning`	Warning callout accent color	`warning-500`	`warning-500`
`callout-info`	Info callout accent color	`base-300`	`base-300`
`callout-light`	Light callout accent color	`gray-300`	`gray-300`
`callout-dark`	Dark callout accent color	`gray-900`	`gray-900`
`callout-ghost`	Ghost callout accent color	`gray-100`	`gray-100`
`callout-contrast`	Contrast callout accent color	`gray-600`	`gray-600`
`callout-contrast-bg`	Contrast callout background	`gray-900`	`base-white`
`callout-contrast-text`	Contrast callout text color	`gray-300`	`dark-800`
`callout-contrast-border`	Contrast callout border color	`gray-900`	`dark-700`

Card Component

Variables for customizing card appearance. Cards are used for blog listings, category pages, tag pages, and inline [!card] components.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`card-bg`	Card background color	`var(--base-bg)`	`var(--base-bg)`
`card-border`	Card border color	`var(--gray-200)`	`var(--dark-700)`
`card-border-hover`	Card hover border color	`var(--base-border-hover)`	`var(--base-border-hover)`
`card-rounded`	Card border radius	`0.5rem`	`0.5rem`
`card-padding`	Card content padding	`1.5rem`	`1.5rem`
`card-shadow-hover`	Card hover shadow	`var(--shadow-xs)`	`var(--shadow-xs)`
`card-margin-bottom`	Card bottom margin	`1.5rem`	`1.5rem`
`card-max-width`	Card maximum width (wide screens)	`960px`	`960px`
`card-max-width-sm`	Card maximum width (narrow screens)	`613px`	`613px`
`card-min-width`	Card minimum width	`280px`	`280px`
`card-image-bg`	Card image placeholder background	`var(--gray-50)`	`var(--dark-800)`
`card-image-inner-border`	Card image inner border color	`var(--gray-200)`	`var(--dark-700)`
`card-image-width`	Card image width percentage	`41.666667%`	`41.666667%`
`card-title-text`	Card title text color	`var(--base-text-strong)`	`var(--base-text-strong)`
`card-title-font-size`	Card title font size	`1.125rem`	`1.125rem`
`card-title-font-size-md`	Card title font size (wide screens)	`1.25rem`	`1.25rem`
`card-title-font-weight`	Card title font weight	`600`	`600`
`card-title-leading`	Card title line height	`1.375`	`1.375`
`card-description-text`	Card description text color	`var(--body-text)`	`var(--body-text)`
`card-description-margin-top`	Card description top margin	`0.5rem`	`0.5rem`
`card-kicker-text`	Card kicker text color	`var(--body-link)`	`var(--body-link)`
`card-kicker-font-size`	Card kicker font size	`0.8125rem`	`0.8125rem`
`card-kicker-font-weight`	Card kicker font weight	`600`	`600`
`card-kicker-case`	Card kicker text transform	`uppercase`	`uppercase`
`card-vert-kicker-title-gap`	Vertical Card gap between kicker and title	`0.75rem`	`0.75rem`
`card-footer-text`	Card footer text color	`var(--gray-500)`	`var(--dark-350)`
`card-footer-font-size`	Card footer font size	`0.875rem`	`0.875rem`
`card-footer-margin-top`	Card footer top margin	`0.75rem`	`0.75rem`
`card-group-gap`	Vertical, compact, signal, and snap card group gap spacing	`1.5rem`	`1.5rem`
`card-group-margin-bottom`	Card group bottom margin	`1.5rem`	`1.5rem`
`card-vert-max-width`	Vertical card maximum width	`var(--card-max-width-sm)`	`var(--card-max-width-sm)`
`card-vert-min-width`	Vertical card minimum width	`var(--card-min-width)`	`var(--card-min-width)`
`card-compact-border`	Compact card border color	`var(--base-border)`	`var(--base-border)`
`card-compact-border-hover`	Compact card hover border color	`var(--card-border-hover)`	`var(--card-border-hover)`
`card-compact-rounded`	Compact card border radius	`var(--card-rounded)`	`var(--card-rounded)`
`card-compact-padding`	Compact card padding	`1rem`	`1rem`
`card-compact-shadow-hover`	Compact card hover shadow	`var(--card-shadow-hover)`	`var(--card-shadow-hover)`
`card-compact-title-text`	Compact card title text color	`var(--backlinks-link)`	`var(--backlinks-link)`
`card-compact-title-hover-text`	Compact card title hover text color	`var(--backlinks-link-hover)`	`var(--backlinks-link-hover)`
`card-compact-title-font-size`	Compact card title font size	`var(--backlinks-link-font-size)`	`var(--backlinks-link-font-size)`
`card-compact-title-font-weight`	Compact card title font weight	`var(--body-link-weight)`	`var(--body-link-weight)`
`card-compact-title-line-height`	Compact card title line height	`1.375`	`1.375`
`card-compact-title-gap`	Compact card title icon gap	`0.5rem`	`0.5rem`
`card-compact-title-margin-bottom`	Compact card title bottom margin	`0.25rem`	`0.25rem`
`card-compact-description-text`	Compact card description text color	`var(--backlinks-text)`	`var(--backlinks-text)`
`card-compact-description-font-size`	Compact card description font size	`var(--backlinks-text-font-size)`	`var(--backlinks-text-font-size)`
`card-compact-description-font-weight`	Compact card description font weight	`var(--backlinks-text-font-weight)`	`var(--backlinks-text-font-weight)`
`card-compact-icon-color`	Compact card icon color	`var(--backlinks-link)`	`var(--backlinks-link)`
`card-compact-icon-size`	Compact card icon size	`1rem`	`1rem`
`card-compact-image-size`	Compact card image size	`5rem`	`5rem`
`card-compact-max-width`	Compact card maximum width	`var(--card-max-width-sm)`	`var(--card-max-width-sm)`
`card-compact-grid-min-width`	Compact card grid minimum width	`var(--card-min-width)`	`var(--card-min-width)`
`card-signal-border`	Signal card border color	`var(--base-border)`	`var(--base-border)`
`card-signal-border-hover`	Signal card hover border color	`var(--body-link)`	`var(--body-link)`
`card-signal-rounded`	Signal card border radius	`var(--radius-2xl)`	`var(--radius-2xl)`
`card-signal-padding`	Signal card padding	`1.25rem`	`1.25rem`
`card-signal-padding-y`	Signal card vertical padding	`1.125rem`	`1.125rem`
`card-signal-shadow-hover`	Signal card hover shadow	`var(--shadow-xs)`	`var(--shadow-xs)`
`card-signal-title-text`	Signal card title text color	`var(--base-text-strong)`	`var(--base-text-strong)`
`card-signal-title-hover-text`	Signal card title hover text color	`var(--body-link-hover)`	`var(--body-link-hover)`
`card-signal-title-font-size`	Signal card title font size	`1rem`	`1rem`
`card-signal-title-font-weight`	Signal card title font weight	`700`	`700`
`card-signal-title-line-height`	Signal card title line height	`1.45`	`1.45`
`card-signal-description-text`	Signal card description text color	`var(--body-text)`	`var(--body-text)`
`card-signal-description-font-size`	Signal card description font size	`1rem`	`1rem`
`card-signal-description-line-height`	Signal card description line height	`1.45`	`1.45`
`card-signal-icon-color`	Signal card icon color	`var(--body-link)`	`var(--body-link)`
`card-signal-icon-stroke-width`	Signal card icon stroke width	`2.2`	`2.2`
`card-signal-icon-size`	Signal card icon size	`2rem`	`2rem`
`card-signal-media-size`	Signal card media size	`3.25rem`	`3.25rem`
`card-signal-media-rounded`	Signal card media border radius	`9999px`	`9999px`
`card-signal-kicker-text`	Signal card kicker text color	`var(--body-link)`	`var(--body-link)`
`card-signal-kicker-font-size`	Signal card kicker font size	`0.875rem`	`0.875rem`
`card-signal-kicker-font-weight`	Signal card kicker font weight	`600`	`600`
`card-signal-grid-min-width`	Signal card grid minimum width	`var(--card-min-width)`	`var(--card-min-width)`
`card-signal-max-width`	Signal card maximum width	`var(--card-max-width-sm)`	`var(--card-max-width-sm)`
`card-snap-border`	Snap card border color	`var(--base-border)`	`var(--base-border)`
`card-snap-border-hover`	Snap card hover border color	`var(--body-link)`	`var(--body-link)`
`card-snap-rounded`	Snap card border radius	`var(--radius-xl)`	`var(--radius-xl)`
`card-snap-padding`	Snap card padding	`var(--card-signal-padding)`	`var(--card-signal-padding)`
`card-snap-padding-y`	Snap card vertical padding	`var(--card-signal-padding-y)`	`var(--card-signal-padding-y)`
`card-snap-shadow-hover`	Snap card hover shadow	`var(--shadow-xs)`	`var(--shadow-xs)`
`card-snap-title-text`	Snap card title text color	`var(--base-text-strong)`	`var(--base-text-strong)`
`card-snap-title-hover-text`	Snap card title hover text color	`var(--base-text-strong)`	`var(--base-text-strong)`
`card-snap-title-font-size`	Snap card title font size	`1.0625rem`	`1.0625rem`
`card-snap-title-font-weight`	Snap card title font weight	`600`	`600`
`card-snap-title-line-height`	Snap card title line height	`1.3`	`1.3`
`card-snap-icon-color`	Snap card icon color	`var(--base-text-strong)`	`var(--base-text-strong)`
`card-snap-icon-stroke-width`	Snap card icon stroke width	`var(--card-signal-icon-stroke-width)`	`var(--card-signal-icon-stroke-width)`
`card-snap-icon-size`	Snap card icon size	`var(--card-signal-icon-size)`	`var(--card-signal-icon-size)`
`card-snap-media-size`	Snap card media size	`var(--card-signal-media-size)`	`var(--card-signal-media-size)`
`card-snap-media-rounded`	Snap card media border radius	`9999px`	`9999px`
`card-snap-image-rounded`	Snap card image border radius	`var(--card-snap-media-rounded)`	`var(--card-snap-media-rounded)`
`card-snap-media-background`	Snap card media background color	`var(--base-white)`	`var(--base-white)`
`card-snap-media-border`	Snap card media border color	`var(--gray-200)`	`var(--gray-200)`
`card-snap-media-padding`	Snap card media padding	`0.75rem`	`0.75rem`
`card-snap-gap`	Snap card content gap	`1rem`	`1rem`
`card-snap-grid-min-width`	Snap card grid minimum width	`var(--card-min-width)`	`var(--card-min-width)`
`card-snap-max-width`	Snap card maximum width	`var(--card-max-width-sm)`	`var(--card-max-width-sm)`

Color Preview Component

Variables for customizing color preview appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`color-preview-display`	Color preview display mode	`inline-block`	`inline-block`
`color-preview-width`	Color preview width	`12px`	`12px`
`color-preview-height`	Color preview height	`12px`	`12px`
`color-preview-margin-left`	Color preview left margin	`0.25rem`	`0.25rem`
`color-preview-border`	Color preview border color	`base-border`	`base-border`

Description Block Component

Variables for customizing description block appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`description-font-size`	Description block font size	`1.2rem`	`1.2rem`
`description-weight`	Description block font weight	`500`	`500`
`description-color`	Description block text color	`gray-400`	`dark-350`
`description-line-height`	Description block line height	`1.75`	`1.75`
`description-margin-bottom`	Description block bottom margin	`2rem`	`2rem`
`description-margin-top`	Description block top margin	`-0.75rem`	`-0.75rem`
`description-letter-spacing`	Description block letter spacing	`0`	`0`
`description-text-transform`	Description block text transform	`none`	`none`
`description-display`	Description block display mode	`block`	`block`

Footnote Popper Component

Variables for customizing inline footnote popper appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`footnote-popper-bg`	Footnote popper background	`base-100`	`base-100`
`footnote-popper-text`	Footnote popper text color	`base-500`	`base-500`
`footnote-popper-border`	Footnote popper border color	`base-200`	`base-200`
`footnote-popper-link`	Footnote popper link color	`base-500`	`base-500`
`footnote-popper-link-hover`	Footnote popper link hover color	`base-700`	`base-600`
`footnote-popper-code-bg`	Footnote popper inline code background	`base-white`	`base-white`
`footnote-popper-code-border`	Footnote popper inline code border color	`base-200`	`base-200`
`footnote-popper-ref-open-bg`	Open footnote reference background	`base-100`	`color-mix(in srgb, var(--base-100) 90%, transparent)`
`footnote-popper-ref-open-text`	Open footnote reference text color	`base-500`	`base-500`
`footnote-popper-ref-open-border`	Open footnote reference border color	`base-200`	`color-mix(in srgb, var(--base-200) 90%, transparent)`

Image Component

Variables for customizing image appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`image-rounded`	Image border radius	`0px`	`0px`
`image-border`	Image border color	`base-border`	`base-border`
`image-border-width`	Image border width	`0`	`0`

List Component

Variables for customizing list appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`list-checked`	Checked list item color	`base-500`	`base-500`
`list-unchecked`	Unchecked list item color	`gray-300`	`dark-400`

Steps Component

Variables for customizing steps appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`steps-step-number-bg`	Step number background	`base-500`	`base-500`
`steps-step-number-text`	Step number text color	`base-white`	`base-white`
`steps-step-number-border`	Step number border color	`base-500`	`base-500`
`steps-step-line`	Step connector line color	`gray-300`	`dark-500`
`steps-step-title-text`	Step title text color	`base-text-strong`	`base-text-strong`

Pager Component

Variables for customizing blog pagination appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`pager-margin-top`	Pager top margin	`2.5rem`	`2.5rem`
`pager-margin-bottom`	Pager bottom margin	`1.5rem`	`1.5rem`
`pager-gap`	Gap between pager items	`0.5rem`	`0.5rem`
`pager-item-size`	Width and height of pager items	`2.5rem`	`2.5rem`
`pager-font-size`	Pager text font size	`0.875rem`	`0.875rem`
`pager-font-weight`	Pager text font weight	`500`	`500`
`pager-text-decoration`	Pager link text decoration	`none`	`none`
`pager-border-radius`	Pager item border radius	`0.25rem`	`0.25rem`
`pager-border-width`	Pager item border width	`1px`	`1px`
`pager-transition-duration`	Pager color transition duration	`200ms`	`200ms`
`pager-text`	Pager item text color	`base-500`	`dark-300`
`pager-bg`	Pager item background	`transparent`	`transparent`
`pager-border`	Pager item border color	`gray-200`	`dark-550`
`pager-text-hover`	Pager item hover text color	`base-500`	`dark-300`
`pager-bg-hover`	Pager item hover background	`gray-150`	`dark-600`
`pager-border-hover`	Pager item hover border color	`gray-200`	`dark-550`
`pager-text-active`	Active pager item text color	`base-white`	`base-white`
`pager-bg-active`	Active pager item background	`base-500`	`base-700`
`pager-border-active`	Active pager item border color	`base-600`	`base-800`
`pager-text-active-hover`	Active pager item hover text color	`base-white`	`base-white`
`pager-bg-active-hover`	Active pager item hover background	`base-400`	`base-500`
`pager-border-active-hover`	Active pager item hover border color	`base-500`	`base-600`

Tab Component

Variables for customizing tab appearance.

Variable {.whitespace-nowrap}	Description	Default `base`	Default `dark`
`tab-text`	Tab text color	`gray-500`	`dark-350`
`tab-text-hover`	Tab hover text color	`base-500`	`base-500`
`tab-text-active`	Active tab text color	`base-500`	`base-500`
`tab-border`	Tab border color	`transparent`	`transparent`
`tab-border-hover`	Tab hover border color	`gray-300`	`dark-450`
`tab-border-active`	Active tab border color	`base-500`	`base-500`

Uh oh!

FilesExpand file tree

theme-variables.md

Latest commit

History