Theme Saturday

Saturday is a Tome theme for indoor places people go to play: trampoline parks, ice and roller rinks, bowling and arcade complexes, climbing gyms, laser tag, indoor sports complexes and kids' play cafes. Its line is "Pick your night": a visitor has a free evening or a birthday coming and is choosing between this place and three others, and the page answers what there is to do, whether it is open tonight, what it costs, whether the kids are old enough, and how to book a party without phoning. Its look is whole bands: the first screen is a sun-yellow field that holds the header, a choice of who is coming, a photo panel and the session board, and every band after it is one color, with the cards sitting inside the bands.

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 ten blocks and chrome through their public hooks: high-impact-hero (the split variant with its choice group), local-class-schedule (the board variant), slat-deck, event-list (the cards variant), stat (the sourced variant), local-price-list (the package variant), faq, the tome-forms planner (stepsDisplay: 'stacked'), local-logistics (the cards variant) and section-header (the ruled-split variant, as every band's opener).

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 Saturday turns on. @wabbit/tome-core is needed only for the @wabbit/tome-theme-saturday/register subpath and the ThemeManifest type. The block packs are optional peers: each carries the hooks Saturday styles at the release listed, and a site that omits a pack simply never renders its blocks, so the rules for them match nothing. 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-saturday/styles.css'
import '@wabbit/tome-theme-saturday/fonts.css'

<html data-tome-theme="saturday">                                                    <!-- Bounce, light -->
<html data-tome-theme="saturday" data-tome-palette="rink">                           <!-- Rink, light -->
<html data-tome-theme="saturday" data-tome-palette="court" data-theme="dark">        <!-- Court, derived dark -->
<html data-tome-theme="saturday" data-tome-palette="arcade" data-theme="dark">       <!-- Arcade, as designed -->

With no data-tome-palette the theme renders Bounce. data-theme="dark" gives Bounce, Rink and Court their derived dark mode. Arcade'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-saturday/register'

Recommended chrome: Navbar 1 with the header's two buttons (the waiver as an outline button, Book as the default) and the local pack's live status bar in the chrome announcementSlot, so the status strip sits above the logo row; below 1024px the header is the platform's phone bar and the waiver and Book ride the mobileActionBar. Footer 7, which the theme paints as its own full-width tonal zone. Section openers are section-header in its ruled-split variant. The starter's logo may use the theme's lockup hooks (data-saturday-lockup, data-saturday-mark, data-saturday-lockup-name).

Palettes

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

The field is the band: the first screen's header strip, header, hero and board, and the packages. The sign fills the action and paints the "what's on" band. The wash paints the planner band and fills a preset field. The tint paints the logistics band and every question. The page ground carries the deck, the scoreboard card's surroundings and the footer's neighbor. Two roles are derived, not picked: the scoreboard's figure color (the first of the band, band accent, sign and accent text that clears 4.5:1 on the ink) and the sign pill's edge on the field (the sign where it clears 3:1 against the field, else the field's ink: Arcade dark's hot pink-red sits on a coral field at about 1.1:1, and Court's purple action sits on its purple field).

Status

Every status pairs a shape and words with its color. The board's chip says "On now, until 7:00" (a filled dot on the success tint), "Starts 7:30" (a hollow ring on the tint), "Sold out" (a square on the error tint) or "Finished" (a dash, dimmed); "Sold out" appears only from a real availability field. The header's status says "Open now, until 10 PM" with a filled dot, or a hollow ring when closed. Nothing is fake scarcity: no countdown, no "only 3 left", and no animation but the one reveal and the deck's widening.

What the treatments do

• The yellow first screen. The status strip (the announcement slot, right-aligned) and the header frame are the field color, and the hero and the board under them are the same band. The header is two rows from 1024px: the logo with the waiver (outline) and Book (the sign fill), then the nav as a row of white pills, the current page in the ink.
• The hero and its choice. Headline, intro and "Who's coming?" take the left 8 of 16 columns, the choices an even 2x2 that works with no script, each answering with one sentence and its own action. The photo panel takes the right 8, rounded, from the headline to the bottom of the choice; on phones it sits after the intro.
• The Session Board. Today's sessions as tickets: time, activity with age rule and notes, price, state chip. It renders nothing without a session today, and the hero then closes the gap.
• The Activity Deck. Full-height photo slats, the open one widening, the rest narrowing to vertical names on a dark scrim that is dark in every mode; they stack on phones, and every collapsed name reads in full.
• What's on, the scoreboard, the packages, the questions. Date-tile event cards on a sign band (a still strip, no marquee); a rounded ink card with four outlined cells and bright figures, inside the content width; packages as the roundest object on the page (36px) with price, headcount, extra price, length, inclusions and any deposit; tint-card questions ending in a "Still have a question?" card.
• The Planner, then the logistics. One enquiry for every bookable thing, as numbered groups on a wash band, preset from a card's ?type= link, with its reply time beside the submit; then four logistics cards on a tint band, with no CTA band under it. The footer is its own tonal zone.

Motion is one primitive, the platform scroll reveal (a rise of 18px over 600ms, played once), and the deck's widening, which the block owns. Reduced motion turns every transition and the reveal off and hides nothing. Interactive targets are at least 44px; fields are 48px.

Fonts

Two families ship inside the package as latin-subset woff2 files, each with its SIL OFL 1.1 license: Unbounded (display; variable wght 700 to 800; fonts/OFL-Unbounded.md) and Figtree (body and interface; variable wght 400 to 800, no italic; fonts/OFL-Figtree.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-saturday/fonts.css': the bundler resolves the files from this package.
• Your own host: copy the files from @wabbit/tome-theme-saturday/fonts/* and inject getSaturdayFontStyles({ src }).
• next/font/local, using the files from getSaturdayFontFaces().

import { getSaturdayFontPreloads } from '@wabbit/tome-theme-saturday/fonts'

// in <head>: preload the display face and the interface face
{getSaturdayFontPreloads({ src: '/fonts/saturday/' }).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 5bb28733cec313b63fbd415b574b5ae35c8aa8b8:

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 in the recipe's check, and at the default weight in the test suite's re-read of the shipped files). So session times, prices, dates, counts and phone numbers are set with font-variant-numeric: tabular-nums, on the whole document and again on every figure hook. Code falls back to the system monospace stack (the manifest has no mono slot).

Public API

import { saturdayThemeManifest } from '@wabbit/tome-theme-saturday/manifest'
// saturdayThemeManifest.name === 'saturday'; .selector === '[data-tome-theme="saturday"]'

Layout of the package

src/
  styles.css            entry: imports everything below, in order
  fonts.css, fonts.ts   the @font-face rules and the font descriptors
  fonts/                the two woff2 files and their OFL licenses (verbatim)
  manifest.ts           the ThemeManifest
  register.ts           registers the manifest (a side-effect subpath)
  tokens/palettes/      GENERATED, one file per palette: color only, light and dark
  tokens/type.css       font slots, the scale, the weights
  tokens/rhythm.css     radius, rhythm, the stage width, motion, the reveal
  treatments/           one file per area, through public hooks only
scripts/
  palettes.mjs          the palette recipe (contrast and delta-E against every shipped palette)
  extract-roles.mjs     palettes.json -> palette-roles.json
  generate-tokens.mjs   palette-roles.json -> tokens/palettes/*.css
  subset-fonts.py       the font recipe (pinned sources, tabular-figure check)
  copy-assets.mjs       build step: copies the stylesheets and fonts to dist/
tests/                  conformance, palettes, contrast, fonts, hooks, hook coverage, treatments, no color literals, manifest

Color literals live only in tokens/; the test suite fails one anywhere else. Every treatment rule is scoped to [data-tome-theme="saturday"], reaches blocks through published data-* hooks (never a class name), and takes every color from a token.

Related

• @wabbit/tome-theme-grounds is the neighbor: acreage, many spaces, a scheduled thing. Saturday is one building, many activities, and a visitor choosing what to do, often tonight.
• The block packs listed under Install carry the hooks this theme styles; their READMEs publish them.

License

See LICENSE.md. The bundled fonts are under the SIL Open Font License 1.1 (src/fonts/OFL-*.md).