Theme Rounds

Rounds is a Tome theme for health and wellness practices, counseling and group practices included. Its line is "Know who's treating you": a new patient arrives with a worry, and the page answers in order what is wrong, what kind of care it is, what to expect, who they would see, what it costs, where to go, what they can check for themselves, and how to book or call. Its look is one idea, the inset rounded card: every colored section is a rounded card on the page ground, on the same edges as the photo hero, and only the header strip runs full width.

This package is a theme (a ThemeManifest of kind: 'theme'). It owns no blocks. It declares the token surface blocks read, self-hosts its two OFL font families, and restyles the practice pack, the local pack, chrome and a few marketing blocks through their public hooks. The blocks it is composed from are the thirteen blocks of @wabbit/tome-blocks-practice-pack (desk strip, need picker, offering list, steps, people list, offices, guide list, record header, path, reviewed line, credentials, related, book), the local pack's live status, logistics, locations, desk strip and credentials, high-impact-hero (the venue variant), faq, proof-plates and the estimate variant of contact.

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 Rounds turns on. @wabbit/tome-core is needed only for the @wabbit/tome-theme-rounds/register subpath and the ThemeManifest type. The theme is CSS and a manifest: it has no server or client components of its own, and importing it adds no client JavaScript.

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-rounds/styles.css'
import '@wabbit/tome-theme-rounds/fonts.css'

<html data-tome-theme="rounds">                                                    <!-- Morning, light -->
<html data-tome-theme="rounds" data-tome-palette="blush">                          <!-- Blush, light -->
<html data-tome-theme="rounds" data-tome-palette="stride" data-theme="dark">       <!-- Stride, derived dark -->
<html data-tome-theme="rounds" data-tome-palette="dusk" data-theme="dark">         <!-- Dusk, as designed -->

With no data-tome-palette the theme renders Morning. data-theme="dark" gives Morning, Blush and Stride their derived dark mode. Dusk's manifest entry carries defaultMode: 'dark', so the admin palette picker and themeConfigHtmlAttributes() open it dark; data-theme="light" is its derived light mode.

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

Recommended chrome: Navbar 1 (with headerCall.showNumber so the phone number is real text) and Footer 7, with the practice pack's PracticeStatusAnnouncement in the chrome announcementSlot for the field strip above the header.

Palettes

Four palettes, each light and dark, from the palette run in the spec workspace (scripts/palette-roles.json is its roles-only extract; the stylesheets in src/tokens/palettes/ are generated from it by scripts/generate-tokens.mjs, never retyped). Every text pair clears 4.5:1 and every mark, outline and focus ring clears 3:1 in all eight modes, and the test suite re-measures them from the shipped declarations.

The field is the band: the hero panel, the need picker, the closing field and the header strip. The accent fills the action. The wash fills the quieter cards. Accent text is not measured on the wash (Dusk dark measures 4.27:1 there), so a link set directly on a wash card is the ink, underlined.

Status

Every status pairs a shape and words with its color: a filled dot for open and accepting, a hollow ring for closed and not accepting. People are open | limited | waitlist | closed; offices are open | closing | closed | closed-today; a reviewed line is current | aged. Open and current use the success tint; the rest use the warning tint.

What the treatments do

• The inset rounded card. A practice-pack block asks for a tone with data-practice-tone (ground, tint, wash, surface or field); the four filled tones are rounded cards on the content lines, a gap apart, and a ground section is flat. The hero, the footer, the closing contact, the desk strip and the office and person cards share the 24px radius.
• The two-tier header. The announcement slot is a full-width field strip with live status per office, the phone and the emergency line; the header row prints the phone number large, in Gabarito 800, with a small label above it.
• The photo hero. The venue variant of high-impact-hero is a photo in a rounded card with one field panel; the scrim is off.
• The desk strip, the need picker and the first visit. One white card under the hero; a picker of tabs and reasons on the field, working without JavaScript; four connected numbered steps with a photo and a bring-list at equal height.
• People and care. Even portrait crops (4:5), languages and an accepting status; types of care as photo cards, the price list as rows.
• The closing field. Book and call as two equal tiles, a white card with the contact-only form and its data notice, and the emergency line in words.

Motion is one primitive, the platform scroll reveal (a rise of 10px over 500ms, played once). Reduced motion turns every transition and the reveal off. Interactive targets are at least 44px; actions are 52px.

Fonts

Two families ship inside the package as latin-subset woff2 files, each with its SIL OFL 1.1 license: Gabarito (display; variable wght 500 to 800; fonts/OFL-Gabarito.md) and Instrument Sans (body and interface; variable wght 400 to 700 with the wdth axis pinned at 100; fonts/OFL-InstrumentSans.md). The subset covers Basic Latin, Latin-1 and Latin Extended-A. There is no third-party font request by default. Three ways to deliver them:

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

import { getRoundsFontPreloads } from '@wabbit/tome-theme-rounds/fonts'

// in <head>: preload the display face and the interface face
{getRoundsFontPreloads({ src: '/fonts/rounds/' }).map((l) => <link key={l.href} {...l} />)}

Sources, recorded in scripts/subset-fonts.py (the build never runs it) and checked by SHA-256, all from google/fonts at commit 6c1dbe27dcf7d817d4b62cec033ba77fa8e2a5ec:

Both faces have tabular figures. Each keeps tnum and pnum in the shipped subset, each defaults to proportional figures, and the ten tnum figures share one advance at every tested weight (the recipe checks its own output and the test suite re-checks the files). So phone numbers, prices, times, dates and counts are set with font-variant-numeric: tabular-nums on every figure hook (data-practice-figure and the block-specific ones). Code falls back to the system monospace stack (the manifest has no mono slot).

Public API

import { roundsThemeManifest } from '@wabbit/tome-theme-rounds/manifest'

roundsThemeManifest.palettes.map((p) => p.label)
// ['Morning', 'Blush', 'Stride', 'Dusk']

Layout of the source

src/tokens/palettes/   one stylesheet per palette, light and dark (generated)
src/tokens/type.css    font slots, the type scale, the weights
src/tokens/rhythm.css  radius, rhythm, the stage width, motion
src/treatments/        base, cards, chrome, hero, picker, journey, desk, care, record, close
scripts/               palettes.mjs (the recipe), generate-tokens.mjs, subset-fonts.py

Color literals live only under tokens/; the test suite fails one anywhere else.

License

See LICENSE.md.