CSS variables and tokens

CSS variables customize presentation; layoutTokens supplies canonical numeric values for core calculations and generated grid CSS. Changing CSS does not mutate the token object. This page distinguishes public theme controls, generated layout variables and implementation details.

Dark mode ([data-ps-theme='dark']) assigns background #151d27, ink #f2f5fa, body #bdcbdc, accent #91baff, standard #202d3b and muted #28384a. Other variables retain their values. The border is defined on :root; do not assume it is recomputed from every descendant ink override. Set border explicitly when adapting a palette if needed.

Legacy card minimum-width and carousel-width variables were removed in 0.2. Catalog geometry is generated from the same tokens as core.

The ps-grid-scope class resolves the active container size. These generated values are read-only layout contracts, not theme inputs: --ps-grid-columns, --ps-grid-gap, --ps-grid-headline-size, --ps-grid-headline-line-height, --ps-grid-body-size, --ps-grid-body-line-height, --ps-grid-headline-gap. Legacy --ps-{size}-* inputs were removed. Defaults:

All dimensional values are CSS pixels. Change canonical layoutTokens plus the generator and parity tests when revising geometry; overriding columns/gaps only in a host stylesheet breaks the shared contract.

ContentBlock writes --ps-content-block-span-xs, --ps-content-block-span-s, --ps-content-block-span-m, --ps-content-block-span-l; container rules select --ps-content-block-span. Configure the span prop instead of overriding these.

SectionSurfaceGroup writes --ps-section-top-radius and --ps-section-bottom-radius, using var(--ps-radius) or 0px. Ungrouped surfaces default to 0px. Image uses private --image-ratio and --image-fit variables; configure ImageData instead.

layoutTokens is exported from core; no JSON deep import is required. The groups below describe its entire structure. Treat it as canonical read-only configuration in application code; there is no reactive theme API for mutating it.

cards contains:

These feed resolveCardLayout and Svelte catalog cards; editorial cards use content typography. breadcrumb contains:

Breadcrumbs consumes these generated viewport sizes and minimum heights, allowing wrapping to grow beyond the minimum. Navigation consumes the generated menu and satellite geometry.

import { layoutTokens } from '@page-sections/core';
console.log(layoutTokens.grid.m.columns, layoutTokens.grid.m.gap); // 8, 16

Related: Themes and Styling, Responsive Layout and Breakpoints, Core API.

These variables are implementation outputs. Configure component props or canonical tokens instead of assigning them in a host theme.

--ps-code-light and --ps-code-dark are per-token values emitted by CodeBlock from its optional highlighted input. They are presentation internals, not global theme settings. Code surfaces use the existing standard/muted palette and border/radius tokens.

layoutTokens.sidebars defines stickyTop (16), contentMenuOffset (16), xl (outer 12, gap 12, panelWidth 248), wide (outer 28, gap 28, panelWidth 248) and extraWide (outer 28, gap 28, panelWidth 300). Docked content menus additionally fill the gap.

Generated internal geometry variables: --ps-sidebar-gap, --ps-sidebar-sticky-top, --ps-content-menu-offset, --ps-sidebar-left-width, --ps-sidebar-right-width, --ps-frame-left and --ps-frame-right. Change canonical layout tokens and regenerate CSS when changing geometry.

--ps-surface-shadow controls the subtle left-sidebar and contained section shadow. Internal --ps-shadow-top-clip and --ps-shadow-bottom-clip prevent seams between connected section surfaces.

Internal --ps-content-menu-radius and --ps-content-menu-shadow switch the right panel between docked and freestanding surfaces.