mdxui.dev
npm7.0.0-alpha.0
Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0

@mdxui/themes exports

Every export of @mdxui/themes, and every Theme role with its tier, its default and the Section types that read it.

Every runtime export of @mdxui/themes, then every role a Theme fills.

8 runtime exports of @mdxui/themes@7.0.0-alpha.0.

ExportKindDoesSignature or type
CORE21 valuesThe roles every Theme sets—
DEFAULTSobject, 325 keysThe derived roles and their defaultsTokens
PINNEDfunctionWhether a role keeps its root value on a platePINNED(role: string): boolean
PLATE_REMAPobject, 18 keysThe roles a plate surface re-tokensRecord<string, string>
THEMESobject, 5 keysThe bundled Themes, each with its head lines—
THEME_NAMES5 valuesThe bundled Theme names[ThemeName, ...ThemeName[]]
compileThemefunctionA Theme to CSS custom propertiescompileTheme(t: Theme): string
resolveTokensfunctionA Theme to literal values, every chain followedresolveTokens(t: Theme): Tokens

Roles

21 core roles and 325 derived roles. "Read by" counts the Section types whose CSS reads the role directly; a role read only through another role shows —.

RoleTierDefaultRead by
papercore—nav, product-list
panelcore—9 Section types
inkcore—20 Section types
ink-softcore—11 Section types
rulecore—16 Section types
rule-softcore—5 Section types
accentcore—16 Section types
accent-inkcore—footer
passcore—cta-form, article
failcore—cta-form
warncore——
platecore—pricing, cta-form
plate-inkcore—cta-form
plate-rulecore——
sanscore—7 Section types
monocore—19 Section types
textcore—plan-table, product-head, page-head, product-list
lhcore—text-stack, feature-split
shell-maxcore—nav
shell-insetcore—nav, stats
shell-d-sectioncore——
tintderivedvar(--paper)—
panel-insetderivedvar(--panel)6 Section types
panel-mutedderivedvar(--panel)compare
trackderivedvar(--rule-soft)product-list
rule-faintderivedvar(--rule-soft)—
ghost-borderderivedvar(--rule)nav, product-head, product-list, footer
glassderivedvar(--paper)—
glass-blurderived0px—
ink-ledederivedvar(--ink-soft)product-head, page-head, faq, post-list
ink-bodyderivedvar(--ink)text-stack, feature-split
ink-notederivedvar(--ink-soft)pricing
ink-mutedderivedvar(--ink-soft)11 Section types
ink-quietderivedvar(--ink-muted)compare, article
ink-faintderivedvar(--ink-muted)command-row, cta-form
ink-ghostderivedvar(--ink-faint)—
accent-hoverderivedvar(--accent)post-list
accent-mutedderivedvar(--accent)—
accent-softderivedvar(--panel)nav
accent-soft-rulederivedvar(--accent)—
accent-rulederivedvar(--accent)compare
ctaderivedvar(--accent)nav, footer
cta-inkderivedvar(--accent-ink)nav, footer
plate-panelderivedvar(--plate)—
plate-wellderivedvar(--plate)—
plate-sunkenderivedvar(--plate)—
plate-rule-softderivedvar(--plate-rule)—
plate-rule-faintderivedvar(--plate-rule-soft)—
plate-ghost-borderderivedvar(--plate-rule)—
plate-ink-softderivedvar(--plate-ink)—
plate-ink-ledederivedvar(--plate-ink-soft)—
plate-ink-bodyderivedvar(--plate-ink-soft)—
plate-ink-mutedderivedvar(--plate-ink-soft)—
plate-ink-faintderivedvar(--plate-ink-muted)—
plate-ink-ghostderivedvar(--plate-ink-faint)—
plate-accentderivedvar(--accent)—
plate-accent-hoverderivedvar(--plate-accent)—
plate-accent-softderivedvar(--plate-accent)—
plate-accent-inkderivedvar(--plate)pricing
plate-passderivedvar(--pass)—
plate-control-inkderivedvar(--plate-ink-muted)—
plate-command-inkderivedvar(--plate-ink-soft)—
code-inkderivedvar(--plate-ink)terminal, article
code-commentderivedvar(--plate-ink-muted)terminal
code-stringderivedvar(--plate-accent)terminal
code-keywordderivedvar(--plate-accent)terminal
displayderivedvar(--sans)6 Section types
text-smderivedcalc(var(--text) * .875)nav, facts, plan-table, product-list
text-xsderivedcalc(var(--text) * .75)plan-table, product-head, product-list
mono-smderivedvar(--text-sm)facts
mono-xsderivedvar(--text-xs)pricing, feature-split
brand-weightderived700—
brand-facederivedvar(--mono)—
brand-trackingderived-.02em—
brand-transformderivednone—
display-weightderived7006 Section types
figuresderivednormal—
linkderivedcurrentColor—
link-hoverderivedvar(--link)—
h1-sizederivedclamp(2.2rem,7vw,3.4rem)hero
h1-lhderived1.06hero
h1-trackingderived-.028emhero, article, post-list
title-sizederivedvar(--h1-size)product-head, page-head
title-lhderivedvar(--h1-lh)product-head, page-head
title-trackingderivedvar(--h1-tracking)product-head, page-head
btitle-sizederivedvar(--h2-size)—
btitle-lhderivedvar(--h2-lh)—
eyebrow-sizederivedvar(--mono-xs)faq
eyebrow-trackingderived.16emfaq
eyebrow-colorderivedvar(--ink-soft)—
btn-facederivedvar(--mono)footer
btn-sizederivedvar(--mono-sm)—
btn-gapderived.5rem—
btn-solid-padderived.6rem 1rem—
btn-ghost-padderived.6rem 1rem—
btn-solid-weightderived600footer
btn-ghost-weightderived400—
btn-solid-trackingderived0—
btn-invert-weightderived600—
btn-ghost-hover-borderderivedvar(--accent)—
btn-ghost-hover-colorderivedvar(--accent)—
btn-ghost-hover-bgderivedtransparent—
btn-solid-hover-bgderivedvar(--accent)nav
btn-solid-hover-inkderivedvar(--accent-ink)nav
btn-invert-bgderivedvar(--plate-ink)footer
btn-invert-inkderivedvar(--plate)footer
btn-invert-hover-bgderivedvar(--accent)—
btn-invert-hover-inkderivedvar(--plate)—
h2-sizederivedclamp(1.4rem,3.4vw,2.15rem)—
h2-lhderived1.1—
h2-trackingderived-.024emstatement
heading-wrapderivedbalance—
sechead-maxderivednone—
sechead-h2-gapderived.9rem—
sechead-lede-gapderived.9rem—
sechead-lede-sizederivedvar(--text)—
sechead-lede-lhderivedvar(--lh)—
sechead-lede-colorderivedvar(--ink-soft)—
sechead-lede-maxderived62ch—
h2-size-compactderivedvar(--h2-size)—
h2-lh-compactderivedvar(--h2-lh)—
sechead-lede-size-compactderivedvar(--sechead-lede-size)—
sechead-lede-gap-compactderivedvar(--sechead-lede-gap)—
h2-size-largederivedvar(--h2-size)statement
h2-lh-largederivedvar(--h2-lh)statement
compare-noderivedvar(--ink-faint)—
compare-yesderivedvar(--accent)—
fg-gapderived1.9remfeature-grid, bento, endpoints
fg-radiusderivedvar(--radius-card)feature-grid
fg-radius-densederivedvar(--radius-cell)feature-grid
fsplit-copyderived400pxfeature-split
fsplit-specimenderived400pxfeature-split
fg-padderived1.25rem 1.35remfeature-grid
fg-pad-densederivedvar(--fg-pad)feature-grid
fg-head-gapderived.5remfeature-grid
fg-head-gap-densederivedvar(--fg-head-gap)feature-grid
fg-icon-gapderived14pxfeature-grid
fg-icon-sizederived22px—
fg-index-sizederivedvar(--mono-sm)feature-grid
fg-index-colorderivedvar(--ink-faint)feature-grid
fg-label-sizederivedvar(--mono-xs)feature-grid, endpoints
fg-label-trackingderived.12emfeature-grid
fg-label-transformderiveduppercasefeature-grid
fg-label-colorderivedvar(--accent)feature-grid
fg-title-facederivedvar(--sans)feature-grid, bento
fg-title-weightderived600feature-grid, bento
fg-title-sizederived1.05remfeature-grid, bento
fg-title-size-densederivedvar(--fg-title-size)feature-grid
fg-title-trackingderived-.015emfeature-grid, bento
fg-title-lhderived1.25feature-grid, bento
fg-title-gapderived.45remfeature-grid, bento
fg-text-sizederived.87remfeature-grid, bento, endpoints
fg-text-size-densederivedvar(--fg-text-size)feature-grid
fg-text-lhderived1.55feature-grid, bento, endpoints
fg-text-lh-densederivedvar(--fg-text-lh)feature-grid
fg-text-colorderivedvar(--ink-soft)feature-grid
tier-gapderived1.9rempricing
tier-padderived1.35rempricing
tier-head-gapderived0pricing
tier-name-facederivedvar(--sans)pricing
tier-name-sizederived1rempricing
tier-name-weightderived600pricing
tier-name-trackingderived-.01empricing
tier-name-transformderivednonepricing
tier-name-colorderivedvar(--ink)pricing
tier-name-featured-colorderivedvar(--tier-name-color)pricing
tier-price-gapderived0pricing
tier-amt-facederivedvar(--mono)pricing
tier-amt-sizederived1.9rempricing
tier-amt-weightderived700pricing
tier-amt-trackingderived-.04empricing
tier-amt-lhderived1pricing
tier-amt-marginderived.75rem 0 .1rempricing
tier-desc-colorderivedvar(--ink-soft)pricing
tier-desc-featured-colorderivedvar(--tier-desc-color)pricing
tier-list-marginderived1.05rem 0 1.35rempricing
tier-list-gapderived.45rempricing
tier-item-sizederived.845rempricing
tier-item-colorderivedvar(--ink-soft)pricing
tier-bulletderived"+"pricing
tier-btn-padderivedvar(--btn-solid-pad)pricing
tier-btn-sizederivedvar(--btn-size)pricing
tier-btn-ghost-weightderivedvar(--btn-ghost-weight)pricing
hero-h1-gapderived1.1remhero
hero-h1-maxderived26chhero
hero-lede-sizederived1.02remhero
hero-lede-lhderivedvar(--lh)hero
hero-lede-colorderivedvar(--ink-soft)hero
hero-lede-maxderived64chhero
hero-lede-gapderived1.1remhero
hero-actions-gapderived.6remhero, closing
hero-actions-topderived1.75remhero
hero-fine-sizederivedvar(--mono-sm)—
hero-fine-colorderivedvar(--ink-soft)—
hero-fine-trackingderived0—
hero-fine-gapderived1.35rem—
hero-specimen-gapderivedclamp(1.6rem,4vw,2.5rem)hero
nav-heightderived58pxnav
nav-gapderived1.5remnav
nav-brand-sizederivedvar(--text)nav
nav-link-facederivedvar(--mono)nav
nav-link-sizederivedvar(--mono-sm)nav
nav-link-colorderivedvar(--ink-soft)nav
nav-link-hoverderivedvar(--accent)nav
nav-link-gapderived1.6remnav
nav-cta-gapderived.6remnav
nav-burger-sizederived1.2remnav
nav-burger-padderived.4remnav
nav-burger-marginderived-.4remnav
nav-burger-colorderivedvar(--ink-soft)nav
nav-burger-hoverderivedvar(--accent)nav
nav-slim-rulederivedvar(--rule)nav
nav-slim-brand-sizederivedvar(--nav-brand-size)nav
nav-slim-link-facederivedvar(--nav-link-face)nav
nav-slim-link-sizederivedvar(--nav-link-size)nav
nav-slim-link-trackingderived0nav
nav-slim-link-colorderivedvar(--nav-link-color)nav
nav-slim-link-hoverderivedvar(--nav-link-hover)nav
meta-accentderivedvar(--eyebrow-color)post-list
article-rulederivedvar(--rule-soft)article, post-list
article-title-sizederivedclamp(30px,5.4vw,46px)article
article-title-lhderived1.08article
article-dek-facederivedvar(--display)article
article-dek-sizederivedclamp(18px,1.9vw,21px)article
article-dek-inkderivedvar(--ink-lede)article
listing-title-sizederivedclamp(34px,6vw,52px)post-list
listing-title-lhderived1.06post-list
listing-lede-sizederivedclamp(17px,1.4vw,19px)post-list
post-title-sizederivedclamp(23px,3.2vw,30px)post-list
post-title-lhderived1.16post-list
post-title-weightderivedvar(--prose-h2-weight)post-list
post-dek-sizederivedclamp(15.5px,1.2vw,17px)post-list
share-label-inkderivedvar(--ink-muted)article
share-borderderivedvar(--rule)article
share-glyphderivedvar(--ink-soft)article
share-hover-bgderivedvar(--panel-inset)article
prose-inkderivedvar(--ink-soft)article
prose-sizederivedvar(--text)article
prose-lhderived1.7article
prose-h1-facederivedvar(--display)article
prose-h1-weightderivedvar(--display-weight)article
prose-h1-sizederivedvar(--article-title-size)article
prose-h1-lhderivedvar(--article-title-lh)article
prose-h1-trackingderivedvar(--h1-tracking)article
prose-h1-inkderivedvar(--ink)article
prose-h1-marginderived0 0 .5emarticle
prose-h2-facederivedvar(--display)article
prose-h2-weightderivedvar(--display-weight)article
prose-h2-sizederivedclamp(23px,2.6vw + 8px,31px)article
prose-h2-lhderived1.18article
prose-h2-trackingderived-.018emarticle, post-list
prose-h3-facederivedvar(--sans)article
prose-h3-weightderived600article
prose-h3-sizederivedclamp(17px,1vw + 13px,20px)article
prose-linkderivedvar(--accent)article
prose-link-hoverderivedvar(--accent-hover)article
prose-link-rulederivedcolor-mix(in srgb, var(--accent) 45%, transpare…article
prose-link-rule-hoverderivedvar(--accent)article
prose-markderivedvar(--accent)article
prose-quote-inkderivedvar(--ink-soft)article
prose-quote-facederivedvar(--display)article
prose-quote-sizederivedclamp(18px,1.4vw + 12px,22px)article
prose-code-bgderivedvar(--panel-inset)article
footer-brand-sizederivedvar(--text)footer
footer-blurb-sizederivedvar(--text-sm)footer
footer-blurb-lhderivedvar(--lh)footer
footer-blurb-colorderivedvar(--ink-soft)footer
footer-blurb-maxderived32chfooter
footer-blurb-gapderived.75remfooter
footer-head-sizederivedvar(--mono-xs)footer
footer-head-trackingderived.14emfooter
footer-head-colorderivedvar(--ink)footer
footer-head-weightderived700footer
footer-head-gapderived.65remfooter
footer-link-facederivedvar(--sans)footer
footer-link-sizederivedvar(--text-sm)footer
footer-link-colorderivedvar(--ink-soft)footer
footer-link-hoverderivedvar(--accent)footer
footer-link-padderived.16remfooter
footer-link-gapderived0pxfooter
footer-note-gapderived1.75remfooter
footer-note-padderived1remfooter
footer-note-rulederivedvar(--rule-soft)footer
footer-note-facederivedvar(--mono)footer
footer-note-sizederivedvar(--mono-xs)footer
footer-note-colorderivedvar(--ink-soft)footer
footer-note-flex-gapderived.4rem 1.25remfooter
footer-motto-sizederivedvar(--footer-note-size)footer
footer-motto-trackingderived0footer
footer-motto-colorderivedvar(--footer-note-color)footer
radius-controlderived06 Section types
radius-fieldderivedvar(--radius-control)5 Section types
radius-cellderivedvar(--radius-control)product-head, product-list, feature-grid
radius-rowderivedvar(--radius-control)command-row
radius-cardderivedvar(--radius-control)10 Section types
shadow-cardderivednone—
shadow-card-softderivedvar(--shadow-card)compare
shadow-plate-cardderivedvar(--shadow-card)pricing
shadow-terminalderivedvar(--shadow-card)terminal, article, api-call
field-aderivedcolor-mix(in oklch, var(--accent), white 18%)—
field-bderivedcolor-mix(in oklch, var(--accent), black 18%)—
field-cderivedcolor-mix(in oklch, var(--accent), black 32%)—
term-bgderivedvar(--plate-well)terminal, article, api-call
term-row-bgderivedvar(--plate-sunken)command-row, agent-prompt
term-inkderivedvar(--plate-ink)terminal, agent-prompt, api-call
term-ink-softderivedvar(--plate-ink-soft)terminal, api-call
term-ink-mutedderivedvar(--plate-ink-muted)terminal, api-call
term-rule-softderivedvar(--plate-rule-soft)5 Section types
term-rule-faintderivedvar(--plate-rule-faint)terminal, api-call
term-accentderivedvar(--plate-accent)terminal, command-row, agent-prompt, api-call
term-passderivedvar(--plate-pass)terminal, api-call
term-control-inkderivedvar(--plate-control-ink)—
term-command-inkderivedvar(--plate-command-ink)command-row
term-hoverderivedvar(--plate-panel)—
hatchderivedcolor-mix(in srgb, var(--ink) 16%, transparent)—
scrimderivedrgba(0, 0, 0, 0.58)nav, product-list
ease-outderivedcubic-bezier(0.16, 1, 0.3, 1)nav, footer, article, post-list
dur-fastderived120msnav, footer, article, post-list
dur-basederived220msnav
app-nav-active-bgderivedcolor-mix(in srgb, var(--accent) 10%, transpare…—
app-hover-bgderivedcolor-mix(in srgb, var(--ink) 4%, transparent)—
app-selected-bgderivedcolor-mix(in srgb, var(--accent) 8%, transparen…—
app-field-bgderivedvar(--panel)—
app-chip-ok-bgderivedcolor-mix(in srgb, var(--pass) 12%, transparent)—
app-chip-warn-bgderivedcolor-mix(in srgb, var(--warn) 14%, transparent)—
app-chip-fail-bgderivedcolor-mix(in srgb, var(--fail) 12%, transparent)—
app-focusderivedvar(--accent)—
app-radiusderivedvar(--radius-control)—
app-radius-smderivedvar(--radius-field)—
app-chip-ok-inkderivedcolor-mix(in srgb, var(--pass) 78%, var(--ink))—
app-chip-warn-inkderivedcolor-mix(in srgb, var(--warn) 72%, var(--ink))—
app-chip-fail-inkderivedcolor-mix(in srgb, var(--fail) 85%, var(--ink))—
app-dangerderivedvar(--fail)—
app-danger-inkderivedvar(--paper)—
app-danger-hoverderivedcolor-mix(in srgb, var(--fail) 85%, var(--ink))—
z-navderived50—
shell-d-compactderivedvar(--shell-d-section)—
shell-d-heroderivedvar(--shell-d-section)—
shell-d-closingderivedvar(--shell-d-section)—
shell-d-footerderivedvar(--shell-d-section)—
shell-d-accessderivedvar(--shell-d-section)—
shell-rule-gapderived0—
shell-max-articlederived720px—
shell-max-listingderived820px—
shell-d-articlederivedvar(--shell-d-section)—
shell-d-listingderivedvar(--shell-d-article)—

On this page

Roles