Theme Commons

Commons is a Tome theme for organizations that belong to their members: neighborhood associations, tenant and parent groups, co-ops, community halls, clubs and small nonprofits. Its stance is "the record is the design". A reference number leads every figure, a filed document backs every claim, the Running Total is one honest line over a flat bar, and the page asks for money exactly once, in the one dark band. It never pleads: no pity imagery, no countdown, no pulsing, no pre-ticked box, and nothing set over a photograph.

This package is a theme (a ThemeManifest of kind: 'theme'). It owns no blocks. It declares the whole token surface blocks read, self-hosts its two OFL font families, and restyles blocks and chrome through their public hooks. The blocks it is composed from are campaign-pack's campaign-hero (variant portrait), campaign-count, give-form, membership-card, campaign-case, campaign-tiers and campaign-terms; division-card and event-list from org-pack; stat (variant sourced) and team-roster from agency-essentials; section-header, layoutGrid, text-block and content from extras; the content-writer archive; and the marketing-starter faq.

Layer: ui · Family / tier: themes / addon · Versioning: independent.

@wabbit/tome-ui is a CSS-contract peer. Its tokens.css re-declares the var()-aliased Layer 2 under [data-tome-theme] and defines the fixed-band ink family this theme sets, and it ships the platform scroll reveal Commons turns on. @wabbit/tome-core is needed only for the ./register subpath and the ThemeManifest type.

What is in the first release

Wave 1 ships the foundation and the home page's first and last bands; Wave 2a adds most of the bands between them:

• Foundation: four palettes (Grove, Civic, Vesper and Rally) with their derived dark modes, the type and rhythm tokens, the self-hosted fonts, the base treatments, the record-line voice, the section opener (the masthead line), the motion tokens with their reduced-motion paths, and 44px hit areas on every control.
• Chrome: Navbar 1 with Give (the fill) and Join (the outline) always at the right.
• Home: the hero (campaign-hero portrait: a portrait photograph from the left page edge, the mission with one phrase at 800, Give and Join, the Running Total); the Running Total (the line and bar, and the Ledger Strip); the sourced figures ledger (stat sourced); and the close as the one dark band (an extras layoutGrid holding the Running Total, the Give form and the Card).

• Between the hero and the close (Wave 2a): the band rhythm and the tint (the opener's gap, the section rhythm, ground and tint alternating), programs (division-card entry, the photo's side alternating), the updates and the Record (archive filed: a lead and a ruled list; a register with the record number, the category as a tint wash, the dates and a Download action), events (event-list: dated rows, capacity chips, "Add to calendar"), people (team-roster people, with the statement tile on a hairline and no top bar) and governance (the layoutGrid that holds the next board meeting), the FAQ with its "Still have a question?" card, the footer's tonal zone (Footer 7), and the phone menu (no scrim).

Wave 2b adds the campaign page's case, levels and terms, the checkout chrome, the thank-you page and the sign-up sheet. COMMONS_STYLED_BLOCKS lists every block with a treatment.

Usage

Import the stylesheet once at the app root, after tome-ui's tokens, and activate the theme on <html>:

// app/layout.tsx
import '@wabbit/tome-ui/tokens.css'
import '@wabbit/tome-theme-commons/styles.css'
import '@wabbit/tome-theme-commons/fonts.css'

<html data-tome-theme="commons">                                          <!-- Grove, light -->
<html data-tome-theme="commons" data-tome-palette="civic">                <!-- Civic, light -->
<html data-tome-theme="commons" data-tome-palette="rally" data-theme="dark">  <!-- Rally, derived dark -->

With no data-tome-palette the theme renders Grove. Every palette is a light design and data-theme="dark" gives it its derived dark mode, built from the palette's band values. Rally's closing band stays the red fill in both modes.

To have the admin ThemeSwitcher, createThemeConfig() and other registry readers list it, register it on the server before building the Payload config:

import '@wabbit/tome-theme-commons/register'

The accent fills exactly two things

The accent fills the primary action (Give, or Join) and the Running Total's bar. Everywhere else it is punctuation: rules, the record number, the focus ring, hover underlines. Every accented state also changes shape or weight, because the mark against the ink is under 3:1 in every palette. In Grove, the default, the lantern amber fills only Give and the bar, its label is green, the Give button carries a 1.5px ink edge, and the mark, the ring and the record number are the ink itself (1.00:1), over a dark-glass track.

The Card has no accent top rule

Every Card has a neutral hairline all round. The recommended tier has a 2px ink border all round and a visually hidden "Recommended", never a coloured top edge, a badge or a bar.

The Running Total

The theme maps its roles onto campaign-pack's own properties (--campaign-bar-fill, --campaign-bar-track, --campaign-bar-height, --campaign-bar-radius, --campaign-dur-bar, --campaign-ease) and does not style the bar's inner element. On the closing band the fill is the band's action colour and the track the band line. The numerals count up once and the bar fills once, never past the real total; under reduced motion and without script the final values render at load.

Fonts

Two variable faces ship inside the package as latin-subset woff2 files, each with its SIL OFL 1.1 licence: Schibsted Grotesk (wght 400 to 900: the display, the record line and every numeral; fonts/OFL-Schibsted-Grotesk.md) and Inclusive Sans (wght 400 to 700: the body; fonts/OFL-Inclusive-Sans.md). There is no third-party font request by default. Three ways to deliver them:

• import '@wabbit/tome-theme-commons/fonts.css': the bundler resolves the files from this package.
• Your own host: copy the files from @wabbit/tome-theme-commons/fonts/* and inject getCommonsFontStyles({ src }).
• next/font/local, using the files from getCommonsFontFaces().

import { getCommonsFontPreloads } from '@wabbit/tome-theme-commons/fonts'

// in <head>: preload the two faces
{getCommonsFontPreloads({ src: '/fonts/commons/' }).map((l) => <link key={l.href} {...l} />)}

Sources, recorded in scripts/subset-fonts.py (the build never runs it) and checked by SHA-256:

Schibsted's default figures are proportional and its tabular comma takes a full figure width, so big numerals and record numbers ("No. 2026") are proportional and tnum is set only where figures stack in a column. The Schibsted subset keeps tnum, pnum and case; the ten tabular figures share one advance at every tested weight (the recipe checks its own output and the test suite re-checks the shipped file). Inclusive Sans has no tnum, so no figure column is ever set in it. Sofia Sans was the round-1 alternate; option C was picked in Schibsted, so the package ships Schibsted only. No italic is shipped: emphasis is weight.

Public API

import { commonsThemeManifest } from '@wabbit/tome-theme-commons/manifest'

commonsThemeManifest.palettes.map((p) => p.label)
// ['Grove', 'Civic', 'Vesper', 'Rally']

Tokens

The theme sets Layer 1 (the names tome-ui's tokens.css reads: --background, --foreground, --card, --primary, --accent, --muted, --border, --input, --ring, the feedback, chart and muted2 names) and lets tome-ui's generated re-resolution derive the aliased Layer 2. It sets the Layer-2 names that have no Layer-1 input behind them:

• --tome-color-accent-text, the feedback *-text weights, and --tome-color-surface-tint
• the fixed-band inks (--tome-color-surface-solid-dark and its family, --tome-color-surface-inverse and its family)
• the four --tome-type-* families, each paired with its --font-* slot

The colour roles Commons adds are private --commons-* tokens: the fill (-fill, -on-fill, -fill-edge), the mark and the record number (-mark, -accent-text), the bar's -track, the closing band (-band, -on-band, -on-band-muted, -accent-on-band, -band-action, -on-band-action, -band-input, -ring-on-band and the hairline -band-line), the Card (-card-ink, -card-muted, -card-accent-text, -card-rule), the tags and the pressed segment (-tag-bg, -seg-on), the footer zone (-footer-bg), the tints, and the photo tone.

Selector ladder (specificity, never load order):

The palette files are generated by scripts/generate-tokens.mjs from scripts/palette-roles.json, the output of the palette script (scripts/palettes.mjs --fix), and copied, never retyped.

Shape and rhythm. Fields and tags are 3px, media and cards 6px, the Card alone 14px, actions are pills, bands are square. Rules are 1px, the record hairline 2px. The prose measure is 600px. The page lanes are three marginalia columns each side and one prose-pad column, four each side from 1760px.

Type scale. The approved mockups were authored on a 16px root and tome-ui sets html { font-size: 18px }, so every rem value is converted (x 8/9) and the vw terms are kept.

Palettes

Rally ships as a recorded near-match to Roster Chalk (accent 0.065, whole palette 0.086 in OKLab).

Contrast

All ratios are WCAG 2.x. Text must reach at least 4.5. Marks, field outlines, the focus ring, the Give button's boundary, the bar against its track and the closing band's field outline and ring must reach at least 3. The band line is a hairline with no floor; band ink on it (the band's tags) must reach 4.5. The test suite re-measures every pair in all eight palette modes from the shipped values, the band pairs included, and pins the brief's tightest ones: Grove's Give label on the lantern at 4.57 and its dark bar against its track at 3.10. The track is under 3:1 against the ground in every light palette but Grove, so the goal is always printed as a numeral beside the bar.

What it styles

Treatments target only public hooks: data-block-type on the block wrapper, data-block-variant on the root, the blocks' documented data-* part attributes, and published component tokens. The positional reads are a cell's own row position in the ledgers and the first and last cell of the close.

Server / client posture

The package is pure CSS plus constants. It has no React components and no 'use client' files, so it is inert under React Server Components. It adds nothing to a client bundle beyond the stylesheets the consumer imports. ./register is a server-side import. The Running Total's motion is campaign-pack's island, not this package's.

Tests

pnpm --filter @wabbit/tome-theme-commons test

The vitest suites cover:

• the theme conformance check in theme mode (Layer-1 surface, *-text literals, radius and font slots, the full dark redeclaration, palette coverage for all four palettes in both modes, scoping, no module class names, font pairing) and in platform mode
• manifest validation, its agreement with package.json (the version is read from the newest CHANGELOG heading, or 0.0.0 before the first release), registration, and the pending-catalog tripwire for the campaign-pack blocks not yet registered
• every palette defining the full required set in both modes, every value agreeing with the palette script's output, the band line present in all eight modes
• a contrast test that re-measures every text pair at 4.5 and every mark or boundary at 3 in all eight modes, the closing band's pairs and the bar against the band line included, and pins the brief's pairs
• the A4.1 font pairing, the weight tokens, every rule setting both its family and its weight, the self-hosted faces with their licences, tnum, pnum and the axes read out of the woff2 files, tnum across the weight range (needs Python with fontTools; set COMMONS_FONT_PYTHON to run it), and the subset range
• hook coverage: every hook this release styles has a selector, the hooks of later waves are not styled early, and the few that carry behaviour only are listed with the reason
• the measure: every running-text hook resolves to 600px and nothing widens it
• no colour literal outside src/tokens/, no comment that swallows a rule, no class selector, no hand-coloured shadow, no accent bar and no accent top rule, the shape tokens, no scrim or overlay on a photograph, and every treatment rule scoped to the theme
• the reveal switch and timing, the page lanes, the motion tokens, the hero's, the close's and the ledgers' geometry, and every reduced-motion path

License

Commercial, see LICENSE.md. Published to the private registry at https://npm.wabbit.com/.