Theme Roster

Roster is a Tome theme for businesses that run classes on a timetable and sell a term of them: gymnastics, dance, swim, martial arts, camps and preschools. Its stance is "come try a class". The reader is usually a parent on a phone, so a Roster page answers, in order: is there a class for my child's age, when is it, who teaches it, and is it safe. Then it makes the first step small, a free trial class. It is warm without being cute, and every reassurance on the page is something a parent could check.

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 (local-class-finder, local-class-schedule, local-class-pathway, local-credentials and local-price-list in @wabbit/tome-blocks-local-pack) read their classes from the opt-in local-class-schedules collection in @wabbit/tome-local.

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 Roster turns on (0.20.0 adds the font-waiting arm, --tome-reveal-wait: fonts). @wabbit/tome-core is needed only for the ./register subpath and the ThemeManifest type.

What is in the first release

Roster ships the full treatment set for a class-based business's home page and program pages: four palettes with their derived dark modes, the type and rhythm tokens, the self-hosted fonts, the section opener, the Navbar 1 and Footer 7 chrome treatment (including the hours-aware call and the phone bar), the class finder (ask and level), the Safe Hands strip and panel, the framed timetable with its phone strip and print sheet, the pathway (bands, cards and ladder), the coaches, the first-class steps, parent voices, the term fee cards, the FAQ, the close, the program page's detail, next-sessions card and schedule slice, the level stripe, the tags and spots marks, and the motion tokens with their reduced-motion paths. ROSTER_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-roster/styles.css'
import '@wabbit/tome-theme-roster/fonts.css'

<html data-tome-theme="roster">                                            <!-- Chalk, light -->
<html data-tome-theme="roster" data-tome-palette="lane">                   <!-- Lane -->
<html data-tome-theme="roster" data-tome-palette="camp">                   <!-- Camp -->
<html data-tome-theme="roster" data-tome-palette="sprout" data-theme="dark">

With no data-tome-palette the theme renders Chalk. All four palettes are light by design, with alternating ground and tint bands and no dark bands; data-theme="dark" gives each its derived dark mode, which exists for conformance and for a site that wants one.

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-roster/register'

Header: Navbar 1

Roster recommends the tome-chrome Header global on Navbar 1 (design version '1'): the wordmark, the links, a quiet "Call us, open till 7" note and the one filled "Book a free trial". The header sits on the page ground and earns a hairline once the page scrolls ([data-nav-scrolled="true"], which Navbar 1 reports when the Header global turns on reportScrolled). The call to action is the action fill, a 44px pill; the phone call beside the hamburger is an outline pill; both are set through chrome's --tome-header-cta-* and --tome-header-call-* knobs. The desktop call (headerCall.showOnDesktop) and the hours-aware drop of the call (callWhen: 'open') are styled to the contract chrome's open-state seam will emit.

The name is your LogoComponent. Mark it up with the lockup hook: <span data-roster-wordmark>Your Gym</span>. It is Bricolage 700 at 22px (24px in the footer). A level stripe's segments inside it (data-level-segment) draw as 10px dots.

Footer: footer 7

Set the Footer global to design version '7'. A hairline above; group labels in Atkinson 700, links in the meta size, text rows ([data-footer-text-row], emphasis [data-footer-text-strong]) for the front desk's hours and address, and the fine print ([data-footer-fine-print]) for the credits line, ruled off and at full width. There is no footer call-to-action band: the closing enrol band is the last ask.

The hero

The class finder is "Start with your child's age": two pill questions (an age band, then experience) answer in place with one result card holding the said-back line, the class, its level stripe and level line, this week's times, a real spots line, the one filled trial button and a link to the timetable. From 1024px a single tall photo stands in the right lane, from grid line 12 to the content edge, at the copy column's height; below that it shows once, after the result card (4:3 on phones, 3:2 on tablets). The treatment is written against the hook contract (data-class-finder, data-finder-*).

The level stripe

The theme's one recurring mark: one 14x7 pill per level in the learner's track, 3px apart, filled in the accent mark up to the learner's level and outlined in --input beyond it. It always ships with text ("Level 2 of 5") and its markup is aria-hidden. It fills once to the real level when it first enters view, only where motion is allowed: the stripe's island sets data-stripe-fill="armed" on mount and "in" on first sight. Under prefers-reduced-motion the collapsed state does not exist, so the stripe is always drawn at its real level.

Scroll reveal

Roster turns on tome-ui's opt-in platform scroll reveal (--tome-reveal: on) with a small rise and fade: --tome-reveal-rise 12px, --tome-reveal-duration 420ms, --tome-reveal-stagger 80ms. It also sets --tome-reveal-wait: fonts, which tome-ui releases that read the token use to arm only after fonts and layout settle. The reveal runs only where the site mounts the controller:

import { TomeReveal } from '@wabbit/tome-ui/reveal'

// inside <body>, once
<TomeReveal />

Without the controller nothing moves and nothing is hidden. Blocks that animate themselves (data-tome-motion="self") are skipped by the controller. data-tome-reveal="off" on <html>, a region or a block root turns it off there, and overrides the theme. Pills answer a press with a small spring (--roster-spring, a 0.97 scale), only where motion is allowed.

Fonts

Bricolage Grotesque (one variable face carrying opsz 12 to 96 and wght 500 to 800, with the width axis pinned) and Atkinson Hyperlegible Next (upright and italic, each one variable face carrying wght 400 to 700) ship inside the package as latin-subset woff2, with their SIL OFL 1.1 licences (fonts/OFL-BricolageGrotesque.md, fonts/OFL-AtkinsonHyperlegibleNext.md). There is no third-party font request by default. Three ways to deliver them:

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

import { getRosterFontPreloads } from '@wabbit/tome-theme-roster/fonts'

// in <head>: preload the display roman and the body roman
{getRosterFontPreloads({ src: '/fonts/roster/' }).map((l) => <link key={l.href} {...l} />)}

Both faces are cut from the full TTFs in the google/fonts repository at a pinned commit (scripts/subset-fonts.py, SHA-256 checked), not from the Google Fonts CSS API, because the served builds strip layout features. The subset keeps tnum in both faces: the timetable depends on "4:30" and "11:00" stacking on one column in every row, and Atkinson's tabular advance is 632 units at every weight from 400 to 700. Neither face has U+2197, so the new-tab mark is a CSS mask on [data-new-tab]::after, never a glyph.

Bricolage sets headings at 700 (the hero at 720) and 800 only for a single oversized numeral; its default instance is 96pt ExtraBold, so every Roster rule that sets it also sets its weight, and font-optical-sizing: auto opens the hero up while small headings stay compact. Atkinson is 400 at the one body size (19px), 700 for strong, and 600 for the sentence-case meta voice and tags. Italic means a quoted parent: a testimonial's quote is the only italic.

The grain effect

There is one opt-in effect: a faint fractal-noise grain on the ground and the header frame. It is static, Sprout in light mode only (every other palette and mode declares its grain as none), and it never touches the footer.

<html data-tome-theme="roster" data-tome-palette="sprout" data-roster-effect="grain">
<section data-roster-effect="grain">…</section>

Sites can also mark their own markup with data-roster-meta (the meta voice), data-roster-figures (tabular figures) and data-roster-num (a single oversized Bricolage numeral).

Public API

import { rosterThemeManifest } from '@wabbit/tome-theme-roster/manifest'

rosterThemeManifest.palettes.map((p) => p.label)
// ['Chalk', 'Lane', 'Camp', 'Sprout']

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 class schedule's own knobs, set explicitly: --tome-schedule-today, -tag-bg, -tag-ink, -action-bg, -action-ink, -row-bg
• the four --tome-type-* families, each paired with its --font-* slot

The colour roles Roster adds are private: --roster-mark (the accent as punctuation), --roster-tint, --roster-tag-on-tint, --roster-stripe-empty, --roster-action, -action-hover, -on-action (the one fill), the confirm, error and accent tints, --roster-placeholder, the grain, and the timetable frame: --roster-frame (one tone darker than the page), --roster-frame-today, --roster-frame-edge and --roster-frame-rule. Anything drawn straight on the frame takes --roster-frame-edge, never --input, which measures 2.84 to 2.90 on the light frames.

Selector ladder (specificity, never load order):

The palette files are generated from the design-brief script (palettes.mjs --fix) and copied, never retyped.

Shape and rhythm. --radius 8px; --tome-radius-sm 8px (fields, the term strip), md 16px (cards and rows), lg and xl 28px (media, the trial and fee cards, the timetable frame), full 999px for actions, age tags and the hero's pills. The prose measure is 600px and not negotiable. There are no accent bars: no thick coloured top or left stripe on any card, and the only coloured stroke on a label is the 3px section-label dash.

Type scale. The approved mockup was 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. The body is 19px for all running copy.

Palettes

Contrast

All ratios are WCAG 2.x. Text must reach at least 4.5. Marks, field outlines, empty stripe segments, the focus ring, the frame's edge and the today rule must reach at least 3. The test suite re-measures every pair in all eight palette modes from the shipped values, the timetable frame's roles included.

The tightest passes: muted ink on the frame in Lane light (5.12), the accent mark on the frame in Sprout light (3.13), Sprout's accent text on the tint (4.72) and the empty stripe segment on the tint in Chalk light (3.03). Every dark mode is 8.13 or more on the frame's text pairs.

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. Element names are used only where a block publishes no part hook (the hero's heading and photo, a question's legend).

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.

Tests

pnpm --filter @wabbit/tome-theme-roster 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, scoping, no module class names, font pairing) and in platform mode
• manifest validation, its agreement with package.json, registration, and the pending-catalog tripwire for blocks not yet registered
• every palette defining the full required set in both modes, the schedule knobs and the frame agreeing with the roles
• a contrast test that re-measures every text pair at 4.5 and every mark or boundary at 3 in all eight modes, the frame roles included, and pins the tightest pairs
• the A4.1 font pairing, the figures rule, Bricolage rules always setting a weight, the self-hosted faces with their licences, tnum and the axes read out of the woff2 files, and the subset range
• hook coverage: every hook this release styles has a selector, the hooks of unreleased treatments are not styled early, and the few that carry behaviour only are listed with the reason
• no colour literal outside src/tokens/, no comment that swallows a rule, no structural or class selector, no hand-coloured shadow, no accent bar, and every treatment rule scoped to the theme
• the reveal switch and timing, the page lanes, the motion tokens, the hero's grid and photo lane, and every reduced-motion path