The quell Architecture System

The quell system organizes global styles and layout mechanics through an explicit loading order. It isolates cascading boundaries via native layers and relies on thin utility scripts for DOM state tracking.

System Dependency Chain

The platform requires an explicit compilation and load order. Each sheet establishes a strict boundary to prevent specificity escalation:

quell-base.css > quell-core.css > quell-light.css > quell-light.js

1. Structural Layering

Global rules follow a strict cascade sequence. Priority is determined entirely by layer order rather than selector depth:

@layer ghost_tokens, reset, baseline, forms, utilities;

ghost_tokens: Assigns fallback properties on :root to control layout metrics prior to the initial paint.
reset: Normalizes user-agent discrepancies.
baseline: Sets baseline typography and document defaults.
forms: Applies standard form element resets.
utilities: Reserves a high-priority slot for downstream utility rules.

2. Token Initialization & Themes

quell-core.css: Initializes global design variables outside of explicit layers. It maps font scales, spacing steps, and layout dimensions directly to :root. Because these tokens are unlayered, you can modify or reassign them downstream without adjusting selector specificity.
quell-light.css: Manages structural templates, layout grids, and theme-specific component states. It establishes the 12-column flexbox rules and scopes color profiles. Transparency transitions use native @supports (color: oklch(0% 0 0)) blocks to handle alpha channels within the oklch color space.

3. Behavior Stabilizer

A zero-dependency script manages interactive mutations that fall outside native CSS capabilities. Elements configure runtime interactions declaratively via data attributes:

data-q-toggle="[id]" // Manages visibility states and updates matching [aria-expanded] attributes.

data-q-exclusive // Groups interactive containers to enforce accordion mechanics.

data-q-dismiss // Releases focus scopes and executes native <dialog> element closures.

data-q-spy="[id]" // Registers viewing thresholds through the [IntersectionObserver] API.

data-q-spy-link="[id]" // Tracks document positioning and applies [aria-current="true"] to active indicators.

4. 4. Specificity Escalation

Styles resolve based on standard cascade hierarchy, listed from lowest priority to highest priority:

Layered Declarations: Styles bound to explicit @layer blocks.
Global Token Adjustments: Variable definitions assigned on :root outside of explicit layers.
Unlayered Selectors: Standard selectors declared outside a layer block, which automatically bypass layered constraints.