Theme | Quail Pages

Theme

Authoritative Base Theme Contract and inventory, enriched with deterministic observations from Base CSS. Authored fields define the semantic variable architecture; generated observation fields record factual definitions and usage. variableType describes provenance: System values are immutable framework or platform truths; Enum values are authored reusable vocabulary; Roots are independent semantic theme-author decisions; Derived values are deterministic semantic calculations; Inherited values are exact semantic mappings. designType classifies the kind of design decision represented by the value. references, inheritsFrom, and derivedFrom describe relationships between QP variables. consumedBy identifies Base source files that directly consume the variable. cssProperties identifies the CSS properties that directly consume the variable in Base; an empty cssProperties array means no direct CSS-property consumer was proven. CSS property names and value syntax follow the CSS platform rather than QP-specific rules. Consumers may use authoritative CSS references such as MDN to inspect the valid syntax and supported values for each cssProperties entry.

Theme answers: Where does each styling value come from? Enum values form the authored value vocabulary; Roots assign semantic meaning; Derived variables calculate semantic decisions; Inherited variables adopt one semantic decision unchanged; and System values are intrinsic framework truths.

Enum, Root, and System are provenance origins with different jobs. Enum names an available value, Root names an independently authored meaning, and System belongs to QP or the platform. Composite CSS references remain separately visible as dependencies.

Background

Document-level background treatments that coordinate the canvas color, imagery, repetition, and scale. 0 Enum values; 0 System variables; 4 Root variables; 4 total variables

Border

Complete edge treatments that coordinate border width, style, and color as one authored decision. 0 Enum values; 0 System variables; 1 Root variable; 15 total variables

Border Width

Authored edge thicknesses used where border and focus geometry can vary independently from color. 0 Enum values; 0 System variables; 2 Root variables; 11 total variables

Color

Authored color vocabulary and coordinated semantic foreground, surface, edge, interaction, and state decisions. QP components often consume these semantic colors directly, so document-level CSS inheritance alone does not establish a complete theme palette. 10 Enum values; 3 System variables; 15 Root variables; 151 total variables

Effect

Complete visual-processing recipes for architectural surfaces where compositing is an intentional theme decision. 0 Enum values; 0 System variables; 5 Root variables; 5 total variables

Font Family

Typeface families that establish the document, heading, code, and component voices of a theme. 0 Enum values; 0 System variables; 2 Root variables; 4 total variables

Font Size

The responsive type scale and semantic mappings that establish readable hierarchy across QP content and controls. 0 Enum values; 0 System variables; 7 Root variables; 19 total variables

Font Weight

Canonical emphasis levels and semantic mappings that establish typographic hierarchy across QP content and controls. 0 Enum values; 0 System variables; 4 Root variables; 10 total variables

Layer

Framework-owned semantic z-index floors that divide global stacking into architectural airspace rather than providing general-purpose tokens. Ordinary content and theme composition normally use document order, local stacking contexts, or explicit values below the persistent floor (currently 0–99). Consuming a system floor assigns interface to that QP-managed stratum; CSS behavior such as position: sticky does not do so by itself. The gaps between floors allow small local adjustments within an assigned stratum without crossing into another one. 0 Enum values; 4 System variables; 0 Root variables; 4 total variables

Layout

Authorable composition choices that determine how QP structures arrange content. Excludes required mechanics, containment, and intrinsic responsive behavior. 0 Enum values; 2 System variables; 6 Root variables; 11 total variables

Line Height

Text-rhythm decisions and semantic mappings that establish readable line spacing across document and component typography. 0 Enum values; 0 System variables; 2 Root variables; 6 total variables

Radius

Canonical rounding magnitudes and semantic mappings for surfaces, controls, focus treatments, and media. Intrinsic circles and pills remain local. 0 Enum values; 1 System variable; 3 Root variables; 30 total variables

Shadow

Complete elevation recipes and semantic mappings that establish surface separation and interaction depth. Optical and legibility shadows remain local. 0 Enum values; 0 System variables; 4 Root variables; 12 total variables

Size

Meaningful dimensions, capacity limits, and proportions that alter the scale or composition of QP elements. Excludes typography, intrinsic sizing, defensive constraints, and fixed responsive mechanics. 0 Enum values; 0 System variables; 42 Root variables; 51 total variables

Spacing

Spatial rhythm and independently authorable spacing relationships that control the density and separation of QP compositions. 0 Enum values; 1 System variable; 13 Root variables; 68 total variables

Machine-readable contracts

Theme is backed by the generated QP Base variable inventory.

Architecture

qp.architecture.json Defines how Quail Pages concepts are organized, names canonical responsive presentation-width ranges, and records keyless stylesheet infrastructure such as base.css.

Style Guide Intake

qp.style-guide-intake.json Defines the evidence-first intake process for establishing, completing, or normalizing a brand into a durable Quail Pages style guide.

Style Guide

qp.style-guide.json Defines the canonical, normalized source of truth for a brand's visual identity and creative authority, used by downstream theme and site building.

Base Theme Inventory

qp.theme.json Defines the authoritative Base theme variable architecture and enriches it with generated CSS definitions, consumers, properties, and source observations.

Theme Extension Schema

qp.theme-extension.schema.json Defines the sparse declaration format for theme overrides and theme-owned variable architecture; semantic remaps are inferred from exact references.

Theme Style Configuration Schema

qp.theme-style.schema.json Defines optional theme package metadata: a required stable ID plus optional display name and font-preload intent. Directory and style.css remain authoritative for discovery.