Skip to content

theme-variables.md

Latest commit

 

History

History
853 lines (693 loc) · 44.1 KB

theme-variables.md

File metadata and controls

853 lines (693 loc) · 44.1 KB
icon number
tags
theme
pro

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{#base-variables}

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

Header

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

Sidebar

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

Navigation

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

Table of Contents

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

Footer

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

Pager Component

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