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

Core variables that define the fundamental appearance of your site.

Variable	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-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	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	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	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	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	Description	Default `base`	Default `dark`
`transparent`	Transparent color value	`transparent`	`transparent`
`skeleton-bg`	Skeleton loading background	`gray-200`	`dark-600`

Selection

Variables for customizing text selection highlight appearance.

Variable	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	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`

Variables controlling the header appearance.

Variable	Description	Default `base`	Default `dark`
`header-bg`	Header background color	`base-bg`	`base-bg`
`header-border`	Header border color	`base-border`	`base-border`
`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`

Search

Variables for customizing search functionality appearance.

Variable	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-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`

Filter

Variables for customizing filter functionality.

Variable	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	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`

Heading

Variables for heading text styling.

Variable	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	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`

Variables controlling the left and right sidebars.

Variable	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`

Variables for customizing navigation appearance and behavior.

Variable	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	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`

Variables controlling the footer appearance.

Variable	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`

Backlinks Component

Variables for customizing backlinks appearance.

Variable	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-card-border`	Backlinks card border color	`base-border`	`base-border`
`backlinks-card-border-hover`	Backlinks card hover border color	`base-border-hover`	`base-border-hover`
`backlinks-card-rounded`	Backlinks card border radius	`0.5rem`	`0.5rem`
`backlinks-card-shadow-hover`	Backlinks card hover shadow	`shadow-xs`	`shadow-xs`
`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	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	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	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	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	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	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	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	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	Description	Default `base`	Default `dark`
`badge-light`	Light badge background	`base-white`	`base-white`
`badge-light-hover`	Light badge hover background	`gray-100`	`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	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	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	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`

Button Component

Variables for customizing button components across all variants.

Base Button

Variable	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	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	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	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	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	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	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	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	Description	Default `base`	Default `dark`
`button-light`	Light button background	`gray-200`	`dark-250`
`button-light-hover`	Light button hover background	`gray-300`	`dark-350`
`button-light-text`	Light button text color	`gray-900`	`base-black`

Dark Button

Variable	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	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	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`

Callout Component

Variables for customizing callout components.

Base Callout

Variable	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	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	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(--gray-400)`	`var(--dark-450)`
`card-rounded`	Card border radius	`0.5rem`	`0.5rem`
`card-padding`	Card content padding	`1.5rem`	`1.5rem`
`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)	`558px`	`558px`
`card-min-width`	Card minimum width	`250px`	`250px`
`card-image-bg`	Card image placeholder background	`var(--gray-300)`	`var(--dark-450)`
`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-category-text`	Card category text color	`var(--body-link)`	`var(--body-link)`
`card-category-font-size`	Card category font size	`0.8125rem`	`0.8125rem`
`card-category-font-weight`	Card category font weight	`600`	`600`
`card-category-case`	Card category text transform	`uppercase`	`uppercase`
`card-date-text`	Card date text color	`var(--gray-500)`	`var(--dark-350)`
`card-date-font-size`	Card date font size	`0.875rem`	`0.875rem`
`card-date-margin-top`	Card date top margin	`0.75rem`	`0.75rem`
`card-group-gap`	Portrait card group gap spacing	`1.5rem`	`1.5rem`
`card-group-margin-bottom`	Portrait card group bottom margin	`1.5rem`	`1.5rem`

Color Preview Component

Variables for customizing color preview appearance.

Variable	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	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`

Image Component

Variables for customizing image appearance.

Variable	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	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`

Variables for customizing blog pagination appearance.

Variable	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	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`

Theme variables

Base

Variants

Color Palettes

Base

Semantic Color Palettes

Primary

Success

Danger

Warning

Royal

Gray

Dark

Helper

Selection

Branding

Header

Search

Filter

Body

Heading

Scheme

Sidebar

Navigation

Table of Contents

Footer

Backlinks Component

Badge Component

Base Badge

Primary Badge

Secondary Badge

Success Badge

Question Badge

Danger Badge

Warning Badge

Info Badge

Light Badge

Dark Badge

Ghost Badge

Contrast Badge

Button Component

Base Button

Primary Button

Secondary Button

Success Button

Question Button

Danger Button

Warning Button

Info Button

Light Button

Dark Button

Ghost Button

Contrast Button

Callout Component

Base Callout

Callout Accent Colors

Card Component

Color Preview Component

Description Block Component

Image Component

List Component

Pager Component

Tab Component

See also