Core Theme

--qp-accent-color

Chooses the primary accent color that carries theme identity and interactive emphasis.

--qp-background

Chooses the ordinary component surface color used throughout QP. Coordinate it with primary, strong, muted, and inverse foreground decisions because components consume those semantic colors directly rather than relying only on CSS inheritance.

--qp-border-color

Chooses the standard edge color for ordinary bordered surfaces.

--qp-border-color--strong

Chooses the stronger edge color used for emphasized separation.

--qp-border-width

Choose the standard thickness of ordinary QP edges.

--qp-code-font-family

Establish the monospace typeface for code and technical reference content.

--qp-color-black

Provides black in the Base authored Color vocabulary.

--qp-color-blue

Provides the Base blue value in the authored Color vocabulary.

--qp-color-blue-light

Provides the lighter Base blue value in the authored Color vocabulary.

--qp-color-ink

Provides the Base near-black ink value in the authored Color vocabulary.

--qp-color-ink-dark

Provides the darker Base ink value in the authored Color vocabulary.

--qp-color-ink-soft

Provides the softer Base ink value in the authored Color vocabulary.

--qp-color-mist

Provides the Base pale neutral mist value in the authored Color vocabulary.

--qp-color-mist-dark

Provides the darker Base mist value in the authored Color vocabulary.

--qp-color-mist-light

Provides the lighter Base mist value in the authored Color vocabulary.

--qp-color-white

Provides white in the Base authored Color vocabulary.

--qp-control-padding-block-md

Choose the ordinary block-axis density used by action controls and control-like bars.

--qp-control-padding-block-sm

Choose the compact block-axis density used by navigation, search, and similar controls.

--qp-control-padding-inline

Choose the standard horizontal breathing room for compact navigation, search, and TOC controls.

--qp-document-background-color

Chooses the document canvas color beneath QP content. Coordinate it with ordinary and alternate surface colors and their foregrounds; changing inherited document color alone does not update components that consume semantic colors directly.

--qp-document-background-image

Choose optional artwork, texture, photography, or gradients for the document canvas.

--qp-document-background-repeat

Choose how document background artwork tiles across the canvas.

--qp-document-background-size

Choose how document background artwork is scaled across the canvas.

--qp-document-font-family

Establish the primary typeface for document content and inheriting interface text.

--qp-focus-color

Chooses the visible focus color used across QP interaction surfaces.

--qp-focus-width

Choose the standard visible focus-indicator thickness across QP controls and surfaces.

--qp-font-size-2xl

Establish the major-heading canonical type level for document-level hierarchy.

--qp-font-size-3xl

Establish the display canonical type level for responsive PageHeader typography.

--qp-font-size-lg

Establish the large canonical type level for component titles and modest emphasis.

--qp-font-size-md

Establish the standard canonical type level for body copy and ordinary controls.

--qp-font-size-sm

Establish the small canonical type level for captions, secondary text, and compact controls.

--qp-font-size-xl

Establish the extra-large canonical type level for section headings and prominent content titles.

--qp-font-size-xs

Establish the smallest canonical type level for compact metadata and tertiary labels.

--qp-font-weight-bold

Establish the canonical bold weight for headings and strong emphasis.

--qp-font-weight-medium

Establish the canonical medium weight for moderate interface emphasis.

--qp-font-weight-regular

Establish the canonical regular weight for ordinary reading text.

--qp-font-weight-semibold

Establish the canonical semibold weight for navigation, actions, and labels.

--qp-heading-line-height

Choose the shared vertical rhythm for document headings.

--qp-heading-text-color

Chooses the standard heading foreground consumed directly by QP headings. Coordinate it with the surfaces headings occupy; changing body color does not necessarily change this value.

--qp-line-body

Choose the default vertical rhythm for body copy and ordinary readable text.

--qp-link-text-color

Chooses the ordinary link color independently from other interactive emphasis.

--qp-radius-lg

Establish prominent rounding for cards, panels, and major containers.

--qp-radius-md

Establish standard rounding for ordinary controls, media, and surfaces.

--qp-radius-sm

Establish compact rounding for controls and subtle surface treatment.

--qp-raised-content-shadow

Establish the standard elevation treatment for raised content surfaces and framed media.

--qp-space-md

Choose the base unit that controls QP’s overall spatial density.

--qp-subtitle-max-width

Choose the standard readable measure for explanatory subtitles across major QP compositions.

--qp-surface-background--hover

Chooses the ordinary hover surface used by interactive components. Coordinate it with the corresponding interactive foreground and focus decisions so hover remains visibly distinct and readable.

--qp-surface-background--muted

Chooses the subdued supporting surface used by alternate and muted UI. Pair it with foreground colors that remain legible when QP components consume their semantic text variables directly.

--qp-surface-padding-inline

Choose the default responsive inline safe area inside major QP surfaces.

--qp-system-color-highlight

Provides the browser or operating-system highlight color for selected content.

--qp-system-color-highlight-text

Provides the browser or operating-system text color for selected content.

--qp-system-color-transparent

Represents complete transparency independently from the authored palette.

--qp-system-layer-modal

Defines the 300–399 floor for QP-managed modal and takeover interface, demonstrated by Modal and Lightbox. Components assigned here may use small local increments without crossing into system-feedback airspace.

--qp-system-layer-overlay

Defines the reserved 200–299 floor for QP-managed temporary overlays above persistent interface. Base currently has no established direct consumer; the floor remains architectural airspace rather than a generic z-index token.

--qp-system-layer-persistent

Defines the 100–199 floor for QP-managed persistent interface, demonstrated by StickyTray. Persistent is an architectural role, while sticky is only a CSS behavior; theme-authored sticky content normally remains below this floor.

--qp-system-layer-system

Defines the 400-and-above floor for QP-managed transient system feedback, demonstrated by Toast. This highest stratum is reserved for interface that must remain visible above ordinary interactive layers.

--qp-system-radius-none

Represents the intrinsic absence of rounding independently from the authored radius scale.

--qp-system-space-none

Represents the canonical absence of spacing for semantic relationships that resolve to zero.

--qp-text-color

Chooses the ordinary readable foreground consumed directly by QP components. Coordinate it with the document canvas and ordinary surface colors; setting body color alone does not replace this theme decision.

--qp-text-color--inverse

Chooses the foreground for surfaces where the ordinary contrast relationship is reversed, including strong, accent, and overlay contexts that inherit this decision. Coordinate it with those surfaces instead of assuming white or document-level inheritance.

--qp-text-color--inverse-muted

Chooses the subdued foreground color used for secondary information on inverse or dark surfaces.

--qp-text-color--muted

Chooses the secondary foreground consumed directly for captions, metadata, and supporting content. It must remain legible against the theme’s ordinary and muted surfaces rather than merely appear visually quieter.

--qp-text-color--strong

Chooses the stronger foreground consumed by headings and emphasized component content. Coordinate it with every ordinary and alternate surface on which strong content appears.